/* =====================================================================================================
   t-sectors.css (hand-written, 21 Oct 2026): the "sectors" template, "the sector atlas".
   Pages: /en-us|en-gb|en-in/sectors/ (hub) and /en-xx/sectors/<slug>/ (12 sector pages).
   Prefix sx- (sc- belongs to the poll cards). Loads after wine-chrome.css and wine-base.css.
   Designed at 1440; the phone / tablet rules sit in max-width queries at the end (wine-base.css breakpoints).
   Atlas colours (the four groups) are decorative only: text never takes them.
   ===================================================================================================== */

/* ---------- hero (both page kinds) ---------- */
.sx-hero { padding-bottom: 96px; }
.sx-hero__vis { position: relative; min-width: 0; }
.sx-hub-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.sx-hub-h1 { font-size: 58px; line-height: 64px; letter-spacing: -1.3px; }
.sx-hero--hub .wn-lead { max-width: 520px; }
.sx-hub-stats { margin-top: 30px; max-width: 540px; }
.sx-hub-stats .wn-stat { min-width: 120px; }
.sx-hub-stats .wn-stat b { font-size: 52px; }

/* sector page h1: "Market research for" + the sector's name */
.sx-h1 { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; }
.sx-h1__pre { font: 500 26px/32px var(--display); letter-spacing: -.3px; color: rgba(255,255,255,.82); }
.sx-h1__name { font: 500 66px/70px var(--display); letter-spacing: -1.6px; color: #fff; max-width: 680px; }
.sx-need { font: 400 27px/37px var(--display); letter-spacing: -.3px; color: var(--mint); max-width: 600px; }
.sx-need::before { content: ""; display: block; width: 56px; height: 2px; margin-bottom: 20px; border-radius: 2px;
  background: linear-gradient(90deg, #d6335e, #ffb3c7); }
.sx-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }

/* the coordinates bar (its own dark glass, so its small text keeps 4.5:1 over the hero's crimson glow) */
.sx-coords { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 64px 0 0; border-radius: 18px;
  background: rgba(20, 4, 15, .62); border: 1px solid rgba(255,179,199,.2); box-shadow: 0 18px 40px rgba(10,2,8,.35);
  backdrop-filter: blur(6px); }
.sx-coords > div { display: flex; flex-direction: column; gap: 6px; padding: 18px 28px; min-width: 0; }
.sx-coords > div + div { border-left: 1px solid rgba(255,179,199,.18); }
.sx-coords dt { font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.sx-coords dd { margin: 0; font: 500 18px/26px var(--display); color: #fff; }
.sx-coords .sx-sep { color: var(--mint); }

/* ---------- the atlas ---------- */
.sx-atlas { position: relative; width: 100%; }
.sx-atlas--hub { aspect-ratio: 780 / 600; }
.sx-atlas--plate { aspect-ratio: 1 / 1; }
.sx-atlas__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-grid { fill: none; stroke: rgba(255,179,199,.16); stroke-width: 1; stroke-dasharray: 3 6; }
.sx-ring { fill: none; stroke: rgba(255,179,199,.2); stroke-width: 1; }
.sx-ring--out { stroke: rgba(255,179,199,.12); stroke-dasharray: 2 5; }
.sx-arc { fill: none; stroke: var(--g); stroke-width: 3; stroke-linecap: round; opacity: .62; transition: opacity .35s ease, stroke-width .35s ease; }
.sx-arc.is-cur { opacity: 1; stroke-width: 5; filter: drop-shadow(0 0 6px rgba(232,70,111,.7)); }
.sx-spoke { stroke: rgba(255,179,199,.2); stroke-width: 1.2; transition: stroke .3s ease, stroke-width .3s ease; }
.sx-spoke.is-cur { stroke: #ffb3c7; stroke-width: 2.6; filter: drop-shadow(0 0 4px rgba(232,70,111,.9)); }
.sx-spoke.is-hot { stroke: #ffb3c7; stroke-width: 2; }
.sx-core { stroke: rgba(255,179,199,.32); stroke-width: 1; }
.sx-tick { opacity: .9; }

/* the centre (aria-hidden: the links carry the names) */
.sx-atlas__c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center; pointer-events: none; }
.sx-atlas--hub .sx-atlas__c { width: 21%; }
.sx-atlas--plate .sx-atlas__c { width: 26%; }
.sx-atlas__c b { font: 500 46px/1 var(--display); letter-spacing: -1px; color: #fff; }
.sx-atlas__c span { font: 500 13px/17px var(--text); color: rgba(255,255,255,.82); }
.sx-atlas__c.is-name b { font: 500 17px/22px var(--display); letter-spacing: -.2px; }
.sx-atlas__c.is-name span { font-size: 12px; line-height: 16px; color: var(--mint); }
.sx-atlas--plate .sx-atlas__c b { font-size: 40px; }
/* the plate's centre: the sector's icon (QA 21 Oct: replaces its ordinal) */
.sx-atlas__c .sx-atlas__ico { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%;
  background: rgba(255,179,199,.14); border: 1px solid rgba(255,179,199,.32); color: #fff; }
.sx-atlas--plate .sx-atlas__c.is-name { width: 30%; }
.sx-atlas--plate .sx-atlas__c.is-name b { font-size: 15px; line-height: 19px; letter-spacing: -.1px; }

/* nodes: links placed on the circle (percent of the box) */
.sx-atlas__nav, .sx-atlas__nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.sx-node { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
/* the link is a 44px hit box centred on the point; the dot and the name sit inside / beside it */
.sx-node > a { position: absolute; left: -22px; top: -22px; display: block; width: 44px; height: 44px; border-radius: 50%; color: #fff; text-decoration: none; }
.sx-node__dot { position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--g);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--g) 22%, transparent), 0 0 18px color-mix(in srgb, var(--g) 50%, transparent);
  transition: transform .35s var(--wn-ease-out), box-shadow .35s ease; }
.sx-node__l { position: absolute; top: 22px; transform: translateY(-50%); width: max-content; max-width: 148px;
  font: 600 14px/18px var(--text); color: #fff; transition: color .25s ease; }
.sx-node--r .sx-node__l { left: 40px; text-align: left; }
.sx-node--l .sx-node__l { right: 40px; text-align: right; }
.sx-node > a:hover .sx-node__dot, .sx-node > a:focus-visible .sx-node__dot { transform: scale(1.35);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--g) 30%, transparent), 0 0 26px var(--g); }
.sx-node > a:hover .sx-node__l, .sx-node > a:focus-visible .sx-node__l { color: var(--mint); }
.sx-node > a:focus-visible { outline: none; }
.sx-node > a:focus-visible .sx-node__dot { outline: 2px solid #fff; outline-offset: 4px; }
.sx-atlas--hub.is-hot .sx-node:not(.is-hot) .sx-node__l { color: rgba(255,255,255,.8); }
.sx-node.is-dim .sx-node__dot { transform: scale(.7); opacity: .45; }
.sx-node.is-dim .sx-node__l { color: rgba(255,255,255,.72); }

/* group names in the hub atlas corners (filter links) */
.sx-atlas__g { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(20,4,15,.55); border: 1px solid rgba(255,179,199,.22); font: 600 13px/16px var(--text); color: #fff;
  text-decoration: none; transition: background-color .25s ease, border-color .25s ease; }
.sx-atlas__g i { width: 18px; height: 3px; border-radius: 3px; background: var(--g); }
.sx-atlas__g span { color: var(--mint); font-variant-numeric: tabular-nums; }
.sx-atlas__g:hover, .sx-atlas__g:focus-visible, .sx-atlas__g.is-on { background: rgba(74,18,56,.9); border-color: rgba(255,179,199,.5); }
.sx-atlas__g:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sx-atlas__g--1 { left: 0; top: 0; }
.sx-atlas__g--2 { right: 0; top: 0; }
.sx-atlas__g--3 { right: 0; bottom: 0; }
.sx-atlas__g--4 { left: 0; bottom: 0; }

/* the plate (sector pages): glass card, names on hover / focus, this sector lit */
.sx-plate { position: relative; padding: 22px 26px 22px; border-radius: 30px; background: rgba(26,6,22,.58);
  border: 1px solid rgba(255,179,199,.22); box-shadow: 0 30px 70px rgba(10,2,8,.45), inset 0 0 60px rgba(232,70,111,.08);
  backdrop-filter: blur(8px); }
.sx-plate__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.sx-plate__k { font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.sx-atlas--plate { margin: 0 auto; max-width: 470px; }
.sx-atlas--plate .sx-node__dot { left: 15px; top: 15px; width: 14px; height: 14px; }
.sx-atlas--plate .sx-node__l, .sx-atlas--plate .sx-node--r .sx-node__l, .sx-atlas--plate .sx-node--l .sx-node__l {
  top: auto; bottom: 38px; transform: translateY(6px); max-width: none; white-space: nowrap; text-align: left;
  padding: 6px 11px; border-radius: 9px; background: rgba(20,4,15,.94); border: 1px solid rgba(255,179,199,.32);
  font-size: 13px; line-height: 16px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .3s var(--wn-ease-out); z-index: 2; }
/* the name grows towards the centre of the plate, so it never leaves the card */
.sx-atlas--plate .sx-node--r .sx-node__l { left: auto; right: 4px; }
.sx-atlas--plate .sx-node--l .sx-node__l { left: 4px; right: auto; }
.sx-atlas--plate .sx-node--b .sx-node__l { bottom: auto; top: 38px; transform: translateY(-6px); }
.sx-atlas--plate .sx-node > a:hover .sx-node__l, .sx-atlas--plate .sx-node > a:focus-visible .sx-node__l,
.sx-atlas--plate .sx-node.is-cur .sx-node__l { opacity: 1; transform: none; }
.sx-node.is-cur .sx-node__dot { left: 10px; top: 10px; width: 24px; height: 24px; background: #fff;
  box-shadow: 0 0 0 6px rgba(255,179,199,.35), 0 0 32px rgba(232,70,111,.9); }
.sx-atlas--plate .sx-node--b.is-cur .sx-node__l { bottom: auto; top: 42px; }
.sx-atlas--plate .sx-node.is-cur:not(.sx-node--b) .sx-node__l { bottom: 42px; }
.sx-atlas--plate .sx-node.is-cur .sx-node__l { background: #fff; color: var(--ink); border-color: #fff; font-weight: 700; }
.sx-node.is-cur .sx-node__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #ffb3c7; opacity: 0; }
html.wm-on .sx-node.is-cur .sx-node__dot::after { animation: sx-ping 2.6s var(--wm-ease, ease) infinite; }
@keyframes sx-ping { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.sx-plate__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; padding: 14px 0 0; list-style: none;
  border-top: 1px solid rgba(255,179,199,.16); }
.sx-plate__legend li { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/18px var(--text); color: rgba(255,255,255,.8); }
.sx-plate__legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--g); }
.sx-plate__legend li.is-cur { color: #fff; font-weight: 700; }
.sx-plate__legend li.is-cur i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 30%, transparent); }

/* the atlas draws itself once on load (motion on only; static = fully drawn) */
html.wm-on .sx-atlas .sx-arc, html.wm-on .sx-atlas .sx-spoke { stroke-dasharray: 1 1; animation: sx-draw 1.3s var(--wm-ease, ease) both;
  animation-delay: calc(var(--i, 0) * 70ms + 350ms); }
html.wm-on .sx-atlas .sx-arc { animation-duration: 1.6s; animation-delay: calc(var(--i, 0) * 140ms + 200ms); }
html.wm-on .sx-atlas .sx-node { animation: sx-pop .7s var(--wm-ease, ease) backwards; animation-delay: calc(var(--i, 0) * 70ms + 700ms); }
html.wm-on .sx-atlas .sx-atlas__g { animation: sx-fade .8s ease backwards; animation-delay: 1.2s; }
@keyframes sx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sx-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes sx-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the statement that fills in as it scrolls ---------- */
.sx-why { padding: 128px 0; }
.sx-why__in { display: flex; flex-direction: column; gap: 26px; }
.sx-fill { max-width: 1120px; font: 500 46px/58px var(--display); letter-spacing: -.9px; color: var(--ink); }
.sx-why--hub { padding: 120px 0 112px; }
/* words not yet filled: #9d8592 is 3.4:1 on white (large text needs 3:1; QA 21 Oct: #c9b6bf was 1.9:1) */
html.wm-on .sx-fill.sx-js .sx-w { color: #9d8592; transition: color .45s ease; }
html.wm-on .sx-fill.sx-js .sx-w.is-lit { color: var(--ink); }

/* ---------- hub: the groups ---------- */
.sx-groups { background: var(--wn-page); }
.sx-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: -16px 0 40px; }
.sx-chip { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--wn-line); font: 600 15px/1 var(--text); color: var(--ink); text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .3s var(--wn-ease-out); }
.sx-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--g); }
.sx-chip b { min-width: 30px; height: 30px; padding: 0 9px; display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--wn-rose-10); font: 700 13px/1 var(--text); color: var(--wn-deep); }
.sx-chip:hover { border-color: var(--wn-rose-20); transform: translateY(-2px); }
.sx-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.sx-chip.is-on b { background: rgba(255,255,255,.16); color: #fff; }
.sx-chip:focus-visible { outline: 2px solid var(--wn-link); outline-offset: 3px; }

.sx-gcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sx-gcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 28px; padding: 40px 40px 28px;
  border-radius: var(--wn-r-lg); background: #fff; border: 1px solid var(--wn-line); scroll-margin-top: 150px;
  transition: box-shadow .45s var(--wn-ease-out), border-color .3s ease; }
.sx-gcard:hover { box-shadow: var(--wn-shadow); border-color: var(--wn-rose-20); }
.sx-gcard[hidden] { display: none; }
.sx-gcard__arc { position: absolute; z-index: -1; right: -120px; top: -120px; width: 300px; height: 300px; border-radius: 50%;
  border: 22px solid var(--g); opacity: .08; }
.sx-gcard__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t q" "n l q"; column-gap: 20px; row-gap: 6px;
  align-items: start; }
