/* ============================================================
   Axis Bank Integrated Annual Report 2025-26 — site styles
   Brand tokens extracted from axis-bank-ar-26.fig
   ============================================================ */

:root {
  --maroon: #971D4D;
  --maroon-deep: #520224;
  --maroon-mid: #8F1347;
  --maroon-dark: #6E1131;
  --pink: #EE286E;
  --pink-2: #ED2966;
  --ink: #414042;
  --ink-soft: #414042;
  --ink-soft-2: #58595B;
  --hairline: #A7A9AC;
  --line-15: rgba(0, 0, 0, .15);
  --line-10: rgba(0, 0, 0, .10);
  --line-50: rgba(0, 0, 0, .50);
  --surface: #ffffff;
  --surface-alt: #F8F8F8;
  --surface-tint: #FFF4F8;
  --surface-2: #F1F1F2;
  --green-1: #2D9A47;
  --green-2: #46A544;
  --green-3: #60B142;
  --green-4: #74BA41;
  --green-5: #82C13F;
  --green-6: #8AC43F;
  --green-7: #8DC63F;

  --bg: var(--surface);
  --bg-alt: var(--surface-alt);
  --bg-tint: var(--surface-tint);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --card-line: var(--line-10);
  --card-line2: var(--line-50);
  --header-bg: rgba(255, 255, 255, .65);
  --pill-bg: #ffffff;
  --pill-line: var(--line-15);
  --pill-text: #23212F;

  /* Brand maroon as *ink* (headings, links, icons). Separate from --maroon,
     which also paints fills that carry white text and so must stay dark in
     both themes. #971D4D on the dark surfaces is only ~2.4:1, hence the
     lightened rose below. */
  --brand-ink: var(--maroon);
  --brand-ink-deep: var(--maroon-deep);

  /* Donut/legend series. Kept as tokens because #414042 disappears on a
     near-black surface. */
  --chart-1: #8F1347;
  --chart-2: #414042;
  --chart-3: #9A9B9D;
  --chart-4: #C7C8CA;
  --chart-5: #E4E5E6;

  --ease: cubic-bezier(.22, .68, 0, 1);
}

html[data-theme="dark"] {
  --bg: #14080E;
  --bg-alt: #1B0C13;
  --bg-tint: #1F0F17;
  --text: #F1E7EA;
  --text-soft: #C9BAC0;
  --card-line: rgba(255, 255, 255, .10);
  --header-bg: rgba(20, 8, 14, .6);
  --pill-bg: #2A1420;
  --pill-line: rgba(255, 255, 255, .15);
  --pill-text: #F1E7EA;
  --surface: #1B0C13;
  --surface-2: #241019;
  --card-line2: #FFFFFF;

  --brand-ink: #F5799E;
  /* Pairs against --pink in the gender split. Light uses near-black maroon for
     that contrast; on a dark surface the separation has to come from the other
     end of the scale, so this goes pale rather than deep. */
  --brand-ink-deep: #F9BDD3;

  --chart-1: #D9316F;
  --chart-2: #8E9095;
  --chart-3: #B0B2B6;
  --chart-4: #CFD1D4;
  --chart-5: #EDEEEF;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  transition: background-color .35s var(--ease), color .35s var(--ease);
  overflow-x: hidden;
}

a {
  color: var(--pink);
  text-decoration: none;
}

a:hover {
  color: var(--brand-ink);
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

.container-xl {
  max-width: 1512px;
}

/* Every section wraps its content in `.container-xl px-4`, and Bootstrap's px-4
   utility is !important, so it pins the gutter to 24px and outranks a plain
   padding rule here whatever the order — hence the !important below. Under 1512
   the container is also uncapped, so that 24px ends up being the whole gutter
   and sections run near edge-to-edge. Desktop range only: at 1512+ the
   max-width centres the content and supplies the margin, so that end stays at
   the Figma reference, and under 992 px-4 still owns the mobile gutter. */
@media (min-width:992px) and (max-width:1511.98px) {
  .container-xl.px-4 {
    padding-inline: 6vw !important;
  }
}

/* ---------- utility ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 100px;
  border: 1px solid var(--pill-line);
  background: transparent;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pill-text);
  width: max-content;
}

.eyebrow--light {
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}

.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--maroon);
  flex: none;
}

.eyebrow--light .dot {
  background: #fff;
}

.section-head {
  /* max-width: 620px; */
  margin-bottom: 48px;
  /* text-align: center; */
}

.section-title {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--brand-ink);
  margin: 20px 0 0;
  font-weight: 400;
  text-wrap: balance;
}

.section-title--light {
  color: #fff;
}

.section-lede {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -.02em;
  /* color: var(--text-soft); */
  color: #97144d;
  margin-top: 20px;
}

.section-lede span {
  color: #ee286e

}

[data-theme="dark"] .section-lede {
  color: rgba(255, 255, 255, .9);
}

.section-lede--light {
  color: rgba(255, 255, 255, .9);
}

.pad-section {
  padding: 80px 0;

}

#dilse {
  background-color: var(--bg-alt);
}

@media (max-width:991px) {
  .pad-section {
    padding: 56px 0;
  }
}

@media (max-width:575px) {
  .pad-section {
    padding: 44px 0;
  }
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 8px;
  width: max-content;
  transition: gap .25s var(--ease), color .2s, border-color .2s;
}

.btn-cta:hover {
  gap: 16px;
  color: var(--brand-ink);
  border-color: var(--brand-ink);
  text-decoration: none;
}

.btn-cta--light {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}

.btn-cta--light:hover {
  color: #fff;
  border-color: #fff;
  opacity: .9;
}

.btn-cta svg {
  width: 16px;
  height: 16px;
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 10px clamp(20px, 4vw, 73px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-image: url('../images/head-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* head-bg.png is 89px tall; matching it keeps the notch from being squashed. */
  min-height: 89px;
  transition: background-color .35s var(--ease), transform .35s var(--ease), min-height .35s var(--ease);
}

.site-header .logo {
  flex: none;
}

.site-header .logo img {
  height: 32px;
  width: auto;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Drops the controls out of the maroon top strip and centres them in the
     notch, whose clear band runs from y=34 to the bar's 89px base. */
  margin-top: 34px;
}

.hdr-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 35px;
  padding: 0 16px;
  border-radius: 100px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-15);
  font-size: 14px;
  color: #071926;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.hdr-pill:hover {
  color: #071926;
  text-decoration: none;
}

.hdr-pill img,
.hdr-pill svg {
  width: 16px;
  height: 16px;
}

.hdr-pill__icon {
  border-radius: 0;
}

.hdr-pill--report {
  padding-left: 6px;
  /* Parks the pill just left of the notch corner. The bar is stretched to the
     viewport, so the corner stays at ~77% of the width and the offset has to
     scale with it — a fixed px gap slides the pill over the notch as the window
     widens. 144px covers the search circle, the theme toggle and their gaps. */
  margin-right: calc(26vw - clamp(20px, 4vw, 73px) - 144px);
}

.hdr-pill--report .hdr-pill__icon {
  width: 26px;
  height: 26px;
}

.hdr-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.hdr-circle svg {
  width: 16px;
  height: 16px;
}

