/* /sectors/ — one page in place of sixteen.
   Palette is the site's own: deep navy, brand blue, mint. One accent, not a spectrum. */

.tgs{--navy:#06203F;--blue:#0B4EA2;--blue-lit:#2A7BE0;--teal:#106B62;--mint:#7EDDA4;
  --ink:#06203F;--green:#0E8A45;--line:#D7DEE8;--muted:#5A6B80;--tint:#F4F7FB;
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:'Manrope',system-ui,sans-serif;color:var(--ink)}
.tgs *,.tgs *::before,.tgs *::after{box-sizing:border-box}
.tgs-wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* The theme wraps content in a 20px gutter, which reads as a box floating on the page
   once the sections carry their own colour. Take it back for this page only. */
body.tgn-sectors .container-fluid{padding-left:0!important;padding-right:0!important}
body.tgn-sectors .row{margin-left:0!important;margin-right:0!important}
body.tgn-sectors .jupiterx-primary{padding-left:0!important;padding-right:0!important}
body.tgn-sectors .jupiterx-main{padding-top:0!important;padding-bottom:0!important}
/* The theme leaves a 16px strip between the header and the first section. It is not
   padding on any one wrapper, so every layer between the row and the content gets
   flattened rather than hunting for whichever one owns it. */
body.tgn-sectors .jupiterx-primary,
body.tgn-sectors .jupiterx-content,
body.tgn-sectors article.jupiterx-post,
body.tgn-sectors .jupiterx-post-body,
body.tgn-sectors .jupiterx-post-content{margin-top:0!important;padding-top:0!important;
  border-top:0!important}
body.tgn-sectors .jupiterx-primary::before,
body.tgn-sectors .jupiterx-content::before,
body.tgn-sectors .jupiterx-post-content::before{content:none!important;display:none!important}
body.tgn-sectors .jupiterx-post-header{display:none!important}

.tgs-eyebrow,.tgs-tag{display:inline-block;margin:0 0 16px;padding:7px 13px 6px;
  font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase}
.tgs-eyebrow{border:1px solid rgba(126,221,164,.40);background:rgba(126,221,164,.07);color:var(--mint)}
.tgs-tag{border:1px solid rgba(11,78,162,.26);background:rgba(11,78,162,.05);color:var(--blue)}

.tgs-h2{margin:0;font-size:clamp(27px,3.4vw,42px);line-height:1.14;font-weight:800;
  letter-spacing:-.02em;padding-block:.14em;margin-block:-.14em 0}
.tgs-h2 em{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:500;color:var(--blue)}
.tgs-lede{margin:18px 0 0;max-width:68ch;font-size:clamp(15.5px,1.5vw,17.5px);
  line-height:1.72;color:#2B3A4D}
.tgs-head{margin-bottom:clamp(30px,3.4vw,46px)}

/* --------------------------------------------------------------------- hero */
.tgs-hero{position:relative;overflow:hidden;color:#fff;
  padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px);
  background:linear-gradient(135deg,#06203F 0%,#0B4EA2 58%,#106B62 130%)}
.tgs-hero__bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 12%,rgba(126,221,164,.24),transparent 56%),
             radial-gradient(circle at 8% 88%,rgba(11,78,162,.5),transparent 60%)}
.tgs-hero .tgs-wrap{position:relative;z-index:1}
/* a line-height below the font's natural line box makes the glyph hang out of it at
   both ends; the padding gives descenders somewhere to go, the negative margin takes
   the space back off the layout */
.tgs-hero__title{margin:0;font-size:clamp(34px,5.4vw,66px);line-height:1.06;font-weight:800;
  letter-spacing:-.03em;color:#fff;overflow:hidden;padding-block:.2em;margin-block:calc(14px - .2em) 0}
.tgs-hero__title span{display:block;transform:translateY(110%);
  animation:tgsUp .9s var(--ease) .1s forwards}
@keyframes tgsUp{to{transform:none}}
.tgs-hero__sub{margin:20px 0 0;max-width:60ch;font-size:clamp(15.5px,1.6vw,18.5px);
  line-height:1.72;color:rgba(255,255,255,.84)}
.tgs-hero__kpis{list-style:none;display:grid;gap:1px;margin:clamp(32px,4vw,48px) 0 0;padding:0;
  grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.16)}
.tgs-hero__kpis li{display:flex;flex-direction:column;gap:5px;padding:18px 20px;
  background:linear-gradient(135deg,rgba(6,32,63,.34),rgba(11,78,162,.14))}
