/* ============================================================================
   ELECTRONICS — the investment story
   Loaded after sector-detail.css, only by sector-electronics.html.

   The page had told eight consecutive stories inside the same dark purple
   slab. Everything here exists to give each one a shape of its own, so the
   reader can tell a capability list from a balance sheet from a corridor at a
   glance. Nothing in the shared system is touched; every rule is scoped to
   .sd--elec and prefixed .ex-.

   Ground alternates deliberately — dark bands are reserved for the three
   storytelling moments (the destination, the partnership, the corridor) and
   everything between them is light, so the dark carries weight when it comes.

   01  Tokens and shared furniture
   02  Immersive band            — Future City & E-City
   03  Ledger                    — Divitipally
   04  Sticky split              — Foxconn
   05  Image story               — Resolute x SixUnited
   06  Journey                   — Telangana-Taiwan
   07  Ecosystem diagram         — Clean power
   08  Momentum timeline
   09  Corridor
   10  Location explorer
   11  Responsive
   ========================================================================= */

/* 01 ── TOKENS AND SHARED FURNITURE ──────────────────────────────────── */

.sd--elec{
  /* off the logo — no purple, no orange */
  --ex-blue:#0483CE;
  --ex-navy:#0024B4;
  --ex-green:#06A519;
  --ex-gold:#F8C828;
  --ex-amber:#E0A800;   /* gold reads at 2:1 on white, so light ground uses this */
  --ex-red:#E80000;
  /* the "you are here" colour, which differs by ground */
  --ex-lit:var(--ex-amber);

  /* the dark band, built off the logo navy. It used to run #0A0C2B ->
     #1B1046 -> #2A1358, which is a violet the logo has no part of. */
  --ex-dark:#0A0C2B;
  --ex-dark-2:#101A4E;
  --ex-dark-3:#0E2A66;
  --ex-hair:rgba(255,255,255,.14);
  --ex-dim:rgba(255,255,255,.66);
  --ex-gap:clamp(4.5rem,9vw,11rem);
}