.theme-toggle {
  width: auto;
  padding: 0 16px 0 12px;
  justify-content: center;
}

/* Off the top on the way down, back on the way up — see "Header on scroll" in
   main.js. */
.site-header.is-hidden {
  transform: translateY(-100%);
}

/* The notch art reads against the hero only; once the page moves the bar goes
   flat maroon and compacts around the controls, the same shape it already takes
   below 991px. */
.site-header.is-scrolled {
  background-image: none;
  background-color: var(--maroon);
  min-height: 64px;
}

.site-header.is-scrolled .header-controls {
  margin-top: 0;
}

.site-header.is-scrolled .hdr-pill--report {
  margin-right: 0;
}

/* The stepped head-bg.png notch and the offsets that park the controls inside
   it only hold at desktop widths; below that the bar goes flat maroon. */
@media (max-width:991px) {
  .site-header {
    padding: 10px clamp(16px, 4vw, 73px);
    min-height: 64px;
    background-image: none;
    background-color: var(--maroon);
  }

  .site-header .logo img {
    height: 28px;
  }

  .header-controls {
    margin-top: 0;
    gap: 8px;
  }

  .hdr-pill--report {
    margin-right: 0;
  }
}

@media (max-width:767px) {

  /* No room for both labels alongside the logo — collapse to icon-only circles. */
  .hdr-pill--report .hdr-pill__label,
  .theme-toggle #themeLabel {
    display: none;
  }

  .hdr-pill--report,
  .theme-toggle {
    width: 35px;
    padding: 0;
    justify-content: center;
    flex: none;
  }

  .hdr-pill--report .hdr-pill__icon {
    width: 22px;
    height: 22px;
  }
}

@media (max-width:575px) {
  .site-header .logo img {
    height: 24px;
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 850px;
  height: 110svh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--maroon-deep) 44.79%, #800033 95.11%);
}

.hero__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  /* clip-path: polygon(38.4% 10.6%, 79% 10.6%, 79% 61%, 59.5% 100%, 38.4% 100%); */
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

/* Start state for the opening settle in main.js: the banner lands fractionally
   zoomed and eases back to its natural crop under the copy.
   Above 768px only — below it the image sits in flow, where a scaled-up box
   bleeds over the headline stacked beneath it instead of being clipped by the
   hero. The origin sits high because the group's faces are in the top half and
   that is what the eye should see settle. */
@media (min-width:768px) {
  .hero__img {
    transform: scale(1.12);
    transform-origin: 50% 40%;
    will-change: transform;
  }
}

.hero__content {
  position: relative;
  z-index: 2;
  height: 850px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(20px, 5vw, 73px) 100px;
}

.hero__mark {
  font-family: "Lato", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(38px, 6vw, 65px);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #fff;
  margin: 0 0 40px;
}

.hero__badge {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
}

.hero__badge:hover {
  text-decoration: none;
}

.hero__badge .ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}

/* The glyph inside the ring is a download arrow, so the hover nudges it the way
   the arrow points. */
.hero__badge:hover .ring {
  transform: translateY(3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}

.hero__badge .rep-title {
  font-size: 20px;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.2;
}

.hero__badge .rep-year {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.2;
}

.hero__dilse {
  position: absolute;
  right: clamp(20px, 5vw, 73px);
  top: clamp(120px, 20vw, 300px);
  font-family: "Lato", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 55px);
  line-height: .85;
  letter-spacing: -.04em;
  color: #ee3f8f;
  z-index: 2;
}

/* The reveal rides the inner span so the outer stays free for the scroll-away
   drift in main.js — two tweens on one element's transform would fight. */
.hero__dilse-in {
  display: block;
}

.hero__scroll {
  position: absolute;
  right: clamp(20px, 4vw, 60px);
  bottom: 60px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #fff;
}

/* Muted through the colour rather than opacity: opacity is what .reveal-up
   animates, and a tween to 1 would burn the muting off. */
.hero__scroll span {
  writing-mode: vertical-rl;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .6);
}

.hero__scroll .line {
  width: 2px;
  height: 60px;
  background: rgba(255, 255, 255, .4);
  position: relative;
  overflow: hidden;
}

.hero__scroll .line i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: #fff;
  animation: scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine {
  0% {
    transform: translateY(-100%)
  }

  100% {
    transform: translateY(250%)
  }
}

/* The banner is a wide desktop crop: stretched over a portrait viewport it shows
   only ~15% of its width and slices the group of people apart. Below tablet the
   image drops out of the cover role and sits in flow as a band framed on the
   group, with the copy stacked underneath instead of layered over it.
   The section still fills the screen: the band takes the crop it can survive
   (see below) and the copy takes whatever is left, rather than the image
   stretching to make up the difference. */
@media (max-width:767px) {
  .hero {
    height: 100svh;
    /* Landscape phones are still under 767px wide but only ~375px tall, which
       is less than the copy needs once the band has taken its share. Below this
       the hero gives up on filling the screen and scrolls instead — the
       alternative is the headline clipped by .hero's overflow. */
    min-height: 560px;
    display: flex;
    flex-direction: column;
  }

  /* 3/4 is the tallest band that still exposes ~42% of the source width, which
     is what it takes to fit the group (they span x=38%-79%); anything taller
     zooms in far enough to cut people off. 65% centres on the group.
     So: flex none. Filling the screen is the section's job, not the image's —
     stretching this to close the gap is exactly the crop that loses people.
     The 62svh cap is what reserves the rest of the screen for the copy. */
  .hero__img {
    position: relative;
    flex: none;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: 62svh;
    object-position: 65% 50%;
  }

  /* Takes the screen the band left over, and centres the copy in it (the base
     rule is already a centred column). */
  .hero__content {
    flex: 1;
    height: auto;
    padding: 28px 20px 56px;
  }

  .hero__mark {
    margin-bottom: 28px;
  }

  .hero__badge {
    gap: 14px;
  }

  .hero__badge .rep-title {
    font-size: 17px;
  }

  .hero__badge .rep-year {
    font-size: 20px;
  }

  /* Flips to the left: the group now fills the right of the band, and the empty
     maroon above their heads is the only clear space left for this. */
  .hero__dilse {
    top: 84px;
    left: 20px;
    right: auto;
  }

  /* The vertical rail collides with the download badge once the copy stacks. */
  .hero__scroll {
    display: none;
  }
}

/* ---------- intro quote ---------- */
.intro {
  background: var(--bg-alt);
  padding: 100px 0;
  overflow: hidden;
}

.intro__inner {
  max-width: 730px;
  margin: 0 auto;
}

.intro__quote-wrap {
  position: relative;
}

.intro__quote {
  max-width: 100%;
  margin: 0;
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.5;
  color: var(--text-soft);
  letter-spacing: -.01em;
}

.intro__quote b {
  color: var(--brand-ink);
  font-weight: 700;
}

.intro__quote b:last-of-type {
  font-style: italic;
}

.intro__rule {
  position: absolute;
  right: -600px;
  bottom: -35px;
  width: 945px;
  max-width: none;
  height: auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .intro__rule {
    right: -400px;
    bottom: -35px;
    width: 800px;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .intro__rule {
    position: absolute;
    right: -415px;
    bottom: -43px;
    width: 800px;
    max-width: none;
    height: auto;
  }
}

@media (max-width:900px) {
  .intro__rule {
    display: none;
  }
}

.intro__sub {
  max-width: 520px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 400;
  margin: 32px 0 0;
}

.intro .btn-cta {
  margin-top: 28px;
}

/* ---------- capitals grid ---------- */
.about-report-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 60px;
}

