/* ============================================================================
   WHY TELANGANA
   Runs on main.css: same tokens, type ramp, reveal system and interaction
   hooks — [data-spotlight] for the cursor wash, .advbar for the hover rule,
   #ticker for the marquee. Nothing here re-implements what main.css provides.
   Everything is prefixed .wt- so it cannot reach another page.

   The figure icons are Lucide (lucide.dev) — ISC licence, © Lucide Contributors —
   inlined into the markup at 24×24 / 1.7 stroke to match the icons already on
   the site.
   ========================================================================= */

/* ── HERO ─────────────────────────────────────────────────────────────── */
.wt-hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:min(94svh,860px);
  display:flex;align-items:flex-end;
  padding-top:calc(var(--hdr-h) + var(--util-h) + 2rem);
  padding-bottom:clamp(7rem,13vw,11rem);   /* room for the panel that overlaps */
  background:var(--ink);
}
.wt-hero__media{position:absolute;inset:-6% 0;z-index:0;--wt-cyc:16s}
.wt-hero__slide{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 52%;
  filter:saturate(1.06) contrast(1.04);
  transform:scale(1.06);
}
/* the second frame waits underneath until the animation calls for it, so a
   browser that never runs it shows one photograph rather than two stacked */
.wt-hero__slide:nth-of-type(2){opacity:0}

@media (prefers-reduced-motion:no-preference){
  .wt-hero__slide{
    opacity:0;
    animation:wt-cross var(--wt-cyc) linear infinite,
              wt-ken   var(--wt-cyc) linear infinite;
    will-change:opacity,transform;
  }
  /* half a cycle behind, so one frame arrives exactly as the other leaves */
  .wt-hero__slide:nth-of-type(2){animation-delay:calc(var(--wt-cyc) / -2)}
}
/* 40% held, 10% handing over: the fades meet in the middle rather than
   dipping to black between frames */
@keyframes wt-cross{
  0%{opacity:1} 40%{opacity:1} 50%{opacity:0} 90%{opacity:0} 100%{opacity:1}
}
/* A slow push in. The reset sits at 70%, deep inside the window where the
   frame is hidden, so the drift a viewer actually sees never doubles back. */
@keyframes wt-ken{
  0%   {transform:scale(1.13) translate3d(-.8%,-.6%,0)}
  50%  {transform:scale(1.20) translate3d(-1.5%,-1.1%,0)}
  70%  {transform:scale(1.02) translate3d(1.1%,.8%,0)}
  100% {transform:scale(1.13) translate3d(-.8%,-.6%,0)}
}
.wt-hero__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,12,43,.66) 0%,rgba(10,12,43,.2) 30%,rgba(10,12,43,.92) 100%),
    radial-gradient(72% 62% at 8% 104%,rgba(45,48,143,.62),transparent 72%),
    radial-gradient(46% 44% at 92% 8%,rgba(4,131,206,.32),transparent 70%);
}
/* a slow drift of brand light, so the hero is never quite static */
.wt-hero__orb{
  position:absolute;z-index:1;pointer-events:none;
  width:min(62vw,720px);aspect-ratio:1;border-radius:50%;
  left:-12vw;bottom:-26vw;
  background:radial-gradient(circle,rgba(239,97,6,.34),transparent 62%);
  filter:blur(18px);
  animation:wt-drift 18s var(--e-io) infinite alternate;
}
@keyframes wt-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(8vw,-5vw,0) scale(1.16)}
}
.wt-hero__grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(180deg,#000,transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);
}
.wt-hero__in{
  position:relative;z-index:3;
  width:var(--shell);margin-inline:auto;
  display:grid;gap:clamp(1.2rem,2.4vw,1.9rem);
}
.wt-hero__h{
  font-family:var(--f-head);font-weight:700;color:#fff;
  font-size:clamp(2.6rem,6vw,5.6rem);line-height:1.12;letter-spacing:-.045em;
  max-width:16ch;
}
.wt-hero__h em{
  font-style:normal;
  background:linear-gradient(96deg,var(--orange-l) 0%,#FFC46B 54%,var(--green-l) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wt-hero__p{
  color:rgba(255,255,255,.84);max-width:60ch;
  font-size:clamp(1rem,.45vw + .92rem,1.2rem);line-height:1.66;
}
/* the scroll cue: a line that runs downward on a loop */
.wt-cue{
  display:flex;align-items:center;gap:.8rem;margin-top:.6rem;
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}
.wt-cue i{
  position:relative;width:52px;height:1px;background:rgba(255,255,255,.24);overflow:hidden;
}
.wt-cue i::after{
  content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--orange-l),transparent);
  animation:wt-run 2.4s var(--e-io) infinite;
}
@keyframes wt-run{from{transform:translateX(-100%)}to{transform:translateX(320%)}}

/* ── HERO, COLLAGE VARIANT ────────────────────────────────────────────── */
/* Six frames in an arc over centred type, built the same way as the
   focus-sectors hero. The drop on each card is a margin rather than a
   transform, so the row grows to hold it and the heading always clears the
   lowest card. Light ground: the pictures carry the colour. */
.wt-hero--coll{
  --wt-cw:clamp(20px,4.2vw,70px);
  min-height:auto;
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;
  padding-top:calc(var(--hdr-h) + var(--util-h) + clamp(1.8rem,5vw,3.6rem));
  padding-bottom:clamp(2.6rem,6vw,4.8rem);
  background:
    radial-gradient(116% 74% at 50% -16%,rgba(45,48,143,.10),transparent 60%),
    radial-gradient(60% 46% at 5% 4%,rgba(6,165,25,.11),transparent 62%),
    radial-gradient(56% 44% at 96% 2%,rgba(4,131,206,.12),transparent 62%),
    #F6F8FD;
}
.wt-hero--coll .wt-hero__aura{
  position:absolute;left:50%;top:-18%;translate:-50% 0;z-index:0;
  width:min(1500px,120%);aspect-ratio:2/1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.9),transparent 70%);
}
.wt-hero--coll .wt-hero__rule{
  position:absolute;inset:auto 0 0;z-index:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(45,48,143,.16),transparent);
}

/* ── the arc ─────────────────────────────────────────────────────────── */
/* Sits outside .wt-hero__in so its width measures against the page: 100vw
   would include the scrollbar and push the run off-centre. */
.wt-coll{
  position:relative;z-index:3;
  width:min(1380px,calc(100% - clamp(1.5rem,4vw,3.2rem)));
  margin-inline:auto;margin-bottom:clamp(1.4rem,3.4vw,2.6rem);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.5rem,1.1vw,1.05rem);
  align-items:start;
}
.wt-coll__c{
  margin:0;margin-top:calc(var(--dy) * var(--wt-cw));
  aspect-ratio:4 / 5;overflow:hidden;
  border-radius:clamp(10px,1.1vw,18px);
  background:#E7EBF6;
  box-shadow:0 1px 2px rgba(6,16,52,.06),0 16px 38px rgba(45,48,143,.14);
  transition:transform .6s var(--e-out),box-shadow .6s var(--e-out);
}
.wt-coll__c img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--e-out);
}
.wt-coll__c:hover{
  transform:translateY(-10px);
  box-shadow:0 2px 4px rgba(6,16,52,.07),0 26px 58px rgba(45,48,143,.2);
}
.wt-coll__c:hover img{transform:scale(1.06)}

