/* =========================================================================
   UIE — site stylesheet (v2, editorial)
   Serif headlines, pale-blue bands, generous air — the look of UIE's
   annual report. No frameworks. Noto Sans / Noto Serif are self-hosted
   from assets/fonts (SIL Open Font Licence) — nothing is fetched from
   Google, so no third-party requests and no cookie/GDPR question.
   ========================================================================= */

/* ---- 0. Typeface -------------------------------------------------------- */
/* Noto Sans — body and interface. Noto Serif — headlines.
   'latin' covers English and Danish (æ ø å); 'latin-ext' is only fetched
   if a page actually uses one of its characters. */
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Sans";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/noto-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/noto-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/noto-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/noto-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Noto Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-serif-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-serif-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/noto-serif-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/noto-serif-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/noto-serif-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/noto-serif-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/noto-serif-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/noto-serif-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  --blue:#002940;          /* UIE blue — CMYK 100/35/0/75 */
  --indigo:#181A51;
  --ink:#53554B;
  --submenu:#3A3C35;
  --light:#E2E1CE;
  --up:#5D92AA;            /* United Plantations */
  --msab:#D27357;          /* Schörling */
  --gb:#8F9E84;            /* Greenbridge */
  --gold:#FDC542;          /* the fifth colour in the business model */
  --taupe:#A3968C;         /* the warm grey of the refining stage */

  /* The one place the icon colours are named. Everything that lets an editor
     colour an icon — key figures, points with icons, resource cards, charts —
     reads these, so a colour means the same thing on every page. */
  --c-navy:#002940;
  --c-up:#5D92AA;
  --c-msab:#D27357;
  --c-gb:#8F9E84;
  --c-gold:#FDC542;
  --c-taupe:#A3968C;

  --blue-900:#001c2c;
  --blue-700:#033f5e;
  --blue-500:#0d6489;
  --blue-300:#7fa9be;

  /* The pale bands that carry most of the page */
  --mist:#eaf1f5;
  --mist-deep:#dbe7ee;
  --paper:#fff;
  --sand-100:#f4f2e8;
  --cream:#f1eee7;      /* the warm ground used for the report and key figures;
                           matches the annual-report artwork exactly so the
                           picture has no visible edge against the band */

  --line:#dde3e7;
  --line-soft:#e9eef1;
  --text:#22303a;
  --text-soft:#5d6b74;

  --up-soft:rgba(93,146,170,.14);

  --pos:#1f7a4d;
  --neg:#b23f2c;

  /* Serif display, sans body — the annual-report pairing.
     Noto Sans is UIE's annual-report typeface; Noto Serif is its
     matching serif, used for headlines. */
  --font:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Noto Serif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-serif:var(--font-display);

  /* The content column, and the white space each side of it. The column is
     held a little narrower than the page allows so the margins stay generous
     on a wide screen — text that runs the full width of a monitor is tiring
     to read, and the air is what makes a page look composed. */
  --wrap:1180px;
  --wrap-wide:1360px;
  --wrap-narrow:840px;
  --gutter:clamp(22px,5.6vw,76px);
  /* The top bars — the ticker and the header — share this one inset so the
     logo starts exactly where SHARE PRICE starts. */
  --bar-gutter:clamp(14px,3.4vw,40px);

  --r:3px;
  --r-lg:8px;
  --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,41,64,.04),0 6px 18px rgba(0,41,64,.05);
  --shadow:0 2px 4px rgba(0,41,64,.05),0 14px 34px rgba(0,41,64,.09);
  --shadow-lg:0 4px 10px rgba(0,41,64,.07),0 30px 70px rgba(0,41,64,.16);

  --ticker-h:40px;
  --header-h:88px;
  --top-h:calc(var(--ticker-h) + var(--header-h));
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--top-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{
  margin:0;font-family:var(--font);
  font-size:17.5px;line-height:1.72;color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--blue-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(3,63,94,.32);transition:text-decoration-color .2s,color .2s}
a:hover{text-decoration-color:currentColor}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.16;letter-spacing:-.008em;color:var(--blue)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
li{list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:0}
em{font-style:italic}
:focus-visible{outline:2.5px solid var(--up);outline-offset:3px;border-radius:2px}
::selection{background:var(--up-soft);color:var(--blue)}

/* Safety net: several components set their own `display`, which would
   otherwise beat the browser's default rule for the `hidden` attribute and
   leave an invisible overlay swallowing clicks. */
[hidden]{display:none !important}
.submenu[hidden]{display:block !important;visibility:hidden}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--blue);color:#fff;padding:14px 22px;text-decoration:none}
.skip:focus{left:0}

/* ---- 3. Layout ---------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap-wide{max-width:var(--wrap-wide)}
.wrap-narrow{max-width:var(--wrap)}
.wrap-narrow>*{max-width:var(--wrap-narrow)}
.section{padding:clamp(64px,8vw,124px) 0;position:relative}
.section.pad-small{padding:clamp(36px,4.5vw,64px) 0}
.section.pad-large{padding:clamp(92px,11vw,170px) 0}

.tone-light{background:var(--mist)}
.tone-sand{background:var(--sand-100)}
.tone-cream{background:var(--cream)}
.tone-white{background:var(--paper)}
.tone-blue{background:var(--blue);color:rgba(255,255,255,.88)}
.tone-blue h1,.tone-blue h2,.tone-blue h3,.tone-blue .h2{color:#fff}
.tone-blue a{color:#fff}
/* Two bands of the same colour read as one, so the join loses its padding.
   flow-root goes with it: without a top padding, a margin on the first
   thing inside escapes the section and shows as a stripe of the page
   colour between two bands that are supposed to be continuous. */
.tone-light+.tone-light,.tone-sand+.tone-sand,.tone-blue+.tone-blue,.tone-white+.tone-white{padding-top:0;display:flow-root}

/* --- A picture behind a module -------------------------------------------
   The picture is set on the section itself; a veil is laid over it so the
   writing stays readable whatever the photograph happens to be doing behind
   it. The veil is a layer of its own rather than a gradient on the image, so
   the same picture can carry a pale veil on one page and a dark one on
   another without being re-saved. */
.section.has-bg{background-size:cover;background-repeat:no-repeat}
.section.has-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--veil,rgba(255,255,255,.86))
}
/* The content is lifted over the veil; without this the veil would paint on
   top of the words it is meant to be helping. */
.section.has-bg>*{position:relative;z-index:1}
.section.bgv-light{--veil:rgba(255,255,255,.86)}
.section.bgv-medium{--veil:rgba(255,255,255,.66)}
.section.bgv-dark{--veil:linear-gradient(rgba(0,41,64,.72),rgba(0,41,64,.72))}
.section.bgv-none{--veil:none}
/* A module with a picture is a band in its own right, so it keeps its top
   padding even when the module above it shares its background colour. */
.section.has-bg+.section.has-bg,
.tone-light+.section.has-bg,.tone-sand+.section.has-bg,
.tone-blue+.section.has-bg,.tone-white+.section.has-bg{padding-top:clamp(64px,8vw,124px)}

.mt-l{margin-top:2.2rem}
.muted{color:var(--text-soft)}
.lead{font-size:1.2em;line-height:1.6;color:var(--blue-700)}

/* ---- 4. Typography ------------------------------------------------------ */
.h1,h1{font-size:clamp(2.2rem,4.6vw,3.7rem)}
.h2,h2{font-size:clamp(1.8rem,3.2vw,2.75rem)}
.h3,h3{font-size:clamp(1.25rem,1.9vw,1.6rem)}

/* A word wrapped in *asterisks* in any heading becomes a serif italic
   accent — the annual report's way of stressing one key word. */
h1 em,h2 em,h3 em,.h2 em,.hero-heading em,.cta-h em,.pagehead-title em{font-style:italic;color:var(--up)}
.tone-blue h2 em,.tone-blue .h2 em,.hero-heading em,.pagehead-title em,.sec-cta.has-img .cta-h em{color:var(--light)}

.eyebrow{
  font-family:var(--font);
  font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--up);margin:0 0 1rem
}
.tone-blue .eyebrow{color:var(--light)}

/* Section headers are centred by default — the editorial look. */
.sec-head{max-width:760px;margin:0 auto clamp(38px,5vw,64px);text-align:center}
.sec-intro{font-size:1.08rem;color:var(--text-soft);max-width:62ch;margin:1.8rem auto 0}
.tone-blue .sec-intro{color:rgba(255,255,255,.8)}
.sec-head-left{text-align:left;margin-left:0}
.sec-head-left .sec-intro{margin-left:0}
/* A module that sets its heading straight into the page rather than in a
   centred head keeps its intro on the same left edge as that heading. */
.wrap>.sec-intro,.wrap-wide>.sec-intro,.wrap-narrow>.sec-intro{margin-left:0}

/* A thin rule to the left of a heading — the "We focus on…" treatment. */
.rule-left{padding-left:1.1rem;border-left:3px solid var(--up)}

.prose{max-width:68ch;font-size:1.04rem}
/* A heading needs room to breathe before its text, on every block that pairs
   the two. Without this the two sit almost on top of each other. */