/* Only used by #about-report, where the head is a sticky column beside the
   capitals list rather than a banner over one — so it reads left, not centred. */
.section-head--sticky {
  margin-bottom: 0;
  text-align: left;
}

@media (min-width:992px) {
  .section-head--sticky {
    position: sticky;
    top: 120px;
    align-self: start;
    /* max-width: 340px; */
  }
}

.capital-list {
  display: flex;
  flex-direction: column;
}

.capital-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--card-line);
}

.capital-row:first-child {
  padding-top: 0;
}

.capital-row__left {
  display: flex;
  flex-direction: column;
  width: 300px;
  flex: none;
}

.capital-row img {
  width: 44px;
  height: 45px;
  object-fit: contain;
}

.capital-row h3 {
  font-size: 22px;
  color: var(--pink);
  letter-spacing: -.01em;
  margin: 16px 0 0;
  font-weight: 400;
}

.capital-row p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
  flex: 1;
  padding-top: 8px;
  max-width: 350px;
}

@media (max-width:991px) {
  .about-report-grid {
    grid-template-columns: 1fr;
  }

  .capital-row {
    flex-direction: column;
  }

  .capital-row__left {
    width: auto;
  }

  .capital-row p {
    padding-top: 0;
  }
}

/* ---------- stat counters ---------- */
.stat .num {
  font-size: clamp(32px, 4vw, 48px);
  /* font-weight: 900; */
  color: var(--pink);
  letter-spacing: -.02em;
  line-height: 1;
}

.stat .label {
  font-size: 16px;
  color: var(--text-soft);
  margin-top: 10px;
  line-height: 1.4;
}

@media (max-width:575px) {
  .stat .label {
    font-size: 12px;
  }
}

/* ---------- about axis ---------- */
.about-axis {
  background: linear-gradient(135deg, #FDF1F6 0%, #FAD6E8 30%, #F5A6CE 65%, #EE7FC0 100%);
}

html[data-theme="dark"] .about-axis {
  background: linear-gradient(135deg, #2A0F1D 0%, #3A1128 40%, #59173A 75%, #7A1A4C 100%);
}

.about-axis__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.about-axis__head .btn-cta {
  margin-top: 20px;
}

.about-axis__img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.about-axis__stats-rule {
  height: 1px;
  background: var(--card-line);
  margin: 60px 0 50px;
}

.about-axis__stats {
  text-align: center;
}

.about-axis__stats .col-6 {
  border-right: 1px solid var(--card-line);
}

.about-axis__stats .col-6:last-child {
  border-right: 0;
}

.about-axis__stats .stat {
  width: 80%;
  margin: 0 auto;
}

@media (max-width:991px) {
  .about-axis__stats .col-6 {
    border-right: 0;
    border-bottom: 1px solid var(--card-line);
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
}

/* The five values are dark ink on a transparent PNG, drawn against the light
   pink panel. The dark gradient leaves them nothing to read against and a
   filter would shift the brand pink off-spec, so dark mode carries the surface
   they were drawn for instead of recolouring the art. */
.value-mark {
  border-radius: 8px;
}

html[data-theme="dark"] .value-mark {
  background: #FDF1F6;
  padding: 6px 8px;
}

/* accordion */
.accordion-item {
  border-bottom: 1px solid var(--card-line);
}

.accordion-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: 0;
  padding: 18px 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

.accordion-item__icon {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
}

.accordion-item__icon::before,
.accordion-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--text);
  width: 15px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.accordion-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform .25s var(--ease), opacity .25s;
}

.accordion-item.is-open .accordion-item__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.accordion-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease), padding .35s var(--ease);
}

.accordion-item.is-open .accordion-item__body {
  /* max-height: 260px; */
  max-height: max-content;
  padding-bottom: 24px;
}

.accordion-item__body p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: -.02em;
}

.accordion-item__body ul {
  margin-top: 10px;
  padding-left: 1.2rem;
}

/* ---------- biz lines: stacked pinned cards ---------- */
.biz-stack {
  position: relative;
}

.biz-pin-card {
  position: sticky;
  top: 110px;
  padding-bottom: 40px;
}

.biz-card2 {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--card-line);
  padding: 56px;
  opacity: 1 !important;
}

.biz-card2__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.biz-card2__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 56px;
}

.biz-card2__row--reverse {
  flex-direction: row-reverse;
}

.biz-card2__text {
  flex: 1 1 0;
  min-width: 0;
}

.biz-card2__text h3 {
  font-size: 26px;
  color: var(--brand-ink);
  letter-spacing: -.03em;
  font-weight: 400;
  margin: 0 0 16px;
}

.biz-card2__text>p {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 24px;
  margin-top: 10px;
}

.biz-card2__rule {
  height: 1px;
  background: var(--card-line);
  margin: 24px 0;
}

.biz-card2__text h4 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--brand-ink);
  margin: 0 0 20px;
}

.biz-card2__note {
  font-size: 14px;
  color: var(--text-soft);
  margin: 14px 0 0;
}

.biz-metrics {
  /* display: flex;
  flex-wrap: wrap; */

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
  margin-bottom: 20px;
}

.biz-metric2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 230px;
}

.biz-metric2 .val {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  letter-spacing: -.03em;
  color: var(--pink);
}

.biz-metric2 .val svg {
  width: 14px;
  height: 12px;
}

.biz-metric2 .lbl {
  font-size: 16px;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.biz-metrics--amount .biz-metric2 {
  max-width: 280px;
}

.biz-metric2--amount .amt {
  font-size: 26px;
  letter-spacing: -.03em;
  color: var(--pink);
}

.biz-metric2--amount .lbl {
  font-size: 16px;
  color: var(--text);
  margin-top: 2px;
}

.biz-metric2--amount .growth {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--text);
  margin-top: 2px;
}

.biz-metric2--amount .growth svg {
  width: 14px;
  height: 12px;
  flex: none;
}

.biz-card2__img {
  flex: none;
  width: 44%;
  border-radius: 10px;
  overflow: hidden;
}

.biz-card2__img img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* One Axis logo panel */
.one-axis-logos {
  flex: none;
  width: 44%;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.one-axis-logos__grid {
  width: 100%;
  height: 100%;
  background: var(--surface);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--card-line);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 26px;
  column-gap: 20px;
}

.oa-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--brand-ink);
}

.oa-tri {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid var(--brand-ink);
  flex: none;
}

.oa-logo--img img {
  height: 26px;
  width: auto;
  object-fit: contain;
}

@media (max-width:1199px) {
  .biz-card2 {
    padding: 40px;
  }

  .biz-card2__row {
    gap: 32px;
  }
}

@media (max-width:991px) {
  .biz-card2 {
    padding: 28px;
  }

  .biz-card2__row,
  .biz-card2__row--reverse {
    flex-direction: column;
    align-items: stretch;
  }

  .biz-card2__bg {
    width: 100%;
  }

  .biz-card2__img,
  .one-axis-logos {
    width: 100%;
    order: -1;
  }

  .biz-card2__img img {
    height: 260px;
  }

  .one-axis-logos__grid {
    padding: 24px;
  }
}