.tgs-hero__kpis b{font-size:clamp(21px,2.5vw,30px);font-weight:800;letter-spacing:-.02em;color:#fff}
.tgs-hero__kpis span{font-size:12.2px;line-height:1.45;color:rgba(255,255,255,.72)}

/* ----------------------------------------------------------------- sections */
.tgs-sect{padding:clamp(56px,6.5vw,92px) 0}
.tgs-sect--tint{background:var(--tint);border-block:1px solid var(--line)}

/* ---------------------------------------------------------------- explorer */
.tgs-ex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(26px,3.6vw,56px);align-items:center}

.tgs-orbit{position:relative;width:100%;max-width:560px;aspect-ratio:1;
  margin:0 auto;justify-self:center}
/* rings and spokes are one drawing, so they line up exactly and can be coloured together */
.tgs-web{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tgs-web__ring{fill:none}
.tgs-web__ring--in{stroke:rgba(11,78,162,.20);stroke-width:.35}
.tgs-web__ring--out{stroke:rgba(11,78,162,.14);stroke-width:.35}
.tgs-web__ring--rim{stroke:rgba(14,138,69,.20);stroke-width:.3;stroke-dasharray:1.2 2.4}
/* A spoke has to cross the ring to reach the outer sectors, which means it passes
   behind other sectors' labels. At full strength it cut straight through them, so it
   stays a hairline and the lit one is only a shade stronger. The label halo below does
   the rest of the work. */
.tgs-web__spoke{stroke:rgba(11,78,162,.10);stroke-width:.25;
  transition:stroke .35s var(--ease),stroke-width .35s var(--ease)}
.tgs-web__spoke.is-on{stroke:rgba(11,78,162,.34);stroke-width:.34}

/* the centre: navy disc, mint rim, and a marker that turns to face the open sector */
.tgs-orbit__hub{position:absolute;top:50%;left:50%;width:21%;height:21%;
  transform:translate(-50%,-50%);border-radius:50%}
.tgs-hub__pointer{position:absolute;inset:-13%;border-radius:50%;
  transform:rotate(var(--a,-90deg));transition:transform .55s var(--ease)}
.tgs-hub__pointer::after{content:'';position:absolute;top:50%;right:0;
  width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px rgba(14,138,69,.16)}
/* place-items:center on a two-row grid stretched the rows to the top and bottom of the
   circle, which is what opened that gap. A centred flex column sets them as one lockup. */
.tgs-hub__disc{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;border-radius:50%;
  background:var(--navy);text-align:center;
  box-shadow:0 20px 44px -20px rgba(6,32,63,.75),inset 0 0 0 1px rgba(126,221,164,.35),
             0 0 0 7px rgba(11,78,162,.06)}
.tgs-orbit__hub b{font-size:clamp(19px,2.4vw,29px);font-weight:800;letter-spacing:-.03em;
  line-height:.95;color:#fff}
.tgs-orbit__hub em{font-style:normal;font-size:8.4px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--mint);margin-top:4px;line-height:1}

.tgs-node{position:absolute;left:var(--x);top:var(--y);width:98px;
  padding:0;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transform:translate(-50%,-50%);z-index:2}
.tgs-node__dot{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#fff;border:1.5px solid rgba(11,78,162,.22);color:var(--blue);
  box-shadow:0 6px 16px -10px rgba(6,32,63,.4);
  transition:transform .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.tgs-node__dot svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.tgs-node__label{position:relative;font-size:11px;font-weight:700;line-height:1.28;
  color:var(--muted);text-align:center;transition:color .28s var(--ease);
  /* knocks a hole in whatever passes behind the words */
  text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 10px #fff}
.tgs-node:hover .tgs-node__dot{transform:scale(1.1);border-color:var(--blue)}
.tgs-node:hover .tgs-node__label{color:var(--ink)}
.tgs-node.is-on{z-index:3}
.tgs-node.is-on .tgs-node__dot{background:var(--blue);border-color:var(--blue);color:#fff;
  transform:scale(1.2);box-shadow:0 12px 26px -10px rgba(11,78,162,.65),
             0 0 0 6px rgba(11,78,162,.10)}
.tgs-node.is-on .tgs-node__label{color:var(--navy);font-weight:800}
.tgs-node:focus{outline:none}
.tgs-node:focus-visible .tgs-node__dot{box-shadow:0 0 0 3px rgba(11,78,162,.35)}

/* ------------------------------------------------------------------- panel */
/* Every card sits in the same grid cell, so the panel is always as tall as the tallest
   sector and switching one for another moves nothing else on the page. Hiding with
   display:none collapsed the box to each card's own height, which is what made the
   page jump. visibility:hidden keeps the height and still takes the card out of the
   tab order and the accessibility tree. */
.tgs-panel{position:relative;display:grid;padding:clamp(24px,2.8vw,36px);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -46px rgba(6,32,63,.42)}
.tgs-card{grid-area:1 / 1;visibility:hidden;opacity:0;
  transition:opacity .38s var(--ease),transform .38s var(--ease);transform:translateY(8px)}
.tgs-card.is-on{visibility:visible;opacity:1;transform:none}
.tgs-card[hidden]{display:none}          /* only before the script runs */
/* the three families are told apart by weight of brand colour, not by three hues */
.tgs-card__grp{display:inline-block;margin:0 0 12px;padding:5px 10px 4px;font-size:10.5px;
  font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--blue);background:rgba(11,78,162,.07);border:1px solid rgba(11,78,162,.22)}
.tgs-card__grp--life{color:var(--green);background:rgba(14,138,69,.07);
  border-color:rgba(14,138,69,.22)}
.tgs-card__grp--industry{color:var(--navy);background:rgba(6,32,63,.06);
  border-color:rgba(6,32,63,.2)}
.tgs-card__name{margin:0;font-size:clamp(21px,2.4vw,29px);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;padding-bottom:.06em}
.tgs-card__lede{margin:12px 0 0;font-size:15.4px;line-height:1.72;color:#2B3A4D}

.tgs-metrics{list-style:none;display:grid;gap:1px;margin:22px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--line)}
.tgs-metrics li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--tint)}
.tgs-metrics b{font-size:clamp(19px,2.1vw,25px);font-weight:800;letter-spacing:-.02em;color:var(--blue)}
.tgs-metrics span{font-size:11.8px;line-height:1.45;color:var(--muted)}