/* the dark storytelling band */
.ex-band{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(152deg,var(--ex-dark) 0%,var(--ex-dark-2) 52%,var(--ex-dark-3) 100%);
  color:#fff;
  padding-block:var(--ex-gap);
}
/* circuitry: a fine rule grid with the traces picked out, faded at the edges */
.ex-band__grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(82% 74% at 50% 34%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(82% 74% at 50% 34%,#000,transparent 80%);
}
.ex-band__glow{
  position:absolute;z-index:0;pointer-events:none;
  width:min(62%,700px);aspect-ratio:1;border-radius:50%;
  right:-10%;top:-26%;
  background:radial-gradient(circle,color-mix(in srgb,var(--sd-accent) 52%,transparent),transparent 64%);
  filter:blur(30px);opacity:.7;will-change:transform;
}
/* the counter-light in the corner, gold rather than the orange it was */
.ex-band__glow--warm{
  right:auto;left:-14%;top:auto;bottom:-32%;
  width:min(52%,560px);
  background:radial-gradient(circle,rgba(248,200,40,.26),transparent 64%);
}
.ex-band > .shell{position:relative;z-index:1}
/* gold carries on dark ground where it could not on white */
.ex-band{--ex-lit:var(--ex-gold)}

/* a light section that owns its own rhythm rather than .sec's */
.ex-light{position:relative;padding-block:var(--ex-gap)}
.ex-light--tint{background:var(--paper-2)}

/* No eyebrows: every section opens on its headline. */

/* statement type — the oversized editorial heading */
.ex-say{
  margin:0;
  font-family:var(--f-head);font-weight:700;color:var(--ink);
  font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.04;letter-spacing:-.042em;
  text-wrap:balance;
}
/* The emphasised phrase takes the same gradient the page's lead heading
   carries — blue into navy into green, off the logo. em and b are treated
   alike so the markup can use whichever reads better in the sentence. */
.ex-say em,
.ex-say b{
  font-style:normal;font-weight:700;
  background:linear-gradient(96deg,var(--ex-blue),var(--ex-navy) 52%,#007028);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.ex-band .ex-say{color:#fff}
/* on dark ground the same idea, lifted so it can be read: gold into sky
   into a light green */
.ex-band .ex-say em,
.ex-band .ex-say b{
  background:linear-gradient(96deg,var(--ex-gold),#5FB9F2 54%,var(--green-l));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* the page's own .d2 headings, which had no treatment on their em at all */
.sd--elec .d2 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--ex-blue),var(--ex-navy) 52%,#007028);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

.ex-say--sm{font-size:clamp(1.7rem,3.2vw,2.7rem);letter-spacing:-.034em}

.ex-lede{
  margin:clamp(1rem,2vw,1.4rem) 0 0;max-width:58ch;
  color:var(--ink-2);line-height:1.72;
}
.ex-band .ex-lede{color:var(--ex-dim)}

/* 02 ── IMMERSIVE BAND: FUTURE CITY & E-CITY ─────────────────────────── */

.ex-dest{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.ex-dest__hd{position:sticky;top:calc(var(--hdr-h) + 2.4rem)}

/* the capability run: nodes threaded on a drawn line, not tiles */
.ex-run{
  position:relative;margin:0;padding:0 0 0 clamp(2.4rem,4vw,3.2rem);
  list-style:none;display:grid;gap:clamp(1.1rem,2.4vw,1.8rem);
}
/* The track, and the length of it that has been read. The part still ahead
   is dotted — a trace waiting for signal; the part behind is solid and lit.
   Both ends fade so the line never stops dead against a node. */
.ex-run::before,
.ex-run::after{
  content:"";position:absolute;left:10px;top:.6rem;bottom:.6rem;width:3px;border-radius:3px;
  mask-image:linear-gradient(180deg,transparent,#000 5% 95%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 5% 95%,transparent);
}
.ex-run::before{
  background-image:linear-gradient(180deg,var(--ex-hair) 0 4px,transparent 4px 11px);
  background-size:3px 11px;
}
.ex-run::after{
  background:linear-gradient(180deg,var(--ex-gold),var(--ex-blue));
  box-shadow:0 0 14px rgba(248,200,40,.4);
  transform-origin:top;transform:scaleY(var(--draw,1));
}
.ex-run__i{position:relative;display:grid;gap:.4rem}
.ex-run__i::before{
  content:"";position:absolute;left:calc(-1 * clamp(2.4rem,4vw,3.2rem) + 4px);top:.34rem;
  width:16px;height:16px;border-radius:50%;
  background:var(--ex-dark-2);border:2px solid var(--ex-hair);
  transition:border-color .5s var(--e-out),box-shadow .5s var(--e-out);
}
.ex-run__i.is-on::before{
  border-color:var(--ex-gold);
  box-shadow:0 0 0 5px rgba(248,200,40,.16);
}
.ex-run__n{
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.16em;
  color:rgba(255,255,255,.4);
}
.ex-run__t{
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.4;letter-spacing:-.018em;
  color:rgba(255,255,255,.94);
}

/* 03 ── LEDGER: DIVITIPALLY ──────────────────────────────────────────── */

/* Heading left, the paragraph beside it rather than under it. The heading
   used to be capped at 34ch, which at 64px broke it over five lines down the
   left third and left the right half of the section empty. */
.ex-led__top{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:end;
}
/* no measure cap here: the track is already the right width, and 46ch left
   the paragraph 77px short of the edge the rules below it run to */
.ex-led__top .ex-lede{margin-top:0;max-width:none}

/* The lead figure and its caption take opposite ends of one rule — a headline
   number in an annual report, not a number with a hole beside it. */
.ex-led__lead{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:clamp(1.2rem,3vw,2.6rem);
  margin-top:clamp(2.4rem,5vw,4rem);
  padding-bottom:clamp(1.4rem,2.8vw,2rem);
  border-bottom:1px solid var(--line);
}
.ex-big{
  /* flex items shrink by default, and a one-character box loses most of its
     width doing it — the rupee mark was being squeezed from 21px to 7 */
  flex:0 0 auto;
  margin:0;display:flex;align-items:baseline;gap:.12em;
  font-family:var(--f-head);font-weight:700;color:var(--ink);
  font-size:clamp(3.4rem,9vw,7rem);line-height:.86;letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}
/* The heading's -.055em tracking is inherited as an absolute -6px, which at
   this size eats most of a one-character box. Both marks opt out of it. */
.ex-big > *{flex:none}
/* The mark hangs in the gutter so the numeral itself starts on the column
   edge and lines up with the figures underneath. Below the two-column
   breakpoint the gutter is too narrow to hang into, so it stops. */
.ex-big .pfx{margin-left:-.85em}
@media (max-width:960px){.ex-big .pfx{margin-left:0}}
.ex-big .pfx{font-size:.42em;font-weight:500;color:var(--ink-3);letter-spacing:normal}
.ex-big .suf{font-size:.26em;font-weight:700;color:var(--ex-red);letter-spacing:normal}
.ex-led__cap{
  margin:0 0 .5rem;max-width:26ch;text-align:right;
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.45;letter-spacing:-.018em;
  color:var(--ink-2);
}
/* the supporting four, divided by rules only */
.ex-led__row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.ex-led__f{
  position:relative;display:grid;gap:.45rem;align-content:start;
  padding:clamp(1.4rem,2.8vw,2rem) clamp(1rem,2vw,1.6rem) 0 0;
}
.ex-led__f + .ex-led__f{padding-left:clamp(1rem,2vw,1.6rem)}
.ex-led__f + .ex-led__f::before{
  content:"";position:absolute;left:0;top:clamp(1.4rem,2.8vw,2rem);bottom:.2rem;
  width:1px;background:var(--line);
}
.ex-led__f b{
  font-family:var(--f-head);font-weight:700;color:var(--ink);
  font-size:clamp(1.85rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
/* the unit opts out of the numeral's negative tracking, which at this size
   is an absolute -2px and closes the letters up */
.ex-led__f b .suf{
  font-size:.46em;font-weight:700;color:var(--ex-red);
  letter-spacing:normal;margin-left:.12em;
}
/* the label only. Without the child combinator this also caught .ct and .suf
   inside the <b>, which held the numeral itself at 14px. */
.ex-led__f > span{font-size:.92rem;line-height:1.5;color:var(--ink-3)}

/* the energy line that runs the width of the section */
.ex-wire{
  position:relative;height:2px;margin-top:clamp(2rem,4vw,3rem);
  background:var(--line);overflow:hidden;
}
.ex-wire::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--ex-blue),var(--ex-green),transparent);
  transform-origin:left;transform:scaleX(var(--draw,1));
}

/* 04 ── STICKY SPLIT: FOXCONN ────────────────────────────────────────── */

.ex-split{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.ex-split__hd{position:sticky;top:calc(var(--hdr-h) + 2.4rem)}

/* capabilities as a ruled list — no boxes, no shadows */
.ex-list{margin:0;padding:0;list-style:none;display:grid;counter-reset:cap}
.ex-list__i{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,2.2vw,1.8rem);align-items:baseline;
  padding:clamp(1rem,2.2vw,1.5rem) 0;
  border-top:1px solid var(--line);
  opacity:.42;transition:opacity .6s var(--e-out),padding-left .5s var(--e-out);
}
.ex-list__i:last-child{border-bottom:1px solid var(--line)}
.ex-list__i.is-on,
.ex-list__i:hover{opacity:1;padding-left:.5rem}
html.no-motion .ex-list__i{opacity:1}
.ex-list__n{
  counter-increment:cap;
  font-family:var(--f-head);font-size:.7rem;letter-spacing:.12em;color:var(--ink-4);
  transition:color .5s var(--e-out);
}
.ex-list__n::before{content:counter(cap,decimal-leading-zero)}
.ex-list__i.is-on .ex-list__n,
.ex-list__i:hover .ex-list__n{color:var(--ex-red)}
.ex-list__t{
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(1.05rem,1.8vw,1.42rem);line-height:1.34;letter-spacing:-.022em;
  color:var(--ink);
}

/* 05 ── IMAGE STORY: RESOLUTE x SIXUNITED ────────────────────────────── */

.ex-story{position:relative}
.ex-story__fig{
  position:relative;margin:clamp(1.8rem,4vw,3rem) 0 0;
  border-radius:var(--r-lg);overflow:hidden;background:var(--ink);
  aspect-ratio:21 / 9;
}
.ex-story__fig img{
  display:block;width:100%;height:118%;object-fit:cover;
  will-change:transform;
}
/* the caption sits on the picture, on a gradient rather than a slab */
.ex-story__cap{
  position:absolute;inset:auto 0 0;z-index:2;
  padding:clamp(3rem,7vw,6rem) clamp(1.2rem,3vw,2.4rem) clamp(1.1rem,2.4vw,1.8rem);
  background:linear-gradient(180deg,transparent,rgba(10,12,43,.9) 62%);
  color:rgba(255,255,255,.88);font-size:.88rem;line-height:1.6;
  max-width:78ch;
}
/* the product run as quiet pills over the picture's top edge */
.ex-pills{
  position:absolute;inset:clamp(1rem,2.4vw,1.6rem) clamp(1.2rem,3vw,2.4rem) auto;z-index:2;
  display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;
}
.ex-pills li{
  padding:.42rem .85rem;border-radius:var(--r-pill);
  background:rgba(10,12,43,.52);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--f-head);font-weight:600;font-size:.82rem;color:#fff;
}

/* 06 ── JOURNEY: TELANGANA-TAIWAN ────────────────────────────────────── */

.ex-journey{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.ex-journey__fig{
  margin:clamp(1.6rem,3.2vw,2.4rem) 0 0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--ex-hair);
}
.ex-journey__fig img{display:block;width:100%;height:auto}
.ex-journey__fig figcaption{
  padding:.85rem 1.1rem;font-size:.84rem;line-height:1.55;
  color:var(--ex-dim);border-top:1px solid var(--ex-hair);
}
/* outcomes as numbered milestones on a connecting line */
/* Four even rows, each taking its own height. Stretching them to meet the
   photograph beside it only spread the rules apart and left a void under
   every pair — the run reads better tight. */
.ex-mile{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;align-content:start;
}
.ex-mile__i{
  position:relative;
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(.9rem,1.8vw,1.3rem) clamp(1.1rem,2.2vw,1.6rem) 0;
  border-top:1px solid var(--ex-hair);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.95rem;align-items:center;align-content:center;
}
.ex-mile__i:nth-child(even){padding-left:clamp(.9rem,1.8vw,1.3rem)}
.ex-mile__i:nth-child(even)::before{
  content:"";position:absolute;left:0;top:clamp(1rem,2vw,1.4rem);bottom:clamp(1rem,2vw,1.4rem);
  width:1px;background:var(--ex-hair);
}
/* the glyph sits on a soft plate rather than a hard tile, so eight of them
   in a column read as a set without turning into eight more boxes */
.ex-mile__ic{
  display:grid;place-items:center;flex:none;
  width:clamp(34px,3.2vw,42px);aspect-ratio:1;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--ex-hair);
  color:var(--ex-gold);
  transition:background .45s var(--e-out),border-color .45s var(--e-out),color .45s var(--e-out);
}
.ex-mile__ic svg{width:56%;height:56%}
.ex-mile__i:hover .ex-mile__ic{
  background:rgba(248,200,40,.14);border-color:rgba(248,200,40,.5);color:#fff;
}
.ex-mile__t{
  font-family:var(--f-head);font-weight:500;font-size:1.02rem;line-height:1.36;
  letter-spacing:-.018em;color:rgba(255,255,255,.92);
}

/* 07 ── ECOSYSTEM BOARD: CLEAN POWER ────────────────────────────────── */

/* the heading takes the width, its line sitting beside it */
.ex-eco{display:grid;gap:clamp(2rem,4.4vw,3.4rem)}
.ex-eco__hd{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.4rem,3.4vw,3rem);align-items:end;
}
.ex-eco__hd .ex-lede{margin-top:0;max-width:none}

/* four panels on one rail. The rail runs between the first and last node
   only — it used to overshoot to the edge with nothing to reach. */
.ex-grid{
  position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  --exg:clamp(.7rem,1.6vw,1.2rem);
  gap:var(--exg);
  padding-top:2.6rem;
}
/* the rail runs from the first node to the last — an eighth of the width in
   from each edge, which is where the outer two columns centre */
.ex-grid::before,
.ex-grid::after{
  content:"";position:absolute;top:9px;height:3px;border-radius:3px;
  left:calc(12.5% - var(--exg) * .375);right:calc(12.5% - var(--exg) * .375);
}
.ex-grid::before{
  background-image:linear-gradient(90deg,var(--line-3) 0 5px,transparent 5px 12px);
  background-size:12px 3px;
}
.ex-grid::after{
  background:linear-gradient(90deg,
    var(--ex-green) 0 33.333%,
    var(--ex-blue) 33.333% 66.666%,
    var(--ex-red) 66.666% 100%);
  transform-origin:left;transform:scaleX(var(--draw,1));
  box-shadow:0 0 12px color-mix(in srgb,var(--ex-blue) 26%,transparent);
}

.ex-cell{
  position:relative;
  display:grid;gap:.6rem;align-content:start;
  padding:clamp(1.4rem,2.8vw,2.1rem) clamp(1.2rem,2.2vw,1.7rem) clamp(1.6rem,3vw,2.2rem);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--nc) 9%,transparent),
    color-mix(in srgb,var(--nc) 2%,transparent) 62%,transparent);
  border:1px solid color-mix(in srgb,var(--nc) 18%,transparent);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),
             border-color .5s var(--e-out);
}
/* the node each panel hangs from, sitting on the rail above it */
.ex-cell::before{
  content:"";position:absolute;left:50%;top:calc(-2.6rem + 3px);translate:-50% 0;
  width:15px;height:15px;border-radius:50%;
  background:var(--paper-2);border:3px solid var(--nc);
  transition:box-shadow .5s var(--e-out),transform .5s var(--e-spring);
}
.ex-cell:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--nc) 42%,transparent);
  box-shadow:0 1px 2px rgba(10,12,43,.05),0 22px 48px color-mix(in srgb,var(--nc) 20%,transparent);
}
.ex-cell:hover::before{transform:translate(-50%,0) scale(1.2);box-shadow:0 0 0 6px color-mix(in srgb,var(--nc) 16%,transparent)}
.ex-cell__ic{
  display:grid;place-items:center;
  width:clamp(44px,4.2vw,56px);aspect-ratio:1;border-radius:16px;margin-bottom:.35rem;
  background:color-mix(in srgb,var(--nc) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--nc) 22%,transparent);
  color:var(--nc);
  transition:background .5s var(--e-out),color .5s var(--e-out);
}
.ex-cell__ic svg{width:54%;height:54%}
.ex-cell:hover .ex-cell__ic{background:var(--nc);color:#fff}
.ex-cell__a{
  margin:0;font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.12rem,1.8vw,1.4rem);letter-spacing:-.026em;line-height:1.2;color:var(--ink);
}
.ex-cell__b{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-2)}