/* ── the type ────────────────────────────────────────────────────────── */
.wt-hero--coll .wt-hero__in{position:relative;z-index:3}
.wt-hero--coll .wt-hero__txt{
  display:grid;gap:clamp(.8rem,1.8vw,1.3rem);justify-items:center;text-align:center;
}
.wt-hero--coll .wt-hero__h{
  color:var(--ink);max-width:none;
  font-size:clamp(2.2rem,5.2vw,4.8rem);
}
/* the dark hero's warm gradient has no contrast on a light ground */
.wt-hero--coll .wt-hero__h em{
  background:linear-gradient(98deg,#0483CE 0%,#2D308F 34%,#0060E0 58%,#06A519 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wt-hero--coll .wt-hero__p{
  color:var(--ink-2);max-width:80ch;text-wrap:pretty;
}

/* ── narrower screens drop cards from the outside in ─────────────────── */
@media (max-width:980px){
  .wt-coll{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wt-coll__c:nth-child(1),.wt-coll__c:nth-child(6){display:none}
}
@media (max-width:620px){
  .wt-hero--coll{--wt-cw:clamp(14px,4vw,26px)}
  .wt-coll{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .wt-coll__c:nth-child(2){display:none}
}

/* ── FIGURE PANEL — overlaps the hero and the band beneath it ─────────── */
/* The panel blinked on load and intermittently while scrolling. Three
   expensive things were stacked on one element: a backdrop-filter, a scale
   transform from .rv-s, and a border ring repainting for ever. A transform on
   a backdrop-filtered element makes the browser resample everything behind it
   each frame, and it commonly shows one unfiltered frame while doing so.

   So the three are now separated. The panel itself is never transformed — the
   reveal moved to the figures inside it. The glass sits on its own static
   layer below the content. isolation + contain keep the ring's repaints from
   reaching past the panel. */
.wt-panel{
  position:relative;z-index:5;isolation:isolate;
  width:var(--shell);margin:auto;
  /* the prose above it needs air — the panel used to butt straight onto the
     last line of the paragraph */
  margin-top:clamp(2.2rem,4.6vw,3.4rem);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.7);
  /* confine repaints from the travelling edge light to this box */
  contain:paint;
}
/* the glass, on a layer of its own that nothing animates */
.wt-panel::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  /* pin it to its own compositing layer so scrolling does not rebuild it */
  transform:translateZ(0);
}
.wt-panel__hd{
  display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:baseline;
  padding:clamp(1rem,2vw,1.4rem) clamp(1.2rem,2.6vw,2rem);
  border-bottom:1px solid var(--line-2);
}
.wt-panel__hd b{
  font-size:.8rem;
  text-transform:uppercase;color:var(--indigo);font-weight:bold;
}
.wt-panel__hd span{font-size:.86rem;color:var(--ink-3)}
/* The gradient hairline that reads across the top of the panel. It hangs off
   the header, not off .wt-panel::after — that pseudo-element already carries
   the travelling edge light further down this sheet. */
.wt-panel__hd{position:relative}
.wt-panel__hd::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;
  background:var(--g-line);pointer-events:none;
}


