/* For-companies page layer. Loaded after narrative.css.

   Blue and white like the rest of the site, plus one signal colour this page
   is allowed: yellow. Yellow only ever means "this is the step you are looking
   at" or "this is the thing to click" - the active loop stage, the primary
   buttons, the highlighted stage on each card - so it never turns into
   decoration. The loop order is Measure -> Decide -> Disclose -> Act, and the
   hero loop, the cards, the resource filter and the explainer all use it. */
body.company-page{
  --paper:#f5f8fd;--ink:#0b2545;--muted:#52667f;--green:#1f56b3;
  --line:#d3dfee;--soft:#e9f0fa;--accent:#a8d2f5;
  --sys-deep:#0a2140;--sys-deep-2:#0f2f5c;--sys-signal:#ffc72c;--sys-on-signal:#0b2545;--sys-blue:#2563c9;
  --sys-node:#7d93b0;--panel:#ffffff;--panel-hi:#ffffff;
  background:var(--paper);color:var(--ink)
}
:root[data-theme="dark"] body.company-page{
  --paper:#07172b;--ink:#e8f1fb;--muted:#9db2ca;--green:#8cc3f5;
  --line:#1f3a5a;--soft:#0b2038;--sys-deep:#041124;--sys-deep-2:#0a2140;--sys-signal:#ffcd3c;--sys-blue:#6aa5f2;
  --sys-node:#7e97b3;--panel:#0e2440;--panel-hi:#1c3d63
}

/* every panel gets a 1px lit top edge */
.sys-lit{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.sys-lit::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,transparent,var(--panel-hi) 22%,var(--panel-hi) 78%,transparent);opacity:.9}

