/* ==========================================================================
   INVEST TELANGANA — RISING
   Design system + components
   --------------------------------------------------------------------------
   01  Tokens
   02  Reset
   03  Typography
   04  Layout primitives
   05  Chrome (cursor, progress, rail, preloader)
   06  Header + mega menu
   07  Buttons
   08  Hero
   09  Ticker
   10  Why Telangana
   11  Infrastructure
   12  By the numbers
   13  TG-iPASS
   14  Trusted by
   15  Telangana 2047
   16  Voices
   17  Call to action
   18  FDI desk
   19  Footer
   20  Motion utilities
   21  Responsive
   ========================================================================== */

/* 01 ── TOKENS ─────────────────────────────────────────────────────────── */

:root{
  /* Brand */
  --indigo:#2D308F;
  --indigo-d:#212463;
  --indigo-l:#4A4EC4;
  --orange:#EF6106;
  --orange-d:#C64C02;
  --orange-l:#FF8534;
  --sky:#0483CE;
  --sky-l:#37A9EC;
  --green:#06A519;
  --green-l:#2FCB43;

  /* Ground — light */
  --paper:#FFFFFF;
  --paper-2:#F6F7FC;
  --paper-3:#EDEFF9;
  --paper-warm:#FBFAF7;

  /* Ink */
  --ink:#0A0C2B;
  --ink-2:#3D4166;
  --ink-3:#6C7192;
  --ink-4:#9AA0BC;

  /* Lines & fills */
  --line:rgba(45,48,143,.13);
  --line-2:rgba(45,48,143,.07);
  --line-3:rgba(45,48,143,.22);
  --tint:rgba(45,48,143,.04);

  /* Gradients */
  --g-brand:linear-gradient(115deg,var(--indigo) 0%,var(--sky) 48%,var(--green) 100%);
  --g-heat:linear-gradient(115deg,#fecc30 0%,#75ab27 38%,#75ab27 100%);
  --g-heat-blue:linear-gradient(115deg,#0365e5 0%,#2464b7 38%,#034dac 100%);
  --g-rise:linear-gradient(180deg,var(--indigo) 0%,var(--sky) 60%,var(--green) 100%);
  --g-line:linear-gradient(90deg,var(--indigo),var(--sky),var(--green),var(--orange));

  /* Type */
  --f-head:"Ubuntu",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Metrics */
  --shell:min(1300px,100% - 5rem);
  --gut:clamp(1.25rem,3vw,2.5rem);
  --r:14px;
  --r-lg:22px;
  --r-pill:100px;
  --hdr-h:78px;
  /* the utility bar was removed; the token stays at zero because sixteen
     layout calcs across eight stylesheets add it to the header height */
  --util-h:0px;

  /* Elevation — light, cool, brand-tinted */
  --sh-1:0 1px 2px rgba(10,12,43,.04),0 2px 8px rgba(45,48,143,.05);
  --sh-2:0 2px 4px rgba(10,12,43,.03),0 10px 28px rgba(45,48,143,.08);
  --sh-3:0 4px 10px rgba(10,12,43,.04),0 24px 60px rgba(45,48,143,.13);
  --sh-4:0 40px 100px rgba(45,48,143,.18);

  /* Easing */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
}

/* 02 ── RESET ─────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
@font-face {
  font-family: 'Bacalisties';
  src: url('../fonts/Bacalisties.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
  color-scheme:light;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

body{
  font-family:var(--f-body);
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.65;
  font-weight:400;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}

img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
/* the display rules above are author-level and would otherwise beat the UA's
   [hidden] rule, leaving hidden images, pins and panels on screen */
[hidden]{display:none !important}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:3px;
  border-radius:4px;
}
::selection{background:rgba(239,97,6,.18);color:var(--ink)}

.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skip{
  position:fixed;top:10px;left:10px;z-index:9999;
  padding:.7rem 1.2rem;background:var(--indigo);color:#fff;
  border-radius:var(--r-pill);font-weight:700;font-size:.85rem;
  transform:translateY(-160%);transition:transform .3s var(--e-out);
}
.skip:focus{transform:none}

/* 03 ── TYPOGRAPHY ────────────────────────────────────────────────────── */

h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  color:var(--ink);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.028em;
}

.d1{font-size:clamp(3.1rem,6.2vw,7.6rem);line-height:1.2;letter-spacing:-.042em}
.d2{font-size:clamp(2.4rem,4vw,3.8rem);line-height:1.2;letter-spacing:-.036em}
.d3{font-size:clamp(1.9rem,3.4vw,3.15rem);line-height:1.2;letter-spacing:-.03em}
.d4{font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.2;letter-spacing:-.022em}

.thin{font-weight:300}
.med{font-weight:500}


.lede{
  font-size:1rem;
  line-height:1.62;
  color:var(--ink-2);
  max-width:56ch;
  font-weight:400;
}
.sub{color:var(--ink-3);font-size:.95rem;line-height:1.6}

/* Gradient-filled text */
.grad{
  background:var(--g-brand);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.grad-heat{
  background:var(--g-heat);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* Italic accent used on second headline lines */


.num{
  font-family:var(--f-head);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.045em;
  line-height:.86;
  color:var(--ink);
}

/* 04 ── LAYOUT PRIMITIVES ─────────────────────────────────────────────── */

.shell{width:var(--shell);margin-inline:auto}
.shell-wide{width:min(1720px,100% - 3rem);margin-inline:auto}

section{position:relative}
.sec{padding-block:clamp(4.5rem,11vw,5rem)}
.sec--tight{padding-block:clamp(4rem,7vw,7rem)}

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.6rem,4vw,4.5rem);
  align-items:center;
  margin-bottom:clamp(2.2rem,3vw,3rem);
}
.sec-head__t{display:grid;gap:1.35rem;justify-items:start;}
.sec-head__a{padding-bottom:.5rem}

/* Hairline architectural grid, drawn behind light sections */
.gridlines{
  display: none;
  position:absolute;inset:0;pointer-events:none;z-index:0;
  --gl:var(--line-2);
  background-image:
    linear-gradient(90deg,var(--gl) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  background-position:0 0;
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  opacity:.9;
}

/* Soft brand aurora — the light-theme replacement for a dark glow */
.aura{
  position:absolute;pointer-events:none;z-index:0;
  border-radius:50%;
  filter:blur(70px);
  opacity:.5;
}
.aura--indigo{background:radial-gradient(circle,rgba(45,48,143,.32),transparent 68%)}
.aura--sky{background:radial-gradient(circle,rgba(4,131,206,.3),transparent 68%)}
.aura--green{background:radial-gradient(circle,rgba(6,165,25,.26),transparent 68%)}
.aura--orange{background:radial-gradient(circle,rgba(239,97,6,.24),transparent 68%)}

.rule{height:1px;background:var(--line);border:0}
.rule-grad{height:1px;background:var(--g-line);opacity:.5;border:0}

.ground-2{background:var(--paper-2)}
.ground-3{background:var(--paper-3)}
.ground-warm{background:var(--paper-warm)}

/* Sections sit above their decoration */
.sec > .shell,.sec > .shell-wide{position:relative;z-index:1}

/* 05 ── CHROME ────────────────────────────────────────────────────────── */

/* Custom cursor */
.cur,.cur-ring{
  position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  border-radius:50%;will-change:transform;
  mix-blend-mode:normal;
}
.cur{
  width:7px;height:7px;background:var(--orange);
  margin:-3.5px 0 0 -3.5px;
  transition:opacity .3s,width .25s var(--e-out),height .25s var(--e-out);
}
.cur-ring{
  width:36px;height:36px;margin:-18px 0 0 -18px;
  border:1.4px solid rgba(45,48,143,.4);
  transition:width .35s var(--e-out),height .35s var(--e-out),
             margin .35s var(--e-out),background .35s var(--e-out),
             border-color .35s var(--e-out),opacity .3s;
}
.cur-ring::after{
  content:attr(data-label);
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-head);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;opacity:0;transition:opacity .25s;
}
html.cur-hover .cur-ring{
  width:62px;height:62px;margin:-31px 0 0 -31px;
  border-color:transparent;background:rgba(45,48,143,.1);
}
html.cur-hover .cur{width:4px;height:4px;margin:-2px 0 0 -2px}
html.cur-view .cur-ring{
  width:92px;height:92px;margin:-46px 0 0 -46px;
  background:var(--indigo);border-color:transparent;
}
html.cur-view .cur-ring::after{opacity:1}
html.cur-view .cur{opacity:0}
html.cur-hidden .cur,html.cur-hidden .cur-ring{opacity:0}

@media (pointer:coarse),(hover:none){
  .cur,.cur-ring{display:none}
}

/* Scroll progress */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9997;pointer-events:none;
}
.progress__bar{
  height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--g-line);
  will-change:transform;
}

/* Section rail */
.rail{
  position:fixed;left:max(1.1rem,calc((100vw - var(--shell)) / 2 - 2.6rem));
  top:50%;transform:translateY(-50%);
  z-index:60;display:grid;gap:.85rem;
  opacity:0;transition:opacity .5s var(--e-out);
}
.rail.is-on{opacity:1}
.rail__i{
  position:relative;display:flex;align-items:center;gap:.7rem;
  padding:.1rem 0;
}
.rail__d{
  width:7px;height:7px;border-radius:50%;
  background:var(--line-3);
  transition:background .35s var(--e-out),transform .35s var(--e-spring);
}
.rail__l{
  font-family:var(--f-head);font-size:.65rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--e-out),transform .3s var(--e-out);
  white-space:nowrap;
}
.rail__i:hover .rail__l,.rail__i.is-on .rail__l{opacity:1;transform:none}
.rail__i.is-on .rail__d{background:var(--orange);transform:scale(1.5)}
@media (max-width:1400px){.rail{display:none}}

/* Preloader */
.pre{
  position:fixed;inset:0;z-index:9999;
  background:var(--paper);
  display:grid;place-items:center;
}
.pre__in{display:grid;gap:1.6rem;justify-items:center;width:min(320px,70vw)}
.pre__mark{width:64px;height:64px;overflow:visible}
.pre__mark path,.pre__mark line{
  fill:none;stroke:var(--indigo);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.pre__bar{
  width:100%;height:2px;background:var(--line);position:relative;overflow:hidden;
}
.pre__bar i{
  position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%;
  background:var(--g-line);
}
.pre__meta{
  display:flex;justify-content:space-between;width:100%;
  font-family:var(--f-head);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.pre__pct{color:var(--indigo);font-weight:500}
.pre__curtain{
  position:fixed;inset:0;z-index:9998;background:var(--indigo);
  transform:scaleY(0);transform-origin:50% 100%;pointer-events:none;
}
html.no-motion .pre,html.is-ready .pre{display:none}

/* 06 ── HEADER ────────────────────────────────────────────────────────── */

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:transform .5s var(--e-out),background .35s,box-shadow .35s,
             backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom-color:var(--line);
  box-shadow:0 1px 26px rgba(45,48,143,.06);
}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr.is-open{transform:none}

/* --- progressive blur -----------------------------------------------------
   Five stacked backdrop layers. Each blurs twice as much as the one below and
   is masked to a shorter band, so the blur they sum to ramps smoothly from
   ~31px at the very top to nothing below the bar — no hard cut-off line, and
   no colour laid over the page. A touch of brightness keeps the dark nav type
   legible whatever frame of the footage is behind it. */
.hdr__blur{
  position:absolute;left:0;right:0;top:var(--util-h);z-index:-1; background-color:#fff;
  height:calc(var(--hdr-h));
  pointer-events:none;
  opacity:1;
}
/*.hdr__blur span{position:absolute;inset:0;display:block}

.hdr__blur span:nth-child(1){
  backdrop-filter:blur(1px) saturate(1.05);
  -webkit-backdrop-filter:blur(1px) saturate(1.05);
  mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
}
.hdr__blur span:nth-child(2){
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 92%);
}
.hdr__blur span:nth-child(3){
  backdrop-filter:blur(4px) brightness(1.10);
  -webkit-backdrop-filter:blur(4px) brightness(1.10);
  mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 80%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 80%);
}
.hdr__blur span:nth-child(4){
  backdrop-filter:blur(8px) brightness(1.20) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) brightness(1.20) saturate(1.05);
  mask-image:linear-gradient(180deg,#000 0%,#000 43%,transparent 68%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 43%,transparent 68%);
}
.hdr__blur span:nth-child(5){
  backdrop-filter:blur(16px) brightness(1.35) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) brightness(1.35) saturate(1.15);
  mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 56%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 30%,transparent 56%);
}*/

/* once the glass bar takes over there is nothing left for it to do */
.hdr.is-stuck .hdr__blur{opacity:0}

/* Main bar */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:var(--hdr-h);
  transition:height .35s var(--e-out);
}
.hdr.is-stuck .bar{height:66px}

