/* long-form sector story on /sectors/<key>: brief + business case on the page. Prefix ss-. Markup: tools/sector_story.py; motion: sector-story.js */
.ss{border-top:1px solid var(--line)}
.ss-dark{background:#070B13}
.ss-aside{max-width:46ch}

/* part dividers: "Part one · The brief", "Part two · Business case" */
.ss-part{position:relative; padding:clamp(72px,9vw,132px) 0 clamp(56px,7vw,96px); border-top:1px solid var(--line2); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#081120 0%,#05070C 100%)}
.ss-part::before{content:''; position:absolute; left:0; top:-1px; width:min(28vw,320px); height:2px; background:var(--grad-r)}
.ss-part-in{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(28px,5vw,88px); align-items:end}
.ss-part-no{font:500 12px/1 var(--fm); letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); margin-bottom:22px}
.ss-part-h{font-size:clamp(36px,4.4vw,64px); line-height:1.04; max-width:16ch; text-wrap:balance}
.ss-flag{margin-top:22px; font:500 11px/1.5 var(--fm); letter-spacing:.16em; text-transform:uppercase; color:var(--amber); padding-left:12px; border-left:2px solid var(--amber)}

/* figures */
.ss-fig{margin:0; border:1px solid var(--line); border-radius:14px; background:var(--bg); padding:clamp(18px,2.2vw,30px)}
.ss-light{background:#fff; border-color:#fff}
.ss-light .ss-cap b{color:#0A1217} .ss-light .ss-cap span,.ss-light .ss-note{color:#5F6C79}
.ss-cap{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--line)}
.ss-light .ss-cap{border-color:#E3E9EF}
.ss-cap b{font:500 11.5px/1.45 var(--fm); letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.ss-cap b::before{content:''; display:inline-block; width:7px; height:7px; margin-right:10px; background:var(--cyan); vertical-align:1px}
.ss-cap span{font:400 11px/1.4 var(--fm); letter-spacing:.1em; text-transform:uppercase; color:var(--mut); text-align:right}
.ss-svg svg{display:block; width:100%; height:auto}
.ss-note{margin-top:14px; font-size:14px; line-height:1.6; color:var(--mut); max-width:96ch}

/* layouts */
.ss-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,36px); align-items:start}
.ss-2w{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.ss-3{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,2.4vw,36px); align-items:start}

/* stats: hairline, editorial */
.ss-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(18px,2.4vw,40px)}
.ss-stat{border-top:1px solid var(--line2); padding-top:18px}
.ss-stat:first-child{border-top-color:var(--cyan)}
.ss-stat b{display:block; font:300 clamp(42px,4.6vw,66px)/1 var(--fd); letter-spacing:-.03em; color:var(--ink); white-space:nowrap}
.ss-stat b u{text-decoration:none; font-size:.32em; font-weight:400; letter-spacing:0; color:var(--cyan); margin-left:6px}
.ss-stat span{display:block; margin-top:14px; font:500 11px/1.45 var(--fm); letter-spacing:.14em; text-transform:uppercase; color:var(--cyan)}
.ss-stat em{display:block; margin-top:6px; font-style:normal; font-size:14px; color:var(--mut)}
.ss-big .ss-stat b{font-size:clamp(60px,7.6vw,112px)}

/* products */
.ss-prods{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px)}
.ss-prod{display:flex; flex-direction:column; padding:clamp(22px,2.4vw,34px); border:1px solid var(--line); border-top:2px solid var(--line3); border-radius:14px; background:#070B13;
  color:inherit; text-decoration:none; transition:transform .6s var(--e), border-color .4s}
.ss-prod:first-child{border-top-color:var(--cyan)}
.ss-prod:hover,.ss-prod:focus-visible{transform:translateY(-4px); border-color:var(--line3)}
.ss-k{font:500 11px/1 var(--fm); letter-spacing:.18em; text-transform:uppercase; color:var(--cyan)}
.ss-prod>b{margin-top:16px; font:300 clamp(44px,4.4vw,64px)/1 var(--fd); letter-spacing:-.03em; color:var(--ink)}
.ss-prod>p{margin-top:14px; font-size:15px; line-height:1.55; color:var(--ink2); min-height:4.6em}
.ss-prod dl{margin:18px 0 0; display:grid; grid-template-columns:auto 1fr; column-gap:18px}
.ss-prod dt,.ss-prod dd{margin:0; padding:9px 0; border-top:1px solid var(--line)}
.ss-prod dt{font:400 10.5px/1.6 var(--fm); letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.ss-prod dd{font-size:14px; color:var(--ink)}
.ss-prod i{margin-top:auto; padding-top:20px; font-style:normal; font:500 12px/1 var(--fm); letter-spacing:.12em; text-transform:uppercase; color:var(--cyan)}

/* measured-ageing facts */
.ss-facts>div{display:grid; grid-template-columns:minmax(130px,.8fr) 1fr; column-gap:22px; align-items:center; padding:18px 0; border-top:1px solid var(--line)}
.ss-facts b{grid-row:span 2; font:300 clamp(34px,3.4vw,48px)/1 var(--fd); color:var(--ink); white-space:nowrap}
.ss-facts span{font:500 10.5px/1.4 var(--fm); letter-spacing:.14em; text-transform:uppercase; color:var(--cyan)}
.ss-facts p{font-size:14.5px; line-height:1.55; color:var(--ink2)}

/* numbered points */
.ss-pts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.2vw,32px)}
.ss-pts1{grid-template-columns:1fr; align-self:center}
.ss-pts3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ss-pts>div{border-top:1px solid var(--line2); padding-top:16px}
.ss-pts em{font:500 11px/1 var(--fm); letter-spacing:.14em; color:var(--cyan); font-style:normal}
.ss-pts b{display:block; margin-top:10px; font:400 21px/1.25 var(--fd); color:var(--ink)}
.ss-pts p{margin-top:8px; font-size:15px; line-height:1.6; color:var(--ink2)}

/* ways to buy */
.ss-ways{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,40px)}
.ss-ways>div{border-top:1px solid var(--line2); padding-top:16px}
.ss-ways>div:first-child{border-top-color:var(--cyan)}
.ss-ways b{display:block; font:400 24px/1.2 var(--fd); color:var(--ink)}
.ss-ways b span{margin-left:10px; font:500 10.5px/1 var(--fm); letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); vertical-align:4px}
.ss-ways p{margin-top:10px; font-size:15px; line-height:1.6; color:var(--ink2)}

/* tables */
.ss-tbl tr.ss-sel td{color:var(--ink); background:rgba(60,204,252,.06)}
.ss-disc{color:var(--dim); max-width:120ch}

@media (max-width:1080px){
  .ss-3{grid-template-columns:1fr 1fr} .ss-3>:first-child{grid-column:1 / -1}
  .ss-prods{grid-template-columns:1fr} .ss-prod>p{min-height:0}
}
@media (max-width:900px){
  .ss-part-in,.ss-2,.ss-2w,.ss-3{grid-template-columns:minmax(0,1fr)}
  .ss-pts,.ss-pts3,.ss-ways{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ss-svg{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px 6px}
  .ss-svg svg{min-width:420px}
  .ss-svg.ss-wide svg{min-width:680px}
  .ss-cap{flex-direction:column; gap:4px} .ss-cap span{text-align:left}
}