/* ==========================================================================
   INVEST TELANGANA — Sector detail page
   Loaded after main.css. Scoped .sd-* so the shared system (header, footer,
   buttons, type scale, .rv motion) carries over untouched.

   Written generically rather than for Aerospace alone: every focus sector
   gets a page of this shape, and the accent is a single custom property, so a
   new sector is a new content file plus one colour.
   --------------------------------------------------------------------------
   01  Tokens
   02  Hero (photographic)
   03  Lead
   04  The Edge (numbered rails)
   05  Strategic advantages
   06  Gallery
   07  Companies marquee
   08  CTA
   09  Responsive
   ========================================================================== */

.sd{
  --lg-blue:#0060E0;
  --lg-navy:#0024B4;
  --lg-green:#007028;
  --lg-lime:#98D048;
  --lg-yellow:#F8C828;
  --lg-amber:#E0A800;
  --sd-ink:#061034;
  --sd-accent:#1E42C1;          /* overridden per sector on <main> */
}

/* 02 ── HERO ─────────────────────────────────────────────────────────── */

.sd-hero{
  position:relative;overflow:hidden;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--hdr-h) + var(--util-h));
  padding-bottom:clamp(2rem,5vw,4rem);
  background:var(--sd-ink);
}
.sd-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.sd-hero__media img{
  position:absolute;inset:0;width:100%;height:110%;
  object-fit:cover;object-position:50% 46%;
  filter:saturate(1.04) contrast(1.03);
}
.sd-hero__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: radial-gradient(ellipse at center,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.sd-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 74%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 74%);
}
.sd-hero__in{
  position:relative;z-index:3;
  width:var(--shell);margin-inline:auto;
  display:grid;gap:clamp(1.1rem,2.2vw,1.7rem);
  justify-items:center;text-align:center;
}

