/* The industry pages' hero scene (src/content/sector-motion.mjs, owner 29 Sep 2026, redrawn after a design audit): the
   sector's problem, then a trained team stopping it. A white card: the problem as its first line, the scene on a
   forest panel like the organisations page's team story (its light behind the team), and the answer as its last line
   with the brand slant as its mark, solid in the logo's green. On the panel, lime is only for the trained team and its judgement (people, name, slant, trace, ring, the
   escalation); teal is money; the problem's outcome is brick red in the site's error colours; what the slant stops
   short of dims (data-dim). Inter 400 and 600 only.
   While motion is allowed the content waits hidden for public/scripts/sector-motion.js (data-state waiting or
   armed); if the script never runs it shows after 2.5s. */
main.org-sector-page .sc{position:relative;width:100%;max-width:540px;margin:0;justify-self:end;container-type:inline-size;border-radius:20px;background:#fff;padding:24px 24px 22px;box-shadow:0 1px 2px rgba(20,45,40,.08),0 30px 60px -40px rgba(20,45,40,.45)}
main.org-sector-page .sc .sc-problem,main.org-sector-page .sc .sc-answer{max-width:none;font:600 17px/1.35 Inter,system-ui,sans-serif;letter-spacing:-.012em;text-wrap:balance}
main.org-sector-page .sc .sc-problem{margin:0 0 14px;color:#203432}
main.org-sector-page .sc .sc-answer{display:flex;gap:10px;align-items:baseline;margin:14px 0 0;padding-right:40px;color:#244140}
main.org-sector-page .sc-answer-mark{flex:none;width:13px;height:18px;align-self:flex-start;margin-top:.14em;overflow:visible}
main.org-sector-page .sc-answer-mark path{fill:#27b996}
main.org-sector-page .sc-scene{display:block;width:100%;height:auto;border-radius:14px;background:radial-gradient(110% 95% at 100% 0%,#30524f 0%,#244140 60%);-webkit-user-select:none;user-select:none}
main.org-sector-page .sc .motion-control{right:6px;bottom:6px}
/* On a wide card a line with a short last clause (src/content/sector-motion.mjs) keeps the clause whole and fills
   greedily, so it breaks at the comma; balance would even the lines and break inside the first clause instead. On a
   narrow card (below) the line balances freely, which there keeps the phrases together best. */
main.org-sector-page .sc .sc-clause{white-space:nowrap}
main.org-sector-page .sc :is(.sc-problem,.sc-answer):has(.sc-clause){text-wrap:pretty}

.sc-label{font:400 12.5px Inter,system-ui,sans-serif;fill:#b4cfc3}
.sc-strong{font-weight:600;fill:#fff}
.sc-mid{text-anchor:middle}
.sc-end{text-anchor:end}
.sc-team-name{font-weight:600;fill:#b4cfc3}
.sc-trained-name{fill:#c1f99b}
.sc-question{fill:#8eaaa0}
.sc-box rect{fill:#2f514e;stroke:rgba(255,255,255,.44);stroke-width:1.25}
.sc-line{fill:none;stroke:rgba(255,255,255,.44);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-thin{stroke-width:1.5}
.sc-meet{stroke-linecap:butt}
.sc-dashed{stroke-dasharray:4 5}
.sc-human{fill:#dce8e2}
.sc-untrained .sc-human{fill:#7f9c93}
.sc-trained .sc-human{fill:#c1f99b}
.sc-unknown{fill:none;stroke:#8eaaa0;stroke-width:1.4;stroke-dasharray:3 3}
.sc-ring{fill:none;stroke:#c1f99b;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 2}
.sc-slant{fill:#c1f99b}
.sc-glow{fill:#c1f99b;fill-opacity:.2}
.sc-trace{fill:none;stroke:#c1f99b;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2}
/* Drawn strokes (pathLength 1) dash as one stroke and a longer gap: a gap of exactly the stroke's length left a dot at
   its far end before it was drawn, and a seam in the ring once it was. */
.sc-draw{stroke-dasharray:1 2}
.sc-coin circle{fill:#27b996;stroke:#1d3836;stroke-width:2.5}
.sc-euro{font:600 13px Inter,system-ui,sans-serif;fill:#10302d}
.sc-wallet rect{fill:#2f514e;stroke:rgba(255,255,255,.44);stroke-width:1.25}
.sc-wallet .sc-clasp{fill:#3b605c}
.sc-wallet circle{fill:#b4cfc3}
.sc-case rect{fill:#dce8e2}
.sc-case path{fill:none;stroke:#6d8a82;stroke-width:1.6;stroke-linecap:round}
.sc-tag-text{font:600 13.5px Inter,system-ui,sans-serif}
.sc-tag-risk rect{fill:#fbe8e4}
.sc-tag-risk .sc-tag-text{fill:#9c342b}
.sc-tag-judgement rect{fill:#c1f99b}
.sc-tag-judgement .sc-tag-text{fill:#203432}
.sc-tag-neutral rect{fill:rgba(255,255,255,.14)}
.sc-tag-neutral .sc-tag-text{fill:#dce8e2}
.sc [data-gone]{opacity:0}
.sc [data-dim]{opacity:.4}
.sc [data-m]{transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:no-preference){
 main.org-sector-page .sc:is([data-state="waiting"],[data-state="armed"]) :is(.sc-problem,.sc-scene,.sc-answer){opacity:0}
 main.org-sector-page .sc[data-state="waiting"] :is(.sc-problem,.sc-scene,.sc-answer){animation:sc-show 0s 2.5s forwards}
}
@keyframes sc-show{to{opacity:1}}

/* The hero stacks where the organisations page's does (800px). */
@media(max-width:800px){main.org-sector-page .org-sector-split{grid-template-columns:minmax(0,1fr);gap:36px}main.org-sector-page .sc{justify-self:start}}
@media(max-width:600px){
 main.org-sector-page .sc{padding:20px 18px 20px}
 main.org-sector-page .sc .sc-problem,main.org-sector-page .sc .sc-answer{font-size:16px}
}
/* Where the card is narrow (a phone, or the hero's column at tablet widths) the scene draws at three quarters of its
   size or less, so its words are set larger to stay at 11px or more; outcomes stay at least the size of names. */
@container (max-width:380px){.sc-label{font-size:15.5px}.sc-tag-text{font-size:15.5px}.sc-euro{font-size:15px}main.org-sector-page .sc :is(.sc-problem,.sc-answer):has(.sc-clause){text-wrap:balance}main.org-sector-page .sc .sc-clause{white-space:normal}}
@media(forced-colors:active){main.org-sector-page .sc{border:1px solid CanvasText}main.org-sector-page .sc-scene{background:Canvas}.sc :is(.sc-line,.sc-ring,.sc-trace,.sc-unknown){stroke:CanvasText}.sc :is(.sc-slant,.sc-human,.sc-coin circle){fill:CanvasText}}