.brand{display:flex;align-items:center;gap:.85rem;flex:0 0 auto}
/* no !important here — it would beat the stuck-header and narrow-screen sizes
   below and push the menu button off the edge of a phone */
.brand img{height:60px;width:auto;transition:height .35s var(--e-out)}
.hdr.is-stuck .brand img{height:58px}
.brand__div{width:1px;height:30px;background:var(--line)}
.brand__t{display:grid;line-height:1.15}
.brand__t b{
  font-family:var(--f-head);font-size:.98rem;font-weight:700;
  color:var(--ink);letter-spacing:-.02em;
}
.brand__t span{
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3);
}

/* Nav */
.nav{display:flex;align-items:center;gap:.15rem}
.nav__b{
  position:relative;display:flex;align-items:center;gap:.34rem;
  padding:.62rem .82rem;border-radius:var(--r-pill);
  font-size:.895rem;font-weight:600;color:var(--ink);
  transition:color .25s,background .25s;
  white-space:nowrap;
}
.nav__b svg{width:11px;height:11px;transition:transform .3s var(--e-out);opacity:.55}
.nav__b:hover{background:var(--tint)}
.nav__b[aria-expanded="true"]{color:var(--indigo);background:var(--tint)}
.nav__b[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__b::after{
  content:"";position:absolute;left:.82rem;right:.82rem;bottom:.3rem;height:1.5px;
  background:var(--orange);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--e-out);
}
.nav__b.is-cur::after{transform:scaleX(1)}

.acts{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}

/* Mega menu */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 30px 70px rgba(45,48,143,.11);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .3s var(--e-out),transform .38s var(--e-out),visibility .3s;
}
.mega.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.mega__in{
  display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);
  padding-block:clamp(2rem,3.4vw,3.2rem);
}
.mega__side{display:grid;gap:1rem;align-content:start;padding-right:2rem;border-right:1px solid var(--line-2)}
.mega__side h3{font-size:1.5rem;letter-spacing:-.03em}
.mega__side p{font-size:.86rem;color:var(--ink-3);line-height:1.55}
.mega__side .lnk{margin-top:.3rem;}

.mega__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.2rem; align-items: start;}
.mega__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega__i{
  position:relative;display:grid;gap:.28rem;align-content:start;
  padding:.85rem .95rem;border-radius:10px;
  transition:background .25s;
  overflow:hidden;
}
.mega__i::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;
  background:var(--g-rise);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .35s var(--e-out);
}
.mega__i:hover{background:var(--tint)}
.mega__i:hover::before{transform:scaleY(1)}
.mega__i b{
  font-family:var(--f-head);font-size:.895rem;font-weight:500;
  color:var(--ink);letter-spacing:-.012em;line-height:1.25;
}
.mega__i span{font-size:.755rem;color:var(--ink-4);line-height:1.4}
.mega__i em{
  font-family:var(--f-head);font-style:normal;font-size:.62rem;
  color:var(--ink-4);letter-spacing:.1em; display: none;
}

/* Mobile drawer */
.burger{
  display:none;width:42px;height:42px;place-items:center;
  border:1px solid var(--line);border-radius:12px;
  transition:background .25s,border-color .25s;
}
.burger:hover{background:var(--tint)}
.burger i{display:block;width:17px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .4s var(--e-out),opacity .25s}
.burger i + i{margin-top:4.6px}
.burger.is-on i:nth-child(1){transform:translateY(6.2px) rotate(45deg)}
.burger.is-on i:nth-child(2){opacity:0}
.burger.is-on i:nth-child(3){transform:translateY(-6.2px) rotate(-45deg)}

/* Closed, the drawer is slid up behind the header — and the header's
   background is a progressive blur, so a merely translated drawer showed
   through it. visibility takes it out of the picture, out of the tab order
   and off the accessibility tree; the 0s delay holds it visible until the
   slide has finished, so closing still animates. */
.drawer{
  position:fixed;inset:var(--hdr-h) 0 0;z-index:880;
  background:var(--paper);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .6s var(--e-io),visibility 0s linear .6s;
  padding:1.6rem var(--gut) 5rem;
  display:none;
}
.drawer.is-on{
  transform:none;visibility:visible;
  transition:transform .6s var(--e-io),visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .drawer{transition:visibility 0s linear .01s}
  .drawer.is-on{transition:visibility 0s}
}
.drawer__g{display:grid;gap:.2rem;max-width:640px;margin-inline:auto}
.drawer__acc > button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:1.05rem 0;border-bottom:1px solid var(--line-2);
  font-family:var(--f-head);font-size:1.28rem;font-weight:500;color:var(--ink);
  letter-spacing:-.02em;text-align:left;
}
.drawer__acc > button svg{width:14px;height:14px;opacity:.5;transition:transform .35s var(--e-out)}
.drawer__acc[data-open="1"] > button svg{transform:rotate(45deg);opacity:1}
/* a top-level item that goes straight somewhere, rather than opening a panel:
   same row as an accordion header so the list reads evenly */
.drawer__lnk{
  display:flex;align-items:center;width:100%;
  padding:1.05rem 0;border-bottom:1px solid var(--line-2);
  font-family:var(--f-head);font-size:1.28rem;font-weight:500;color:var(--ink);
  letter-spacing:-.02em;text-align:left;
  transition:color .25s,padding-left .25s;
}
.drawer__lnk:hover{color:var(--indigo);padding-left:.35rem}
.drawer__p{display:grid;overflow:hidden;height:0;transition:height .45s var(--e-io)}
.drawer__p ul{padding:.9rem 0 1.2rem;display:grid;gap:.15rem}
.drawer__p a{
  display:block;padding:.52rem 0 .52rem 1.1rem;font-size:.95rem;color:var(--ink-2);
  border-left:1.5px solid var(--line);transition:border-color .25s,color .25s,padding-left .25s;
}
.drawer__p a:hover{color:var(--indigo);border-color:var(--orange);padding-left:1.4rem}
.drawer__cta{margin-top:2rem;display:grid;gap:.7rem;max-width:640px;margin-inline:auto}

/* 07 ── BUTTONS ───────────────────────────────────────────────────────── */

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;
  padding:.92rem 1.6rem;
  border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:.9rem;font-weight:700;letter-spacing:.005em;
  white-space:nowrap;
  transition:transform .35s var(--e-out),box-shadow .35s var(--e-out),
             background .3s,color .3s,border-color .3s;
  overflow:hidden;
  isolation:isolate;
  will-change:transform;
}
.btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform .4s var(--e-out)}
.btn:hover svg{transform:translateX(3px)}

.btn--pri{color:#fff;background:var(--orange);box-shadow:0 6px 20px rgba(239,97,6,.28)}
.btn--pri::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--orange-d),var(--orange) 50%,var(--orange-l));
  opacity:0;transition:opacity .35s;
}
.btn--pri:hover{box-shadow:0 12px 34px rgba(239,97,6,.36)}
.btn--pri:hover::before{opacity:1}

.btn--ink{color:#fff;background:var(--indigo);box-shadow:0 6px 20px rgba(45,48,143,.24)}
.btn--ink::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--g-brand);
  opacity:0;transition:opacity .4s;
}
.btn--ink:hover{box-shadow:0 12px 34px rgba(45,48,143,.3)}
.btn--ink:hover::before{opacity:1}

.btn--out{
  color:var(--ink);border:1.4px solid var(--line-3);background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn--out:hover{border-color:var(--indigo);color:var(--indigo);background:#fff}

.btn--ghost{color:var(--ink);padding-inline:1rem}
.btn--ghost:hover{color:var(--indigo)}

.btn--sm{padding:.66rem 1.2rem;font-size:.83rem}
.btn--lg{padding:1.1rem 2rem;font-size:.97rem}
.btn--block{width:100%}

/* Animated inline link */
.lnk{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.9rem;color:var(--indigo);
  padding-bottom:2px;
}
.lnk svg{width:14px;height:14px;transition:transform .4s var(--e-out)}
.lnk::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.4px;
  background:currentColor;transform-origin:100% 50%;transform:scaleX(1);
  transition:transform .4s var(--e-out);
}
.lnk:hover::after{transform-origin:0 50%;animation:lnkSwipe .5s var(--e-out)}
.lnk:hover svg{transform:translateX(4px)}
@keyframes lnkSwipe{
  0%{transform:scaleX(1);transform-origin:100% 50%}
  50%{transform:scaleX(0);transform-origin:100% 50%}
  51%{transform:scaleX(0);transform-origin:0 50%}
  100%{transform:scaleX(1);transform-origin:0 50%}
}

/* 08 ── HERO ──────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  padding-top:calc(var(--hdr-h) + var(--util-h) + clamp(2rem,5vw,4rem));
  padding-bottom:0;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(4,131,206,.09),transparent 60%),
    radial-gradient(90% 80% at 10% 90%,rgba(6,165,25,.08),transparent 62%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}

/* --- video ground ---------------------------------------------------------
   The footage is real Hyderabad, but the page stays a light page: a heavy
   paper wash sits over it, opaque under the headline and clearing towards the
   right so the city reads behind the particle map. */
.hero__media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:var(--paper-2);
}
.hero__media img,
.hero__media video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
  filter:saturate(.95) contrast(1.04) brightness(1.02);
}
.hero__media video{opacity:0;transition:opacity 1.2s var(--e-out)}
.hero__media video.is-on{opacity:1}
.hero__media img{transform:scale(1.02)}

/* Frosted paper over the whole frame, lifted away in one soft window so the
   city reads sharp on the right. Because the frost is a backdrop filter, the
   type column stays legible no matter which frame of the loop is on screen. */
.hero__frost{
  display: none;
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(26px) saturate(1.35) brightness(1.16);
  -webkit-backdrop-filter:blur(26px) saturate(1.35) brightness(1.16);
  mask-image:radial-gradient(58% 66% at 76% 50%,transparent 26%,rgba(0,0,0,.55) 56%,#000 78%);
  -webkit-mask-image:radial-gradient(58% 66% at 76% 50%,transparent 26%,rgba(0,0,0,.55) 56%,#000 78%);
}

.hero__scrim{
  display: none;
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    /* brand light through the city */
    radial-gradient(72% 86% at 80% 16%,rgba(4,131,206,.15),transparent 60%),
    radial-gradient(60% 70% at 12% 92%,rgba(6,165,25,.12),transparent 62%),
    /* vertical merge into the proof strip */
    linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.06) 26%,
                    rgba(255,255,255,.24) 64%,rgba(255,255,255,.84) 89%,var(--paper) 100%),
    /* the type column stays paper */
    linear-gradient(96deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 22%,
                    rgba(255,255,255,.52) 38%,rgba(255,255,255,.12) 56%,
                    rgba(255,255,255,0) 72%);
}