.sx-gcard__n { grid-area: n; font: 500 52px/1 var(--display); letter-spacing: -1.4px; color: var(--g); font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 0; }
.sx-gcard__t { grid-area: t; font: 500 32px/38px var(--display); letter-spacing: -.5px; color: var(--ink); }
.sx-gcard__line { grid-area: l; font: 400 16px/24px var(--text); color: var(--grey70); max-width: 440px; }
.sx-quad { grid-area: q; color: var(--ink); }
.sx-srows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wn-line); }
.sx-srows > li { border-bottom: 1px solid var(--wn-line); }
.sx-srows > li:last-child { border-bottom: 0; }
.sx-srow { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 28px; column-gap: 18px; align-items: start;
  padding: 22px 14px 22px 10px; margin: 0 -14px 0 -10px; border-radius: 18px; color: var(--body); text-decoration: none;
  transition: background-color .3s ease; }
.sx-srow:hover, .sx-srow:focus-visible { background: var(--wn-rose-10); }
.sx-srow:focus-visible { outline: 2px solid var(--wn-link); outline-offset: 2px; }
.sx-srow__ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--wn-rose-10); color: var(--wn-link);
  transition: background-color .3s ease, color .3s ease; }
.sx-srow:hover .sx-srow__ico { background: var(--wn-btn); color: #fff; }
.sx-srow__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sx-srow__txt > b { font: 500 22px/28px var(--display); letter-spacing: -.3px; color: var(--ink); }
.sx-srow__txt > span:not(.sx-srow__chips) { font: 400 16px/24px var(--text); color: var(--grey70); }
.sx-srow__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sx-srow__chips i { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--wn-page);
  border: 1px solid var(--wn-line); font: 600 12px/1 var(--text); font-style: normal; color: var(--wn-deep); }