/* ── shared section furniture ─────────────────────────────────────────── */
.wt-h{
  font-family:var(--f-head);font-weight:700;color:var(--ink);
  font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.12;letter-spacing:-.034em;
  max-width:22ch;
}
.wt-h em{
  font-style:normal;
  background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* body copy takes the body's own size — no second ramp to keep in step */
.wt-p{
  color:var(--ink-2);
  line-height:1.7;
}
.wt-p + .wt-p{margin-top:1rem}
.wt-lay{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(1.8rem,4.4vw,4.6rem);align-items:start;
}
.wt-note{
  font-family:var(--f-head);font-size:.82rem;
  color:#343434;
}
.wt-tint{background:var(--paper-2)}

/* ── NUMBER BLOCKS ────────────────────────────────────────────────────── */
.wt-nums{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  grid-template-columns:repeat(var(--n,4),minmax(0,1fr));
}
/* inside the glass panel the grid supplies its own edges */
.wt-panel .wt-nums{border:0;border-radius:0;background:var(--line-2)}
.wt-num{
  position:relative;overflow:hidden;
  background:var(--paper);
  padding:clamp(1.2rem,2.4vw,2rem);
  display:grid;gap:.55rem;align-content:start;
  transition:background .45s var(--e-out);
}
.wt-panel .wt-num{background:rgba(255,255,255,.72)}
/* the cursor wash, driven by main.js's [data-spotlight] */
.wt-num::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--indigo) 9%,transparent),transparent 62%);
  opacity:0;transition:opacity .45s var(--e-out);
}
.wt-num:hover::before{opacity:1}
.wt-num .advbar{
  position:absolute;left:0;bottom:0;width:0;height:3px;z-index:2;
  background:var(--g-line);transition:width .55s var(--e-out);
}
.wt-num:hover .advbar{width:100%}
.wt-num__ic{
  display:grid;place-items:center;
  width:70px;height:70px;border-radius:20px;
  background:var(--tint);color:var(--indigo);
  transition:background .45s var(--e-out),color .45s var(--e-out),transform .5s var(--e-spring);
}
.wt-num:hover .wt-num__ic{background:var(--indigo);color:#fff;transform:translateY(-2px)}
.wt-num__ic svg{width:34px;height:34px}
.wt-num__v{
  position:relative;
  font-family:var(--f-head);font-weight:700;color:var(--ink);
  font-size:clamp(1.6rem,3vw,2.6rem);line-height:1;letter-spacing:-.046em;
  font-variant-numeric:tabular-nums;
}
.wt-num__v .pfx{font-size:.6em;font-weight:500;letter-spacing:normal}
.wt-num__v .suf{font-size:.48em;font-weight:600;letter-spacing:-.01em;color:var(--indigo)}
.wt-num__l{position:relative;font-size:.92rem;color:var(--ink-3);line-height:1.45}
.wt-nums--lead .wt-num__v{
  font-size:clamp(1.75rem,3.4vw,2.9rem);
  background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── IMAGE + STAT PANEL — photo beside a stacked number column ─────────── */
.wt-imgstat{
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:clamp(1.1rem,2.4vw,1.8rem);
  align-items:stretch;
}
.wt-imgstat__media{
  position:relative;margin:0;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg);
  background:#E7EBF6;
  box-shadow:0 1px 2px rgba(6,16,52,.06),0 20px 46px rgba(45,48,143,.16);
}
.wt-imgstat__media img{
  display:block;width:100%;height:100%; object-fit:cover; aspect-ratio: 4/2.4;
  transition:transform .8s var(--e-out);

}
.wt-imgstat__media:hover img{transform:scale(1.045)}
.wt-imgstat__media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(196deg,transparent 52%,rgba(10,12,43,.6) 100%);
}
.wt-imgstat__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:.6rem;
  padding:clamp(1rem,2.2vw,1.4rem);
  color:#fff;font-family:var(--f-head);font-weight:600;font-size:.92rem;letter-spacing:-.01em;
}
.wt-imgstat__cap-ic{
  display:grid;place-items:center;flex:none;
  width:32px;height:32px;border-radius:10px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.wt-imgstat__cap-ic svg{width:17px;height:17px}

/* the image itself becomes a Swiper track; the caption bar and the nav
   pair share the same bottom edge, cap at the left, arrows at the right */
.wt-gal.swiper{position:relative;inset:0}
.wt-gal__nav{
  position:absolute;right:clamp(.8rem,1.8vw,1.2rem);bottom:clamp(.8rem,1.8vw,1.2rem);
  z-index:3;display:flex;gap:.5rem;
}
.wt-gal__arrow{
  display:grid;place-items:center;flex:none;
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .25s var(--e-out),transform .25s var(--e-out);
}
.wt-gal__arrow svg{width:15px;height:15px}
.wt-gal__arrow:hover{background:rgba(255,255,255,.32);transform:translateY(-1px)}
.wt-gal__arrow.swiper-button-disabled{opacity:.4;cursor:default;transform:none}
/* compound selector: outranks the plain .wt-nums responsive column counts below,
   so this stat column stays a single stacked list at every width */
.wt-nums.wt-imgstat__nums{grid-template-columns:1fr;margin:0}
.wt-imgstat__nums .wt-num{
  grid-template-columns:auto 1fr;column-gap:1rem;row-gap:.2rem;align-items:start;
  padding:clamp(1.05rem,1.9vw,1.45rem) clamp(1.1rem,2vw,1.5rem);
}
.wt-imgstat__nums .wt-num__ic{
  grid-row:1 / 3;width:52px;height:52px;border-radius:15px;
}
.wt-imgstat__nums .wt-num__ic svg{width:26px;height:26px}
.wt-imgstat__nums .wt-num__v{font-size:clamp(1.35rem,2vw,1.7rem)}
.wt-imgstat__nums .wt-num__l{font-size:.86rem}
/* four figures as a 2 x 2 grid rather than a single stacked list: each cell
   stacks its icon, figure and label */
.wt-nums.wt-imgstat__nums--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wt-imgstat__nums--grid .wt-num{
  grid-template-columns:1fr;row-gap:.3rem;align-content:start;
  padding:clamp(1.1rem,2vw,1.6rem);
}
.wt-imgstat__nums--grid .wt-num__ic{grid-row:auto;margin-bottom:.55rem}
.wt-imgstat__nums--grid .wt-num__v{font-size:clamp(1.6rem,2.4vw,2.1rem)}
/* each figure sits on a light tinted gradient. The rings are kept to the top
   corner and fade out, so the figure and its label are what the eye lands on */
.wt-imgstat__nums--grid .wt-num{
  --t:45,48,143;
  background:
    radial-gradient(70% 70% at 0% 100%,rgba(var(--t),.1),transparent 70%),
    linear-gradient(150deg,#fff 0%,rgba(var(--t),.07) 100%);
  transition:background-color .45s var(--e-out),box-shadow .45s var(--e-out);
}
.wt-imgstat__nums--grid .wt-num:nth-child(2){--t:4,131,206}
.wt-imgstat__nums--grid .wt-num:nth-child(3){--t:6,165,25}
.wt-imgstat__nums--grid .wt-num:nth-child(4){--t:239,97,6}
.wt-imgstat__nums--grid .wt-num > *{position:relative;z-index:1}
.wt-imgstat__nums--grid .wt-num::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 100% 0%,transparent 0 20px,rgba(var(--t),.16) 20px 21px);
  -webkit-mask:radial-gradient(circle at 100% 0%,#000 0,transparent 62%);
  mask:radial-gradient(circle at 100% 0%,#000 0,transparent 62%);
}
.wt-imgstat__nums--grid .wt-num:hover{box-shadow:inset 0 0 0 1px rgba(var(--t),.3)}
.wt-imgstat__nums--grid .wt-num__ic{
  background:linear-gradient(145deg,rgba(var(--t),.2),rgba(var(--t),.08));
  color:rgb(var(--t));box-shadow:inset 0 0 0 1px rgba(var(--t),.18);
}
.wt-imgstat__nums--grid .wt-num:hover .wt-num__ic{background:rgb(var(--t));color:#fff}
/* the information: a bigger, darker figure and a label that reads clearly */
.wt-imgstat__nums--grid .wt-num__v{
  font-size:clamp(2rem,3.2vw,2.7rem);line-height:1;letter-spacing:-.045em;color:var(--ink);
}
.wt-imgstat__nums--grid .wt-num__v .suf{color:rgb(var(--t));font-size:.5em}
.wt-imgstat__nums--grid .wt-num__l{
  font-size:.95rem;font-weight:600;line-height:1.35;color:var(--ink-2);
}
/* three figures: two side by side, the third running the full width with its
   icon to the left */
.wt-imgstat__nums--3 .wt-num:nth-child(3){
  grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:center;
}
.wt-imgstat__nums--3 .wt-num:nth-child(3) .wt-num__ic{grid-row:1 / 3;margin-bottom:0}
.wt-imgstat__nums--3 .wt-num:nth-child(3) .wt-num__v,
.wt-imgstat__nums--3 .wt-num:nth-child(3) .wt-num__l{grid-column:2}
/* no line drawing across the top on hover */
.wt-imgstat__nums--grid .advbar{display:none}
.wt-imgstat__text{
  display:flex;flex-direction:column;justify-content:center;gap:.85rem;
}
.wt-imgstat__text .wt-p{margin:0}
.wt-imgstat__text .btn{align-self:flex-start}
@media (max-width:900px){
  .wt-imgstat{grid-template-columns:1fr}
  .wt-imgstat__media img{min-height:0;aspect-ratio:16/10}
}

/* a large standalone TASK mark beside its own stat grid */
.wt-task-stats{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1.6rem,3.4vw,2.8rem);
  align-items:center;
}
.wt-task-stats__logo{width:clamp(160px,15vw,230px);height:auto;justify-self:start}
@media (max-width:820px){
  .wt-task-stats{grid-template-columns:1fr}
  .wt-task-stats__logo{width:170px}
}

/* ── ECOSYSTEM CARDS ──────────────────────────────────────────────────── */
/* Two columns and the same gutter as .ec-grid on the ecosystem page. */
.wt-orgs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.wt-org{
  --c:var(--indigo);
  position:relative;overflow:hidden;
  display:grid;gap:.9rem;align-content:start;
  padding:clamp(1.4rem,2.5vw,1.95rem);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),
             border-color .45s var(--e-out),background .45s var(--e-out);
}
.wt-org::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--c) 12%,transparent),transparent 60%);
  opacity:0;transition:opacity .45s var(--e-out);
}
.wt-org:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:transparent;background:#fff}
.wt-org:hover::before{opacity:1}
.wt-org .advbar{
  position:absolute;left:0;bottom:0;width:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 35%,var(--green-l)));
  transition:width .55s var(--e-out);
}
.wt-org:hover .advbar{width:100%}
.wt-org__top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem}
/* The mark sits on the card exactly as it does on the ecosystem page: no
   tinted chip, and the same 75px height .ec-card__logo uses. */