/* the keywords close the section as a strip rather than floating under the
   heading as loose text */
.ex-words{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin:0;padding:clamp(1.2rem,2.4vw,1.8rem) 0 0;list-style:none;
  border-top:1px solid var(--line);
}
.ex-words li{
  padding:.46rem .9rem;border-radius:var(--r-pill); font-weight: 500;
  background:var(--paper);border:1px solid var(--line); font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
  transition:color .35s var(--e-out),border-color .35s var(--e-out),transform .35s var(--e-out);
}
/* the dot carries the programme colour; the label stays quiet until hover */
.ex-words li{display:flex;align-items:center;gap:.5rem}
.ex-words li::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--wc,var(--ex-blue));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--wc,var(--ex-blue)) 15%,transparent);
}
.ex-words li:hover{
  color:var(--wc,var(--ex-blue));
  border-color:color-mix(in srgb,var(--wc,var(--ex-blue)) 46%,transparent);
  background:color-mix(in srgb,var(--wc,var(--ex-blue)) 5%,#fff);
  transform:translateY(-2px);
}

/* 08 ── MOMENTUM TIMELINE ────────────────────────────────────────────── */

.ex-mom{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.ex-mom__media{position:sticky;top:calc(var(--hdr-h) + 2.4rem)}
.ex-mom__fig{
  margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--paper);
}
.ex-mom__fig .ex-mom__crop{overflow:hidden;aspect-ratio:3 / 2}
.ex-mom__fig img{display:block;width:100%;height:112%;object-fit:cover;will-change:transform}
.ex-mom__fig figcaption{
  padding:.95rem 1.15rem;font-size:.86rem;line-height:1.58;color:var(--ink-2);
  border-top:1px solid var(--line);
}
/* milestones on a progress line */
.ex-tl{position:relative;margin:0;padding:0 0 0 clamp(2.4rem,4vw,3rem);list-style:none;counter-reset:ms}
/* same treatment as the capability run: dotted ahead, solid and lit behind */
.ex-tl::before,
.ex-tl::after{
  content:"";position:absolute;left:10px;top:1.4rem;bottom:1.4rem;width:3px;border-radius:3px;
  mask-image:linear-gradient(180deg,transparent,#000 4% 96%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 4% 96%,transparent);
}
.ex-tl::before{
  background-image:linear-gradient(180deg,var(--line-3) 0 4px,transparent 4px 11px);
  background-size:3px 11px;
}
.ex-tl::after{
  background:linear-gradient(180deg,var(--ex-blue),var(--ex-green));
  box-shadow:0 0 14px color-mix(in srgb,var(--ex-blue) 30%,transparent);
  transform-origin:top;transform:scaleY(var(--draw,1));
}
.ex-tl__i{
  position:relative;display:grid;gap:.35rem;
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;
  border-top:1px solid var(--line);
}
.ex-tl__i:first-child{border-top:0}
.ex-tl__i::before{
  content:"";position:absolute;left:calc(-1 * clamp(2.4rem,4vw,3rem) + 4px);top:calc(clamp(1.1rem,2.2vw,1.6rem) + .35rem);
  width:16px;height:16px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-3);
  transition:border-color .5s var(--e-out),box-shadow .5s var(--e-out);
}
.ex-tl__i.is-on::before{border-color:var(--ex-amber);box-shadow:0 0 0 5px rgba(224,168,0,.18)}
.ex-tl__n{
  counter-increment:ms;
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.14em;color:var(--ink-4);
}
.ex-tl__n::before{content:counter(ms,decimal-leading-zero)}
.ex-tl__t{
  font-family:var(--f-head);font-weight:700;font-size:clamp(1.15rem,2vw,1.6rem);
  letter-spacing:-.028em;color:var(--ink);
}
.ex-tl__i.is-on .ex-tl__t{color:var(--ex-blue)}
.ex-tl__p{font-size:.95rem;line-height:1.6;color:var(--ink-2);max-width:48ch}

/* 09 ── CORRIDOR ─────────────────────────────────────────────────────── */

.ex-cor{
  --cw:clamp(250px,23vw,300px);   /* one station */
  --cgap:clamp(.9rem,1.8vw,1.4rem);
  --cpad:clamp(1.2rem,2.2vw,1.6rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.ex-cor__hd{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(1.4rem,2.8vw,2rem);
}
.ex-cor__note{
  margin:0;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ex-dim);
}
.ex-cor__nav{display:flex;gap:.6rem;flex:none}
.ex-cor__b{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid var(--ex-hair);
  color:#fff;cursor:pointer;padding:0;
  transition:background .4s var(--e-out),border-color .4s var(--e-out),
             color .4s var(--e-out),opacity .4s var(--e-out);
}
.ex-cor__b svg{width:20px;height:20px}
.ex-cor__b:hover:not(:disabled){
  background:rgba(248,200,40,.16);border-color:rgba(248,200,40,.55);color:var(--ex-gold);
}
.ex-cor__b:disabled{opacity:.3;cursor:default}
.ex-cor__b:focus-visible{outline:2px solid var(--ex-gold);outline-offset:3px}

/* the rail scrolls, and fades out at whichever edge still has route left */
.ex-cor__rail{
  display:flex;gap:var(--cgap);
  margin:0;padding:8px 0 16px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),
    #000 calc(100% - var(--fr,0px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),
    #000 calc(100% - var(--fr,0px)),transparent 100%);
}
.ex-cor__rail::-webkit-scrollbar{display:none}
.ex-cor__rail:focus-visible{outline:2px solid var(--ex-gold);outline-offset:6px;border-radius:var(--r-lg)}

.ex-cor__st{
  position:relative;flex:0 0 var(--cw);scroll-snap-align:start;
  display:grid;gap:.55rem;align-content:start;
  padding:calc(var(--cpad) + 2.5rem) var(--cpad) calc(var(--cpad) + .2rem);
  border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(255,255,255,.085),rgba(255,255,255,.018) 58%,transparent);
  border:1px solid var(--ex-hair);
  transition:transform .5s var(--e-out),border-color .5s var(--e-out),
             background .5s var(--e-out);
}
/* the route line: from this stop's node to the next one's */
.ex-cor__st::before{
  content:"";position:absolute;top:calc(var(--cpad) + 12px);
  left:var(--cpad);width:calc(100% + var(--cgap) + 2px);height:2px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--sc) 70%,transparent),
    color-mix(in srgb,var(--sc) 24%,transparent));
}
.ex-cor__st:last-child::before{display:none}
/* the node */
.ex-cor__st::after{
  content:"";position:absolute;top:calc(var(--cpad) + 4px);left:var(--cpad);
  width:18px;height:18px;border-radius:50%;
  background:var(--ex-dark);border:3px solid var(--sc);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--sc) 12%,transparent);
  transition:box-shadow .5s var(--e-out),transform .5s var(--e-spring);
}
.ex-cor__st:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--sc) 46%,transparent);
  background:linear-gradient(165deg,
    color-mix(in srgb,var(--sc) 16%,transparent),
    rgba(255,255,255,.02) 58%,transparent);
}
.ex-cor__st:hover::after{
  transform:scale(1.14);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--sc) 20%,transparent);
}
.ex-cor__nm{
  margin:0;font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.22rem);letter-spacing:-.026em;line-height:1.24;color:#fff;
}
.ex-cor__sub{margin:0;font-size:.92rem;line-height:1.55;color:var(--ex-dim)}