.sx-srow__chips i.sx-more { background: transparent; color: var(--grey70); }
.sx-srow__go { margin-top: 12px; color: var(--wn-link); transition: transform .35s var(--wn-ease-out); }
.sx-srow:hover .sx-srow__go { transform: translateX(5px); }
/* one group chosen: its card takes the full width and its sectors sit side by side */
.sx-gcards.is-single { grid-template-columns: minmax(0, 1fr); }
.sx-gcards.is-single .sx-srows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 0; }
.sx-gcards.is-single .sx-srows > li { border: 0; border-top: 1px solid var(--wn-line); }
.sx-gcards.is-single .sx-srow { grid-template-columns: minmax(0, 1fr) 28px; grid-template-rows: auto auto; row-gap: 16px; padding: 26px 16px; margin: 0 -16px; }
.sx-gcards.is-single .sx-srow__ico { grid-column: 1; }
.sx-gcards.is-single .sx-srow__txt { grid-column: 1 / -1; }
.sx-gcards.is-single .sx-srow__go { grid-column: 2; grid-row: 1; margin-top: 14px; }
.sx-gcards.is-single .sx-gcard { animation: sx-rise .6s var(--wn-ease-out); }
@keyframes sx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- hub: sector experience marquee ---------- */
.sx-exp { background: #fff; overflow: hidden; }
.sx-exp__head { margin-bottom: 40px; }
.sx-exp__mq { padding: 6px 0; }
.sx-exp__mq .wn-marquee__track { gap: 0; margin: 0; padding: 0; list-style: none; }
.sx-exp__mq li { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }
.sx-exp__mq li span { font: 500 52px/1.2 var(--display); letter-spacing: -1.2px; color: var(--ink); padding: 0 34px; }
.sx-exp__mq li:nth-child(2n) span { color: var(--wn-link); }
.sx-exp__mq li i { width: 12px; height: 12px; border-radius: 50%; background: var(--wn-rose-20); }
/* pause / play (shown by t-sectors.js only while the row loops: keyboard and touch users can stop it, WCAG 2.2.2) */
.sx-exp__ctl { display: flex; justify-content: flex-end; margin-top: 18px; }
.sx-exp__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--wn-line); font: 600 14px/1 var(--text); color: var(--ink); cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease; }
.sx-exp__btn[hidden] { display: none; }
.sx-exp__btn:hover { border-color: var(--wn-rose-20); background: var(--wn-page); }
.sx-exp__btn:focus-visible { outline: 2px solid var(--wn-link); outline-offset: 3px; }
.sx-exp__bi { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--wn-btn); }
/* the pause glyph (two bars); paused: a play triangle */
.sx-exp__bi::before, .sx-exp__bi::after { content: ""; position: absolute; top: 8px; width: 3px; height: 10px; border-radius: 1px; background: #fff; }
.sx-exp__bi::before { left: 9px; }
.sx-exp__bi::after { left: 14px; }
.sx-exp.is-paused .sx-exp__bi::after { display: none; }
.sx-exp.is-paused .sx-exp__bi::before { left: 10px; top: 7px; width: 0; height: 0; border-radius: 0; background: none;
  border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff; }
html .sx-exp.is-paused .wn-marquee.is-looping .wn-marquee__track { animation-play-state: paused !important; }

/* still (reduced motion, no JavaScript, ?static=1, or wine-motion.js disarmed): the ten names wrap in place, all
   readable, no edge fade (QA 21 Oct: the stopped row showed three names and hid seven past the right edge) */
html:not(.wm-on):not(.wm-lite) .sx-exp__mq { -webkit-mask-image: none; mask-image: none; padding: 0; }
html:not(.wm-on):not(.wm-lite) .sx-exp__mq .wn-marquee__track { width: auto; max-width: 1980px; margin: 0 auto; padding: 0 max(0px, calc(7% - 22px));
  flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; transform: none; animation: none; }
html:not(.wm-on):not(.wm-lite) .sx-exp__mq li[aria-hidden="true"] { display: none; }
html:not(.wm-on):not(.wm-lite) .sx-exp__mq li span { font-size: 34px; padding: 0 22px; }
html:not(.wm-on):not(.wm-lite) .sx-exp__mq li i { display: none; }
html:not(.wm-on):not(.wm-lite) .sx-exp__ctl { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sx-exp__mq { -webkit-mask-image: none; mask-image: none; padding: 0; }
  .sx-exp__mq .wn-marquee__track { width: auto; max-width: 1980px; margin: 0 auto; padding: 0 max(0px, calc(7% - 22px));
    flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; transform: none; }
  .sx-exp__mq li[aria-hidden="true"] { display: none; }
  .sx-exp__mq li span { font-size: 34px; padding: 0 22px; }
  .sx-exp__mq li i { display: none; }
  .sx-exp__ctl { display: none; }
}

/* ---------- sector page: the landscape ---------- */
.sx-land__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 88px; align-items: start; }
.sx-land__h { margin-bottom: 40px; }
.sx-land__prose p { font: 400 19px/31px var(--text); color: var(--body); }
.sx-land__prose p + p { margin-top: 20px; }
.sx-land__prose .sx-land__lead { font: 400 26px/38px var(--display); letter-spacing: -.3px; color: var(--ink); }
.sx-forces { padding: 28px 30px; border-radius: var(--wn-r); background: var(--wn-page); border: 1px solid var(--wn-line); }
.sx-forces__h { margin-bottom: 14px; font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--wn-link); }
.sx-forces__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.sx-forces__list li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--wn-line);
  font: 500 19px/26px var(--display); letter-spacing: -.2px; color: var(--ink); }