.wt-org__logo{display:flex;align-items:center}
.wt-org__logo img{display:block;height:75px;width:auto;object-fit:contain}
.wt-org__i{
  font-family:var(--f-head);font-size:.7rem;letter-spacing:.14em;color:var(--ink-4);
}
.wt-org__n{
  position:relative;
  font-family:var(--f-head);font-weight:700;font-size:1.22rem;
  letter-spacing:-.022em;color:var(--ink);
}
.wt-org__p{position:relative;font-size:.94rem;line-height:1.62;color:var(--ink-2)}
/* The same pill the ecosystem page uses, in the card's own accent, going to
   the organisation's own site rather than back into this one. */
.wt-org__go{
  position:relative;justify-self:start;margin-top:.3rem;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.72rem 1.25rem;border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:.87rem;font-weight:700;letter-spacing:-.01em;
  color:#fff;background:var(--c,var(--indigo));
  transition:transform .35s var(--e-out),box-shadow .35s var(--e-out),filter .3s var(--e-out);
}
.wt-org__go svg{width:14px;height:14px;transition:transform .35s var(--e-out)}
.wt-org__go:hover{
  transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 12px 28px color-mix(in srgb,var(--c,var(--indigo)) 34%,transparent);
}
.wt-org__go:hover svg{transform:translate(3px,-3px)}
.wt-org__go:focus-visible{outline:2px solid var(--c,var(--indigo));outline-offset:3px}

/* ── TECHNOLOGY & INNOVATION INFRASTRUCTURE ──────────────────────────── */

.wt-infra{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wt-infra__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,31rem);
  gap:clamp(1.3rem,4vw,5rem);align-items:end;margin-bottom:clamp(1.5rem,3vw,2.4rem);
}
.wt-infra__eyebrow{
  display:block;margin-bottom:.65rem;font-family:var(--f-head);font-size:.67rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--lg-blue);
}
.wt-infra__head > p{margin:0;font-size:clamp(.94rem,.4vw + .86rem,1.04rem);line-height:1.65;color:var(--ink-2)}
.wt-infra__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,1.7vw,1.35rem)}
.wt-infra__card{
  position:relative;overflow:hidden;isolation:isolate;min-height:16rem;padding:clamp(1.2rem,2vw,1.6rem);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
}
.wt-infra__card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.8;
  background:radial-gradient(12rem circle at 100% 0%,color-mix(in srgb,var(--c) 13%,transparent),transparent 68%);
}
.wt-infra__icon{
  display:grid;place-items:center;width:2.7rem;aspect-ratio:1;margin-bottom:1.4rem;border-radius:.8rem;
  color:var(--c);background:color-mix(in srgb,var(--c) 11%,var(--paper));
}
.wt-infra__icon svg{width:1.45rem;height:1.45rem}
.wt-infra__type{display:block;margin-bottom:.55rem;font-family:var(--f-head);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.wt-infra__card h3{margin:0;font-family:var(--f-head);font-size:clamp(1.03rem,1.4vw,1.2rem);line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
.wt-infra__card p{margin:.72rem 0 0;font-size:.91rem;line-height:1.6;color:var(--ink-2)}

/* ── PAGE RHYTHM AND POLISH ───────────────────────────────────────────── */
/* .sec caps its padding at 80px, which is right for an 800px band and much
   too tight either side of the 4,600px skilling one. The three bands on this
   page set their own. */
.wt-band{padding-block:clamp(4.5rem,7.2vw,7.5rem)}

/* A section opener's figures sit straight under its prose and need air off
   it. Only the skilling opener puts a figure grid directly after .wt-lay. */
.wt-lay + .wt-nums{margin-top:clamp(2.4rem,5vw,3.6rem)}

/* The economy band carries an .aura--sky that has never been visible: main
   .css only ever gives .aura a size through `.why .aura--sky`, and there is
   no .why ancestor on this page. Size it here instead. */
.wt-econ{position:relative;overflow:hidden}
.wt-econ > .aura--sky{
  width:min(56vw,740px);aspect-ratio:1;
  right:-13vw;top:-20vw;opacity:.3;
}

/* ── figure hierarchy ─────────────────────────────────────────────────── */
/* Two sets of figures lead a section — the economy panel and the skilling
   opener — and they carry .wt-nums--lead. Everything inside a stage is
   supporting, and used to be set at exactly the same weight. */
/* the step down is in the figure and the label; the icon stays one size
   across the page */
.wt-nums--sm .wt-num{padding:clamp(.95rem,1.8vw,1.35rem)}
.wt-nums--sm .wt-num__v{font-size:clamp(1.3rem,2.1vw,1.85rem)}
.wt-nums--sm .wt-num__l{font-size:.86rem}

/* TASK reports seven figures: four on the first row, three on the second.
   Seven divides into neither a four- nor a three-column grid, so the grid
   runs on twelve tracks instead and each row takes the span that fills it —
   4 x 3 then 3 x 4. Both rows come out flush without a filler cell. */
.wt-nums--43{grid-template-columns:repeat(12,minmax(0,1fr))}
.wt-nums--43 > :nth-child(-n+4){grid-column:span 3}
.wt-nums--43 > :nth-child(n+5){grid-column:span 4}
@media (max-width:1080px){
  /* three across, and the odd one out takes the full width */
  .wt-nums--43{grid-template-columns:repeat(12,minmax(0,1fr))}
  .wt-nums--43 > :nth-child(-n+6){grid-column:span 4}
  .wt-nums--43 > :nth-child(n+7){grid-column:span 12}
}
@media (max-width:820px){
  .wt-nums--43{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wt-nums--43 > :nth-child(-n+6){grid-column:span 2}
  .wt-nums--43 > :nth-child(n+7){grid-column:span 4}
}
@media (max-width:560px){
  /* One column. The reset has to repeat the :nth-child selectors rather than
     use `> *` — the span rules above are a class plus a pseudo-class and
     would otherwise outrank it, leaving a phantom second track. */
  .wt-nums--43{grid-template-columns:minmax(0,1fr)}
  .wt-nums--43 > :nth-child(-n+6),
  .wt-nums--43 > :nth-child(n+7){grid-column:auto}
}

/* ── A STAGE'S HEADLINE FIGURE ────────────────────────────────────────── */
/* Stage 01 counts institutions in its bars; the number of students inside
   them is the point of the whole stage, so it sits beside the opening
   paragraph rather than queueing up behind the bars. */
/* Three-line paragraph, taller card: left to itself the row took its height
   from the card and left a hole under the paragraph. So the bars share the
   band — paragraph then bars down the left, card spanning both on the right,
   and nothing is left hanging. */
.wt-stg__lead{
  display:grid;
  /* 65 / 35, as a ratio of the space left after the gutter — literal
     percentages plus a gap would come to more than the width */
  grid-template-columns:minmax(0,65fr) minmax(0,35fr);
  column-gap:clamp(1.4rem,3.2vw,2.8rem);
  row-gap:clamp(1.5rem,3vw,2.2rem);
  align-items:center;
}
/* Bars left, card right. Placed rather than ordered, so the markup can keep
   the card where it is and still read bars-first on the page. */
.wt-stg__lead > .wt-bars{grid-column:1;grid-row:1}
.wt-stg__lead > .wt-feat{grid-column:2;grid-row:1}
.wt-feat{
  position:relative;overflow:hidden;margin:0;
  display:grid;gap:.45rem;justify-items:start;
  padding:clamp(1.3rem,2.6vw,1.9rem);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 80% at 100% 0%,
      color-mix(in srgb,var(--c,var(--indigo)) 9%,transparent),transparent 62%),
    var(--paper);
  box-shadow:0 1px 2px rgba(10,12,43,.04),0 18px 44px color-mix(in srgb,var(--c,var(--indigo)) 12%,transparent);
}
/* the same gradient keyline the figure panel carries up the page */
.wt-feat::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--g-line);
}
.wt-feat__ic{
  display:grid;place-items:center;
  width:70px;height:70px;border-radius:20px;margin-bottom:.35rem;
  background:color-mix(in srgb,var(--c,var(--indigo)) 10%,transparent);
  color:var(--c,var(--indigo));
}
.wt-feat__ic svg{width:34px;height:34px}
.wt-feat__k{
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3);
}
.wt-feat__v{
  display:flex;align-items:baseline;gap:.3rem;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.048em;
  font-variant-numeric:tabular-nums;
  background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.wt-feat__u{font-size:.38em;font-weight:600;letter-spacing:-.01em}
.wt-feat__l{
  font-size:.92rem;line-height:1.5;color:var(--ink-3);
  padding-top:.5rem;margin-top:.2rem;border-top:1px solid var(--line-2);
  justify-self:stretch;
}

@media (max-width:900px){
  /* one column: bars, then the card under them */
  .wt-stg__lead{grid-template-columns:minmax(0,1fr)}
  .wt-stg__lead > .wt-bars{grid-column:1;grid-row:1}
  .wt-stg__lead > .wt-feat{grid-column:1;grid-row:2}
}

/* ── SKILLING: ONE SECTION, FOUR STAGES ───────────────────────────────── */
/* This was five peer sections alternating dark/white/tint/white/dark, each
   with an H2 as loud as the two above it. It is one story — a pathway from
   ITIs and ATCs, through higher learning, out to work abroad — so it is one
   section now, and the stages hang off a single spine. Everything inside is
   the same furniture as before; only the frame changed. */
/* .wt-skill now always carries .wt-dark too, whose own background (further
   down, "DARK BAND") wins the cascade — the textured navy gradient used on
   the Global Summit page's 2025 Recap section, reused here as-is. */
.wt-kick{
  display:flex;align-items:center;gap:.8rem;
  margin:0 0 clamp(.9rem,2vw,1.4rem);
  font-family:var(--f-head);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--indigo);
}
.wt-kick::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,var(--line-3),transparent);
}