.h2+.prose,h2+.prose,.h2+.rt-split-body,.report-h+.report-lead{margin-top:1.8rem}
.sec-text .h2+.prose,.sec-split .h2+.prose{margin-top:1.8rem}
.prose.prose-sm{font-size:.97rem}
.prose>*:first-child{margin-top:0}
.prose>*:last-child{margin-bottom:0}
.prose h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin:2.2em 0 .5em}
.prose h3{font-size:clamp(1.18rem,1.7vw,1.4rem);margin:1.9em 0 .4em}
.prose h4{font-family:var(--font);font-size:1rem;font-weight:700;letter-spacing:.02em;margin:1.7em 0 .4em;color:var(--blue-700)}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.5em}
.prose ul li{list-style:none;position:relative;margin-bottom:.6em}
.prose ul li::before{content:"";position:absolute;left:-1.2em;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--up)}
.prose ol li{list-style:decimal;margin-bottom:.6em}
.prose ol li::marker{color:var(--up);font-weight:700}
.prose blockquote{margin:1.8em 0;padding:0 0 0 1.5em;border-left:2px solid var(--up);font-family:var(--font-display);font-size:1.22em;font-style:italic;color:var(--blue-700)}
.prose table{margin:1.6em 0;font-size:.95rem}
.prose th,.prose td{padding:.72em .9em;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.prose th{background:var(--mist);font-weight:650;color:var(--blue)}
.prose img{margin:1.6em 0;border-radius:var(--r-lg)}
.prose strong{font-weight:650;color:var(--blue-900)}
.prose-2col{max-width:none;columns:2;column-gap:clamp(34px,4vw,68px)}
.prose-2col>*{break-inside:avoid}
@media (max-width:760px){.prose-2col{columns:1}}

/* ---- 5. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:.8em 2em;border-radius:var(--r-pill);
  font-family:var(--font);font-size:.97rem;font-weight:600;letter-spacing:.015em;
  text-decoration:none;border:1.5px solid transparent;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .24s var(--ease-out),box-shadow .24s var(--ease);
  /* A long label keeps to one line where there is room, and wraps rather than
     running off the side of a phone. */
  white-space:nowrap;max-width:100%
}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn-sm{min-height:42px;padding:.5em 1.35em;font-size:.88rem}
.btn-lg{min-height:60px;padding:.95em 2.5em;font-size:1.04rem}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-700);border-color:var(--blue-700);color:#fff;box-shadow:0 10px 26px rgba(0,41,64,.22)}
.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue-300)}
.btn-outline:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-ghost-light:hover{background:#fff;color:var(--blue);border-color:#fff}
.tone-blue .btn-primary,.hero .btn-primary,.sec-cta.has-img .btn-primary{background:#fff;color:var(--blue);border-color:#fff}
.tone-blue .btn-primary:hover,.hero .btn-primary:hover,.sec-cta.has-img .btn-primary:hover{background:var(--light);border-color:var(--light);color:var(--blue)}

/* A small decorative dot grid, to break up flat areas. */
.dots{position:absolute;width:110px;height:80px;opacity:.45;pointer-events:none;
  background-image:radial-gradient(var(--up) 1.4px,transparent 1.4px);background-size:11px 11px}
.dots-tr{top:-26px;right:-14px}
.dots-bl{bottom:-24px;left:-18px}
@media (max-width:760px){.dots{display:none}}

/* =========================================================================
   6. Sticky top: ticker + header
   ========================================================================= */
.site-top{position:fixed;top:0;left:0;right:0;z-index:900}
.site-top-spacer{height:var(--top-h)}
body.has-hero .site-top-spacer{display:none}

/* --- 6a. Share ticker ---------------------------------------------------- */
.ticker{background:var(--blue-900);color:#fff;height:var(--ticker-h);overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.ticker-inner{display:flex;align-items:center;height:100%;max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--bar-gutter);gap:14px}
.ticker-tag{display:inline-flex;align-items:center;gap:7px;flex:none;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--light);padding-right:14px;border-right:1px solid rgba(255,255,255,.16)}
.ticker-dot{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(93,146,170,.8);animation:pulse 2.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(93,146,170,.7)}70%{box-shadow:0 0 0 9px rgba(93,146,170,0)}100%{box-shadow:0 0 0 0 rgba(93,146,170,0)}}
.ticker-pin{flex:none;display:inline-flex;align-items:baseline;gap:.45em;padding:0 14px 0 0;border-right:1px solid rgba(255,255,255,.16);font-size:.88rem;text-decoration:none;font-variant-numeric:tabular-nums;color:#fff}
.ticker-pin:hover{text-decoration:none}
.ticker-pin:hover .tk-p{text-decoration:underline}
.ticker-pin b{font-weight:700;letter-spacing:.05em}
.ticker-pin .tk-cur{font-size:.94em;opacity:.8}
.ticker-pin.tk-up .tk-c{color:#6ee7a8}
.ticker-pin.tk-down .tk-c{color:#ff9c86}
.ticker-pin.tk-flat .tk-c{color:rgba(255,255,255,.65)}
.ticker-pin .tk-c{font-size:.82rem;font-weight:600}
@media (max-width:700px){.ticker-pin{padding-right:10px;font-size:.82rem}.ticker-pin .tk-c{display:none}}
.ticker-track{flex:1 1 auto;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.ticker-run{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform}
.ticker.is-running .ticker-run{animation:tick var(--tick-duration,46s) linear infinite}
.ticker:not(.is-running) .tk-clone{display:none}
.ticker.is-paused .ticker-run,.ticker-track:hover .ticker-run{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:baseline;gap:.42em;font-size:.86rem;font-variant-numeric:tabular-nums}
.tk b{font-weight:700;letter-spacing:.04em;color:#fff}
.tk-p{color:rgba(255,255,255,.94)}
.tk-c{font-size:.82rem;font-weight:600}
.tk-up .tk-c{color:#6ee7a8}
.tk-down .tk-c{color:#ff9c86}
.tk-flat .tk-c{color:rgba(255,255,255,.6)}
.tk-news{color:var(--light);font-size:.85rem}
.tk-news a{color:var(--light);text-decoration:underline}
.tk-sep{padding:0 1.3em;color:rgba(255,255,255,.28);font-size:.82rem}
.tk-clone{display:inline}
.ticker-link{flex:none;display:inline-flex;align-items:center;gap:5px;color:var(--light);font-size:.84rem;font-weight:600;text-decoration:none;padding-left:14px;border-left:1px solid rgba(255,255,255,.16)}
.ticker-link:hover{color:#fff;text-decoration:underline}
.ticker-pause{flex:none;width:26px;height:26px;display:grid;place-items:center;color:rgba(255,255,255,.6);border-radius:var(--r)}
.ticker-pause:hover{color:#fff;background:rgba(255,255,255,.1)}
.ticker-pause svg{fill:currentColor}
@media (max-width:900px){.ticker-link span{display:none}.ticker-tag{font-size:.66rem;padding-right:10px}}
@media (max-width:560px){.ticker-pause,.ticker-link{display:none}}

/* --- 6b. Header ---------------------------------------------------------- */
.header{background:rgba(255,255,255,.97);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid transparent;transition:box-shadow .3s var(--ease),border-color .3s}
body.is-scrolled .header{border-bottom-color:var(--line-soft);box-shadow:0 4px 24px rgba(0,41,64,.07)}
/* The positioning frame for the drop-down panels: they hang from the header
   bar, centred on the page, rather than from the menu word they belong to —
   which is what lets every panel be the same size without one of them running
   off the side of a narrow screen. */
.header-inner{position:relative;display:flex;align-items:center;gap:clamp(16px,3vw,44px);height:var(--header-h);max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--bar-gutter);transition:height .28s var(--ease)}
body.is-scrolled .header-inner{height:66px}
/* The lockup: her globe mark beside the wordmark. */
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;line-height:1.1}
.logo-words{display:flex;flex-direction:column;justify-content:center}
.logo-mark{width:auto;height:42px;transition:height .28s var(--ease)}
.logo-full{width:auto;height:46px;transition:height .28s var(--ease)}
body.is-scrolled .logo-mark,body.is-scrolled .logo-full{height:31px}
.logo-text{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:.03em;color:var(--blue);transition:font-size .28s var(--ease)}
body.is-scrolled .logo-text{font-size:1.25rem}
.logo-sub{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);margin-top:3px}
body.is-scrolled .logo-sub{display:none}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(4px,1vw,16px)}
.nav-list{display:flex;align-items:center}
.nav-item{position:static}
.nav-link{display:inline-flex;align-items:center;gap:.35em;padding:.85rem clamp(.6rem,1vw,1rem);font-size:.99rem;font-weight:500;color:var(--blue);text-decoration:none;position:relative}
.nav-link>span{position:relative;padding-bottom:4px}
.nav-link>span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--up);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out)}
.nav-link:hover>span::after,.nav-item.is-active>.nav-link>span::after,.nav-toggle[aria-expanded="true"]>span::after{transform:scaleX(1)}
.nav-link:hover{color:var(--blue-700);text-decoration:none}
.chev{transition:transform .25s var(--ease);opacity:.55}
.nav-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px);
  background:#fff;color:var(--text);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  /* Every panel is the same box, whether the menu behind it holds three
     entries or ten: one width, one height, one place on the page. A short menu
     fills the height by letting its "Go to …" link sit at the foot of the
     left-hand column. */
  width:min(940px,calc(100vw - 40px));opacity:0;pointer-events:none;transition:opacity .24s var(--ease),transform .26s var(--ease-out);
  z-index:10;overflow:hidden
}
.nav-item.is-open .submenu{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;visibility:visible}
/* One height for every panel, set a little above the tallest menu so a
   difference in how a font renders cannot make one box taller than the rest. */
.submenu-inner{display:grid;grid-template-columns:minmax(215px,1fr) 1.9fr;min-height:410px}
.submenu-head{padding:30px 28px;background:var(--mist);border-right:1px solid var(--line-soft);display:flex;flex-direction:column}
.submenu-title{font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:var(--blue);margin:0 0 .45em}
.submenu-desc{font-size:.87rem;color:var(--text-soft);margin:0 0 1.1em;line-height:1.55}
.submenu-all{display:inline-flex;align-self:flex-start;align-items:center;gap:.4em;font-size:.86rem;font-weight:600;color:var(--blue-700);text-decoration:none;margin-top:auto;padding-top:1.4em}
.submenu-all:hover{text-decoration:underline}
.submenu-list{padding:16px;display:grid;gap:1px;align-content:start}
.submenu-list.cols-2{grid-template-columns:1fr 1fr}
.submenu-list.cols-3{grid-template-columns:repeat(3,1fr)}
/* Every entry carries its line of explanation, in one column or two. */
.submenu-list.cols-2 a,
.submenu-list.cols-3 a{padding:11px 14px}
.submenu-list a{display:block;padding:11px 14px;border-radius:var(--r);text-decoration:none;color:var(--blue);transition:background .16s}
.submenu-list a:hover,.submenu-list a:focus-visible{background:var(--mist)}
.submenu-list a[aria-current="page"]{background:var(--mist-deep)}
.sm-title{display:block;font-size:.97rem;font-weight:550;line-height:1.35}
.sm-desc{display:block;font-size:.88rem;color:var(--text-soft);margin-top:2px;line-height:1.45}

.nav-extra{display:flex;gap:6px;margin-left:10px;padding-left:16px;border-left:1px solid var(--line-soft)}
.quicklink{font-size:.88rem;font-weight:600;color:var(--blue-700);text-decoration:none;padding:.5em .9em;border-radius:var(--r-pill);transition:background .2s}
.quicklink:hover{background:var(--mist)}

.header-tools{display:flex;align-items:center;gap:4px;flex:none}
.icon-btn{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;color:var(--blue);transition:background .18s}
.icon-btn:hover{background:var(--mist)}
.burger{display:none;width:48px;height:48px;border-radius:50%;position:relative}
.burger span{display:block;width:23px;height:1.8px;background:var(--blue);margin:5px auto;transition:transform .26s var(--ease),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- 6c. Search bar ------------------------------------------------------ */
.searchbar{border-top:1px solid var(--line-soft);background:#fff;animation:slideDown .26s var(--ease-out)}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.searchbar-form{display:flex;align-items:center;gap:12px;max-width:var(--wrap);margin:0 auto;padding:18px var(--gutter)}
.searchbar-icon{color:var(--up);flex:none}
.searchbar input{flex:1;min-height:50px;border:0;background:transparent;font-family:var(--font-display);font-size:1.25rem;outline:none;color:var(--blue)}
.searchbar input::placeholder{color:#9aa5ac;font-family:var(--font);font-size:1rem}
.searchbar-close{width:44px;height:44px;font-size:1.7rem;line-height:1;color:var(--text-soft);border-radius:50%}
.searchbar-close:hover{background:var(--mist)}
.searchbar-suggest{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) 20px}
.searchbar-suggest a{display:block;padding:12px 15px;border-radius:var(--r);text-decoration:none;color:var(--blue);background:var(--mist);margin-bottom:5px;transition:background .16s}
.searchbar-suggest a:hover{background:var(--mist-deep)}
.searchbar-suggest .s-t{display:block;font-weight:600;font-size:.98rem}
.searchbar-suggest .s-x{display:block;font-size:.86rem;color:var(--text-soft);margin-top:2px}

/* --- 6d. Mobile navigation ---------------------------------------------- */
@media (max-width:1120px){
  .nav-extra{display:none}
  .nav-link{padding:.8rem .55rem;font-size:.95rem}
}
@media (max-width:980px){
  :root{--header-h:70px}
  .burger{display:block}
  /* The blur on the header has to go on small screens. backdrop-filter makes
     an element the containing block for anything fixed inside it, so the menu
     panel below was being measured against the 70px header instead of the
     screen — it opened one item tall and hid the rest behind a scroll. The bar
     is 97% opaque white in any case, so nothing is lost. */
  .header{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav{
    position:fixed;inset:var(--top-h) 0 0 0;background:#fff;margin:0;
    flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;
    padding:12px var(--gutter) 60px;
    transform:translateX(100%);transition:transform .34s var(--ease-out);
    visibility:hidden
  }
  body.nav-open{overflow:hidden}
  body.nav-open .nav{transform:none;visibility:visible}
  .nav-list{flex-direction:column;align-items:stretch;width:100%}
  .nav-item{border-bottom:1px solid var(--line-soft)}
  .nav-link{width:100%;justify-content:space-between;padding:1.2rem .2rem;font-family:var(--font-display);font-size:1.2rem;border-radius:0}
  .nav-link>span::after{display:none}
  .nav-item.is-active>.nav-link{color:var(--up)}
  .chev{width:16px;height:16px;opacity:1}
  .submenu{position:static;transform:none;opacity:1;pointer-events:auto;visibility:visible;box-shadow:none;border:0;background:var(--mist);width:auto;min-width:0;margin:0 0 14px;border-radius:var(--r-lg)}
  /* On a wide screen the open panel is centred under its menu item with a
     half-width shift. In the phone menu the panel sits in the ordinary flow,
     and that shift dragged it off the left of the screen — which is why only a
     sliver of each submenu could be seen. The open state has to undo it too,
     not just the closed state above. */
  .nav-item.is-open .submenu{transform:none}
  .submenu[hidden]{display:none !important}
  /* The one fixed size the panels share on a wide screen is dropped here:
     down the phone menu each one is simply as tall as its own list. */
  .submenu-inner{grid-template-columns:1fr;min-height:0}
  .submenu-head{border-right:0;border-bottom:1px solid var(--line);padding:18px 16px;background:transparent;display:block}
  .submenu-all{margin-top:0;padding-top:0}
  .submenu-list{grid-template-columns:1fr !important;padding:8px}
  /* One column wide again, so the line of explanation fits and comes back. */
  .submenu-list.cols-2 .sm-desc,
  .submenu-list.cols-3 .sm-desc{display:block}
  .submenu-list a{padding:13px 12px}
  .submenu-list a:hover{background:#fff}
  .nav-extra{display:flex;flex-direction:column;border:0;padding:24px 0 0;margin:0}
  .quicklink{padding:.9em .2em;font-size:1.02rem}
}

/* =========================================================================
   7. Hero
   ========================================================================= */
.hero{position:relative;background:var(--blue);color:#fff;margin-top:var(--top-h)}
.hero-slides{position:relative}
.hero-small .hero-slide{min-height:clamp(320px,42vh,440px)}
.hero-medium .hero-slide{min-height:clamp(400px,56vh,600px)}
.hero-large .hero-slide{min-height:clamp(500px,74vh,780px)}
.hero-full .hero-slide{min-height:calc(100vh - var(--top-h))}
.hero-slide{position:relative;display:grid;align-items:center;overflow:hidden}
.hero.is-carousel .hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease)}
.hero.is-carousel .hero-slide:first-child{position:relative}
.hero.is-carousel .hero-slide.is-active{opacity:1;visibility:visible;position:relative;z-index:2}
.hero-media{position:absolute;inset:0;overflow:hidden;background:var(--blue-900)}
.hero-img,.hero-video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* A very slow drift keeps a still image from feeling static. */
.hero-slide.is-active .hero-img{animation:heroDrift 26s ease-out forwards}
@keyframes heroDrift{from{transform:scale(1.07)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero-slide.is-active .hero-img{animation:none}}
.hero-media.focus-top .hero-img,.hero-media.focus-top .hero-video{object-position:50% 12%}
.hero-media.focus-bottom .hero-img,.hero-media.focus-bottom .hero-video{object-position:50% 85%}
.hero-media.focus-left .hero-img{object-position:18% 50%}
.hero-media.focus-right .hero-img{object-position:82% 50%}
.hero-video{z-index:1}
.hero-colour{position:absolute;inset:0;background:linear-gradient(140deg,var(--blue) 0%,var(--blue-500) 100%)}
.hero-veil{position:absolute;inset:0;z-index:2}
.ov-light .hero-veil{background:linear-gradient(180deg,rgba(0,24,38,.30),rgba(0,24,38,.44))}
.ov-medium .hero-veil{background:linear-gradient(180deg,rgba(0,24,38,.44),rgba(0,24,38,.60))}
.ov-strong .hero-veil{background:linear-gradient(180deg,rgba(0,24,38,.60),rgba(0,24,38,.76))}
.ov-none .hero-veil{background:linear-gradient(180deg,rgba(0,24,38,.16),rgba(0,24,38,.32))}
.al-left.ov-medium .hero-veil{background:linear-gradient(95deg,rgba(0,24,38,.76) 0%,rgba(0,24,38,.46) 52%,rgba(0,24,38,.22) 100%)}
.al-left.ov-strong .hero-veil{background:linear-gradient(95deg,rgba(0,24,38,.88) 0%,rgba(0,24,38,.64) 55%,rgba(0,24,38,.36) 100%)}

.hero-body{position:relative;z-index:3;width:100%;padding:clamp(56px,8vw,110px) 0}
.hero-text{max-width:720px}
.al-centre .hero-text{max-width:900px;margin:0 auto;text-align:center}
.al-right .hero-text{margin-left:auto;text-align:right}
.hero-eyebrow{font-family:var(--font);font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--light);margin:0 0 1.3rem}
.hero-heading{
  font-family:var(--font-display);
  font-size:clamp(2.1rem,4.6vw,3.8rem);font-weight:600;line-height:1.16;letter-spacing:-.012em;
  color:#fff;margin:0 0 .65em;text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,20,32,.32)
}
.hero-lead{font-size:clamp(1.03rem,1.35vw,1.22rem);line-height:1.65;color:rgba(255,255,255,.92);max-width:60ch;margin:0 0 2.3rem}
.al-centre .hero-lead{margin-left:auto;margin-right:auto}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.al-centre .hero-actions{justify-content:center}
.al-right .hero-actions{justify-content:flex-end}

/* Slide content eases in, one element after the other */
.hero-slide.is-active .hero-eyebrow,
.hero-slide.is-active .hero-heading,
.hero-slide.is-active .hero-lead,
.hero-slide.is-active .hero-actions{animation:heroIn .95s var(--ease-out) both}
.hero-slide.is-active .hero-heading{animation-delay:.08s}
.hero-slide.is-active .hero-lead{animation-delay:.16s}
.hero-slide.is-active .hero-actions{animation-delay:.24s}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-slide.is-active .hero-eyebrow,.hero-slide.is-active .hero-heading,
  .hero-slide.is-active .hero-lead,.hero-slide.is-active .hero-actions{animation:none}
}

.hero-controls{position:absolute;left:0;right:0;bottom:0;z-index:5;padding-bottom:clamp(20px,3vw,38px)}
.hero-controls-inner{display:flex;align-items:center;gap:12px;justify-content:center}
.hero-arrow,.hero-playpause{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.45);color:#fff;background:rgba(0,24,38,.28);backdrop-filter:blur(8px);transition:background .2s,border-color .2s,color .2s,transform .22s var(--ease-out)}
.hero-arrow:hover,.hero-playpause:hover{background:#fff;color:var(--blue);border-color:#fff;transform:scale(1.07)}
.hero-playpause svg{fill:currentColor}
.hero-playpause .ic-play{display:none}
.hero-playpause[data-playing="0"] .ic-pause{display:none}
.hero-playpause[data-playing="0"] .ic-play{display:block}
.hero-dots{display:flex;gap:10px;flex:0 0 auto;align-items:center;margin:0 6px}
.hero-dot{width:44px;height:16px;display:grid;align-items:center;position:relative}
.hero-dot::before{content:"";display:block;width:100%;height:2px;background:rgba(255,255,255,.38);border-radius:2px}
.hero-dot-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:2px;width:0;background:#fff;border-radius:2px}
.hero-dot.is-active .hero-dot-fill{width:100%}
@media (max-width:720px){
  .hero-controls-inner{gap:8px}
  .hero-dot{width:28px}
  .hero-arrow,.hero-playpause{width:40px;height:40px}
  .al-right .hero-text{text-align:left;margin-left:0}
  .al-left .hero-veil{background:linear-gradient(180deg,rgba(0,24,38,.46) 0%,rgba(0,24,38,.72) 100%) !important}
}

/* =========================================================================
   8. Page head (pages without a hero)
   ========================================================================= */
.pagehead{position:relative;background:var(--blue);color:#fff;padding:clamp(48px,7vw,92px) 0 clamp(40px,6vw,76px);overflow:hidden}
.pagehead-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.pagehead-img::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,20,32,.90) 0%,rgba(0,20,32,.64) 55%,rgba(0,20,32,.34) 100%)}
.pagehead-img{background:var(--blue-900)}
.pagehead .wrap{position:relative;z-index:2}
.crumbs{display:flex;flex-wrap:wrap;gap:.55em;font-size:.88rem;color:rgba(255,255,255,.66);margin-bottom:1.6rem}
.crumbs a{color:rgba(255,255,255,.84);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-current]{color:#fff}
.pagehead-title{font-size:clamp(2.1rem,4.2vw,3.4rem);color:#fff;max-width:20ch;text-wrap:balance}
.pagehead-sub{font-size:clamp(1.02rem,1.4vw,1.2rem);color:rgba(255,255,255,.85);max-width:62ch;margin:1.2rem 0 0}

/* =========================================================================
   9. Blocks
   ========================================================================= */
/* --- Cards --------------------------------------------------------------- */
.cards{display:grid;gap:clamp(20px,2.4vw,32px)}
.cards.cols-2{grid-template-columns:repeat(2,1fr)}
.cards.cols-3{grid-template-columns:repeat(3,1fr)}
.cards.cols-4{grid-template-columns:repeat(4,1fr)}
.card{display:flex}
.card-a{
  display:flex;flex-direction:column;width:100%;background:#fbfaf8;
  border:1px solid transparent;border-radius:3px;overflow:hidden;
  text-decoration:none;color:inherit;text-align:left;
  transition:box-shadow .42s var(--ease-out),transform .42s var(--ease-out),background .3s
}
a.card-a:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);background:#fff;text-decoration:none}
.card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--mist)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
a.card-a:hover .card-img img{transform:scale(1.07)}
/* Everything below the picture reads as a left-aligned column: a short
   accent dash, the company in small caps, the name, the description, then a
   hairline above and below the ownership row so the number is set apart from
   the prose. */
.card-body{display:flex;flex-direction:column;flex:1;align-items:flex-start;text-align:left;padding:clamp(22px,2.2vw,30px)}
.card-rule{display:block;width:34px;height:3px;border-radius:2px;background:var(--up);margin-bottom:1.15em}
.card-label{display:block;font-size:.83rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.7em}
.card-date{display:block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--up);margin-bottom:.7em}
.card-title{display:block;font-family:var(--font-display);font-size:1.42rem;font-weight:600;line-height:1.22;color:var(--blue);margin-bottom:.55em}
.card-text{display:block;font-size:.97rem;color:var(--text-soft);line-height:1.68;flex:1}
.card-more{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.35em;
  padding:.62em 1.5em;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:.9rem;font-weight:600;color:var(--blue-700);
  transition:background .25s,border-color .25s,color .25s
}
a.card-a:hover .card-more{background:var(--blue);border-color:var(--blue);color:#fff}
.card-more svg{transition:transform .25s var(--ease-out)}
a.card-a:hover .card-more svg{transform:translateX(3px)}

.cards.style-plain .card-a{background:transparent;border:0;border-top:2px solid var(--line);border-radius:0;text-align:left}
.cards.style-plain .card-body{padding:24px 0 0;align-items:flex-start}
.cards.style-plain a.card-a:hover{box-shadow:none;transform:translateY(-3px);border-top-color:var(--up)}
.cards.style-bordered .card-a{background:var(--mist);border-color:transparent}
.cards.style-bordered a.card-a:hover{background:#fff}

/* The name stays UIE blue. The company's own colour lives on the dash, the
   ownership bar and the link, so each card is identifiable without the
   headings drifting away from the brand. */
.card.accent-up .card-title,
.card.accent-msab .card-title,
.card.accent-gb .card-title{color:var(--blue)}
.card.accent-up .card-rule,.card.accent-up .card-meter-fill{background:var(--up)}
.card.accent-msab .card-rule,.card.accent-msab .card-meter-fill{background:var(--msab)}
.card.accent-gb .card-rule,.card.accent-gb .card-meter-fill{background:#8f9e84}
.card.accent-up a.card-a:hover .card-more{background:var(--up);border-color:var(--up);color:#fff}
.card.accent-msab a.card-a:hover .card-more{background:var(--msab);border-color:var(--msab);color:#fff}
.card.accent-gb a.card-a:hover .card-more{background:#6e7d64;border-color:#6e7d64;color:#fff}

/* Ownership meter inside a card */
/* These are <span> elements inside the card link, so they need an explicit
   display — width has no effect on an inline box. */
.card-meter{
  display:block;width:100%;margin-top:1.8em;padding:1.35em 0 1.5em;text-align:left;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)
}
.card-meter+.card-more{margin-top:1.35em}
.card-meter-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.85em}
.card-meter-label b{font-size:1.06rem;letter-spacing:0;color:var(--blue);font-variant-numeric:tabular-nums}
.card-meter-track{display:block;height:5px;border-radius:var(--r-pill);background:var(--mist-deep);overflow:hidden}
.card-meter-fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--up);width:0;transition:width 1.3s var(--ease-out)}
.card.accent-msab .card-meter-fill{background:var(--msab)}
.card.accent-gb .card-meter-fill{background:var(--gb)}

@media (max-width:1000px){.cards.cols-4{grid-template-columns:repeat(2,1fr)}.cards.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cards.cols-2,.cards.cols-3,.cards.cols-4{grid-template-columns:1fr}}

/* --- Split (text + media) ------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5.5vw,88px);align-items:center}
.split-text .prose{max-width:none}
.split-text .prose p{margin:0 0 1.15em}
.split-text .prose p:last-child{margin-bottom:0}
.side-left .split{direction:rtl}
.side-left .split>*{direction:ltr}
.split-media{margin:0;position:relative}
.split-media img,.split-media video{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.ratio-landscape img,.ratio-landscape video{aspect-ratio:3/2;object-fit:cover}
.ratio-portrait img,.ratio-portrait video{aspect-ratio:3/4;object-fit:cover}
.ratio-square img,.ratio-square video{aspect-ratio:1;object-fit:cover}
.split-media figcaption{font-size:.9rem;color:var(--text-soft);margin-top:.9em}
@media (max-width:860px){.split{grid-template-columns:1fr}.side-left .split{direction:ltr}}

/* --- Key figures --------------------------------------------------------- */
.stats{display:grid;gap:clamp(26px,3.4vw,48px);--pc:var(--up)}
.stats.n-2{grid-template-columns:repeat(2,1fr)}
.stats.n-3{grid-template-columns:repeat(3,1fr)}
.stats.n-4{grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;padding:0 .5rem}
.stat-value{display:flex;align-items:baseline;justify-content:center;gap:.3em;flex-wrap:wrap;margin:0 0 .5em}
.stat-num{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,3.9rem);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--up);font-variant-numeric:tabular-nums}
.tone-blue .stat-num{color:#fff}
.stat-unit{font-size:.9rem;font-weight:600;color:var(--text-soft);letter-spacing:.04em}
.tone-blue .stat-unit{color:var(--light)}
.stat-label{font-family:var(--font-display);font-size:1.08rem;font-weight:600;color:var(--blue);margin:0 0 .3em;line-height:1.35}
.tone-blue .stat-label{color:#fff}
.stat-note{font-size:.9rem;color:var(--text-soft);margin:0}
.tone-blue .stat-note{color:rgba(255,255,255,.68)}
@media (max-width:880px){.stats.n-3,.stats.n-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stats.n-2,.stats.n-3,.stats.n-4{grid-template-columns:1fr}}

/* Key figures, the annual-report way: one ruled row, each cell an icon, a
   small-caps label, the number, then a short rule and a footnote. The hairline
   between cells comes from a left border, suppressed on the first of each row
   so no line ever floats at the edge. */
.stats-icons{gap:0}
.sec-stats .sec-head+.stats-icons{margin-top:.5rem}
.stats-icons .stat{
  display:grid;grid-template-rows:auto auto auto auto auto;
  justify-items:start;align-content:start;text-align:left;
  padding:0 clamp(20px,2.6vw,42px);border-left:1px solid var(--line-soft)
}
/* With only two or three figures the columns are wide, and the gutter that
   suited four looks mean beside them — so the air between the figures grows
   as their number falls. Placed before the :first-child rule below, which has
   the same weight and must keep winning for the left-hand edge. */
.stats-icons.n-3 .stat{padding:0 clamp(26px,4.4vw,74px)}
.stats-icons.n-2 .stat{padding:0 clamp(30px,5.6vw,96px)}
.stats-icons .stat:first-child{border-left:0;padding-left:0}
.stat-icon{display:block;color:var(--pc);margin-bottom:1.5rem;line-height:0}
.stat-icon .ic{width:clamp(40px,3.6vw,52px);height:auto}
.tone-blue .stat-icon{color:var(--light)}
.stats-icons .stat-label{
  font-family:var(--font);font-size:.83rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);
  margin:0 0 .75em;min-height:2.6em
}
/* The number and its unit stay on one line — "386.50 DKK" must never break
   across two, or that column's rule and footnote drop below the others. */
.stats-icons .stat-value{justify-content:flex-start;align-items:baseline;gap:.35em;margin:0;flex-wrap:nowrap;white-space:nowrap}
.stats-icons .stat-num{color:var(--ink);font-size:clamp(2.1rem,3.9vw,3.2rem)}
.stats-icons .stat-unit{font-family:var(--font-display);font-size:.88rem;font-weight:400;color:var(--text-soft);letter-spacing:0}
.tone-blue .stats-icons .stat-num{color:#fff}
.stat-hr{display:block;width:46px;height:1px;background:#cdc4b4;margin:1.5rem 0 1.1rem}
.tone-blue .stat-hr{background:rgba(255,255,255,.3)}
.stats-icons .stat-note{margin:0;font-size:.95rem;color:var(--text-soft);min-height:1.6em}

/* Where the browser supports it, the five rows of every figure share one grid,
   so the icons, labels, numbers, rules and notes line up exactly however long
   the wording is. Older browsers fall back to the reserved heights above. */
@supports (grid-template-rows: subgrid){
  .stats-icons{grid-template-rows:repeat(5, auto)}
  .stats-icons .stat{grid-row:1 / span 5;grid-template-rows:subgrid;row-gap:0}
  .stats-icons .stat-label,.stats-icons .stat-note{min-height:0}
  .stats-icons .stat-label{align-self:end}
}
/* Below 880px the figures wrap onto two rows, and one shared grid can only
   hold a single row of them — so the subgrid is switched off here and the
   reserved heights above take over again. Without this, every figure stays
   pinned to row one and the row simply runs off the side of the screen. */
@media (max-width:880px){
  .stats-icons{grid-template-rows:none;row-gap:clamp(30px,4vw,44px)}
  .stats-icons .stat{grid-row:auto;grid-template-rows:repeat(5,auto)}
  .stats-icons .stat-label{min-height:2.6em;align-self:auto}
  .stats-icons .stat-note{min-height:1.6em}
  .stats-icons .stat:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:520px){
  .stat-icon{margin-bottom:1rem}
  .stats-icons .stat{border-left:0;padding-left:0}
  .stats-icons .stat-label,.stats-icons .stat-note{min-height:0}
}

/* --- Text with the heading beside it -------------------------------------- */
/* Named rt-* rather than split-*: "text with image" already owns .split-text
   for its text column, and sharing the name turned every one of those blocks
   into a two-column grid — which is what squashed their text. */
.rt-split{
  display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.9fr);
  gap:clamp(26px,5vw,80px);align-items:start
}
.rt-split-head .h2{margin:0}
.rt-split-head .eyebrow{margin-bottom:.8rem}
.rt-split-body .prose{max-width:74ch}
.rt-split-body .prose>p:first-child{margin-top:0}
@media (max-width:820px){
  .rt-split{grid-template-columns:1fr;gap:1.6rem}
}

/* --- Points with icons ---------------------------------------------------- */
.features{
  display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.35fr);
  gap:clamp(30px,5vw,84px);align-items:start
}
.features-head .h2{margin:0}
.features-head .eyebrow{margin-bottom:.9rem}
/* She asked for air between the heading and the text — this is that gap. */
.features-intro{margin:1.6rem 0 0;color:var(--text-soft);font-size:1.05rem;line-height:1.7;max-width:46ch}
.tone-blue .features-intro{color:rgba(255,255,255,.8)}
.features-action{margin:2rem 0 0}

.features-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.2vw,26px)}
.feature{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,24px);
  align-items:start;padding-bottom:clamp(18px,2.2vw,26px);
  border-bottom:1px solid var(--line-soft)
}
.feature:last-child{border-bottom:0;padding-bottom:0}
.tone-blue .feature{border-color:rgba(255,255,255,.16)}
.feature-icon{
  display:grid;place-items:center;width:58px;height:58px;flex:none;
  border-radius:50%;background:var(--up-soft);color:var(--up);line-height:0
}
.tone-blue .feature-icon{background:rgba(255,255,255,.1);color:var(--light)}
.feature-icon-dot{background:var(--up);width:12px;height:12px;margin:22px 23px}
.feature-title{font-family:var(--font-display);font-size:1.22rem;font-weight:600;color:var(--blue);margin:.35em 0 .3em;line-height:1.25}
.tone-blue .feature-title{color:#fff}
.feature-text{margin:0;color:var(--text-soft);line-height:1.65}
.tone-blue .feature-text{color:rgba(255,255,255,.78)}
@media (max-width:900px){
  .features{grid-template-columns:1fr;gap:2.2rem}
}
@media (max-width:520px){
  .feature-icon{width:48px;height:48px}
  .feature-icon .ic{width:28px;height:28px}
}

/* --- Newsletter sign-up --------------------------------------------------- */
.newsletter{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;gap:clamp(24px,4vw,56px);
  padding:clamp(30px,4.5vw,58px);border-radius:26px
}
.newsletter.nl-noart{grid-template-columns:1fr;max-width:640px;margin:0 auto}
.nl-sand{background:#cfcd97;color:#1d2419}
.nl-light{background:var(--mist);color:var(--text)}
.nl-blue{background:var(--blue);color:rgba(255,255,255,.88)}
.nl-white{background:var(--paper);border:1px solid var(--line);color:var(--text)}

.nl-art{color:currentColor;opacity:.92}
.nl-art svg{display:block;width:100%;height:auto;max-width:400px;margin:0 auto}
@media (max-width:820px){.nl-art{display:none}.newsletter{grid-template-columns:1fr}}

.nl-h{font-family:var(--font);font-size:clamp(1.55rem,3vw,2.15rem);font-weight:600;line-height:1.2;color:inherit;margin:0 0 .5em;letter-spacing:-.01em}
.nl-blue .nl-h{color:#fff}
.nl-text{margin:0 0 1.6rem;line-height:1.65;opacity:.85;max-width:52ch}

.nl-field{margin:0 0 1rem}
.nl-field label{display:block;font-size:.92rem;font-weight:600;margin-bottom:.5em;color:inherit}
.nl-req{color:inherit;opacity:.7}
.nl-field input{
  width:100%;min-height:56px;padding:.7em 1.3em;border:1px solid transparent;
  border-radius:var(--r-pill);background:#fff;color:var(--text);
  font:inherit;font-size:1.02rem;outline:none;
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease)
}
.nl-white .nl-field input{border-color:var(--line)}
.nl-field input::placeholder{color:#9aa5ac}
.nl-field input:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(13,100,137,.22)}

.nl-legal{margin:.2rem 0 0;font-size:.92rem;line-height:1.6;opacity:.88}
.nl-legal a{color:inherit;text-decoration:underline}

/* The honeypot: present for robots, gone for people and for screen readers. */
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.nl-actions{margin:1.5rem 0 0;display:flex;justify-content:flex-end}
.newsletter .btn-outline-dark{
  background:transparent;color:inherit;border-color:currentColor;min-width:150px
}
.newsletter .btn-outline-dark:hover{background:currentColor;border-color:currentColor}
.nl-sand .btn-outline-dark:hover{color:#cfcd97}
.nl-light .btn-outline-dark:hover,.nl-white .btn-outline-dark:hover{color:#fff;background:var(--blue);border-color:var(--blue)}
.nl-blue .btn-outline-dark:hover{color:var(--blue)}
.newsletter .btn-outline-dark[disabled]{opacity:.6;cursor:default}

.nl-status{margin:1rem 0 0;font-size:.98rem;line-height:1.6;min-height:1.6em}
.nl-status.is-ok{font-weight:600}
.nl-status.is-error{font-weight:600}
.nl-sand .nl-status.is-error,.nl-light .nl-status.is-error,.nl-white .nl-status.is-error{color:#8e2f1c}
.nl-blue .nl-status.is-error{color:#ffc9bd}
@media (max-width:520px){
  .nl-actions{justify-content:stretch}
  .newsletter .btn-outline-dark{width:100%}
}

/* --- Accordion ----------------------------------------------------------- */
.acc{margin-top:2.4rem;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-summary{display:flex;align-items:center;justify-content:space-between;gap:1.5em;padding:1.45rem .25rem;cursor:pointer;list-style:none;font-family:var(--font-display);font-size:1.16rem;font-weight:600;color:var(--blue);min-height:62px;transition:color .2s}
.acc-summary::-webkit-details-marker{display:none}
.acc-summary:hover{color:var(--up)}
.acc-ic{flex:none;transition:transform .3s var(--ease-out);color:var(--up)}
.acc-item[open] .acc-ic{transform:rotate(45deg)}
.acc-body{padding:0 .25rem 1.9rem;animation:fadeIn .35s var(--ease-out)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- Timeline ------------------------------------------------------------ */
.timeline{margin-top:2.8rem;position:relative;padding-left:clamp(0px,2vw,20px)}
.timeline::before{content:"";position:absolute;left:calc(clamp(0px,2vw,20px) + 96px);top:10px;bottom:10px;width:1px;background:var(--line)}
.tl-item{display:grid;grid-template-columns:96px 1fr;gap:clamp(26px,3.4vw,52px);padding-bottom:clamp(34px,4.5vw,58px);position:relative}
.tl-item::before{content:"";position:absolute;left:92px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--up);box-shadow:0 0 0 5px #fff;z-index:2}
.tone-light .tl-item::before{box-shadow:0 0 0 5px var(--mist)}
.tone-sand .tl-item::before{box-shadow:0 0 0 5px var(--sand-100)}
.tl-year{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--up);line-height:1.1;font-variant-numeric:tabular-nums}
.tl-title{font-size:1.25rem;margin-bottom:.5em}
.tl-img{margin:1.3em 0 0;grid-column:2}
.tl-img img{border-radius:var(--r-lg);width:100%;max-width:460px}
@media (max-width:680px){
  .timeline::before{left:4px}
  .tl-item{grid-template-columns:1fr;gap:.45rem;padding-left:28px}
  .tl-item::before{left:0;top:11px}
  .tl-img{grid-column:1}
}

/* --- People -------------------------------------------------------------- */
.people{display:grid;gap:clamp(26px,3.2vw,44px);margin-top:2.8rem}
.people.cols-2{grid-template-columns:repeat(2,1fr)}
.people.cols-3{grid-template-columns:repeat(3,1fr)}
.people.cols-4{grid-template-columns:repeat(4,1fr)}
.person-photo{aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-lg);background:var(--mist);margin-bottom:1.2rem}
.person-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2);transition:filter .5s,transform .9s var(--ease-out)}
.person:hover .person-photo img{filter:none;transform:scale(1.04)}
.person-photo-empty{display:grid;place-items:center;background:linear-gradient(150deg,var(--mist) 0%,var(--up-soft) 100%)}
.person-photo-empty span{font-family:var(--font-display);font-size:2.6rem;font-weight:600;letter-spacing:.06em;color:var(--up)}
.person-name{font-size:1.18rem;margin-bottom:.2em}
.person-role{font-size:.95rem;color:var(--up);font-weight:600;margin:0 0 .3em}
.person-meta{font-size:.89rem;color:var(--text-soft);margin:0}
.person-bio{margin-top:.9em}
.person-bio summary{display:inline-flex;align-items:center;gap:.35em;font-size:.92rem;font-weight:600;color:var(--blue-700);cursor:pointer;list-style:none;padding:.4em 0;min-height:38px}
.person-bio summary::-webkit-details-marker{display:none}
.person-bio summary svg{transition:transform .25s var(--ease-out)}
.person-bio[open] summary svg{transform:rotate(180deg)}
.person-bio .prose{margin-top:.6em;padding-top:.9em;border-top:1px solid var(--line-soft)}
@media (max-width:980px){.people.cols-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.people.cols-3,.people.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.people.cols-2,.people.cols-3,.people.cols-4{grid-template-columns:1fr;max-width:340px}}

/* --- Table --------------------------------------------------------------- */
.table-scroll{overflow-x:auto;margin-top:2.2rem;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:#fff}
.table-scroll:focus-visible{outline:2.5px solid var(--up)}
.data-table{font-size:.97rem;min-width:520px}
.data-table th,.data-table td{padding:.9em 1.15em;text-align:right;border-bottom:1px solid var(--line-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
/* The header band is set in the dark house blue so it reads as the head of the
   table at a glance, rather than merging into whatever colour the module is. */
.data-table thead th{background:var(--blue);color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;position:sticky;top:0;white-space:normal}
.data-table th:first-child,.data-table td:first-child{text-align:left;white-space:normal;min-width:200px}
.data-table tbody th{font-weight:550;color:var(--blue)}
.data-table tbody tr{transition:background .16s}
.data-table tbody tr:hover{background:var(--mist)}
.data-table .is-total,.data-table tr:has(.is-total) td{font-weight:700;color:var(--blue);border-top:1.5px solid var(--blue)}
.table-note{font-size:.9rem;color:var(--text-soft);margin-top:1em}

/* --- Downloads ----------------------------------------------------------- */
.dl-list{margin-top:2.2rem;border-top:1px solid var(--line)}
.dl-item{border-bottom:1px solid var(--line)}
.dl-item>a{display:flex;align-items:center;gap:1.2rem;padding:1.2rem .4rem;text-decoration:none;color:inherit;min-height:70px;transition:background .2s,padding-left .3s var(--ease-out)}
.dl-item>a:hover{background:var(--mist);padding-left:1.1rem;text-decoration:none}
.dl-ic{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--mist);color:var(--up);transition:background .25s,color .25s}
.dl-item>a:hover .dl-ic{background:var(--up);color:#fff}
.dl-body{flex:1;min-width:0}
.dl-title{display:block;font-size:1.05rem;font-weight:600;color:var(--blue);line-height:1.35}
.dl-desc{display:block;font-size:.92rem;color:var(--text-soft);margin-top:.15em}
.dl-meta{display:flex;align-items:center;gap:.9rem;flex:none;color:var(--text-soft);font-size:.88rem}
.dl-ext{font-size:.72rem;font-weight:700;letter-spacing:.09em;padding:.28em .7em;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--blue-700)}
.dl-arrow{color:var(--up)}
@media (max-width:620px){
  .dl-item a{flex-wrap:wrap;gap:.7rem}
  .dl-meta{width:100%;padding-left:calc(44px + 1.2rem)}
  .dl-arrow{margin-left:auto}
}

/* --- News ---------------------------------------------------------------- */
.news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:1.8rem}
.news-head .sec-head{text-align:left;margin:0}
.news-head .sec-intro{margin-left:0}
.news-filter{display:flex;align-items:center;gap:.7em;font-size:.92rem}
.news-filter select,.news-selects select{min-height:48px;padding:.4em 2.4em .4em 1em;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23002940' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1em center;-webkit-appearance:none;appearance:none;color:var(--blue);font-weight:550}
.news-list{border-top:1px solid var(--line)}
.news-item{border-bottom:1px solid var(--line)}
.news-item a{display:flex;align-items:center;gap:1.5rem;padding:1.3rem .4rem;text-decoration:none;color:inherit;min-height:76px;transition:background .2s,padding-left .3s var(--ease-out)}
.news-item a:hover{background:var(--mist);padding-left:1.1rem;text-decoration:none}
.news-date{flex:none;width:112px;font-size:.86rem;font-weight:700;letter-spacing:.05em;color:var(--up);font-variant-numeric:tabular-nums;text-transform:uppercase}
.news-body{flex:1;min-width:0}
.news-title{display:block;font-family:var(--font-display);font-size:1.14rem;font-weight:600;color:var(--blue);line-height:1.35}
.news-sum{display:block;font-size:.93rem;color:var(--text-soft);margin-top:.25em}
.news-tag{flex:none;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);padding:.35em .9em;background:var(--mist);border-radius:var(--r-pill)}
.news-arrow{flex:none;color:var(--up);transition:transform .25s var(--ease-out)}
.news-item a:hover .news-arrow{transform:translateX(4px)}
@media (max-width:620px){
  .news-item a{flex-wrap:wrap;gap:.5rem;align-items:flex-start}
  .news-date{width:100%}
  /* The type badge is a long word. Left on the same line as the title it
     squeezes it down to one word per line, so on a phone each gets a row. */
  .news-body{flex:1 1 100%;width:100%}
  .news-tag{font-size:.74rem;padding:.3em .8em}
  .news-arrow{display:none}
}

/* --- Share price panel --------------------------------------------------- */
.sp-card{border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:clamp(26px,3.2vw,46px);background:#fff}
.sec-shareprice.tone-blue .sp-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.sp-top{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;align-items:flex-start;margin-bottom:2rem}
.sp-label{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin:0 0 .6em}
.tone-blue .sp-label{color:var(--light)}
.sp-sym{opacity:.7;font-weight:500}
.sp-price{display:flex;align-items:baseline;gap:.4em;margin:0 0 .25em}
.sp-num{font-family:var(--font-display);font-size:clamp(2.7rem,5.2vw,4rem);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--blue);font-variant-numeric:tabular-nums}
.tone-blue .sp-num{color:#fff}
.sp-cur{font-size:1.1rem;font-weight:600;color:var(--text-soft)}
.tone-blue .sp-cur{color:var(--light)}
.sp-change{font-size:1.1rem;font-weight:650;margin:0;font-variant-numeric:tabular-nums}
.sp-details{display:grid;grid-template-columns:repeat(2,auto);gap:.8rem 2.4rem;margin:0}
.sp-details div{display:flex;flex-direction:column}
.sp-details dt{font-size:.78rem;color:var(--text-soft);letter-spacing:.1em;text-transform:uppercase}
.tone-blue .sp-details dt{color:var(--light)}
.sp-details dd{margin:0;font-family:var(--font-display);font-size:1.14rem;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
.tone-blue .sp-details dd{color:#fff}
.sp-chart{width:100%;height:clamp(160px,22vw,220px);color:var(--up)}
.sp-scale{display:flex;justify-content:space-between;font-size:.84rem;color:var(--text-soft);margin-top:.6em}
.tone-blue .sp-scale{color:rgba(255,255,255,.7)}
.sp-foot{font-size:.88rem;color:var(--text-soft);margin:1.5em 0 0}
.tone-blue .sp-foot{color:rgba(255,255,255,.6)}
.sb-up{color:var(--pos)}
.sb-down{color:var(--neg)}
.sb-flat{color:var(--text-soft)}
.tone-blue .sb-up{color:#74e6a8}
.tone-blue .sb-down{color:#ffa78f}
.sb-spark-up{color:var(--pos)}
.sb-spark-down{color:var(--neg)}
.sb-spark-flat{color:var(--up)}

/* --- Pull quote ---------------------------------------------------------- */
.pullquote{margin:0;text-align:center;position:relative}
.pq-img{width:100px;height:100px;border-radius:50%;object-fit:cover;margin:0 auto 1.8rem}
.pullquote blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.4rem,2.9vw,2.15rem);line-height:1.42;color:var(--blue);font-style:italic}
.tone-blue .pullquote blockquote{color:#fff}
.pullquote blockquote::before{content:"\201C";display:block;font-family:var(--font-display);font-size:4.5rem;line-height:.55;color:var(--up);margin-bottom:.18em;font-style:normal}
.pullquote figcaption{margin-top:1.8rem;font-style:normal}
.pq-name{display:block;font-weight:650;color:var(--blue);font-size:1.02rem}
.tone-blue .pq-name{color:#fff}
.pq-role{display:block;font-size:.93rem;color:var(--text-soft);margin-top:.2em}
.tone-blue .pq-role{color:var(--light)}

/* --- CTA ----------------------------------------------------------------- */
.sec-cta{position:relative;overflow:hidden}
.sec-cta.has-img{background:var(--blue-900);color:#fff}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.sec-cta .wrap{position:relative;z-index:2}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(26px,4vw,68px);flex-wrap:wrap}
.cta-h{font-size:clamp(1.7rem,3.2vw,2.5rem);color:inherit;margin-bottom:.4em;max-width:22ch;text-wrap:balance}
.tone-blue .cta-h,.sec-cta.has-img .cta-h{color:#fff}
.cta-h-sub{font-size:clamp(1.3rem,2.1vw,1.75rem)}
.cta-t{font-size:1.08rem;max-width:56ch;margin:0;opacity:.9}
.cta-a{margin:0;flex:none}

/* --- Logos --------------------------------------------------------------- */
.logos-h{font-family:var(--font);font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);text-align:center;margin-bottom:2.4rem}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(30px,5.5vw,78px)}
.logos img{height:44px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.logos a:hover img{filter:none;opacity:1}
.logo-word{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--blue)}
.logos a{text-decoration:none}

/* --- Contact ------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,76px);align-items:start}
.contact-card{font-style:normal;margin-top:1.8rem;padding:1.8rem;background:var(--mist);border-radius:var(--r-lg);font-size:1.02rem;line-height:1.8}
.contact-row{display:flex;align-items:center;gap:.65em;margin-top:.55em}
.contact-row svg{color:var(--up);flex:none}
.contact-map{border-radius:var(--r-lg);overflow:hidden;min-height:340px;background:var(--mist)}
.contact-map iframe{width:100%;height:100%;min-height:340px;display:block}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* --- Embed --------------------------------------------------------------- */
/* --- The cookie notice ----------------------------------------------------
   A card in the corner rather than a wall across the page: it asks, it does
   not trap. Accept and refuse are the same size and sit next to one another,
   because a choice is only a choice when both answers cost the same. */
.cc{position:fixed;left:0;bottom:0;z-index:120;padding:clamp(12px,2vw,22px);max-width:min(560px,100%)}
.cc[hidden]{display:none}
.cc-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:0 18px 50px rgba(0,41,64,.20);padding:clamp(20px,2.4vw,28px)
}
.cc-title{font-family:var(--font-display);font-size:1.18rem;font-weight:700;color:var(--blue);margin:0 0 .5em}
.cc-text{margin:0;font-size:.94rem;line-height:1.6;color:var(--text-soft)}
.cc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.3rem}
.cc-actions .btn{flex:1 1 auto;min-height:46px;padding:.6em 1.3em;font-size:.92rem}
.cc-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em 1.4em;
  margin:1.1rem 0 0;font-size:.86rem
}
.cc-foot a{color:var(--text-soft)}
.cc-link{
  background:none;border:0;padding:0;font:inherit;color:var(--up);font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px
}
.cc-link:hover{color:var(--blue)}

.cc-opts{margin:1.4rem 0 0;padding:1.2rem 0 0;border-top:1px solid var(--line);display:grid;gap:1.1rem}
.cc-switch{display:grid;grid-template-columns:44px 1fr;gap:.9em;align-items:start;cursor:pointer}
.cc-switch input{position:absolute;opacity:0;width:0;height:0}
.cc-track{
  width:44px;height:25px;border-radius:999px;background:var(--line);
  position:relative;transition:background .2s;margin-top:.15em
}
.cc-track::after{
  content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s
}
.cc-switch input:checked + .cc-track{background:var(--up)}
.cc-switch input:checked + .cc-track::after{transform:translateX(19px)}
.cc-switch input:disabled + .cc-track{background:var(--blue-500);opacity:.55}
.cc-switch input:focus-visible + .cc-track{outline:2.5px solid var(--up);outline-offset:3px}
.cc-opt-name{display:block;font-weight:600;color:var(--blue);font-size:.95rem}
.cc-opt-name em{font-style:normal;font-weight:400;color:var(--text-soft)}
.cc-opt-desc{display:block;margin-top:.25em;font-size:.86rem;line-height:1.55;color:var(--text-soft)}
/* The chat bubble shares this corner of the screen, so it stands aside until
   the visitor has answered. */
.cc-open .chat-launch,.cc-open .to-top{display:none}
@media (max-width:620px){
  .cc{max-width:100%;padding:10px}
  .cc-actions .btn{flex:1 1 100%}
}

/* --- A tool waiting for permission ---------------------------------------- */
.embed-gate{
  display:grid;align-content:center;justify-items:start;gap:.2rem;
  min-height:min(var(--embed-h),320px);padding:clamp(24px,3vw,40px);
  background:var(--mist);border-radius:var(--r-lg)
}
html[data-consent~="external"] .embed-gate[data-consent-gate="external"],
html[data-consent~="statistics"] .embed-gate[data-consent-gate="statistics"]{display:none}
.embed-gate[hidden]{display:none}
.embed-gate-title{
  font-family:var(--font-display);font-size:1.12rem;font-weight:700;color:var(--blue);margin:0 0 .4em
}
.embed-gate-text{margin:0;max-width:56ch;color:var(--text-soft);line-height:1.65;font-size:.95rem}
.embed-gate-text strong{color:var(--blue)}
.embed-gate-actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.4rem 0 0}
/* While the gate is up the frame takes no room at all, and the module shrinks
   to the height of the gate rather than holding open the space the tool would
   have needed. */
.embed-gate:not([hidden]) ~ .embed-frame{display:none}
.embed:has(.embed-gate:not([hidden])){min-height:0}
html[data-consent~="external"] .embed:has(.embed-gate[data-consent-gate="external"]),
html[data-consent~="statistics"] .embed:has(.embed-gate[data-consent-gate="statistics"]){min-height:var(--embed-h)}

/* --- An external tool set into the page -----------------------------------
   No card, no border, no white panel: the tool sits straight on the section
   the way the rest of the modules do, so an investor tool from Euroland reads
   as part of the page rather than as a window cut into it. The frame is given
   room to spare — on a matching background the spare room cannot be seen,
   whereas a frame that is too short shows a scrollbar of its own. */
.embed{margin-top:2.2rem;background:none;border:0;border-radius:0;min-height:var(--embed-h)}
.embed-frame{width:100%;height:var(--embed-h);border:0;display:block;background:transparent}
.embed iframe{max-width:100%}
/* Kept for anything that really is a framed widget rather than a page module. */
.embed-boxed{border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;background:#fff}

/* --- Anchor nav ---------------------------------------------------------- */
.anchors{background:#fff;border-bottom:1px solid var(--line-soft)}
.anchors.is-sticky{position:sticky;top:var(--top-h);z-index:500}
body.is-scrolled .anchors.is-sticky{top:calc(var(--ticker-h) + 66px)}
.anchors ul{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;justify-content:center}
.anchors ul::-webkit-scrollbar{display:none}
.anchors a{display:inline-block;padding:1.1rem 1.2rem;font-size:.95rem;font-weight:600;color:var(--blue);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:border-color .25s,color .25s}
.anchors a:hover,.anchors a.is-current{border-bottom-color:var(--up);color:var(--up)}

/* --- Spacer -------------------------------------------------------------- */
.spacer-small{height:36px}.spacer-medium{height:72px}.spacer-large{height:124px}
.spacer.has-line{display:flex;align-items:center}
.spacer.has-line .wrap{width:100%}

/* --- Search results ------------------------------------------------------ */
.search-page-form{display:flex;gap:12px;margin-bottom:2.8rem}
.search-page-form input{flex:1;min-height:58px;padding:0 1.3em;border:1px solid var(--line);border-radius:var(--r-pill);font-size:1.05rem}
.search-page-form input:focus{border-color:var(--up);outline:none}
.results{border-top:1px solid var(--line)}
.results li{border-bottom:1px solid var(--line)}
.result-link{display:block;padding:1.5rem .3rem;text-decoration:none;color:inherit;transition:background .2s,padding-left .3s var(--ease-out)}
.result-link:hover{background:var(--mist);padding-left:1.1rem;text-decoration:none}
.result-kind{display:block;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--up);margin-bottom:.4em}
.result-title{display:block;font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:var(--blue);margin-bottom:.3em}
.result-x{display:block;font-size:.96rem;color:var(--text-soft);line-height:1.6}

/* =========================================================================
   10. Share board (footer widget)
   ========================================================================= */
.shareboard{background:var(--blue);color:#fff;padding:clamp(44px,5.5vw,72px) 0}
.shareboard-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1.25fr) auto;gap:clamp(30px,4vw,68px);align-items:center}
.sb-eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--light);margin:0 0 1.1rem}
.sb-price-row{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap;margin-bottom:.8rem}
.sb-price{display:flex;align-items:baseline;gap:.35em}
.sb-value{font-family:var(--font-display);font-size:clamp(3rem,6vw,4.6rem);font-weight:600;line-height:.95;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.sb-cur{font-size:1.15rem;font-weight:600;color:var(--light)}
.sb-change{display:inline-flex;align-items:baseline;gap:.4em;font-size:1.1rem;font-weight:650;font-variant-numeric:tabular-nums;padding:.35em .95em;border-radius:var(--r-pill);background:rgba(255,255,255,.1)}
.sb-change.sb-up{color:#74e6a8}
.sb-change.sb-down{color:#ffa78f}
.sb-change.sb-flat{color:rgba(255,255,255,.75)}
.sb-arrow{font-size:.8em}
.sb-meta{font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.7);margin:0 0 1.4rem}
.sb-delayed{opacity:.75}
.sb-actions{display:flex;gap:10px;flex-wrap:wrap}
.sb-chart{min-width:0}
.sb-spark{width:100%;height:clamp(96px,12vw,130px);color:var(--light)}
.sb-scale{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;color:rgba(255,255,255,.65);margin-top:.6em;flex-wrap:wrap}
.sb-range{font-variant-numeric:tabular-nums}
.sb-nochart{display:grid;place-items:center;min-height:90px;padding:18px;border:1px dashed rgba(255,255,255,.22);border-radius:var(--r-lg);color:rgba(255,255,255,.6);font-size:.88rem;text-align:center}
.sb-nochart p{margin:0}
.sb-others{border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(22px,2.5vw,38px);min-width:210px}
.sb-others-title{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--light);margin:0 0 1rem}
.sb-others li{display:grid;grid-template-columns:1fr auto auto;gap:.5rem 1rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.93rem}
.sb-others li:last-child{border-bottom:0}
.o-name{font-weight:600}
.o-price{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.88)}
.o-price small{font-size:.78em;opacity:.7}
.o-chg{font-variant-numeric:tabular-nums;font-weight:600;font-size:.88rem}
.sb-disclaimer{font-size:.85rem;color:rgba(255,255,255,.55);margin:clamp(26px,3vw,38px) 0 0;max-width:80ch}
@media (max-width:1100px){
  .shareboard-grid{grid-template-columns:1fr 1fr}
  .sb-others{grid-column:1/-1;border-left:0;border-top:1px solid rgba(255,255,255,.18);padding:1.3rem 0 0}
  .sb-others ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 2rem}
}
@media (max-width:760px){.shareboard-grid{grid-template-columns:1fr}}

/* =========================================================================
   11. Footer
   ========================================================================= */
.footer{background:var(--blue-900);color:rgba(255,255,255,.76);padding:clamp(52px,6.5vw,86px) 0 34px;font-size:.97rem}

/* Brand block on the left, then the link columns SIDE BY SIDE.
   NOTE: repeat(auto-fit, …) must not be combined with other tracks — doing so
   invalidates the whole declaration and collapses the footer into one column.
   The column count is set explicitly per number of link columns instead. */
.footer-grid{
  display:grid;
  grid-template-columns:minmax(240px,1.5fr) repeat(var(--footer-cols,3),minmax(140px,1fr));
  gap:clamp(30px,4vw,60px);
  padding-bottom:clamp(34px,4vw,56px);
  align-items:start
}
@media (max-width:1040px){
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .footer-brand{grid-column:1/-1;max-width:520px}
}
/* Two columns is still 'side by side' on a phone — only the very narrowest
   screens fall back to a single column. */
@media (max-width:680px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:34px 22px}}
@media (max-width:340px){.footer-grid{grid-template-columns:1fr}}

.footer-logo{height:44px;width:auto;margin-bottom:1.4rem;filter:brightness(0) invert(1)}
.footer-logotext{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:#fff;letter-spacing:.03em;margin:0 0 1rem}
.footer-intro{font-size:.96rem;line-height:1.7;max-width:40ch;margin-bottom:1.6rem}
.footer-address{font-style:normal;line-height:1.85;font-size:.96rem}
.footer-address strong{color:#fff;font-weight:600}
.footer-address a{color:var(--light);text-decoration:none}
.footer-address a:hover{color:#fff;text-decoration:underline}
.footer-h{font-family:var(--font);font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--light);margin-bottom:1.3rem}
.footer-col li{margin-bottom:.7rem}
.footer-col a{display:inline-flex;align-items:center;gap:.4em;color:rgba(255,255,255,.76);text-decoration:none;line-height:1.5;padding:.12em 0;transition:color .2s}
.footer-col a:hover{color:#fff;text-decoration:underline}
.ext{opacity:.55}
.footer-bottom{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;align-items:center;justify-content:space-between;padding-top:30px;border-top:1px solid rgba(255,255,255,.12);font-size:.9rem}
.copyright{margin:0;color:rgba(255,255,255,.55)}
.footer-legal{display:flex;flex-wrap:wrap;gap:1.5rem}
.footer-legal a{color:rgba(255,255,255,.62);text-decoration:none}
.footer-legal a:hover{color:#fff;text-decoration:underline}
.footer-admin{opacity:.45}
/* A button, because it opens the choice again rather than going anywhere. */
.footer-cookie{
  background:none;border:0;padding:0;font:inherit;font-size:inherit;
  color:rgba(255,255,255,.62);cursor:pointer
}
.footer-cookie:hover{color:#fff;text-decoration:underline}

.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:var(--r);background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);z-index:600;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--up)}
@media (max-width:600px){.to-top{right:14px;bottom:96px;width:42px;height:42px}}

/* =========================================================================
   12. Chat assistant
   ========================================================================= */
.chat{position:fixed;right:22px;bottom:22px;z-index:800;font-size:16px}
.chat-launch{
  display:inline-flex;align-items:center;gap:.6em;
  height:58px;padding:0 1.6em 0 1.2em;border-radius:var(--r-pill);
  background:var(--blue);color:#fff;box-shadow:var(--shadow);
  font-weight:600;font-size:.98rem;transition:background .22s,transform .3s var(--ease-out),box-shadow .3s
}
.chat-launch:hover{background:var(--blue-700);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.chat-launch-icon{display:grid;place-items:center;flex:none}
.chat.is-open .chat-launch{transform:scale(.9);opacity:0;pointer-events:none}
.chat-panel{
  position:absolute;right:0;bottom:0;width:min(420px,calc(100vw - 32px));
  max-height:min(640px,calc(100vh - 110px));
  display:flex;flex-direction:column;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;border:1px solid var(--line-soft);
  animation:chatIn .3s var(--ease-out)
}
@keyframes chatIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:17px 19px;background:var(--blue);color:#fff}
.chat-head-id{display:flex;align-items:center;gap:.75em}
.chat-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);flex:none}
.chat-title{display:block;font-family:var(--font-display);font-weight:600;font-size:1.06rem;line-height:1.2}
.chat-sub{display:block;font-size:.83rem;color:var(--light);margin-top:1px}
.chat-close{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#fff;flex:none}
.chat-close:hover{background:rgba(255,255,255,.15)}
.chat-log{flex:1;overflow-y:auto;padding:19px;background:var(--mist);display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg{display:flex;max-width:100%;animation:msgIn .35s var(--ease-out)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg-bot{justify-content:flex-start}
.msg-user{justify-content:flex-end}
.bubble{max-width:88%;padding:13px 17px;border-radius:14px;font-size:.97rem;line-height:1.6}
.msg-bot .bubble{background:#fff;color:var(--text);border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
.msg-user .bubble{background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.bubble p{margin:0 0 .6em}
.bubble p:last-child{margin:0}
.bubble strong{color:var(--blue);font-weight:650}
.msg-user .bubble strong{color:#fff}
.bubble a{color:var(--blue-700)}
.msg-user .bubble a{color:#fff}
.bubble-links-h{margin:13px 0 7px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);padding-top:11px;border-top:1px solid var(--line-soft)}
.bubble-links{display:flex;flex-direction:column;gap:5px}
.bubble-links a{
  display:flex;flex-direction:column;gap:1px;text-decoration:none;
  padding:.5em .7em .55em 1.6em;position:relative;border-radius:9px;
  background:var(--mist);transition:background .2s,transform .2s var(--ease-out)
}
.bubble-links a:hover{background:var(--up-soft,#dceaf1);text-decoration:none;transform:translateX(2px)}
.bubble-links a::before{content:"→";position:absolute;left:.62em;top:.5em;color:var(--up);font-weight:700}
.bl-t{font-size:.9rem;font-weight:650;color:var(--blue-700);line-height:1.3}
.bl-n{font-size:.75rem;color:var(--text-soft);letter-spacing:.02em}
.chat-chips{display:flex;flex-wrap:wrap;gap:7px;padding-left:2px}
.chip{padding:.6em 1.1em;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:.88rem;color:var(--blue-700);font-weight:550;text-align:left;transition:border-color .2s,background .2s,transform .2s var(--ease-out)}
.chip:hover{border-color:var(--up);background:var(--up-soft);transform:translateY(-1px)}
.typing{display:inline-flex;gap:4px;padding:4px 2px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--up);animation:blink 1.3s infinite}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-form{display:flex;align-items:center;gap:8px;padding:13px 15px;border-top:1px solid var(--line-soft);background:#fff}
.chat-form input{flex:1;min-height:48px;padding:0 1.1em;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.98rem}
.chat-form input:focus{border-color:var(--up);outline:none}
.chat-send{width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none;transition:background .2s,transform .2s var(--ease-out)}
.chat-send:hover{background:var(--up);transform:scale(1.06)}
.chat-foot{margin:0;padding:0 17px 13px;font-size:.82rem;color:var(--text-soft);background:#fff;line-height:1.5}
@media (max-width:520px){
  .chat{right:12px;bottom:12px;left:auto}
  .chat-launch{height:54px;padding:0 1.2em 0 .9em;font-size:.94rem}
  .chat-panel{width:calc(100vw - 24px);max-height:calc(100vh - 100px)}
}
@media (max-width:380px){
  .chat-launch-label{display:none}
  .chat-launch{width:54px;padding:0;justify-content:center}
}

/* =========================================================================
   13. Reveal on scroll
   ========================================================================= */
/* Content is visible by default. The hidden state is added by JavaScript
   only, so the site is never blank if a script fails to load. */
.js-reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.js-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal{opacity:1;transform:none}}

/* =========================================================================
   14. Print
   ========================================================================= */
@media print{
  .site-top,.chat,.to-top,.shareboard,.hero-controls,.anchors,.dots{display:none !important}
  body{font-size:11pt;color:#000}
  .site-top-spacer{display:none}
  .hero{margin-top:0;color:#000;background:none}
  .hero-media{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .section{padding:14pt 0;break-inside:avoid}
}

/* Footer lockup */
.footer-lockup{display:flex;align-items:center;gap:13px;margin-bottom:1rem}
.footer-mark{width:auto;height:52px;flex:none}
.footer-lockup .footer-logotext{margin:0}

/* The pull quote sits in the narrow column, which is left-aligned everywhere
   else on the site. A quotation belongs in the middle of the page. */
.sec-quote .wrap-narrow>*{margin-left:auto;margin-right:auto}

/* An uploaded icon keeps its own colours and its own proportions. */
.ic-file{object-fit:contain;display:block}
.stat-icon .ic-file{width:clamp(62px,6.5vw,84px);height:auto}
.feature-icon .ic-file{width:34px;height:34px}

/* --- Report download ------------------------------------------------------ */
.wrap-flush{width:100%;max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--gutter)}
.report{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;gap:clamp(28px,5vw,72px)
}
.report-left{direction:rtl}
.report-left>*{direction:ltr}
.report-text-inner{max-width:32rem}

/* The heading, eyebrow and buttons are the site's ordinary ones, so this
   module sits in the same rhythm as the rest of the page. */
.report-h{margin:0}
.report-lead{margin:1.4rem 0 0;font-size:1.06rem;line-height:1.7;color:var(--text-soft);max-width:38ch}
.tone-blue .report-lead{color:rgba(255,255,255,.8)}
.report-action{margin:2.2rem 0 0;display:flex;flex-wrap:wrap;gap:14px}
.report-action .btn svg{transition:transform .25s var(--ease-out)}
.report-action .btn:hover svg{transform:translateX(3px)}

.report-media{border-radius:4px;overflow:hidden}
.report-media img{width:100%;height:auto;display:block}

/* On a wide screen the photograph runs off the edge of the page, the way it
   does in the printed layout. The section clips its own overflow so the
   scrollbar's width can never turn this into a sideways scroll. */
@media (min-width:1100px){
  .sec-report{overflow-x:clip}
  .sec-report .wrap-flush{
    max-width:none;padding-right:0;
    /* --wrap, not --wrap-wide: this is the same left edge as .wrap, so the
       heading lines up with "Five principles" and the rest of the page. */
    padding-left:max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)))
  }
  .report-right .report-media{border-radius:0}
}
@media (max-width:860px){
  .report{grid-template-columns:1fr;gap:2.2rem}
  .report-left{direction:ltr}
  .report-media{order:2}
  .report-text{order:1}
  .report-text-inner{max-width:none}
}

/* --- Investor resources --------------------------------------------------- */
.resources{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.2vw,26px);--pc:var(--up)}
.resources.cols-2{grid-template-columns:repeat(2,1fr)}
.resources.cols-3{grid-template-columns:repeat(3,1fr)}
.resources.cols-4{grid-template-columns:repeat(4,1fr)}
.resource{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);
  padding:clamp(22px,2.6vw,32px);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.resource:hover{border-color:var(--blue-300);box-shadow:0 12px 34px rgba(0,41,64,.09)}
.tone-blue .resource{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}
.resource-head{display:flex;align-items:center;gap:14px;margin-bottom:1rem}
.resource-icon{color:var(--pc);flex:none;line-height:0}
.tone-blue .resource-icon{color:var(--light)}
.resource-title{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--blue);margin:0;line-height:1.25}
.tone-blue .resource-title{color:#fff}
.resource-text{margin:0 0 1.6rem;color:var(--text-soft);line-height:1.65}
.tone-blue .resource-text{color:rgba(255,255,255,.78)}
.resource-foot{margin-top:auto}
.resource-btn{min-height:46px}
.resource-form{margin-top:auto;padding-top:.2rem}
.resource-form .nl-field{margin-bottom:.8rem}
.resource-form .nl-field label{color:var(--blue);font-size:.88rem}
.tone-blue .resource-form .nl-field label{color:#fff}
.resource-form .nl-field input{border-color:var(--line);min-height:50px}
.resource-form .nl-legal{font-size:.86rem;color:var(--text-soft);margin:0}
.resource-form .nl-legal a{color:inherit}
.resource-form .nl-actions{margin-top:1rem;justify-content:flex-start}
.resource-form .nl-status{font-size:.92rem;margin-top:.7rem}
.resource-form .nl-status.is-error{color:#8e2f1c}
.resource-form .nl-status.is-ok{color:var(--pos)}
@media (max-width:900px){.resources.cols-3,.resources.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.resources.cols-2,.resources.cols-3,.resources.cols-4{grid-template-columns:1fr}}

/* --- Picture with a heading ----------------------------------------------- */
.figure{margin:0;text-align:center}
.figure img{display:block;width:100%;height:auto;margin:0 auto}
.figure-small img{max-width:520px}
.figure-medium img{max-width:760px}
.figure-large img{max-width:1000px}
.figure-full img{max-width:100%}
.figure figcaption{margin-top:1.4em;font-size:.95rem;color:var(--text-soft)}
.sec-intro-rich{text-align:inherit}
.sec-intro-rich p{margin:0 0 1em}
.sec-intro-rich p:last-child{margin-bottom:0}

/* --- The icon colours ----------------------------------------------------- */
/* Any element an editor can colour carries one of these classes. The colour is
   handed down as a custom property, so the same six classes drive the round
   backgrounds behind icons, the rules over the planted-area figures and the
   bars in a chart, without any of them knowing about the others.
   The default is set on the container, never on the item, so a class on the
   item always wins however the file is ordered later on. */
/* --pc is the colour itself, --pt the colour to set text in beside it, and
   --po the colour to set text in ON TOP of a solid fill of --pc: white over
   the dark ones, UIE blue over gold, which is far too pale to carry white. */
.c-navy {--pc:var(--c-navy); --pt:var(--c-navy); --po:#fff}
.c-up   {--pc:var(--c-up);   --pt:var(--c-up);   --po:#fff}
.c-msab {--pc:var(--c-msab); --pt:var(--c-msab); --po:#fff}
.c-gb   {--pc:var(--c-gb);   --pt:#6e7d64;       --po:#fff}
.c-gold {--pc:var(--c-gold); --pt:#b8860f;       --po:var(--blue)}
.c-taupe{--pc:var(--c-taupe);--pt:#7d7269;       --po:#fff}

/* --- Focus areas: a round colour behind each icon, in columns -------------- */
.pillars{list-style:none;margin:0;padding:0;display:grid;gap:clamp(34px,4.6vw,60px) clamp(26px,3.4vw,48px);--pc:var(--blue);--pt:var(--blue)}
.pillars.cols-2{grid-template-columns:repeat(2,1fr)}
.pillars.cols-3{grid-template-columns:repeat(3,1fr)}
.pillars.cols-4{grid-template-columns:repeat(4,1fr)}
.pillar{display:flex;flex-direction:column;align-items:center;text-align:center}
.pillar-icon{
  display:grid;place-items:center;width:76px;height:76px;border-radius:50%;
  background:var(--pc);color:#fff;line-height:0;margin-bottom:1.5rem;flex:none
}
.pillar-title{font-family:var(--font-display);font-size:1.22rem;font-weight:600;color:var(--pt);margin:0 0 .6em;line-height:1.25}
.pillar-text{margin:0;color:var(--text-soft);line-height:1.68;max-width:34ch}

/* The icon beside the text, on a pale tint of the same colour — the list that
   sits under UP's activities. */
.pillars-soft{gap:clamp(26px,3.2vw,44px) clamp(28px,3.4vw,52px)}
.pillars-soft .pillar{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start;column-gap:clamp(14px,1.4vw,20px);text-align:left
}
.pillars-soft .pillar-icon{
  width:62px;height:62px;margin:0;grid-row:1 / span 2;
  background:color-mix(in srgb, var(--pc) 24%, #fff);color:var(--pc)
}
.pillars-soft .pillar-title{margin:.25em 0 .45em;font-size:1.1rem}
.pillars-soft .pillar-text{max-width:none;font-size:.95rem;line-height:1.6}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pillars-soft .pillar-icon{background:var(--mist)}
}
/* A diagram and the list that explains it are one thought, so the usual band
   of space between two sections is dropped when they follow one another on the
   same white ground. */
.sec-figure:not([class*="tone-"]) + .sec-features-grid:not([class*="tone-"]){padding-top:0}
.pillars-action{margin:clamp(34px,4.5vw,54px) 0 0;text-align:center}
.tone-blue .pillar-title{color:#fff}
.tone-blue .pillar-text{color:rgba(255,255,255,.78)}
@media (max-width:900px){.pillars.cols-3,.pillars.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pillars.cols-2,.pillars.cols-3,.pillars.cols-4{grid-template-columns:1fr}}

/* --- Key figures, the plain style ----------------------------------------
   Icon, description, number — centred, with nothing underneath. Used for
   production figures, where a rule and a footnote would only add noise. */
.stats-plain .stat{justify-items:center;text-align:center;border-left:0;padding:0 clamp(12px,1.6vw,26px)}
.stats-plain .stat-icon{margin-bottom:1.1rem}
.stats-plain .stat-hr{display:none}
.stats-plain .stat-note:empty{display:none}
.stats-plain .stat-label{
  font-family:var(--font-display);font-size:1.02rem;font-weight:700;
  letter-spacing:0;text-transform:none;color:#8a7a63;margin:0 0 .5em;min-height:0
}
.stats-plain .stat-value{justify-content:center}
.stats-plain .stat-num{color:var(--pc);font-size:clamp(2.2rem,4.2vw,3.1rem)}
.stats-plain .stat-note{margin-top:.6em;min-height:0}
@supports (grid-template-rows: subgrid){
  .stats-plain .stat-label{align-self:end}
}

/* --- Charts ---------------------------------------------------------------
   Bars are plain boxes with a percentage height; the ring is one SVG circle
   per part. No charting library, nothing to download, and both print. */
.charts{display:grid;gap:clamp(34px,4.5vw,64px) clamp(28px,3.6vw,56px);margin-top:clamp(28px,3.4vw,48px);--pc:var(--up)}
.charts.cols-2{grid-template-columns:repeat(2,1fr)}
.charts.cols-3{grid-template-columns:repeat(3,1fr)}
.chart{margin:0;--ring-1:var(--pc);--ring-2:#B8CDD8;--ring-3:var(--blue);--ring-4:#DCE6EB}
.chart-title{
  /* Set like the head of a table in a report: the name of the measure, the
     unit under it, and a rule to separate the pair from the figures. */
  font-family:var(--font-display);font-size:1.06rem;font-weight:700;
  color:var(--blue);text-align:left;margin:0 0 1.5rem;line-height:1.35;
  padding-bottom:.8rem;border-bottom:1px solid #aebfc9
}
.tone-blue .chart-title{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
/* A chart standing in the column of a text module, in place of a picture. */
.split-chart{margin-top:0}

/* --- Documents standing in the column of a text module -------------------- */
/* A rule above and below holds the list together as one panel; the rows are
   banded so the eye can follow a long title across to its button. */
.split-docs{border-top:1px solid #aebfc9;border-bottom:1px solid #aebfc9;padding:clamp(22px,2.6vw,32px) 0}
.sd-head{
  font-family:var(--font-display);font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:700;
  color:var(--blue);margin:0 0 clamp(18px,2vw,26px)
}
.sd-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.2vw,16px)}
.sd-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;
  gap:clamp(12px,1.6vw,22px);
  padding:clamp(14px,1.6vw,20px) clamp(14px,1.8vw,22px);
  background:var(--mist);border-radius:var(--r)
}
.sd-title{font-weight:700;color:var(--blue);line-height:1.35;min-width:0}
.sd-btn{
  display:inline-block;white-space:nowrap;padding:.45em 1.25em;border-radius:999px;
  border:1px solid var(--up);color:var(--up);background:none;text-decoration:none;
  font-size:.86rem;font-weight:600;transition:background .18s,color .18s
}
.sd-btn:hover{background:var(--up);color:#fff}
.sd-size{white-space:nowrap;font-size:.86rem;color:var(--text-soft)}
.sd-size b{color:var(--blue);font-weight:700}
.tone-blue .split-docs{border-color:rgba(255,255,255,.3)}
.tone-blue .sd-head,.tone-blue .sd-title,.tone-blue .sd-size b{color:#fff}
.tone-blue .sd-item{background:rgba(255,255,255,.08)}
.tone-blue .sd-btn{border-color:#fff;color:#fff}
.tone-blue .sd-btn:hover{background:#fff;color:var(--blue)}
@media (max-width:560px){
  /* Too narrow for three columns: the title takes a line of its own, with the
     button and the size on the line below it. */
  .sd-item{grid-template-columns:auto minmax(0,1fr);row-gap:.75em}
  .sd-title{grid-column:1 / -1}
  .sd-btn{justify-self:start}
  .sd-size{justify-self:end}
}
.chart-cap{margin:1rem 0 0;font-size:.88rem;color:var(--text-soft);text-align:center}
.charts-note{margin:clamp(22px,2.6vw,34px) 0 0;font-size:.86rem;color:var(--text-soft)}

.bars{display:grid;grid-template-columns:repeat(var(--n),1fr);align-items:stretch;
      gap:0 clamp(6px,1vw,16px);height:clamp(150px,17vw,210px);position:relative}
.bar-col{display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
/* The column is cut at the zero line: what grows upward sits in the top half,
   what falls below it in the bottom half, and the two halves are weighted by
   the largest rise and the largest fall so one scale runs through both. */
.bar-up{flex:var(--pos,100) 0 0;min-height:0;width:100%;
        display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.bar-dn{flex:var(--neg,0) 0 0;min-height:0;width:100%;
        display:flex;flex-direction:column;justify-content:flex-start;align-items:center}
.bars.has-neg::after{
  content:"";position:absolute;left:0;right:0;top:calc(var(--pos) * 1%);
  height:1px;background:var(--line);pointer-events:none
}
.bar-dn .bar-val{margin:.55em 0 0}
.bar-val{
  font-family:var(--font-display);font-size:clamp(.95rem,1.35vw,1.18rem);font-weight:600;
  color:var(--text-soft);line-height:1;margin-bottom:.55em;font-variant-numeric:tabular-nums
}
.bar-col.is-hi .bar-val{color:var(--blue);font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:700}
.bar{
  display:block;width:100%;max-width:56px;flex:none;
  background:color-mix(in srgb, var(--pc) 42%, #fff);
  height:var(--h);transition:height 1s var(--ease-out)
}
.bar-col.is-hi .bar{background:var(--pc)}
.bar-xs{
  display:grid;grid-template-columns:repeat(var(--n),1fr);gap:0 clamp(6px,1vw,16px);
  border-top:1px solid var(--line);padding-top:.7em
}
.bar-xs span{
  text-align:center;font-size:.88rem;color:var(--text-soft);
  font-variant-numeric:tabular-nums
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .bar{background:var(--mist-deep)}
}

.ring-wrap{position:relative;display:grid;place-items:center;max-width:230px;margin:0 auto}
.ring{width:100%;height:auto;display:block}
.ring-track{fill:none;stroke:var(--line-soft)}
.ring-seg{fill:none;stroke-linecap:butt;transition:stroke-dasharray 1s var(--ease-out)}
.ring-centre{
  position:absolute;font-size:.92rem;color:var(--text-soft);
  font-family:var(--font-display);text-align:center;max-width:9ch;line-height:1.3
}
.ring-key{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.55rem}
.ring-key li{display:flex;align-items:baseline;gap:.6em;font-size:.92rem}
.ring-dot{width:10px;height:10px;border-radius:50%;flex:none;transform:translateY(1px)}
.ring-name{color:var(--text-soft);flex:1 1 auto}
.ring-pct{font-family:var(--font-display);font-weight:700;color:var(--blue);flex:none}
.ring-pct small{font-weight:400;color:var(--text-soft);font-size:.86em}

@media (max-width:860px){
  .charts.cols-3{grid-template-columns:1fr 1fr}
  .chart-ring{grid-column:1 / -1}
}
@media (max-width:560px){
  .charts.cols-2,.charts.cols-3{grid-template-columns:1fr}
  .bars{height:170px}
}

/* --- Text with picture figures (planted area) ----------------------------- */
.areas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
       gap:clamp(28px,4vw,70px);align-items:start}
.areas-nofirst{grid-template-columns:1fr}
.areas-head .h2{margin-bottom:.8em}
.areas-head .prose{font-size:1rem}
.areas-action{margin:1.8rem 0 0}
.area-figs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.6vw,38px);--pc:var(--up)}
.area-figs.n-2{grid-template-columns:repeat(2,1fr)}
.area-figs.n-3{grid-template-columns:repeat(3,1fr)}
.area-fig{display:flex;flex-direction:column}
.area-pic{display:block;overflow:hidden;border-radius:var(--r-lg);margin-bottom:1.15rem}
.area-pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.area-rule{display:block;width:38px;height:3px;background:var(--pc);margin-bottom:.9rem}
.area-label{
  display:block;font-size:.88rem;color:var(--text-soft);margin-bottom:.3em
}
.area-value{display:flex;align-items:baseline;gap:.25em;margin:0;flex-wrap:nowrap;white-space:nowrap}
.area-num{
  font-family:var(--font-display);font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:600;
  color:var(--blue);line-height:1.1;font-variant-numeric:tabular-nums
}
.area-unit{font-family:var(--font-display);font-size:clamp(1.3rem,2.1vw,1.7rem);color:var(--blue)}
.area-cap{margin:.55em 0 0;font-size:.92rem;color:var(--text-soft)}
@media (max-width:980px){
  .areas{grid-template-columns:1fr}
}
@media (max-width:520px){
  .area-figs.n-2,.area-figs.n-3{grid-template-columns:1fr}
}

/* A button under a text block */
.rt-action{margin:1.9rem 0 0}

/* --- Key figures, the framed style ----------------------------------------
   A coloured rule down the side, the number first, the wording beneath. Used
   for Schörling's financial highlights. */
.stats-framed{gap:0}
.stats-framed .stat{
  justify-items:center;text-align:center;
  border-left:2px solid var(--pc);padding:0 clamp(18px,2.4vw,38px)
}
.stats-framed .stat:first-child{border-left:2px solid var(--pc);padding-left:clamp(18px,2.4vw,38px)}
.stats-framed .stat-icon{margin-bottom:1.2rem}
.stats-framed .stat-hr{display:none}
.stats-framed .stat-value{justify-content:center;margin:0 0 .35em}
.stats-framed .stat-num{color:var(--blue);font-size:clamp(2rem,3.6vw,2.9rem)}
.stats-framed .stat-label{
  font-family:var(--font-display);font-size:1.02rem;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--blue);margin:0 0 .35em;min-height:0
}
.stats-framed .stat-note{margin:0;font-size:.88rem;color:#8a7a63;min-height:0}
@media (max-width:880px){
  .stats-framed{row-gap:clamp(28px,4vw,40px)}
  .stats-framed .stat:nth-child(odd){border-left:2px solid var(--pc);padding-left:clamp(18px,2.4vw,38px)}
}

/* --- Bars lying down ------------------------------------------------------
   Two equal halves with the zero line where they meet: a gain grows right, a
   loss grows left, and the figure is set clear of both at the end of the row. */
/* No gap between the rows, so the short border segments that draw the zero
   line meet end to end and read as one continuous rule; the breathing space
   goes on the bars instead. */
.hbars{display:grid;gap:0;margin-top:.5rem;padding:4px 0}
.hbar-row{
  display:grid;grid-template-columns:1fr 1fr minmax(48px,auto);
  align-items:stretch;column-gap:0
}
/* The two halves stretch to the full row height even when they hold no bar,
   which is what keeps the zero line unbroken past a row that only falls. */
.hbar-neg{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.hbar-pos{display:flex;align-items:center;justify-content:flex-start;min-width:0}
/* The zero line, drawn once down the whole chart rather than once per row, so
   it is a single straight line however the rows above and below it fall. */
.hbars{position:relative}
.hbars::before{
  content:"";position:absolute;top:0;bottom:0;width:1.5px;background:var(--blue);
  left:calc(var(--zero,0) * (100% - var(--valw,52px)));pointer-events:none
}
.hbar{
  display:flex;align-items:center;height:clamp(24px,2.4vw,30px);
  margin:clamp(3px,.45vw,5px) 0;
  background:color-mix(in srgb, var(--pc) 42%, #fff);min-width:2px
}
.hbar-row.is-hi .hbar{background:var(--pc)}
/* The highlighted row's fill is solid, so its label has to change colour or it
   disappears into it — which is what happened over a navy bar. */
.hbar-row.is-hi .hbar-name{color:var(--po,#fff)}
.hbar-neg .hbar{justify-content:flex-end}
.hbar-name{
  padding:0 .7em;font-size:.86rem;font-weight:600;color:var(--blue);
  white-space:nowrap;overflow:visible
}
.hbar-neg .hbar-name{direction:ltr}
.hbar-val{
  align-self:center;text-align:right;padding-left:1.1em;font-size:.88rem;font-weight:700;
  color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .hbar{background:var(--mist-deep)}
}

/* Four, five or six charts in a row — the five-year EBIT strip */
.charts.cols-4{grid-template-columns:repeat(4,1fr)}
.charts.cols-5{grid-template-columns:repeat(5,1fr)}
.charts.cols-6{grid-template-columns:repeat(6,1fr)}
.chart-sub{display:block;font-size:.84rem;font-weight:400;color:var(--text-soft);margin-top:.25em}
.charts-small{gap:clamp(20px,2.4vw,34px)}
.charts-small .chart-title{font-size:.98rem;margin-bottom:1.1rem}
.charts-small .bars{height:clamp(90px,9vw,120px);gap:0 clamp(3px,.5vw,7px)}
.charts-small .bar-val{font-size:clamp(.6rem,.75vw,.72rem);margin-bottom:.4em}
.charts-small .bar-col.is-hi .bar-val{font-size:clamp(.68rem,.85vw,.82rem)}
.charts-small .bar{max-width:26px}
.charts-small .bar-xs{gap:0 clamp(3px,.5vw,7px);padding-top:.5em}
.charts-small .bar-xs span{font-size:clamp(.55rem,.7vw,.68rem)}
@media (max-width:900px){
  .charts.cols-4,.charts.cols-5,.charts.cols-6{grid-template-columns:repeat(2,1fr)}
  .charts-small .bars{height:130px}
  .charts-small .bar-val,.charts-small .bar-xs span{font-size:.75rem}
}
@media (max-width:520px){
  .charts.cols-4,.charts.cols-5,.charts.cols-6{grid-template-columns:1fr}
}

/* --- Cards: centred text, and the wide percentage bars -------------------- */
.cards-centre .card-body{align-items:center;text-align:center}
.cards-centre .card-rule{display:none}
.cards-centre .card-text{flex:0 1 auto}
.cards-centre .card-more{margin-top:1.5em}

.card-meters{display:block;width:100%}
.card-meters+.card-more{margin-top:1.35em}
/* The bars are pushed to the foot of the card, so that in a row where one
   company has two figures and another only one, every bar still sits on the
   same line across the row. */
.cards-pill .card-meters{margin-top:auto;padding-top:1.6em}
.cards-pill .card-meter{
  display:block;width:100%;margin:0 0 .9em;padding:0;border:0;text-align:left
}
.cards-pill .card-meter:last-child{margin-bottom:0}
.card-meter-name{display:block;font-size:.86rem;color:var(--text-soft);margin-bottom:.35em}
.cards-pill .card-meter-track{
  display:block;height:22px;border-radius:var(--r-pill);
  background:#ececec;overflow:visible
}
.cards-pill .card-meter-fill{
  display:flex;align-items:center;justify-content:flex-end;
  height:100%;border-radius:var(--r-pill);background:var(--msab);
  width:0;transition:width 1.3s var(--ease-out)
}
.card-meter-num{
  font-size:.78rem;font-weight:700;color:#fff;padding-right:.9em;
  font-variant-numeric:tabular-nums;white-space:nowrap
}
/* When the bar is too short to hold its own number, the number steps outside
   and takes the bar's colour, so it is never white on white. */
.cards-pill .card-meter.is-tight .card-meter-fill{justify-content:flex-start;overflow:visible}
.cards-pill .card-meter.is-tight .card-meter-num{
  color:var(--msab);padding:0 0 0 calc(100% + .5em)
}
.card.accent-up .card-meter-fill{background:var(--up)}
.card.accent-up .card-meter.is-tight .card-meter-num{color:var(--up)}
.card.accent-gb .card-meter.is-tight .card-meter-num{color:#6e7d64}
.cards-pill .card-meter+.card-meter{margin-top:0}


/* --- A rule above a section heading --------------------------------------- */
/* A shade deeper than the hairlines used inside cards, so the rule reads as a
   divider between two sections rather than disappearing into the background. */
@media (max-width:560px){
  .btn{white-space:normal;text-align:center;padding-left:1.4em;padding-right:1.4em}
}

.sec-topline{display:block;height:1px;background:#aebfc9;margin:0 0 clamp(30px,3.6vw,52px)}

/* --- The business model, drawn as a wheel ---------------------------------
   The points are placed by angle: each one is pushed out from the middle
   along its own spoke and then turned upright again, which is the one way of
   arranging things on a circle that needs no measuring by hand. Under a
   tablet's width the wheel gives up and becomes a plain grid, since a circle
   of text does not survive a narrow screen. */
.radial{
  --rad-r:clamp(212px,26.5vw,316px);
  --rad-pw:clamp(158px,19vw,232px);
  --rad-hub:clamp(148px,18.5vw,214px);
  position:relative;
  width:min(100%, calc(2 * var(--rad-r) + var(--rad-pw)));
  aspect-ratio:1;
  margin:clamp(26px,3.4vw,44px) auto 0;
  /* The default colour belongs on the wheel, not on a point: a .c-* class set
     on a point has the same weight as a rule on the point itself, and would
     lose to it. */
  --pc:var(--up)
}
.radial-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.radial-track{fill:none;stroke:rgba(0,41,64,.10);stroke-width:3.4}
.radial-seg{fill:none;stroke-width:3.4;stroke-linecap:butt}
.radial-spoke{fill:none;stroke-width:.72;stroke-linecap:round;stroke-linejoin:round}

.radial-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--rad-hub);height:var(--rad-hub);border-radius:50%;
  display:grid;place-items:center;padding:0 1.6em;text-align:center;
  background:#fff;box-shadow:0 10px 30px rgba(0,41,64,.08)
}
.radial-hub span{
  font-family:var(--font-display);font-weight:600;color:var(--up);
  font-size:clamp(1.02rem,1.5vw,1.36rem);line-height:1.25
}
.radial-pt{
  position:absolute;left:50%;top:50%;width:var(--rad-pw);text-align:center;
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--rad-r)) rotate(calc(var(--a) * -1))
}
.radial-ic{
  display:grid;place-items:center;width:clamp(62px,7.4vw,84px);height:clamp(62px,7.4vw,84px);
  border-radius:50%;margin:0 auto .95rem;line-height:0;
  background:var(--pc);color:#fff
}
.radial-ic svg{width:56%;height:56%}
.radial-name{
  font-family:var(--font-display);font-size:clamp(1.04rem,1.35vw,1.2rem);font-weight:600;
  color:var(--blue);margin:0 0 .45em;line-height:1.25
}
.radial-text{margin:0;font-size:clamp(.84rem,1vw,.94rem);line-height:1.55;color:var(--text-soft)}
.tone-blue .radial-name{color:#fff}
.tone-blue .radial-text{color:rgba(255,255,255,.82)}
.tone-blue .radial-hub{background:rgba(255,255,255,.08)}
.tone-blue .radial-hub span{color:#fff}

@media (max-width:940px){
  .radial{
    width:100%;aspect-ratio:auto;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(30px,4.6vw,48px)
  }
  .radial-svg{display:none}
  .radial-hub,.radial-pt{position:static;transform:none;width:auto}
  .radial-hub{
    grid-column:1 / -1;height:auto;border-radius:var(--r-lg);
    padding:clamp(20px,3.4vw,30px);box-shadow:none;background:rgba(255,255,255,.7)
  }
  .radial-hub span{font-size:clamp(1.1rem,3vw,1.4rem)}
}
@media (max-width:560px){
  .radial{grid-template-columns:1fr}
}

/* --- The button an editor can put under any module ------------------------ */
.sec-foot{margin:clamp(34px,4vw,56px) 0 0;display:flex;flex-wrap:wrap;gap:14px}
.sec-foot.al-centre{justify-content:center}
.sec-foot.al-left{justify-content:flex-start}
.sec-foot.al-right{justify-content:flex-end}
.sec-foot-link{
  display:inline-flex;align-items:center;gap:.55em;font-weight:600;
  color:var(--up);text-decoration:none
}
.sec-foot-link:hover{color:var(--blue)}
.sec-foot-link svg{transition:transform .25s var(--ease-out)}
.sec-foot-link:hover svg{transform:translateX(3px)}
.tone-blue .sec-foot-link{color:#fff}

/* --- The arrow that carries you into the next section --------------------- */
/* Centred on the section, not on the text above it: a flex row of its own, so
   nothing it sits under — ragged columns, a short right-hand column — can pull
   it off centre, and the space above and below it is equal. */
.rt-scroll{
  display:flex;justify-content:center;align-items:center;
  width:100%;margin:clamp(40px,4.8vw,68px) 0 clamp(6px,.8vw,12px);text-align:center
}
.scroll-down{
  display:inline-grid;place-items:center;width:64px;height:44px;padding:0;
  background:none;border:0;cursor:pointer;color:var(--up);
  transition:transform .3s var(--ease-out),color .25s
}
.scroll-down:hover{color:var(--blue);transform:translateY(4px)}
@media (prefers-reduced-motion:no-preference){
  .scroll-down svg{animation:nudge 2.6s var(--ease-out) infinite}
}
@keyframes nudge{0%,72%,100%{transform:translateY(0)}84%{transform:translateY(5px)}}

/* --- Text beside a panel of ticked points --------------------------------- */
.cl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:start;--pc:var(--up)}
.cl-notpanel{grid-template-columns:1fr}
.cl-text .h2{margin-bottom:.7em}
.cl-text .prose{font-size:1.02rem}
.cl-panel{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.2vw,32px);
  align-items:start;background:rgba(255,255,255,.62);
  border-radius:var(--r-lg);padding:clamp(24px,2.8vw,38px)
}
.tone-light .cl-panel{background:rgba(255,255,255,.6)}
.cl-panel-ic{display:block;color:var(--pc);line-height:0;flex:none}
.cl-panel-title{
  font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-500);margin:0 0 1.1em
}
.cl-list{list-style:none;margin:0;padding:0;display:grid;gap:.9em}
.cl-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8em;align-items:start;
  font-size:.96rem;line-height:1.55;color:var(--text)}
.cl-tick{color:var(--blue);flex:none;margin-top:.24em}
.cl-lead{margin:clamp(30px,3.6vw,48px) 0 0;color:var(--text-soft);max-width:58ch;line-height:1.7}
@media (max-width:900px){.cl{grid-template-columns:1fr}}

/* --- Expandable rows ------------------------------------------------------ */
/* The card's measurements live here so the opened content can line its left
   edge up with the title above it, rather than with the edge of the card. */
.acc-rows{
  display:grid;gap:10px;margin-top:0;border-top:0;
  --acc-pad:clamp(18px,2vw,30px);
  --acc-gap:clamp(14px,1.8vw,28px);
  --acc-ic:30px;
  --acc-chev:18px
}
.acc-rows .acc-item{border:0;background:rgba(255,255,255,.66);border-radius:var(--r-lg);overflow:hidden}
/* The closed row and the opened content share one set of columns, so the
   right-hand half of the content starts exactly where the summary line above
   it starts, and the left-hand half under the title. */
.acc-rows .acc-summary,
.acc-rows .acc-body{
  display:grid;
  grid-template-columns:var(--acc-ic) minmax(0,1fr) minmax(0,1fr) var(--acc-chev);
  column-gap:var(--acc-gap)
}
.acc-rows .acc-summary{
  align-items:center;
  padding:clamp(16px,1.8vw,22px) var(--acc-pad);list-style:none
}
.acc-rows .acc-summary::-webkit-details-marker{display:none}
.acc-ic-left{display:block;color:var(--blue);line-height:0;flex:none}
.acc-rows .acc-title{font-family:var(--font-display);font-size:1.08rem;font-weight:600;color:var(--blue)}
.acc-rows .acc-sum{
  font-size:.92rem;line-height:1.55;color:var(--text-soft);
  border-left:1px solid var(--line);padding-left:clamp(14px,1.8vw,26px)
}
.acc-rows .acc-chev{color:var(--blue-500);transition:transform .3s var(--ease-out)}
.acc-rows .acc-item[open] .acc-chev{transform:rotate(180deg)}
.acc-rows .acc-body{
  align-items:start;row-gap:clamp(22px,2.6vw,34px);
  padding:.4rem var(--acc-pad) clamp(24px,2.6vw,34px)
}
/* The halves take the same two columns the title and the summary sit in; the
   first and last columns stay empty, holding the icon's and the chevron's
   width so nothing drifts out of line. */
.acc-rows .acc-cols{display:contents}
.acc-rows .acc-cols>*:nth-child(1){grid-column:2}
/* The summary line is set in from the divider that separates it from the
   title; the half underneath is set in by the same amount, so the two read as
   one column rather than two that nearly line up. */
.acc-rows .acc-cols>*:nth-child(2){
  grid-column:3;
  border-left:1px solid transparent;padding-left:clamp(14px,1.8vw,26px)
}
.acc-rows .acc-body>.prose,
.acc-rows .acc-actions{grid-column:2 / -1}
.acc-rows .acc-item[open]{background:#fff}
@media (max-width:860px){
  .acc-rows .acc-body{grid-template-columns:var(--acc-ic) minmax(0,1fr) var(--acc-chev)}
  .acc-rows .acc-cols>*:nth-child(1),
  .acc-rows .acc-cols>*:nth-child(2){grid-column:2}
}
@media (max-width:560px){
  .acc-rows .acc-body{grid-template-columns:minmax(0,1fr)}
  .acc-rows .acc-cols>*,
  .acc-rows .acc-body>.prose,
  .acc-rows .acc-actions{grid-column:1}
}
@media (max-width:900px){
  /* Icon, title and chevron on the first line; the summary underneath them,
     rather than the chevron being pushed onto a line of its own. */
  .acc-rows .acc-summary{grid-template-columns:auto minmax(0,1fr) auto;row-gap:.55em}
  .acc-ic-left{grid-column:1;grid-row:1}
  .acc-rows .acc-title{grid-column:2;grid-row:1}
  .acc-rows .acc-chev{grid-column:3;grid-row:1}
  .acc-rows .acc-sum{grid-column:2 / -1;grid-row:2;border-left:0;padding-left:0}
}

/* --- Board cards ---------------------------------------------------------- */
.pcards{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.2vw,30px)}
.pcards.cols-2{grid-template-columns:repeat(2,1fr)}
.pcards.cols-3{grid-template-columns:repeat(3,1fr)}
.pcards.cols-4{grid-template-columns:repeat(4,1fr)}
.pcard{display:flex}
.pcard-a{
  display:flex;flex-direction:column;width:100%;background:#fff;
  text-decoration:none;color:inherit;border-radius:2px;overflow:hidden;
  transition:box-shadow .38s var(--ease-out),transform .38s var(--ease-out)
}
a.pcard-a:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);text-decoration:none}
.pcard-img{display:block;overflow:hidden;background:var(--mist)}
.pcard-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--ease-out)}
a.pcard-a:hover .pcard-img img{transform:scale(1.05)}
.pcard-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1em;
  padding:clamp(16px,1.7vw,22px) clamp(16px,1.7vw,22px) clamp(18px,1.9vw,24px)
}
.pcard-words{display:block;min-width:0}
.pcard-name{display:block;font-family:var(--font-display);font-size:1.18rem;font-weight:600;color:var(--blue);line-height:1.25}
.pcard-role{display:block;font-size:.76rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-soft);margin-top:.5em}
.pcard-arrow{flex:none;color:var(--blue);line-height:0;transition:transform .28s var(--ease-out)}
a.pcard-a:hover .pcard-arrow{transform:translateX(4px)}
@media (max-width:900px){.pcards.cols-3,.pcards.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pcards.cols-2,.pcards.cols-3,.pcards.cols-4{grid-template-columns:1fr}}

/* --- Cards whose link is plain text rather than a button ------------------ */
.cards-plainlink .card-more{
  padding:0;border:0;border-radius:0;color:var(--blue-500);background:none;
  font-size:.94rem;margin-top:1.5em
}
.cards-plainlink a.card-a:hover .card-more{background:none;border:0;color:var(--blue)}
.cards-plainlink .card.accent-up a.card-a:hover .card-more,
.cards-plainlink .card.accent-msab a.card-a:hover .card-more,
.cards-plainlink .card.accent-gb a.card-a:hover .card-more{background:none;color:var(--blue)}

/* --- Expandable sections, full width -------------------------------------
   A hairline between each, the title on the left and a chevron on the right;
   everything else waits until it is opened. */
.acc-lines{display:block;border-top:1px solid var(--line)}
.acc-lines .acc-item{border:0;border-bottom:1px solid var(--line);background:none;border-radius:0}
.acc-lines .acc-summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5em;
  padding:clamp(18px,1.9vw,26px) 2px;list-style:none;min-height:0
}
.acc-lines .acc-summary::-webkit-details-marker{display:none}
.acc-lines .acc-title{font-family:var(--font-display);font-size:clamp(1.08rem,1.4vw,1.28rem);font-weight:600;color:var(--blue)}
.acc-lines .acc-summary:hover .acc-title{color:var(--blue-700)}
.acc-lines .acc-chev{flex:none;color:var(--blue-500);transition:transform .3s var(--ease-out)}
.acc-lines .acc-item[open] .acc-chev{transform:rotate(180deg)}
.acc-lines .acc-body{padding:.4rem 2px clamp(32px,3.4vw,52px)}

/* Two written columns set side by side, rather than one column of text flowed
   into two — a flowed table would break across the gap. */
/* min-width:0 on the halves, or a wide table inside one of them refuses to
   shrink and pushes the whole page sideways on a phone. */
.acc-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,72px);align-items:start}
.acc-cols>*{min-width:0}
.acc-cols .prose>:first-child{margin-top:0}
@media (max-width:860px){.acc-cols{grid-template-columns:1fr}}

.acc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8em 1.2em;margin:1.9rem 0 0}
.acc-link{
  display:inline-flex;align-items:center;gap:.55em;font-size:.94rem;font-weight:600;
  color:var(--blue-500);text-decoration:none
}
.acc-link:hover{color:var(--blue);text-decoration:none}
.acc-link svg{transition:transform .25s var(--ease-out)}
.acc-link:hover svg{transform:translateX(3px)}

/* --- Tables written inside a text field ----------------------------------
   Given the same manners as the Table block, so a table pasted into any rich
   text reads the same as one built with the block. */
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.7em 0;background:#fff}
.prose table th,.prose table td{
  padding:.78em 1.05em;text-align:left;vertical-align:top;
  font-variant-numeric:tabular-nums;border:0
}
/* The outer columns lose their side padding so the words in the first column
   start on the same line as the paragraphs above and below the table, instead
   of a cell's worth of space further in. */
.prose table th:first-child,.prose table td:first-child{padding-left:0}
/* The header and the stripes are set against the table's own white ground,
   not against the page, so a table reads the same on a white section and on a
   light blue one. */
.prose table thead th{
  background:var(--mist-deep);color:var(--blue);font-family:var(--font-display);
  font-weight:700;font-size:.9rem;letter-spacing:0;text-transform:none
}
.prose table tbody tr:nth-child(even){background:#f1f6f9}
.prose table tbody th{font-weight:550;color:var(--blue)}
.prose table td+td,.prose table th+th{white-space:nowrap}

/* Cream joins to cream, as the other bands do */
.tone-cream+.tone-cream{padding-top:0;display:flow-root}

/* A table inside a rich-text field gets a scroller of its own, but not the
   card treatment the Table block uses — it already sits inside one. */
.prose .table-scroll{border:0;background:none;border-radius:0;margin:1.7em 0}
.prose .table-scroll table{margin:0;min-width:420px}

/* --- Committee cards ------------------------------------------------------ */
.cmtes{
  list-style:none;margin:clamp(30px,3.6vw,52px) 0 0;padding:0;
  display:grid;gap:clamp(18px,2.2vw,30px);--pc:var(--blue)
}
.cmtes.cols-2{grid-template-columns:repeat(2,1fr)}
.cmtes.cols-3{grid-template-columns:repeat(3,1fr)}
.cmtes.cols-4{grid-template-columns:repeat(4,1fr)}
.cmte{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line-soft);border-radius:2px;
  padding:clamp(26px,2.8vw,38px)
}
.cmte-ic{display:block;color:var(--pc);line-height:0;margin-bottom:1.5rem}
.cmte-name{
  font-family:var(--font-display);font-size:clamp(1.24rem,1.7vw,1.5rem);font-weight:600;
  color:var(--blue);margin:0;line-height:1.25
}
.cmte-rule{display:block;width:34px;height:2px;background:var(--pc);margin:1.05em 0 1.3em}
.cmte-text{margin:0;color:var(--text-soft);line-height:1.68;font-size:.97rem}
.cmte-mlabel{
  margin:1.9em 0 .9em;padding-top:1.5em;border-top:1px solid var(--line-soft);
  font-size:.78rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--pc)
}
.cmte-people{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
.cmte-people li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2em;
  font-size:.97rem;color:var(--text)
}
.cmte-who{min-width:0}
.cmte-role{
  flex:none;font-size:.76rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-soft)
}
.cmte-more{margin:auto 0 0;padding-top:1.9em}
.cmte-more a{
  display:inline-flex;align-items:center;gap:.55em;font-size:.94rem;font-weight:600;
  color:var(--blue-500);text-decoration:none
}
.cmte-more a:hover{color:var(--blue);text-decoration:none}
.cmte-more svg{transition:transform .25s var(--ease-out)}
.cmte-more a:hover svg{transform:translateX(3px)}
@media (max-width:1000px){.cmtes.cols-3,.cmtes.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cmtes.cols-2,.cmtes.cols-3,.cmtes.cols-4{grid-template-columns:1fr}}

/* --- The portfolio, set out under sector headings -------------------------
   Each group is as wide as the number of companies in it, so a sector with one
   company takes a third of the row and a sector with two takes two thirds —
   every company column ends up the same width across the whole block. */
.pf{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(28px,3.4vw,46px);--pc:var(--up)}
.pf-group{
  flex:var(--n,1) 1 0;min-width:0;
  padding-left:clamp(22px,2.8vw,44px);border-left:1px solid #c6d4dc
}
.pf-group:first-child{padding-left:0;border-left:0}
/* The sector name sits above its rule rather than alongside it, so the line
   never runs into the words and reads plainly as the head of the group. */
.pf-label{
  display:block;margin:0 0 clamp(22px,2.6vw,34px);
  font-size:.78rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-500)
}
.pf-label>span:first-child{display:block}
/* Kept so a saved page that still carries the old rule element draws nothing. */
.pf-rule{display:none}
.pf-list{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(var(--n,1),minmax(0,1fr));
  gap:clamp(22px,2.8vw,44px)
}
.pf-item{display:flex;flex-direction:column}
.pf-ic{
  display:grid;place-items:center;width:72px;height:72px;border-radius:50%;
  background:color-mix(in srgb, var(--pc) 24%, #fff);color:var(--pc);
  line-height:0;margin-bottom:1.6rem
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pf-ic{background:var(--mist)}
}
.pf-name{
  font-family:var(--font-display);font-size:clamp(1.24rem,1.7vw,1.5rem);font-weight:600;
  color:var(--blue);margin:0 0 .55em;line-height:1.25
}
.pf-text{margin:0;color:var(--text-soft);line-height:1.65;font-size:.97rem;max-width:34ch}
.pf-figlabel{
  margin:auto 0 .35em;padding-top:1.8em;
  font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue-500)
}
.pf-value{
  margin:0;font-family:var(--font-display);font-size:clamp(2.1rem,3.6vw,3rem);
  font-weight:600;color:var(--blue);line-height:1;font-variant-numeric:tabular-nums
}
.pf-more{margin:1.2em 0 0}
.pf-more a{
  display:inline-flex;align-items:center;gap:.55em;font-size:.94rem;font-weight:600;
  color:var(--blue-500);text-decoration:none
}
.pf-more a:hover{color:var(--blue);text-decoration:none}
.pf-more svg{transition:transform .25s var(--ease-out)}
.pf-more a:hover svg{transform:translateX(3px)}
@media (max-width:900px){
  .pf{flex-direction:column;gap:clamp(32px,4vw,48px)}
  .pf-group{padding-left:0;border-left:0;flex:none}
  .pf-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .pf-list{grid-template-columns:1fr}
}

/* --- A heading with a thin line running out from it ----------------------- */
/* "2026 results ─────────" on the Financial reports page. The line takes
   whatever width is left, so it always reaches the edge of the column
   however long the heading is. */
.h2-rule{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px)}
.h2-rule::after{content:"";flex:1 1 auto;height:1px;background:#aebfc9;min-width:30px}
.tone-blue .h2-rule::after{background:rgba(255,255,255,.3)}
@media (max-width:560px){.h2-rule{gap:16px}}

/* --- Reports with pictures ------------------------------------------------ */
/* The picture carries the period; the writing underneath carries the detail.
   The card is not a link as a whole — the two file links are what you click,
   and making the whole tile clickable as well would leave a reader guessing
   which of the two files they were about to open. */
.rcards{
  display:grid;gap:clamp(22px,2.6vw,36px);
  margin-top:clamp(26px,3vw,40px);list-style:none;padding:0
}
.rcards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rcards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rcards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rcard{display:flex;flex-direction:column;min-width:0}

.rc-img{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  aspect-ratio:17/10;background:var(--mist)
}
.rc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.rcard:hover .rc-img img{transform:scale(1.035)}
/* A veil that is strongest where the writing sits, so the period stays
   readable over a light sky as well as a dark canopy. */
.rc-shade{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,41,64,.78) 0%,rgba(0,41,64,.34) 42%,rgba(0,41,64,.06) 78%)
}
.rc-mark{
  position:absolute;top:clamp(10px,1.1vw,16px);left:clamp(12px,1.3vw,18px);
  font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.2em;
  color:rgba(255,255,255,.9)
}
.rc-over{
  position:absolute;left:clamp(12px,1.4vw,20px);right:clamp(12px,1.4vw,20px);
  bottom:clamp(11px,1.3vw,18px);display:block;color:#fff
}
.rc-over-t{
  display:block;font-family:var(--font-display);font-weight:600;line-height:1.1;
  font-size:clamp(1.5rem,2.3vw,2.05rem);letter-spacing:-.01em
}
.rc-over-s{
  display:block;margin-top:.35em;font-size:.78rem;font-weight:500;
  letter-spacing:.04em;color:rgba(255,255,255,.82)
}

.rc-body{padding-top:clamp(14px,1.5vw,20px)}
.rc-label{
  margin:0 0 .55em;font-family:var(--font);font-size:.72rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--up)
}
.rc-title{
  margin:0;font-family:var(--font-display);font-weight:600;color:var(--blue);
  font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.25
}
.rc-date{display:flex;flex-wrap:wrap;gap:.2em .8em;margin:.5em 0 0;font-size:.92rem;color:var(--text-soft)}
.rc-note{font-style:italic}
.rc-files{display:flex;flex-wrap:wrap;gap:.4rem clamp(18px,2.2vw,30px);margin:1.1em 0 0}
.rc-file{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.93rem;font-weight:600;color:var(--blue-500);text-decoration:none
}
.rc-file-ic{display:inline-flex;line-height:0;flex:none}
.rc-file:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.rc-file:hover .rc-file-ic svg{transform:translateY(1px)}
.rc-file-ic svg{transition:transform .2s var(--ease-out)}
.tone-blue .rc-file,.tone-blue .rc-label{color:var(--light)}
.tone-blue .rc-title{color:#fff}
.tone-blue .rc-date{color:rgba(255,255,255,.7)}

@media (max-width:1000px){
  .rcards.cols-3,.rcards.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .rcards.cols-2,.rcards.cols-3,.rcards.cols-4{grid-template-columns:1fr}
  .rc-img{aspect-ratio:2/1}
}

/* --- The slim coloured divider ------------------------------------------- */
/* One sentence and a link on a single line. It is a signpost between two
   sections, not a section of its own, so the padding is far tighter than
   the ordinary call-to-action band. */
.sec-cta-strip{padding-top:clamp(20px,2.2vw,30px);padding-bottom:clamp(20px,2.2vw,30px)}
.cta-strip{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.5em clamp(14px,1.6vw,24px);margin:0
}
.cta-strip-t{font-size:1.02rem;line-height:1.55;color:inherit}
.cta-strip-a{
  display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;
  font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px
}
.cta-strip-a svg{transition:transform .25s var(--ease-out)}
.cta-strip-a:hover svg{transform:translateX(3px)}
.sec-cta-strip.tone-blue .cta-strip-t{color:rgba(255,255,255,.88)}
.sec-cta-strip.tone-blue .cta-strip-a{color:#fff}
@media (max-width:560px){.cta-strip{display:block}.cta-strip-a{margin-top:.7em}}

/* --- Documents grouped by year -------------------------------------------- */
.dl-years{margin-top:clamp(22px,2.6vw,34px)}
.dl-years .dl-list{margin-top:0;border-top:0}
.dl-years .dl-item:last-child{border-bottom:0}
.dl-years .acc-body{padding-top:0;padding-bottom:clamp(10px,1.2vw,18px)}
.dl-count{
  margin-left:auto;margin-right:.4rem;flex:none;
  font-size:.86rem;color:var(--text-soft)
}
@media (max-width:480px){.dl-count{display:none}}

/* The small print under a row of key figures — a footnote, or where the
   figures came from. */
.stats-foot{
  margin:clamp(24px,2.6vw,36px) 0 0;max-width:72ch;
  font-size:.88rem;line-height:1.6;color:var(--text-soft)
}
.tone-blue .stats-foot{color:rgba(255,255,255,.65)}

/* A section head whose heading carries a rule has to run the full width of
   the column, or the rule stops short of the content underneath it. */
.sec-head-full{max-width:none}

/* =========================================================================
   Additions: module options asked for in October
   ========================================================================= */

/* --- Two buttons side by side under a module ------------------------------ */
/* The pair wraps on a narrow screen rather than squeezing, and the plain link
   keeps its own baseline beside a filled button. */
.sec-foot,.rt-action{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem clamp(16px,2vw,28px)}
.rt-action{margin-top:2.2rem}
.sec-text-split .rt-action{margin-top:1.8rem}

/* --- A sub-heading: the heading voice, a step quieter ---------------------- */
.h-sub{
  font-size:clamp(1.3rem,2vw,1.75rem);font-family:var(--font-display);
  font-weight:600;color:var(--blue);line-height:1.25;letter-spacing:-.005em
}
.tone-blue .h-sub{color:#fff}

/* --- Two thirds of the page ----------------------------------------------- */
/* Wider than the reading measure, narrower than the full column — for a block
   of writing that should not run the whole width but needs more than a column. */
.wrap-two-thirds{max-width:calc(var(--wrap) * 0.68 + var(--gutter) * 2)}
.wrap-two-thirds .prose{max-width:none}

/* --- A picture with no frame ---------------------------------------------- */
/* For artwork that already has its own white or transparent ground: no rounded
   corner, no shadow, and never cropped — a diagram must be shown whole. */
.media-plain img,.media-plain video{border-radius:0;box-shadow:none;background:none}
.split-media.media-plain img,.split-media.media-plain video{aspect-ratio:auto;object-fit:contain;height:auto}

/* --- The quote, a step smaller -------------------------------------------- */
.pullquote blockquote{font-size:clamp(1.22rem,2.25vw,1.72rem)}
.pullquote blockquote::before{font-size:3.6rem}

/* --- Icon circles take the colour chosen for the icon --------------------- */
/* The circle is a pale wash of the icon's own colour, so a green icon under
   Greenbridge sits in a green circle without any further choosing. */
.features{--pc:var(--up)}
.feature-icon{
  background:color-mix(in srgb, var(--pc) 18%, #fff);
  color:var(--pc)
}
.feature-icon-dot{background:var(--pc)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .feature-icon{background:var(--up-soft)}
}
.tone-blue .feature-icon{background:rgba(255,255,255,.1);color:var(--light)}
.tone-blue .feature-icon-dot{background:var(--light)}

/* --- A picture inside an expandable section ------------------------------- */
.acc-fig{margin:clamp(20px,2.4vw,30px) 0 0}
.acc-fig img{display:block;width:100%;height:auto;border-radius:var(--r-lg)}
.acc-fig-small img{max-width:300px}
.acc-fig-half img{max-width:min(100%,460px)}
.acc-fig-full img{max-width:100%}
.acc-fig figcaption{margin-top:.9em;font-size:.9rem;color:var(--text-soft)}

/* --- Documents behind one closed row -------------------------------------- */
.dl-collapsed{margin-top:clamp(18px,2.2vw,28px)}
.dl-collapsed .acc-body{padding-top:0;padding-bottom:clamp(14px,1.6vw,22px)}
.dl-list-plain{margin-top:0;border-top:0}
.dl-item-plain{border-bottom:0;padding:.42em 0}
.dl-item-plain>a{
  display:inline-flex;align-items:baseline;gap:.7em;min-height:0;padding:0;
  color:var(--blue);text-decoration:underline;text-underline-offset:3px
}
.dl-item-plain>a:hover{background:none;padding-left:0;color:var(--blue-500)}
.dl-item-plain .dl-title{font-weight:500;font-size:1rem}
.dl-item-plain .dl-desc{display:block;margin-top:.15em;font-size:.9rem;color:var(--text-soft)}
.tone-blue .dl-item-plain>a{color:#fff}

/* --- A band of nothing but a picture -------------------------------------- */
.spacer-band{height:clamp(220px,26vw,340px)}
.spacer-tall{height:clamp(320px,38vw,520px)}
.spacer-bg{background-size:cover;background-repeat:no-repeat}
section.spacer{padding-top:0;padding-bottom:0}
section.spacer.spacer-small{min-height:clamp(28px,4vw,56px)}
section.spacer.spacer-medium{min-height:clamp(48px,7vw,96px)}
section.spacer.spacer-large{min-height:clamp(72px,11vw,150px)}
section.spacer.spacer-band{min-height:clamp(220px,26vw,340px);height:auto}
section.spacer.spacer-tall{min-height:clamp(320px,38vw,520px);height:auto}

/* --- A description under a report card ------------------------------------ */
.rc-text{margin:.7em 0 0;font-size:.95rem;line-height:1.6;color:var(--text-soft)}
.tone-blue .rc-text{color:rgba(255,255,255,.75)}

/* --- Documents beside text: the lighter weights --------------------------- */
/* The panel style shouts a little on a page that is mostly writing, so there
   are two quieter ones: plain underlined links, and the same list folded
   behind a single row. */
.split-docs-plain .sd-list{gap:0;border-top:1px solid var(--line)}
.split-docs-plain .sd-item{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2em;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:.78em 2px;border-radius:0
}
.sd-link{
  color:var(--blue);font-weight:500;line-height:1.4;
  text-decoration:underline;text-underline-offset:3px;min-width:0
}
.sd-link:hover{color:var(--blue-500)}
.split-docs-plain .sd-size{font-size:.84rem;color:var(--text-soft);flex:none}
.split-docs-plain .sd-size b{font-weight:500}
.split-docs .dl-collapsed{margin-top:0}
.split-docs .dl-collapsed .acc-body{padding-top:0;padding-bottom:.4rem}
.split-docs .dl-collapsed .sd-list{border-top:0}
.sd-more{margin:1.3em 0 0}
.sd-more a{
  display:inline-flex;align-items:center;gap:.55em;font-size:.95rem;font-weight:600;
  color:var(--blue-500);text-decoration:none
}
.sd-more a:hover{color:var(--blue);text-decoration:none}
.sd-more svg{transition:transform .25s var(--ease-out)}
.sd-more a:hover svg{transform:translateX(3px)}
.tone-blue .sd-link,.tone-blue .sd-more a{color:#fff}

/* --- Documents grouped under headings you choose -------------------------- */
.dl-groups .acc-title{font-family:var(--font);font-size:1rem;font-weight:600}

/* --- A narrower block of writing, lined up with the page's left edge ------- */
/* By default a block narrower than the page sits in the middle of it. Ticked
   left, the column keeps its width but starts where the headings start, so it
   lines up with everything above and below it. */
.wrap-two-thirds.wrap-flush-left{max-width:var(--wrap)}
.wrap-two-thirds.wrap-flush-left>*{max-width:calc(var(--wrap) * 0.68);margin-left:0;margin-right:0}
.wrap-narrow.wrap-flush-left>*{margin-left:0;margin-right:0}

/* --- Company announcements -------------------------------------------------
   The list filters, and one announcement shown on its own page. The list rows
   themselves are the .news-* rules further up: an announcement that arrives
   from Cision is drawn exactly like one typed in by hand. */
.news-filter{flex-wrap:wrap;justify-content:flex-end}
.news-filter-f{display:inline-flex;align-items:center;gap:.5em}
.news-none{padding:1.6rem .4rem;color:var(--text-soft)}

.sec-announcement{padding:3.2rem 0 4.4rem}
.ann-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 1.4rem;color:var(--text-soft);font-size:.95rem}
.ann-lead{font-size:1.18rem;line-height:1.55;font-weight:500;color:var(--blue);margin:0 0 1.8rem;max-width:62ch}
.ann-body{max-width:68ch}
.ann-body table{font-size:.95rem}

.ann-files,.ann-contact{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.ann-file-list{margin:.8rem 0 0;padding:0;list-style:none}
.ann-file-list li+li{margin-top:.5rem}
.ann-file-list a{display:inline-flex;align-items:center;gap:.6em;font-weight:550;text-decoration:none;color:var(--blue)}
.ann-file-list a:hover{text-decoration:underline}
.ann-file-ic{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:var(--mist);flex:none}

.ann-about{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--text-soft);font-size:.95rem}

.ann-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.ann-nav-a{display:block;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:var(--r,10px);text-decoration:none;color:inherit;transition:background .2s,border-color .2s}
.ann-nav-a:hover{background:var(--mist);border-color:var(--blue);text-decoration:none}
.ann-nav-next{text-align:right}
.ann-nav-l{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.35em}
.ann-nav-t{display:block;font-weight:550;color:var(--blue);line-height:1.35}
.ann-back{margin-top:2.4rem}
@media (max-width:700px){
  .ann-nav{grid-template-columns:1fr}
  .ann-nav-next{text-align:left}
}

/* --- Documents with more than one format -----------------------------------
   An annual report is often published twice: once as a PDF and once as the
   ESEF file the regulator requires. That is one document, not two, so it keeps
   one row and offers both formats on the right. With several destinations the
   row can no longer be one big link, so the title carries the first file and
   each format is its own link. */
.dl-item-multi{display:flex;align-items:center;gap:1.2rem;padding:1.2rem .4rem;min-height:70px}
.dl-item-multi .dl-title-a{text-decoration:none;color:var(--blue);transition:color .2s}
.dl-item-multi .dl-title-a:hover{color:var(--blue-500);text-decoration:underline}
.dl-files{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.dl-file{
  display:inline-flex;align-items:center;gap:.45em;text-decoration:none;
  font-size:.78rem;font-weight:700;letter-spacing:.07em;
  padding:.4em .8em;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--blue-700);transition:background .2s,border-color .2s,color .2s
}
.dl-file:hover{background:var(--up);border-color:var(--up);color:#fff;text-decoration:none}
.dl-file:hover .dl-arrow{color:#fff}
.dl-file .dl-arrow{width:13px;height:13px}
.dl-alts{display:inline-flex;gap:.5rem;margin-left:.6rem}
.dl-alt{font-size:.74rem;font-weight:700;letter-spacing:.07em;color:var(--text-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.dl-alt:hover{color:var(--blue);text-decoration:none}

/* The same rows, in the narrower column beside a piece of writing. */
.split-docs-rows .dl-list{margin-top:0}
.split-docs-rows .dl-ic{width:38px;height:38px;background:#fff}
.split-docs-rows .dl-item>a{gap:.9rem;padding:1rem .2rem;min-height:62px}
.split-docs-rows .dl-item-multi{gap:.9rem;padding:1rem .2rem;min-height:62px}
.split-docs-rows .dl-title{font-size:1rem}
.split-docs-rows .dl-meta{gap:.6rem}

@media (max-width:860px){
  .dl-item-multi{flex-wrap:wrap}
  .dl-item-multi .dl-meta{width:100%;justify-content:flex-start;padding-left:calc(44px + 1.2rem)}
}

/* The format tag beside an announcement's attachment: PDF, or ESEF for the
   machine-readable copy of a report. */
.ann-file-t{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;
  padding:.24em .62em;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--text-soft)
}
.ann-file-list a:hover .ann-file-t{border-color:var(--up);color:var(--blue)}

/* --- The announcement archive's tools: search, filters, pages --------------
   The search box leads, because somebody who knows what they are looking for
   should not have to work out which year it was published in first. */
.news-tools{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin:2.2rem 0 .4rem;scroll-margin-top:120px
}
.news-q{
  position:relative;display:flex;align-items:center;flex:1 1 320px;min-width:260px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  transition:border-color .2s,box-shadow .2s
}
.news-q:focus-within{border-color:var(--up);box-shadow:0 0 0 3px rgba(93,146,170,.18)}
.news-q-ic{position:absolute;left:1.05em;color:var(--text-soft);pointer-events:none}
.news-q input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  padding:.92em 1em .92em 3em;font:inherit;font-size:.98rem;color:var(--blue);min-height:48px
}
.news-q input::placeholder{color:var(--text-soft)}
.news-q input::-webkit-search-cancel-button{cursor:pointer}
.news-q-go{
  flex:none;margin:4px;border:0;cursor:pointer;font:inherit;font-size:.86rem;font-weight:650;
  letter-spacing:.02em;padding:.62em 1.3em;border-radius:var(--r-pill);
  background:var(--blue);color:#fff;transition:background .2s
}
.news-q-go:hover{background:var(--blue-500,#13405a)}
.news-selects{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-left:auto}

.news-count{
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  margin:1.1rem 0 0;color:var(--text-soft);font-size:.94rem
}
.news-clear{font-weight:600;color:var(--blue)}

/* Pages */
.pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
.pager-step{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font-weight:600;font-size:.95rem;
  color:var(--blue);padding:.6em 1.1em;border:1px solid var(--line);border-radius:var(--r-pill);
  transition:background .2s,border-color .2s
}
.pager-step:hover{background:var(--mist);border-color:var(--blue);text-decoration:none}
.pager-step.is-off{color:var(--text-soft);opacity:.45;pointer-events:none}
.pager-nums{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.pager-n{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 .55em;border-radius:50px;text-decoration:none;font-size:.95rem;font-weight:600;
  color:var(--blue);transition:background .2s,color .2s
}
.pager-n:hover{background:var(--mist);text-decoration:none}
.pager-n.is-on{background:var(--blue);color:#fff}
.pager-gap{color:var(--text-soft);padding:0 .2em}

@media (max-width:700px){
  .news-tools{gap:.8rem}
  .news-selects{margin-left:0;width:100%;gap:.9rem}
  /* The labels go, not the fields: "All years" and "All types" say what each
     one is, and on a phone the words in front of them only squeeze the box
     until its own text is cut off. Screen readers still read them. */
  .news-selects .news-filter-f>label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .news-selects .news-filter-f{flex:1 1 calc(50% - .45rem);min-width:0}
  .news-selects select{width:100%}
  .pager{justify-content:center}
  .pager-nums{order:-1;width:100%;justify-content:center}
}

/* --- Links that open a document -------------------------------------------
   Any link in a piece of writing whose address ends in .pdf (or .docx, .zip
   and so on) is marked `doc-link` when the page is built, and gets the same
   download arrow the Documents module uses. The arrow is drawn as a mask so it
   takes the link's own colour, on a coloured band as readily as on white. */
.doc-link{
  display:inline-flex;align-items:center;gap:.5em;
  text-decoration:none;font-weight:600;color:var(--blue);
  transition:color .2s
}
.doc-link:hover,.doc-link:focus-visible{color:var(--up);text-decoration:none}
.doc-link::before{
  content:"";flex:none;width:1.05em;height:1.05em;background-color:currentColor;
  -webkit-mask:var(--ic-dl) center/contain no-repeat;mask:var(--ic-dl) center/contain no-repeat
}
:root{
  --ic-dl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v8M4.5 6.5L8 10l3.5-3.5M2.5 13.5h11' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
}
/* Inside a documents column the rows already carry their own icon. */
.sd-list .doc-link::before,.dl-list .doc-link::before{display:none}
.sd-list .doc-link,.dl-list .doc-link{gap:0}

/* A section heading and intro that run wider than the usual reading column.
   The module's own content keeps the full width either way. */
.sec-head-two-thirds{max-width:calc(var(--wrap) * 0.68)}
.sec-head-two-thirds .sec-intro{max-width:none}
.sec-head-full .sec-intro{max-width:none}

/* --- Cards with a contact on them -----------------------------------------
   A named contact card: a figure at the top, then the name and role, then the
   telephone number and e-mail address as real links with the same symbols the
   Contact module uses — so the two agree wherever they appear together. */
/* The figure is drawn bare rather than in a disc: the cards themselves are
   already tinted, and a tinted disc on a tinted card is a circle nobody can
   see. */
.card-ic{display:flex;color:var(--up);margin-bottom:.9em;flex:none}
.card-ic svg{width:30px;height:30px}
.cards-centre .card-ic{margin-left:auto;margin-right:auto}
/* With a figure at the top the little rule underneath it is one mark too many. */
.card.has-ic .card-rule{display:none}

/* The contact lines belong under the role, not pushed to the foot of the card
   by whatever the longest card in the row happens to be. Only a "read more"
   link is held to the bottom, so a row of those still lines up. */
.card.has-contact .card-text{flex:0 0 auto}
.card.has-contact .card-more{margin-top:auto;padding-top:1.1em}
.card-contact{display:flex;flex-direction:column;gap:.45em;margin-top:1.1em}
.card-cl{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.95rem;font-weight:550;color:var(--blue);text-decoration:none;
  transition:color .2s
}
.card-cl svg{flex:none;color:var(--up);transition:color .2s}
.card-cl:hover,.card-cl:focus-visible{color:var(--up);text-decoration:underline}
.card-cl:hover svg{color:var(--up)}
.card-cl span{word-break:break-word}
.cards-centre .card-contact{align-items:center}

/* On a card that is not itself a link, the "read more" is its own link. */
.card-more-a{text-decoration:none}
.card-more-a:hover{text-decoration:none}
.card-more-a:hover svg{transform:translateX(4px)}