/* the sector mark, sitting above the title */
.sd-hero__mark{
  display:grid;place-items:center;
  width:clamp(74px,7.4vw,96px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(140deg,var(--sd-accent),#4E7BFF 52%,var(--lg-lime));
  box-shadow:0 14px 40px color-mix(in srgb,var(--sd-accent) 42%,transparent),
             inset 0 0 0 1px rgba(255,255,255,.28);
}
.sd-hero__mark svg{
  width:46%;height:46%;fill:#fff;
}
/* the sector mark sits with the title, per the brief */
.sd-hero__badge{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:.55rem 1.15rem .55rem .6rem;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;font-weight:500;
}
.sd-hero__badge svg{
  width:34px;height:34px;padding:6px;box-sizing:border-box;
  border-radius:50%;background:#fff;color:var(--sd-accent);
  fill:currentColor;flex:0 0 auto;
}
.sd-hero__h{
  font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:.98;letter-spacing:-.042em;color:#fff;
}
.sd-hero__h em{
  font-style:normal;
  background:linear-gradient(96deg,#8FD0FF,#FFFFFF 44%,var(--lg-lime));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* main.css parks .mask-l > span at translateY(110%) for the home page's hero
   timeline, which does not run here — own the resting state, and pad the clip
   box so Ubuntu's ascenders are not shaved by the tight leading */
.sd-hero__h .mask-l{overflow:hidden;padding-block:.12em;margin-block:-.12em}
html.js .sd-hero__h .mask-l > *,
html.no-motion .sd-hero__h .mask-l > *{transform:none;opacity:1}

.sd-hero__p{
  max-width:60ch;color:rgba(255,255,255,.86);
  font-size:clamp(.98rem,.42vw + .88rem,1.12rem);line-height:1.6;
}
.sd-hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;padding-top:.5rem}
.sd-hero .btn--out{color:#fff;border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.08)}
.sd-hero .btn--out:hover{background:#fff;color:var(--sd-ink);border-color:#fff}

/* The figures now stand as their own band between the overview and the edge,
   so they carry a solid ground rather than a translucent one over the hero. */
.sd-facts{
  position:relative;z-index:1;overflow:hidden;
  background:linear-gradient(150deg,var(--sd-ink) 0%,#06246E 100%);
}
.sd-facts__in{
  width:var(--shell);margin-inline:auto;align-items:center;
  padding-block:clamp(.4rem,1vw,.9rem);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.sd-fact{position:relative;padding:clamp(1rem,2vw,1.5rem) clamp(.6rem,1.4vw,1.3rem) clamp(1rem,2vw,1.5rem) 0;display:grid;gap:.3rem}
.sd-fact + .sd-fact{padding-left:clamp(.9rem,2vw,1.9rem)}
.sd-fact + .sd-fact::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:2.6rem;width:1px;background:rgba(255,255,255,.2);
}
.sd-fact > b{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:-.04em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.sd-fact > span{
  font-size:.7rem;letter-spacing:.10em;
  text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.45;
}

/* 05 ── ADVANTAGES, AS A VERTICAL STACK ─────────────────────────────── */
/* Number and heading on the first row, picture and copy on the second. Each
   card pins in turn and the next rides over it. The pile reads off the tint
   ramp alone — the cards carry no shadow, so nothing muddies the brand
   grounds where one card meets the next. */

/* The section stays overflow:visible — the sticky cards need it — so the
   decoration layer does its own clipping. position:relative here is safe:
   it changes the containing block for absolute children only, not for the
   sticky ones, which stay bound to the stack. */
.sd-vs{position:relative;background:var(--paper);overflow:visible}
.sd-vs__deco{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
/* the cards are opaque, so the figures read in the gaps around them:
   beside the heading, down the margins and under the last card */
/* Three figures down each margin. The slot sets the side and the height; the
   figure class only sets its size and angle, so the same six slots serve any
   sector. Anchored to the viewport edge rather than the shell, so on a wide
   screen they sit clear in the margin and on a narrow one they tuck part-way
   behind the cards instead of disappearing. */
.sd-vs__deco .sd-deco{
  position:absolute;width:clamp(96px,9.5vw,150px);
  /* never wider than the margin it sits in, plus a little tolerated overlap —
     otherwise a 1440 screen, where the margin is only 60px, buries them
     four-fifths behind the cards */
  max-width:calc((100% - var(--shell)) / 2 + 44px);
}
.sd-vs__deco .vs-l1,.sd-vs__deco .vs-l2,.sd-vs__deco .vs-l3{left:clamp(-3rem,1.5vw,3rem)}
.sd-vs__deco .vs-r1,.sd-vs__deco .vs-r2,.sd-vs__deco .vs-r3{right:clamp(-3rem,1.5vw,3rem)}
.sd-vs__deco .vs-l1{top:4.5%;}
.sd-vs__deco .vs-l2{top:39%}
.sd-vs__deco .vs-l3{top:74%}
.sd-vs__deco .vs-r1{top:6%}
.sd-vs__deco .vs-r2{top:43%}
.sd-vs__deco .vs-r3{top:77%}

/* widths follow each drawing’s own proportions */
.sd-vs__deco .sd-deco--airtrail{stroke-width:3.8;width:100%;max-width:clamp(150px,45vw,442px);transform:rotate(-4deg); left: 0 !important;}
.sd-vs__deco .sd-deco--missile{stroke-width:2.5; width:100%; max-width:clamp(136px,24vw,564px); top:0; transform:rotate(-13deg);}
.sd-vs__deco .sd-deco--turbofan{stroke-width:2.1;width:clamp(104px,10vw,158px);transform:rotate(-7deg)}
.sd-vs__deco .sd-deco--uav{stroke-width:2.1;width:clamp(118px,11.5vw,180px);transform:rotate(9deg)}
.sd-vs__deco .sd-deco--radar{stroke-width:1.9;width:clamp(96px,9vw,146px);transform:rotate(-8deg)}
.sd-vs__deco .sd-deco--fighter{stroke-width:2.7;width:clamp(64px,6.2vw,100px);transform:rotate(14deg)}
.sd-vs__deco .sd-deco--helix2{stroke-width:2.3;width:clamp(62px,6vw,96px);transform:rotate(-6deg)}
.sd-vs__deco .sd-deco--scope{stroke-width:2.6;width:clamp(78px,7.4vw,118px);transform:rotate(5deg)}
.sd-vs__deco .sd-deco--petri{stroke-width:2.2;width:clamp(100px,9.6vw,152px);transform:rotate(-8deg)}
.sd-vs__deco .sd-deco--capsule{stroke-width:1.9;width:clamp(124px,12vw,190px);transform:rotate(-14deg)}
.sd-vs__deco .sd-deco--mol2{stroke-width:2.9;width:clamp(132px,13vw,206px);transform:rotate(6deg)}
.sd-vs__deco .sd-deco--flask2{stroke-width:2.2;width:clamp(84px,8vw,128px);transform:rotate(10deg)}

.sd-vs__stack{
  display:grid;gap:clamp(1rem,2.2vw,1.6rem);
  /* no tail: nothing rides over the last card, so held time under it is just
     empty page */
}
/* The card carries no padding of its own — the copy panel is padded and the
   picture runs to the card edge — so the 48% column is 48% of the card as
   drawn, with nothing to correct for. */
.sd-vs__c{
  position:sticky;
  top:calc(var(--hdr-h) + clamp(.9rem,2.2vw,1.8rem) + (var(--i,0) * 22px));
  transform-origin:50% 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,48%);
  align-items:stretch;
  overflow:hidden;
  border-radius:clamp(20px,2.4vw,32px);
  background:var(--vs-bg,#ECF0FE);
}
/* Deepest at the back, lightest in front: the cards that have been passed sit
   further into the brand blue, and the one you are reading is nearly paper.
   That ramp is what separates the tabs — no drop shadow is doing the work. */
/* Four cards by default. A sector with more carries a count modifier on the
   stack, and the same span is divided into that many steps — otherwise the
   later cards fall off the end of the ramp. */
.sd-vs__c:nth-child(1){--vs-bg:#C4D3F1}
.sd-vs__c:nth-child(2){--vs-bg:#D2DEF6}
.sd-vs__c:nth-child(3){--vs-bg:#DFE7FA}
.sd-vs__c:nth-child(4){--vs-bg:#ECF0FE}

.sd-vs__stack--5 .sd-vs__c:nth-child(1){--vs-bg:#C4D3F1}
.sd-vs__stack--5 .sd-vs__c:nth-child(2){--vs-bg:#CFDAF4}
.sd-vs__stack--5 .sd-vs__c:nth-child(3){--vs-bg:#DAE2F8}
.sd-vs__stack--5 .sd-vs__c:nth-child(4){--vs-bg:#E5EBFB}
.sd-vs__stack--5 .sd-vs__c:nth-child(5){--vs-bg:#ECF0FE}

.sd-vs__stack--6 .sd-vs__c:nth-child(1){--vs-bg:#C4D3F1}
.sd-vs__stack--6 .sd-vs__c:nth-child(2){--vs-bg:#CCD9F4}
.sd-vs__stack--6 .sd-vs__c:nth-child(3){--vs-bg:#D4DFF6}
.sd-vs__stack--6 .sd-vs__c:nth-child(4){--vs-bg:#DCE4F9}
.sd-vs__stack--6 .sd-vs__c:nth-child(5){--vs-bg:#E4EAFB}
.sd-vs__stack--6 .sd-vs__c:nth-child(6){--vs-bg:#ECF0FE}

.sd-vs__panel{
  display:grid;align-content:center;justify-items:start;
  gap:clamp(.7rem,1.4vw,1.05rem);
  padding:clamp(1.5rem,3.4vw,3rem);
}
.sd-vs__n{
  font-family:var(--f-head);font-weight:500;
  font-size:.76rem;letter-spacing:.16em;
  color:color-mix(in srgb,var(--sd-accent) 70%,transparent);
  font-variant-numeric:tabular-nums;
}
.sd-vs__t{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.35rem,2.6vw,2.15rem);line-height:1.12;letter-spacing:-.032em;
  color:var(--ink);
}
.sd-vs__body{max-width:52ch}
.sd-vs__p{
  font-size:clamp(.94rem,.4vw + .86rem,1.04rem);line-height:1.68;color:var(--ink-2);
}
.sd-vs__p b{color:var(--ink);font-weight:700}

/* the picture fills its half of the card, corner to corner */
.sd-vs__fig{
  margin:0;position:relative;overflow:hidden;
  min-height:clamp(280px,72vh,460px);
  background:color-mix(in srgb,var(--sd-accent) 10%,transparent);
}
.sd-vs__fig img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.05);transition:transform 1.2s var(--e-out);
}
.sd-vs__c:hover .sd-vs__fig img{transform:scale(1)}

/* the USP card carries a list rather than a paragraph */
.sd-usp{display:grid;gap:.5rem;list-style:none;margin:0;padding:0}
.sd-usp li{
  position:relative;padding-left:1.4rem;
  font-size:clamp(.88rem,.86vw,.97rem);line-height:1.55;color:var(--ink-2);
}
/* the document nests two clusters under the Mobility Valley line */
.sd-usp--sub{margin:.45rem 0 0;gap:.35rem}
.sd-usp--sub li{font-size:.95em;color:var(--ink-3)}
.sd-usp--sub li::before{width:6px;height:6px;top:.55em;opacity:.75}

.sd-usp li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;border-radius:2px;transform:rotate(45deg);
  background:linear-gradient(140deg,var(--sd-accent),var(--lg-lime));
}

/* 03 ── LEAD ─────────────────────────────────────────────────────────── */

.sd-lead{background:var(--paper);overflow:hidden}
.sd-lead__lay{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,4.5vw,4.2rem);align-items:start;
}
.sd-lead__h{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.04;letter-spacing:-.036em}
.sd-lead__h em{
  font-style:normal;
  background:linear-gradient(96deg,var(--sd-accent),var(--lg-navy) 52%,var(--lg-green));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* the heading and the figure share the left column, so the figure fills the
   space the heading leaves rather than pushing a new grid row under both */
.sd-lead__col{display:grid;align-content:start;gap:clamp(1.6rem,4vw,3rem)}
.sd-lead__art{width:100%;max-width:clamp(300px,34vw,170px); position: absolute; left: 12%; bottom: -3%;}
.sd-lead__art .sd-deco{
  display:block;width:100%;height:auto;
  /* drawn close to life size, so it needs the thinnest line of the set */
  stroke-width:1.2;
  /* two classes, so it beats the base .sd-deco opacity wherever that rule
     happens to sit in the file */
  opacity:.80;
  transform:rotate(-4deg);
}

.sd-lead__body{display:grid;gap:1.15rem}
.sd-lead__p{
  font-size:clamp(1rem,.44vw + .9rem,1.12rem);line-height:1.7;color:var(--ink-2);
}
.sd-lead__p b{color:var(--ink);font-weight:700}
/* the OEM roll-call reads as a list, not a wall of prose */
.sd-names{display:flex;flex-wrap:wrap;gap:.45rem;padding-top:.3rem}
.sd-names span{
  font-family:var(--f-head);font-size:.68rem;letter-spacing:.08em;
  color:var(--ink-2);padding:.4rem .75rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--paper-2);
  transition:color .3s,border-color .3s,background .3s,transform .3s var(--e-out);
}
.sd-names span:hover{
  color:var(--sd-accent);border-color:var(--sd-accent);
  background:#fff;transform:translateY(-2px);
}

/* 04 ── THE EDGE ─────────────────────────────────────────────────────── */

.sd-edge{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(155deg,var(--sd-ink) 0%,#06246E 48%,#003C9B 100%);
  isolation:isolate;
}
.sd-edge::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 55% at 88% 6%,color-mix(in srgb,var(--sd-accent) 42%,transparent),transparent 62%),
    radial-gradient(44% 50% at 4% 96%,rgba(64,176,96,.26),transparent 64%);
}
.sd-edge__grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
}
.sd-edge .shell{position:relative;z-index:1}
.sd-edge h2{color:#fff}

/* The six statements sit as a three-up card grid on the same navy ground:
   an icon plate, a title and the statement beneath it. Cards are glass over
   the gradient rather than solid, so the ground still reads through. */
.sd-adv{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.7rem,1.4vw,1.1rem);
}
.sd-adv__c{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start;gap:clamp(.9rem,1.8vw,1.35rem);
  padding:clamp(1.15rem,2.3vw,1.7rem);
  border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);
  /* a flat translucent fill rather than glass: backdrop-filter re-blurs what
     is behind it on every scroll frame, and six of them on a gradient ground
     was the most expensive thing on the page for no visible gain */
  background:rgba(255,255,255,.075);
  transition:border-color .45s var(--e-out),background .45s var(--e-out),
             translate .55s var(--e-out),box-shadow .55s var(--e-out);
}
/* the pointer carries a soft light with it — main.js/sector-detail.js feed
   --mx / --my, and the layer simply stays put when they never arrive */
.sd-adv__c::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),
             rgba(255,255,255,.14),transparent 70%);
  opacity:0;transition:opacity .45s var(--e-out);
}
.sd-adv__c:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.09);
  /* the .rv-c reveal leaves an inline transform on these cards, so the lift
     rides on the independent `translate` property instead of fighting it */
  translate:0 -5px;
  box-shadow:0 22px 48px rgba(2,10,40,.36);
}
.sd-adv__c:hover::before{opacity:1}

/* Seven statements over three columns would leave one alone on the last row;
   that one spans the width instead, so the grid closes rather than trails. */
.sd-adv__c--wide{grid-column:1/-1}

.sd-adv__ic{
  display:grid;place-items:center;flex:0 0 auto;
  width:clamp(46px,4.4vw,58px);aspect-ratio:1;border-radius:14px;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  color:#8FD0FF;
  transition:color .45s var(--e-out),border-color .45s,transform .55s var(--e-spring);
}
.sd-adv__ic svg{width:56%;height:56%}
.sd-adv__c:hover .sd-adv__ic{color:var(--lg-yellow);border-color:rgba(255,255,255,.4);transform:translateY(-2px) scale(1.05)}

.sd-adv__b{display:grid;gap:.42rem;min-width:0}
.sd-adv__t{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.2;letter-spacing:-.026em;color:#fff;
}
.sd-adv__p{
  font-size:clamp(.88rem,.34vw + .82rem,.97rem);line-height:1.55;
  color:rgba(255,255,255,.72);
}

/* 06b ── THE A&D CLUSTER MAP ─────────────────────────────────────────── */
/* District shapes are real geometry, so they are styled rather than drawn:
   one <path> per district, the eight that carry something flagged .is-live.
   Markers are positioned from each district's own centroid, handed in as
   --x / --y percentages. */

.sd-map{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
.sd-map > .shell{position:relative;z-index:1}

/* ── background line drawings ─────────────────────────────────────────────
   Single-weight outline figures sitting behind the map, drifting against the
   scroll at their own rates. They are texture, not content: aria-hidden, and
   held well back so the map and the card always win. */
.sd-map__deco{position:absolute;inset:0;z-index:0;pointer-events:none}
/* .sd-deco is only the look — the line weight, the colour and the drift.
   Where a figure sits is left to whatever is placing it, so the same class
   serves both the absolutely-placed map figures and the one that sits in the
   lead section's own column. */
/* Registering the property means a change to it invalidates this element only,
   instead of restyling the whole SVG subtree on every frame. */
@property --py{syntax:"<length>";inherits:false;initial-value:0px}

.sd-deco{
  color:var(--sd-accent);opacity:.4;
  stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  /* No non-scaling-stroke: it has to re-derive the stroke from the current
     transform matrix, so every drift frame re-rendered the whole drawing.
     Each figure sets its own stroke in viewBox units below instead, sized so
     it lands at about 1.4 screen pixels once drawn. */
  /* the drift is written to `translate` via --py, which leaves the resting
     angle free to live in `transform` */
  translate:0 var(--py,0px);
  will-change:transform;
}

.sd-map__deco .sd-deco{position:absolute}

/* Two more along the same margins: the airliner is the lead section drawing
   mirrored, so the pair reads as one hand rather than a repeat, and the
   fighter is tall where the others are wide. */
.sd-deco--airliner{stroke-width:3.1;
  left:clamp(-1.5rem,1vw,2rem);top:5%;
  width:clamp(118px,11.5vw,182px);
  transform:rotate(5deg) scaleX(-1);
}
.sd-map__deco .sd-deco--fighter{stroke-width:2.7;
  right:clamp(1rem,5vw,7rem);top:42%;
  width:clamp(62px,6vw,96px);
  transform:rotate(14deg);
}

.sd-deco--rocket{stroke-width:1.2;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(118px,12vw,186px);
  transform:rotate(-9deg);
}
.sd-deco--plane{stroke-width:1.5;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(96px,9.5vw,148px);
  transform:rotate(14deg);
}
/* Automobiles reuses the same three map slots and six advantage slots.
   Stroke is set in each drawing's own units so every figure lands at about
   1.4 screen pixels once scaled. */
.sd-map__deco .sd-deco--plugmap{stroke-width:2.6;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(58px,5.8vw,92px);
  transform:rotate(8deg);
}
.sd-map__deco .sd-deco--batterymap{stroke-width:2.2;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(92px,9vw,142px);
  transform:rotate(-9deg);
}
.sd-map__deco .sd-deco--tyremap{stroke-width:1.2;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(140px,15vw,236px);
  transform:rotate(-6deg);
}

.sd-lead__art .sd-deco--motor{stroke-width:1.9;}

.sd-vs__deco .sd-deco--bus{stroke-width:3.4;;width:clamp(132px,13vw,208px);transform:rotate(-4deg)}
.sd-vs__deco .sd-deco--cog{stroke-width:2.2;;width:clamp(84px,8vw,128px);transform:rotate(6deg)}
.sd-vs__deco .sd-deco--tyre{stroke-width:1.9;;width:clamp(92px,8.8vw,140px);transform:rotate(-8deg)}
.sd-vs__deco .sd-deco--plug{stroke-width:2.3;;width:clamp(62px,6vw,96px);transform:rotate(-12deg)}
.sd-vs__deco .sd-deco--battery{stroke-width:2;;width:clamp(104px,10vw,158px);transform:rotate(7deg)}
.sd-vs__deco .sd-deco--car2{stroke-width:3.1;;width:clamp(126px,12.4vw,198px);transform:rotate(-5deg)}

/* Life sciences uses the same three background slots — bottom-left, top-right,
   bottom-right — with figures of its own. Widths differ because the artwork
   does: the helix is tall and narrow where the rocket was upright, and the
   atom is wider than the satellite it replaces. */
.sd-deco--helix{stroke-width:2.1;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(66px,6.6vw,104px);
  transform:rotate(6deg);
}
.sd-deco--flask{stroke-width:2.1;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(86px,8.4vw,132px);
  transform:rotate(-10deg);
}
.sd-deco--atom{stroke-width:1.3;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(150px,16vw,252px);
  transform:rotate(-6deg);
}

.sd-deco--sat{stroke-width:1.2;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(150px,16vw,252px);
  transform:rotate(-6deg);
}

/* the parallax writes to translate, so the resting angle above survives */
html.no-motion .sd-deco{translate:none !important}

.sd-map__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none;margin:0 0 clamp(2rem,4vw,3.2rem);padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.sd-map__stat{
  position:relative;display:grid;gap:.25rem;
  padding:clamp(1rem,2.2vw,1.5rem) clamp(.7rem,1.6vw,1.4rem);
}
.sd-map__stat + .sd-map__stat::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:2.4rem;width:1px;background:var(--line);
}
.sd-map__stat b{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;letter-spacing:-.04em;
  color:var(--sd-accent);font-variant-numeric:tabular-nums;
}
.sd-map__stat b small{font-size:.44em;font-weight:500;letter-spacing:-.01em}
.sd-map__stat span{
  font-family:var(--f-head);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.45;
}

.sd-map__lay{display:grid;justify-items:center;gap:clamp(1.2rem,2.4vw,1.8rem)}
/* the map is the whole section now, so it is held to a comfortable reading
   size and centred rather than filling a column */
.sd-map__wrap{position:relative;width:min(100%,560px)}

/* ── the detail card, floating over the map ──────────────────────────── */
.sd-map__card{
  position:absolute;top:0;z-index:4;
  width:min(330px,86%);
  padding:clamp(1.1rem,2.2vw,1.5rem);
  border:1px solid var(--line);border-radius:var(--r-lg);
  /* scroll shadow: the two "local" gradients travel with the content and
     cover the two fixed ones, so a shadow appears only where there is more
     to scroll to */
  background:
    linear-gradient(var(--paper) 34%,rgba(255,255,255,0)) local top / 100% 28px no-repeat,
    linear-gradient(rgba(255,255,255,0),var(--paper) 66%) local bottom / 100% 28px no-repeat,
    radial-gradient(farthest-side at 50% 0,rgba(10,12,43,.16),transparent) scroll top / 100% 12px no-repeat,
    radial-gradient(farthest-side at 50% 100%,rgba(10,12,43,.16),transparent) scroll bottom / 100% 12px no-repeat,
    color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 2px rgba(10,12,43,.05),0 20px 48px rgba(0,36,180,.14);
  /* A district with a long roster makes a card taller than the map. Cap it
     and let that one scroll rather than letting it run down the page.
     The pointer may enter the card — it is inside the map wrapper, so the
     hover that opened it still holds. */
  max-height:min(74vh,620px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-3) transparent;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.985);
  transition:opacity .35s var(--e-out),transform .45s var(--e-out),
             visibility 0s linear .35s;
}
.sd-map__card.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .35s var(--e-out),transform .45s var(--e-out),
             visibility 0s;
}
/* Anchored away from whichever district is being pointed at. Over the map by
   default; once the shell is wide enough to hold the card in the margin
   beside it, it steps out there instead and stops covering the map at all.
   540 map + 2 x (330 card + 32 gap) = 1264, so 1360 is the first viewport
   where the shell can carry it. */
.sd-map__card{left:0}
.sd-map__card.is-right{left:auto;right:0}
@media (min-width:1360px){
  .sd-map__card{left:calc(-330px - 2rem)}
  .sd-map__card.is-right{left:auto;right:calc(-330px - 2rem)}
}

/* the resting prompt, swapped out by the card */
.sd-map__hint{
  position:absolute;left:50%;bottom:-.2rem;transform:translateX(-50%);
  margin:0;white-space:nowrap;
  font-family:var(--f-head);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-4);
  transition:opacity .3s var(--e-out);
}
.sd-map__wrap.is-live .sd-map__hint{opacity:0}
.sd-map__p{display:grid;gap:.5rem}
.sd-map__pt{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.12;letter-spacing:-.032em;
  color:var(--ink);margin-bottom:.35rem;
}
/* the belt or quarter the district's sites sit in, under its name */
.sd-map__ps{
  margin:-.15rem 0 .1rem;
  font-size:.8rem;line-height:1.4;color:var(--ink-3);
}

.sd-map__g{display:grid;gap:.38rem;padding-top:.7rem;border-top:1px solid var(--line-2)}
.sd-map__gt{
  font-family:var(--f-head);font-weight:500;font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);
}
.sd-map__gl{display:grid;gap:.26rem;list-style:none;margin:0;padding:0}
.sd-map__gl li{
  position:relative;padding-left:1.1rem;
  font-size:clamp(.82rem,.26vw + .77rem,.9rem);line-height:1.42;color:var(--ink-2);
}
.sd-map__gl li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:2px;transform:rotate(45deg);
  background:var(--sd-accent);
}

/* ── the map ──────────────────────────────────────────────────────────── */
.sd-map__frame{position:relative}
.sd-map__key{justify-content:center}
.sd-map__svg{display:block;width:100%;height:auto;overflow:visible}

.sd-map__svg path{
  fill:#E4E8F6;stroke:var(--paper);stroke-width:1.6;stroke-linejoin:round;
  transition:fill .4s var(--e-out);
}
.sd-map__svg path.is-live{cursor:pointer;stroke-width:2.2}
.sd-map__svg path.is-air{fill:#BFD8F2}
.sd-map__svg path.is-corridor{fill:var(--sd-accent)}
/* the life sciences page names its two kinds differently: park districts and
   the research base */
.sd-map__svg path.is-cluster{fill:var(--sd-accent)}
.sd-map__svg path.is-rd{fill:#BFD8F2}
/* Hyderabad is an enclave inside Ranga Reddy, so it needs its own value to
   stay legible where the two meet. Kept to an attribute rather than an id, so
   the selected state below still outranks it. */
.sd-map__svg path[data-d="hyderabad"]{fill:#0A2A96}
/* selection reads in the brand orange — the one hue on the page that is not
   already doing work on this blue map */
/* the district under the pointer, and the one the card is showing */
.sd-map__svg path.is-live:hover,
.sd-map__svg path.is-live.is-on{fill:var(--green)}

/* markers — the pin box is exactly the dot, so translate(-50%,-50%) lands
   the dot itself on the district centroid. The label hangs off it absolutely
   and so never shifts that anchor. */
.sd-map__pin{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  width:clamp(20px,1.9vw,26px);aspect-ratio:1;
  background:none;border:0;padding:0;cursor:pointer;
  color:inherit;font:inherit;
  transition:transform .45s var(--e-spring);
}
.sd-map__pin:hover,.sd-map__pin.is-on{transform:translate(-50%,-50%) scale(1.12);z-index:3}
/* a larger target than the dot, for a finger */
.sd-map__pin::before{content:"";position:absolute;inset:-8px;border-radius:50%}
.sd-map__dot{
  display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--sd-accent);
  box-shadow:0 4px 12px rgba(6,16,52,.22);
  color:var(--sd-accent);
  transition:background .35s,color .35s,border-color .35s;
}
.sd-map__dot svg{width:62%;height:62%;fill:currentColor}
.sd-map__pin--air .sd-map__dot,
.sd-map__pin--rd .sd-map__dot{border-color:#0483CE;color:#0483CE}
.sd-map__pin:hover .sd-map__dot,.sd-map__pin.is-on .sd-map__dot{
  background:var(--sd-accent);color:#fff;border-color:var(--sd-accent);
}
.sd-map__pin--air:hover .sd-map__dot,.sd-map__pin--air.is-on .sd-map__dot,
.sd-map__pin--rd:hover .sd-map__dot,.sd-map__pin--rd.is-on .sd-map__dot{
  background:#0483CE;border-color:#0483CE;
}
.sd-map__lab{
  position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);
  font-family:var(--f-head);font-size:.58rem;letter-spacing:.08em;
  white-space:nowrap;color:var(--ink);
  padding:.16rem .4rem;border-radius:4px;
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--e-out);
}
.sd-map__pin:hover .sd-map__lab,.sd-map__pin.is-on .sd-map__lab{opacity:1}
/* Two corridor districts can carry their names permanently; a tighter cluster
   of them cannot, so those fall back to showing on hover like the rest. */
.sd-map__pin--corridor .sd-map__lab{opacity:1}

/* ── declared marker offsets ────────────────────────────────────────────
   Some districts are smaller than the marker that points at them, and in the
   metro several sit on top of one another. Such a marker steps off its shape
   and runs a leader back to the true centre, so the offset is declared rather
   than quietly fudged. The direction is set per marker with data-off. */
.sd-map__pin[data-off] .sd-map__lab{top:auto;bottom:calc(100% + 5px)}
.sd-map__pin[data-off]::after{
  content:"";position:absolute;left:50%;top:50%;
  width:1.5px;transform-origin:50% 0;
  background:var(--sd-accent);opacity:.55;
}

.sd-map__pin[data-off="up"]{transform:translate(-50%,calc(-50% - 46px))}
.sd-map__pin[data-off="up"]:hover,
.sd-map__pin[data-off="up"].is-on{transform:translate(-50%,calc(-50% - 46px)) scale(1.12)}
.sd-map__pin[data-off="up"]::after{height:46px}

/* the diagonals travel 38px on each axis, so the leader is 38 x root two */
.sd-map__pin[data-off="up-left"]{transform:translate(calc(-50% - 38px),calc(-50% - 38px))}
.sd-map__pin[data-off="up-left"]:hover,
.sd-map__pin[data-off="up-left"].is-on{transform:translate(calc(-50% - 38px),calc(-50% - 38px)) scale(1.12)}
.sd-map__pin[data-off="up-left"]::after{height:54px;transform:rotate(-45deg)}

.sd-map__pin[data-off="up-right"]{transform:translate(calc(-50% + 38px),calc(-50% - 38px))}
.sd-map__pin[data-off="up-right"]:hover,
.sd-map__pin[data-off="up-right"].is-on{transform:translate(calc(-50% + 38px),calc(-50% - 38px)) scale(1.12)}
.sd-map__pin[data-off="up-right"]::after{height:54px;transform:rotate(45deg)}

.sd-map__pin[data-off="down"]{transform:translate(-50%,calc(-50% + 44px))}
.sd-map__pin[data-off="down"]:hover,
.sd-map__pin[data-off="down"].is-on{transform:translate(-50%,calc(-50% + 44px)) scale(1.12)}
.sd-map__pin[data-off="down"]::after{height:44px;transform:rotate(180deg)}
.sd-map__pin[data-off="down"] .sd-map__lab{top:calc(100% + 5px);bottom:auto}

/* legend */
.sd-map__key{
  display:flex;flex-wrap:wrap;gap:.5rem clamp(1rem,2.4vw,1.8rem);
  list-style:none;margin:0;padding:0;
}
.sd-map__key li{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--f-head);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.sd-map__sw{width:14px;height:14px;border-radius:4px;flex:0 0 auto}
/* Two further categories for the textiles map: GI handloom and the cotton
   belt. The component shipped with only the accent and a pale blue, which is
   not enough to separate four kinds of place. */
.sd-map__pin--gi .sd-map__dot{border-color:#C08A1E;color:#C08A1E}
.sd-map__pin--gi:hover .sd-map__dot,.sd-map__pin--gi.is-on .sd-map__dot{background:#C08A1E;border-color:#C08A1E;color:#fff}
.sd-map__pin--cotton .sd-map__dot{border-color:#2E7D46;color:#2E7D46}
.sd-map__pin--cotton:hover .sd-map__dot,.sd-map__pin--cotton.is-on .sd-map__dot{background:#2E7D46;border-color:#2E7D46;color:#fff}
.sd-map__svg path.is-gi{fill:#EBD9A8}
.sd-map__svg path.is-cotton{fill:#C7E2CE}
.sd-map__sw--gi{background:#C08A1E}
.sd-map__sw--cotton{background:#2E7D46}
.sd-map__sw--corridor{background:var(--sd-accent)}
.sd-map__sw--air{background:#BFD8F2}
.sd-map__sw--cluster{background:var(--sd-accent)}
.sd-map__sw--rd{background:#BFD8F2}

.sd-map__note{
  max-width:78ch;margin-top:clamp(1.6rem,3vw,2.4rem);
  font-size:.86rem;line-height:1.6;color:var(--ink-3);
}

/* 06 ── GALLERY ──────────────────────────────────────────────────────── */

/* The gallery is a ticker of image cards, running on the same marquee
   machinery as the company rail — so the JS pacing and the gradient edges are
   shared rather than duplicated. */
/* The gallery reads as a lit stage: a dark band, the centre picture square to
   the viewer and its neighbours turned away into the depth. */
.sd-gal{
  position:relative;overflow:hidden;padding-inline:0;isolation:isolate;
  background:linear-gradient(168deg,#080D22 0%,#0B1436 46%,#0A1B4A 100%);
}
.sd-gal::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 52% at 50% -8%,color-mix(in srgb,var(--sd-accent) 34%,transparent),transparent 64%),
    radial-gradient(40% 46% at 88% 104%,rgba(64,176,96,.16),transparent 66%);
}
.sd-gal__head{text-align:center;margin-bottom:clamp(2rem,4.4vw,3.4rem)}
.sd-gal__h{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:1;letter-spacing:-.042em;color:var(--ink);
}
.sd-gal__h em{
  font-style:normal;display:block;
  background:linear-gradient(96deg,var(--sd-accent),var(--lg-navy) 46%,var(--lg-green));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* the rail drifts a little against the scroll — sector-detail.js drives it */
.sd-marq--img .sd-rail{will-change:transform}
.sd-marq--img{--marq-a:var(--paper);--marq-b:var(--paper)}
.sd-gcard{
  position:relative;margin:0;flex:0 0 auto;
  width:clamp(230px,26vw,340px);aspect-ratio:4/3;
  overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--paper-2);
}
.sd-gcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--e-out)}
.sd-gcard:hover img{transform:scale(1.06)}

/* 07 ── COMPANIES ────────────────────────────────────────────────────── */
/* No rail here: the marks sit in a hairline grid, one to a cell, with room to
   breathe. The 1px gaps over a line-coloured ground draw the rules, so the
   grid stays true at any column count. */
.sd-co{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);
}
/* A short roster looks thin across six columns and leaves blank cells, so it
   takes four — 8 marks fill two rows exactly, and two rows of four below. */
.sd-grid--4{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
@media (max-width:900px){.sd-grid--4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
/* six across for the long Key Companies roster */
.sd-grid--6{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
@media (max-width:900px){.sd-grid--6{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}


.sd-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 22px 54px rgba(0,36,180,.07);
}
.sd-grid-7{
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.sd-tile{
  display:grid;place-items:center;
  padding:clamp(1rem,2vw,1rem);
  background:var(--paper);
  transition:background .45s var(--e-out);
}
.sd-tile img{
  height:clamp(34px,4.8vw,75px);width:auto;max-width:140px;object-fit:contain;
  opacity:.88;
  transition:opacity .45s var(--e-out),transform .55s var(--e-out);
}
.sd-tile:hover{background:var(--paper-2)}
.sd-tile:hover img{opacity:1;transform:scale(1.07)}
/* Most marks are close to 2:1 and the one height cap suits them. A square
   roundel reads small under that cap and a very wide strip reads thin, so the
   square ones carry .is-sq, set from the file's own measured ratio at build
   time rather than from a list of filenames. Wide marks need nothing: they are
   already held by max-width. */
.sd-tile img.is-sq{height:clamp(46px,5vw,68px)}
.sd-tile img[src$="lockheed.webp"]{height:auto;width:clamp(112px,11vw,158px)}
/* PURE publishes its mark as white-on-transparent for dark headers; its real
   colour is black, so it is flattened to black on the light tile */
.sd-tile img[src$="pure-energy.png"]{filter:brightness(0)}
/* very wide wordmarks read thin under the 140px cap */
.sd-tile img[src$="gravton-motors.png"]{max-width:170px}
/* a name with no mark of its own is set, not faked into a logo */
.sd-tile--w b{
  display:block;text-align:center;text-wrap:balance;
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(.9rem,1.2vw,1.05rem);line-height:1.25;letter-spacing:-.024em;
  color:var(--ink-2);transition:color .4s;
}
.sd-tile--w:hover b{color:var(--sd-accent)}

/* the marquee machinery stays for the gallery ticker */
.sd-marq{position:relative;display:grid;gap:clamp(.6rem,1.2vw,1rem)}
/* the rails fade out at both ends instead of stopping dead */
.sd-marq::before,.sd-marq::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(48px,9vw,140px);z-index:2;pointer-events:none;
}
.sd-marq::before{left:0;background:linear-gradient(90deg,var(--marq-a,var(--paper-2)),transparent)}
.sd-marq::after{right:0;background:linear-gradient(270deg,var(--marq-b,var(--paper)),transparent)}

.sd-rail{display:flex;overflow:hidden;-webkit-mask-image:none}
.sd-rail__t{
  display:flex;gap:clamp(.5rem,1vw,.8rem);flex:0 0 auto;
  padding-right:clamp(.5rem,1vw,.8rem);
  animation:sd-slide 46s linear infinite;
  will-change:transform;
}
.sd-marq:hover .sd-rail__t{animation-play-state:paused}
@keyframes sd-slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* 08 ── CTA ──────────────────────────────────────────────────────────── */

.sd-cta{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--lg-navy) 0%,#0742B8 46%,var(--sd-accent) 100%);
  isolation:isolate;
}
.sd-cta::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 60% at 84% 10%,rgba(248,200,40,.24),transparent 62%),
    radial-gradient(46% 56% at 8% 92%,rgba(64,176,96,.26),transparent 64%);
}
.sd-cta .shell{position:relative;z-index:1}
.sd-cta__in{display:grid;gap:1.2rem;justify-items:start;max-width:62ch}
.sd-cta__h{font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:1.04;letter-spacing:-.036em;color:#fff}
.sd-cta__h em{font-style:normal;color:var(--lg-yellow)}
.sd-cta__p{color:rgba(255,255,255,.85);font-size:clamp(1rem,.5vw + .9rem,1.12rem);line-height:1.62}
.sd-cta__row{display:flex;gap:.75rem;flex-wrap:wrap;padding-top:.3rem}
.sd-cta .btn--out{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.08)}
.sd-cta .btn--out:hover{background:#fff;color:var(--lg-navy);border-color:#fff}

/* 09 ── RESPONSIVE ───────────────────────────────────────────────────── */

/* No hover on a touch screen, so the card stops floating and simply sits
   under the map, where a tap fills it in. */
@media (hover:none),(max-width:760px){
  .sd-map__card,.sd-map__card.is-tight{
    position:static;width:100%;max-height:none;overflow:visible;margin-top:0;
    opacity:1;visibility:visible;transform:none;pointer-events:auto;
    background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 1px 2px rgba(10,12,43,.04),0 14px 34px rgba(0,36,180,.08);
  }
  .sd-map__lay > .sd-map__card{width:min(100%,560px)}
  .sd-map__hint{display:none}
  /* no spare margin at this width — the figures would sit under the content */
  .sd-map__deco,
  .sd-vs__deco{display:none}
}

@media (max-width:680px){
  .sd-map__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd-map__stat:nth-child(odd)::before{display:none}
  .sd-map__stat:nth-child(3){border-top:1px solid var(--line)}
  .sd-map__stat:nth-child(4){border-top:1px solid var(--line)}
  /* labels crowd the shapes at this size — the panel carries the names */
  .sd-map__lab{display:none}
  .sd-map__pin{width:20px}
}

@media (max-width:1180px){
  .sd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}


@media (max-width:1080px){
  .sd-adv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd-lead__lay{grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2rem)}
  /* stacked, the figure would only push the copy down */
  .sd-lead__art{display:none}
}

@media (max-width:860px){
  .sd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:820px){
  .sd-facts__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd-fact:nth-child(odd){padding-left:0}
  .sd-fact:nth-child(odd)::before{display:none}
  .sd-adv{grid-template-columns:1fr}
  /* a card can no longer clear the viewport here, so the pile becomes a
     plain run of cards and the JS stands down with it */
  .sd-vs__c{
    position:static;transform:none !important;opacity:1 !important;
    grid-template-columns:minmax(0,1fr);
  }
  /* panel over picture, and the picture takes a normal frame again */
  .sd-vs__panel{order:1}
  .sd-vs__fig{order:2;min-height:0;aspect-ratio:16/9}
  .sd-vs__body{max-width:none}
}

@media (max-width:560px){
  .sd-facts__in{grid-template-columns:1fr}
  .sd-fact{padding-left:0 !important}
  .sd-fact::before{display:none !important}
}

html.no-motion .sd-rail__t{animation:none}
html.no-motion .sd-hero__media img{transform:none !important}
html.no-motion .sd-vs__c{position:static;transform:none !important}


/* ── IT & GCC ─────────────────────────────────────────────────────────── */
/* The page reuses the same three map slots and six advantage slots as the
   other sectors; only the drawings change. Stroke is set in each drawing's own
   units so every figure lands at about 1.4 screen pixels once scaled. */
.sd-map__deco .sd-deco--chipmap{stroke-width:2.2;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(74px,7.4vw,116px);
  transform:rotate(8deg);
}
.sd-map__deco .sd-deco--cloudmap{stroke-width:2.4;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(96px,9.4vw,148px);
  transform:rotate(-7deg);
}
.sd-map__deco .sd-deco--nodesmap{stroke-width:1.9;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(130px,14vw,220px);
  transform:rotate(-5deg);
}

.sd-lead__art .sd-deco--globe{stroke-width:1.9;}

.sd-vs__deco .sd-deco--rack{stroke-width:2.4;width:clamp(70px,6.8vw,108px);transform:rotate(-4deg)}
.sd-vs__deco .sd-deco--cloud{stroke-width:2.6;width:clamp(116px,11.4vw,178px);transform:rotate(5deg)}
.sd-vs__deco .sd-deco--chip{stroke-width:2.2;width:clamp(92px,8.8vw,140px);transform:rotate(-8deg)}
.sd-vs__deco .sd-deco--nodes{stroke-width:2.4;width:clamp(100px,9.6vw,152px);transform:rotate(7deg)}
.sd-vs__deco .sd-deco--code{stroke-width:2.4;width:clamp(114px,11.2vw,174px);transform:rotate(-6deg)}
.sd-vs__deco .sd-deco--screen{stroke-width:2.3;width:clamp(110px,10.8vw,168px);transform:rotate(6deg)}

/* Seven cards need seven steps of the same ramp the shorter stacks use, so the
   pile still reads light-to-dark from the top of the stack down. */
.sd-vs__stack--7 .sd-vs__c:nth-child(1){--vs-bg:#C4D3F1}
.sd-vs__stack--7 .sd-vs__c:nth-child(2){--vs-bg:#CBD8F3}
.sd-vs__stack--7 .sd-vs__c:nth-child(3){--vs-bg:#D1DDF5}
.sd-vs__stack--7 .sd-vs__c:nth-child(4){--vs-bg:#D8E2F8}
.sd-vs__stack--7 .sd-vs__c:nth-child(5){--vs-bg:#DFE7FA}
.sd-vs__stack--7 .sd-vs__c:nth-child(6){--vs-bg:#E5EBFC}
.sd-vs__stack--7 .sd-vs__c:nth-child(7){--vs-bg:#ECF0FE}

/* Eight statements over three columns leave two adrift on the last row. Over a
   six-column track the first six take two columns each and the last two take
   three, so the rows read 3 / 3 / 2 and the grid closes rather than trails. */
.sd-adv--8{grid-template-columns:repeat(6,minmax(0,1fr))}
.sd-adv--8>.sd-adv__c{grid-column:span 2}
.sd-adv--8>.sd-adv__c:nth-child(7),
.sd-adv--8>.sd-adv__c:nth-child(8){grid-column:span 3}
/* narrower, the cards go back to counting themselves */
@media (max-width:1080px){
  .sd-adv--8{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd-adv--8>.sd-adv__c,
  .sd-adv--8>.sd-adv__c:nth-child(7),
  .sd-adv--8>.sd-adv__c:nth-child(8){grid-column:auto}
}
@media (max-width:820px){
  .sd-adv--8{grid-template-columns:1fr}
}


/* ── DATA CENTRES ─────────────────────────────────────────────────────── */
/* Same three map slots and six advantage slots again; only the drawings change.
   Stroke is set in each drawing's own units so every figure lands at about
   1.4 screen pixels once scaled. */
.sd-map__deco .sd-deco--rackmap{stroke-width:2.6;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(58px,5.8vw,92px);
  transform:rotate(7deg);
}
.sd-map__deco .sd-deco--pylonmap{stroke-width:2.4;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(62px,6.2vw,98px);
  transform:rotate(-6deg);
}
.sd-map__deco .sd-deco--fibremap{stroke-width:2;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(128px,13.6vw,214px);
  transform:rotate(-5deg);
}

.sd-lead__art .sd-deco--hall{stroke-width:1.9;}

.sd-vs__deco .sd-deco--dcrack{stroke-width:2.6;width:clamp(68px,6.6vw,104px);transform:rotate(-4deg)}
.sd-vs__deco .sd-deco--pylon{stroke-width:2.6;width:clamp(72px,7vw,110px);transform:rotate(5deg)}
.sd-vs__deco .sd-deco--fan{stroke-width:2.2;width:clamp(94px,9vw,144px);transform:rotate(-8deg)}
.sd-vs__deco .sd-deco--fibre{stroke-width:2.4;width:clamp(112px,11vw,172px);transform:rotate(6deg)}
.sd-vs__deco .sd-deco--drop{stroke-width:2.6;width:clamp(64px,6.2vw,98px);transform:rotate(-7deg)}
.sd-vs__deco .sd-deco--shield{stroke-width:2.6;width:clamp(72px,7vw,110px);transform:rotate(6deg)}


/* ── LOGISTICS ────────────────────────────────────────────────────────── */
/* The same three map slots and six advantage slots once more; only the
   drawings change. Stroke is set in each drawing's own units so every figure
   lands at about 1.4 screen pixels once scaled. */
.sd-map__deco .sd-deco--containermap{stroke-width:2.6;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(86px,8.6vw,136px);
  transform:rotate(6deg);
}
.sd-map__deco .sd-deco--lorrymap{stroke-width:2.8;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(104px,10.2vw,162px);
  transform:rotate(-5deg);
}
.sd-map__deco .sd-deco--warehousemap{stroke-width:2.6;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(128px,13.6vw,214px);
  transform:rotate(-4deg);
}

.sd-lead__art .sd-deco--freight{stroke-width:1.9;}

.sd-vs__deco .sd-deco--container{stroke-width:2.8;width:clamp(104px,10.2vw,160px);transform:rotate(-4deg)}
.sd-vs__deco .sd-deco--lorry{stroke-width:3.2;width:clamp(122px,12vw,190px);transform:rotate(5deg)}
.sd-vs__deco .sd-deco--wagon{stroke-width:3;width:clamp(126px,12.4vw,196px);transform:rotate(-6deg)}
.sd-vs__deco .sd-deco--warehouse{stroke-width:3;width:clamp(118px,11.6vw,184px);transform:rotate(6deg)}
.sd-vs__deco .sd-deco--crane{stroke-width:3;width:clamp(96px,9.4vw,150px);transform:rotate(-5deg)}
.sd-vs__deco .sd-deco--route{stroke-width:2.6;width:clamp(98px,9.6vw,152px);transform:rotate(7deg)}


/* ── FOOD PROCESSING ──────────────────────────────────────────────────── */
/* The same three map slots and six advantage slots once more; only the
   drawings change. Stroke is set in each drawing's own units so every figure
   lands at about 1.4 screen pixels once scaled. */
.sd-map__deco .sd-deco--wheatmap{stroke-width:2.4;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(56px,5.6vw,88px);
  transform:rotate(7deg);
}
.sd-map__deco .sd-deco--silomap{stroke-width:2.6;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(70px,7vw,110px);
  transform:rotate(-5deg);
}
.sd-map__deco .sd-deco--bottlingmap{stroke-width:2.6;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(126px,13.2vw,208px);
  transform:rotate(-4deg);
}

.sd-lead__art .sd-deco--agri{stroke-width:1.9;}

.sd-vs__deco .sd-deco--wheat{stroke-width:2.6;width:clamp(62px,6vw,96px);transform:rotate(-5deg)}
.sd-vs__deco .sd-deco--churn{stroke-width:2.8;width:clamp(66px,6.4vw,102px);transform:rotate(6deg)}
.sd-vs__deco .sd-deco--bottling{stroke-width:2.8;width:clamp(116px,11.4vw,178px);transform:rotate(-4deg)}
.sd-vs__deco .sd-deco--produce{stroke-width:2.8;width:clamp(82px,8vw,126px);transform:rotate(8deg)}
.sd-vs__deco .sd-deco--silo{stroke-width:2.8;width:clamp(76px,7.4vw,118px);transform:rotate(-6deg)}
.sd-vs__deco .sd-deco--carton{stroke-width:2.8;width:clamp(88px,8.6vw,136px);transform:rotate(6deg)}


/* ── ENERGY & CLEAN TECH ──────────────────────────────────────────────── */
/* The same three map slots and six advantage slots once more; only the
   drawings change. Stroke is set in each drawing's own units so every figure
   lands at about 1.4 screen pixels once scaled. */
.sd-map__deco .sd-deco--solarmap{stroke-width:2.6;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(96px,9.6vw,150px);
  transform:rotate(6deg);
}
.sd-map__deco .sd-deco--turbinemap{stroke-width:2.4;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(58px,5.8vw,92px);
  transform:rotate(-6deg);
}
.sd-map__deco .sd-deco--bessmap{stroke-width:2.6;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(124px,13vw,206px);
  transform:rotate(-5deg);
}

.sd-lead__art .sd-deco--cleanenergy{stroke-width:1.9;}

.sd-vs__deco .sd-deco--solar{stroke-width:2.8;width:clamp(112px,11vw,172px);transform:rotate(-4deg)}
.sd-vs__deco .sd-deco--turbine{stroke-width:2.6;width:clamp(60px,5.8vw,94px);transform:rotate(5deg)}
.sd-vs__deco .sd-deco--bess{stroke-width:2.8;width:clamp(114px,11.2vw,176px);transform:rotate(-7deg)}
.sd-vs__deco .sd-deco--h2{stroke-width:2.8;width:clamp(106px,10.4vw,164px);transform:rotate(6deg)}
.sd-vs__deco .sd-deco--charger{stroke-width:2.8;width:clamp(66px,6.4vw,102px);transform:rotate(-6deg)}
.sd-vs__deco .sd-deco--greenleaf{stroke-width:2.8;width:clamp(92px,9vw,142px);transform:rotate(7deg)}


/* ── EDUCATION & RESEARCH ─────────────────────────────────────────────── */
/* The same three map slots and six advantage slots once more; only the
   drawings change. Stroke is set in each drawing's own units so every figure
   lands at about 1.4 screen pixels once scaled. */
.sd-map__deco .sd-deco--capmap{stroke-width:2.8;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(92px,9.2vw,144px);
  transform:rotate(6deg);
}
.sd-map__deco .sd-deco--flaskmap{stroke-width:2.6;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(62px,6.2vw,98px);
  transform:rotate(-7deg);
}
.sd-map__deco .sd-deco--booksmap{stroke-width:2.6;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(108px,11.4vw,180px);
  transform:rotate(-4deg);
}

.sd-lead__art .sd-deco--campus{stroke-width:1.9;}

.sd-vs__deco .sd-deco--cap{stroke-width:2.8;width:clamp(110px,10.8vw,170px);transform:rotate(-4deg)}
.sd-vs__deco .sd-deco--books{stroke-width:2.8;width:clamp(84px,8.2vw,130px);transform:rotate(5deg)}
.sd-vs__deco .sd-deco--flask{stroke-width:2.8;width:clamp(66px,6.4vw,102px);transform:rotate(-8deg)}
.sd-vs__deco .sd-deco--network{stroke-width:2.8;width:clamp(96px,9.4vw,148px);transform:rotate(6deg)}
.sd-vs__deco .sd-deco--lamp{stroke-width:2.8;width:clamp(70px,6.8vw,108px);transform:rotate(-6deg)}
.sd-vs__deco .sd-deco--certificate{stroke-width:2.8;width:clamp(98px,9.6vw,152px);transform:rotate(7deg)}


/* ── TEXTILES, APPAREL & TECHNICAL TEXTILES ───────────────────────────── */
/* The same three map slots and six advantage slots once more; only the
   drawings change. Stroke is set in each drawing's own units so every figure
   lands at about 1.4 screen pixels once scaled. */
.sd-map__deco .sd-deco--cottonmap{stroke-width:2.6;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(66px,6.6vw,104px);
  transform:rotate(7deg);
}
.sd-map__deco .sd-deco--spindlemap{stroke-width:2.4;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(54px,5.4vw,86px);
  transform:rotate(-6deg);
}
.sd-map__deco .sd-deco--loommap{stroke-width:2.6;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(118px,12.4vw,196px);
  transform:rotate(-4deg);
}

.sd-lead__art .sd-deco--mill{stroke-width:1.9;}

.sd-vs__deco .sd-deco--cotton{stroke-width:2.6;width:clamp(74px,7.2vw,114px);transform:rotate(-5deg)}
.sd-vs__deco .sd-deco--spindle{stroke-width:2.6;width:clamp(58px,5.6vw,90px);transform:rotate(6deg)}
.sd-vs__deco .sd-deco--loom{stroke-width:2.8;width:clamp(108px,10.6vw,166px);transform:rotate(-6deg)}
.sd-vs__deco .sd-deco--fabricroll{stroke-width:2.8;width:clamp(110px,10.8vw,170px);transform:rotate(5deg)}
.sd-vs__deco .sd-deco--garment{stroke-width:2.8;width:clamp(92px,9vw,142px);transform:rotate(-7deg)}
.sd-vs__deco .sd-deco--needle{stroke-width:2.6;width:clamp(80px,7.8vw,124px);transform:rotate(6deg)}


/* A district sitting near the middle of the map would be hidden behind its own
   card, which is wider than half the map. Only in that case does the card take
   this narrower width, so every other page keeps the width it already had. */
@media (hover:hover) and (min-width:761px){
  .sd-map__card.is-tight{width:min(272px,48%)}
}


/* ── ELECTRONICS ──────────────────────────────────────────────────────── */
/* The same three map slots and six advantage slots once more; only the
   drawings change. Stroke is set in each drawing's own units so every figure
   lands at about 1.4 screen pixels once scaled. */
.sd-map__deco .sd-deco--chipmap2{stroke-width:2.6;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(80px,8vw,126px);
  transform:rotate(7deg);
}
.sd-map__deco .sd-deco--dronemap{stroke-width:2.6;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(92px,9.2vw,146px);
  transform:rotate(-6deg);
}
.sd-map__deco .sd-deco--pcbmap{stroke-width:2.6;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(120px,12.6vw,200px);
  transform:rotate(-4deg);
}

.sd-lead__art .sd-deco--fab{stroke-width:1.9;}

.sd-vs__deco .sd-deco--chipic{stroke-width:2.8;width:clamp(96px,9.4vw,148px);transform:rotate(-4deg)}
.sd-vs__deco .sd-deco--pcb{stroke-width:2.8;width:clamp(112px,11vw,172px);transform:rotate(5deg)}
.sd-vs__deco .sd-deco--robot{stroke-width:2.8;width:clamp(72px,7vw,112px);transform:rotate(-7deg)}
.sd-vs__deco .sd-deco--wafer{stroke-width:2.8;width:clamp(96px,9.4vw,148px);transform:rotate(6deg)}
.sd-vs__deco .sd-deco--cells{stroke-width:2.8;width:clamp(108px,10.6vw,166px);transform:rotate(-5deg)}
.sd-vs__deco .sd-deco--drone{stroke-width:2.6;width:clamp(110px,10.8vw,170px);transform:rotate(6deg)}


/* ── AVGC ─────────────────────────────────────────────────────────────── */
/* The same three map slots and six advantage slots once more; only the
   drawings change. Stroke is set in each drawing's own units so every figure
   lands at about 1.4 screen pixels once scaled. */
.sd-map__deco .sd-deco--clappermap{stroke-width:2.6;
  left:clamp(.5rem,2.4vw,3.4rem);bottom:5%;
  width:clamp(92px,9.2vw,144px);
  transform:rotate(7deg);
}
.sd-map__deco .sd-deco--padmap{stroke-width:2.6;
  right:clamp(0rem,3vw,4.5rem);top:3%;
  width:clamp(98px,9.8vw,154px);
  transform:rotate(-6deg);
}
.sd-map__deco .sd-deco--filmmap{stroke-width:2.6;
  right:clamp(-2rem,0.5vw,1.5rem);bottom:8%;
  width:clamp(122px,12.8vw,202px);
  transform:rotate(-4deg);
}

.sd-lead__art .sd-deco--studio{stroke-width:1.9;}

.sd-vs__deco .sd-deco--clapper{stroke-width:2.8;width:clamp(104px,10.2vw,160px);transform:rotate(-5deg)}
.sd-vs__deco .sd-deco--pad{stroke-width:2.8;width:clamp(114px,11.2vw,174px);transform:rotate(6deg)}
.sd-vs__deco .sd-deco--filmstrip{stroke-width:2.8;width:clamp(116px,11.4vw,178px);transform:rotate(-6deg)}
.sd-vs__deco .sd-deco--vr{stroke-width:2.8;width:clamp(112px,11vw,172px);transform:rotate(5deg)}
.sd-vs__deco .sd-deco--screen3d{stroke-width:2.8;width:clamp(108px,10.6vw,166px);transform:rotate(-6deg)}
.sd-vs__deco .sd-deco--wire{stroke-width:2.6;width:clamp(96px,9.4vw,148px);transform:rotate(7deg)}


/* ── GALLERY SLIDER ───────────────────────────────────────────────────── */
.sd-gal__stage{
  position:relative;z-index:1;
  padding-inline:clamp(3.4rem,7vw,6.5rem);
}
.sd-gal__sw{overflow:hidden;padding-block:clamp(1.4rem,3vw,2.6rem);max-width:1500px;margin-inline:auto}
/* Swiper's own CSS sets .swiper-wrapper{height:100%}, which -- with no
   explicit height on .sd-gal__sw itself -- resolves against the viewport
   instead of staying content-sized, stretching every slide (and the huge
   blank space around them) to a full screen's height. Force it back to the
   content height the cards actually need. */
.sd-gal__sw .swiper-wrapper{height:auto}

/* The slide is only a slot: Swiper slides the track and nothing else, which is
   what keeps the movement even. The card inside it is what grows and turns,
   and that transform only changes when the active slide changes. */
.sd-gal .sd-gslide{
  height:auto;
  perspective:1100px;
}
.sd-gal .sd-gcard{
  width:100%;aspect-ratio:4/3;
  transform-origin:center center;
  --pull:19%;
  transform:scale(.54) rotateY(0deg);
  opacity:.4;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  box-shadow:0 16px 34px rgba(2,8,30,.42);
  transition:transform .62s var(--e-out),opacity .62s var(--e-out),
             border-color .62s var(--e-out);
  will-change:transform;
}
/* the two either side turn away from the viewer */
.sd-gal .swiper-slide-prev .sd-gcard{transform:translateX(var(--pull)) scale(.58) rotateY(26deg);opacity:.55}
.sd-gal .swiper-slide-next .sd-gcard{transform:translateX(calc(var(--pull) * -1)) scale(.58) rotateY(-26deg);opacity:.55}
/* and the one in the middle stands square on, and largest */
.sd-gal .swiper-slide-active .sd-gcard{
  transform:scale(1) rotateY(0deg);opacity:1;
  border-color:rgba(255,255,255,.34);
  box-shadow:0 26px 54px rgba(2,8,30,.55);
}
.sd-gal figcaption{padding-top:2.2rem}

/* ── the controls ─────────────────────────────────────────────────────── */
.sd-gal__nav{
  position:absolute;top:50%;z-index:4;translate:0 -50%;
  display:grid;place-items:center;
  width:clamp(42px,4.4vw,54px);aspect-ratio:1;
  border-radius:50%;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);
  transition:background .35s var(--e-out),border-color .35s var(--e-out),
             opacity .35s var(--e-out),scale .35s var(--e-out);
}
.sd-gal__nav svg{width:42%;height:42%}
.sd-gal__nav:hover{background:var(--sd-accent);border-color:var(--sd-accent);scale:1.07}
.sd-gal__nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sd-gal__nav--prev{left:clamp(.6rem,2vw,2rem)}
.sd-gal__nav--next{right:clamp(.6rem,2vw,2rem)}
/* Swiper adds this when a rewind slider reaches an end */
.sd-gal__nav.swiper-button-disabled{opacity:.3;pointer-events:none}

/* ── the dots ─────────────────────────────────────────────────────────── */
.sd-gal__dots{
  position:relative;z-index:2;
  display:flex;justify-content:center;align-items:center;gap:.5rem;
  margin-top:clamp(1.3rem,2.6vw,2.1rem);
}
.sd-gal__dot{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.3);
  transition:background .35s var(--e-out),width .35s var(--e-out);
}
.sd-gal__dot.is-on{width:22px;border-radius:4px;background:#fff}

/* ── without Swiper, or without motion ────────────────────────────────── */
/* if the script never arrives the slides simply lie in a scrollable row */
.sd-gal__sw.is-static{overflow:visible}
.sd-gal__sw.is-static .swiper-wrapper{
  display:flex;gap:clamp(.6rem,1.4vw,1rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.6rem;
}
.sd-gal__sw.is-static .swiper-slide{scroll-snap-align:center}
.sd-gal__sw.is-static .sd-gcard{transform:none;opacity:1}
.sd-gal__sw.is-static ~ .sd-gal__nav,
.sd-gal__sw.is-static ~ .sd-gal__dots{display:none}

@media (max-width:760px){
  .sd-gal__stage{padding-inline:clamp(1rem,5vw,2.4rem)}
  .sd-gal .sd-gcard{--pull:9%}
  .sd-gal__nav{width:40px}
  .sd-gal__nav--prev{left:.2rem}
  .sd-gal__nav--next{right:.2rem}
}

/* ============================================================================
   ELECTRONICS & SEMICONDUCTORS — investor page
   Everything below is scoped to .sd--elec, so the other eleven sector pages
   are untouched. Built for the brochure job the feedback describes: a visitor
   arriving from a QR code should get why / what / where / who inside half a
   minute.
   ========================================================================= */

/* ── 01 · value chain ─────────────────────────────────────────────────── */
/* DESIGN -> COMPONENTS -> ... -> EXPORTS, as a sequence rather than a list. */
.sd--elec .el-chain{
  display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0;
}
.sd--elec .el-chain li{
  position:relative;flex:1 1 auto;min-width:min(100%,132px);
  display:grid;gap:.35rem;align-content:center;
  padding:.95rem 1.05rem;border-radius:var(--r);
  background:linear-gradient(122deg,var(--ch1),var(--ch2));
  border:1px solid transparent;
  font-family:var(--f-head);font-weight:600;font-size:.9rem;letter-spacing:-.012em;color:#fff;
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out);
}
/* the step is named by its icon now, at the size the brief asked for */
.sd--elec .el-chain__ic{
  width:38px;height:38px;display:block;
  color:rgba(255,255,255,.92);
}
/* One hue per step, warm at Design and cooling toward the exports the eighth
   card already carried. Every stop is dark enough that white sits on it at
   3.75:1 or better — the figure the original card set. That floor, not
   taste, is why the ramp skips bright yellow. */
/* The eight steps walk the logo's own colours — red, gold, green, blue — in
   that order, each step a shade of the one it belongs to. It used to run
   through brown-orange, olive and two teals, none of which the logo has. */
.sd--elec .el-chain li:nth-child(1){--ch1:#AA1E1E;--ch2:#E05151}   /* Design */
.sd--elec .el-chain li:nth-child(2){--ch1:#C79400;--ch2:#F8C828}   /* Components */
.sd--elec .el-chain li:nth-child(3){--ch1:#6E7A0C;--ch2:#A8BE14}   /* Electronics manufacturing */
.sd--elec .el-chain li:nth-child(4){--ch1:#1F6510;--ch2:#2E9617}   /* Batteries */
.sd--elec .el-chain li:nth-child(5){--ch1:#06773A;--ch2:#0BA84F}   /* Power electronics */
.sd--elec .el-chain li:nth-child(6){--ch1:#0A5A8C;--ch2:#0483CE}   /* Mobility */
.sd--elec .el-chain li:nth-child(7){--ch1:#1755AA;--ch2:#3B82E4}   /* Testing */
.sd--elec .el-chain li:nth-child(8){--ch1:#001E7A;--ch2:#0024B4}   /* Global exports */
.sd--elec .el-chain li:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.sd--elec .el-chain li:not(:last-child)::after{
  content:"";position:absolute;right:-.5rem;top:50%;translate:0 -50%;
  width:.5rem;height:1px;background:var(--line-3);
}

/* ── 02 · numbered reason cards ───────────────────────────────────────── */
.sd--elec .el-why{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.15rem);
}
.sd--elec .el-why__c{
  position:relative;overflow:hidden;display:grid;gap:.6rem;align-content:start;
  padding:clamp(1.3rem,2.4vw,1.8rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .45s var(--e-out);
}
.sd--elec .el-why__c:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent}
.sd--elec .el-why__c::before{
  content:"";position:absolute;left:0;bottom:0;width:0;height:3px;
  background:linear-gradient(90deg,var(--sd-accent),var(--green-l));
  transition:width .55s var(--e-out);
}
.sd--elec .el-why__c:hover::before{width:100%}
/* The card opens on a drawing rather than a number. Line-art at a single
   stroke weight, so the six read as one set however different the subjects. */
.sd--elec .el-why__ic{
  width:clamp(48px,4.2vw,58px);height:auto;color:var(--sd-accent);
  /* the supplied icons are filled artwork, not strokes — they take the accent
     through currentColor on each root svg */
  fill:currentColor;
  margin-bottom:.15rem;
  transition:transform .5s var(--e-out);
}
.sd--elec .el-why__c:hover .el-why__ic{transform:translateY(-2px) scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .sd--elec .el-why__ic{transition:none}
  .sd--elec .el-why__c:hover .el-why__ic{transform:none}
}
.sd--elec .el-why__t{
  font-family:var(--f-head);font-weight:700;font-size:1.12rem;
  letter-spacing:-.02em;color:var(--ink);
}
.sd--elec .el-why__p{font-size:.94rem;line-height:1.62;color:var(--ink-2)}

/* ── 03 · announced-stage chip ────────────────────────────────────────── */

/* the feedback is explicit that announced figures must read as announced */
.sd--elec .el-stage{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-head);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.34rem .7rem;border-radius:var(--r-pill);
  background:rgba(255,196,107,.14);border:1px solid rgba(255,196,107,.42);color:#FFC46B;
}

/* ── 04 · opportunity columns ─────────────────────────────────────────── */
.sd--elec .el-opp{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr));
  gap:clamp(.8rem,1.6vw,1.1rem);
}
.sd--elec .el-opp__c{
  display:grid;gap:.75rem;align-content:start;
  padding:clamp(1.2rem,2.2vw,1.6rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  border-top:3px solid var(--sd-accent);
  transition:box-shadow .45s var(--e-out),transform .45s var(--e-out);
}
.sd--elec .el-opp__c:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
/* supplied artwork, filled rather than stroked, taking the accent through
   currentColor on each root svg */
.sd--elec .el-opp__ic{
  width:clamp(44px,3.8vw,54px);height:auto;color:var(--sd-accent);fill:currentColor;
  margin-bottom:.1rem;
  transition:transform .45s var(--e-out);
}
.sd--elec .el-opp__c:hover .el-opp__ic{transform:translateY(-2px) scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .sd--elec .el-opp__ic{transition:none}
  .sd--elec .el-opp__c:hover .el-opp__ic{transform:none}
}
.sd--elec .el-opp__t{
  font-family:var(--f-head);font-weight:700;font-size:1.05rem;
  letter-spacing:-.018em;color:var(--ink);
}
.sd--elec .el-opp__l{display:grid;gap:.4rem;margin:0;padding:0;list-style:none}
.sd--elec .el-opp__l li{
  position:relative;padding-left:1.15rem;font-size:.92rem;line-height:1.55;color:var(--ink-2);
}
.sd--elec .el-opp__l li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:1px;background:var(--sd-accent);rotate:45deg;
}

/* ── 05 · locations table ─────────────────────────────────────────────── */
.sd--elec .el-find{
  position:relative;display:flex;align-items:center;max-width:340px;
  margin-bottom:clamp(1.1rem,2.2vw,1.6rem);
}
.sd--elec .el-find svg{position:absolute;left:.85rem;width:15px;height:15px;color:var(--ink-4);pointer-events:none}
.sd--elec .el-find input{
  width:100%;padding:.68rem .9rem .68rem 2.3rem;
  font-family:var(--f-body);font-size:.9rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  transition:border-color .35s var(--e-out),box-shadow .35s var(--e-out);
}
.sd--elec .el-find input:focus{
  outline:0;border-color:var(--sd-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sd-accent) 14%,transparent);
}
.sd--elec .el-tbl__w{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
}
.sd--elec .el-tbl__s{overflow-x:auto}
.sd--elec .el-tbl{width:100%;border-collapse:collapse;min-width:640px}
.sd--elec .el-tbl th{
  text-align:left;font-family:var(--f-head);font-weight:500;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  padding:.9rem 1.1rem;background:var(--paper-2);border-bottom:1px solid var(--line);
}
.sd--elec .el-tbl td{
  padding:.95rem 1.1rem;border-bottom:1px solid var(--line-2);
  font-size:.94rem;line-height:1.55;color:var(--ink-2);vertical-align:top;
}
.sd--elec .el-tbl tr:last-child td{border-bottom:0}
.sd--elec .el-tbl tbody tr{transition:background .3s var(--e-out)}
.sd--elec .el-tbl tbody tr:hover{background:var(--paper-2)}
.sd--elec .el-tbl td:first-child{
  font-family:var(--f-head);font-weight:700;color:var(--ink);
}
.sd--elec .el-tbl tr.is-off{display:none}
.sd--elec .el-tbl mark{
  background:color-mix(in srgb,var(--sd-accent) 24%,transparent);color:inherit;border-radius:3px;
}
.sd--elec .el-tbl__n{
  font-family:var(--f-head);font-size:.7rem;letter-spacing:.1em;color:var(--ink-3);
  padding:.8rem 1.1rem;border-top:1px solid var(--line-2);background:var(--paper-2);
}

/* ── 06 · momentum strip ──────────────────────────────────────────────── */
.sd--elec .el-mom{display:grid;gap:.7rem}
.sd--elec .el-mom__i{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem 1.1rem;align-items:baseline;
  padding:1rem 1.2rem;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--sd-accent);
  transition:transform .4s var(--e-out),box-shadow .4s var(--e-out);
}
.sd--elec .el-mom__i:hover{transform:translateX(3px);box-shadow:var(--sh-1)}
.sd--elec .el-mom__t{
  font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:1rem;white-space:nowrap;
}
.sd--elec .el-mom__p{font-size:.93rem;line-height:1.55;color:var(--ink-2)}

/* ── 07 · logo groups ─────────────────────────────────────────────────── */
.sd--elec .el-grp{display:grid;gap:clamp(1.4rem,2.8vw,2.2rem)}
.sd--elec .el-grp__h{
  display:flex;align-items:baseline;gap:.7rem;
  font-family:var(--f-head);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sd-accent);margin-bottom:.9rem;
}
.sd--elec .el-grp__h::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── 08 · caveat ──────────────────────────────────────────────────────── */
.sd--elec .el-note{
  display:grid;gap:.45rem;margin-top:1.1rem;
  padding:1rem 1.2rem;border-radius:var(--r);
  background:var(--paper-warm);border:1px solid var(--line);border-left:3px solid var(--orange);
}
.sd--elec .el-note b{
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d);
}
.sd--elec .el-note p{font-size:.9rem;line-height:1.62;color:var(--ink-2)}

@media (max-width:1080px){
  .sd--elec .el-why{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .sd--elec .el-why{grid-template-columns:1fr}
  /* two to a row rather than a stack of eight: the gap has to come out of
     the half, and the basis has to be stated: left on auto a long label
     like "Electronics manufacturing" sets its own and takes the whole row. */
  .sd--elec .el-chain li{flex:1 1 calc(50% - .25rem);min-width:0}
  /* the run of the sequence breaks across rows, so the joins come off */
  .sd--elec .el-chain li:not(:last-child)::after{display:none}
  .sd--elec .el-mom__i{grid-template-columns:1fr}
  .sd--elec .el-mom__t{white-space:normal}
}

/* ============================================================================
   ELECTRONICS · THE CORRIDOR RUN
   The six sections between the cluster map and the corridor list used to be
   the same dark slab repeated: heading, paragraph, bulleted list, full width.
   They are rebuilt here on one small vocabulary.

     .ez        the dark panel — keeps the gradient the old slab had
     .ez__lay   splits a panel into narrative and evidence
     .ez-cap    what used to be a bullet list, as a grid of tiles
     .ez-figs   a figure band led by one dominant number
     .ez-chain  a product run, read left to right
     .ez-flow   place -> output pairs
     .ez-rail   a drawn timeline
     .ez-tag    the loose keyword chips, which had no styling at all

   Motion is carried by the page's own .rv / .rv-c reveals plus two scroll
   -driven touches in sector-detail.js. Nothing here animates on load.
   ========================================================================= */

/* ── the panel ────────────────────────────────────────────────────────── */
.sd--elec .ez{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg);
  /* the gradient the previous slab used, kept deliberately */
  background:linear-gradient(142deg,#0A0C2B 0%,#1B1046 46%,#2A1358 100%);
  color:#fff;
  padding:clamp(1.7rem,3.6vw,3rem);
}
/* brand light thrown across the panel, and a faint rule grid under it */
.sd--elec .ez::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 58% at 88% -8%,color-mix(in srgb,var(--sd-accent) 42%,transparent),transparent 66%),
    radial-gradient(40% 46% at 4% 106%,rgba(6,165,25,.2),transparent 68%);
}
.sd--elec .ez::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(76% 82% at 50% 0%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(76% 82% at 50% 0%,#000,transparent 78%);
}
.sd--elec .ez > *{position:relative;z-index:1}
/* the drifting highlight — moved by scroll in sector-detail.js, static without it */
.sd--elec .ez__aura{
  position:absolute;z-index:0;pointer-events:none;
  width:min(58%,560px);aspect-ratio:1;border-radius:50%;
  right:-8%;top:-30%;
  background:radial-gradient(circle,color-mix(in srgb,var(--sd-accent) 54%,transparent),transparent 64%);
  filter:blur(26px);opacity:.75;
  will-change:transform;
}
.sd--elec .ez + .ez{margin-top:clamp(.9rem,2vw,1.4rem)}

.sd--elec .ez__h{
  font-family:var(--f-head);font-weight:700;color:#fff;
  font-size:clamp(1.45rem,2.7vw,2.25rem);line-height:1.12;letter-spacing:-.03em;
  text-wrap:balance;
}
.sd--elec .ez__h em{font-style:normal;color:var(--orange-l)}
.sd--elec .ez__p{
  margin-top:.9rem;max-width:62ch;color:rgba(255,255,255,.8);line-height:1.68;font-size:1rem;
}

/* narrative on the left, evidence on the right — collapses to one column */
.sd--elec .ez__lay{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.4rem,3.4vw,3rem);align-items:start;
}
.sd--elec .ez__lay > * > :first-child{margin-top:0}

/* ── capability tiles ─────────────────────────────────────────────────── */
/* One to a row. Side by side the columns were narrow enough that a label
   like "Consumer electronics, telecom and networking equipment" broke over
   five lines; across the full column it takes one or two. */
.sd--elec .ez-cap{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:.5rem;margin-top:clamp(1.2rem,2.4vw,1.7rem);
}
.sd--elec .ez-cap__c{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:.85rem;align-items:start;
  padding:.82rem 1.1rem;border-radius:var(--r);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.88);font-size:.93rem;line-height:1.52;
  transition:transform .5s var(--e-out),background .4s var(--e-out),border-color .4s var(--e-out);
}
/* the arrow holds its own column, so a label that wraps stays clear of it */
.sd--elec .ez-cap__ar{
  width:26px;height:10px;margin-top:.62em;color:var(--orange-l);
  transition:transform .4s var(--e-out),color .4s var(--e-out);
}
.sd--elec .ez-cap__c:hover .ez-cap__ar{transform:translateX(4px);color:#fff}
/* the pointer wash main.js already feeds through --mx / --my */
.sd--elec .ez-cap__c::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 62%);
  transition:opacity .45s var(--e-out);
}
.sd--elec .ez-cap__c:hover{
  transform:translateY(-3px);background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.3);
}
.sd--elec .ez-cap__c:hover::after{opacity:1}

/* ── the figure band ──────────────────────────────────────────────────── */
/* One number leads and the rest support it, instead of five equal cells. */
.sd--elec .ez-figs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;
  margin-top:clamp(1.4rem,2.8vw,2rem);
}
.sd--elec .ez-fig{
  display:grid;gap:.4rem;align-content:center;
  padding:1.05rem 1.15rem;border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  transition:background .4s var(--e-out),border-color .4s var(--e-out);
}
.sd--elec .ez-fig:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.28)}
.sd--elec .ez-fig b{
  font-family:var(--f-head);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.75rem);
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.sd--elec .ez-fig b .pfx{font-size:.62em;font-weight:500;letter-spacing:normal}
.sd--elec .ez-fig b .suf{font-size:.54em;font-weight:600;color:var(--orange-l)}
.sd--elec .ez-fig span{font-size:.83rem;color:rgba(255,255,255,.62);line-height:1.45}
.sd--elec .ez-fig--lead{
  grid-column:1 / span 2;grid-row:1 / span 2;
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--sd-accent) 46%,transparent),rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.26);
}
.sd--elec .ez-fig--lead b{font-size:clamp(2.3rem,5vw,3.6rem)}
.sd--elec .ez-fig--lead span{font-size:.95rem;color:rgba(255,255,255,.78);max-width:26ch}

/* ── a product run ────────────────────────────────────────────────────── */
.sd--elec .ez-chain{
  display:flex;flex-wrap:wrap;gap:.45rem;margin-top:clamp(1.2rem,2.4vw,1.6rem);
  list-style:none;padding:0;
}
.sd--elec .ez-chain li{
  padding:.5rem .9rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-family:var(--f-head);font-weight:600;font-size:.86rem;color:rgba(255,255,255,.9);
  transition:background .35s var(--e-out),transform .35s var(--e-out);
}
.sd--elec .ez-chain li:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

/* ── the picture inside a panel ───────────────────────────────────────── */
.sd--elec .ez-fg{
  margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
}
.sd--elec .ez-fg img{display:block;width:100%;height:auto}
.sd--elec .ez-fg figcaption{
  padding:.85rem 1rem;font-size:.84rem;line-height:1.55;
  color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.12);
}

/* ── a light section split into a held head and a moving body ─────────── */
.sd--elec .ez-split{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:start;
}
.sd--elec .ez-split__hd{position:sticky;top:calc(var(--hdr-h) + 2.2rem)}

/* ── an even pair under a full-width heading ──────────────────────────── */
/* The picture and the timeline each take half. align-items:start keeps the
   shorter of the two from stretching to match the taller one. */
.sd--elec .ez-duo{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.3rem,3vw,2.6rem);align-items:start;
}
/* the rail sits against the top of its column, not against the picture's */
.sd--elec .ez-duo > .ez-rail{padding-top:0}

/* ── place -> output ──────────────────────────────────────────────────── */
.sd--elec .ez-flow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,224px),1fr));gap:.7rem;
}
.sd--elec .ez-flow__c{
  position:relative;overflow:hidden;
  display:grid;gap:.5rem;align-content:start;
  padding:1.15rem 1.25rem;border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),border-color .45s var(--e-out);
}
/* the accent runs along the top edge and fills on hover */
.sd--elec .ez-flow__c::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:34%;
  background:linear-gradient(90deg,var(--fc,var(--sd-accent)),transparent);
  transition:width .55s var(--e-out);
}
.sd--elec .ez-flow__c:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.sd--elec .ez-flow__c:hover::before{width:100%}
.sd--elec .ez-flow__a{
  font-family:var(--f-head);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink);
}
.sd--elec .ez-flow__ar{
  display:block;width:26px;height:10px;color:var(--fc,var(--sd-accent));
}
.sd--elec .ez-flow__b{font-size:.92rem;line-height:1.5;color:var(--ink-2)}