/* Pause control for the looping footage */
.hero__vtoggle{
  position:absolute;right:max(1.4rem,calc((100vw - var(--shell)) / 2));
  top:calc(var(--hdr-h) + var(--util-h) + 1.4rem);
  z-index:6;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.44rem .85rem .44rem .5rem;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
  transition:background .3s,border-color .3s,color .3s,opacity .4s;
  opacity:0;
}
.hero__vtoggle.is-live{opacity:1}
.hero__vtoggle:hover{background:#fff;border-color:var(--line-3);color:var(--ink)}
.hero__vtoggle i{
  width:20px;height:20px;border-radius:50%;background:var(--indigo);
  display:grid;place-items:center;flex:0 0 auto;
}
.hero__vtoggle svg{width:9px;height:9px;fill:#fff}
.hero__vtoggle .ico-play{display:none}
.hero__vtoggle[aria-pressed="true"] .ico-play{display:block}
.hero__vtoggle[aria-pressed="true"] .ico-pause{display:none}
@media (max-width:860px){.hero__vtoggle{display:none}}

.hero__gl{
  position:absolute;inset:0;z-index:3;
  opacity:0;transition:opacity 1.4s var(--e-out);
  /* keep the point cloud clear of the headline column */
  mask-image:linear-gradient(101deg,transparent 20%,rgba(0,0,0,.35) 34%,#000 52%);
  -webkit-mask-image:linear-gradient(101deg,transparent 20%,rgba(0,0,0,.35) 34%,#000 52%);
}
.hero__gl.is-on{opacity:1}
/* over live footage the map reads as an overlay, not a subject */
.hero.has-film .hero__gl.is-on{opacity:.78}
.hero__gl canvas{width:100%;height:100%;display:block}

.hero__grid{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background-color:rgba(0,0,0,0.4) !important;
  /*background-image:linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 100%);*/
}

.hero__in{position:relative;z-index:4;width:var(--shell);margin-inline:auto;padding-bottom:clamp(1.6rem,3vw,2.6rem)}

.hero__meta{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
}
.hero__geo{
  font-family:var(--f-head);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-4);
}
.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.44rem .95rem .44rem .5rem;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.78rem;font-weight:700;color:var(--ink);
}
.hero__badge i{
  width:22px;height:22px;border-radius:50%;background:var(--g-heat);
  display:grid;place-items:center;
}
.hero__badge i::after{
  content:"";width:6px;height:6px;border-radius:50%;background:#fff;
  animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}

.hero__h{margin-bottom:clamp(1.2rem,2.4vw,1.9rem)}

/* --- type over live footage -----------------------------------------------
   With the wash removed the copy sits directly on the film, so legibility has
   to come from the type rather than from anything laid behind it. The footage
   is a bright daytime aerial, so the ink stays dark (on-brand) and each block
   carries a soft white halo that separates it from the detail underneath.
   Scoped by sibling so it only applies to a hero that actually has media. */
.hero__media ~ .hero__in .hero__h{
  color: #fff; max-width: 25ch; margin: auto; text-align: center;
}
.hero__media ~ .hero__in .lede{
  color:#fff;
  font-weight:600;
}
.hero__media ~ .hero__in .lede b{font-weight:800}
.hero__media ~ .hero__in .hero__geo{
  color:var(--ink-2);
  text-shadow:0 0 14px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9);
}
/* the outline button is a translucent pill — give it a solid edge on film */
.hero__media ~ .hero__in .btn--out{
  background:rgba(255,255,255,.86);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 6px 22px rgba(10,12,43,.16);
}
.hero__media ~ .hero__in .btn--out:hover{background:#fff}

.hero__media ~ .hero__scroll span{
  color:var(--ink-2);
  text-shadow:0 0 12px rgba(255,255,255,.95);
}
.hero__l{display:block;overflow:hidden;padding-bottom:.06em}
.hero__l > span{display:block;will-change:transform}
.hero__l--2{margin-left:clamp(0px,4.6vw,4.6rem)}

.hero__body{
  display:grid; /*grid-template-columns:minmax(0,1fr) minmax(0,.86fr);*/
  gap:clamp(1.4rem,4vw,4rem);align-items:end; justify-content: center;
  margin-bottom:clamp(2rem,4vw,3.2rem);
}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;}

/* Proof strip */
.proof{
  position:relative;z-index:5;
  border-top:1px solid var(--line); border-bottom: 1px solid #e4e4e4;
  background:#f5f6fc;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.proof__in{
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.proof__i{
  position:relative;padding:clamp(1.1rem,2.2vw,1.75rem) clamp(.6rem,1.6vw,1.6rem)
          clamp(1.1rem,2.2vw,1.75rem) 0;
  display:flex; flex-direction: column; gap:.24rem;
}
.proof__i + .proof__i{padding-left:clamp(.9rem,2vw,2rem)}
.proof__i + .proof__i::before{
  content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--line);
}
.proof__n{
  font-family:var(--f-head);font-weight:bold;
  font-size:clamp(1.55rem,2.6vw,2rem);
  letter-spacing:-.04em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.proof__n small{font-size:.5em;font-weight:500;letter-spacing:-.01em}
.proof__l{
  margin-top: 5px;
  font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.45;
}

.hero__scroll{
  display: none;
  position:absolute;right:max(1.4rem,calc((100vw - var(--shell)) / 2));
  bottom:calc(clamp(1.1rem,2.2vw,1.75rem) * 2 + 4.6rem);
  z-index:6;display:grid;justify-items:center;gap:.7rem;
}
.hero__scroll span{
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-4);
  writing-mode:vertical-rl;
}
.hero__scroll i{
  display:block;width:1px;height:56px;background:var(--line-3);position:relative;overflow:hidden;
}
.hero__scroll i::after{
  content:"";position:absolute;inset:0;background:var(--orange);
  animation:scrollTick 2.2s var(--e-io) infinite;
}
@keyframes scrollTick{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}
@media (max-width:900px){.hero__scroll{display:none}}

/* 09 ── TICKER ────────────────────────────────────────────────────────── */

.ticker{
  border-block:1px solid var(--line);
  background: linear-gradient(135deg,  #010f6b 0%,#012ba8 99%);
  overflow:hidden;padding-block:1.9rem;
  position:relative;z-index:2;
}
.ticker__t{display:flex;width:max-content;will-change:transform}
.ticker__t span{
  display:inline-flex;align-items:center;gap:1.5rem;
  padding-inline:1.5rem; font-size:1rem;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;white-space:nowrap;
}
.ticker__t span::after{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--line-3);
}
.ticker__t span:nth-child(4n+1)::after{background:var(--indigo)}
.ticker__t span:nth-child(4n+2)::after{background:var(--orange)}
.ticker__t span:nth-child(4n+3)::after{background:var(--sky)}
.ticker__t span:nth-child(4n)::after{background:var(--green)}

/* 10 ── WHY TELANGANA ─────────────────────────────────────────────────── */

.why{background:var(--paper);overflow:hidden}
.why .aura--sky{width:60vw;height:60vw;max-width:820px;max-height:820px;right:-18vw;top:-12vw;opacity:.35}
.why .aura--green{width:44vw;height:44vw;max-width:600px;max-height:600px;left:-14vw;bottom:-10vw;opacity:.3}

.adv{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.6rem,1vw,1rem);
}
.adv__c{
  --k:3,101,229;
  position:relative;
  grid-column:span 2;
  display:grid;grid-template-rows:auto 1fr auto;gap:1.1rem;
  padding:clamp(1.5rem,2.4vw,2.2rem);
  border:1px solid rgba(var(--k),.14);
  border-radius:var(--r-lg);
  /* clean: a cool glow in one corner and a fade from frosted white into a
     faint tint */
  background:
    radial-gradient(80% 60% at 100% 0%,rgba(var(--k),.1),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(var(--k),.035));
  box-shadow:0 1px 2px rgba(10,12,43,.04),0 14px 34px rgba(10,12,43,.05);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),
             border-color .45s,background-color .45s;
  will-change:transform;
}
/* three complete rows of six: 4+2 / 2+4 / 3+3 */
/*.adv__c:nth-child(1){grid-column:span 4}
.adv__c:nth-child(2){grid-column:span 2}
.adv__c:nth-child(3){grid-column:span 2}
.adv__c:nth-child(4){grid-column:span 4}
.adv__c:nth-child(5){grid-column:span 3}
.adv__c:nth-child(6){grid-column:span 3}*/
.adv__c:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-3);
  border-color:transparent;
}
/* an edge of light that travels round the card on hover */
@property --adva{syntax:'<angle>';inherits:false;initial-value:0deg}
.adv__c::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--adva),transparent 0 55%,rgba(var(--k),.0) 60%,rgb(var(--k)) 80%,#98d048 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s;pointer-events:none;
  animation:advSpin 4.5s linear infinite;
}
@keyframes advSpin{to{--adva:360deg}}
.adv__c:hover::before{opacity:1}
.adv__c:nth-child(2){--k:45,48,143}
.adv__c:nth-child(3){--k:4,131,206}
.adv__c:nth-child(5){--k:45,48,143}
.adv__c:nth-child(6){--k:6,140,70}
@media (prefers-reduced-motion:reduce){.adv__c::before{animation:none}}
html.no-motion .adv__c::before{animation:none}

.adv__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
/* the icons are the artwork itself: no tile behind them and no hover effect */
.adv__ic{
  display:block;flex:0 0 auto;width:60px;height:60px;
  background:none;border-radius:0;
}
.adv__ic img,.adv__ic svg{display:block;width:100%;height:100%;object-fit:contain}

.adv__i{
  display: none;
  font-family:var(--f-head);font-size:.7rem;letter-spacing:.16em;color:var(--ink-4);
}
.adv__h{
  font-size:clamp(1.12rem,1.5vw,1.42rem);letter-spacing:-.024em;line-height:1.18;margin-bottom:10px;
  /* plain text colour: no gradient fill */
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--ink);-webkit-text-fill-color:currentColor;
}
.adv__p{font-size:.905rem;line-height:1.6;color:var(--ink-3)}
/*.adv__c:nth-child(1) .adv__h,
.adv__c:nth-child(4) .adv__h{font-size:clamp(1.28rem,2vw,1.85rem)}*/

/* 11 ── INFRASTRUCTURE ───────────────────────────────────────────────── */