/* Shorter laptop viewports (e.g. 1366x768, 1440x900 with browser chrome):
   the pinned card can be taller than the visible area below its sticky
   offset, cutting off the Discover More CTA. Shrink it to fit. */
@media (min-width:992px) and (max-height:840px) {
  .biz-pin-card {
    top: 24px;
    padding-bottom: 24px;
  }

  .biz-card2 {
    padding: 32px 40px;
  }

  .biz-card2__row {
    gap: 32px;
  }

  .biz-card2__text h3 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .biz-card2__text>p {
    font-size: 16px;
    margin-top: 6px;
    margin-bottom: 14px;
  }

  .biz-card2__rule {
    margin: 14px 0;
  }

  .biz-card2__text h4 {
    font-size: 17px;
    margin-bottom: 12px;
  }

  .biz-metrics {
    gap: 16px 24px;
    margin-bottom: 12px;
  }

  .biz-metric2 .val,
  .biz-metric2--amount .amt {
    font-size: 20px;
  }

  .biz-metric2 .lbl,
  .biz-metric2--amount .lbl,
  .biz-metric2--amount .growth {
    font-size: 13px;
  }

  .biz-card2__note {
    margin-top: 8px;
    font-size: 12px;
  }

  .biz-card2__img img {
    height: 300px;
  }

  .one-axis-logos__grid {
    padding: 20px 24px;
    row-gap: 14px;
  }
}

/* ---------- pillars stage ---------- */
.strategic-pillars {
  background: var(--bg-alt);
}

.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.sp-grid>div {
  min-width: 0;
}

.sp-grid .sp-left {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.sp-left .btn-cta {
  margin-bottom: 64px;
}

.sp-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sp-thumb {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 170/110;
  cursor: pointer;
}

/* transform only: opacity here belongs to swapSpThumb() in main.js, and a live
   transition on it would ease towards each inline value the tween writes,
   damping the cross-fade into something that never reaches 0. The hover dim
   below still applies — it just lands at once instead of easing. */
.sp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.sp-thumb:hover img {
  transform: scale(1.06);
  opacity: .9;
}

.sp-right {
  position: relative;
}

.sp-stage {
  position: relative;
  border-radius: 14px;
  overflow: visible;
}

.sp-stage__top {
  background: var(--bg-tint);
  height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

.sp-stage__top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-stage__top--logos img {
  object-fit: contain;
  padding: 30px;
}

.sp-stage__caption {
  position: relative;
  padding: 48px 27px;
  overflow: hidden;
  background-image: url(../images/start-rhs-desc-bg.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100% 100%;
  margin-top: -10px;
  /* background: linear-gradient(90deg, var(--maroon) 0%, #6E1131 45%, #ED286E 100%);
  border-radius: 0 0 14px 14px; */
  color: #fff;
  /* clip-path: polygon(0 0, 100% 0, 100% 62%, 88% 100%, 0 100%); */
}

.sp-stage__caption h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 0 0 8px;
}

.sp-stage__caption p {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 460px;
  color: rgba(255, 255, 255, .9);
}

.sp-stage__num {
  position: absolute;
  top: 0;
  right: 10px;
  background: #fff;
  color: var(--maroon);
  z-index: 2;
  font-weight: 700;
  font-size: 15px;
  padding: 9px 22px 9px 22px;
  border-radius: 0 0px 0 0;
  clip-path: polygon(27% 0, 100% 0, 76% 100%, 0% 100%);
}

.sp-nav {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  margin-top: -50px;
  position: relative;
  z-index: 2;
}

@media (max-width:991px) {
  .sp-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .sp-left .btn-cta {
    margin-bottom: 32px;
  }

  .sp-stage__top {
    height: 320px;
  }

  .sp-stage__caption {
    padding: 20px 24px;
  }
}

@media (max-width:575px) {

  /* The artwork is a single fixed shape stretched to 100% 100%. At phone widths
     the caption is far taller than it is wide, which drags the shape's diagonal
     notch up across the copy — the last line ends up reading through the pale
     wedge. Flat maroon instead; the shorthand clears the image and its sizing
     with it. The corners were part of the artwork, so they have to be restated
     to stay matched to .sp-stage__top above. */
  .sp-stage__caption {
    clip-path: none;
    padding: 20px;
    background: var(--maroon);
    border-radius: 0 0 14px 14px;
  }

  .sp-stage__num {
    border-radius: 0;
    clip-path: none;
    position: static;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 16px;
    border-radius: 100px;
  }

  .sp-nav {
    margin-top: 16px;
  }
}

/* ---------- split (operating landscape / ownership) ---------- */
.split-panel {
  padding: clamp(40px, 10vw, 108px) clamp(24px, 6vw, 80px);
  min-height: 622px;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  color: #fff;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
  }

  &:first-child::after {
    background-image: url(../images/pattern-top.png);
    background-position: top left;
  }

  &:last-child::after {
    background-image: url(../images/pattern-bottom.png);
    background-position: bottom right;
  }
}

.split-panel p {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .9);
  margin: 24px 0 0;
  /* max-width: 450px; */
}

.split-panel .btn-cta {
  margin-top: 36px;
}

/* ---------- marketing initiatives ---------- */
.mkt-init {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* The billboard art is its own layer rather than the section's background-image
   so scroll can scale and offset it without taking the copy along. The 10%
   overscan top and bottom is what the parallax travels into — at this drift the
   layer still covers the section at every point, so no edge is ever exposed. */
.mkt-init__bg {
  position: absolute;
  inset: -10% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.mkt-init__inner {
  position: relative;
  z-index: 1;
}

/* Sits on a daylight photograph that is the same in both themes, so the copy
   can't take the theme tokens with it — the pale sky needs dark ink either way.
   Pinned to the light values rather than given a scrim so the billboard art
   stays uncovered. */
html[data-theme="dark"] .mkt-init .eyebrow {
  color: #23212F;
  border-color: var(--line-15);
}

html[data-theme="dark"] .mkt-init .section-title {
  color: var(--maroon);
}

html[data-theme="dark"] .mkt-init .btn-cta {
  color: var(--ink);
  border-color: var(--hairline);
}

html[data-theme="dark"] .mkt-init .btn-cta:hover {
  color: var(--maroon);
  border-color: var(--maroon);
}

/* ---------- KPI accordion ---------- */
.kpi-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.kpi-acc {
  border-top: 1px solid var(--card-line);
  padding-bottom: 10px;
}

.kpi-acc:last-child {
  border-bottom: 1px solid var(--card-line);
}

.kpi-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 26px 0;
  text-align: left;
  font-family: inherit;
  font-size: 26px;
  color: var(--pink);
  letter-spacing: -.02em;
  transition: color .25s var(--ease);
}

.kpi-acc__head:hover {
  color: var(--brand-ink);
}

/* Only the label moves — the icon stays put on the right margin, so the row
   reads as the label stepping towards its own chart rather than the whole
   button shifting. */
.kpi-acc__head>span:first-child {
  display: inline-block;
  transition: transform .3s var(--ease);
}

.kpi-acc__head:hover>span:first-child {
  transform: translateX(6px);
}

.kpi-acc__icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}