/* ── keyword chips (these had no rule at all before) ──────────────────── */
.sd--elec .ez-tags{
  display:flex;flex-wrap:wrap;gap:.45rem;margin-top:clamp(1.1rem,2.2vw,1.5rem);
  list-style:none;padding:0;
}
.sd--elec .ez-tags li{
  padding:.44rem .85rem;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line);
  font-family:var(--f-head);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);
  transition:color .35s var(--e-out),border-color .35s var(--e-out),transform .35s var(--e-out);
}
.sd--elec .ez-tags li:hover{
  color:var(--sd-accent);border-color:color-mix(in srgb,var(--sd-accent) 46%,transparent);
  transform:translateY(-2px);
}

/* ── the momentum timeline ────────────────────────────────────────────── */
.sd--elec .ez-rail{position:relative;display:grid;gap:0;padding-left:2.6rem}
/* the track, and the part of it that has been read */
.sd--elec .ez-rail::before,
.sd--elec .ez-rail::after{
  content:"";position:absolute;left:11px;top:.9rem;bottom:.9rem;width:2px;border-radius:2px;
}
.sd--elec .ez-rail::before{background:var(--line)}
.sd--elec .ez-rail::after{
  background:linear-gradient(180deg,var(--sd-accent),var(--green-l));
  transform-origin:top;transform:scaleY(var(--draw,0));
}
.sd--elec .ez-rail__i{
  position:relative;display:grid;gap:.3rem;
  padding:.95rem 0 .95rem 0;
}
.sd--elec .ez-rail__i + .ez-rail__i{border-top:1px solid var(--line)}
.sd--elec .ez-rail__i::before{
  content:"";position:absolute;left:-2.6rem;top:1.25rem;
  width:24px;height:24px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line);
  transition:border-color .45s var(--e-out),background .45s var(--e-out),transform .45s var(--e-out);
}
.sd--elec .ez-rail__i::after{
  content:"";position:absolute;left:calc(-2.6rem + 8px);top:calc(1.25rem + 8px);
  width:8px;height:8px;border-radius:50%;background:var(--line-3);
  transition:background .45s var(--e-out);
}
.sd--elec .ez-rail__i:hover::before,
.sd--elec .ez-rail__i.is-on::before{border-color:var(--sd-accent);transform:scale(1.08)}
.sd--elec .ez-rail__i:hover::after,
.sd--elec .ez-rail__i.is-on::after{background:var(--sd-accent)}
.sd--elec .ez-rail__t{
  font-family:var(--f-head);font-weight:700;font-size:1.06rem;letter-spacing:-.02em;color:var(--ink);
}
.sd--elec .ez-rail__p{font-size:.93rem;line-height:1.6;color:var(--ink-2);max-width:56ch}

