/* Offshore CX Confidence Index 2025, redesigned: the report's own palette and type (Poppins; black,
   signal yellow, white, ocean blue) in a responsive reading layout with a fixed contents sidebar.
   Confidence colours follow the original charts: below 60% red, 60 to 69.9% amber, 70% and up yellow. */
:root {
  --blue: #0077b6;
  --ink: #000;
  --paper: #fff;
  --high: #ffd60a;
  --mid: #c97917;
  --low: #f40836;
  --muted: #4a4a4a;
  --line: 2px solid var(--ink);
  --radius: 22px;
  --sb-w: 300px;
  --rail-w: 72px;
  --rail-t: 0.38s;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sb-speed: 0.26s;
  /* The button effect used everywhere something can be clicked: rise, soft shadow, settle on press. */
  --lift: translateY(-3px);
  --lift-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.06);
  --press-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.14);
  --lift-ease: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.32s ease;
  --gap: clamp(12px, 1.4vw, 20px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; font-family: Poppins, system-ui, sans-serif; color: var(--ink); background: var(--blue); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--paper); padding: 8px 12px; }
.skip:focus { left: 8px; }
[data-count] { font-variant-numeric: tabular-nums; }
/* Confidence colours: the CX Index app's six bands (lib/confidence.ts, app/globals.css). */
.b-full { --c: #d4af37; --on: var(--ink); }
.b-vhigh { --c: #16a34a; --on: var(--paper); }
.b-h80 { --c: #65a30d; --on: var(--paper); }
.b-mod { --c: #eab308; --on: var(--ink); }
.b-l60 { --c: #ea580c; --on: var(--paper); }
.b-vlow { --c: #dc2626; --on: var(--paper); }

/* Icons: Phosphor duotone, yellow fill under a black line. */
.ic { width: 1em; height: 1em; color: var(--ink); --icon-fill: var(--high); flex: none; }
.ic--ui { --icon-fill: transparent; font-size: 20px; }

/* ---------- Sidebar ---------- */
.sb { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--sb-w); display: flex; flex-direction: column; background: var(--paper); border-right: var(--line); transition: transform 0.35s var(--ease), width var(--rail-t) var(--ease); }
.sb__top { position: relative; padding: 18px 16px 14px 18px; border-bottom: 1px solid #e6e6e6; }
/* The logo and title are clipped to the sidebar as it narrows, so nothing shows past its edge. */
.sb__id { overflow: hidden; }
.sb__brand { position: relative; display: block; width: 168px; height: 53px; }
.sb__brand img { display: block; height: auto; transition: opacity calc(var(--rail-t) * 0.4) ease; }
.sb__word { width: 168px; }
/* The compass mark sits over the wordmark's own compass and fades in as the words fade out. */
.sb__brand .sb__mark { position: absolute; left: 0; top: 9px; width: 35px; opacity: 0; }
.sb__close .ic--rail { opacity: 0; }
.sb__close { position: absolute; z-index: 2; top: 24px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: pointer;
  transition: top var(--rail-t) var(--ease), right var(--rail-t) var(--ease), width var(--rail-t) var(--ease), height var(--rail-t) var(--ease),
              border-color var(--rail-t) ease, border-radius var(--rail-t) var(--ease), background-color 0.24s ease, box-shadow var(--rail-t) ease; }
.sb__close:hover { background: #f1f1f1; }
.sb__close .ic { grid-area: 1 / 1; transition: opacity calc(var(--rail-t) * 0.4) ease; }
.sb__close .ic--phone { display: none; }
.sb__nav { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 28px; overscroll-behavior: contain; scrollbar-width: thin; }
/* One yellow highlight that slides to the current item. */
.sb__cursor { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 10px; background: var(--high); opacity: 0; pointer-events: none; transition: transform var(--sb-speed) var(--ease), width var(--sb-speed) var(--ease), height var(--sb-speed) var(--ease), opacity 0.2s ease; }
.sb__cursor.is-on { opacity: 1; }
.sb__list a { position: relative; z-index: 1; }
.sb__group { position: relative; margin: 18px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color calc(var(--rail-t) * 0.4) ease; }
/* In the rail a heading keeps its height and turns into a divider, so nothing below it moves. */
.sb__group::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: #e6e6e6; opacity: 0; transition: opacity var(--rail-t) ease; }
.sb__list { list-style: none; margin: 0; padding: 0; }
.sb__list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; overflow: hidden; white-space: nowrap; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.15s ease, padding var(--rail-t) var(--ease); }
.sb__label, .sb__name, .sb__num, .sb__ext { transition: opacity calc(var(--rail-t) * 0.4) ease; }
.sb__list a:hover { background: rgba(0, 0, 0, 0.05); }
/* Every entry starts with a slot the width of a flag, holding its flag, logo or icon, so all labels line up. */
.sb__ic { width: 28px; flex: none; display: grid; place-items: center; }
.sb__ic .ic { font-size: 21px; }
.sb__market img { width: 28px; height: 19px; display: block; border-radius: 3px; box-shadow: 0 0 0 1px var(--ink); }
.sb__label { flex: 1; min-width: 0; }
.sb__name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb__num { margin-left: auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb__sub { list-style: none; margin: 0 0 0 22px; padding: 0 0 0 12px; border-left: 2px solid var(--ink); }
.sb__sub a { font-size: 13px; padding: 6px 8px; }
.sb__sub a.is-active { font-weight: 700; }
/* Only the current country's sections are open; switching folds one and unfolds the other together. */
.sb__sub { overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; transition: max-height var(--sb-speed) var(--ease), opacity var(--sb-speed) ease, visibility 0s linear var(--sb-speed); }
.sb__sub.is-open { max-height: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.sb__sub > li:first-child { padding-top: 4px; }
.sb__sub > li:last-child { padding-bottom: 8px; }
.sb__contact img { width: 28px; height: 28px; display: block; object-fit: contain; border: 1px solid #ddd; border-radius: 6px; background: var(--paper); }
.sb__ext { margin-left: auto; font-size: 12px; color: var(--muted); }

.sb-open { position: fixed; z-index: 30; top: 16px; left: 16px; display: none; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: var(--line); border-radius: 999px; background: var(--paper); font: 600 14px Poppins, sans-serif; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s ease; }
.scrim.is-on { opacity: 1; }
.sb-open { transition: var(--lift-ease); }
.sb-open:hover { transform: var(--lift); box-shadow: var(--lift-shadow); }
.sb-open:active { transform: translateY(-1px); box-shadow: var(--press-shadow); }
/* ---------- Collapsed sidebar: a narrow rail of icons and flags (desktop) ----------
   Everything moves together over --rail-t: the width narrows, labels fade, headings become dividers in place,
   the open section list folds (script), and the button turns into a pull tab. Nothing switches off in one step. */
@media (min-width: 861px) {
  body.sb-rail .sb { width: var(--rail-w); }
  body.sb-rail .main { margin-left: var(--rail-w); }
  body.sb-rail .sb__word { opacity: 0; }
  body.sb-rail .sb__brand .sb__mark { opacity: 1; }
  body.sb-rail .sb__nav { scrollbar-width: none; }
  body.sb-rail .sb__nav::-webkit-scrollbar { display: none; }
  body.sb-rail .sb__group { color: transparent; }
  body.sb-rail .sb__group:not(:first-of-type)::before { opacity: 1; }
  body.sb-rail .sb__label, body.sb-rail .sb__name, body.sb-rail .sb__num, body.sb-rail .sb__ext { opacity: 0; }
  body.sb-rail .sb__list a { padding-left: 12px; padding-right: 12px; }
  /* The pull tab grows out of the rail: same white, same outline, and the rail's edge opens where they join. */
  body.sb-rail .sb__close { top: 18px; right: -30px; width: 30px; height: 58px; border-color: var(--ink); border-left-color: transparent;
    border-radius: 0 16px 16px 0; background: var(--paper); box-shadow: 4px 2px 10px -6px rgba(0, 0, 0, 0.25); }
  .sb__close::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: -4px; width: 4px; background: var(--paper); opacity: 0; transition: opacity var(--rail-t) ease, background-color 0.24s ease; }
  body.sb-rail .sb__close::before { opacity: 1; }
  body.sb-rail .sb__close:hover { width: 36px; right: -36px; background: var(--high); }
  body.sb-rail .sb__close:hover::before { background: var(--high); }
  body.sb-rail .sb__close .ic--desk { opacity: 0; }
  body.sb-rail .sb__close .ic--rail { opacity: 1; font-size: 15px; }
}
/* Names for the rail's icons, shown beside it on hover. */
.sb-tip { position: fixed; z-index: 60; left: calc(var(--rail-w) + 10px); padding: 6px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 600 13px Poppins, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-4px, -50%); transition: opacity 0.18s ease, transform 0.18s var(--ease); }
.sb-tip.is-on { opacity: 1; transform: translate(0, -50%); }

/* ---------- Main ---------- */
.main { margin-left: var(--sb-w); min-height: 100vh; transition: margin-left var(--rail-t) var(--ease), opacity 0.18s ease; }
/* Switching country: the report area fades out, the next country fades in. */
.main.is-leaving { opacity: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: clamp(16px, 3vw, 40px); display: grid; gap: clamp(28px, 4vw, 52px); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
.hl { background: linear-gradient(var(--high), var(--high)) no-repeat 0 0 / 100% 100%; padding: 0 0.18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js .reveal .hl { background-size: 0% 100%; transition: background-size 1s var(--ease) 0.4s; }
.js .reveal.is-in .hl { background-size: 100% 100%; }

/* Section headings */
.cat, .profile { display: grid; gap: var(--gap); }
.cat__head h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 700; }
.cat__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; position: relative; margin-bottom: clamp(14px, 1.8vw, 20px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cat__summary { background: var(--paper); border: var(--line); border-radius: var(--radius); padding: clamp(18px, 2.4vw, 28px); }
.cat__summary p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
/* Category top: the title and summary, then the rating in a panel (flag and year, figure, colour bar). */
.cat__top { display: grid; grid-template-columns: 1fr minmax(210px, 25%); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; }
.cat__panel { display: flex; flex-direction: column; justify-content: center; padding: 16px 18px; border-radius: 16px; background: #f3f3f1; }
.cat__rating { display: flex; flex-direction: column; gap: 6px; }
.cat__id { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 18px; font-weight: 700; }
.cat__id img { width: 54px; height: 36px; object-fit: cover; border: 2px solid var(--ink); border-radius: 6px; }
.cat__summary p.cat__label { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cat__summary p.cat__value { margin: 0; font-size: clamp(36px, 4vw, 52px); font-weight: 700; line-height: 1; }
.cat__panel .meter { margin-top: 8px; }
/* The summary ends level with the bottom of the rating card; any spare height goes above the heading. */
.cat__body { display: flex; flex-direction: column; justify-content: flex-end; }
.cat__body .cat__head { margin-bottom: 12px; }
.cat__summary p.cat__text { margin: 0; font-size: 17px; line-height: 1.65; }
@container main (max-width: 720px) {
  .cat__top { grid-template-columns: 1fr; }
}

/* Rows that always fill the full width: the last row's cards stretch to close any gap. */
.run, .tiles { display: flex; flex-wrap: wrap; gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.run > *, .tiles > * { flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.card { background: var(--paper); border: var(--line); border-radius: var(--radius); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.run:not(.run--solo) .card .q { min-height: var(--qh, auto); }
/* A card alone on its row (narrow layouts) is not stretched to its neighbours' question height. */
.run:not(.run--solo) .card.is-alone .q { min-height: 0; }
.q { margin: 0; font-size: 15px; line-height: 1.5; }
.note { margin: 0; font-size: 12px; color: var(--muted); }
.note--end { text-align: right; }

/* Single bar */
.bar1 { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: auto; }
.bar1__track { position: relative; height: 34px; border: var(--line); border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #ececec calc(10% - 1px) 10%); }
.bar1__fill { position: absolute; inset: 0; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.bar1__value { min-width: 4.2ch; font-size: 24px; font-weight: 700; text-align: right; }
.axis { display: flex; justify-content: space-between; margin: -8px 4.6ch 0 0; font-size: 11px; color: var(--muted); }

/* Languages, highest first */
.bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; gap: 10px 32px; }
.bars li { display: grid; grid-template-columns: 96px 1fr 54px; align-items: center; gap: 10px; }
.bars__label { font-size: 14px; font-weight: 600; }
.bars__track { height: 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.bars__track span { display: block; height: 100%; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.bars__value { font-size: 14px; font-weight: 700; text-align: right; }

/* Stat tiles: icon at the top, label and number pinned to the bottom so they line up across a row. */
.tile { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: 6px; padding: 16px; background: var(--paper); border: var(--line); border-radius: 16px; min-height: 164px; }
.tile .ic { font-size: 36px; }
/* A tile's icon fill shows its score's confidence colour. */
.tile__icon { display: block; line-height: 0; }
.tile__icon .ic { --icon-fill: var(--c); }
.tile__label { align-self: end; font-size: 14px; font-weight: 600; line-height: 1.3; }
.tile__value { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.05; }
.tiles--in .tile, .tiles--ratings .tile { border: 0; background: #f3f3f1; }
.tiles--in .tile { min-height: 148px; }
.tiles--ratings .tile { min-height: 188px; padding: 20px; }
/* Category ratings in the header are buttons: they rise with a soft shadow on hover and lead to their section. */
.tile-slot { display: flex; }
.tile--link { flex: 1; color: inherit; text-decoration: none; cursor: pointer; transition: var(--lift-ease); }
.tile--link:hover, .tile--link:focus-visible { transform: var(--lift); box-shadow: var(--lift-shadow); background-color: var(--paper); }
.tile--link:active { transform: translateY(-1px); box-shadow: var(--press-shadow); }
.tile--link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tile--link:hover, .pa__btn:hover, .sb-open:hover, .ph__logo:hover, a.pa__logo:hover { transform: none; } }
.tiles--ratings .tile .ic { font-size: 44px; }
.tiles--ratings .tile__label { font-size: 16px; }
.tiles--ratings .tile__value { font-size: clamp(30px, 3vw, 44px); }
.meter { display: block; height: 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--v)); }

/* Quotes */
.quote { margin: 0; background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.quote .ic--quote { font-size: 40px; color: var(--high); --icon-fill: var(--high); }
.quote blockquote { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; font-weight: 500; }

/* clip-path trims a dark strip baked into the top of one source photo. */

.disclaimer { font-size: 12px; line-height: 1.6; color: var(--paper); }
.disclaimer .credit { margin: 6px 0 0; }
.disclaimer .credit a { color: inherit; }
.disclaimer a { color: var(--paper); }

/* ---------- Motion (only when the script runs) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .bar1__fill, .js .bars__track span, .js .meter span { transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + var(--row, 0) * 60ms + 120ms); }
.js .is-in .bar1__fill, .js .is-in .bars__track span, .js .is-in .meter span { transform: scaleX(var(--v)); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal .hl { opacity: 1; transform: none; transition: none; background-size: 100% 100%; }
  .js .bar1__fill, .js .bars__track span, .js .meter span { transform: scaleX(var(--v)); transition: none; }
}

/* ---------- Tablet ---------- */
/* Layout follows the report area's own width (the window minus the sidebar or rail), not the window's. */
.main { container: main / inline-size; }
@container main (max-width: 1040px) {
  .run > *, .tiles > * { flex-basis: calc((100% - (var(--cols-t) - 1) * var(--gap)) / var(--cols-t)); }
  .bars { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows-t), auto); }
}

/* ---------- Phone: the sidebar becomes a bottom drawer ---------- */
@media (max-width: 860px) {
  .main { margin-left: 0; padding-bottom: 76px; }
  .sb { inset: auto 0 0 0; width: 100%; height: min(86vh, 720px); border-right: 0; border-top: var(--line); border-radius: 22px 22px 0 0; transform: translateY(105%); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25); }
  .sb.is-open { transform: none; }
  .sb__top { position: relative; padding-top: 24px; }
  .sb__top::before { content: ""; position: absolute; top: 9px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 999px; background: #ccc; }
  .sb__brand img { width: 140px; }
  .sb__close .ic--desk { display: none; }
  .sb__close .ic--phone { display: block; }
  /* On phones the Menu button carries the edition's highlight colour so it stands out against the page. */
  .sb-open { display: inline-flex; top: auto; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--high); color: var(--ink); }
  .sb-open:hover { transform: translate(-50%, -4px); }
  .sb-open:active { transform: translate(-50%, -1px); }
  .run > * { flex-basis: 100%; }
  .tiles > * { flex-basis: calc((100% - var(--gap)) / 2); }
  .tiles { gap: 10px; }
  .tile, .tiles--in .tile, .tiles--ratings .tile { min-height: 0; padding: 12px; gap: 4px; }
  .tile .ic, .tiles--ratings .tile .ic { font-size: 28px; }
  .tile__label, .tiles--ratings .tile__label { font-size: 13px; margin-top: 8px; }
  .tile__value, .tiles--ratings .tile__value { font-size: 26px; }
  .card { padding: 16px; }
  .bars { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .bars li { grid-template-columns: 88px 1fr 50px; }
}

/* ---------- Country header (option 1 is in use; 2 to 4 stay for the options page) ---------- */
.opt { display: grid; gap: 10px; }
.opt__label { margin: 0; color: var(--paper); font-size: 14px; font-weight: 700; }
.hv { position: relative; overflow: hidden; background: var(--paper); border: var(--line); border-radius: var(--radius); }
.hv h1 { font-size: clamp(30px, 4vw, 48px); font-weight: 700; }
.hv__flag { width: clamp(72px, 7vw, 104px); height: auto; border: 3px solid var(--ink); margin-bottom: 14px; }
.hv__label { margin: 16px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hv__score { margin: 0; font-size: clamp(52px, 6.4vw, 88px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.hv__intro { padding: clamp(18px, 2.4vw, 28px) clamp(20px, 3vw, 36px); }
.hv__intro p, .hv2__intro p, .hv4__intro p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
/* One paragraph split evenly across two columns; balancing puts any spare line in column one. */
.flow { columns: 2; column-gap: 36px; column-fill: balance; orphans: 1; widows: 1; }
.flow.flow--one { columns: 1; }
.flow p, .hv__intro .flow p, .cat__summary .flow p { margin: 0; }
.hv video, .hv .hv__photo { width: 100%; height: 100%; object-fit: cover; display: block; background: #222; }
.hv figure { margin: 0; }
.hv figcaption { font-size: 12px; }

/* 1 Immersive */
/* The fade is part of the video (a mask over a black stage), not a layer on top of it: Chrome can draw a
   playing video above sibling layers, which made an overlay vanish once playback started. */
.hv1__stage { position: relative; height: clamp(320px, 34vw, 440px); background: #000; }
.hv1__stage video, .hv1__stage .hv__photo { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.45) 42%, #000 75%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.45) 42%, #000 75%); }
.hv1__id { position: absolute; left: clamp(20px, 3vw, 36px); bottom: clamp(20px, 3vw, 32px); color: var(--paper); }
.hv1__id h1 { color: var(--ink); }
.hv1 .hv__label { color: rgba(255, 255, 255, 0.8); }
.hv1 figcaption { position: absolute; right: 16px; bottom: 12px; color: var(--paper); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.hv1 .hv__intro { border-top: var(--line); }
.hv__ratings { padding: 0 clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px); }
/* A header photo (2023, 2024) is framed in the photo editor: the fade sits on its frame so zooming never moves it. */
.hv1__stage .hv__frame { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.45) 42%, #000 75%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.45) 42%, #000 75%); }
.hv1__stage .hv__frame .hv__photo { -webkit-mask-image: none; mask-image: none; object-position: var(--x) var(--y); transform: scale(var(--z)); transform-origin: var(--x) var(--y); }
/* Industry bodies (ecosystem section, under the association question): the agency and the association, each a card linking to its site. */
.bodies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.body-card { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-content: start; padding: 18px 20px; background: #f3f3f1; border-radius: 18px; color: var(--ink); text-decoration: none;
  transition: transform 0.24s var(--ease), box-shadow 0.32s var(--ease); }
.body-card__ic { grid-row: span 4; font-size: 30px; }
.body-card__type { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(0, 0, 0, 0.6); }
.body-card__name { font-size: 18px; font-weight: 700; line-height: 1.3; margin-top: 2px; }
.body-card__meta { font-size: 14px; color: rgba(0, 0, 0, 0.6); margin-top: 4px; }
.body-card__link { font-size: 14px; font-weight: 700; margin-top: 8px; text-decoration: underline; text-underline-offset: 3px; }
a.body-card:hover { transform: var(--lift); box-shadow: var(--lift-shadow); }
a.body-card:active { transform: translateY(-1px); box-shadow: var(--press-shadow); }
@media (max-width: 640px) { .bodies { grid-template-columns: 1fr; } }
.hv1__stage + .hv__ratings { padding-top: clamp(20px, 3vw, 36px); }  /* no intro text (2023) */

/* 2 Feathered split */
.hv2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.hv2__text { padding: clamp(20px, 3vw, 36px); position: relative; z-index: 1; }
.hv2__title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hv2__title .hv__flag { margin: 0; width: 64px; }
.hv2__intro { margin-top: 18px; }
.hv2__media { position: relative; min-height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%); }
.hv2__media video { position: absolute; inset: 0; }
.hv2 figcaption { position: absolute; right: 16px; bottom: 12px; color: var(--paper); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* 3 Cinematic banner */
.hv3__banner { position: relative; height: clamp(200px, 22vw, 300px); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
.hv3 figcaption { position: absolute; right: 16px; top: 12px; color: var(--paper); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.hv3__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: -64px; position: relative; padding: 0 clamp(20px, 3vw, 36px); }
.hv3__title { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hv3__title .hv__flag { margin: 0; }
.hv3__score { text-align: right; }
.hv3 .hv__intro { padding-top: 16px; }

/* 4 Blurred backdrop */
.hv4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); padding: clamp(20px, 3vw, 36px); isolation: isolate; }
.hv4__bg { position: absolute; inset: -40px; z-index: -1; background: var(--poster) center / cover; filter: blur(30px) saturate(1.3); }
.hv4::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.1) 100%); }
.hv4__intro { margin-top: 16px; }
.hv4__media { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.hv4__media video { flex: 1; min-height: 260px; border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); }
.hv4 figcaption { text-align: right; color: var(--ink); }

@media (max-width: 860px) {
  .hv2, .hv4 { grid-template-columns: 1fr; }
  .hv2__media { min-height: 220px; order: -1; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .hv1__stage { height: 420px; }
  .hv1__stage video, .hv1__stage .hv__photo { -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 55%, #000 85%); mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 55%, #000 85%); }
  .hv1__stage .hv__frame { -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 55%, #000 85%); mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 55%, #000 85%); }
  .hv1__stage .hv__frame .hv__photo { -webkit-mask-image: none; mask-image: none; }
  .hv3__row { margin-top: -40px; }
  .hv3__score { text-align: left; }
  .hv4__media { order: -1; }
  .hv4__media video { min-height: 200px; }
}

/* ---------- Contained variant: each section is one big card holding its smaller cards ---------- */
.contained .cat, .contained .profile { background: var(--paper); border: var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(18px, 2.4vw, 30px); padding-top: clamp(26px, 3.2vw, 40px); }
.contained .cat__summary { border: 0; border-radius: 0; padding: 0 0 clamp(4px, 1vw, 10px); background: none; }
.contained .card, .contained .tile { border-radius: 18px; }
.contained .profile { gap: var(--gap); }
@media (max-width: 860px) {
  /* Headings get room above them, as on wider screens; the sides stay narrow to keep the text width. */
  .contained .cat, .contained .profile { padding: 26px 14px 14px; border-radius: var(--radius); }
}






/* ---------- Partner profile ---------- */
/* Sits on the same soft tint as the cards nested inside other cards. */
.contained .profile { background: #f3f3f1; }
/* Q&A: the photo fills the top of the card and fades into the answer well before the text starts. */
.pqa { overflow: hidden; background: var(--paper); border: var(--line); border-radius: var(--radius); }
/* Framing (position, zoom, height, fade) comes from photo-crops.json via the page's photo editor. */
.pqa__media { height: calc(var(--h) * 1px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 var(--f1), transparent var(--f2)); mask-image: linear-gradient(180deg, #000 var(--f1), transparent var(--f2)); }
.pqa__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--x) var(--y); transform: scale(var(--z)); transform-origin: var(--x) var(--y); }
.pqa__body { position: relative; margin-top: -36px; padding: 0 clamp(20px, 2.8vw, 32px) clamp(20px, 2.6vw, 28px); }
.pqa__body:first-child { margin-top: 0; padding-top: clamp(20px, 2.6vw, 28px); }  /* a Q&A without a photo */
.pqa__body h3 { font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; line-height: 1.35; margin-bottom: 12px; max-width: 60ch; }
.pqa__body .flow p { font-size: 15px; line-height: 1.6; }
@media (max-width: 860px) {
  .pqa__media { height: calc(var(--h) * 0.72px); }
  .pqa__body { margin-top: -28px; }
  }
/* Phones read one column; this sits last so it wins over the two-column rule above. */
@media (max-width: 860px) { .flow { columns: 1; } }


/* ---------- Profile top ---------- */
/* Shared header: reads as the top of the profile container. */
.ph { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ph__label { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ph__tag { padding: 3px 10px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 11px; letter-spacing: 0.06em; }
/* Logos sit inside a fixed box and scale to fit it, so a square logo and a wide one take the same space. */
.ph__logo { display: block; width: clamp(150px, 14vw, 200px); height: 56px; transition: var(--lift-ease); }
/* Logos have no box, so the shadow follows the logo's own shape. */
.ph__logo:hover, .ph__logo:focus-visible { transform: var(--lift); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18)); }
.ph__logo:active { transform: translateY(-1px); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.15)); }
.ph__logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.pt { margin: 0; }
.pt__photo { position: relative; overflow: hidden; }
.pt__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--x) var(--y); transform: scale(var(--z)); transform-origin: var(--x) var(--y); }
.pt__quote { background: var(--ink); color: var(--paper); display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(22px, 3vw, 40px); }
.pt .ic--quote { font-size: 40px; color: var(--high); --icon-fill: var(--high); }
.pt blockquote { margin: 0; font-size: clamp(22px, 2.5vw, 34px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.pt__who strong { display: block; font-size: 16px; }
.pt__who span { display: block; font-size: 14px; opacity: 0.8; }

/* Portrait and black quote panel share one card, edge to edge. */
.pt { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; border: var(--line); border-radius: var(--radius); overflow: hidden; }
.pt .pt__photo { aspect-ratio: 4 / 5; }




@media (max-width: 860px) {
  .ph__logo { width: 112px; flex: none; }
  .ph__label { font-size: 10px; letter-spacing: 0.06em; gap: 5px; }
  .ph__tag { font-size: 9px; padding: 2px 8px; }
  .pt { grid-template-columns: 1fr; }
  .pt .pt__photo { aspect-ratio: 4 / 4.2; }
}

/* ---------- About the sponsor (template for every sponsored profile) ---------- */
.pa { border-radius: var(--radius); overflow: hidden; }
.pa .flow p { font-size: 15px; line-height: 1.6; }
.pa .flow a { color: inherit; }
/* Logos always sit on white (the About card itself is white), so any sponsor's file works. */
.pa__logo { display: block; background: var(--paper); }
.pa__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
a.pa__logo { transition: var(--lift-ease); }
a.pa__logo:hover, a.pa__logo:focus-visible { transform: var(--lift); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18)); }
a.pa__logo:active { transform: translateY(-1px); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.15)); }
.pa__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.pa__pitch { margin: 0; flex: 1 1 280px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.pa__btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--high); color: var(--ink); border: 2px solid var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: var(--lift-ease); }
.pa__btn:hover, .pa__btn:focus-visible { transform: var(--lift); box-shadow: var(--lift-shadow); }
.pa__btn:active { transform: translateY(-1px); box-shadow: var(--press-shadow); }

/* Centred white card led by the logo; text and button under it. */
.pa { background: var(--paper); border: var(--line); padding: clamp(24px, 3vw, 40px); text-align: center; }
.pa .pa__logo { width: clamp(180px, 20vw, 240px); height: 76px; margin: 0 auto 22px; background: none; }
.pa .flow { text-align: left; }
.pa .pa__cta { justify-content: center; flex-direction: column; }
.pa .pa__pitch { flex: none; max-width: 60ch; }
@media (max-width: 860px) {
  .pa__btn { white-space: normal; height: auto; min-height: 44px; padding: 10px 18px; }
}

/* ---------- Report home ---------- */
/* Title card */
.title-card { position: relative; overflow: hidden; isolation: isolate; background: var(--paper); border: var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(28px, 4vw, 56px); }
/* A faded globe turns slowly behind the title. */
.globe { position: absolute; z-index: -1; top: 4%; right: -4%; width: min(560px, 58%); aspect-ratio: 1; opacity: 0.45; pointer-events: none; }
.title-card__flags { position: relative; }
.title-card h1 { font-size: clamp(34px, 5vw, 64px); line-height: 1.12; max-width: 18ch; }
.title-card__sub { margin: 18px 0 0; font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; max-width: 40ch; }
.title-card__flags { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.flag-btn { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; background: #f3f3f1; color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; transition: var(--lift-ease); }
.flag-btn:hover, .flag-btn:focus-visible { transform: var(--lift); box-shadow: var(--lift-shadow); }
.flag-btn img { width: 48px; height: 32px; display: block; border-radius: 4px; box-shadow: 0 0 0 1.5px var(--ink); flex: none; }
.cat__head .cat__aside { margin: 0 0 0 auto; font-size: 14px; color: var(--muted); }
.card__title { margin: 0; font-size: 18px; font-weight: 700; }

/* Long prose keeps its paragraphs, flowing down two columns. */
.prose { columns: 2 280px; column-gap: 36px; }
.prose p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; break-inside: avoid-column; }
.prose p:last-child { margin-bottom: 0; }
.prose .signoff { margin-top: 4px; }

/* Introduction: video beside the opening of the text. */
.intro { display: grid; gap: clamp(16px, 2vw, 22px); }
.intro .cat__head { margin: 6px 0 0; }
/* The introduction's columns balance line by line, so a paragraph may continue into column two. */
.intro .prose p { break-inside: auto; }
.intro__media { margin: 0; }
.intro__media video, .intro__media img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 72%; border-radius: 16px; border: var(--line); background: #ddd; }
/* A framed photo (2024): the frame holds the shape and border; the photo moves and zooms inside it. */
.intro__media[data-frame] { aspect-ratio: 21 / 8; overflow: hidden; border-radius: 16px; border: var(--line); background: #ddd; }
.intro__media[data-frame] img { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; object-position: var(--x) var(--y); transform: scale(var(--z)); transform-origin: var(--x) var(--y); }

/* Authors */
.authors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.author { display: grid; grid-template-rows: auto 1fr; background: #f3f3f1; border-radius: var(--radius); overflow: hidden; }
.author__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.author__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--x) var(--y); transform: scale(var(--z)); transform-origin: var(--x) var(--y); }
.author__body { display: flex; flex-direction: column; padding: clamp(18px, 2.2vw, 26px); }
.author__body p { text-wrap: pretty; }
.author__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; margin-bottom: 14px; }
.author__head h3 { margin: 0; font-size: 22px; font-weight: 700; }
.author__head p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.author__logo { display: flex; align-items: center; justify-content: flex-end; height: 52px; width: 130px; flex: none; transition: var(--lift-ease); }
.author__logo:hover, .author__logo:focus-visible { transform: var(--lift); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18)); }
.author__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.author .prose { columns: 1; }
.author .prose p { font-size: 15px; }
.author__body .author__more { align-self: flex-start; margin-top: auto; }
.author .prose { margin-bottom: 18px; }
/* Outbound buttons: the arrow nudges up and right on hover. */
.pa__btn .arrow { display: inline-block; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.pa__btn:hover .arrow, .pa__btn:focus-visible .arrow { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: no-preference) { .author:hover .author__more .arrow { animation: nudge 1.4s cubic-bezier(0.22, 1, 0.36, 1) infinite; } }
@keyframes nudge { 0%, 100% { transform: none; } 40% { transform: translate(3px, -3px); } }

/* Plain stat tiles (counts and scale points): brand-yellow icons, no meter. */
.tile--stat { min-height: 150px; }

/* Respondent charts */
.donut { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 22px; }
.donut svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 22; }
.donut__track { stroke: var(--high); }
.donut__a { stroke: var(--blue); stroke-dasharray: var(--len) var(--circ); }
.js .reveal .donut__a { stroke-dasharray: 0 var(--circ); transition: stroke-dasharray 1.1s var(--ease) 0.15s; }
.js .reveal.is-in .donut__a { stroke-dasharray: var(--len) var(--circ); }
.donut__key { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; font-weight: 600; }
.donut__key li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; }
.donut__value { font-size: 14px; font-weight: 700; }
.key { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--ink); }
.key--a { background: var(--blue); }
.key--b { background: var(--high); }
.dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dist li { display: grid; grid-template-columns: 52px 1fr 56px; align-items: center; gap: 10px; }
.dist__label { font-size: 13px; font-weight: 600; }
.dist__track { height: 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.dist__track span { display: block; height: 100%; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.dist__value { font-size: 14px; font-weight: 700; text-align: right; }
.js .reveal .dist__track span { transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--row, 0) * 60ms + 120ms); }
.js .reveal.is-in .dist__track span { transform: scaleX(var(--v)); }

/* Methodology: text sits straight on the card; only the scale and the bands are framed. */
.plain .flow p, .plain .cols p { margin: 0; font-size: 16px; line-height: 1.6; }
.plain--note .cols p { font-size: 14px; color: var(--muted); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; align-items: start; }
.bands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.band { position: relative; display: grid; gap: 2px; padding: 16px 14px 14px; border: var(--line); border-radius: 16px; background: var(--paper); overflow: hidden; }
.band__swatch { position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--c); }
.band__label { margin-top: 6px; font-size: 13px; font-weight: 700; }
.band__value { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; }
.band__note { font-size: 12px; color: var(--muted); }

/* Rankings: each row is itself the bar, filled to the score in its confidence colour (the six colours only).
   The percentage sits inside the end of the bar and appears once the bar has settled. */
.ranks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 8), auto); gap: 10px var(--gap); }
.rank-slot { display: flex; }
.rank { position: relative; flex: 1; display: grid; grid-template-columns: 28px 54px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 58px; padding: 10px 14px; border-radius: 14px; background: #f3f3f1; color: var(--on); text-decoration: none; overflow: hidden; isolation: isolate; }
/* The fill is clipped (not stretched) so its right end keeps the same rounded corners as the left. */
.rank__fill { position: absolute; inset: 0; z-index: -1; background: var(--c); clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0 round 14px); }
a.rank { transition: var(--lift-ease); }
a.rank:hover, a.rank:focus-visible { transform: var(--lift); box-shadow: var(--lift-shadow); }
a.rank:active { transform: translateY(-1px); box-shadow: var(--press-shadow); }
.rank__n { font-size: 15px; font-weight: 700; opacity: 0.75; }
.rank img { width: 54px; height: 36px; display: block; border-radius: 4px; box-shadow: 0 0 0 1.5px var(--ink); }
.rank__name { font-size: 15px; font-weight: 600; line-height: 1.25; padding-right: 76px; }
.rank__value { position: absolute; top: 50%; left: calc(var(--v) * 100%); transform: translate(calc(-100% - 14px), -50%); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; transition: opacity 0.35s ease; }
.js .reveal .rank__fill { clip-path: inset(0 100% 0 0 round 14px); transition: clip-path 0.9s var(--ease) 0.15s; }
.js .reveal .rank__value { opacity: 0; transition-delay: 0.95s; }
.js .reveal.is-in .rank__fill { clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0 round 14px); }
.js .reveal.is-in .rank__value { opacity: 1; }
/* Quick Comparison: the list replays its bars every time the category changes. */
.js .cmp.is-in .cmp__panel:not(.is-shown) .rank__fill { clip-path: inset(0 100% 0 0 round 14px); transition: none; }
.js .cmp.is-in .cmp__panel:not(.is-shown) .rank__value { opacity: 0; transition: none; }
.cmp__panel .ranks li:nth-child(n) .rank__fill { transition-delay: calc(var(--row, 0) * 40ms + 0.1s); }
.cmp__panel .ranks li:nth-child(n) .rank__value { transition-delay: calc(var(--row, 0) * 40ms + 0.9s); }
.cmp__panel[hidden] { display: none; }

/* Category dropdown (Quick Comparison) */
.dd { position: relative; margin-left: auto; }
.dd__btn { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px 0 16px; border: var(--line); border-radius: 999px; background: var(--paper); font: 600 15px Poppins, sans-serif; cursor: pointer; transition: var(--lift-ease); }
.dd__btn:hover, .dd__btn:focus-visible { transform: var(--lift); box-shadow: var(--lift-shadow); }
.dd__current { display: flex; align-items: center; gap: 10px; }
.dd__current .ic, .dd__list .ic { font-size: 22px; }
.dd__caret { transition: transform 0.24s var(--ease); }
.dd__btn[aria-expanded="true"] .dd__caret { transform: rotate(180deg); }
/* A small nudge when it first appears, so it reads as something to open. */
.js .reveal.is-in .dd__btn { animation: dd-hint 1.2s var(--ease) 0.9s 2; }
@keyframes dd-hint { 0%, 100% { transform: none; } 30% { transform: translateY(-4px); } 55% { transform: none; } 75% { transform: translateY(-2px); } }
.dd__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 260px; margin: 0; padding: 6px; list-style: none; background: var(--paper); border: var(--line); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); transform-origin: top right; animation: dd-open 0.22s var(--ease); }
.dd__list[hidden] { display: none; }
@keyframes dd-open { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.dd__list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.dd__list li:hover, .dd__list li.is-focus { background: #f3f3f1; }
.dd__list li[aria-selected="true"] { background: var(--high); }

/* How to navigate, then thank you */
.thanks { background: var(--paper); border: var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(26px, 3.4vw, 44px); text-align: center; }
.howto { max-width: 760px; margin: 0 auto clamp(26px, 3vw, 40px); padding-bottom: clamp(22px, 3vw, 34px); border-bottom: 1px solid #e3e3e3; text-align: left; }
.howto__title { font-size: 20px; margin-bottom: 12px; text-align: center; }
.howto__steps { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; line-height: 1.55; }
.thanks__title { font-size: clamp(26px, 3vw, 40px); }
.thanks p { margin: 14px 0 18px; font-size: 16px; }
.thanks__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Full disclaimer: clauses shared between two columns that end level. */
.legal { background: var(--ink); color: var(--paper); border-radius: calc(var(--radius) + 6px); padding: clamp(22px, 3vw, 36px); }
.legal h2 { font-size: 20px; margin-bottom: 14px; }
.legal .clause { margin-bottom: 14px; }
.legal .clause:last-child { margin-bottom: 0; }
.legal p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.legal strong { color: var(--paper); }
.legal a { color: var(--high); }

@container main (max-width: 1040px) {
  .bands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .authors { grid-template-columns: 1fr; }
  /* Rankings and comparison lists drop to one column before the rows get cramped. */
  .ranks { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .title-card__flags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The eight ratings stay as two even rows of four. */
  .tiles--ratings { --cols-t: 4 !important; }
}
@container main (max-width: 800px) {
  /* Answers and summaries in narrow cards read in one column. */
  .pqa .flow, .pa .flow { columns: 1; }
  .tiles--ratings { --cols-t: 2 !important; }
  .cols { grid-template-columns: 1fr; gap: 14px; }
  .prose { columns: 1; }
}
@container main (max-width: 620px) {
  .flow { columns: 1; }
  .title-card__flags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt { grid-template-columns: 1fr; }
  .pt .pt__photo { aspect-ratio: 4 / 4.2; }
}
@media (max-width: 860px) {
  .ranks { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .rank { grid-template-columns: 22px 42px minmax(0, 1fr); padding: 10px 12px; gap: 10px; }
  .rank img { width: 42px; height: 28px; }
  /* The score sits at the end of the bar, so a short bar pulls it left: the name stops before it (wrapping if
     need be). 100cqw is the row's own width. */
  .rank { container-type: inline-size; }
  .rank__name { padding-right: max(64px, calc((1 - var(--v)) * 100cqw + 68px)); font-size: 14px; }
  .rank__value { font-size: 15px; }
  .donut { grid-template-columns: 1fr; justify-items: center; }
  .bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols { grid-template-columns: 1fr; gap: 14px; }
  .prose { columns: 1; }
  .cat__head .cat__aside { margin-left: 0; flex-basis: 100%; }
  .dd { margin-left: 0; flex-basis: 100%; }
  .dd__btn { max-width: 100%; }
  /* The button sits on its own line at the left here, so its list opens from the left and stays inside the screen. */
  .dd__list { right: auto; left: 0; transform-origin: top left; max-width: calc(100vw - 32px); }
  .title-card__flags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .globe { width: 80%; top: -6%; right: -30%; opacity: 0.4; }
  .intro__media video, .intro__media img { aspect-ratio: 16 / 10; }
  .intro__media[data-frame] { aspect-ratio: 16 / 10; }
  .intro__media[data-frame] img { aspect-ratio: auto; }
}
@media (max-width: 420px) {
  /* Narrow phones: slimmer number and flag columns give long one-word names room before the score. */
  .rank { grid-template-columns: 16px 34px minmax(0, 1fr); gap: 8px; }
  .rank img { width: 34px; height: 23px; }
}
/* Section headings carry the same icon as their sidebar entry. */
.h-ic { font-size: 1.05em; vertical-align: -0.16em; margin-right: 0.3em; --icon-fill: var(--high); }
.legal .h-ic { color: var(--paper); font-size: 1.1em; }
/* The ring follows its own card's width: beside its key wherever it fits, above it only when the card is small. */
.card:has(.donut) { container: donutcard / inline-size; }
@container donutcard (max-width: 420px) {
  .donut { grid-template-columns: 112px 1fr; gap: 16px; }
  .donut svg { width: 112px; height: 112px; }
  .donut__key { font-size: 13px; }
}
@container donutcard (max-width: 290px) {
  .donut { grid-template-columns: 92px 1fr; gap: 14px; }
  .donut svg { width: 92px; height: 92px; }
  .donut__key li { grid-template-columns: 12px 1fr; row-gap: 0; }
  .donut__key .donut__value { grid-column: 2; }
}
@container donutcard (max-width: 225px) {
  .donut { grid-template-columns: 1fr; justify-items: center; }
  .donut__key { width: 100%; }
}


/* ---------- 2024: the same layout in the 2024 report's own colours and type ----------
   Navy page, amber highlight, IBM Plex Sans headings and figures, Work Sans text (its Storydoc theme). */
.y2024 { --blue: #023047; --high: #ffb703; font-family: "Work Sans", system-ui, sans-serif; }
.y2024 h1, .y2024 h2, .y2024 h3, .y2024 [data-count], .y2024 .tile__value, .y2024 .band__value,
.y2024 .cat__value, .y2024 .sb__num, .y2024 .rank__n, .y2024 .rank__name { font-family: "IBM Plex Sans", system-ui, sans-serif; }
.y2023 { --blue: #0c1c44; --high: #fed646; font-family: "Lato", system-ui, sans-serif; }
.y2023 h1, .y2023 h2, .y2023 h3, .y2023 [data-count], .y2023 .tile__value, .y2023 .band__value,
.y2023 .cat__value, .y2023 .sb__num, .y2023 .rank__n, .y2023 .rank__name { font-family: "Oswald", system-ui, sans-serif; }
/* Oswald's tall letters: on a two-line title the second line's highlight would cover the first line's letters. */
.y2023 .title-card h1 { line-height: 1.34; }

/* Back to top: appears once the reader has scrolled down, at every width. */
.to-top { position: fixed; z-index: 30; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  border: var(--line); border-radius: 50%; background: var(--high); color: var(--ink); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0s linear 0.24s, box-shadow 0.32s var(--ease); }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0s, box-shadow 0.32s var(--ease); }
.to-top.is-on:hover { transform: var(--lift); box-shadow: var(--lift-shadow); }
.to-top.is-on:active { transform: translateY(-1px); box-shadow: var(--press-shadow); }
.to-top .ic { font-size: 22px; }
@media (max-width: 860px) { .to-top { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.is-on { transition: none; } .to-top.is-on:hover { transform: none; } }

/* ---------- Annual Comparison: every edition of each rating, and the change on the header cards ---------- */
/* The market's name, then its flag, top right of the section heading. */
.ac-id { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; }
.ac-id img { width: 54px; height: 36px; object-fit: cover; border: 2px solid var(--ink); border-radius: 6px; }
/* Narrow screens: under the heading, at the left, like the other section controls. */
@container main (max-width: 520px) { .ac-id { margin-left: 0; flex-basis: 100%; } }
.trk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.trk-grp h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; }
.trk-grp h3 .ic { font-size: 20px; }
.trk-row { display: grid; grid-template-columns: 40px 1fr 56px; align-items: center; gap: 10px; padding: 5px 8px; margin: 0 -8px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 14px; }
.trk-row .trk-y { font-weight: 600; color: var(--muted); }
.trk-row.is-here .trk-y { color: var(--ink); font-weight: 800; }
a.trk-row { transition: var(--lift-ease); }
a.trk-row:hover { background: #f3f3f1; transform: var(--lift); box-shadow: var(--lift-shadow); }
.trk-track { height: 16px; border-radius: 999px; background: #ecece8; overflow: hidden; }
.trk-fill { display: block; height: 100%; border-radius: 999px; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--v)); }
/* The bars grow in as the section reveals, like the report's other bars. */
.js .reveal.trk:not(.is-in) .trk-fill { transform: scaleX(0); }
.js .trk .trk-fill { transition: transform 1s var(--ease); }
.trk-row .trk-v { text-align: right; font-weight: 700; }
@container main (max-width: 720px) { .trk { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { a.trk-row:hover { transform: none; } }
.tile__vrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.hd { font-size: 14px; font-weight: 400; white-space: nowrap; color: var(--muted); font-family: Poppins, system-ui, sans-serif; }
.hd.up { color: #15803d; }
.hd.down { color: #b91c1c; }
.hd-flat { display: inline-block; width: 10px; height: 2px; margin: 0 1px 4px; border-radius: 2px; background: currentColor; vertical-align: middle; }
@media (max-width: 860px) { .hd { font-size: 12px; } }