.sx-forces__list li:first-child { border-top: 0; }
.sx-force__n { font: 600 13px/1 var(--text); color: var(--wn-link); font-variant-numeric: tabular-nums; min-width: 22px; }

/* ---------- sector page: the question board ---------- */
.sx-board { background-color: var(--wn-plum);
  background-image: radial-gradient(60% 50% at 100% 0%, rgba(214,51,94,.22), rgba(214,51,94,0) 70%),
    linear-gradient(rgba(255,179,199,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,179,199,.055) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px; }
.sx-board__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
/* the side column stretches to the questions' height so its inner block has room to stick (QA 21 Oct: with the grid's
   align-items: start it was only as tall as its content and scrolled away from Q3 on) */
.sx-board__side { align-self: stretch; }
.sx-board__stick { position: sticky; top: 160px; }
.sx-board__head { margin-bottom: 36px; }
/* the heading sits in the narrow column: a size down and balanced lines (QA 21 Oct: 3-4 lines, a lone "us" at the end) */
.sx-board__head .wn-h2 { font-size: 40px; line-height: 46px; letter-spacing: -.7px; text-wrap: balance; }
.sx-board__h { margin-bottom: 12px; font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.sx-board__studies { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sx-board__study { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,179,199,.14); transition: background-color .35s ease, border-color .35s ease; }
.sx-board__study a { display: inline-flex; align-items: center; gap: 12px; font: 600 16px/22px var(--text); color: #fff; text-decoration: none; }
.sx-board__study a:hover { color: var(--mint); }
.sx-board__si { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255,179,199,.12); color: var(--mint);
  transition: background-color .35s ease, color .35s ease; }
.sx-board__qn { font: 600 12px/1 var(--text); letter-spacing: .04em; color: var(--mint); white-space: nowrap; }
.sx-board__study.is-on { background: rgba(214,51,94,.22); border-color: rgba(255,179,199,.5); }
.sx-board__study.is-on .sx-board__si { background: var(--wn-btn); color: #fff; }
.sx-qs { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.sx-q { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 44px 0 46px; border-top: 1px solid rgba(255,179,199,.2);
  transition: opacity .5s ease; }
.sx-q:last-child { border-bottom: 1px solid rgba(255,179,199,.2); }
.sx-q__n { display: inline-flex; align-items: center; gap: 12px; font: 600 14px/18px var(--text); letter-spacing: .1em; color: var(--mint); }
.sx-q__n::after { content: ""; width: 40px; height: 1px; background: rgba(255,179,199,.5); }
.sx-q__t { font: 500 34px/44px var(--display); letter-spacing: -.6px; color: #fff; max-width: 680px; }
.sx-q__go { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px 6px 18px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,179,199,.3); color: #fff; text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease; }
.sx-q__go span { font: 500 14px/18px var(--text); color: rgba(255,255,255,.82); }
.sx-q__go b { font: 600 15px/18px var(--text); color: #fff; }
.sx-q__arr { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--wn-btn); color: #fff; transition: transform .35s var(--wn-ease-out); }
.sx-q__go:hover { background: rgba(255,255,255,.14); border-color: var(--mint); }
.sx-q__go:hover .sx-q__arr { transform: translateX(3px); }
.sx-q__go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* desktop motion: the question at the middle of the screen is lit, the others rest */
html.wm-on .sx-board.sx-js .sx-q:not(.is-on) { opacity: .62; }

/* ---------- sector page: the studies ---------- */
.sx-studies { display: grid; gap: 24px; }
.sx-studies--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-studies--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-study { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-height: 300px;
  padding: 30px 30px 80px; border-radius: var(--wn-r); background: #fff; border: 1px solid var(--wn-line); color: var(--body); text-decoration: none;
  transition: transform .45s var(--wn-ease-out), box-shadow .45s var(--wn-ease-out), border-color .3s ease; }
.sx-study::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #b4235a, #e8466f 60%, #ffb3c7);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--wn-ease-out); }
.sx-study:hover { transform: translateY(-6px); box-shadow: var(--wn-shadow); border-color: var(--wn-rose-20); }
.sx-study:hover::before, .sx-study:focus-visible::before { transform: scaleX(1); }
.sx-study:focus-visible { outline: 2px solid var(--wn-link); outline-offset: 3px; }
.sx-study__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sx-study__k { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--wn-link); padding-top: 4px; }
.sx-study__ico { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--wn-rose-10); color: var(--wn-link);
  transition: background-color .3s ease, color .3s ease; }
.sx-study:hover .sx-study__ico { background: var(--wn-btn); color: #fff; }
.sx-study__t { font: 500 27px/33px var(--display); letter-spacing: -.4px; color: var(--ink); }
.sx-study__d { font: 400 16px/25px var(--text); color: var(--grey70); max-width: 420px; }
.sx-study__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 16px; border-top: 1px dashed var(--wn-line); }
.sx-study__mk { margin-right: 4px; font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--grey70); }
.sx-study__m i { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--wn-page);
  border: 1px solid var(--wn-line); font: 600 12px/1 var(--text); font-style: normal; color: var(--ink); }
.sx-study__foot { position: absolute; left: 30px; right: 30px; bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sx-study__go { color: var(--wn-link); transition: transform .35s var(--wn-ease-out); }
.sx-study:hover .sx-study__go { transform: translateX(6px); }
.sx-study__q { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--wn-rose-10);
  font: 600 12px/1 var(--text); letter-spacing: .04em; color: var(--wn-deep); }
.sx-studies--2 .sx-study { min-height: 280px; }
.sx-studies--2 .sx-study__t { font-size: 32px; line-height: 38px; }

/* ---------- how we work: the rail ---------- */
.sx-rail-sec { overflow: hidden; }
.sx-rail-sec__glow { position: absolute; z-index: 0; left: -10%; top: 10%; width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214,51,94,.32), rgba(214,51,94,0)); }
.sx-rail-sec .wrap { position: relative; z-index: 1; }
.sx-rail { position: relative; }
.sx-rail__line { position: absolute; left: 0; right: 0; top: 27px; width: 100%; height: 4px; overflow: visible; }
.sx-rail__line path { fill: none; stroke: #ffb3c7; stroke-width: 2; stroke-opacity: .7; }
.sx-rail__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.sx-rail__st { display: flex; flex-direction: column; gap: 20px; }
.sx-rail__dot { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #2a0b22; color: var(--mint);
  border: 1px solid rgba(255,179,199,.45); box-shadow: 0 0 0 8px rgba(26,6,22,.55), 0 0 28px rgba(232,70,111,.4); }
/* each station's text sits on its own dark glass panel (4.5:1 over the crimson glow of the wine background) */
.sx-rail__card { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 30px; border-radius: 26px;
  background: rgba(20,4,15,.58); border: 1px solid rgba(255,179,199,.2); box-shadow: 0 20px 44px rgba(10,2,8,.32);
  transition: border-color .35s ease, transform .45s var(--wn-ease-out); }
.sx-rail__st:hover .sx-rail__card { border-color: rgba(255,179,199,.45); transform: translateY(-4px); }
.sx-rail__n { font: 600 13px/16px var(--text); letter-spacing: .12em; color: var(--mint); }
.sx-rail__h { font: 500 22px/28px var(--display); letter-spacing: -.3px; color: #fff; }
.sx-rail__card p { font: 400 16px/25px var(--text); color: rgba(255,255,255,.86); }

/* ---------- accreditations strip ---------- */
.sx-accr { padding: 56px 0; background: var(--wn-page); border-top: 1px solid var(--wn-line); }
.sx-accr__in { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.sx-accr__t { font: 500 24px/30px var(--display); letter-spacing: -.3px; color: var(--ink); }
.sx-accr__s { margin-top: 6px; font: 400 15px/22px var(--text); color: var(--grey70); }
.sx-accr__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sx-accr__b { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 12px 16px; border-radius: 18px; background: #fff;
  border: 1px solid var(--wn-line); text-align: center; }
.sx-accr__b img { height: 40px; width: auto; max-width: 100%; object-fit: contain; }
.sx-accr__b span { display: flex; flex-direction: column; gap: 2px; font: 400 12px/16px var(--text); color: var(--grey70); }
.sx-accr__b b { font: 600 13px/17px var(--text); color: var(--ink); }

/* ---------- nearby sectors ---------- */
.sx-nearby { padding-top: 96px; }
.sx-near .wn-rcard__k { font-variant-numeric: tabular-nums; }

/* =====================================================================================================
   RESPONSIVE (desktop 1440 is the design; these only apply below 1200)
   ===================================================================================================== */
@media (max-width: 1199.98px) {
  .sx-hub-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; }
  .sx-hub-h1 { font-size: clamp(34px, 3vw + 22px, 58px); line-height: 1.1; letter-spacing: -.022em; }
  .sx-h1__name { font-size: clamp(38px, 3.6vw + 22px, 66px); line-height: 1.08; }
  .sx-fill { font-size: clamp(28px, 2.4vw + 18px, 46px); line-height: 1.26; }
  .sx-q__t { font-size: clamp(24px, 1.4vw + 16px, 34px); line-height: 1.3; }
  .sx-land__grid { gap: 56px; }
  .sx-board__in { gap: 48px; }
  .sx-board__head .wn-h2 { font-size: clamp(28px, 1.6vw + 22px, 40px); line-height: 1.18; }
  .sx-accr__in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sx-node__l { max-width: 120px; font-size: 13px; line-height: 16px; }
}
@media (max-width: 1023.98px) {
  .sx-hub-grid, .sx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sx-hero__vis { max-width: 640px; }
  .sx-coords { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .sx-coords > div + div { border-left: 0; border-top: 1px solid rgba(255,179,199,.18); }
  .sx-gcards { grid-template-columns: minmax(0, 1fr); }
  .sx-gcards.is-single .sx-srows { grid-template-columns: minmax(0, 1fr); }
  .sx-land__grid, .sx-board__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sx-board__stick { position: static; }
  .sx-studies--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .sx-rail__line { display: none; }
  .sx-accr__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-why { padding: 96px 0; }
}
@media (max-width: 767.98px) {
  .sx-h1__pre { font-size: 20px; line-height: 26px; }
  .sx-need { font-size: 21px; line-height: 30px; }
  .sx-coords > div { padding: 14px 18px; }
  /* the hub atlas: names under 768 would crowd; the dots stay links, the group cards below list every sector */
  .sx-atlas--hub .sx-node__l { display: none; }
  .sx-atlas__g { padding: 6px 10px; font-size: 12px; }
  .sx-plate { padding: 18px 16px; }
  .sx-gcard { padding: 28px 22px 18px; }
  .sx-gcard__top { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n q" "t t" "l l"; }
  .sx-gcard__t { font-size: 26px; line-height: 32px; }
  .sx-srow { grid-template-columns: 40px minmax(0, 1fr) 24px; column-gap: 12px; }
  .sx-srow__ico { width: 40px; height: 40px; }
  .sx-studies--2, .sx-studies--3 { grid-template-columns: minmax(0, 1fr); }
  .sx-study { min-height: 0; }
  .sx-rail__list { grid-template-columns: minmax(0, 1fr); }
  .sx-accr__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-exp__mq li span { font-size: 34px; padding: 0 22px; }
  .sx-q { padding: 32px 0; }
  .sx-board__study { flex-wrap: wrap; }
}
@media (max-width: 479.98px) {
  .sx-chip { height: auto; min-height: 44px; padding: 6px 6px 6px 14px; }
  .sx-atlas__g span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-atlas .sx-arc, .sx-atlas .sx-spoke, .sx-atlas .sx-node, .sx-atlas .sx-atlas__g, .sx-node.is-cur .sx-node__dot::after,
  .sx-gcards.is-single .sx-gcard { animation: none !important; }
}

/* @@ RESPONSIVE-INTEG BEGIN (integrate step, 21 Oct 2026: the sectors phone / tablet pass; desktop >= 1200 untouched) */
@media (max-width: 1199.98px) {
  /* small laptops and a landscape tablet: the hub atlas needs the full width for its twelve names (at 1024 they crowded) */
  .sx-hub-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .sx-hero--hub .sx-hero__vis { max-width: 680px; }
  .sx-hero--hub .wn-lead { max-width: 640px; }
}
@media (max-width: 1023.98px) {
  /* chips whose name wraps ("Market sizing & demand forecasting") grow instead of spilling out of a fixed height */
  .sx-srow__chips i, .sx-study__m i { height: auto; min-height: 26px; padding: 4px 10px; line-height: 16px; }
  /* the study list beside the board: the whole row is the link (44px), its question tags stay on the right */
  .sx-board__study { flex-wrap: nowrap; padding: 4px 14px 4px 6px; }
  .sx-board__study a { flex: 1 1 auto; min-width: 0; min-height: 44px; }
  .sx-board__qn { flex: none; }
  /* the plate: room above and below the circle for the lit sector's name (it sat over the "Sector atlas" label) */
  .sx-plate__top { margin-bottom: 30px; }
  .sx-atlas--plate { margin-bottom: 30px; }
  .sx-accr__s { font-size: 16px; line-height: 24px; }
  .sx-q__go span { flex: none; white-space: nowrap; }
  .sx-q__go b { min-width: 0; }
}
@media (max-width: 767.98px) {
  /* hub atlas: the four group links move out of the drawing (above and below it), half the width each, so the long
     names never meet; each stays a 44px tap target */
  .sx-atlas--hub { margin: 60px 0; }
  .sx-atlas__g { max-width: calc(50% - 4px); min-height: 44px; white-space: normal; line-height: 15px; }
  .sx-atlas__g--1, .sx-atlas__g--2 { top: -60px; }
  .sx-atlas__g--3, .sx-atlas__g--4 { bottom: -60px; }
  .sx-atlas__g i { flex: none; }
  .sx-board__study a { font-size: 16px; }
}
@media (max-width: 479.98px) {
  .sx-atlas__g { gap: 8px; padding: 6px 10px 6px 8px; }
}
@media (hover: none) and (pointer: coarse) {
  .sx-atlas__g { min-height: 44px; }
  .sx-board__study a { min-height: 44px; }
}
/* @@ RESPONSIVE-INTEG END @@ */