/* The two blocks run alongside each other instead of one after the other, and the
   policy note sits under the tags rather than adding its own band at the bottom. On
   the longest sector that is about 180px of height that the other fourteen were being
   made to carry. */
.tgs-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,30px);margin-top:24px}
.tgs-blk{min-width:0}
.tgs-blk h4{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--muted)}
/* In a half-width column a boxed tag takes a whole row each, which is both taller and
   messier than a plain line. Same list treatment as the column beside it, different
   marker so the two still read as different kinds of thing. */
.tgs-tags{list-style:none;margin:0;padding:0}
.tgs-tags li{position:relative;padding-left:19px;margin-bottom:7px;
  font-size:13.3px;line-height:1.5;color:#2B3A4D}
.tgs-tags li::before{content:'';position:absolute;left:0;top:.48em;width:8px;height:8px;
  background:var(--blue)}
/* and the ecosystem flows into two columns rather than one long run */
.tgs-here{list-style:none;margin:0;padding:0}
.tgs-here li{position:relative;padding-left:19px;margin-bottom:7px;
  font-size:13.3px;line-height:1.5;color:#2B3A4D}
.tgs-here li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;
  border:1.5px solid var(--green);border-radius:50%}
.tgs-card__note{margin:16px 0 0;padding:11px 13px;background:var(--tint);
  border-left:3px solid var(--blue);font-size:12.6px;line-height:1.6;color:var(--muted)}
.tgs-card__thin{margin:14px 0 0;padding:12px 14px;border:1px dashed var(--line);
  font-size:12.8px;line-height:1.6;color:var(--muted)}

/* ------------------------------------------------------------------- chips */
.tgs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3vw,38px)}
.tgs-chip{padding:9px 15px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);
  transition:border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease),
             box-shadow .22s var(--ease)}
.tgs-chip:hover{border-color:var(--blue);color:var(--blue)}
.tgs-chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 8px 18px -10px rgba(11,78,162,.75)}
.tgs-chip:focus{outline:none}
.tgs-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ------------------------------------------------------------- common ground */
.tgs-ground{position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,1.8vw,26px)}

/* the line the five are strung on: it draws across as the section arrives */
.tgs-ground__rail{position:absolute;left:6%;right:6%;top:31px;height:2px;
  background:linear-gradient(90deg,rgba(11,78,162,.30),rgba(14,138,69,.30));
  transform-origin:0 50%;
  transition:transform 1.15s cubic-bezier(.22,.61,.36,1) .15s}