.kpi-acc__icon::before,
.kpi-acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--pink);
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.kpi-acc__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform .25s var(--ease), opacity .25s;
}

.kpi-acc.is-open .kpi-acc__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.kpi-acc__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease);
}

.kpi-acc.is-open .kpi-acc__body {
  max-height: 4000px;
}

.kpi-acc__body-inner {
  padding-bottom: 32px;
}

.kpi-swiper {
  padding-bottom: 8px;
}

/* The carousel runs slidesPerView:'auto', so the 1/2/3-up track is sized here.
   24px is the configured spaceBetween — keep the two in step. */
.kpi-swiper .swiper-slide {
  width: 100%;
}

@media (min-width:576px) {
  .kpi-swiper .swiper-slide {
    width: calc((100% - 24px) / 2);
  }
}

@media (min-width:992px) {
  .kpi-swiper .swiper-slide {
    width: calc((100% - 48px) / 3);
    height: auto;
  }
}

/* Takes two columns plus the gutter between them, so a card too wide for one
   slot stays a single slide instead of being split across two. */
@media (min-width:576px) {
  .kpi-swiper .swiper-slide--wide {
    width: 100%;
  }
}

@media (min-width:992px) {
  .kpi-swiper .swiper-slide--wide {
    width: calc((100% - 48px) / 3 * 2 + 24px);
  }
}

.kpi-bars-card,
.kpi-donut-card {
  padding: 8px 4px 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.kpi-bars-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.kpi-bars-card__head h3 {
  font-size: 15px;
  color: var(--brand-ink);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}

.kpi-bars-card__head .unit {
  font-size: 13px;
  color: var(--text-soft);
  white-space: nowrap;
}

.kpi-growth {
  display: flex;
  gap: 20px;
  margin: 10px 0 20px;
}

.kpi-growth .g {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-soft);
}

/* Green reads y-o-y growth, grey the 4-year CAGR — always the second of the
   pair, in both the stat rows and the footnote key. */
.tri {
  width: 14px;
  height: 12px;
  display: inline-block;
  flex: none;
  background: url(../images/tri-green.svg) no-repeat center;
  background-size: contain;
}

.kpi-growth .g:not(:first-child) .tri,
.kpi-footnote .tri ~ .tri {
  background-image: url(../images/tri-grey.svg);
}

.kpi-bar-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--card-line);
}

.kpi-bar-row:first-of-type {
  border-top: 1px solid var(--card-line);
}

.kpi-bar-row .fy {
  font-size: 14px;
  color: var(--text-soft);
  white-space: nowrap;
}

.kpi-bar-row.is-current .fy {
  color: var(--text);
}

.kpi-bar-row .track {
  height: 8px;
  /* border-radius: 100px; */
  background: var(--card-line);
  overflow: hidden;
}

.kpi-bar-row .fill {
  display: block;
  height: 100%;
  width: 0;
  /* border-radius: 100px; */
  background: var(--card-line2);
}

.kpi-bar-row.is-current .fill {
  background: var(--maroon);
}

/* #971D4D only clears ~2.2:1 against the near-black track. */
html[data-theme="dark"] .kpi-bar-row.is-current .fill {
  background: var(--chart-1);
}

.kpi-bar-row .val {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
  text-align: right;
  min-width: 80px;
}

html[data-theme="dark"] .kpi-bar-row .val {
  color: var(--pink);
}

/* A y-o-y decline reuses the green triangle upside-down, so the pair keeps its
   green/grey reading and only the direction changes. */
.tri--down {
  transform: rotate(180deg);
}

/* ---------- NIM-over-NII combo card ---------- */
/* The NII bars and the NIM line carry different units, so the NIM figure is
   direct-labelled at every point — there is no second axis to read it against. */
.kpi-subhead {
  margin-top: -2px;
  margin-bottom: 4px;
}

.kpi-subhead h4 {
  font-size: 15px;
  color: var(--pink);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}

.kpi-combo {
  position: relative;
}

/* The overlay is measured off the .track column and pinned over it, so the line
   stays aligned with the bars at any width. */
.kpi-combo__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.kpi-combo__path {
  fill: none;
  stroke: var(--pink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Where the line traces the bar tips it carries no figures of its own, so the
   vertices are marked instead. The ring keeps them off the bar they sit on. */
.kpi-combo__dot {
  fill: var(--pink);
  stroke: var(--bg);
  stroke-width: 2;
}

/* A ring in the page background keeps each figure legible where the line
   crosses the filled maroon bar of the current year. --bg, not --surface, for
   the reason given on .kpi-donut::after below. */
.kpi-combo__label {
  font-size: 13px;
  font-weight: 700;
  fill: var(--pink);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.kpi-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.kpi-donut {
  position: relative;
  width: 165px;
  height: 165px;
  border-radius: 50%;
  flex: none;
  transform: scale(.85);
  opacity: 0;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}

.kpi-acc.is-open .kpi-donut {
  transform: scale(1);
  opacity: 1;
}

/* A thin ring, so the values can sit in the hole and read against the surface
   instead of against fills that run from maroon to near-white. Matches --bg,
   not --surface: the section takes the page background, and at this ring width
   the ~7% difference between the two would show as a disc in dark mode. */
.kpi-donut::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: var(--bg);
  z-index: 0;
}

.kpi-donut__label {
  position: absolute;
  z-index: 1;
  font-size: 18px;
  line-height: 1;
  color: var(--text-soft);
  transform: translate(-50%, -50%);
}

.kpi-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: 10px 24px;
  font-size: 13px;
  color: var(--text-soft);
}

.kpi-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kpi-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
  display: inline-block;
}

.kpi-legend i.sw-1 { background: var(--chart-1); }
.kpi-legend i.sw-2 { background: var(--chart-2); }
.kpi-legend i.sw-3 { background: var(--chart-3); }
.kpi-legend i.sw-4 { background: var(--chart-4); }
.kpi-legend i.sw-5 { background: var(--chart-5); }

.kpi-gender-card {
  padding: 8px 4px 0;
}

.kpi-gender-card__label {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 14px;
}