/* ── a picture in a light section ─────────────────────────────────────── */
.sd--elec .ez-shot{
  margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--paper);
}
.sd--elec .ez-shot img{display:block;width:100%;height:auto}
.sd--elec .ez-shot figcaption{
  padding:.9rem 1.1rem;font-size:.86rem;line-height:1.58;color:var(--ink-2);
  border-top:1px solid var(--line);
}

/* ── narrower ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .sd--elec .ez__lay,
  .sd--elec .ez-duo,
  .sd--elec .ez-split{grid-template-columns:minmax(0,1fr)}
  .sd--elec .ez-split__hd{position:static}
  .sd--elec .ez-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd--elec .ez-fig--lead{grid-column:1 / span 2;grid-row:auto}
}
@media (max-width:520px){
  .sd--elec .ez-figs{grid-template-columns:minmax(0,1fr)}
  .sd--elec .ez-fig--lead{grid-column:1}
  .sd--elec .ez-rail{padding-left:2.2rem}
  .sd--elec .ez-rail__i::before{left:-2.2rem}
  .sd--elec .ez-rail__i::after{left:calc(-2.2rem + 8px)}
  .sd--elec .ez-rail::before,.sd--elec .ez-rail::after{left:11px}
}

/* Someone who asked for less motion keeps the layout and loses the movement.
   The aura stays: it is a gradient, and only sector-detail.js ever moves it.
   The rail has to be told it is complete — its fill is scrubbed by script, so
   without this it would sit at nothing and read as an empty track. Both the
   media query and the class matter: main.js can set .no-motion long after
   load, and the two must not disagree. */