/* how far along the route you are */
.ex-cor__prog{
  position:relative;height:2px;border-radius:2px;
  background:var(--ex-hair);overflow:hidden;
}
.ex-cor__prog i{
  position:absolute;top:0;bottom:0;left:0;width:30%;border-radius:2px;
  background:linear-gradient(90deg,var(--ex-gold),var(--ex-blue));
  transition:left .25s var(--e-out),width .25s var(--e-out);
}

/* 10 ── LOCATION EXPLORER ────────────────────────────────────────────── */

/* ---- the head and the footnote --------------------------------------- */
/* The ring is centred in its own column, so a left-ranged heading above it
   and a left-ranged footnote below left the section reading off two
   different axes. Both come to the middle. */
#locations > .shell > .ex-say,
#locations > .shell > .ex-lede{text-align:center;margin-inline:auto}
#locations > .shell > .ex-lede{max-width:54ch}
#locations > .shell > .el-find{margin-inline:auto}
#locations .ex-fine{
  grid-template-columns:minmax(0,1fr);justify-items:center;
  gap:.6rem;text-align:center;
}
#locations .ex-fine p{max-width:76ch}

/* ---- the wheel ------------------------------------------------------- */
/* Hidden until there is room for twelve labels; the list is the selector
   below that tier. Same arrangement as the sector index. */