.infra{
  color:#fff;overflow:hidden;
  background: linear-gradient(135deg,  #010f6b 0%,#012ba8 99%);
}
.infra h2, .infra p{color:#fff;}
.infra .aura--indigo{width:52vw;height:52vw;max-width:700px;max-height:700px;left:-16vw;top:14%;opacity:.24}

/* Category tabs */
.tabs{
  display:flex;gap:.35rem;flex-wrap:wrap;
  padding:.4rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  width:max-content;max-width:100%;
  margin-bottom:clamp(2rem,3.6vw,3.4rem);
  position:relative;
}
.tab{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.68rem 1.15rem;border-radius:var(--r-pill);
  font-size:.865rem;font-weight:700;color:#000;
  transition:color .3s;white-space:nowrap;
}
.tab svg{width:16px;height:16px;opacity:.85}
.tab:hover{color:var(--ink)}
.tab.is-on{
  color:#fff;
}
.tabs__pill{
  position:absolute;top:.4rem;bottom:.4rem;left:0;
  border-radius:var(--r-pill);
  transition:transform .55s var(--e-out),width .55s var(--e-out),background .4s;
  z-index:0;box-shadow:0 5px 18px rgba(45,48,143,.24);
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#010f6b+0,012ba8+99 */
background: linear-gradient(135deg,  #010f6b 0%,#012ba8 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
/*.tabs[data-cat="aviation"] .tabs__pill{background:var(--indigo)}
.tabs[data-cat="industry"] .tabs__pill{background:var(--orange);box-shadow:0 5px 18px rgba(239,97,6,.28)}
.tabs[data-cat="roads"]    .tabs__pill{background:var(--sky);box-shadow:0 5px 18px rgba(4,131,206,.28)}
.tabs[data-cat="power"]    .tabs__pill{background:var(--green);box-shadow:0 5px 18px rgba(6,165,25,.26)}
.tabs[data-cat="digital"]  .tabs__pill{background:var(--indigo-l);box-shadow:0 5px 18px rgba(74,78,196,.28)}*/

/* The sub-tab row: the same component a size down, so the hierarchy reads
   without inventing a second control. It sits closer to the panels than the
   group row does, which is what ties it to them. */
.tabs--sub{
  margin-top:calc(clamp(2rem,3.6vw,3.4rem) * -1 + .55rem);
  margin-bottom:clamp(1.6rem,3vw,2.6rem);
  padding:.32rem;
  background:rgba(255,255,255,.55);
  border-color:var(--line-2);
}
.tabs--sub .tab{padding:.5rem .95rem;font-size:.8rem;color:var(--ink-2)}
.tabs--sub .tab svg{width:14px;height:14px}
.tabs--sub .tab:hover{color:var(--ink)}
.tabs--sub .tab.is-on{color:#fff}
.tabs--sub .tabs__pill{
  top:.32rem;bottom:.32rem;
  background:linear-gradient(135deg,#0483ce 0%,#0060e0 99%);
  box-shadow:0 4px 14px rgba(4,131,206,.28);
}
/* Industrial Parks and Power & Water have nothing to choose between, so the
   sub row empties — but it keeps its box. Collapsing it took 48px out of the
   page as the scroll auto-advanced into those two, which moved everything
   below mid-scroll. */
.tabs--sub.is-off{visibility:hidden;pointer-events:none}
.tabs--sub[hidden]{display:none}

.infra__lay{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:start;
}

/* Left panel */
/* Every system stacks into the one grid cell, so the panel area is always as
   tall as the tallest of them and the page below never moves when the tab
   changes. It used to take its height from whichever panel was showing, which
   swung 580px to 898px as the scroll auto-advanced through the six systems —
   that shoved the whole page below mid-scroll, and the code answered it with a
   ScrollTrigger.refresh() on every step. */
.pan{position:relative;display:grid;min-height:520px}
.pan__s{
  grid-area:1 / 1;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px);
  transition:opacity .5s var(--e-out),transform .6s var(--e-out),visibility .5s;
  display:grid;gap:clamp(1.5rem,2.4vw,2.1rem);align-content:start;
}
.pan__s.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.pan__h{font-size:clamp(1.65rem,3vw,2.65rem);letter-spacing:-.032em;line-height:1.05; color: #fff;}
.pan__p{font-size:1.02rem;line-height:1.62;color:var(--ink-2);max-width:52ch}

.mini{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgb(80 85 214 / 76%);
}
.mini__i{
  padding:1.15rem 1rem 1.15rem 0;position:relative;display:grid;gap:.25rem;
}
.mini__i + .mini__i{padding-left:1.1rem}
.mini__i + .mini__i::before{content:"";position:absolute;left:0;top:1.15rem;bottom:1.15rem;width:1px;background:var(--line)}
.mini__n{
  font-family:var(--f-head);font-weight:700;font-size:clamp(1.35rem,2.1vw,1.95rem);
  letter-spacing:-.038em;line-height:1;
  font-variant-numeric:tabular-nums;
   background: linear-gradient(
    to right,
    #fdcd30 0%,
    #e5ad01 52%,
    #e5ad01 99%
  );
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.tabs-scope[data-cat="industry"] .mini__n{color:var(--orange)}
.tabs-scope[data-cat="roads"]    .mini__n{color:var(--sky)}
.tabs-scope[data-cat="power"]    .mini__n{color:var(--green)}
.tabs-scope[data-cat="digital"]  .mini__n{color:var(--indigo-l)}
.mini__l{font-family:var(--f-head);font-size:.635rem;letter-spacing:.13em;text-transform:uppercase;color:#ffffffcc;line-height:1.4}

/* about four cards' worth before it scrolls, so a category with three items
   (Aviation) still shows in full while one with thirteen (Logistics) doesn't
   push the whole panel — and, with it, every other tab sharing .pan's
   shared height — down the page */
.spots{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem;
  max-height:18.5rem;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;
}
/* ---- custom scrollbar for the infrastructure lists (see main.js 07b) ---- */
@property --ft{syntax:'<length>';inherits:false;initial-value:0px}
@property --fb{syntax:'<length>';inherits:false;initial-value:0px}
.spots-wrap{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  --bar-w:14px;
}
.spots-wrap.is-scrollable{grid-template-columns:minmax(0,1fr) var(--bar-w);column-gap:.7rem}
/* native bar off; ours replaces it */
.spots-wrap .spots{
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:auto;
  --ft:0px;--fb:0px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%);
  transition:--ft .35s var(--e-out),--fb .35s var(--e-out);
}
.spots-wrap .spots::-webkit-scrollbar{display:none}
.spots-wrap.is-scrollable:not(.is-top) .spots{--ft:26px}
.spots-wrap.is-scrollable:not(.is-end) .spots{--fb:30px}

.spots-bar{
  display:none;position:relative;flex-direction:column;align-items:center;gap:6px;
  width:var(--bar-w);outline:none;touch-action:none;user-select:none;
}
.spots-wrap.is-scrollable .spots-bar{display:flex}
.spots-bar__track{
  position:relative;flex:1 1 auto;width:6px;min-height:0;border-radius:99px;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  cursor:pointer;
  transition:width .3s var(--e-out),background .3s;
}
.spots-bar__track::before{content:"";position:absolute;inset:0 -8px}   /* a wider hit area */
.spots-bar__fill{
  position:absolute;inset:0;border-radius:inherit;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(to bottom,rgba(55,169,236,0),rgba(55,169,236,.55));
  pointer-events:none;
}
.spots-bar__thumb{
  position:absolute;left:0;right:0;top:0;border-radius:99px;cursor:grab;
  background:linear-gradient(160deg,#fff 0%,var(--sky-l) 55%,var(--sky) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 6px 16px rgba(4,131,206,.55),0 0 14px rgba(55,169,236,.45);
  transition:box-shadow .3s,filter .3s;
  will-change:transform;
}
.spots-bar__grip{
  position:absolute;left:50%;top:50%;width:2px;height:12px;border-radius:2px;translate:-50% -50%;
  background:repeating-linear-gradient(to bottom,rgba(2,30,80,.55) 0 2px,transparent 2px 4px);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.spots-bar__tip{
  position:absolute;right:calc(100% + 12px);top:50%;translate:6px -50%;
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.1em;white-space:nowrap;
  padding:.32rem .6rem;border-radius:8px;color:#fff;
  background:rgba(8,16,70,.88);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .25s,translate .3s var(--e-out);
}
.spots-bar__btn{
  flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  color:rgba(255,255,255,.7);background:rgba(255,255,255,.1);cursor:pointer;
  opacity:.55;transition:background .25s,color .25s,opacity .25s,transform .25s var(--e-spring);
}
.spots-bar__btn svg{width:12px;height:12px}
.spots-bar__btn--down svg{rotate:180deg}
.spots-bar__btn:hover{background:#fff;color:var(--sky);opacity:1;transform:scale(1.12)}
.spots-bar__btn:active{transform:scale(.92)}

/* on wide screens the badge sits on the map side of the bar, clear of the cards */
@media (min-width:1100px){
  .spots-bar__tip{right:auto;left:calc(100% + 12px);translate:-6px -50%}
}

/* wakes up when you scroll, hover or focus; settles back after a moment */
.spots-wrap.is-active .spots-bar__track,
.spots-bar:hover .spots-bar__track,
.spots-bar:focus-visible .spots-bar__track{width:10px;background:rgba(255,255,255,.24)}
.spots-wrap.is-active .spots-bar__btn,.spots-bar:hover .spots-bar__btn{opacity:.95}
.spots-wrap.is-active .spots-bar__tip,
.spots-bar:hover .spots-bar__tip,
.spots-bar:focus-visible .spots-bar__tip{opacity:1;translate:0 -50%}
.spots-bar:hover .spots-bar__grip,.spots-wrap.is-drag .spots-bar__grip{opacity:1}
.spots-bar__thumb:hover{filter:brightness(1.08);box-shadow:0 0 0 1px rgba(255,255,255,.5),0 8px 20px rgba(4,131,206,.65),0 0 20px rgba(55,169,236,.6)}
.spots-wrap.is-drag .spots-bar__thumb{cursor:grabbing;filter:brightness(1.12)}
.spots-wrap.is-drag .spots{cursor:grabbing}
.spots-bar:focus-visible .spots-bar__thumb{outline:2px solid #fff;outline-offset:2px}
@media (hover:none){
  .spots-bar__btn{display:none}
  .spots-bar__track{width:8px}
}
@media (prefers-reduced-motion:reduce){
  .spots-bar__thumb,.spots-bar__track,.spots-bar__tip,.spots-wrap .spots{transition:none}
}

.spot{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:.9rem;
  padding:.85rem .9rem;border-radius:12px;
  text-align:left;width:100%;
  border:1px solid transparent;
  transition:background .3s,border-color .3s,transform .35s var(--e-out);
  background-color:rgba(251,251,251,0.9);
}
.spot:hover,.spot.is-on{background:#fff;border-color:var(--line);transform:translateX(4px);box-shadow:var(--sh-1)}
.spot__d{
  width:9px;height:9px;border-radius:50%;
  background:var(--indigo);position:relative;
  transition:transform .35s var(--e-spring);
}
.tabs-scope[data-cat="industry"] .spot__d{background:var(--orange)}
.tabs-scope[data-cat="roads"]    .spot__d{background:var(--sky)}
.tabs-scope[data-cat="power"]    .spot__d{background:var(--green)}
.tabs-scope[data-cat="digital"]  .spot__d{background:var(--indigo-l)}
.spot.is-on .spot__d{transform:scale(1.35)}
.spot.is-on .spot__d::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid currentColor;color:inherit;
  background:transparent;
  animation:ping 1.8s var(--e-out) infinite;
}
.spot__t{display:grid;gap:.1rem;min-width:0}
.spot__t b{font-family:var(--f-head);font-size:.955rem;font-weight:500;color:var(--ink);letter-spacing:-.014em}
.spot__t span{font-size:.79rem;color:var(--ink-3);line-height:1.4}
.spot__k{
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:5px;background:var(--paper-3);color:var(--ink-3);
  white-space:nowrap;
}
/* status chips read the same as the map legend */
.spot__k[data-s="flagship"]{background:rgba(6,165,25,.12);color:#067a13}
.spot__k[data-s="operational"]{background:rgba(4,131,206,.11);color:#036aa6}
/* the rail corridor row is marked proposed, which had no styling at all —
   it reads like development: not built yet, drawn as an outline */
.spot__k[data-s="proposed"],
.spot__k[data-s="development"]{
  background:transparent;color:#036aa6;
  border:1px dashed rgba(4,131,206,.5);padding-block:calc(.24rem - 1px);
}

@keyframes ping{
  0%{transform:scale(.7);opacity:.9}
  70%,100%{transform:scale(2.3);opacity:0}
}

/* Map */
.mapw{position:sticky;top:calc(var(--hdr-h) + 3rem);display:grid;gap:1.2rem}
.map{
  position:relative;width:100%;aspect-ratio:1004 / 1024;
  border-radius:var(--r-lg);
  isolation:isolate;
}
.map__glow{
  position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(45,48,143,.2),transparent 66%);
  filter:blur(48px);z-index:0;
  transition:background .6s;
}
.tabs-scope[data-cat="industry"] .map__glow{background:radial-gradient(circle,rgba(239,97,6,.18),transparent 66%)}
.tabs-scope[data-cat="roads"]    .map__glow{background:radial-gradient(circle,rgba(4,131,206,.2),transparent 66%)}
.tabs-scope[data-cat="power"]    .map__glow{background:radial-gradient(circle,rgba(6,165,25,.18),transparent 66%)}
.tabs-scope[data-cat="digital"]  .map__glow{background:radial-gradient(circle,rgba(74,78,196,.2),transparent 66%)}

.map__cv{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.map__img{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:contain;
}
/* ── the road network, over the map and under the markers ───────────────
   Stretched to the same box as .map__pins, so its 0-1000 x 0-1049 viewBox
   maps onto the same 0-100% frame the pin coordinates use. Only shown while
   Road Network is the selected system. */
.map__roads{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--e-out),visibility 0s linear .55s;
}
.tabs-scope[data-cat="roads"] .map__roads{
  opacity:1;visibility:visible;
  transition:opacity .55s var(--e-out),visibility 0s;
}
.map__rd{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  /* the overlay is stretched, and the map is fluid — pinning the stroke keeps
     every road the same weight at any size */
  vector-effect:non-scaling-stroke;
}
.map__rd--sh{stroke:rgba(45,48,143,.34);stroke-width:.9}
.map__rd--nh{stroke:rgba(45,48,143,.8);stroke-width:1.5}
.map__rd--orr{stroke:var(--orange);stroke-width:2.2}
.map__rd--rrr{stroke:var(--green);stroke-width:2.2;stroke-dasharray:5 4}
.map__rd--radial{stroke:var(--sky);stroke-width:2.2;stroke-dasharray:5 4}

/* The status key and the road key take turns. Two classes, because the base
   .map__legend rule sits later in the file and would otherwise win. */
.map__legend.map__legend--roads{display:none}
.tabs-scope[data-cat="roads"] .map__legend.map__legend--roads{display:flex}
.tabs-scope[data-cat="roads"] .map__legend:not(.map__legend--roads){display:none}
.rd-k{
  width:16px;height:0;flex:0 0 auto;
  border-top-width:3px;border-top-style:solid;border-radius:3px;
}
.rd-k--nh{border-top-color:rgba(45,48,143,.8)}
.rd-k--sh{border-top-color:rgba(45,48,143,.34)}
.rd-k--orr{border-top-color:var(--orange)}
.rd-k--rrr{border-top-color:var(--green);border-top-style:dashed}
.rd-k--radial{border-top-color:var(--sky);border-top-style:dashed}

.map__note-rd{display:none}
/* the credit is now the whole note, not a span inside one */
.tabs-scope[data-cat="roads"] .map__note-rd{display:block}

/* ── the rail network, same stretched overlay as the roads ──────────────
   Shown only while Rail Network is the selected system. No markers sit on
   this tab — every row in the panel names a system rather than one site,
   so the line diagram and its station labels carry the map instead. */
.map__rail{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--e-out),visibility 0s linear .55s;
}
.tabs-scope[data-cat="rail"] .map__rail{
  opacity:1;visibility:visible;
  transition:opacity .55s var(--e-out),visibility 0s;
}
.map__rl{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.map__rl--op{stroke:var(--indigo);stroke-width:1.6;stroke-dasharray:8 4;opacity:.8}
.map__rl--dev{stroke:var(--sky);stroke-width:1.4;stroke-dasharray:2 5;opacity:.85}

.map__note-rail{display:none}
.tabs-scope[data-cat="rail"] .map__note-rail{display:block}

/* ── the station name against each stop ──────────────────────────────── */
.map__raillabels{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .55s var(--e-out),visibility 0s linear .55s}
.tabs-scope[data-cat="rail"] .map__raillabels{opacity:1;visibility:visible;
  transition:opacity .55s var(--e-out),visibility 0s}
.map__rlab{
  position:absolute;left:var(--x);top:var(--y);transform:translate(0,-50%);
  display:flex;align-items:center;gap:.28rem;white-space:nowrap;
  padding:.14rem .4rem .14rem .12rem;border-radius:5px;
  font-family:var(--f-head);font-size:.58rem;letter-spacing:.04em;
  color:var(--ink-2);background:color-mix(in srgb,var(--paper) 82%,transparent);
  transition:opacity .3s var(--e-out);
}
.map__rlab--rev{transform:translate(-100%,-50%);flex-direction:row-reverse;padding:.14rem .12rem .14rem .4rem}
.map__rlab__dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--indigo)}
.map__rlab--jn{font-weight:600;color:var(--indigo)}
.map__rlab--jn .map__rlab__dot{width:9px;height:9px;background:var(--paper);border:2px solid var(--indigo)}

@media (max-width:760px){
  .map__rlab--st{display:none}
  .map__rlab--jn{font-size:.52rem}
}

/* ── the river network, same stretched overlay again ─────────────────────
   Shown only on Power & Water: TGENCO's generation fleet sits on the map as
   plain markers (buildPins() handles those already), so this overlay is
   just the rivers each of them draws from. */
.map__water{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--e-out),visibility 0s linear .55s;
}
.tabs-scope[data-cat="power"] .map__water{
  opacity:1;visibility:visible;
  transition:opacity .55s var(--e-out),visibility 0s;
}
.map__rv{
  fill:none;stroke:var(--sky);stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;opacity:.55;
}
.map__rv--major{stroke-width:2.4}
.map__rv--minor{stroke-width:1.3;opacity:.4}

.map__note-power{display:none}
.tabs-scope[data-cat="power"] .map__note-power{display:block}

.map__waterlabels{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .55s var(--e-out),visibility 0s linear .55s}
.tabs-scope[data-cat="power"] .map__waterlabels{opacity:1;visibility:visible;
  transition:opacity .55s var(--e-out),visibility 0s}
.map__wlab{
  position:absolute;left:var(--x);top:var(--y);transform:translate(0,-50%);
  white-space:nowrap;font-family:var(--f-head);font-style:italic;font-weight:500;
  font-size:.6rem;letter-spacing:.02em;color:var(--sky);
  text-shadow:0 1px 0 var(--paper),0 -1px 0 var(--paper),1px 0 0 var(--paper),-1px 0 0 var(--paper);
  transition:opacity .3s var(--e-out);
}
.map__wlab--rev{transform:translate(-100%,-50%)}
.map__wlab--major{font-size:.68rem;font-weight:600}

@media (max-width:760px){
  .map__wlab:not(.map__wlab--major){display:none}
}

/* ── hovering a road class lights it and holds the rest back ──────────── */
/* hovering any one class holds the rest of the network back behind it */
.tabs-scope[data-road="nh"] .map__rd,
.tabs-scope[data-road="sh"] .map__rd,
.tabs-scope[data-road="orr"] .map__rd,
.tabs-scope[data-road="rrr"] .map__rd,
.tabs-scope[data-road="radial"] .map__rd{opacity:.14}
.tabs-scope[data-road="nh"]  .map__rd--nh,
.tabs-scope[data-road="sh"]  .map__rd--sh,
.tabs-scope[data-road="orr"] .map__rd--orr,
.tabs-scope[data-road="rrr"] .map__rd--rrr,
.tabs-scope[data-road="radial"] .map__rd--radial{opacity:1}
/* the highlighted class thickens a little, so it reads at a glance */
.tabs-scope[data-road="nh"]  .map__rd--nh{stroke-width:2.2}
.tabs-scope[data-road="sh"]  .map__rd--sh{stroke-width:1.6;stroke:rgba(45,48,143,.7)}
.tabs-scope[data-road="orr"] .map__rd--orr,
.tabs-scope[data-road="rrr"] .map__rd--rrr,
.tabs-scope[data-road="radial"] .map__rd--radial{stroke-width:3}
.map__rd{transition:opacity .3s var(--e-out),stroke-width .3s var(--e-out)}

/* ── the small name against each class ───────────────────────────────── */
.map__rdlabels{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .55s var(--e-out),visibility 0s linear .55s}
.tabs-scope[data-cat="roads"] .map__rdlabels{opacity:1;visibility:visible;
  transition:opacity .55s var(--e-out),visibility 0s}
.map__rdlab{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  padding:.16rem .42rem;border-radius:5px;white-space:nowrap;
  font-family:var(--f-head);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  transition:opacity .3s var(--e-out);
}
/* the route number, the way it is signed on the road */
.map__shield{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  padding:.1rem .3rem;border-radius:4px;white-space:nowrap;
  font-family:var(--f-head);font-weight:500;font-size:.54rem;letter-spacing:.04em;
  line-height:1.25;
  background:var(--paper);border:1px solid rgba(45,48,143,.55);color:var(--indigo);
  box-shadow:0 1px 3px rgba(10,12,43,.12);
  transition:opacity .3s var(--e-out);
}
.map__shield--sh{
  border-color:rgba(45,48,143,.28);color:var(--ink-3);
  font-size:.5rem;
}
.tabs-scope[data-road="nh"] .map__shield,
.tabs-scope[data-road="sh"] .map__shield,
.tabs-scope[data-road="orr"] .map__shield,
.tabs-scope[data-road="rrr"] .map__shield,
.tabs-scope[data-road="radial"] .map__shield{opacity:.2}
.tabs-scope[data-road="nh"] .map__shield--nh,
.tabs-scope[data-road="sh"] .map__shield--sh{opacity:1}

.map__rdlab--orr{color:var(--orange)}
.map__rdlab--rrr{color:var(--green)}
.map__rdlab--radial{color:var(--sky)}

@media (max-width:760px){
  /* the map shrinks but the type does not, so the numbers that would
     collide at this width stand down and the longest routes stay named */
  .map__shield--sh,
  .map__shield--minor{display:none}
  .map__shield{font-size:.48rem;padding:.06rem .22rem}
}
.tabs-scope[data-road="nh"] .map__rdlab,
.tabs-scope[data-road="sh"] .map__rdlab,
.tabs-scope[data-road="orr"] .map__rdlab,
.tabs-scope[data-road="rrr"] .map__rdlab,
.tabs-scope[data-road="radial"] .map__rdlab{opacity:.25}
.tabs-scope[data-road="nh"]  .map__rdlab--nh,
.tabs-scope[data-road="sh"]  .map__rdlab--sh,
.tabs-scope[data-road="orr"] .map__rdlab--orr,
.tabs-scope[data-road="rrr"] .map__rdlab--rrr{opacity:1}
.tabs-scope[data-road="radial"] .map__rdlab--radial{opacity:1}

/* a road row has no marker of its own to point at, so the dot reads as a key */
.spot--road .spot__d{background:rgba(45,48,143,.8)}
.spot--road[data-road="sh"] .spot__d{background:rgba(45,48,143,.34)}
.spot--road[data-road="orr"] .spot__d{background:var(--orange)}
.spot--road[data-road="rrr"] .spot__d{background:var(--green)}
.spot--road[data-road="radial"] .spot__d{background:var(--sky)}

.map__pins{position:absolute;inset:0;z-index:3}

/* Markers — an icon badge per hotspot, styled by status the way the legend
   reads: flagship filled, operational outlined, in-development dashed. */
.map{--pin:clamp(30px,6.4%,46px)}
/* Industrial Parks carries 23 markers where the other tabs carry three to
   seven, and several share a town. Everything about a marker is sized from
   --pin — the badge, the halo and the offset that centres it on its point —
   so shrinking that one value on this tab alone keeps them from piling up
   without touching how the rest of the map reads. The floor stays at 24px:
   below that a marker is smaller than the minimum sensible pointer target. */
.tabs-scope[data-cat="industry"] .map{--pin:clamp(24px,4.6%,30px)}
/* Logistics carries 13 markers with nine of them clustered tight around
   Hyderabad — same crowding problem as Industrial Parks, same fix. */
.tabs-scope[data-cat="logistics"] .map{--pin:clamp(20px,3.8%,26px)}
.tabs-scope[data-cat="power"] .map{--pin:clamp(18px,3.4%,24px)}

.pin{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--pin);height:var(--pin);
  margin:calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2);
  display:grid;place-items:center;
  opacity:0;transform:scale(.4);
  transition:opacity .45s var(--e-out),transform .5s var(--e-spring);
  transition-delay:calc(var(--i) * 45ms);
}
.pin.is-live{opacity:1;transform:none}

.pin__badge{
  position:relative;z-index:2;
  width:100%;height:100%;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  color:var(--indigo);
  box-shadow:0 3px 12px rgba(10,12,43,.26),0 0 0 1px rgba(45,48,143,.1);
  transition:transform .35s var(--e-spring),box-shadow .35s var(--e-out);
}
.pin__badge svg{width:52%;height:52%}

.pin--flagship .pin__badge{
  background:var(--green);color:#fff;
  box-shadow:0 3px 14px rgba(6,165,25,.42),0 0 0 4px rgba(255,255,255,.55);
}
.pin--operational .pin__badge{
  background:#fff;color:var(--sky);
  box-shadow:0 3px 12px rgba(10,12,43,.24),0 0 0 2px var(--sky) inset;
}
.pin--development .pin__badge{
  background:#fff;color:var(--sky);
  border:2px dashed var(--sky);
  box-shadow:0 3px 12px rgba(10,12,43,.2);
}

.pin__halo{
  position:absolute;inset:-22%;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  opacity:0;
}
.pin--flagship .pin__halo{opacity:1}
.pin.is-live .pin__halo{animation:ping 2.8s var(--e-out) infinite;animation-delay:calc(var(--i) * 220ms)}
.pin:hover .pin__badge,.pin.is-on .pin__badge{transform:scale(1.16)}
.pin:hover,.pin.is-on,.pin:focus-visible{z-index:6}

.pin__tip{
  position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translate(-50%,6px);
  background:var(--ink);color:#fff;
  padding:.55rem .75rem;border-radius:9px;
  display:grid;gap:.1rem;
  width:max-content;max-width:210px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s,transform .34s var(--e-out),visibility .28s;
  box-shadow:0 10px 30px rgba(10,12,43,.26);
  z-index:9;
}
.pin__tip b{font-family:var(--f-head);font-size:.82rem;font-weight:500;line-height:1.2}
.pin__tip em{font-style:normal;font-size:.72rem;opacity:.72;line-height:1.35}
.pin__tip::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);
}
.pin:hover .pin__tip,.pin.is-on .pin__tip,.pin:focus-visible .pin__tip{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}

.map__legend{
  display:flex;gap:1.3rem;flex-wrap:wrap;justify-content:center;align-items:center;
  font-family:var(--f-head);font-size:.635rem;letter-spacing:.13em;
  text-transform:uppercase;color:#f0f0f0;
}
.map__legend span{display:inline-flex;align-items:center;gap:.45rem}
.map__legend i{
  width:13px;height:13px;border-radius:50%;display:inline-block;
  flex:0 0 auto;background:#fff;
}
.map__legend i[data-s="flagship"]{background:var(--green);box-shadow:0 0 0 2px rgba(6,165,25,.2)}
.map__legend i[data-s="operational"]{box-shadow:0 0 0 2px var(--sky) inset}
.map__legend i[data-s="development"]{border:2px dashed var(--sky)}
.map__note{
  text-align:center;font-size:.72rem;color:var(--ink-4);
}

.herogtxt{
  line-height: 1.2; font-weight: 500;
}
.accent{
  font-weight:300;font-style:italic; line-height: 1.2; 
  background:var(--g-heat);.quotes
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent; padding-right: 8px;
}
.accent1{ 
  background:var(--g-heat);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent; padding-right: 8px;
}

/* 12 ── BY THE NUMBERS ───────────────────────────────────────────────── */

.nums{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 40%,var(--paper-3) 100%);
}
.nums__cv{position:absolute;inset:0;z-index:0;opacity:.55}
.nums__bg{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-family:var(--f-head);font-weight:700;
  font-size:min(30vw,25rem);letter-spacing:-.06em;line-height:1;
  color:rgba(45,48,143,.035);
  z-index:0;pointer-events:none;white-space:nowrap;
}

/* Five tracks, the first a third wider than the rest. The feature card takes
   the first two of them across two rows, which leaves exactly three cards to
   its right on each row and five across the foot — eleven stat cards with no
   ragged tail, which the old fourteen-track grid could not divide evenly. */
.kpis{
  display:grid;grid-template-columns:1.35fr repeat(4,minmax(0,1fr));
  gap:clamp(.55rem,.9vw,.9rem);
}
.kpi{
  position:relative;grid-column:span 1;
  display:grid;gap:.5rem;align-content:start;
  padding:clamp(1.35rem, 2vw, 0.9rem);;
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  overflow:hidden;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),background .4s;
}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--sh-2);background:#fff}
.kpi__ic{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--paper-3);color:var(--indigo);margin-bottom:.35rem;
}
.kpi__ic svg{width:17px;height:17px}
.kpi__v{
  display:flex;align-items:baseline;gap:.06rem;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(2rem,3.2vw,2rem);
  letter-spacing:-.045em;line-height:.95;
  font-variant-numeric:tabular-nums;
}
.kpi:nth-child(odd) .kpi__v{
  background:var(--g-heat);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.kpi:nth-child(even) .kpi__v{
  background:var(--g-heat-blue);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.kpi__v .pfx{font-size:.62em;font-weight:500;letter-spacing:normal}
.kpi__v .suf{font-size:.46em;font-weight:500;letter-spacing:-.01em;color:var(--indigo)}
.kpi__l{font-size:1rem;font-weight:500;color:var(--ink);letter-spacing:-.008em;line-height:1.3}
.kpi__p{font-size:.83rem;color:var(--ink-3);line-height:1.55}

.kpi--hero{
  grid-column:span 2;grid-row:span 2;
  padding:clamp(1.9rem,3vw,2.9rem);
  background:linear-gradient(150deg,var(--indigo) 0%,#2a4bb0 46%,var(--sky) 100%);
  border-color:transparent;color:#fff;
}
.kpi--hero::before{
  content:"";position:absolute;right:-14%;top:-30%;width:66%;aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 68%);
}
.kpi--hero .kpi__ic{background:rgba(255,255,255,.16);color:#fff}
.kpi--hero .kpi__v{font-size:clamp(2rem,4vw,4rem);color:#fff;letter-spacing:-.055em}
.kpi--hero .kpi__v .suf{color:rgba(255,255,255,.7);font-size:.34em}
.kpi--hero .kpi__l{color:#fff;font-size:clamp(1.05rem,1.6vw,1.4rem);font-family:var(--f-head);font-weight:500;letter-spacing:-.02em}
.kpi--hero .kpi__p{color:rgba(255,255,255,.76);font-size:.93rem;max-width:48ch}
.kpi--hero:hover{transform:translateY(-4px);background:linear-gradient(150deg,var(--indigo) 0%,#2a4bb0 46%,var(--sky) 100%)}

/*.kpi--acc{background:linear-gradient(150deg,rgba(239,97,6,.1),rgba(239,97,6,.02));border-color:rgba(239,97,6,.2)}*/
.kpi--acc .kpi__ic{background:rgba(239,97,6,.14);color:var(--orange-d)}
.kpi--acc .kpi__v .suf{color:var(--orange-d)}
/*.kpi--grn{background:linear-gradient(150deg,rgba(6,165,25,.1),rgba(6,165,25,.02));border-color:rgba(6,165,25,.2)}*/
.kpi--grn .kpi__ic{background:rgba(6,165,25,.14);color:#067a13}
.kpi--grn .kpi__v .suf{color:#067a13}

/* 13 ── TG-iPASS ─────────────────────────────────────────────────────── */

.ipass{background:var(--paper);overflow:hidden;position:relative}
.ipass .aura--orange{width:46vw;height:46vw;max-width:640px;max-height:640px;right:-14vw;top:6%;opacity:.34}

.ipass__bg{
  display: none;
  position:absolute;left:50%;top:8%;transform:translateX(-50%);
  font-family:var(--f-head);font-weight:700;font-size:min(38vw,32rem);
  line-height:.8;letter-spacing:-.07em;
  color:transparent;
  -webkit-text-stroke:1.4px rgba(45,48,143,.09);
  z-index:0;pointer-events:none;
}

.ipass__lay{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  margin-bottom:clamp(3rem,6vw,6rem);
}
.ipass__q{
  font-family:var(--f-head);font-weight:300;
  font-size:clamp(1.15rem,1.5vw,1.42rem);line-height:1.5;letter-spacing:-.018em;
  color:var(--ink-2);border-left:2px solid var(--orange);
  padding-left:1.3rem;max-width:56ch; margin-bottom: 1.6rem;
}
.ipass__q b{font-weight:700;color:var(--ink)}

/* The clock */
.clock{
  position:relative;aspect-ratio:1;width:min(100%,430px);margin-inline:auto;
  display:grid;place-items:center;
}
.clock__svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.clock__track{fill:none;stroke:var(--line);stroke-width:1.4}
.clock__arc{
  fill:none;stroke:url(#gClock);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1 1;stroke-dashoffset:1;
}
.clock__ticks line{stroke:var(--line-3);stroke-width:1.2}
.clock__c{display:grid;justify-items:center;gap:.3rem;text-align:center;z-index:2}
.clock__n{
  font-family:var(--f-head);font-weight:700;font-size:clamp(5rem,11vw,9.5rem);
  line-height:.85;letter-spacing:-.06em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#0365e5;-webkit-text-fill-color:#0365e5;
  font-variant-numeric:tabular-nums;
}
.clock__u{
  font-family:var(--f-head);font-size:.78rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3);
}
.clock__s{font-size:.85rem;color:var(--ink-3);max-width:20ch;line-height:1.45;margin-top:.5rem}

.guar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.6rem,1vw,1rem);
  margin-bottom: clamp(2rem, 4vw, 4.5rem);
}
.guar__c{
  position:relative;padding:clamp(1.4rem,2vw,1.9rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);
  display:grid;gap:.7rem;align-content:start;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .4s;
  overflow:hidden;
}
.guar__c::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--g-heat);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--e-out);
}
.guar__c:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.guar__c:hover::before{transform:scaleX(1)}
.guar__h{font-size:1.06rem;letter-spacing:-.02em;line-height:1.25}
.guar__p{font-size:.87rem;color:var(--ink-3);line-height:1.58}

/* Timeline */
.tl{position:relative;margin-bottom:clamp(2.6rem,5vw,4.5rem)}
.tl__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:2.4rem;flex-wrap:wrap}
/* The rail lives inside the step grid and is pinned to the measured centre of
   the dots (see initTimeline), so it can never drift away from them. The
   fallback below matches the default label height + row gap + dot radius. */
.tl__rail{
  position:absolute;z-index:0;
  left:var(--tl-x1,21px);
  right:var(--tl-x2,21px);
  top:var(--tl-y,calc(1.6rem + 1rem + 21px));
  height:2px;background:var(--line);
}
.tl__s{z-index:1}
.tl__fill{
  position:absolute;inset:0;background:var(--g-heat);
  transform:scaleX(0);transform-origin:0 50%;
}
.tl__g{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.6rem)}
.tl__s{display:grid;gap:1rem;align-content:start;position:relative;padding-top:0}
.tl__k{
  font-family:var(--f-head);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--orange);height:1.6rem;display:flex;align-items:center;
}
.tl__dot{
  width:42px;height:42px;border-radius:50%;
  border:1.6px solid var(--line-3);background:var(--paper);
  display:grid;place-items:center;position:relative;z-index:2;
  transition:border-color .4s,background .4s,transform .5s var(--e-spring);
}
.tl__dot i{width:10px;height:10px;border-radius:50%;background:var(--line-3);transition:background .4s}
.tl__s.is-on .tl__dot{border-color:var(--orange);transform:scale(1.06)}
.tl__s.is-on .tl__dot i{background:var(--orange)}
.tl__h{font-size:1.14rem;letter-spacing:-.022em}
.tl__p{font-size:.9rem;color:var(--ink-3);line-height:1.6;max-width:36ch}

.since{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background: #f1f1f1;
    padding: 0 26px;
    border-radius: 20px;
}
.since__i{padding:clamp(1.5rem,2.4vw,2.1rem) 1.4rem clamp(1.5rem,2.4vw,2.1rem) 0;position:relative;display:grid;gap:.3rem}
.since__i + .since__i{padding-left:clamp(1.2rem,2.4vw,2.4rem)}
.since__i + .since__i::before{content:"";position:absolute;left:0;top:1.6rem;bottom:1.6rem;width:1px;background:var(--line)}
.since__n{
  font-family:var(--f-head);font-weight:700;font-size:clamp(1.8rem,3vw,2.3rem);
  line-height:.94;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.since__n .suf{font-size:.4em; letter-spacing: 0; font-weight:500;color:#0365e5}
.since__l{font-family:var(--f-head);font-size:.98rem;font-weight:500;color:var(--ink);letter-spacing:-.012em}
.since__s{font-size:.82rem;color:var(--ink-3)}

/* 14 ── TRUSTED BY ───────────────────────────────────────────────────── */

.trust{background:var(--paper-2);overflow:hidden}
.marq{display:grid;gap:clamp(.6rem,1vw,1rem);margin-block:clamp(2.4rem,4vw,3.6rem)}
.marq__row{
  display:flex;width:max-content;gap:clamp(.6rem,1vw,1rem);
  will-change:transform;
}
.marq__i{
  flex:0 0 auto;
  width:clamp(130px,13vw,186px);height:clamp(74px,7.4vw,102px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(.9rem,1.4vw,1.25rem) clamp(1.1rem,1.8vw,1.6rem);
  background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),border-color .35s;
}
/* Several of these logos are SVGs with no intrinsic size, which ignore a
   max-height in a centred box and spill out of the tile. Sizing the box
   explicitly and letting object-fit do the letterboxing fits every one. */
.marq__i img{
  display:block;
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  filter:grayscale(1);opacity:.5;
  transition:filter .45s,opacity .45s,transform .45s var(--e-out);
}
.marq__i:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.marq__i:hover img{filter:none;opacity:1;transform:scale(1.05)}

.marq__mask{
  position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* the three points under the intro */
.trust__pts{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.7rem}
.trust__pts li{
  position:relative;padding-left:1.7rem;
  font-size:1.02rem;line-height:1.5;color:var(--ink-2);font-weight:500;
}
.trust .sec-head__a .lede{color:var(--ink)}
/* heading and intro start at the same line rather than sharing a middle */
.trust .sec-head{align-items:start}
.trust .sec-head__a{padding-bottom:0}
.trust__pts li::before{
  content:"";position:absolute;left:0;top:.5em;width:.62rem;height:.62rem;border-radius:50%;
  background:linear-gradient(135deg,#98d048,#0483ce);
  box-shadow:0 0 0 4px rgba(152,208,72,.2);
}

.trust__foot{text-align:center;color:var(--ink-3);font-size:.95rem;max-width:60ch;margin-inline:auto}

/* 15 ── TELANGANA 2047 ───────────────────────────────────────────────── */

.vis{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 70% at 82% 8%,rgba(4,131,206,.11),transparent 62%),
    radial-gradient(80% 70% at 8% 96%,rgba(6,165,25,.1),transparent 62%),
    var(--paper);
}
.vis__bg{
  position:absolute;right:-3vw;bottom:2%; display: none;
  font-family:var(--f-head);font-weight:700;font-size:min(30vw,26rem);
  line-height:.8;letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:1.4px rgba(45,48,143,.1);
  z-index:0;pointer-events:none;
}

/* Lead — copy stacked on the left, trajectory on the right */
.vis__lead{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  margin-bottom:clamp(3rem,6vw,6rem);
}
.vis__copy{display:grid;gap:1.25rem;justify-items:start;align-content:center}
.vis__h{
  font-size:clamp(1.9rem,3.3vw,3.1rem);
  line-height:1.03;letter-spacing:-.032em;
}
.vis__copy .lede{max-width:46ch}
.vis__copy .sub{
  max-width:44ch;padding-top:1rem;border-top:1px solid var(--line);
  width:100%;
}

/* Trajectory */
.traj{margin-bottom:0}
.traj__chart{
  position:relative;width:100%;aspect-ratio:16 / 4;
  border-bottom:1px solid var(--line);
  margin-bottom:1.4rem;
}
.traj__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.traj__area{opacity:.14}
.traj__line{fill:none;stroke:url(#gTraj);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.traj__grid line{stroke:var(--line-2);stroke-width:1}
.traj__pt{fill:#fff;stroke-width:2.6}
.traj__stops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.traj__s{display:grid;gap:.28rem}
.traj__s:nth-child(2){text-align:center}
.traj__s:nth-child(3){text-align:right}
.traj__k{font-family:var(--f-head);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.traj__v{
  font-family:var(--f-head);font-weight:700;font-size:clamp(1.7rem,3.4vw,3rem);
  line-height:1;letter-spacing:-.045em;
}
.traj__s:nth-child(1) .traj__v{color:var(--indigo)}
.traj__s:nth-child(2) .traj__v{color:var(--sky)}
.traj__s:nth-child(3) .traj__v{background:var(--g-heat);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.traj__y{font-size:.85rem;color:var(--ink-3)}

/* Regions */
.reg{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.reg__cards{display:grid;gap:.7rem}
.reg__c{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:1.2rem;align-items:start;
  padding:clamp(1.25rem,2vw,1.7rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);text-align:left;width:100%;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .4s;
  overflow:hidden;
}
.reg__c::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--rc);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s var(--e-out);
}
.reg__c:hover,.reg__c.is-on{transform:translateX(6px);box-shadow:var(--sh-2);border-color:transparent}
.reg__c:hover::before,.reg__c.is-on::before{transform:scaleY(1)}
.reg__t{
  font-family:var(--f-head);font-weight:700;font-size:1.42rem;letter-spacing:-.03em;
  color:var(--rc);line-height:1;
}
.reg__x{display:grid;gap:.3rem}
.reg__x b{font-family:var(--f-head);font-size:.98rem;font-weight:500;color:var(--ink);letter-spacing:-.014em}
.reg__x p{font-size:.875rem;color:var(--ink-3);line-height:1.58}

.reg__map{position:relative;width:100%;aspect-ratio:1004 / 1024}
.reg__map canvas{position:absolute;inset:0;width:100%;height:100%}
.reg__hint{
  text-align:center;font-family:var(--f-head);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);margin-top:.8rem;
}

/* --- leadership quotes: a Swiper track with its own controls -------------- */
.quotes{
  position:relative;
  margin-top:clamp(2rem,2vw,3rem);
}
.quotes .swiper{overflow:hidden;border-radius:var(--r-lg)}
/* every slide is the same height so the controls never jump */
.quotes .swiper-slide{height:auto}
.quotes .swiper-slide > .quote{margin-top:0}

.quotes__nav{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:clamp(1.1rem,2vw,1.6rem);
}
.quotes__ar{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--line-3);display:grid;place-items:center;
  color:var(--ink);background:#fff;
  transition:background .3s,border-color .3s,color .3s,transform .35s var(--e-out),opacity .3s;
}
.quotes__ar svg{width:15px;height:15px}
.quotes__ar:hover{background:var(--indigo);border-color:var(--indigo);color:#fff;transform:scale(1.06)}
.quotes__ar:disabled,
.quotes__ar.swiper-button-disabled{opacity:.32;pointer-events:none}
/* if Swiper never loads, the quotes just stack */
.quotes.is-static .swiper-wrapper{display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
.quotes.is-static .quotes__nav{display:none}

.quotes__dots{display:flex;gap:.5rem;align-items:center}
.quotes__dot{
  width:32px;height:3px;border-radius:3px;background:var(--line-3);
  transition:background .35s,width .4s var(--e-out);
}
.quotes__dot.is-on{width:56px;background:var(--indigo)}

@media (max-width:560px){
  .quotes__ar{width:42px;height:42px}
}

/* CM quote — portrait held inside slow orbital arcs, quote set large in ink */
.quote{
  --q-gold:#F0B429;
  position:relative;
  margin-top:clamp(3rem,6vw,6rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.8rem,5vw,4.5rem);align-items:center;
  padding:clamp(2rem,4vw,3.4rem) clamp(1.4rem,3vw,2.6rem);
  border-radius:var(--r-lg);
  background:
    radial-gradient(52% 78% at 16% 50%,rgba(4,131,206,.09),transparent 68%),
    radial-gradient(48% 70% at 88% 22%,rgba(240,180,41,.10),transparent 66%),
    radial-gradient(46% 66% at 72% 96%,rgba(6,165,25,.08),transparent 68%),
    linear-gradient(120deg,#fff 0%,var(--paper-2) 62%,#fff 100%);
  overflow:hidden;
  isolation:isolate;
}
/* hairline grid, same architectural device as the rest of the page */
.quote::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:calc(100% / 8) 100%;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
/* a soft light that follows the pointer across the panel */
.quote__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--qx,26%) var(--qy,50%),
             rgba(45,48,143,.10),transparent 62%);
  opacity:0;transition:opacity .5s var(--e-out);
}
.quote:hover .quote__glow{opacity:1}

/* --- portrait ------------------------------------------------------------ */
.quote__ph{
  position:relative;z-index:1;
  width:clamp(200px,26vw,330px);aspect-ratio:1;
  display:grid;place-items:center;
  flex:0 0 auto;
}
.quote__rings{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;
}
/* With pathLength="100" on the circles, the dash pairs below are read as
   percentages: "34 66" is a single 34% arc with a 66% gap, and the offset
   just slides it around the ring. Two arcs share each radius, so each orbit
   reads as one broken ring rather than a dotted one. */
.quote__ring{fill:none;stroke-linecap:round}

.quote__ring--indigo{stroke:var(--indigo);stroke-width:3;   stroke-dasharray:34 66;stroke-dashoffset:-6}
.quote__ring--green {stroke:var(--green); stroke-width:2.4; stroke-dasharray:13 87;stroke-dashoffset:-48}
.quote__ring--gold  {stroke:var(--q-gold);stroke-width:3;   stroke-dasharray:29 71;stroke-dashoffset:-30}
.quote__ring--sky   {stroke:var(--sky);   stroke-width:2.4; stroke-dasharray:11 89;stroke-dashoffset:-84}

/* the arcs are always drawn — the panel itself fades in via .rv — and the two
   orbits only start turning, slowly and against each other, once the section
   arrives, so nothing spins away off-screen */
.quote__orbit{transform-box:view-box;transform-origin:50% 50%}
.quote.is-on .quote__orbit{animation:qSpin linear infinite}
.quote.is-on .quote__orbit--out{animation-duration:64s}
.quote.is-on .quote__orbit--in{animation-duration:46s;animation-direction:reverse}
/* leaning in draws them round a little faster */
.quote:hover .quote__orbit--out{animation-duration:26s}
.quote:hover .quote__orbit--in{animation-duration:18s}

@keyframes qSpin{to{transform:rotate(360deg)}}

.quote__disc{
  position:relative;z-index:1;
  width:84%;aspect-ratio:1;border-radius:50%;
  overflow:hidden;
  background:linear-gradient(180deg,#fff,var(--paper-2));
  box-shadow:0 18px 50px rgba(45,48,143,.16),0 0 0 1px rgba(45,48,143,.06);
  transition:transform .7s var(--e-out),box-shadow .7s var(--e-out);
}
.quote:hover .quote__disc{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 26px 64px rgba(45,48,143,.22),0 0 0 1px rgba(45,48,143,.09);
}
.quote__disc img{
  width:100%;height:100%;object-fit:cover;object-position:center 12%;
}

/* --- copy ---------------------------------------------------------------- */
.quote__b{position:relative;z-index:1;display:grid;gap:1.15rem;justify-items:start}
.quote__mark{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(3.4rem,6vw,5.4rem);line-height:.5;
  color:var(--q-gold);
  height:.42em;
  margin-bottom:.1em;
}
.quote__t{
  font-family:var(--f-head);font-weight:700;font-style:normal;
  font-size:clamp(1.35rem,2.7vw,2.35rem);
  line-height:1.28;letter-spacing:-.028em;
  color:var(--indigo);
  text-wrap:balance;
}
.quote__tsmal{font-size:clamp(1.35rem,2.7vw,1.85rem);}
.quote__a{display:grid;gap:.25rem;padding-top:.5rem}
.quote__a b{
  font-family:var(--f-head);font-size:clamp(1rem,1.3vw,1.14rem);
  font-weight:700;color:var(--indigo);letter-spacing:-.02em;
}
.quote__a span{
  font-family:var(--f-body);font-size:.94rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink-3);
}

@media (max-width:860px){
  .quote{grid-template-columns:1fr;justify-items:center;text-align:center}
  .quote__ph{width:clamp(190px,58vw,260px)}
  .quote__b{justify-items:center}
  .quote__t{max-width:32ch}
  .quote__a{justify-items:center}
}

html.no-motion .quote__orbit{animation:none}

/* 16 ── VOICES ───────────────────────────────────────────────────────── */

.voice{background:var(--paper-3);overflow:hidden}
.voice__lay{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.voice__ph{
  position:relative;aspect-ratio:4 / 5;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--sh-3);
}
.voice__ph img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .8s var(--e-out),transform 1.4s var(--e-out);
}
.voice__ph img.is-on{opacity:1;transform:none}
.voice__ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(10,12,43,.34));
}
.voice__flag{
  position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;
  font-family:var(--f-head);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(10,12,43,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:.34rem .65rem;border-radius:6px;
}

.voice__b{display:grid;gap:clamp(1.4rem,2.6vw,2.2rem);position:relative}
.voice__mark{
  font-family:var(--f-head);font-weight:700;font-size:clamp(5rem,9vw,8rem);
  line-height:.6;color:var(--indigo);opacity:.13;
  height:.42em;
}
.voice__slide{position:relative;min-height:9em}
.voice__q{
  position:absolute;inset:0;
  font-family:var(--f-head);font-weight:300;
  font-size:clamp(1.15rem,2.1vw,1.85rem);line-height:1.45;letter-spacing:-.026em;
  color:var(--ink);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .55s var(--e-out),transform .7s var(--e-out),visibility .55s;
}
.voice__q.is-on{opacity:1;visibility:visible;transform:none;position:relative}
.voice__q b{font-weight:700}

.voice__who{display:grid;gap:.1rem;min-height:3.2em}
.voice__who b{font-family:var(--f-head);font-size:1.12rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.voice__who span{font-size:.86rem;color:var(--ink-3)}

.voice__nav{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.voice__dots{display:flex;gap:.5rem}
.voice__dot{
  width:34px;height:3px;border-radius:3px;background:var(--line-3);
  transition:background .35s,width .4s var(--e-out);position:relative;overflow:hidden;
}
.voice__dot.is-on{width:56px;background:var(--line)}
.voice__dot.is-on::after{
  content:"";position:absolute;inset:0;background:var(--orange);
  transform-origin:0 50%;transform:scaleX(0);
}
.voice__dot.is-on.is-run::after{animation:dotFill 7s linear forwards}
@keyframes dotFill{to{transform:scaleX(1)}}
.voice__arrows{display:flex;gap:.4rem;margin-left:auto}
.voice__ar{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-3);display:grid;place-items:center;
  color:var(--ink);transition:background .3s,border-color .3s,color .3s,transform .35s var(--e-out);
}
.voice__ar svg{width:15px;height:15px}
.voice__ar:hover{background:var(--indigo);border-color:var(--indigo);color:#fff;transform:scale(1.06)}

/* 17 ── CTA ─────────────────────────────────────────────────────────── */

.cta{
  position:relative;overflow:hidden;
  padding-block:clamp(5rem,10vw,9rem);
  background:var(--indigo);
  color:#fff;
  isolation:isolate;
}
.cta__cv{position:absolute;inset:0;z-index:0}
.cta__grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
}
.cta__in{position:relative;z-index:2;display:grid;gap:clamp(1.6rem,3vw,2.4rem);justify-items:center;text-align:center}
.cta h2{color:#fff}
.cta__l{display:block;overflow:hidden}
.cta__l > span{display:block}
.cta p{color:rgba(255,255,255,.8);max-width:52ch}
.cta__b{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.cta .btn--out{color:#fff;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06)}
.cta .btn--out:hover{background:#fff;color:var(--indigo);border-color:#fff}

/* 18 ── FDI DESK ────────────────────────────────────────────────────── */

.fdi{background:var(--paper-2);overflow:hidden; padding-block:clamp(4.5rem,11vw,11rem); }
.fdi .aura--indigo{width:44vw;height:44vw;max-width:600px;max-height:600px;right:-12vw;bottom:-8vw;opacity:.22}

.fdi__lay{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.fdi__side{
  position:sticky;top:calc(var(--hdr-h) + 3rem);
  display:grid;gap:1.6rem;align-content:start;
}
.fdi__contact{display:grid;gap:.9rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.fdi__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start}
.fdi__row i{
  width:38px;height:38px;border-radius:11px;background:var(--paper-3);
  display:grid;place-items:center;color:var(--indigo);flex:0 0 auto;
}
.fdi__row svg{width:17px;height:17px}
.fdi__row div{display:grid;gap:0;min-width:0}
.fdi__row span{font-family:var(--f-head);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-4)}
.fdi__row a,.fdi__row b{font-size:.92rem;font-weight:700;color:var(--ink);word-break:break-word}
.fdi__row a:hover{color:var(--indigo)}

.form{
  position:relative;
  padding:clamp(1.5rem,3vw,2.6rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
.form__steps{display:flex;gap:.6rem;align-items:center;margin-bottom:1.8rem;flex-wrap:wrap}
.step{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem .9rem .5rem .5rem;border-radius:var(--r-pill);
  border:1px solid var(--line);
  font-size:.83rem;font-weight:700;color:var(--ink-3);
  transition:color .3s,border-color .3s,background .3s;
}
.step i{
  width:26px;height:26px;border-radius:50%;background:var(--paper-3);
  display:grid;place-items:center;font-family:var(--f-head);font-size:.72rem;
  color:var(--ink-3);transition:background .3s,color .3s;
}
.step.is-on{color:var(--ink);border-color:var(--indigo)}
.step.is-on i{background:var(--indigo);color:#fff}
.step.is-done i{background:var(--green);color:#fff}
.step__ln{flex:1;height:1px;background:var(--line);min-width:20px}

.form__note{font-size:.79rem;color:var(--ink-4);margin-bottom:1.4rem}
.form__note b{color:var(--orange)}
.form__submit-status{margin:0 0 1rem;padding:.7rem .85rem;border-radius:8px;background:#eef5ff;color:var(--ink-2);font-size:.86rem;line-height:1.45}
.form__submit-status.is-bad{background:#fff0f1;color:#a3132a}

.pane{display:none}
.pane.is-on{display:block;animation:paneIn .5s var(--e-out)}
@keyframes paneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.fg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.9rem 1rem}
.f{grid-column:span 6;display:grid;gap:.4rem;position:relative}
.f--3{grid-column:span 3}
.f--4{grid-column:span 4}
.f--8{grid-column:span 8}
.f--12{grid-column:span 12}
.f > label,.f > .lbl{
  font-size:.775rem;font-weight:700;color:var(--ink-2);letter-spacing:.005em;
  display:flex;gap:.25rem;
}
.f .req{color:var(--orange)}
.f input,.f select,.f textarea{
  width:100%;padding:.78rem .9rem;
  background:var(--paper-2);
  border:1px solid var(--line);border-radius:10px;
  font-size:.9rem;color:var(--ink);
  transition:border-color .25s,background .25s,box-shadow .25s;
  appearance:none;-webkit-appearance:none;
}
.f textarea{min-height:96px;resize:vertical}
.f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236C7192' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:11px;
  padding-right:2.2rem;cursor:pointer;
}
.f input:focus,.f select:focus,.f textarea:focus{
  border-color:var(--indigo);background:#fff;
  box-shadow:0 0 0 3px rgba(45,48,143,.1);
}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-4)}
.f.is-bad input,.f.is-bad select,.f.is-bad textarea{border-color:#D42B12;background:rgba(212,43,18,.03)}
.f__err{font-size:.72rem;color:#D42B12;font-weight:700;display:none}
.f.is-bad .f__err{display:block}

.f__tel{display:grid;grid-template-columns:98px minmax(0,1fr);gap:.4rem}
.f__tel select{padding-inline:.6rem 1.7rem;background-position:right .55rem center;font-size:.84rem}

.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;padding:.5rem .9rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--paper-2);
  font-size:.83rem;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .25s var(--e-out);
}
.chip:hover span{border-color:var(--line-3);transform:translateY(-1px)}
.chip input:checked + span{background:var(--indigo);border-color:var(--indigo);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--indigo);outline-offset:2px}

.form__act{
  display:flex;gap:.7rem;align-items:center;justify-content:space-between;
  margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--line);flex-wrap:wrap;
}
.form__cnt{font-family:var(--f-head);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4)}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}

.done{
  display:none;text-align:center;padding:clamp(2rem,5vw,4rem) 1rem;
}
.done.is-on{display:grid;gap:1.2rem;justify-items:center;animation:paneIn .6s var(--e-out)}
.done__ic{
  width:64px;height:64px;border-radius:50%;background:rgba(6,165,25,.12);
  display:grid;place-items:center;color:var(--green);
}
.done__ic svg{width:28px;height:28px}

/* 19 ── FOOTER ──────────────────────────────────────────────────────── */

.ftr{background:var(--ink);color:rgba(255,255,255,.66);padding-top:clamp(3.5rem,7vw,6rem)}
/* brand · four link columns mirroring the header dropdowns · FDI desk */
.ftr__top{
  display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,.8fr)) minmax(0,.95fr);
  gap:clamp(1.4rem,2.4vw,2.4rem);
  padding-bottom:clamp(2.6rem,5vw,4rem);
}
.ftr__brand{display:grid;gap:1.2rem;align-content:start}
.ftr__logos{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.ftr__logos img{height:52px;width:auto;background:#fff;border-radius:10px;padding:.4rem .6rem}
.ftr__brand p{font-size:.88rem;line-height:1.65;max-width:38ch}
.ftr__col h3{
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(255,255,255,.44);font-weight:400;margin-bottom:1.1rem;
}
.ftr__col ul{display:grid;gap:.55rem}
.ftr__col a{
  font-size:.88rem;color:rgba(255,255,255,.7);
  transition:color .25s,padding-left .3s var(--e-out);
  display:inline-block;
}
.ftr__col a:hover{color:#fff;padding-left:5px}
.ftr__desk{
  padding:1.5rem;border:1px solid rgba(255,255,255,.13);border-radius:var(--r);
  background:rgba(255,255,255,.035);display:grid;gap:.9rem;align-content:start;
}
.ftr__desk h3{font-family:var(--f-head);font-size:1.05rem;color:#fff;font-weight:700;letter-spacing:-.02em}
.ftr__desk p{font-size:.85rem;line-height:1.55}
.ftr__bot{
  border-top:1px solid rgba(255,255,255,.11);
  padding-block:1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.79rem;color:rgba(255,255,255,.44);
}
.ftr__bot a{color:rgba(255,255,255,.66)}
.ftr__bot a:hover{color:#fff}
.ftr__line{height:2px;background:var(--g-line);opacity:.9}

/* Back to top */
.top{
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:700;
  width:48px;height:48px;border-radius:50%;
  background:var(--indigo);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.85);
  transition:opacity .4s,transform .5s var(--e-spring),visibility .4s,background .3s;
}
.top.is-on{opacity:1;visibility:visible;transform:none}
.top:hover{background:var(--orange)}
.top svg{width:17px;height:17px}

/* 20 ── MOTION UTILITIES ────────────────────────────────────────────── */

html.js .rv{opacity:0;transform:translateY(26px)}
html.js .rv-x{opacity:0;transform:translateX(-22px)}
html.js .rv-s{opacity:0;transform:scale(.965)}
html.js .rv-c > *{opacity:0;transform:translateY(22px)}

.mask-l{display:block;overflow:hidden}
html.js .mask-l > span{display:block;transform:translateY(110%)}

html.no-motion .rv,html.no-motion .rv-x,html.no-motion .rv-s,
html.no-motion .rv-c > *,html.no-motion .mask-l > span{
  opacity:1 !important;transform:none !important;
}
html.no-motion .hero__gl{opacity:1}
html.no-motion .ticker__t,html.no-motion .marq__row{animation:none}
html.no-motion .pin{opacity:1;transform:none}
html.no-motion .clock__arc{stroke-dashoffset:0}
html.no-motion .tl__fill{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .cur,.cur-ring{display:none}
}

/* 21 ── RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width:1240px){
  :root{--shell:min(1440px,100% - 3rem)}
  .adv__c{grid-column:span 3}
  .adv__c:nth-child(1),.adv__c:nth-child(2){grid-column:span 3}
  /* three even tracks here: the feature keeps its two-by-two shape and the
     nine cards that follow it fill three clean rows */
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi{grid-column:span 1}
  .kpi--hero{grid-column:span 2;grid-row:span 2}
  .guar{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* four link columns fit a four-track grid exactly — brand and desk take a
     full row each above and below them */
  .ftr__top{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ftr__brand{grid-column:span 4}
  .ftr__desk{grid-column:span 4}
}

@media (max-width:1080px){
  .nav,.acts .btn--ghost{display:none}
  .burger{display:grid}
  /* the wordmark and the secondary mark would push the actions — and with
     them the menu button — past the viewport edge */
  .brand__div,.brand__t,.acts__mark{display:none}
  .bar{gap:1rem}
  .drawer{display:block}
  .infra__lay{grid-template-columns:1fr}
  .mapw{position:relative;top:auto;order:-1;max-width:560px;margin-inline:auto;width:100%}
  .pan{min-height:auto}
  .pan__s{position:relative;display:none}
  .pan__s.is-on{display:grid}
  /* five categories can't wrap without breaking the sliding indicator, so the
     row scrolls instead */
  .tabs{
    flex-wrap:nowrap;width:100%;max-width:100%;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto}
  .reg{grid-template-columns:1fr}
  .reg__map{max-width:480px;margin-inline:auto;width:100%}
  .vis__lead{grid-template-columns:1fr;gap:clamp(1.8rem,4vw,3rem)}
  .vis__copy .lede,.vis__copy .sub{max-width:62ch}
  .fdi__lay{grid-template-columns:1fr}
  .fdi__side{position:relative;top:auto}
  .voice__lay{grid-template-columns:1fr}
  .voice__ph{max-width:400px;aspect-ratio:1;margin-inline:auto}
  .ipass__lay{grid-template-columns:1fr}
}

@media (max-width:860px){
  :root{--hdr-h:66px}
  .sec-head{grid-template-columns:1fr;align-items:start}
  .hero__body{grid-template-columns:1fr}
  .adv{grid-template-columns:1fr}
  .adv__c,.adv__c:nth-child(1),.adv__c:nth-child(2){grid-column:span 1}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{grid-column:span 1}
  .kpi--hero{grid-column:span 2;grid-row:span 1}
  .proof__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof__i:nth-child(3)::before,.proof__i:nth-child(1)::before{display:none}
  .proof__i:nth-child(3){border-top:1px solid var(--line)}
  .proof__i:nth-child(3){padding-left:0}
  .tl__g{grid-template-columns:1fr;gap:2rem}
  .tl__rail{display:none}
  .since,.mini{grid-template-columns:1fr}
  .since__i + .since__i,.mini__i + .mini__i{padding-left:0;border-top:1px solid var(--line)}
  .since__i + .since__i::before,.mini__i + .mini__i::before{display:none}
  .quote{grid-template-columns:1fr;text-align:left}
  .ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__brand,.ftr__desk{grid-column:span 2}
  .f,.f--3,.f--4,.f--8{grid-column:span 12}
  .traj__chart{aspect-ratio:16 / 9}
  .hero{min-height:auto;padding-bottom:0}
  .hero__in{padding-block:clamp(2rem,8vw,4rem)}

  /* Narrow screens read top-to-bottom: the city gets a band of its own at the
     top and the type sits on clean paper below it. The band is a fixed height,
     not a share of the hero — a percentage puts the headline back over the
     photograph on short viewports. */
  .hero{
    --hero-band:clamp(190px,34vh,320px);
    padding-top:calc(var(--hdr-h) + var(--util-h) + var(--hero-band));
  }
  .hero__media,.hero__frost,.hero__scrim,.hero__gl{
    bottom:auto;
    height:calc(var(--hdr-h) + var(--util-h) + var(--hero-band));
  }
  .hero__media img,.hero__media video{object-position:50% 38%}
  .hero__frost{
    mask-image:linear-gradient(180deg,transparent 0%,transparent 52%,#000 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 52%,#000 100%);
  }
  .hero__scrim{
    background:
      radial-gradient(90% 72% at 70% 8%,rgba(4,131,206,.18),transparent 66%),
      linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 42%,
                      rgba(255,255,255,.72) 80%,var(--paper) 100%);
  }
  .hero__gl{
    mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
  }
  .hero.has-film .hero__gl.is-on,.hero__gl.is-on{opacity:.45}
}

@media (max-width:560px){
  :root{--shell:min(1440px,100% - 2.2rem);--gut:1.1rem}
  .brand img,.hdr.is-stuck .brand img{height:48px}
  .brand{gap:.5rem}
  .acts{gap:.4rem}
  .acts .btn{padding:.6rem .8rem;font-size:.76rem}
  .acts .btn svg{display:none}
  .burger{width:38px;height:38px;flex:0 0 auto}
  .kpis{grid-template-columns:1fr}
  .kpi--hero{grid-column:span 1}
  .guar{grid-template-columns:1fr}
  .traj__stops{grid-template-columns:1fr;gap:.9rem}
  .traj__s,.traj__s:nth-child(2),.traj__s:nth-child(3){text-align:left}
  .reg__c{grid-template-columns:1fr;gap:.6rem}
  .voice__arrows{margin-left:0}
  .btn{width:100%}
  .hero__cta .btn,.cta__b .btn{width:100%}
  .acts .btn{width:auto}
  .form__act .btn{width:100%}
}

@media print{
  .hdr,.rail,.cur,.cur-ring,.progress,.top,.pre,.hero__gl,.cta__cv,.nums__cv{display:none !important}
  body{color:#000}
}



/* the legal row in the footer's bottom bar */
.ftr__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center}
.ftr__legal a{transition:color .3s var(--e-out)}

/* The Industrial Parks tab carries 23 markers, and several sit in the same
   town — Warangal holds a textile park and an IT tower, Khammam a food park
   and an IT tower. Rather than move any of them off their real position, the
   rest of the map recedes while a group is lit, the same way hovering a road
   class holds the other roads back. */
.tabs-scope:has(.pin.is-on) .pin:not(.is-on){opacity:.22;filter:saturate(.4)}
.tabs-scope:has(.pin.is-on) .pin:not(.is-on) .pin__halo{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){
  .tabs-scope:has(.pin.is-on) .pin:not(.is-on){transition:none}
}