@media (prefers-reduced-motion:reduce){
  .sd--elec .ez-rail{--draw:1}
  .sd--elec .ez-cap__c,.sd--elec .ez-cap__ar,.sd--elec .ez-flow__c,
  .sd--elec .ez-chain li,.sd--elec .ez-tags li{transition:none}
  .sd--elec .ez-cap__c:hover .ez-cap__ar{transform:none}
}
/* !important because sector-detail.js writes --draw inline as it scrubs, and
   main.js can add .no-motion seconds after that scrub has begun. An author
   !important is the one thing that outranks a normal inline declaration. */
html.no-motion .sd--elec .ez-rail{--draw:1 !important}

/* ── the ecosystem rails ──────────────────────────────────────────────── */
/* The three logo groups scroll instead of sitting in a static grid, and they
   alternate direction. Each rail stays inside the shell column — the panel
   keeps the border, radius and shadow the old .sd-grid had, and clips the
   track, so nothing runs to the edge of the screen. */
.sd--elec .el-marq{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);
  /* shows through the hairline gaps between tiles, as the old grid did */
  background:var(--line);
  box-shadow:0 22px 54px rgba(0,36,180,.07);
  /* the shared .sd-marq is a grid with a gap; a rail wants neither */
  display:block;gap:0;
  /* The track inside is wider than the page on purpose. Without this the
     panel is sized by that content and runs past the shell, because a grid
     item's min-width defaults to auto — it refuses to shrink below what it
     holds. Pinning the width keeps the rail inside its column. */
  width:100%;min-width:0;max-width:100%;
}
/* the group wrappers are grid items too, and carry the same default */
.sd--elec .el-grp > *{min-width:0}
.sd--elec .el-marq .sd-rail{display:flex;width:max-content}
.sd--elec .el-marq .sd-rail__t{
  display:flex;gap:1px;padding-right:1px;flex:0 0 auto;
}
/* the middle rail runs the other way: same keyframes, played backwards */
.sd--elec .el-marq--rev .sd-rail__t{animation-direction:reverse}
/* a tile has no width of its own once it leaves the grid */
.sd--elec .el-marq .sd-tile{flex:0 0 auto;width:clamp(148px,16.4vw,214px)}