.ex-wheel{display:none;position:relative;width:100%;max-width:620px;margin-inline:auto}
/* a wash under the ring so it sits on the page rather than floating on it */
.ex-wheel::before{
  content:"";position:absolute;inset:-6%;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 46%,
    rgba(0,96,224,.075),rgba(0,112,40,.05) 46%,transparent 68%);
  pointer-events:none;
}
.ex-wheel svg,.ex-hub{position:relative;z-index:1}
.ex-wheel svg{width:100%;height:auto;display:block;overflow:visible}
.ex-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--wh-hub,28%);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;justify-items:center;gap:.1rem;
  background:#fff;box-shadow:0 1px 2px rgba(10,12,43,.05),0 18px 44px rgba(10,12,43,.07);
  pointer-events:none;text-align:center;
}
.ex-hub b{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1;letter-spacing:-.05em;
  background:linear-gradient(96deg,var(--ex-blue),var(--ex-navy) 52%,#007028);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.ex-hub span{
  font-family:var(--f-head);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4);
}
.exwh__ring{fill:none;stroke:rgba(0,36,180,.13);stroke-width:1.2}
.exwh__dot{fill:rgba(0,36,180,.16)}
.exwh__loc{cursor:pointer}
.exwh__loc:focus-visible{outline:none}
.exwh__loc:focus-visible .exwh__arc{stroke-width:30}
.exwh__arc{
  fill:none;stroke-linecap:round;
  transition:stroke-width .35s var(--e-out),opacity .35s var(--e-out);
}
.exwh__hit{fill:none;stroke:transparent;stroke-linecap:butt;cursor:pointer}
.exwh__lab{
  font-family:var(--f-body);font-size:12.5px;font-weight:700;
  fill:var(--ink-2);letter-spacing:-.01em;
  transition:fill .3s var(--e-out),opacity .35s var(--e-out);
  pointer-events:auto;cursor:pointer;
}
/* once one is picked the rest step back, so the live one reads at a glance */
.exwh.is-picked .exwh__arc{opacity:.42}
.exwh.is-picked .exwh__lab{fill:var(--ink-4)}
.exwh .exwh__loc.is-on .exwh__arc{opacity:1;stroke-width:30}
.exwh .exwh__loc.is-on .exwh__lab{fill:var(--ink)}
.exwh .exwh__loc:hover .exwh__arc{opacity:1;stroke-width:26}
.exwh .exwh__loc:hover .exwh__lab{fill:var(--ink)}
/* search takes the misses out of the ring rather than leaving them live */
.exwh .exwh__loc.is-off{pointer-events:none}
.exwh .exwh__loc.is-off .exwh__arc{opacity:.1}
.exwh .exwh__loc.is-off .exwh__lab{opacity:.26}