.wt-stages{
  list-style:none;margin:clamp(3rem,6vw,5rem) 0 0;padding:0;
  display:grid;gap:clamp(2.8rem,5.6vw,4.6rem);
}
/* one token for the node, so the disc, the gutter it sits in and the spine
   that runs through its centre cannot drift apart. Sized to the stage
   heading's own first line, which is what it reads against. */
.wt-stg{
  --wt-node:clamp(1.9rem,3.2vw,2.7rem);
  position:relative;
  padding-left:calc(var(--wt-node) + clamp(1rem,1.9vw,1.7rem));
}
/* The spine, drawn from each node down to the next. Each segment starts in
   its own stage's colour and hands off to the one below, so the four read as
   a single gradient running the length of the pathway rather than four
   separate rules that happen to line up. */
.wt-stg::before{
  content:"";position:absolute;
  left:calc(var(--wt-node) / 2 - 1.5px);
  top:calc(var(--wt-node) + .5rem);
  bottom:calc(clamp(2.8rem,5.6vw,4.6rem) * -1);
  width:3px;border-radius:3px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--c,var(--indigo)) 52%,transparent),
    color-mix(in srgb,var(--c2,var(--c,var(--indigo))) 34%,transparent));
  /* a soft bloom either side, so the line sits in the page rather than on it */
  box-shadow:0 0 12px color-mix(in srgb,var(--c,var(--indigo)) 22%,transparent);
  /* fade both ends: the line leaves its own node and arrives at the next one
     without either join showing a hard stop */
  mask-image:linear-gradient(180deg,transparent,#000 7% 88%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 7% 88%,transparent);
}
/* the dotted understudy — texture under the solid run, at the width of the
   track, so the spine reads as something measured rather than merely drawn */
.wt-stg::after{
  content:"";position:absolute;
  left:calc(var(--wt-node) / 2 - .5px);
  top:calc(var(--wt-node) + .5rem);
  bottom:calc(clamp(2.8rem,5.6vw,4.6rem) * -1);
  width:1px;pointer-events:none;
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--c,var(--indigo)) 60%,transparent) 0 3px,transparent 3px 9px);
  background-size:1px 9px;
  mask-image:linear-gradient(180deg,transparent,#000 12% 84%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12% 84%,transparent);
  opacity:.5;
}
.wt-stg:last-child::before,
.wt-stg:last-child::after{display:none}
/* Each stage carries its own --c, and the four walk the brand line in order:
   indigo, sky, green, orange — the same sequence as --g-line. The pathway
   then reads as a progression rather than four identical markers. */