.kpi-gender-card__icons {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kpi-gender-card__icons .icon-m,
.kpi-gender-card__icons .icon-f {
  height: 35px;
  width: auto;
}

.kpi-gender-bar {
  display: flex;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
}

.kpi-gender-bar .men {
  width: 0;
  background: var(--brand-ink-deep);
  transition: width 1s var(--ease);
}

.kpi-gender-bar .women {
  width: 0;
  background: var(--pink);
  transition: width 1s var(--ease);
}

.kpi-gender-card__pcts {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* ---------- Highlights of Subsidiaries ---------- */
/* One double-width slide of the People carousel, so it matches the bar/donut
   cards' frame while the seven figures sit 4-up as in the report spread. */
.kpi-sub-card {
  padding: 8px 4px 0;
}

.kpi-sub-card__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 16px;
  margin-top: 18px;
}

@media (min-width:576px) {
  .kpi-sub-card__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kpi-sub__val {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pink);
}

/* The triangle is set against a 20px figure here, not 14px body text. */
.kpi-sub__val .tri {
  width: 12px;
  height: 11px;
}

.kpi-sub__val span {
  font-size: 14px;
  font-weight: 700;
}

.kpi-sub__label {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
}

html[data-theme="dark"] .kpi-sub__label {
  color: #fff;
}

.kpi-acc__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* The triangle key has to sit on its own row: .kpi-footnote is a flex
   container, so a <br> alongside the <i class="tri"> items would not break —
   the trailing text would column-stack beside the last triangle instead. */
.kpi-foot-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kpi-footnote {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.kpi-nav {
  display: flex;
  gap: 12px;
}

/* People carries a subsidiaries block and a five-line footnote after its
   slider, so its arrows sit directly under the slider they drive instead of in
   the footer, where they would be stranded well below it. */
.kpi-nav--under {
  justify-content: flex-end;
  margin-top: 24px;
}

@media (max-width:991px) {
  .kpi-acc__head {
    font-size: 22px;
    padding: 20px 0;
  }

  .kpi-donut-wrap {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width:575px) {
  .kpi-bar-row {
    grid-template-columns: 70px 1fr auto;
    gap: 8px;
  }

  .kpi-bar-row .val {
    min-width: 60px;
    font-size: 13px;
  }

  /* One slide per view below 576px, so the donut and its legend fit abreast
     again. Only the 576–991px range, where two narrow slides share the row,
     still stacks them. */
  .kpi-donut-wrap {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
  }

  /* Two legend columns plus the ring don't fit abreast on a handset — fall
     back to a single column and let the labels wrap. */
  .kpi-legend {
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

/* ---------- stakeholder engagement / materiality tabs ---------- */
.sm-tabs {
  display: flex;
  width: max-content;
  border-radius: 16px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

.sm-tab {
  border: 0;
  cursor: pointer;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: var(--pink);
  color: #fff;
  transition: background-color .25s;
}

.sm-tab.is-active {
  background: var(--maroon-deep);
}

/* Grid rather than the panels stacking absolutely: every panel keeps its own
   cell in the same track, so the stage is as tall as its content and the two
   can cross-fade without either being taken out of flow. */
.sm-stage {
  position: relative;
  border-radius: 0 14px 14px 14px;
  overflow: hidden;
  margin-top: -1px;
  display: grid;
}

.sm-panel {
  grid-area: 1 / 1;
  position: relative;
  height: 620px;
  opacity: 0;
  /* visibility, not display: it still cross-fades, but the panel you can't see
     stays out of the tab order and away from screen readers. */
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}

.sm-panel.is-active {
  opacity: 1;
  visibility: visible;
}

.sm-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sm-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 8, 14, .12) 0%, rgba(20, 8, 14, .15) 45%, rgba(20, 8, 14, 0) 70%);
}

.sm-content {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: min(560px, 90%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
}

.sm-content h2 {
  color: #fff;
  font-size: clamp(28px, 3.2vw, 36px);
  line-height: 1.25;
  letter-spacing: -.03em;
  font-weight: 400;
  margin: 0;
}

.sm-content p {
  color: rgba(255, 255, 255, .9);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -.01em;
  margin: 0 0 24px;
}

@media (max-width:991px) {
  .sm-panel {
    height: 480px;
  }

  .sm-content {
    padding: 32px;
    width: 100%;
  }
}

@media (max-width:575px) {
  .sm-tab {
    padding: 12px 16px;
    font-size: 13px;
  }

  .sm-panel {
    height: 520px;
  }

  .sm-content h2 {
    font-size: 24px;
  }

  .sm-overlay {
    background: linear-gradient(180deg, rgba(20, 8, 14, .15) 0%, rgba(20, 8, 14, .85) 65%);
  }
}

/* ---------- dil se open ---------- */
/* .container-xl caps at 1512px, so on a 1512-wide screen it is full-bleed and
   the panel would run to the viewport edge. This section is drawn sitting
   inside a narrower measure, so cap the grid itself rather than the shared
   container. Below ~1320px this max-width is never reached and the grid fills
   the container as before. */
.dilse2-grid {
  display: grid;
  /* grid-template-columns: 380px 1fr; */
      grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: start;
  max-width: 1272px;
  margin-inline: auto;
}

.dilse2-grid>div {
  min-width: 0;
}
.dilse2-grid .dilse2-left {
  padding-left: 40px;
  padding-top: 40px;
  /* Column runs the full height of the panel beside it so the nav can sit on
     the panel's bottom edge; see .dilse2-nextlabel. */
  display: flex;
  flex-direction: column;
  min-height: 620px;
}

.dilse2-mark {
  font-family: "Lato", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -.03em;
  color: var(--brand-ink);
  line-height: 1.2;
}

.dilse2-left .section-title {
  margin-top: 2px;
}

.dilse2-copy {
  font-size: 19px;
  line-height: 1.5;
  color: var(--text);
  margin: 20px 0 28px;
  /* The column is wider than the copy should run. Capping the measure here
     rather than narrowing the column keeps the panel on its grid line. */
  max-width: 450px;
}

.dilse2-copy b {
  color: var(--brand-ink);
  font-weight: 700;
  font-style: italic;
}

.dilse2-nextlabel {
  margin-top: auto;
}

.dilse2-nextlabel .lbl {
  display: block;
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 4px;
}

.dilse2-nextlabel .val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.dilse2-nav {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.dilse2-panel {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 620px;
}

.dilse2-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dilse2-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 65%);
}

.dilse2-pill {
  position: absolute;
  left: 32px;
  bottom: 96px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
}

.dilse2-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.dilse2-panel h3 {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  color: #fff;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 400;
  margin: 0;
}

@media (max-width:991px) {
  .dilse2-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* The indent balances the two-column desktop split; once the grid stacks it
     just eats a fifth of a phone's width. The panel is no longer alongside, so
     the full-height column and its bottom-pinned nav go too. */
  .dilse2-grid .dilse2-left {
    padding-left: 0;
    padding-top: 0;
    min-height: 0;
  }

  .dilse2-nextlabel {
    margin-top: 32px;
  }

  .dilse2-panel {
    height: 460px;
  }
}

@media (max-width:575px) {
  .dilse2-panel {
    height: 400px;
  }

  .dilse2-pill {
    bottom: 78px;
    left: 20px;
  }

  .dilse2-panel h3 {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
}

/* ---------- governance grid ---------- */
.gov-dark {
  background: linear-gradient(160deg, var(--pink) 0%, #C81F5F 55%, var(--maroon-deep) 100%);
  color: #fff;
}

.gov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.gov-swiper {
  padding-bottom: 8px;
}

.gov-swiper .swiper-slide {
  height: auto;
}

.gov-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 500px;
}

.gov-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}

.gov-card:hover img {
  transform: scale(1.06);
}

.gov-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
}

.gov-card__content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  transition: transform .35s var(--ease);
}

.gov-card:hover .gov-card__content {
  transform: translateY(-8px);
}

.gov-card__eyebrow {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 10px;
}

.gov-card__content h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 20px;
}

.gov-card__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .2s;
}

@media (hover:hover) {
  .gov-card__arrow {
    opacity: 0;
    transform: translateY(6px);
  }

  .gov-card:hover .gov-card__arrow {
    opacity: 1;
    transform: translateY(0);
  }
}