.ex-loc{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:start;
  margin-top:clamp(1.6rem,3.2vw,2.4rem);
}
/* the two column heads the table used to carry */
.ex-loc__hd{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin:0 0 .3rem;padding:0 .4rem .5rem;
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4);
}
.ex-loc__col{min-width:0}
.ex-loc__list{margin:0;padding:0;list-style:none;display:grid;max-height:none}
.ex-loc__b{
  position:relative;width:100%;text-align:left;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.9rem;align-items:center;
  padding:clamp(.85rem,1.8vw,1.15rem) .4rem;
  background:none;border:0;border-top:1px solid var(--line);
  color:inherit;font:inherit;cursor:pointer;
  transition:padding-left .4s var(--e-out),background .4s var(--e-out);
}
.ex-loc__i:last-child .ex-loc__b{border-bottom:1px solid var(--line)}
.ex-loc__b:hover{padding-left:.9rem}
.ex-loc__b.is-on{padding-left:.9rem;background:var(--tint)}
.ex-loc__b:focus-visible{outline:2px solid var(--sd-accent);outline-offset:-2px}
.ex-loc__n{font-family:var(--f-head);font-size:.68rem;letter-spacing:.1em;color:var(--ink-4)}
.ex-loc__b.is-on .ex-loc__n{color:var(--ex-red)}
.ex-loc__t{
  font-family:var(--f-head);font-weight:600;font-size:clamp(.98rem,1.4vw,1.12rem);
  letter-spacing:-.02em;color:var(--ink);line-height:1.3;
}
.ex-loc__go{
  width:22px;height:8px;color:var(--line-3);
  transition:color .4s var(--e-out),transform .4s var(--e-out);
}
.ex-loc__b:hover .ex-loc__go,
.ex-loc__b.is-on .ex-loc__go{color:var(--ex-blue);transform:translateX(3px)}
.ex-loc__i[hidden]{display:none}
/* the detail panel, held while the list scrolls */
.ex-loc__detail{position:sticky;top:calc(var(--hdr-h) + 2.4rem);display:grid}
.ex-loc__d{
  position:relative;overflow:hidden;
  grid-area:1 / 1;
  padding:clamp(1.7rem,3.4vw,2.6rem);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  box-shadow:0 1px 2px rgba(10,12,43,.04),0 20px 44px rgba(10,12,43,.06);
  display:grid;gap:.9rem;align-content:start;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .4s var(--e-out),transform .45s var(--e-out),visibility 0s linear .4s;
}
.ex-loc__d.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--e-out),transform .45s var(--e-out),visibility 0s}
/* the bar along the top says which arc this card belongs to */
.ex-loc__d::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--lc,var(--sd-accent)),
    color-mix(in srgb,var(--lc,var(--sd-accent)) 30%,transparent));
  transition:background .45s var(--e-out);
}
.ex-loc__dk{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lc,var(--sd-accent));
  transition:color .45s var(--e-out);
}
.ex-loc__dk::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--lc,var(--sd-accent));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lc,var(--sd-accent)) 16%,transparent);
}
.ex-loc__dt{
  margin:0;font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.032em;line-height:1.12;color:var(--ink);
}
.ex-loc__dp{margin:0;font-size:1rem;line-height:1.66;color:var(--ink-2)}
.ex-loc__none{
  padding:clamp(1.2rem,2.4vw,1.8rem);border:1px dashed var(--line-3);border-radius:var(--r);
  font-size:.92rem;color:var(--ink-3);
}
.ex-loc__none[hidden]{display:none}