.wt-stg__n{
  position:absolute;left:0;top:0;
  display:grid;place-items:center;
  width:var(--wt-node);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(140deg,
    color-mix(in srgb,var(--c,var(--indigo)) 78%,#fff),
    var(--c,var(--indigo)));
  color:#fff;
  font-family:var(--f-head);font-size:clamp(.62rem,.86vw,.74rem);letter-spacing:.06em;
  /* the ring is a spread shadow rather than a pseudo-element: no extra box to
     place, and nothing that can slip behind the band's own background */
  box-shadow:
    0 0 0 6px color-mix(in srgb,var(--c,var(--indigo)) 10%,transparent),
    0 8px 22px color-mix(in srgb,var(--c,var(--indigo)) 32%,transparent);
}
.wt-stg__b{display:grid;gap:clamp(1.3rem,2.8vw,2rem);align-content:start}
.wt-stg__h{
  margin:0;
  font-family:var(--f-head);font-weight:700;color:var(--ink);
  font-size:clamp(1.45rem,2.6vw,2.15rem);line-height:1.14;letter-spacing:-.03em;
}
.wt-stg__h em{
  font-style:normal;
  background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* the stage's own lead paragraph sits tight under its heading */
.wt-stg__h + .wt-p{margin-top:calc(clamp(1.3rem,2.8vw,2rem) * -.42)}

/* Stage 03 holds four items of its own. They used to be numbered, which
   would now read as a second counter inside a numbered stage, so they are
   ruled apart instead. */
/* a step whose subject has a mark of its own sets it beside the prose */
.wt-step__lead{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
}
.wt-step__logo{
  width:clamp(130px,15vw,210px);height:auto;justify-self:end;
}
@media (max-width:760px){
  .wt-step__lead{grid-template-columns:minmax(0,1fr)}
  .wt-step__logo{justify-self:start}
}

.wt-steps--flat{gap:0}
.wt-steps--flat .wt-step{padding-left:0}
.wt-steps--flat .wt-step::before{display:none}
.wt-steps--flat .wt-step + .wt-step{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--line-2);
}

@media (max-width:640px){
  .wt-stg{padding-left:0}
  .wt-stg::before{display:none}
  .wt-stg__n{position:static;margin-bottom:.9rem}
}

/* ── MODERNISING TECHNICAL EDUCATION ─────────────────────────────────────
   Was stage 01 of a numbered wt-stages pathway; promoted to be this whole
   sub-section's own heading, with the institution network chart as its
   lead visual (.wt-stg__h / .wt-stg__lead reused unchanged). The five
   themes that follow reuse .wt-steps--flat's already-proven divider
   treatment (no spine, no node) at the top level, each carrying an icon
   badge instead of a number. */
.wt-tech{display:grid;gap:clamp(1.3rem,2.8vw,2rem)}
.wt-tech__head{display:grid;gap:clamp(1.3rem,2.8vw,2rem)}

.wt-jump{
  margin:2rem 0 ;
  position:sticky;top:calc(var(--hdr-h) + .8rem);z-index:20;
  display:flex;flex-wrap:wrap;gap:.5rem;
  padding:1rem 1rem;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--paper-2) 92%,transparent);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 24px -14px rgba(10,12,43,.18);
}
.wt-jump__l{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.05rem;border-radius:var(--r-pill);
  font-family:var(--f-head);font-size:.84rem;font-weight:500;color:var(--ink-2);
  text-decoration:none;background:transparent;
  transition:background .3s var(--e-out),color .3s var(--e-out),box-shadow .3s var(--e-out);
}
.wt-jump__ic{display:grid;place-items:center;flex:none;width:18px;height:18px;color:inherit}
.wt-jump__ic svg{display:block;width:18px;height:18px}
.wt-jump__l:hover{background:var(--paper);color:var(--ink)}
.wt-jump__l.is-on{
  background:var(--paper);color:var(--indigo);
  box-shadow:0 1px 2px rgba(6,16,52,.06),0 8px 18px rgba(45,48,143,.14);
}

.wt-step__head{display:flex;align-items:center;gap:.85rem}
.wt-step__ic{
  display:grid;place-items:center;flex:none;
  width:2.6rem;height:2.6rem;border-radius:14px;
  background:color-mix(in srgb,var(--c,var(--indigo)) 12%,#fff);
  color:var(--c,var(--indigo));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--indigo)) 18%,transparent);
}
.wt-step__ic svg{display:block;width:22px;height:22px}

@media (max-width:760px){
  .wt-jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wt-jump::-webkit-scrollbar{display:none}
  .wt-jump__l{white-space:nowrap;padding:.6rem}
  .wt-jump__t{display:none}
}

/* ── DARK BAND ────────────────────────────────────────────────────────── */
.wt-dark{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(146deg,#0A0C2B 0%,#141A4E 48%,#0C2B57 100%);
  color:#fff;
}
.wt-dark::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 54% at 88% -6%,rgba(4,131,206,.34),transparent 66%),
    radial-gradient(42% 48% at 6% 106%,rgba(6,165,25,.26),transparent 68%);
}
.wt-dark::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:calc(100% / 8) 100%;
  mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);
}
/* the glow and the grid are both positioned z-index:0 layers, which paint
   above a plain static-flow child regardless of source order -- give the
   real content a stacking context of its own so it always wins */