/* ---- Header: transparent over the navy hero, solid once you scroll -------- */
.company-page .beta-header{z-index:30;transition:background .35s,border-color .35s,color .35s}
.company-page.sys-top-dark .beta-header{background:transparent;border-bottom-color:transparent;color:#eef3fa}
.company-page.sys-top-dark .beta-header:hover,.company-page.sys-top-dark .beta-header:focus-within{background:#0a21408c;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.company-page.sys-top-dark.sys-scrolled .beta-header{background:#0a2140e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:#a8d2f51f}
.company-page.sys-top-dark .beta-header::after{background:var(--sys-signal)}
.company-page.sys-top-dark .beta-monogram>span{color:var(--sys-signal)}
.company-page.sys-top-dark .beta-language>span,.company-page.sys-top-dark .beta-language button{color:#a9bed5}
.company-page.sys-top-dark .beta-language button[aria-pressed="true"]{color:#eef3fa}
.company-page.sys-top-dark #beta-theme-toggle{border-color:#a8d2f547;color:#eef3fa}
.company-page.sys-top-dark #beta-menu-toggle>span{background:#eef3fa}
@media (max-width:680px){
  .company-page.sys-top-dark #beta-nav-links{background:#0a2140f7;border-bottom-color:#a8d2f52e}
  .company-page .beta-header .beta-brand>span:last-child{display:none}
}

/* ---- Hero ------------------------------------------------------------------ */
.sys-hero{position:relative;margin-top:calc(-1*var(--sys-header-h,87px));padding:var(--sys-header-h,87px) 0 0;background:linear-gradient(160deg,var(--sys-deep) 0%,var(--sys-deep-2) 100%);color:#eaf1f8;overflow:hidden}
.sys-hero-bg{position:absolute;inset:0;pointer-events:none}
.sys-hero-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(70% 80% at 70% 40%,#000 20%,transparent 80%);mask-image:radial-gradient(70% 80% at 70% 40%,#000 20%,transparent 80%)}
.sys-hero-bg::after{content:"";position:absolute;width:560px;height:560px;right:4%;top:12%;border-radius:50%;background:radial-gradient(circle,#2d6fd133 0%,transparent 65%);filter:blur(10px)}
.sys-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:center;gap:64px;padding-block:64px 80px}
.sys-kicker{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:#a9bed5}
.sys-kicker-dot{width:8px;height:8px;border-radius:50%;background:var(--sys-signal);box-shadow:0 0 0 5px #ffc72c26}
.sys-hero h1{margin-top:22px;font-size:clamp(42px,5vw,72px);line-height:1.03;letter-spacing:-.05em;max-width:14ch;color:#f4f8fc}
.sys-hero h1 em{color:var(--sys-signal);font-style:italic}
.sys-hero-lede{margin-top:24px;max-width:46ch;color:#b7c9dd;font-size:1.06rem;line-height:1.75}
.sys-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:34px}
.sys-cta{display:inline-flex;align-items:center;gap:20px;padding:16px 26px;border-radius:999px;background:var(--sys-signal);color:var(--sys-on-signal);font-size:.9rem;font-weight:650;transition:transform .22s,box-shadow .22s}
.sys-cta:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px #ffc72c99}
.sys-watch{display:inline-flex;align-items:center;gap:12px;color:#eaf1f8;font-size:.9rem;font-weight:600}
.sys-watch-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid #ffc72c99;transition:background .25s,border-color .25s}
.sys-watch-icon svg{width:14px;height:14px;fill:var(--sys-signal);margin-left:2px}
.sys-watch:hover .sys-watch-icon{background:#ffc72c1f;border-color:var(--sys-signal)}

/* ---- The loop -------------------------------------------------------------- */
.sys-loop{container-type:inline-size;width:100%;max-width:520px;justify-self:end;padding-bottom:30px}
.sys-loop-square{position:relative;aspect-ratio:1}
.sys-loop-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sys-loop-halo{fill:none;stroke:#ffffff12;stroke-width:1}
.sys-loop-halo--2{stroke-dasharray:2 6}
.sys-loop-track{fill:none;stroke:#2b4f7e;stroke-width:2}
.sys-loop-flow{fill:none;stroke:#8fbef5;stroke-width:3;stroke-linecap:round;stroke-dasharray:.1 3.2;opacity:.6;animation:sys-flow 3s linear infinite}
@keyframes sys-flow{to{stroke-dashoffset:-3.3}}
.sys-loop-chev{fill:none;stroke:#8fbef5;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.sys-loop-comet{transform-box:view-box;transform-origin:50% 50%;transform:rotate(var(--angle,0deg));transition:transform 1.2s cubic-bezier(.65,0,.25,1)}
.sys-loop-comet path{fill:none;stroke:url(#sys-comet-fade);stroke-width:6;stroke-linecap:round}
.sys-loop-comet circle{fill:var(--sys-signal);filter:drop-shadow(0 0 8px #ffc72caa)}
.sys-loop-core{fill:#0c2b52;stroke:#24497a;stroke-width:1.5}
.sys-loop-nodes{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.sys-loop-nodes li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-8.5cqw)}
.sys-node{display:flex;flex-direction:column;align-items:center;gap:1.6cqw;padding:0;border:0;background:none;color:#eaf1f8;font:inherit;cursor:pointer}
.sys-node-icon{display:grid;place-items:center;width:17cqw;height:17cqw;border-radius:50%;background:#10305a;border:2px solid #3f6aa1;box-shadow:0 0 0 1.4cqw #0a214099;transition:background .35s,border-color .35s,transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.sys-node-icon svg{width:44%;height:44%;fill:none;stroke:#d6e8ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.sys-node-label{padding:.35em .75em;border-radius:999px;background:#0c2a50;font-size:max(10.5px,2.45cqw);font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:#a9bed5;transition:color .3s,background .3s}
.sys-node:hover .sys-node-icon{border-color:#8fbef5}
.sys-node[aria-pressed="true"] .sys-node-icon{background:var(--sys-signal);border-color:var(--sys-signal);transform:scale(1.1);box-shadow:0 0 0 1.4cqw #ffc72c2e,0 0 34px #ffc72c66}
.sys-node[aria-pressed="true"] .sys-node-icon svg{stroke:#0b2545}
.sys-node[aria-pressed="true"] .sys-node-label{color:#fff;background:#123661}
.sys-node:focus-visible{outline:none}
.sys-node:focus-visible .sys-node-icon{outline:2px solid #fff;outline-offset:4px}
.sys-loop-center{position:absolute;left:50%;top:50%;width:40cqw;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
.sys-loop-panels{display:grid;width:100%}
.sys-loop-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.sys-loop-panel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .15s,transform .45s ease .15s,visibility 0s}
.sys-loop-panel p{max-width:none}
.sys-loop-num{font-size:max(10.5px,2.2cqw);font-weight:700;letter-spacing:.2em;color:var(--sys-signal)}
.sys-loop-name{margin-top:1cqw;font-size:max(22px,6.2cqw);font-weight:700;line-height:1.05;letter-spacing:-.045em;color:#fff}
.sys-loop-desc{margin-top:1.6cqw;font-size:max(12px,2.65cqw);line-height:1.45;color:#b7c9dd}
.sys-loop-link{margin-top:2.4cqw;font-size:max(11px,2.4cqw);font-weight:650;color:var(--sys-signal)}
.sys-loop-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Business case --------------------------------------------------------- */
.sys-case{padding-block:104px}
.sys-case-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:end;margin-bottom:46px}
.sys-case-head h2{font-size:clamp(40px,4.4vw,64px);line-height:1.05;letter-spacing:-.05em}
.sys-case-head h2 em{color:var(--green);display:block}
.sys-case-head p{color:var(--muted);line-height:1.8;max-width:42ch}
.sys-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sys-point{display:flex;flex-direction:column;padding:26px 26px 30px;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s}
.sys-point:hover,.sys-point.is-active{transform:translateY(-4px);border-color:color-mix(in srgb,var(--sys-signal) 75%,var(--line));box-shadow:0 26px 50px -34px #0b254566}
.sys-point-mark{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.sys-point-mark svg{width:58px;height:58px;overflow:visible}
.sys-mini-ring{fill:none;stroke:var(--line);stroke-width:3}
.sys-mini-arc{fill:none;stroke:var(--sys-signal);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.65,0,.25,1) .35s}
.sys-point.is-in .sys-mini-arc{stroke-dashoffset:0}
.sys-mini-dot{fill:var(--panel);stroke:var(--sys-node);stroke-width:2}
.sys-mini-dot.is-on{fill:var(--sys-signal);stroke:var(--sys-on-signal)}
.sys-point-num{font:400 2.6rem/1 "Instrument Serif",Georgia,serif;color:var(--sys-node);transition:color .35s}
.sys-point:hover .sys-point-num,.sys-point.is-active .sys-point-num{color:var(--ink)}
.sys-point-stage{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sys-blue)}
.sys-point h3{margin-top:10px;font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.15;letter-spacing:-.03em}
.sys-point-body{margin-top:12px;color:var(--muted);line-height:1.7}

/* ---- Resource library: the loop's four steps are the filter ---------------- */
.sys-resources{padding-block:100px;background:var(--soft);border-block:1px solid var(--line)}
.sys-res-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:28px;margin-bottom:34px}
.sys-res-head h2{font-size:clamp(38px,4vw,58px);line-height:1.05;letter-spacing:-.045em}
.sys-filter{display:flex;flex-wrap:wrap;gap:8px}
.sys-filter button{padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:.8rem;font-weight:550;letter-spacing:.03em;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.sys-filter button:hover{color:var(--ink);border-color:var(--sys-blue)}
.sys-filter button[aria-pressed="true"]{color:var(--sys-on-signal);border-color:var(--sys-signal);background:var(--sys-signal)}
.sys-res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sys-res{display:grid;grid-template-columns:116px minmax(0,1fr) 20px;align-items:center;gap:22px;padding:22px 24px;color:inherit;transition:transform .3s,border-color .3s,opacity .35s,box-shadow .3s}
.sys-res:hover{transform:translateY(-3px);border-color:var(--sys-blue);box-shadow:0 20px 40px -30px #0b254566}
.sys-res.is-dimmed{opacity:.24;pointer-events:none}
/* marks sit straight on the panel - no plate anywhere on this site. Each img carries
   its own --mw from its shape (set in the markup): a roundel gets 54px, a long
   wordmark up to 112px, so they read at the same weight instead of the same height. */
.sys-res-mark{display:grid;place-items:center;height:60px}
/* px, not %: a percentage max-height resolves against the auto grid row, which is how
   square marks (GRI, ESRS) grew past the card - see CLAUDE.md on logo plates */
.sys-res-mark img{width:var(--mw,80px);height:auto;max-width:100%;filter:grayscale(1) opacity(.78);transition:filter .3s,opacity .3s}
.sys-res:hover .sys-res-mark img{filter:none}
/* dark mode: plain white marks, brighter on hover - no glow, it blurred the small text */
:root[data-theme="dark"] .sys-res-mark img{filter:brightness(0) invert(1) opacity(.84)}
:root[data-theme="dark"] .sys-res:hover .sys-res-mark img{filter:brightness(0) invert(1)}
/* marks drawn on their own disc or panel would turn into a white blob when inverted,
   so they keep their colours - they carry their own contrast */
:root[data-theme="dark"] .sys-res-mark--solid img,:root[data-theme="dark"] .sys-res:hover .sys-res-mark--solid img{filter:none}
.sys-res h3{font-size:1.02rem;line-height:1.35}
.sys-res-stage{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--sys-blue) 12%,transparent);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sys-blue);vertical-align:2px}
.sys-res p{margin-top:7px;font-size:.9rem;line-height:1.6;color:var(--muted)}
.sys-res-arrow{font-size:1.2rem;color:var(--muted);transition:transform .25s,color .25s}
.sys-res:hover .sys-res-arrow{transform:translate(3px,-3px);color:var(--sys-blue)}

/* ---- Contact: the page ends back on navy ---------------------------------- */
.sys-contact{padding-block:96px 110px}
.sys-contact-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 32px 60px;border-radius:24px;background:linear-gradient(160deg,var(--sys-deep),var(--sys-deep-2));color:#eaf1f8}
.sys-contact-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(60% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(60% 70% at 50% 40%,#000,transparent)}
.sys-contact-loop{position:relative;width:84px;height:84px;margin-bottom:22px}
.sys-contact-ring{fill:none;stroke:#2b4f7e;stroke-width:3}
.sys-contact-arc{fill:none;stroke:var(--sys-signal);stroke-width:4;stroke-linecap:round;stroke-dasharray:22 78;animation:sys-orbit 6s linear infinite}
@keyframes sys-orbit{to{stroke-dashoffset:-100}}
.sys-contact-dot{fill:#10305a;stroke:#8fbef5;stroke-width:2}
.sys-contact h2{position:relative;font-size:clamp(40px,4.6vw,64px);line-height:1.05;letter-spacing:-.05em;color:#f4f8fc}
.sys-contact p{position:relative;margin-top:18px;max-width:46ch;color:#b7c9dd;line-height:1.8}
.sys-contact-actions{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:30px}
.sys-contact-mail{color:#a9bed5;font-size:.86rem}
.sys-contact-mail:hover{color:#fff}

/* ---- Entrance: panels arrive rather than appear --------------------------- */
.sys-rise{opacity:0;transform:translateY(20px)}
.sys-rise.is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s}
.sys-rise.is-in:hover,.sys-rise.is-in.is-active{transform:translateY(-4px)}

@media (max-width:980px){
  .sys-hero-inner{grid-template-columns:1fr;gap:34px;padding-block:44px 64px}
  .sys-loop{justify-self:center;max-width:460px}
  .sys-case-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .sys-points{grid-template-columns:1fr}
  .sys-res-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .sys-hero h1{font-size:clamp(38px,10.5vw,54px)}
  .sys-cta{width:100%;justify-content:space-between}
  .sys-case,.sys-resources{padding-block:70px}
  /* the mark gets its own row on a phone: a 54px column made wordmarks unreadable */
  .sys-res{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px}
  .sys-res-mark{height:52px;place-items:center start}
  .sys-res-mark img{width:calc(var(--mw,80px) * .9)}
  .sys-res-arrow{display:none}
  .sys-contact{padding-block:64px 80px}
  .sys-contact-card{padding:48px 22px 44px;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .sys-loop-flow,.sys-contact-arc{animation:none}
  .sys-loop-comet,.sys-loop-panel,.sys-node-icon{transition:none}
  .sys-rise{opacity:1;transform:none;transition:none}
  .sys-mini-arc{stroke-dashoffset:0;transition:none}
  .sys-res,.sys-point,.sys-cta,.sys-res-mark img{transition:none!important}
}

/* Rotation remains optional, including on touch screens. */
.sys-loop-playback{display:block;margin:18px auto 0;min-height:44px;padding:10px 16px;border:1px solid #cfe3d666;border-radius:999px;background:transparent;color:#cfe3d6;font:inherit;font-size:.875rem;cursor:pointer}
.sys-loop-playback:hover{background:#ffffff12;color:#fff}
.sys-loop-playback:focus-visible{outline:2px solid var(--sys-signal);outline-offset:4px}
.sys-res-stage{font-size:.75rem;letter-spacing:.06em;color:var(--cv-forest-hi)}
:root[data-theme="dark"] .sys-res-stage{color:var(--cv-sage)}
.sys-filter button{min-height:44px;font-size:.875rem}