/* ==========================================================================
   IBL Integrated Report 2026 — interior chapter pages
   Shared stylesheet for the leadership message pages.

   Structure and class names follow IR2026-Wireframe-Internal Page.html so the
   existing markup patterns and behaviour carry over unchanged. The colour,
   type and graphic treatment use the palette extracted from IR_WEBSITE.pdf
   earlier in this project, so the interior pages sit in the same system as
   the microsite home page.

   Each page sets one accent on <body> (.page-chairman / .page-ceo / .page-cfo)
   which matches that section's heading colour on the home page.
   ========================================================================== */

:root {
  /* Ground and ink */
  --ground:      #f7f8f9;
  --surface:     #ffffff;
  --ink:         #404041;
  --ink-soft:    #6d6e71;
  --line:        #dfe3e6;
  --line-soft:   #eef1f3;

  /* Brand */
  --indigo:      #222f84;
  --navy:        #040048;
  --blue-pale:   #a3c3e7;  /* home-page Menu button fill */
  --cyan:        #62c3d1;

  /* Figure accents, in the order used on the home page */
  --fig-1:       #2d2e77;
  --fig-2:       #a3c3e7;
  --fig-3:       #62c3d1;
  --fig-4:       #f3b5b7;

  /* Decorative */
  --sand:        #e5ded8;

  /* Per-page accent — overridden below */
  --accent:      #a6c6d6;
  --accent-ink:  #ffffff;

  --display: "editors-note", "Editors Note", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

body.page-chairman { --accent: #b3ccdd; }
body.page-ceo      { --accent: #c0ada1; }
body.page-cfo      { --accent: #8a8999; }

/* --------------------------------------------------------------- base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ground);
  font: 16px/1.6 "elza", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: .25rem; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
img { max-width: 100%; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .85rem 1.25rem; color: #fff; background: var(--navy); text-decoration: none;
}
.skip-link:focus { left: 0; }

.page { background: var(--surface); }
.small { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.muted { color: var(--ink-soft); }

/* ----------------------------------------------- header + overlay menu ---
   Ported 1:1 from the microsite home page so both share one navigation
   system. Values were measured off the live home-page header and menu:
   same lockup, same currency switch, same pale-blue Menu control, and the
   same full-screen navy overlay. Class names match the home page's markup.
   ------------------------------------------------------------------------ */
.ir-header {
  position: sticky; top: 0; z-index: 100;
  min-height: 5rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  padding-inline: clamp(1rem, 3vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.ir-brand { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.25rem .75rem 0; text-decoration: none; }
.ir-mark {
  width: 4.4rem; height: 3rem;
  background: url("ibl-logo.svg") left center / contain no-repeat;
  font-size: 0; color: transparent;
}
.ir-brand-copy strong { color: var(--indigo); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ir-brand-copy .ir-brand-year { display: inline; font-weight: 900; }   /* "2026" — Elza Black, as in the PDF */

/* The overlay nav is position:fixed, so it leaves the grid flow; pinning the
   tools to the last track keeps them hard right as on the home page. */
.ir-brand { grid-column: 1; }
.ir-tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .5rem; padding-block: .5rem; }
.ir-nav-currency { display: flex; align-items: center; gap: .3rem; margin-right: .9rem; color: var(--indigo); font-size: .8125rem; }
.ir-nav-currency button {
  min-height: 2.75rem; padding: .2rem .15rem;
  border: 0; color: var(--indigo); background: transparent;
  font-weight: 300; letter-spacing: .05em; cursor: pointer;
  transition: color .2s;
}
.ir-nav-currency button[aria-pressed="true"] { font-weight: 700; text-decoration: underline; text-underline-offset: .3rem; }
.ir-nav-currency button:hover { color: var(--navy); }

.ir-menu-button {
  min-height: 3rem; padding: .65rem 1.35rem;
  border: 0; border-radius: 0;
  color: #fff; background: var(--blue-pale);
  font-size: 1rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
}
.ir-menu-button:hover { color: #fff; background: #d1d4e0; }
.ir-progress { position: absolute; bottom: -1px; left: 0; width: 0; height: 3px; background: var(--cyan); }

/* Full-screen overlay */
.ir-chapters {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column; gap: 0;
  overflow: auto;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
  color: #fff; background: rgba(4, 0, 72, .92);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .32s ease, visibility 0s linear .32s;
}
.ir-header[data-menu-open="true"] .ir-chapters {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .35s ease, visibility 0s linear;
}
.ir-menu-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; }
.ir-menu-top-links { display: flex; gap: 1.75rem; }
.ir-menu-top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1.75rem; }
.ir-chapters a { color: #fff; text-decoration: none; }
.ir-menu-top-links a, .ir-menu-top-actions a { text-decoration: underline; text-underline-offset: .3rem; }
.ir-menu-logo { font-style: normal; font-size: clamp(1.2rem, 2vw, 1.55rem); white-space: nowrap; }
.ir-menu-close {
  min-height: 2.75rem; padding: .45rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .75); color: #fff; background: transparent;
  cursor: pointer; transition: color .2s, background .2s;
}
.ir-menu-close:hover { color: var(--navy); background: #fff; }

.ir-menu-body {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(14rem, .45fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: stretch;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.ir-menu-label { display: block; margin-bottom: 1rem; font-style: normal; font-size: 1.05rem; }
.ir-menu-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.7rem); font-size: .8125rem; }
.ir-menu-col { min-width: 0; }
.ir-mega-label { display: block; margin-bottom: .35rem; color: rgba(255, 255, 255, .78); font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.ir-menu-col a {
  min-height: 2.25rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .2rem 0; transition: padding .2s;
}
.ir-menu-col a:hover { padding-left: .35rem; }
.ir-mega-feature { margin-top: 1.25rem; padding: 1.25rem; border: 1px solid rgba(255, 255, 255, .75); }
.ir-mega-feature strong { display: block; margin-bottom: .35rem; }
.ir-mega-feature span { color: rgba(255, 255, 255, .8); }

/* Feature panel — the home page still shows a placeholder here; replacing it
   there and here is a single change to this rule. */
.ir-menu-feature { display: flex; margin: 0; }
.ir-menu-feature-media {
  position: relative; flex: 1; min-height: 18rem; padding: 1.25rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, #efefef 0 38%, #b9b9b9 38% 70%, #6c6c6c 70%);
  color: var(--navy);
}
.ir-menu-feature-caption em { display: block; font-style: normal; font-size: 1.15rem; }
.ir-menu-feature-caption { max-width: 44%; }
    .ir-menu-feature-note { color: #3c3c3c; }

.ir-menu-foot { display: flex; gap: 2.25rem; padding-block: 1.25rem 0; }
.ir-menu-foot a { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.ir-menu-foot a:hover { text-decoration: underline; text-underline-offset: .3rem; }

/* ------------------------------------------------------------- buttons --- */
.button {
  min-height: 3rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 0; /* square edges throughout — matches the internal-page model */
  color: var(--ink); background: var(--surface);
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: color .22s, background .22s, border-color .22s;
}
.button:hover { border-color: var(--indigo); color: var(--indigo); }
.button.primary { border-color: transparent; color: #fff; background: var(--indigo); }
.button.primary:hover { background: var(--navy); color: #fff; }
/* The navbar Menu control mirrors the home-page Menu button: same pale-blue
   fill and indigo hover, so the two headers read as one system. */

/* -------------------------------------------------------- breadcrumb --- */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .6rem;
  /* Starts under "Integrated Report 2026" in the header rather than under the
     logo: the header's own inline padding, plus the mark (4.4rem) and the
     brand's 1rem gap. Falls back to the page gutter below 700px, where the
     brand copy is hidden and there is nothing to line up with. */
  padding: 1.25rem clamp(1.5rem, 7vw, 7rem) 1.25rem calc(clamp(1rem, 3vw, 3rem) + 4.4rem + 1rem);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--indigo); }

/* ------------------------------------------------------ article hero --- */
.article-hero {
  position: relative; overflow: hidden;
  padding: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 7vw, 7rem);
  border-bottom: 0;
  /* Same fill as the pull-quote panel on this page. */
  background: var(--accent);
}
/* The pull-quote's motif, scaled up for the hero - the CFO page swaps to the
   strokes mark there, so it swaps here too. */
.article-hero::after {
  content: ""; position: absolute; z-index: 0; right: -3rem; bottom: -5rem;
  width: 22rem; height: 22rem; opacity: .85; pointer-events: none;
  background: url("motif-palm.svg") right bottom / contain no-repeat;
}
.page-chairman .article-hero::after {
  /* The home page's Chairman panel carries the yellow scattered-dot mark
     instead of the palm. That mark is landscape (93.6 x 83.5), so it gets a
     box of its own rather than the palm's square one. */
  background-image: url("motif-dots-yellow.svg");
  width: 24rem; height: 21.5rem; right: -2rem; bottom: -3rem;
}
.page-cfo .article-hero::after {
  /* The pull-quote puts the strokes top-right; in the hero that lands on the
     key-figure cards, so it keeps the palm's bottom-right corner instead. */
  background-image: url("motif-strokes.svg");
  background-position: right bottom;
  width: 13rem; height: 18rem; right: 2rem; bottom: -2rem; top: auto;
}
.article-hero-inner {
  position: relative; z-index: 1;
  width: min(100%, 88rem); margin: auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.eyebrow { margin: 0 0 1.25rem; color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* The big hero line is presentational, not the page heading - it is a <p>
   carrying this class, while the kicker above it is the real <h1>. */
.article-title {
  max-width: 12ch; margin-bottom: 1.75rem;
  color: var(--accent);
  font-size: clamp(3rem, 6.5vw, 6.5rem); font-weight: 500; letter-spacing: -.05em; line-height: .95;
}
.lead { max-width: 46rem; color: var(--ink); font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.article-byline {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin-top: 2.5rem;
  color: var(--ink-soft); font-size: .9rem;
}

/* The hero now sits on the accent, so its copy reverses out to white exactly
   as the pull-quote's does. The key-figure cards stay white panels with navy
   figures, so they are deliberately not included here. */
.article-hero .eyebrow,
.article-hero .article-title,
.article-hero .lead,
.article-hero .leader-card strong { color: #fff; }
.article-hero .article-byline,
.article-hero .leader-card span { color: rgba(255, 255, 255, .88); }

/* Leadership in the hero: portrait, name, role. No kicker and no rules - the
   hero already says whose message this is, so the card carries nothing else. */
.hero-leaders {
  display: flex; flex-wrap: wrap; gap: 1.5rem clamp(2rem, 5vw, 4rem);
  margin-top: 2rem; padding-top: 1.5rem;
  /* The separating rule is a gradient rather than a border, so it fades out
     to the right instead of stopping hard at the edge of the column. */
  background: linear-gradient(to right, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 80%) top left / 100% 1px no-repeat;
}
.leader-card { display: grid; grid-template-columns: 4.25rem 1fr; gap: 1.1rem; align-items: center; }
.leader-photo {
  width: 4.25rem; height: 4.25rem; display: block;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent);
}
.leader-card strong, .leader-card span { display: block; }
.leader-card span { color: var(--ink-soft); font-size: .88rem; }



/* ---------------------------------------------------- article layout --- */
.article-layout {
  width: min(100%, 82rem); margin: auto;
  display: grid; grid-template-columns: 13rem minmax(0, 60rem);
  justify-content: center; gap: clamp(2rem, 4vw, 4.5rem); align-items: start;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
.article-toc { position: sticky; top: 7rem; }
.article-toc p { margin-bottom: 1rem; }
.article-toc nav { border-top: 1px solid var(--ink); }
.article-toc a {
  display: block; padding: .85rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink-soft); text-decoration: none;
  transition: padding .2s, color .2s, border-color .2s;
}
.article-toc a:hover,
.article-toc a[aria-current="location"] { padding-left: .6rem; color: var(--ink); border-bottom-color: var(--accent); }

/* Download card, built to the home page's .ir-mega-feature spec: near-square,
   title over a small caption, with the circular download disc pinned to the
   bottom-right corner. Solid #b3ccdd instead of the menu's transparent fill.
   The .article-toc a rules above target every link in the rail, so the
   section-link treatment is reset before restyling. */
.article-toc .toc-download {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  margin-top: 2rem; padding: .95rem 1rem .9rem;
  aspect-ratio: 1.23;
  border: 0; border-bottom: 0;
  color: #fff; background: #b3ccdd;
  text-decoration: none;
  transition: background .25s ease;
}
.article-toc .toc-download:hover,
.article-toc .toc-download:focus-visible { padding-left: 1rem; background: #d1d4e0; }
.article-toc .toc-download strong {
  margin-bottom: .35rem;
  font-size: clamp(1rem, 1.3vw, 1.18rem); font-weight: 700; line-height: 1.12;
}
.article-toc .toc-download span {
  color: #fff;
  font-size: .72rem; font-weight: 500; line-height: 1.35;
}
.article-toc .toc-download::after {
  content: "";
  margin-top: auto; align-self: flex-end;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: #f7e36f url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0 4.5-4.5M12 15l-4.5-4.5M5 19h14'/%3E%3C/svg%3E") center / .8rem no-repeat;
}

.article-body { min-width: 0; }
.article-body section { padding: 0 0 clamp(2.25rem, 4.5vw, 3.75rem); scroll-margin-top: 8rem; }
/* A trailing margin inside a section stacks on top of that padding, so the
   gap used to vary with whatever the section happened to end on - 100px
   after a pull-quote, 57px after a paragraph. Dropping it makes every
   section break the same. */
.article-body section > *:last-child { margin-bottom: 0; }
/* The per-section kickers are gone; the h2 now carries that role, so it takes
   the .eyebrow treatment rather than the old display size. */
.article-body h2 {
  max-width: none; margin: 0 0 .9rem;
  color: #b3ccdd;
  font-size: 1.345rem; font-weight: 700; letter-spacing: .0345em; line-height: 1.35; text-transform: uppercase;
}
/* Masked slide-in, matching the home page's section heads. clip-path rather
   than overflow so descenders are not shaved. */
.article-body h2 { clip-path: inset(0 0 -.35em 0); }
.article-body h2 .ir-line {
  display: block;
  transform: translateX(-106%);
  transition: transform .7s cubic-bezier(.44, 0, .37, 1) .15s;
}
.article-body h2.visible .ir-line { transform: translateX(0); }

.article-body p { font-size: 1.08rem; line-height: 1.5; }
.article-body .intro { color: var(--ink); font-size: clamp(1.18rem, 1.9vw, 1.45rem); line-height: 1.6; }
.article-body figure { margin: 2rem 0; }
.article-body figcaption { margin-top: 1rem; color: var(--ink-soft); font-size: .9rem; }

/* Client-supplied portrait, replacing the "photography to supply" note.
   It stands in for a video, so it carries the home page's play control. */
.article-portrait { margin: 2rem 0; }
.article-portrait img { display: block; width: 100%; height: auto; }
.portrait-media { position: relative; }
/* Same control as the home page's .ir-play: a 3rem square in the bottom-right
   corner of the still. The "Play video" text stays in the DOM at font-size: 0
   so the button keeps its accessible name, and the triangle is a clip-path on
   currentColor so it follows the hover colour. */
.portrait-media .ir-play {
  position: absolute; right: 0; bottom: 0;
  width: 3.75rem; min-width: 3.75rem; height: 3.75rem; min-height: 3.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 0;
  color: var(--ink); background: #fff;
  font-size: 0; line-height: 0; letter-spacing: 0;
  box-shadow: 0 .3rem .9rem rgba(4, 0, 72, .2);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.portrait-media .ir-play::before {
  content: ""; display: block;
  width: 1.25rem; height: 1.5rem; margin-left: .6rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.portrait-media .ir-play:hover,
.portrait-media .ir-play:focus-visible { color: #fff; background: var(--fig-2); }

/* Pull quote — serif, set in the page accent and sitting in the text flow
   rather than on a panel of its own. */
.pull-quote {
  position: relative;
  margin: clamp(2.25rem, 4.5vw, 3.75rem) 0;
  padding: 0;
  color: var(--accent); background: none;
  /* Inherited, so the blockquote and the attribution both get it: the browser
     balances the last line instead of leaving an orphan word. */
  text-wrap: pretty;
}
/* The motif used to bleed off the panel edge and get clipped. With no panel
   behind it, it sits inside the column instead, to the right of the quote. */
.pull-quote::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 13rem; height: 13rem; opacity: .85; pointer-events: none;
  background: url("motif-palm.svg") right bottom / contain no-repeat;
}
.page-cfo .pull-quote::after { background-image: url("motif-strokes.svg"); width: 8rem; height: 11rem; bottom: auto; top: 0; }
.pull-quote > * { position: relative; z-index: 1; }
.pull-quote blockquote {
  margin: 0 0 1.5rem; max-width: 24ch;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.6vw, 3.1rem); font-weight: 400; letter-spacing: -.01em; line-height: 1.12;
}
.pull-quote cite { display: block; color: var(--ink-soft); font-style: normal; font-size: .9rem; }

/* Inline figures */
/* Same card as the hero key figures and the home page's At a glance. */
.inline-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 3.75rem 0; }
.inline-figure {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.9rem 1.4rem 1.4rem;
  border-left: 0;
  background: var(--surface);
  box-shadow: 0 .35rem 1.4rem rgba(4, 0, 72, .07);
}
.inline-figure::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0; right: 0; bottom: 0;
  width: .9rem;
  background: url("texture-brushstrokes.jpg") center / 660% no-repeat;
}
.inline-figure > * { position: relative; z-index: 1; }
.inline-figure:first-child { padding-left: 1.4rem; }
.inline-figure > span:first-child {
  color: var(--ink);
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; line-height: 1.35; text-transform: uppercase;
}
.inline-figure strong {
  margin: .9rem 0 .6rem;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 400; letter-spacing: -.005em; line-height: 1;
  white-space: nowrap;
}
[data-currency="USD"] .inline-figure strong { font-size: clamp(1.3rem, 2.1vw, 1.85rem); }
.inline-figure span:last-child { color: var(--ink-soft); font-size: .8rem; line-height: 1.3; }

/* Simple horizontal bar chart */
.chart { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); background: var(--surface); }
.chart > p { margin: 0; }
.chart-bars { display: grid; gap: 1rem; margin-top: 1.75rem; }
.chart-row { display: grid; grid-template-columns: 9rem 1fr 4.5rem; gap: 1rem; align-items: center; font-size: .92rem; }
.chart-track { height: 2rem; background: var(--line-soft); }
/* Bars grow when the chart scrolls into view rather than on page load, and
   step in one after another. The figure already carries .reveal, so the
   observer that drives everything else drives this too. */
.chart-fill {
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(.44, 0, .37, 1) calc(var(--bar-delay, 0) * 90ms);
}
.reveal.visible .chart-fill { transform: scaleX(1); }
.chart-row:nth-child(1) .chart-fill { --bar-delay: 0; }
.chart-row:nth-child(2) .chart-fill { --bar-delay: 1; }
.chart-row:nth-child(3) .chart-fill { --bar-delay: 2; }
.chart-row:nth-child(4) .chart-fill { --bar-delay: 3; }
/* Keyed to size, matching the home page's geography bar: the largest share
   takes the blue, then grey, then pink, with the yellow on the smallest. */
.chart-row:nth-child(1) .chart-fill { background: #b3ccdd; }
.chart-row:nth-child(2) .chart-fill { background: #8a8999; }
.chart-row:nth-child(3) .chart-fill { background: #f3b5b7; }
.chart-row:nth-child(4) .chart-fill { background: #fbe567; }
.chart-value { text-align: right; font-weight: 700; }

/* Section end + related links */
.article-end { padding-top: 2rem; border-top: 1px solid var(--ink); }
.article-end-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 2rem; background: var(--line); }
.article-end-links a {
  min-height: 9rem; display: flex; flex-direction: column; justify-content: space-between; gap: .75rem;
  padding: 1.25rem; background: var(--surface); text-decoration: none;
  transition: color .22s, background .22s;
}
.article-end-links a strong { font-size: 1.15rem; }
.article-end-links a:hover { color: #fff; background: #b4cddd; }
.article-end-links a:hover .muted { color: rgba(255, 255, 255, .75); }

/* ------------------------------------------------- stepper + footer --- */

/* Footer, matching the home page exactly: #898899 band, regular-weight copy
   with the Beyond Communications link, social icons right, and the back-to-top
   control floated against the right gutter straddling the top edge. */
.ir-footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 2rem clamp(1.5rem, 7vw, 7rem) calc(2rem + clamp(.5rem, 1.4vh, .9rem));
  color: #ffffff;
  background: #898899;
}
/* The menu overlay's painterly band, repeated across the foot of the footer. */
.ir-footer::after {
  content: "";
  position: absolute; right: 0; bottom: 0; left: 0; height: clamp(.5rem, 1.4vh, .9rem);
  background: url("menu-band.jpg") center / cover no-repeat;
  pointer-events: none;
}
.ir-footer a { color: #ffffff; }
.ir-footer-copy { font-weight: 400; }
.ir-footer-copy a { text-decoration: none; }
.ir-footer-copy a:hover,
.ir-footer-copy a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.ir-footer-actions { display: flex; gap: 1.75rem; align-items: center; }
.ir-social { display: flex; gap: 1.15rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.ir-social a { display: inline-flex; color: #ffffff; }
.ir-social svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.ir-social a:hover,
.ir-social a:focus-visible { color: var(--navy); }

.ir-footer a[href="#main"] {
  position: absolute;
  z-index: 2;
  top: 0;
  right: clamp(1.5rem, 7vw, 7rem);
  /* Sits fully above the footer rather than straddling its top edge. */
  transform: translateY(-100%);
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #b4cddd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23040048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / 1.15rem no-repeat;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
}
.ir-footer a[href="#main"]:hover,
.ir-footer a[href="#main"]:focus-visible { background-color: #ffffff; }

/* ------------------------------------------------------------ motion --- */
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s, transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* -------------------------------------------------------- responsive --- */
@media (max-width: 1180px) {
  .article-layout { grid-template-columns: 11rem minmax(0, 1fr); }
}
@media (max-width: 980px) {
  /* Same overlay behaviour as the home page: the decorative feature panel is
     dropped and the top bar sticks so Close stays reachable while scrolling. */
  .ir-menu-feature { display: none; }
  .ir-menu-body { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 1.25rem 1.5rem; }
  .ir-menu-columns { grid-template-columns: 1fr 1fr; }
  .ir-menu-top { position: sticky; top: 0; z-index: 5; margin-inline: -1.25rem; padding: 1rem 1.25rem; background: #a3c3e7; }
  .article-hero::after { width: 13rem; height: 13rem; right: -2rem; bottom: -3rem; }
}
@media (max-width: 820px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-toc { position: static; }
  .article-toc nav { display: grid; grid-template-columns: 1fr 1fr; }
  .article-toc a { padding: .85rem; border-right: 1px solid var(--line); }
  .inline-figures { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .ir-brand-copy { display: none; }
  /* Keep clear air between the lockup and the controls on narrow screens. */
  .ir-header { padding-inline: 1rem; }
  .ir-brand { padding-right: .75rem; }
  .ir-mark { width: 3.6rem; height: 2.5rem; }
  .ir-nav-currency { margin-right: .4rem; }
  .ir-menu-button { padding: .6rem .9rem; font-size: .82rem; }
  .article-hero, .breadcrumb { padding-inline: 1.5rem; }
  .inline-figures { grid-template-columns: 1fr; }
  .inline-figure,
  .inline-figure:first-child { padding: 1.2rem 1.8rem 1.2rem 1.2rem; }
  .article-end-links { grid-template-columns: 1fr; }
  .article-toc nav { grid-template-columns: 1fr; }
  .chart-row { grid-template-columns: 6.5rem 1fr 3.5rem; gap: .6rem; font-size: .85rem; }
  .ir-footer-actions { gap: 1.25rem; }
  .ir-chapters { padding: 1.25rem 1.25rem 2rem; }
  .ir-menu-columns { grid-template-columns: 1fr; gap: 1.25rem; }
  .ir-menu-top { grid-template-columns: 1fr auto; }
  .ir-menu-logo { display: none; }
  .ir-menu-col a { padding-block: .55rem; }
  .ir-menu-foot { padding-block: .75rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  /* Transitions are off above, so anything parked off-screen has to be reset
     or it would never arrive. */
  .article-body h2 .ir-line { transform: none; }
  .chart-fill { transform: scaleX(1); }
}
    /* ===== Menu design — IR_WEBSITE_MENU.pdf =====================
       Pale-blue overlay, white type, painterly band and feature card, taken
       from the menu artboard (506.8 x 323.7pt). The existing behaviour is
       untouched: the fade in/out, the backdrop blur, the staggered column
       slide-ins and the hover-driven feature panel all still run. */
    .ir-chapters {
      padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.25rem, 4.5vw, 4rem) 0;
      color: #fff;
      background: #a3c3e7;
    }
    /* Painterly band across the foot of the overlay */
    .ir-chapters::after {
      content: "";
      position: absolute; right: 0; bottom: 0; left: 0; height: clamp(1rem, 2.8vh, 1.75rem);
      background: url("menu-band.jpg") center / cover no-repeat;
      pointer-events: none;
    }

    .ir-menu-top-links a,
    .ir-menu-top-actions a { font-size: .87rem; font-weight: 700; text-decoration: none; }
    .ir-menu-top-links a:hover,
    .ir-menu-top-actions a:hover,
    .ir-menu-top-links a[aria-current="location"] { text-decoration: underline; text-underline-offset: .35rem; }
    .ir-menu-logo {
      font-style: normal; font-size: clamp(.95rem, 1.3vw, 1.15rem); font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
    }
    .ir-menu-close { font-size: .87rem; font-weight: 700; border-color: #fff; }
    .ir-menu-close:hover { color: #81aedb; background: #fff; }

    .ir-menu-label { font-size: clamp(1rem, 1.25vw, 1.1rem); font-style: normal; font-weight: 700; margin-bottom: 1.5rem; }
    .ir-menu-body { grid-template-columns: minmax(0, 1fr) clamp(12rem, 23%, 19rem); gap: clamp(1.5rem, 3vw, 3rem); }
    .ir-menu-columns { gap: clamp(1.25rem, 2.6vw, 2.4rem); font-size: .87rem; }
    .ir-mega-label {
      margin-bottom: 1.5rem;
      color: #fff; font-size: clamp(.9rem, 1.1vw, 1rem); font-weight: 700;
      letter-spacing: .06em; text-transform: uppercase;
    }
    .ir-menu-col a { min-height: 2.75rem; font-size: .87rem; font-weight: 500; }
    .ir-menu-col a:hover,
    .ir-menu-col a[aria-current="location"] { padding-left: 0; font-weight: 700; text-decoration: underline; text-underline-offset: .35rem; }

    /* Download card — outlined, with the yellow disc from the artboard */
    .ir-chapters .ir-mega-feature {
      position: relative; margin-top: 2rem;
      display: flex; flex-direction: column; align-items: flex-start;
      max-width: 190px;
      padding: .95rem 1rem .9rem;
      border-color: #fff;
    }
    .ir-chapters .ir-mega-feature strong { margin-bottom: .35rem; font-size: clamp(1rem, 1.3vw, 1.18rem); font-weight: 700; line-height: 1.12; }
    .ir-chapters .ir-mega-feature span { color: #fff; font-size: .72rem; font-weight: 500; line-height: 1.35; }
    /* In flow at the end of the column, so it can never ride over the text. */
    .ir-chapters .ir-mega-feature::after {
      content: "";
      position: static; margin-top: auto; align-self: flex-end;
      width: 1.5rem; height: 1.5rem; border-radius: 50%;
      background: #f7e36f url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0 4.5-4.5M12 15l-4.5-4.5M5 19h14'/%3E%3C/svg%3E") center / .8rem no-repeat;
    }
    /* 66 x 53.7pt on the artboard — near-square, and narrower than its column
       so it reads pulled left of the feature panel. */
    @media (min-width: 981px) {
      .ir-chapters .ir-mega-feature { width: 79%; aspect-ratio: 1.23; }
    }
    /* 66 x 53.7pt on the artboard — near-square and narrower than its column. */
    @media (min-width: 981px) {
      .ir-mega-feature { width: 79%; aspect-ratio: 1.23; }
    }

    /* Feature card */
    .ir-menu-feature { align-items: flex-start; }
    .ir-menu-feature-media { flex: 0 0 auto; width: 100%; }
    .ir-menu-feature-media {
      position: relative; overflow: hidden;
      min-height: 0; aspect-ratio: 1 / 1;
      padding: 1.4rem 1.4rem 1.4rem 13%;   /* proportional, so the name clears the portrait at every card size */
      display: flex; flex-direction: column; align-items: flex-start;
      color: #fff; background: #81aedb;
    }
    /* painterly strip down the left edge */
    .ir-menu-feature-media::before {
      content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1.3rem; z-index: 1;
      background: url("texture-brushstrokes.jpg") center / cover no-repeat;
    }
    /* sand palm + yellow swoosh */
    .ir-menu-feature-media::after {
      content: ""; position: absolute; right: 8%; bottom: 6%; left: 14%; height: 55%; z-index: 0;
      background:
        url("menu-motif-swoosh.svg") left 72% / 78% auto no-repeat,
        url("menu-motif-palm.svg") 38% bottom / 46% auto no-repeat;
      pointer-events: none;
    }
    .ir-menu-feature-caption { position: relative; z-index: 2; display: block; }
    .ir-menu-feature-caption em {
      display: block; margin-bottom: .5rem;
      font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    }
    .ir-menu-feature-caption span {
      display: block; max-width: 100%;
      font-size: clamp(.95rem, 1.45vw, 1.3rem); font-weight: 400; line-height: 1.15;
    }
    .ir-menu-feature-note { position: relative; z-index: 2; margin-top: auto; color: rgba(255, 255, 255, .85); font-size: .72rem; }
    /* The cut-out portrait belongs to the Group CEO, so it only shows in the
       panel's resting state — no other approved cut-outs exist. */
    .ir-menu-feature-media[data-variant] { background-image: none; }
    .ir-menu-feature-media .ir-menu-portrait {
      position: absolute; right: 0; bottom: 0; z-index: 1;
      width: 53%; opacity: 0; transition: opacity .3s ease;
    }
    .ir-menu-feature-media[data-variant="default"] .ir-menu-portrait { opacity: 1; }

    .ir-menu-foot { padding-block: 1.5rem clamp(2rem, 4vh, 3rem); }
    .ir-menu-foot a { font-size: clamp(.9rem, 1.1vw, 1rem); font-weight: 700; letter-spacing: .06em; }

    @media (max-width: 980px) {
      .ir-menu-top { background: #a3c3e7; }
      /* the unconditional two-track rule above must not survive here */
      .ir-menu-body { grid-template-columns: 1fr; }
      .ir-chapters::after { height: .85rem; }
    }