.wt-dark > .shell{position:relative;z-index:1}
.wt-dark > .shell{position:relative;z-index:1}
.wt-dark .wt-h{color:#fff}
.wt-dark .wt-h em{
  background:linear-gradient(96deg,var(--orange-l),#FFC46B 60%,var(--green-l));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wt-dark .wt-p{color:rgba(255,255,255,.78)}
.wt-dark .wt-note{color:rgba(255,255,255,.52)}
.wt-dark .wt-nums{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14)}
.wt-dark .wt-num{background:rgba(255,255,255,.045)}
.wt-dark .wt-num:hover{background:rgba(255,255,255,.08)}
.wt-dark .wt-num__v{color:#fff}
.wt-dark .wt-num__v .suf{color:var(--orange-l)}
.wt-dark .wt-num__l{color:rgba(255,255,255,.62)}
.wt-dark .wt-num__ic{background:rgba(255,255,255,.1);color:#fff}
.wt-dark .wt-num:hover .wt-num__ic{background:var(--orange);color:#fff}
.wt-dark .wt-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.86)}
.wt-dark .wt-chip:hover{border-color:var(--orange-l);color:#fff;background:rgba(255,255,255,.12)}

/* ── INSTITUTION BARS ─────────────────────────────────────────────────── */
/* The five counts share a unit, so they are drawn to scale against the
   largest rather than listed — the shape of the network is the point. */
.wt-bars{display:grid;gap:clamp(.7rem,1.4vw,1.05rem)}
.wt-bar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:.3rem 1.2rem;align-items:baseline;
}
.wt-bar__l{font-size:.95rem;color:var(--ink-2);font-weight:500}
.wt-bar__v{
  font-family:var(--f-head);font-weight:700;font-size:clamp(1.15rem,2vw,1.6rem);
  letter-spacing:-.036em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.wt-bar__t{
  grid-column:1 / -1;position:relative;
  height:10px;border-radius:var(--r-pill);
  background:var(--paper-3);overflow:hidden;
}
.wt-bar__f{
  position:absolute;inset:0 auto 0 0;border-radius:inherit;
  width:var(--w,0%);
  background:linear-gradient(90deg,var(--indigo),var(--sky) 62%,var(--green));
  transform-origin:left center;transform:scaleX(0);
  transition:transform 1.15s var(--e-out);
}
.is-ready .wt-bar__f,.no-motion .wt-bar__f{transform:scaleX(1)}
/* each bar starts a little after the one above it */
.wt-bar:nth-child(2) .wt-bar__f{transition-delay:.09s}
.wt-bar:nth-child(3) .wt-bar__f{transition-delay:.18s}
.wt-bar:nth-child(4) .wt-bar__f{transition-delay:.27s}
.wt-bar:nth-child(5) .wt-bar__f{transition-delay:.36s}

/* ── CHIPS ────────────────────────────────────────────────────────────── */
.wt-chips{display:flex;flex-wrap:wrap;gap:2rem}
.wt-chip{
  font-size:.76rem;letter-spacing:.06em;
  padding:.58rem 1rem;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line);color:var(--ink-2);
  transition:border-color .4s var(--e-out),color .4s var(--e-out),
             background .4s var(--e-out),transform .4s var(--e-out);
}
.wt-chip:hover{border-color:var(--indigo);color:var(--indigo);background:var(--tint);transform:translateY(-2px)}

/* ── STEPPED SUB-BLOCKS ───────────────────────────────────────────────── */
.wt-steps{display:grid;gap:clamp(1.6rem,3.2vw,2.6rem);position:relative}
.wt-step{
  position:relative;display:grid;gap:1.05rem;
  padding-left:clamp(2.6rem,4.4vw,3.6rem);
}
/* the node and the line that threads the blocks together */
.wt-step::before{
  content:"";position:absolute;left:clamp(.55rem,1.1vw,.85rem);top:1.5rem;bottom:-clamp(1.6rem,3.2vw,2.6rem);
  width:1px;background:linear-gradient(180deg,var(--line-3),transparent);
}
.wt-step:last-child::before{display:none}
.wt-step__n{
  position:absolute;left:0;top:.15rem;
  display:grid;place-items:center;
  width:clamp(1.4rem,2.6vw,1.85rem);aspect-ratio:1;border-radius:50%;
  background:var(--indigo);color:#fff;
  font-family:var(--f-head);font-size:.62rem;letter-spacing:.04em;
}
.wt-step__h{
  font-family:var(--f-head);font-weight:700;color:var(--ink);
  font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:-.026em;
}

/* ── PATHWAY ──────────────────────────────────────────────────────────── */
/* The number lives inside its card: a display figure in the step's own
   colour with the label under it, and the same figure again oversized and
   faded into the corner so the card has something to sit on. */
.wt-path{
  position:relative;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.55rem,1.1vw,.85rem);
  list-style:none;padding:0;margin:0;counter-reset:step;
}
.wt-path li{
  position:relative;z-index:0;overflow:hidden;counter-increment:step;
  display:grid;gap:.45rem;align-content:start;justify-items:start;
  padding:clamp(1rem,1.9vw,1.35rem) clamp(.85rem,1.5vw,1.1rem) clamp(1.05rem,2vw,1.4rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--f-head);font-weight:600;
  font-size:clamp(.86rem,.95vw,.96rem);line-height:1.3;letter-spacing:-.014em;
  color:var(--ink);
  /* the cap bar, in the step's colour */
  background-image:linear-gradient(var(--sc,var(--indigo)),var(--sc,var(--indigo)));
  background-repeat:no-repeat;background-size:100% 3px;background-position:0 0;
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),
             border-color .45s var(--e-out),background-size .45s var(--e-out);
}
/* an icon in place of the figure; the number stays as the watermark */
.wt-path__ic{
  width:clamp(26px,2.5vw,32px);height:auto;flex:none;
  color:var(--sc,var(--indigo));
  transition:transform .45s var(--e-spring),color .4s var(--e-out);
}
.wt-path li:hover .wt-path__ic{transform:translateY(-2px) scale(1.06)}
/* the same figure, oversized and faded into the corner */
.wt-path li::after{
  content:counter(step,decimal-leading-zero);
  position:absolute;right:-.16em;bottom:-.3em;z-index:-1;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(3.4rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.07em;
  color:var(--sc,var(--indigo));opacity:.08;pointer-events:none;
  transition:opacity .45s var(--e-out),transform .55s var(--e-out);
}
/* one colour per step: blues while the candidate is being trained,
   greens once they are placed */
.wt-path li:nth-child(1){--sc:#0483CE}
.wt-path li:nth-child(2){--sc:#0060E0}
.wt-path li:nth-child(3){--sc:#0024B4}
.wt-path li:nth-child(4){--sc:#2D308F}
.wt-path li:nth-child(5){--sc:#06A519}
.wt-path li:nth-child(6){--sc:#007028}

.wt-path li:hover{
  transform:translateY(-4px);box-shadow:var(--sh-2);
  border-color:color-mix(in srgb,var(--sc) 38%,transparent);
  background-size:100% 5px;
}
.wt-path li:hover::after{opacity:.14;transform:translate(-4px,-4px)}

/* the destination */
.wt-path li:last-child{
  background-color:var(--indigo);
  background-image:linear-gradient(120deg,var(--indigo),var(--sky));
  background-size:100% 100%;
  border-color:transparent;color:#fff;
  box-shadow:0 12px 30px rgba(45,48,143,.28);
}
.wt-path li:last-child:hover{background-size:100% 100%}
.wt-path li:last-child .wt-path__ic{color:#fff}
.wt-path li:last-child::after{color:#fff;opacity:.16}
.wt-path li:last-child:hover::after{opacity:.26}

/* on a dark band */
.wt-dark .wt-path li{
  background-color:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);color:#fff;
}
.wt-dark .wt-path li:hover{background-color:rgba(255,255,255,.1)}
.wt-dark .wt-path li::after{opacity:.13}

/* ── CLOSING BAND ─────────────────────────────────────────────────────── */
.wt-close{
  position:relative;
  display:grid;gap:clamp(1.1rem,2.2vw,1.5rem);justify-items:start;
  padding:0;
  color:var(--ink);
}
.wt-close__h{
  position:relative;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.3rem,2.3vw,1.9rem);letter-spacing:-.026em;line-height:1.2;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .wt-lay{grid-template-columns:1fr}
  .wt-nums{grid-template-columns:repeat(min(var(--n,4),3),minmax(0,1fr))}
  .wt-infra__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .wt-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wt-hero{min-height:auto;padding-bottom:clamp(5.5rem,14vw,8rem)}
  /* the panel used to ride the hero seam and was pulled up into it here; it
     now closes the economy section, so it needs air above rather than a lift */
  .wt-panel{margin-top:clamp(1.8rem,5vw,2.6rem)}
}
@media (max-width:900px){
  .wt-orgs{grid-template-columns:minmax(0,1fr)}
  .wt-infra__head{grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
}
@media (max-width:1080px){
  .wt-path{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .wt-path{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .wt-nums{grid-template-columns:1fr}
  .wt-path{grid-template-columns:minmax(0,1fr)}
  .wt-bar{grid-template-columns:1fr}
  .wt-infra__grid{grid-template-columns:minmax(0,1fr)}
  .wt-infra__card{min-height:0}
}

/* someone who asked for less motion gets the page, not the animation */
@media (prefers-reduced-motion:reduce){
  .wt-hero__orb,.wt-cue i::after{animation:none}
  .wt-hero__slide{animation:none}
  .wt-bar__f{transition:none;transform:scaleX(1)}
}

/* ============================================================================
   FIXES + MOTION PASS
   ========================================================================= */

/* ── the hero's masked lines ──────────────────────────────────────────── */
/* main.js drives .hero and .cta only, so a hero that is neither keeps its
   lines clipped for ever. about.js and summit.js each solve this in their own
   page script; this one does it in CSS, keyed off the same .is-ready signal,
   so the page still needs no JavaScript of its own. */
html.js .wt-hero__h .mask-l > span{transform:translateY(110%)}
html.is-ready .wt-hero__h .mask-l > span{animation:wt-line 1.15s var(--e-out) both}
html.is-ready .wt-hero__h .mask-l:nth-of-type(2) > span{animation-delay:.13s}
@keyframes wt-line{from{transform:translateY(110%)}to{transform:translateY(0)}}
html.no-motion .wt-hero__h .mask-l > span{animation:none;transform:none}
/* the head failsafe can set .no-motion long after the hero has started; the
   frame on screen stays, it simply stops moving */
html.no-motion .wt-hero__slide{animation:none;opacity:0}
html.no-motion .wt-hero__slide:first-of-type{opacity:1}

/* ── headings on dark ground ──────────────────────────────────────────── */
/* main.css colours headings with --ink, which beats an inherited white, so
   every heading sitting on a dark panel has to say so itself. */
.wt-dark .wt-step__h,
.wt-panel__hd b{color:inherit}

.wt-close__h{margin:0}

/* ── the panel's travelling edge light ────────────────────────────────── */
@property --wt-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.wt-panel::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--wt-ang),
    transparent 0 58%,
    color-mix(in srgb,var(--sky) 62%,transparent) 74%,
    color-mix(in srgb,var(--green-l) 45%,transparent) 82%,
    transparent 94%);
  -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;
  animation:wt-spin 11s linear infinite;
}
@keyframes wt-spin{to{--wt-ang:360deg}}

/* ── scroll-driven motion ─────────────────────────────────────────────── */
/* Progressive enhancement: where the browser can tie an animation to an
   element's own progress through the viewport, the photograph drifts and the
   bars draw themselves as they arrive. Everywhere else the page is unchanged. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .wt-hero__media{
      animation:wt-par linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes wt-par{
      from{transform:translateY(-3%)}
      to  {transform:translateY(4%)}
    }
    /* the bars fill where they are read, not on page load */
    .wt-bar__f{
      transition:none;
      animation:wt-fill .9s var(--e-out) both;
      animation-timeline:view();
      animation-range:entry 42% cover 34%;
    }
    @keyframes wt-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .wt-orgs .wt-org{
      animation:wt-rise .7s var(--e-out) both;
      animation-timeline:view();
      animation-range:entry 12% cover 26%;
    }
    @keyframes wt-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  }
}

/* ── keyboard focus ───────────────────────────────────────────────────── */
.wt-chip:focus-visible,.wt-path li:focus-visible{
  outline:2px solid var(--indigo);outline-offset:3px;border-radius:var(--r);
}
.wt-dark .wt-chip:focus-visible{outline-color:var(--orange-l)}

/* ── THE SEVEN ATC SUBJECTS ───────────────────────────────────────────── */
/* These replaced a run-on sentence. Each subject carries its own accent
   through --c, so the row reads as seven things rather than one list, and
   the glyphs are the same 24x24 / 1.7 stroke family as .wt-num__ic above. */
.wt-subjs__lead{
  color:var(--ink-3); font-weight: 500;
  margin-bottom:clamp(.9rem,1.8vw,1.2rem);
}
.wt-subj{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,1vw,.7rem);
  list-style:none;margin:0;padding:0;
}
/* seven items into four columns: the last takes the spare one so the second
   row finishes flush rather than trailing off */
.wt-subj__c--wide{grid-column:span 2}

.wt-subj__c{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:center;
  padding:.85rem 1rem;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);
  transition:transform .5s var(--e-spring),box-shadow .5s var(--e-out),border-color .45s var(--e-out);
}
/* the accent runs along the top edge and completes on hover */
.wt-subj__c::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:30%;
  background:linear-gradient(90deg,var(--c),transparent);
  transition:width .55s var(--e-out);
}
/* the cursor wash main.js already feeds through --mx / --my */
.wt-subj__c::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--c) 13%,transparent),transparent 62%);
  transition:opacity .45s var(--e-out);
}
.wt-subj__c:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.wt-subj__c:hover::before{width:100%}
.wt-subj__c:hover::after{opacity:1}