/* the ends fade into the tiles rather than being cut off square */
.sd--elec .el-marq::before,
.sd--elec .el-marq::after{
  content:"";position:absolute;top:0;bottom:0;z-index:2;pointer-events:none;
  width:clamp(26px,4.5vw,64px);
}
.sd--elec .el-marq::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.sd--elec .el-marq::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}

/* Motion off: the duplicate copies would repeat every logo, so they go, and
   the single remaining track becomes something you can push sideways. The
   shared .sd-rail__t rule sets a 46s animation with no guard of its own —
   sector-detail.js only skips setting the duration, it cannot stop the CSS. */
@media (prefers-reduced-motion:reduce){
  .sd--elec .el-marq .sd-rail__t{animation:none}
  .sd--elec .el-marq .sd-rail__t[aria-hidden="true"]{display:none}
  .sd--elec .el-marq .sd-rail{overflow-x:auto;width:auto;scrollbar-width:thin}
}
html.no-motion .sd--elec .el-marq .sd-rail__t{animation:none}
html.no-motion .sd--elec .el-marq .sd-rail__t[aria-hidden="true"]{display:none}
html.no-motion .sd--elec .el-marq .sd-rail{overflow-x:auto;width:auto}

/* ── Data Centres: the two-district cluster map ───────────────────────── */
/* That page shows Hyderabad and Ranga Reddy alone, on a viewBox roughly a
   quarter the width of the full State. Stroke widths are in user units, so
   the shared rule would draw the outlines about four times heavier there.
   non-scaling-stroke takes them out of user space and back into CSS pixels,
   which holds the same hairline at any zoom. It is not inherited, so it has
   to sit on the shapes rather than on the svg. */