.gov-card__arrow svg {
  width: 16px;
  height: 16px;
}

.gov-card__arrow:hover {
  background: #fff;
}

.gov-card__arrow:hover svg path {
  stroke: var(--pink);
}

@media (max-width:991px) {
  .gov-card {
    height: 440px;
  }
}

@media (max-width:575px) {
  .gov-card {
    height: 420px;
  }

  .gov-card__content h3 {
    font-size: 19px;
  }

  .gov-swiper {
    padding-bottom: 36px;
  }
}

.gov-pagination {
  display: none;
}

@media (max-width:575px) {
  .gov-pagination {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
  }

  .gov-pagination .swiper-pagination-bullet {
    background: #fff;
    opacity: .45;
    width: 8px;
    height: 8px;
    margin: 0 4px;
  }

  .gov-pagination .swiper-pagination-bullet-active {
    opacity: 1;
  }
}

/* ---------- download center ---------- */
.dl-center {
  background: var(--bg);
}

.dl-center__title {
  text-align: center;
  margin: 0 0 50px;
}

.dl-center__grid {
  display: grid;
  grid-template-columns: 1fr 320px 1fr;
  align-items: flex-start;
  gap: 40px;
}

.dl-center__grid>* {
  min-width: 0;
}

.dl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dl-list li {
  border-bottom: 1px solid var(--card-line);
}

.dl-list li:first-child {
  border-top: 1px solid var(--card-line);
}

.dl-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  color: var(--text);
  font-size: 16px;
  text-decoration: none;
}

.dl-list a:hover {
  color: var(--brand-ink);
  text-decoration: none;
}

.dl-list a img {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform .3s var(--ease);
}

.dl-list a:hover img {
  transform: translateX(4px);
}

/* Start state for the entrance timeline in main.js — see the .dl-center block
   there, and the motion fallbacks at the foot of this file, which put all of
   this back on screen when the timeline is not going to run.
   The cover is the middle column, so each list is offset towards its own outer
   edge and arrives from there. */
.dl-list li,
.dl-center__book img {
  opacity: 0;
}

.dl-list--left li {
  transform: translateX(-28px);
}

.dl-list--right li {
  transform: translateX(28px);
}

.dl-center__book img {
  transform: translateY(24px) scale(.88);
}

.dl-center__book {
  display: flex;
  justify-content: center;
}

.dl-center__book img {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .18));
}

@media (max-width:991px) {
  .dl-center__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Stacked, the two lists run on as one column, so the right list's top cap
     lands directly under the left list's last border-bottom and the pair reads
     as a double rule above Governance. Side by side both lists still need it —
     hence the mobile-only removal. */
  .dl-list--right li:first-child {
    border-top: 0;
  }

  .dl-center__book {
    order: -1;
    margin-bottom: 24px;
  }

  .dl-center__book img {
    max-width: 220px;
  }
}

@media (max-width:575px) {
  .dl-list a {
    font-size: 15px;
    padding: 18px 0;
  }
}

.site-footer {
  background: var(--maroon-deep);
  color: #fff;
  /* padding: 70px 0 0; */
}

.site-footer h4 {
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 20px;
}

.site-footer a {
  color: rgba(255, 255, 255, .85);
  display: block;
  padding: 8px 0;
  font-size: 15px;
}

.site-footer a:hover {
  color: #fff;
}

.download-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255, 255, 255, .06);
  border-radius: 14px;
  padding: 24px 28px;
}

.download-cta img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
}

.download-cta .go {
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
  padding: 20px 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  /* margin-top: 50px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}

/* ---------- Stirrup credit ----------
   Overrides the blanket `.site-footer a` block/padding rule. The mark's S path
   inherits currentColor; only the orange bar is pinned in the SVG. */
.site-footer a.footer-credit {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  transition: color .25s ease;
}

.site-footer a.footer-credit:hover {
  color: #fff;
}

.footer-credit__logo {
  width: 16px;
  height: auto;
  display: block;
}

.footer-bottom>span {
  text-align: left;
}

@media (max-width: 575.98px) {
  .footer-bottom {
    justify-content: center;
  }

  .footer-bottom>span {
    text-align: center;
  }
}

/* ---------- back to top ----------
   Hidden until the page is scrolled clear of the hero; #backToTop.is-visible is
   set from main.js. Stays --maroon rather than --brand-ink because the fill has
   to carry a white glyph in both themes. */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 55px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--maroon);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--pink);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 575.98px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity .3s linear, visibility .3s;
    transform: none;
  }

  .back-to-top.is-visible {
    transform: none;
  }

  /* Same trade as the button above: the bar still gets out of the way on the
     way down, it just fades instead of sliding. */
  .site-header {
    transition: background-color .35s linear, opacity .3s linear, visibility .3s;
  }

  .site-header.is-hidden {
    transform: none;
    opacity: 0;
    visibility: hidden;
  }
}

/* ---------- slider arrows ----------
   One design for every slider's prev/next. The ring and glyph take
   --brand-ink rather than --maroon so they lighten on the dark surfaces;
   the hover fill stays --maroon because it has to carry white. */
.lead-arrow,
.sp-arrow,
.kpi-arrow,
.dilse2-arrow,
.swiper-nav {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--brand-ink);
  background: var(--bg-tint);
  color: var(--brand-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.lead-arrow svg,
.sp-arrow svg,
.kpi-arrow svg,
.dilse2-arrow svg,
.swiper-nav svg {
  width: 15px;
  height: 14px;
}

.lead-arrow:hover,
.sp-arrow:hover,
.sp-arrow.is-active,
.kpi-arrow:hover,
.dilse2-arrow:hover,
.swiper-nav:hover {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
}

/* ---------- leadership statements ---------- */
.leadership {
  background: var(--bg-tint);
  position: relative;
  overflow: hidden;
}

html[data-theme="dark"] .leadership {
  background: var(--bg-alt);
}

.lead-slide {
  position: relative;
  min-height: 780px;
  padding: 80px 0 0;
  display: flex;
  align-items: stretch;
}

.lead-slide__bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60%;
  max-width: 900px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.lead-slide__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.lead-slide__row {
  display: grid;
  grid-template-columns: 1fr 438px 1fr;
  align-items: end;
  gap: 40px;
  margin-top: 0px;
  flex: 1;
}

.lead-heading {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.28;
  letter-spacing: -.03em;
  color: var(--brand-ink);
  font-weight: 400;
  margin: 0;
}

.lead-heading b {
  color: var(--pink);
  font-weight: 400;
}

.lead-nav {
  display: flex;
  gap: 14px;
  margin-top: 36px;
}

.lead-portrait {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: -1px;
}

.lead-slide__col--portrait {
  align-self: end;
}

.lead-slide__col--portrait.twin_pic img {
  transform: scale(1.3);
  transform-origin: bottom center;
}

.lead-slide__col--heading {
  align-self: center;
}

.lead-slide__col--body {
  align-self: center;
  padding-left: 8px;
}

.lead-salutation {
  font-style: italic;
  font-weight: 700;
  color: var(--brand-ink);
  font-size: 18px;
  margin: 0 0 16px;
}

.lead-copy {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 20px;
}

.lead-slide__col--body .btn-cta {
  margin-bottom: 36px;
}

.lead-person+.lead-person {
  margin-top: 20px;
}

.lead-person__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -.01em;
}