/* the caveat, set as a footnote rather than a card */
.ex-fine{
  margin-top:clamp(2.2rem,4.4vw,3.2rem);
  padding-top:clamp(1.1rem,2.2vw,1.6rem);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,2.4vw,2rem);
}
.ex-fine b{
  font-family:var(--f-head);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;white-space:nowrap;
}
.ex-fine p{margin:0;font-size:.9rem;line-height:1.66;color:var(--ink-3);max-width:80ch}

/* Nothing sits in the second column of this head, and the 1fr / .82fr split
   held "Investment opportunities" to 675px when it needs 743 — so it wrapped.
   The head takes the shell. */
#value-chain .sec-head,
#opportunities .sec-head{grid-template-columns:minmax(0,1fr)}
#value-chain .sec-head__t .lede,
#opportunities .sec-head__t .lede{max-width:62ch}

/* The ring needs more width than the list does, and enough of it that twelve
   labels stay legible. Above this tier it is the selector and the list steps
   aside; below it, the list is the selector. */
@media (min-width:1200px){
  .ex-loc{
    grid-template-columns:minmax(0,1fr) minmax(340px,480px);
    gap:clamp(1.4rem,2.6vw,2.6rem);align-items:center;
  }
  .ex-wheel{display:block}
  .ex-loc__col{display:none}
  .ex-loc__detail{position:static}
}