.tgs-sect--tint.js-reveal .tgs-ground__rail{transform:scaleX(0)}
.tgs-sect.is-in .tgs-ground__rail{transform:scaleX(1)}

.tgs-found{position:relative;padding-top:0;
  transition:opacity .6s var(--ease) calc(.25s + var(--i) * 110ms),
             transform .6s var(--ease) calc(.25s + var(--i) * 110ms)}
.tgs-sect--tint.js-reveal .tgs-found{opacity:0;transform:translateY(14px)}
.tgs-sect.is-in .tgs-found{opacity:1;transform:none}

/* the numeral sits behind the badge as a watermark, not as a label to read */
.tgs-found__num{position:absolute;top:-14px;left:34px;z-index:0;
  font-size:clamp(38px,4.4vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1;
  color:rgba(6,32,63,.07);pointer-events:none;font-variant-numeric:tabular-nums}

.tgs-found__badge{position:relative;z-index:1;display:grid;place-items:center;
  width:62px;height:62px;border-radius:50%;background:#fff;color:var(--blue);
  border:1.5px solid rgba(11,78,162,.22);
  box-shadow:0 10px 22px -14px rgba(6,32,63,.5);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(.3s + var(--i) * 110ms),
             opacity .4s var(--ease) calc(.3s + var(--i) * 110ms),
             background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.tgs-sect--tint.js-reveal .tgs-found__badge{transform:scale(.72);opacity:0}
.tgs-sect.is-in .tgs-found__badge{transform:scale(1);opacity:1}
.tgs-found__badge svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.tgs-found h3{margin:18px 0 8px;font-size:17.5px;font-weight:800;letter-spacing:-.01em;
  transition:color .3s var(--ease)}
.tgs-found p{margin:0;font-size:13.8px;line-height:1.68;color:var(--muted)}

.tgs-found:hover .tgs-found__badge{background:var(--navy);border-color:var(--navy);
  color:var(--mint);transform:scale(1.06)}
.tgs-found:hover h3{color:var(--blue)}

/* --------------------------------------------------------------------- cta */
.tgs-cta{position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:clamp(52px,6vw,84px) 0;
  background:linear-gradient(135deg,#06203F 0%,#0B4EA2 62%,#106B62 130%)}
.tgs-cta::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 78% 14%,rgba(126,221,164,.24),transparent 58%)}
.tgs-cta .tgs-wrap{position:relative;z-index:1}
.tgs-cta__title{margin:0;font-size:clamp(25px,3.2vw,40px);font-weight:800;letter-spacing:-.02em;
  line-height:1.18;color:#fff;padding-block:.1em}
.tgs-cta__title em{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:500;
  color:var(--mint)}
.tgs-cta__sub{margin:14px auto 0;max-width:56ch;font-size:15.5px;line-height:1.7;
  color:rgba(255,255,255,.82)}
.tgs-cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.tgs-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;
  font-size:14.5px;font-weight:800;text-decoration:none;
  transition:background .26s var(--ease),transform .26s var(--ease),color .26s var(--ease)}
.tgs-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.tgs-btn--primary{background:var(--green);color:#fff}
.tgs-btn--primary:hover{background:#0A6B35;transform:translateY(-2px);color:#fff}
.tgs-btn--ghost{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.34);color:#fff}
.tgs-btn--ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);color:#fff}

/* ------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .tgs-ex{grid-template-columns:1fr}
  .tgs-orbit{max-width:480px}
}
@media (max-width:960px){
  .tgs-ground{grid-template-columns:repeat(2,1fr);gap:26px 22px}
  .tgs-ground__rail{display:none}
}
@media (max-width:760px){
  /* below this the ring cannot hold fifteen labels without collapsing into noise,
     so the chips take over as the way in and the ring steps aside */
  .tgs-orbit{display:none}
  .tgs-chips{margin-top:0}
  .tgs-hero__kpis{grid-template-columns:repeat(2,1fr)}
  .tgs-cols{grid-template-columns:1fr}
}
@media (max-width:420px){
  .tgs-hero__kpis{grid-template-columns:1fr}
  .tgs-ground{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tgs-hero__title span{transform:none;animation:none}
  .tgs-hub__pointer,.tgs-web__spoke{transition:none}
  .tgs-card,.tgs-found,.tgs-found__badge{animation:none;opacity:1;transform:none;
    transition:none}
  .tgs-ground__rail{transform:scaleX(1);transition:none}
  .tgs-orbit__beam,.tgs-orbit__glow{transition:none}
}