.lead-person__title {
  font-size: 14px;
  color: var(--text-soft);
  margin-top: 2px;
}

.lead-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(90deg, var(--pink) 0%, #F397BE 100%);
}

.lead-tab {
  border: 0;
  cursor: pointer;
  padding: 20px 16px;
  text-align: center;
  background: #EE286E;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: -.01em;
  transition: background-color .25s;
}

/* The label lifts, not the button: .lead-tabs paints a gradient behind the row,
   so moving the tab itself would open a stripe of it along the bottom edge. */
.lead-tab span {
  display: block;
  transition: transform .25s var(--ease);
}

.lead-tab:hover span {
  transform: translateY(-2px);
}

.lead-tab.is-active {
  background: var(--maroon-dark);
}

@media (max-width:991px) {
  .lead-tabs {
    grid-template-columns: 1fr;
    display: none;
  }

  .lead-slide__row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lead-slide__col--portrait {
    order: -1;
    max-width: 280px;
    margin: 0 auto;
  }

  .lead-slide {
    min-height: auto;
    padding: 56px 0 44px;
  }

  .lead-slide__bg {
    width: 100%;
    max-width: none;
  }
}

@media (max-width:575px) {
  .lead-heading {
    font-size: 26px;
  }

  .lead-slide__col--portrait {
    max-width: 220px;
  }
}

/* gsap reveal helpers */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}

/* Line reveal: .rv-line is the mask, .rv-line__in is the line that rises into
   it. Split the copy by hand — one .rv-line per visual line — because the mask
   only works while the text inside it stays on a single line.
   Named rv- rather than .line: .hero__scroll .line is the scroll-down indicator
   and got these box rules by mistake.
   The padding/margin pair gives descenders (the g in "Building") somewhere to
   go; without it the mask clips them once the line has landed.
   The offset lives here rather than in the tween, the same way .reveal-up above
   does it: main.js only ever animates towards the resting state, so this stays
   the one place the start state is written. */
.rv-line {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.rv-line__in {
  display: block;
  transform: translateY(110%);
}

@media (max-width:991px) {
  .split-panel {
    min-height: auto;
  }
}

#value-creation {
  .section-head {
    text-align: center;
  }
}
/* ---------- search overlay ---------- */

/* Anchors are the only search destination on this single-page report, so every
   linkable section has to clear the fixed header when jumped to. */
main section[id],
main .split-panel[id] {
  scroll-margin-top: 105px;
}

.search-ov {
  --so-bg: var(--maroon-deep);
  --so-fg: #fff;
  --so-accent: var(--pink);
  --so-line: hsla(0, 0%, 100%, .22);
  --so-muted: hsla(0, 0%, 100%, .6);
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--so-bg);
  display: none;
  padding: 0 24px;
}

html[data-theme="dark"] .search-ov {
  --so-bg: #14080E;
}

.search-ov.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}

.search-ov__inner {
  width: 100%;
  max-width: 720px;
  margin: min(16vh, 140px) 0 60px;
}

.search-ov__close {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--so-line);
  background: transparent;
  color: var(--so-fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-ov__close svg {
  width: 16px;
  height: 16px;
}

.search-ov__close:hover {
  background: hsla(0, 0%, 100%, .08);
  border-color: var(--so-accent);
  color: var(--so-accent);
}

.search-ov__label {
  display: block;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 700;
  color: var(--so-accent);
}

.search-ov__field {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--so-line);
  padding: 14px 0;
  margin-top: 12px;
}

.search-ov__field svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--so-muted);
}

.search-ov__field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--so-fg);
  font-family: inherit;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.search-ov__field input::placeholder {
  color: hsla(0, 0%, 100%, .4);
}

.search-ov__field input::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: .5;
}

.search-ov__hint {
  color: var(--so-muted);
  margin-top: 16px;
  font-size: .95rem;
}

.search-ov__results {
  margin-top: 26px;
}

.so-count {
  margin: 0 0 6px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--so-muted);
}

.so-list {
  display: flex;
  flex-direction: column;
}

.so-hit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid hsla(0, 0%, 100%, .12);
  color: var(--so-fg);
  text-decoration: none;
  transition: gap .2s var(--ease), color .2s var(--ease);
}

.so-hit:hover {
  gap: 20px;
  color: var(--so-accent);
  text-decoration: none;
}

.so-hit__body {
  flex: 1 1 auto;
  min-width: 0;
}

.so-hit__cat {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--so-muted);
  margin-bottom: 4px;
}

.so-hit:hover .so-hit__cat {
  color: var(--so-accent);
}

.so-hit__ttl {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.so-hit__ttl b {
  color: var(--so-accent);
  font-weight: 900;
}

.so-hit__snip {
  display: block;
  margin-top: 5px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--so-muted);
}

.so-hit__snip b {
  color: var(--so-fg);
  font-weight: 700;
}

.so-hit__arrow {
  flex: none;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  margin-top: 6px;
}

.so-empty {
  margin-top: 26px;
  color: var(--so-muted);
  font-size: 1rem;
}

.so-dym {
  color: var(--so-accent);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.so-dym-line {
  margin: 4px 0 14px;
  color: var(--so-muted);
  font-size: .98rem;
  font-style: italic;
}

.so-dym-line .so-dym {
  font-style: normal;
}

.so-topics {
  margin-top: 28px;
}

.so-topics h4 {
  color: var(--so-fg);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 16px;
}

.so-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.so-chip {
  background: transparent;
  border: 1px solid var(--so-line);
  border-radius: 6px;
  color: var(--so-fg);
  cursor: pointer;
  padding: 9px 15px;
  font-size: .9rem;
  font-family: inherit;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.so-chip:hover {
  background: hsla(0, 0%, 100%, .06);
  border-color: var(--so-accent);
  color: var(--so-accent);
}

@media (max-width:991px) {

  main section[id],
  main .split-panel[id] {
    scroll-margin-top: 80px;
  }
}

@media (max-width:768px) {
  .search-ov__inner {
    margin-top: 96px;
  }

  .search-ov__close {
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}

/* ---------- motion fallbacks ----------
   Everything above that starts hidden is waiting for GSAP to bring it in, which
   strands the content in two cases: the visitor asked for less motion, or GSAP
   never loaded. Both resolve the same way — final state, no travel.
   !important is needed on the reduced-motion path only: the tweens still run
   there, and GSAP writes its values inline. */
@media (prefers-reduced-motion: reduce) {

  .reveal-up,
  .rv-line__in,
  .dl-list li,
  .dl-center__book img,
  .mkt-init__bg,
  .hero__img {
    opacity: 1 !important;
    transform: none !important;
  }

  .sm-panel {
    transition: none;
  }

  .hero__badge .ring {
    transition: none;
  }

  /* The scroll cue's travelling fill is decoration that never stops on its own. */
  .hero__scroll .line i {
    animation: none;
  }
}

/* main.js sets .no-motion on <html> when GSAP is missing. */
.no-motion .reveal-up,
.no-motion .rv-line__in,
.no-motion .dl-list li,
.no-motion .dl-center__book img,
.no-motion .hero__img {
  opacity: 1;
  transform: none;
}