/* 11 ── RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width:960px){
  .sd--elec{--ex-gap:clamp(3.4rem,8vw,5.5rem)}
  .ex-dest,.ex-split,.ex-journey,.ex-mom,.ex-loc,
  .ex-led__top{grid-template-columns:minmax(0,1fr)}
  .ex-led__top{align-items:start}
  .ex-led__top .ex-lede{margin-top:clamp(1rem,2vw,1.4rem)}
  /* the caption drops under its figure rather than across the row from it */
  .ex-led__cap{text-align:left}
  .ex-dest__hd,.ex-split__hd,.ex-mom__media,.ex-loc__detail{position:static}
  .ex-led__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-led__f:nth-child(odd){padding-left:0}
  .ex-led__f:nth-child(odd)::before{display:none}
  .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;padding-top:0}
  .ex-grid::before,.ex-grid::after{display:none}
  .ex-cell::before{display:none}
  .ex-eco__hd{grid-template-columns:minmax(0,1fr);align-items:start}
  .ex-story__fig{aspect-ratio:16 / 10}
  /* the detail panel follows its list on one column */
  .ex-loc__detail{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
}
@media (max-width:620px){
  .ex-grid{grid-template-columns:minmax(0,1fr)}
  .ex-led__lead{grid-template-columns:minmax(0,1fr);align-items:start}
  .ex-led__cap{margin-bottom:0}
  .ex-led__row{grid-template-columns:minmax(0,1fr)}
  .ex-led__f{padding-right:0}
  .ex-led__f + .ex-led__f{padding-left:0;border-top:1px solid var(--line)}
  .ex-led__f + .ex-led__f::before{display:none}
  .ex-mile{grid-template-columns:minmax(0,1fr)}
  .ex-mile__i:nth-child(even){padding-left:0}
  .ex-mile__i:nth-child(even)::before{display:none}
  /* one station fills the phone, and the arrows are the way through */
  .ex-cor{--cw:min(78vw,300px)}
  .ex-cor__hd{flex-direction:column;align-items:flex-start;gap:1rem}
  .ex-story__fig{aspect-ratio:4 / 3}
  .ex-pills{position:static;padding:0 0 .9rem}
  .ex-pills li{background:var(--tint);border-color:var(--line);color:var(--ink)}
  .ex-story__cap{position:static;background:var(--ink);padding:1.1rem 1.2rem}
  .ex-fine{grid-template-columns:minmax(0,1fr);gap:.5rem}
}

/* no motion: everything that scroll would have drawn is simply drawn */
html.no-motion .ex-run::after,
html.no-motion .ex-wire::after,
html.no-motion .ex-nodes::after,
html.no-motion .ex-tl::after,
html.no-motion .ex-tl::after{transform:none}
html.no-motion .ex-band__glow{transform:none !important}