.wt-subj__ic{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:11px;
  background:color-mix(in srgb,var(--c) 13%,transparent);
  color:var(--c);
  transition:background .45s var(--e-out),color .45s var(--e-out),transform .5s var(--e-spring);
}
.wt-subj__c:hover .wt-subj__ic{background:var(--c);color:#fff;transform:translateY(-2px)}
.wt-subj__ic svg{width:19px;height:19px;overflow:visible}
.wt-subj__t{
  position:relative;z-index:1;
  font-family:var(--f-head);font-weight:600;font-size:.94rem;
  letter-spacing:-.012em;color:var(--ink);line-height:1.3;
}

/* Each glyph draws itself as the row comes up the screen. The dash is set
   well past the longest stroke in the set, so every shape starts fully
   retracted and the shorter ones simply finish first — which is what gives
   the row its staggered feel without staggering anything by hand.
   Progressive enhancement: where the browser cannot tie an animation to an
   element's own progress, the glyphs are just drawn. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .wt-subj__ic svg > *{
      stroke-dasharray:var(--dash,260);
      animation:wt-draw linear both;
      animation-timeline:view();
      animation-range:entry 14% cover 26%;
    }
    @keyframes wt-draw{
      from{stroke-dashoffset:var(--dash,260)}
      to{stroke-dashoffset:0}
    }
  }
}

@media (max-width:980px){
  .wt-subj{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* two columns divide seven evenly enough without a spare to fill */
  .wt-subj__c--wide{grid-column:span 2}
}
@media (max-width:560px){
  .wt-subj{grid-template-columns:minmax(0,1fr)}
  .wt-subj__c--wide{grid-column:span 1}
}

/* six priority sectors read best as two rows of three, echoing the card grid */
.wt-subj--sectors{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){
  .wt-subj--sectors{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .wt-subj--sectors{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .wt-subj__c,.wt-subj__ic{transition:none}
  .wt-subj__c:hover{transform:none}
  .wt-subj__c:hover .wt-subj__ic{transform:none}
}

/* ── landing spots for the Why Telangana nav dropdown ─────────────────── */
/* The header is fixed, so an anchor jump would otherwise land the heading
   underneath it. The utility bar has to be counted as well: it collapses on
   scroll, but on a cold load — arriving from another page's dropdown, which
   is the main way these links are used — it is still open, and the header is
   112px rather than 78. Budgeting for the taller case costs a little extra
   space once the bar has gone, which is the harmless direction to be wrong. */
#socio-economic,
#innovation,
#skilling{scroll-margin-top:calc(var(--hdr-h) + var(--util-h) + 1rem)}