.sd--dc .sd-map__svg path{vector-effect:non-scaling-stroke;stroke-width:1.2}
.sd--dc .sd-map__svg path.is-live{stroke-width:1.7}

/* ── REDRAWN SECTOR FIGURES ─────────────────────────────────── */
/* Two weights and one flat mass. The heavy stroke carries the silhouette,
   the light one the surface, and `dm` gives each figure something solid to
   read at a glance. Sizes above put every drawing on the same scale, so
   these three numbers hold across all of them. */
/* The margin caps a figure's width to the space beside the cards, so a
   stroke in viewBox units lands anywhere between 1.5px and 2.4px depending
   on the drawing and the viewport. These are in screen pixels instead, so
   every figure on every page carries the same weight. */
.sd-deco{--dsw:2.4px;--ddw:1.4px}
.sd-deco .ds{fill:none;stroke:currentColor;stroke-width:var(--dsw);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.sd-deco .dd{fill:none;stroke:currentColor;stroke-width:var(--ddw);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.sd-deco .dm{fill:currentColor;stroke:none;opacity:.13}

/* the margins and the map: brought up from .4, where a 1.2px line at 40%
   simply vanished on white */
.sd-vs__deco .sd-deco,
.sd-map__deco .sd-deco{opacity:.6}
/* the lead figure is drawn nearer life size, so it takes a finer line */
.sd-lead__art .sd-deco{--dsw:2.6px;--ddw:1.5px;opacity:.85}

.sd-vs__deco .sd-deco--atom{width:clamp(90px,10.35vw,140px)}
.sd-map__deco .sd-deco--atom{width:clamp(90px,10.35vw,140px);max-width:none}
.sd-vs__deco .sd-deco--battery{width:clamp(98px,11.22vw,151px)}
.sd-map__deco .sd-deco--battery{width:clamp(98px,11.22vw,151px);max-width:none}
.sd-vs__deco .sd-deco--batterymap{width:clamp(98px,11.22vw,151px)}
.sd-map__deco .sd-deco--batterymap{width:clamp(98px,11.22vw,151px);max-width:none}
.sd-vs__deco .sd-deco--bess{width:clamp(101px,11.59vw,156px)}
.sd-map__deco .sd-deco--bess{width:clamp(101px,11.59vw,156px);max-width:none}
.sd-vs__deco .sd-deco--bessmap{width:clamp(101px,11.59vw,156px)}
.sd-map__deco .sd-deco--bessmap{width:clamp(101px,11.59vw,156px);max-width:none}
.sd-vs__deco .sd-deco--bus{width:clamp(128px,14.72vw,198px)}
.sd-map__deco .sd-deco--bus{width:clamp(128px,14.72vw,198px);max-width:none}
.sd-vs__deco .sd-deco--capsule{width:clamp(94px,10.76vw,145px)}
.sd-map__deco .sd-deco--capsule{width:clamp(94px,10.76vw,145px);max-width:none}
.sd-vs__deco .sd-deco--car2{width:clamp(116px,13.34vw,180px)}
.sd-map__deco .sd-deco--car2{width:clamp(116px,13.34vw,180px);max-width:none}
.sd-vs__deco .sd-deco--cells{width:clamp(106px,12.24vw,165px)}
.sd-map__deco .sd-deco--cells{width:clamp(106px,12.24vw,165px);max-width:none}
.sd-vs__deco .sd-deco--charger{width:clamp(78px,8.92vw,120px)}
.sd-map__deco .sd-deco--charger{width:clamp(78px,8.92vw,120px);max-width:none}
.sd-vs__deco .sd-deco--chipic{width:clamp(75px,8.65vw,117px)}
.sd-map__deco .sd-deco--chipic{width:clamp(75px,8.65vw,117px);max-width:none}
.sd-vs__deco .sd-deco--chipmap2{width:clamp(157px,18.03vw,243px)}
.sd-map__deco .sd-deco--chipmap2{width:clamp(157px,18.03vw,243px);max-width:none}
.sd-vs__deco .sd-deco--cleanenergy{width:clamp(160px,18.40vw,248px)}
.sd-map__deco .sd-deco--cleanenergy{width:clamp(160px,18.40vw,248px);max-width:none}
.sd-vs__deco .sd-deco--cog{width:clamp(87px,10.02vw,135px)}
.sd-map__deco .sd-deco--cog{width:clamp(87px,10.02vw,135px);max-width:none}
.sd-vs__deco .sd-deco--drone{width:clamp(95px,10.95vw,148px)}
.sd-map__deco .sd-deco--drone{width:clamp(95px,10.95vw,148px);max-width:none}
.sd-vs__deco .sd-deco--dronemap{width:clamp(95px,10.95vw,148px)}
.sd-map__deco .sd-deco--dronemap{width:clamp(95px,10.95vw,148px);max-width:none}
.sd-vs__deco .sd-deco--flask{width:clamp(55px,6.35vw,86px)}
.sd-map__deco .sd-deco--flask{width:clamp(55px,6.35vw,86px);max-width:none}
.sd-vs__deco .sd-deco--flask2{width:clamp(55px,6.35vw,86px)}
.sd-map__deco .sd-deco--flask2{width:clamp(55px,6.35vw,86px);max-width:none}
.sd-vs__deco .sd-deco--greenleaf{width:clamp(86px,9.94vw,134px)}
.sd-map__deco .sd-deco--greenleaf{width:clamp(86px,9.94vw,134px);max-width:none}
.sd-vs__deco .sd-deco--h2{width:clamp(93px,10.67vw,144px)}
.sd-map__deco .sd-deco--h2{width:clamp(93px,10.67vw,144px);max-width:none}
.sd-vs__deco .sd-deco--helix{width:clamp(26px,3.04vw,41px)}
.sd-map__deco .sd-deco--helix{width:clamp(26px,3.04vw,41px);max-width:none}
.sd-vs__deco .sd-deco--helix2{width:clamp(26px,3.04vw,41px)}
.sd-map__deco .sd-deco--helix2{width:clamp(26px,3.04vw,41px);max-width:none}
.sd-vs__deco .sd-deco--mol{width:clamp(126px,14.54vw,196px)}
.sd-map__deco .sd-deco--mol{width:clamp(126px,14.54vw,196px);max-width:none}
.sd-vs__deco .sd-deco--mol2{width:clamp(80px,9.20vw,124px)}
.sd-map__deco .sd-deco--mol2{width:clamp(80px,9.20vw,124px);max-width:none}
.sd-vs__deco .sd-deco--motor{width:clamp(162px,18.58vw,250px)}
.sd-map__deco .sd-deco--motor{width:clamp(162px,18.58vw,250px);max-width:none}
.sd-vs__deco .sd-deco--pcb{width:clamp(110px,12.70vw,171px)}
.sd-map__deco .sd-deco--pcb{width:clamp(110px,12.70vw,171px);max-width:none}
.sd-vs__deco .sd-deco--pcbmap{width:clamp(110px,12.70vw,171px)}
.sd-map__deco .sd-deco--pcbmap{width:clamp(110px,12.70vw,171px);max-width:none}
.sd-vs__deco .sd-deco--petri{width:clamp(81px,9.29vw,125px)}
.sd-map__deco .sd-deco--petri{width:clamp(81px,9.29vw,125px);max-width:none}
.sd-vs__deco .sd-deco--plug{width:clamp(45px,5.15vw,69px)}
.sd-map__deco .sd-deco--plug{width:clamp(45px,5.15vw,69px);max-width:none}
.sd-vs__deco .sd-deco--plugmap{width:clamp(45px,5.15vw,69px)}
.sd-map__deco .sd-deco--plugmap{width:clamp(45px,5.15vw,69px);max-width:none}
.sd-vs__deco .sd-deco--robot{width:clamp(87px,10.03vw,135px)}
.sd-map__deco .sd-deco--robot{width:clamp(87px,10.03vw,135px);max-width:none}
.sd-vs__deco .sd-deco--scope{width:clamp(58px,6.62vw,89px)}
.sd-map__deco .sd-deco--scope{width:clamp(58px,6.62vw,89px);max-width:none}
.sd-vs__deco .sd-deco--solar{width:clamp(96px,11.04vw,149px)}
.sd-map__deco .sd-deco--solar{width:clamp(96px,11.04vw,149px);max-width:none}
.sd-vs__deco .sd-deco--solarmap{width:clamp(96px,11.04vw,149px)}
.sd-map__deco .sd-deco--solarmap{width:clamp(96px,11.04vw,149px);max-width:none}
.sd-vs__deco .sd-deco--turbine{width:clamp(80px,9.20vw,124px)}
.sd-map__deco .sd-deco--turbine{width:clamp(80px,9.20vw,124px);max-width:none}
.sd-vs__deco .sd-deco--turbinemap{width:clamp(80px,9.20vw,124px)}
.sd-map__deco .sd-deco--turbinemap{width:clamp(80px,9.20vw,124px);max-width:none}
.sd-vs__deco .sd-deco--tyre{width:clamp(80px,9.20vw,124px)}
.sd-map__deco .sd-deco--tyre{width:clamp(80px,9.20vw,124px);max-width:none}
.sd-vs__deco .sd-deco--tyremap{width:clamp(80px,9.20vw,124px)}
.sd-map__deco .sd-deco--tyremap{width:clamp(80px,9.20vw,124px);max-width:none}
.sd-vs__deco .sd-deco--wafer{width:clamp(85px,9.82vw,132px)}
.sd-map__deco .sd-deco--wafer{width:clamp(85px,9.82vw,132px);max-width:none}

/* ==========================================================================
   SECTOR DIRECTOR — the named officer for the sector
   Matched to the supplied reference: a pale laboratory band carrying a DNA
   helix and molecular structures, with a soft white card floating on it.

   Two colours do the work. The sector accent (green on Life Sciences) carries
   the role line and the portrait edge; the brand sky carries the eyebrow rule
   and the contact icons — exactly as the reference separates them.

   Behaviour is in sector-detail.js §08.
   ========================================================================== */

.sd-dir{
  --dir-blue:#0483ce;                   /* the utility colour: icons, rules */
  --dir-ink:#0d2b52;                    /* the name, a deep navy */
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(3rem,6vw,5.5rem);
  background:
    linear-gradient(168deg,#f2f8fe 0%,#eaf4fd 42%,#eef8f6 100%);
}

/* the laboratory band ---------------------------------------------------- */
.sd-dir__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sd-dir__bg > *{position:absolute;display:block;color:var(--dir-blue)}

/* washes: blue at the top, a green bloom at the lower left */
.sd-dir__bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(48% 70% at 12% 4%, rgba(4,131,206,.14) 0%, transparent 60%),
    radial-gradient(40% 64% at 90% 10%, rgba(4,131,206,.12) 0%, transparent 62%),
    radial-gradient(52% 78% at 8% 104%, color-mix(in srgb,var(--sd-accent) 20%,transparent) 0%, transparent 60%);
}
/* the soft ribbon that sweeps the lower half in the reference */
.sd-dir__bg::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:-38%;height:88%;
  border-radius:50%;
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--sd-accent) 13%,transparent) 0%,
    rgba(255,255,255,.55) 38%, rgba(255,255,255,.28) 100%);
  filter:blur(2px);
}

.sd-dir__dna{right:1%;top:-6%;width:clamp(150px,15vw,238px);opacity:.34}
.sd-dir__dna svg{width:100%;height:auto;display:block}
.sd-dir__mol{opacity:.26}
.sd-dir__mol svg{width:100%;height:auto;display:block}
.sd-dir__mol--a{left:-1%;top:-4%;width:clamp(120px,13vw,208px)}
.sd-dir__mol--b{left:46%;top:-9%;width:clamp(96px,10vw,158px);opacity:.2}
.sd-dir__mol--c{right:6%;bottom:-4%;width:clamp(96px,10vw,152px)}
/* the glassware at the far left edge */
.sd-dir__tube{left:-2%;bottom:-2%;width:clamp(70px,7vw,112px);opacity:.3}
.sd-dir__tube svg{width:100%;height:auto;display:block}

/* the card ---------------------------------------------------------------- */
.dir{
  /* used to inherit these from the .sd-dir section that wrapped it; now it
     lives inside .cta instead (see "CTA" further down), so the card owns
     its own palette rather than depending on an ancestor for it */
  --dir-blue:#0483ce;                   /* the utility colour: icons, rules */
  --dir-ink:#0d2b52;                    /* the name, a deep navy */
  position:relative;z-index:1;isolation:isolate;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) clamp(320px,32vw,452px);
  gap:clamp(1.4rem,3vw,3rem);
  align-items:center;
  /* now lives inside .cta__in, which centres its children and sets its own
     text-align:center -- reassert this card's own left-aligned, full-width
     layout regardless of what wraps it */
  text-align:left;justify-self:stretch;width:100%;
  padding:clamp(1.1rem,2.4vw,1.9rem);
  border-radius:clamp(26px,3vw,40px);
  background:linear-gradient(118deg,#fff 0%,rgba(255,255,255,.88) 46%,rgba(244,251,255,.86) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 2px 6px rgba(13,43,82,.04),
    0 34px 80px -34px rgba(13,43,82,.28);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
/* .cta's own "h2{color:#fff}" / "p{color:rgba(255,255,255,.8)}" are blanket
   element rules, and .dir__n/__r/__o are an h2 and two p's -- without these
   they'd inherit the CTA's white-on-dark palette instead of the card's own */
.cta .dir__n{color:var(--dir-ink)}
.cta .dir__r{color:var(--sd-accent)}
.cta .dir__o{color:#5b6b86}
/* the pointer spotlight */
.dir::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
    rgba(4,131,206,.10) 0%, transparent 70%);
  opacity:0;transition:opacity .45s var(--e-out);
}
.dir:hover::before,.dir:focus-within::before{opacity:1}

/* portrait --------------------------------------------------------------- */
.dir__shot{
  position:relative;margin:0;flex:none;
  width:clamp(168px,19vw,270px);aspect-ratio:1/1.12;
  border-radius:34px;padding:6px;
  /* white at the top, the sector green pooling at the lower left */
  background:linear-gradient(200deg,
    rgba(255,255,255,.95) 0%,
    color-mix(in srgb,var(--sd-accent) 28%,#fff) 52%,
    var(--sd-accent) 100%);
  box-shadow:0 22px 46px -20px rgba(13,43,82,.38);
}
.dir__shot img{
  width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  border-radius:29px;background:#eef4fa;display:block;
}

/* the words -------------------------------------------------------------- */
.dir__body{min-width:0}
/* the eyebrow and the rule that runs off it */
.dir__k{
  display:flex;align-items:center;gap:1rem;margin:0 0 .85rem;
  font-family:var(--f-head);font-weight:700;
  font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dir-blue);
}
.dir__k::after{
  content:"";flex:1;height:1px;max-width:230px;
  background:linear-gradient(90deg,rgba(4,131,206,.5),rgba(4,131,206,0));
}
.dir__n{
  margin:0 0 .18rem;font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:-.042em;
  color:var(--dir-ink);
}
.dir__r{
  margin:0 0 .95rem;font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.1rem,1.7vw,1.42rem);letter-spacing:-.024em;
  color:var(--sd-accent);
}
.dir__o{
  margin:0;font-size:clamp(.92rem,1.1vw,1rem);line-height:1.62;
  color:#5b6b86;
}

/* the ways to reach them -------------------------------------------------- */
.dir__ways{
  display:grid;gap:.75rem;align-content:center;
  padding-left:clamp(1.3rem,2.6vw,2.6rem);
  border-left:1px solid rgba(13,43,82,.10);
}
.dir__way{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1rem;
  padding:.8rem 1rem;border-radius:22px;
  background:linear-gradient(110deg,rgba(255,255,255,.96),rgba(240,248,255,.92));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(13,43,82,.03), 0 10px 26px -16px rgba(13,43,82,.24);
  text-decoration:none;color:inherit;
  transition:transform .4s var(--e-out),box-shadow .4s var(--e-out),
             border-color .4s var(--e-out);
}
.dir__way:hover{
  transform:translateY(-2px);
  border-color:rgba(4,131,206,.28);
  box-shadow:0 1px 2px rgba(13,43,82,.04), 0 18px 34px -16px rgba(13,43,82,.32);
}
.dir__way:focus-visible{outline:2px solid var(--dir-blue);outline-offset:3px}
/* the icon chip */
.dir__way i{
  display:grid;place-items:center;width:52px;height:52px;border-radius:17px;
  background:#e8f2fd;color:var(--dir-blue);flex:none;
  transition:background .4s var(--e-out),color .4s var(--e-out);
}
.dir__way:hover i{background:var(--dir-blue);color:#fff}
.dir__way i svg{width:22px;height:22px}
.dir__way b{
  display:block;padding-right:34px;font-family:var(--f-body);font-weight:400;
  font-size:.92rem;color:#7b8aa3;line-height:1.3;
}
.dir__way span span{
  display:block;font-family:var(--f-body);font-weight:500;
  font-size:0.8rem;letter-spacing:-.008em;color:var(--dir-ink);
  line-height:1.35;overflow-wrap:anywhere;
}

/* copy, and the confirmation it gives back */
.dir__cp{
  position:absolute;right:.5rem;top:.5rem;
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:0;border-radius:10px;background:transparent;cursor:pointer;
  color:#9fb0c6;opacity:0;
  transition:opacity .35s var(--e-out),color .35s var(--e-out),background .35s var(--e-out);
}
.dir__way:hover .dir__cp,.dir__cp:focus-visible{opacity:1}
.dir__cp:hover{background:rgba(4,131,206,.10);color:var(--dir-blue)}
.dir__cp:focus-visible{outline:2px solid var(--dir-blue);outline-offset:2px}
.dir__cp svg{width:16px;height:16px}
.dir__cp.is-done{opacity:1;color:var(--sd-accent)}
.dir__cp::after{
  content:"Copied";position:absolute;right:calc(100% + .3rem);
  font-family:var(--f-head);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--sd-accent);opacity:0;translate:4px 0;
  transition:opacity .3s var(--e-out),translate .3s var(--e-out);
  pointer-events:none;white-space:nowrap;
}
.dir__cp.is-done::after{opacity:1;translate:0 0}

/* save the contact as a card the phone understands */
.dir__vcf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:.1rem;padding:.72rem 1.05rem;border-radius:var(--r-pill);cursor:pointer;
  border:1px dashed rgba(4,131,206,.42);
  background:transparent;color:var(--dir-blue);
  font-family:var(--f-head);font-weight:600;font-size:.9rem;letter-spacing:-.01em;
  transition:background .4s var(--e-out),border-color .4s var(--e-out);
}
.dir__vcf:hover{background:rgba(4,131,206,.08);border-style:solid}
.dir__vcf:focus-visible{outline:2px solid var(--dir-blue);outline-offset:3px}
.dir__vcf svg{width:16px;height:16px}

/* responsive -------------------------------------------------------------- */
@media (max-width:1140px){
  .dir{grid-template-columns:auto minmax(0,1fr)}
  .dir__ways{
    grid-column:1 / -1;border-left:0;padding-left:0;padding-top:1.3rem;
    border-top:1px solid rgba(13,43,82,.10);min-width:0;
    grid-template-columns:minmax(0,1fr);
  }
  .dir__vcf{grid-column:1 / -1;justify-self:start}
}
@media (max-width:760px){
  .dir{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .dir__k{justify-content:center}
  .dir__k::after{display:none}
  .dir__ways{grid-template-columns:minmax(0,1fr);width:100%}
  .dir__way{text-align:left;gap:.7rem;padding:.75rem .85rem}
  .dir__way i{width:44px;height:44px;border-radius:14px}
  .dir__way i svg{width:19px;height:19px}
  .dir__way span span{font-size:.88rem}
  .dir__vcf{justify-self:stretch}
  .sd-dir__mol--b,.sd-dir__mol--c,.sd-dir__tube{display:none}
  .sd-dir__dna{opacity:.2}
}

@media (prefers-reduced-motion:reduce){
  .dir__way,.dir__cp,.dir__vcf,.dir::before,.dir__way i{transition:none}
}

/* Compact director CTA shared by every sector page: the invitation sits on
   the left and the sector contact card sits on the right. Page-specific copy,
   portraits, accent colours and contact details remain untouched. */
.sd .sector-cta{padding-block:clamp(3.4rem,6vw,5.5rem)}
.sd .sector-cta__in{
  grid-template-columns:minmax(0,.8fr) minmax(560px,1.2fr);
  align-items:center;justify-items:stretch;text-align:left;
  gap:clamp(2rem,5vw,5rem);
}
.sd .sector-cta__copy{display:grid;gap:clamp(1rem,2vw,1.55rem);align-content:center;min-width:0}
.sd .sector-cta__copy .d2{font-size:clamp(2.15rem,3.2vw,4.4rem);line-height:1.05}
.sd .sector-cta__copy .lede{margin:0;max-width:36ch;text-align:left}

.sd .sector-cta .dir{
  grid-template-columns:clamp(160px,15vw,215px) minmax(0,1fr);
  grid-template-rows:auto auto;gap:clamp(1rem,2.2vw,1.8rem);
  padding:clamp(1rem,1.8vw,1.5rem);border-radius:clamp(24px,2.5vw,34px);
}
.sd .sector-cta .dir__shot{
  grid-column:1;grid-row:1 / 3;width:100%;max-width:215px;
  align-self:stretch;aspect-ratio:1/1.12;border-radius:26px;padding:4px;
}
.sd .sector-cta .dir__shot img{border-radius:22px}
.sd .sector-cta .dir__body{grid-column:2;align-self:end}
.sd .sector-cta .dir__n{font-size:clamp(1.7rem,2.8vw,2.55rem)}
.sd .sector-cta .dir__r{font-size:clamp(1rem,1.45vw,1.25rem);margin-bottom:.65rem}
.sd .sector-cta .dir__ways{
  grid-column:2;align-self:start;width:100%;min-width:0;
  padding:1rem 0 0;border-left:0;border-top:1px solid rgba(13,43,82,.1);
}
.sd .sector-cta .dir__way{padding:.7rem .8rem;border-radius:18px;gap:.75rem}
.sd .sector-cta .dir__way i{width:46px;height:46px;border-radius:14px}

@media (max-width:1020px){
  .sd .sector-cta__in{grid-template-columns:1fr;gap:2.2rem}
  .sd .sector-cta__copy{justify-items:center;text-align:center}
  .sd .sector-cta__copy .d2{max-width:15ch}
  .sd .sector-cta__copy .lede{text-align:center}
  .sd .sector-cta .dir{width:min(760px,100%);justify-self:center}
}
@media (max-width:640px){
  .sd .sector-cta .dir{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center;text-align:center}
  .sd .sector-cta .dir__shot{grid-column:1;grid-row:auto;width:min(190px,62vw)}
  .sd .sector-cta .dir__body,.sd .sector-cta .dir__ways{grid-column:1}
  .sd .sector-cta .dir__ways{width:100%}
  .sd .sector-cta .dir__way{text-align:left}
}

/* a sector with no named director: just the team's email, in the same row the
   director card uses, between the heading and the closing line */
.cta-mail{
  --dir-blue:#0483ce;--dir-ink:#0d2b52;
  width:min(100%,560px);
  margin:clamp(.2rem,1vw,.8rem) 0 0;
}
.cta-mail .dir__way{width:100%;text-align:left}

/* a logo grid that closes its last row with empty tiles: ten logos plus two
   fill two rows of six or four of three; across two columns they are not needed */
@media (max-width:860px){.sd-grid--spacers > .sd-tile--e{display:none}}

/* ── Data Centres: the corridor on the map, with the two ring roads ───────
   The frame takes in the Regional Ring Road, so the shapes outside it are
   clipped and faded rather than left to spill across the page. */
.sd--dc .sd-map__svg{
  overflow:hidden;
  -webkit-mask:radial-gradient(closest-side,#000 82%,transparent 100%);
  mask:radial-gradient(closest-side,#000 82%,transparent 100%);
}
.sd--dc .sd-map__svg path.sd-rd{fill:none;pointer-events:none;stroke-linecap:round;stroke-linejoin:round}
.sd--dc .sd-map__svg path.sd-rd--orr{stroke:#EF6106;stroke-width:2.2}
.sd--dc .sd-map__svg path.sd-rd--rrr{stroke:#06A519;stroke-width:2.2;stroke-dasharray:6 5}
.sd-map__tag{
  position:absolute;left:var(--x);top:var(--y);z-index:2;pointer-events:none;
  display:flex;align-items:center;gap:.35rem;white-space:nowrap;
}
.sd-map__tag i{
  flex:none;width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px var(--sd-accent),0 2px 6px rgba(6,16,52,.3);
}
.sd-map__tag b{
  font-family:var(--f-head);font-size:.62rem;font-weight:500;letter-spacing:.02em;line-height:1;
  color:var(--ink);padding:.22rem .45rem;border-radius:5px;
  background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(6,16,52,.16);
}
.sd-map__tag--l{transform:translate(calc(-100% + 4px),-50%);flex-direction:row-reverse}
.sd-map__tag--r{transform:translate(-4px,-50%)}
.sd-map__tag--t{transform:translate(-4px,calc(-100% - 4px));flex-direction:column-reverse;align-items:flex-start;gap:.25rem}
.sd-map__tag--b{transform:translate(-4px,4px);flex-direction:column;align-items:flex-start;gap:.25rem}
.sd-map__tag--road{transform:translate(-50%,-50%)}
.sd-map__tag--road b{color:#fff;letter-spacing:.1em;background:#EF6106}
.sd-map__tag--road.sd-map__tag--l b{background:#06A519}
@media (max-width:680px){.sd-map__tag b{font-size:.56rem;padding:.18rem .36rem}}