/* LYR-497 — The Premium and Luxury Yacht Market 2026.
   Page-scoped under .report-page so a research layout cannot leak into the
   landing pages. Follows the --press-* precedent in lyra-press.css.

   Hand-written and never emitted by scripts/report/build.ts. lint-staged runs
   prettier over *.css, so a generated stylesheet would disagree with its
   committed bytes on every commit. */

.lyra-webflow.report-page {
  /* One hue and one accent. Eight LOA bands do not get eight colours: position
     and label already encode the band, and a categorical palette here would be
     decoration pretending to be information. */
  --report-ink: var(--base-color-brand--sea, #063250);
  /* 8.4:1 on white — AAA at any size. Secondary text, provenance, footnotes.
     Composited on the colour property rather than applied as opacity: an
     ancestor opacity would also fade the bars, and getComputedStyle would keep
     reporting the pre-opacity colour, which is how a contrast bug hides. */
  --report-ink-2: rgba(6, 50, 80, 0.85);
  /* The single accent, used at most once per figure — always the median or the
     figure's own maximum, never decoration. 12.2:1 on white. */
  --report-accent: var(--base-color-brand--rubin, #6e0a23);
  /* Comparison series, fill only. 3.24:1 on the beige ground clears the 3:1
     non-text floor; it fails AA for text, so nothing readable is ever set in
     it. */
  --report-fill-2: var(--base-color-brand--french-grey, #868277);
  --report-ground: var(--base-color-brand--biege, #f1ebe5);
  --report-track: rgba(6, 50, 80, 0.09);
  --report-line: rgba(6, 50, 80, 0.15);
  --report-line-strong: rgba(6, 50, 80, 0.3);
  --report-measure: 720px;

  color: var(--report-ink);
  background: #fff;
}

/* Prose column. The base body size is 1.4rem, which is set for landing-page
   statements rather than for 15,000 px of continuous reading; 1.22rem matches
   the press article body, which is the nearest comparable surface. */
.lyra-webflow.report-page .report-measure {
  max-width: var(--report-measure);
  margin-left: auto;
  margin-right: auto;
}

.lyra-webflow.report-page .report-measure > p {
  font-family: "EB Garamond", serif;
  font-size: 1.22rem;
  line-height: 1.72;
  margin: 0 0 1.2rem;
}

.lyra-webflow.report-page a {
  color: var(--report-ink);
}

/* The shared stylesheet centres text inside `.section`, at every width — a
   marketing default that is wrong for a research page. It centred every figure
   ID, title, note and guardrail line, so each caption sat centred above a
   left-aligned chart. Pinned left here rather than by editing the shared rule,
   which the marketing pages want.

   Scoped to the report's own class names, not to `.report-page *`: the stat
   cards and table cells set their own alignment, and a blanket override would
   silently un-right-align every numeral on the page. */
.lyra-webflow.report-page .report-section,
.lyra-webflow.report-page .report-measure,
.lyra-webflow.report-page .report-figure-caption,
.lyra-webflow.report-page .report-figure-id,
.lyra-webflow.report-page .report-figure-title,
.lyra-webflow.report-page .report-figure-note,
.lyra-webflow.report-page .report-section-heading,
.lyra-webflow.report-page .report-guardrail,
.lyra-webflow.report-page .report-provenance,
.lyra-webflow.report-page .report-toc,
.lyra-webflow.report-page .report-answers,
.lyra-webflow.report-page .report-hero {
  text-align: left;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* Sea ground, not beige — and it is the navigation that decides this, not taste.
   The shared `.white-navbar` is fixed, transparent and paints its links white,
   so it is legible only over a dark band. A beige hero rendered the wordmark
   and all seven nav links at 1:1 contrast: invisible, and invisible in a way no
   contrast tooling on the page's own text would report, because the offending
   pair is a site component over a page background. `.press-article-hero` solves
   it the same way (lyra-press.css:335) and this report is the press release's
   sibling, so the two now open identically. */
.lyra-webflow.report-page .report-hero {
  background: var(--report-ink);
  color: #fff;
  /* !important for the same reason lyra-press.css:339 needs it: the shared
     internal-section selector is a long :not() chain and outranks a plain page
     modifier, so a bare padding-top silently loses. Measured at 1440 without
     it, the kicker sat 34 px below the nav links, inside the navigation's own
     band. (The navigation here is `position: relative` and scrolls away with
     the page, so this is clearance, not a fixed-header offset.) */
  padding-top: 148px !important;
  padding-bottom: 72px !important;
}

/* Every text node in the hero states its own colour. `color: #fff` on the band
   is not enough: lyra-custom.css sets an explicit colour on headings and body
   copy, which beats inheritance, so the h1 and the deck rendered sea-on-sea and
   disappeared entirely while the two spans that had no such rule stayed
   visible. A half-inherited dark band is worse than none. */
.lyra-webflow.report-page .report-hero .report-hero-title,
.lyra-webflow.report-page .report-hero .report-hero-deck {
  color: #fff;
}

.lyra-webflow.report-page .report-hero .report-hero-kicker,
.lyra-webflow.report-page .report-hero .report-hero-meta {
  color: rgba(255, 255, 255, 0.86);
}

.lyra-webflow.report-page .report-hero-kicker,
.lyra-webflow.report-page .report-provenance,
.lyra-webflow.report-page .report-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}

.lyra-webflow.report-page .report-hero-title {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.08;
  margin: 0 0 1.5rem;
}

.lyra-webflow.report-page .report-hero-deck {
  font-family: "EB Garamond", serif;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.6;
  margin: 0 0 2rem;
  max-width: 34em;
}

.lyra-webflow.report-page .report-hero-meta {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 0.92rem;
  margin: 0;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

/* scroll-margin keeps a heading clear of the fixed navbar when the table of
   contents jumps to it. Without it every anchor lands under the nav. */
.lyra-webflow.report-page .report-section {
  scroll-margin-top: 96px;
}

/* Every section boundary on this page measured the same 160 px of blank paper
   and nothing else. Over 24,000 px that is not a rhythm, it is drift: the most
   important structural break in the document was carrying the weakest possible
   signal, and identical to the gap around any figure.

   So the break is marked rather than merely long. The rule is drawn in the same
   80vw band as the figures, which makes it line up with the widest thing on the
   page instead of floating at a width nothing else uses, and it sits far closer
   to the heading below it than to the section above -- a chapter rule belongs to
   the chapter it opens.

   `auto` margins are safe here where they were not on .report-figure-wide: that
   box is deliberately wider than its container, this one never is. The section's
   content box is the viewport less 2x10% (5% under 992 px), so min(1080px, 80vw)
   is at most exactly as wide and the box is never over-constrained.

   .report-glance is skipped -- its beige ground already is the boundary, and a
   hairline drawn on a colour change is a belt worn with braces. */
.lyra-webflow.report-page .report-section:not(.report-glance)::before {
  content: "";
  display: block;
  width: min(1080px, 80vw);
  height: 1px;
  margin: 0 auto 3.2rem;
  background: var(--report-line);
}

.lyra-webflow.report-page .report-section-heading {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.18;
  /* The base heading rule opens 4rem above and below, which is right between
     landing blocks and far too loose inside a continuous document. */
  margin: 0 0 1.6rem;
}

.lyra-webflow.report-page .report-subheading {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  margin: 3rem 0 1.2rem;
}

.lyra-webflow.report-page .report-glance {
  background: var(--report-ground);
}

/* ── Table of contents ──────────────────────────────────────────────────── */

.lyra-webflow.report-page .report-toc {
  padding-top: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--report-line);
}

.lyra-webflow.report-page .report-toc-heading {
  margin-bottom: 1.2rem;
}

.lyra-webflow.report-page .report-toc-list {
  columns: 2;
  column-gap: 2.5rem;
  margin: 0;
  padding-left: 1.2rem;
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 0.98rem;
}

.lyra-webflow.report-page .report-toc-list li {
  break-inside: avoid;
  margin-bottom: 0.55rem;
}

/* ── Definition lists ───────────────────────────────────────────────────── */

.lyra-webflow.report-page .report-definitions {
  margin: 2rem 0 2.5rem;
  border-top: 1px solid var(--report-line);
}

.lyra-webflow.report-page .report-definitions dt {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 1.02rem;
  padding-top: 1.1rem;
}

.lyra-webflow.report-page .report-definitions dd {
  font-family: "EB Garamond", serif;
  font-size: 1.14rem;
  line-height: 1.65;
  color: var(--report-ink-2);
  margin: 0.35rem 0 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--report-line);
}

.lyra-webflow.report-page .report-rule {
  display: block;
  margin-top: 0.35rem;
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

/* ── Callouts ───────────────────────────────────────────────────────────── */

.lyra-webflow.report-page .report-callout {
  border-left: 2px solid var(--report-ink);
  padding: 0.2rem 0 0.2rem 1.4rem;
  margin: 2rem 0;
}

.lyra-webflow.report-page .report-callout-label {
  margin-bottom: 0.4rem;
}

.lyra-webflow.report-page .report-callout-body {
  font-family: "EB Garamond", serif;
  font-size: 1.14rem;
  line-height: 1.65;
  margin: 0;
}

/* ── Figures ────────────────────────────────────────────────────────────── */

/* Figures break out of the prose measure. 80vw is exactly the section's content
   box (.section carries 10% side padding), so a figure fills the gutters at
   every width without ever crossing them.

   The left margin is computed, NOT `auto`. Auto margins do not centre a box
   wider than its container: CSS 2.1 §10.3.3 says that when the box is
   over-constrained, any `auto` margin is treated as zero — so `margin: 0 auto`
   resolved to `margin-left: 0; margin-right: -360px` and hung the whole 360 px
   breakout off the right-hand side, flush to the viewport edge, while the left
   edge still lined up with the prose. It looked deliberate in the DOM and wrong
   on screen, which is why this was caught in the browser and not by a test.

   `50%` here is half of .report-measure, and .report-measure is itself centred
   in the section's content box, so `50% - width/2` centres the figure on the
   section at every width. Below 768 px the two terms cancel and the figure
   simply fills the content box. */
/* Asymmetric, and that is the whole point: a figure is the evidence for the
   sentence above it and has nothing to do with the paragraph below. Equal
   margins made every figure float between two paragraphs with no indication of
   which one it belonged to. Two consecutive figures still get 7rem between
   them, which is more air than either had before. */
.lyra-webflow.report-page .report-figure {
  margin: 2.4rem 0 4.6rem;
}

.lyra-webflow.report-page .report-figure-wide {
  width: min(1080px, 80vw);
  margin-left: calc(50% - min(1080px, 80vw) / 2);
  margin-right: 0;
}

.lyra-webflow.report-page .report-figure-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--report-line-strong);
}

.lyra-webflow.report-page .report-figure-id {
  margin: 0;
  color: var(--report-ink-2);
}

/* The source embeds V11 inside V01 rather than giving it its own figure. The ID
   is set back so the sub-heading still reads as a heading, not as a second
   figure — but it is present, so V01's caption does not dangle. */
.lyra-webflow.report-page .report-embedded-id {
  color: var(--report-ink-2);
  letter-spacing: 0.12em;
  margin-right: 0.5rem;
}

.lyra-webflow.report-page .report-figure-title {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 1.08rem;
  line-height: 1.35;
}

.lyra-webflow.report-page .report-figure-note {
  font-family: "EB Garamond", serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--report-ink-2);
  margin: 0.9rem 0 0;
  max-width: 46em;
}

.lyra-webflow.report-page .report-figure-body {
  margin-top: 1.8rem;
}

/* The provenance line: N, unit, snapshot date, under every figure without
   exception. This is the one place the page is meant to look repetitive —
   repetition here is what reads as research rather than as a deck. */
.lyra-webflow.report-page .report-provenance {
  margin: 1.4rem 0 0;
  color: var(--report-ink-2);
  font-size: 0.8rem;
}

.lyra-webflow.report-page .report-guardrail {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--report-ink-2);
  margin: 0.5rem 0 0;
  max-width: 46em;
}

/* Half the guardrails are written as instructions ("Do not call the measure
   production volume"). The label is what makes that voice land: the sentence is
   addressed to whoever quotes the figure, not to whoever is reading it. */
.lyra-webflow.report-page .report-guardrail-label {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--report-ink);
}

.lyra-webflow.report-page .report-guardrail-label::after {
  content: " — ";
  letter-spacing: 0;
}

.lyra-webflow.report-page .report-data-disclosure {
  max-width: none;
  margin-top: 1.4rem;
}

.lyra-webflow.report-page .report-data-disclosure > summary {
  font-size: 0.95rem;
  padding: 0.85rem 0.15rem;
}

/* ── Bars ───────────────────────────────────────────────────────────────── */

.lyra-webflow.report-page .report-bar-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 12rem) 1fr minmax(4.5rem, auto);
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 0;
}

/* A row carrying a sublabel has three or four facts to fit under its label,
   and at 12rem C01 stacked them four lines deep beside a one-line bar. Widened
   only where a sublabel is actually present, so the plain rows keep the tighter
   column.

   Deliberately inside a min-width query rather than reset in the mobile block
   below: `:has()` adds its argument's specificity, so this selector scores
   (0,5,0) against the mobile collapse rule's (0,3,0) and would silently win
   there. A media boundary cannot be outranked. */
@media screen and (min-width: 768px) {
  .lyra-webflow.report-page .report-bar-row:has(.report-bar-sublabel) {
    grid-template-columns: minmax(11rem, 17rem) 1fr minmax(4.5rem, auto);
  }
}

.lyra-webflow.report-page .report-bar-label,
.lyra-webflow.report-page .report-grouped-name,
.lyra-webflow.report-page .report-bar-value {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 0.95rem;
  line-height: 1.3;
}

.lyra-webflow.report-page .report-bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lyra-webflow.report-page .report-bar-sublabel {
  display: block;
  font-size: 0.78rem;
  color: var(--report-ink-2);
  margin-top: 0.15rem;
}

/* One fact per chunk, so a wrap can only land on a separator. Without it C01
   broke "N = 261" across two lines -- a number severed from its own label. */
.lyra-webflow.report-page .report-chunk {
  white-space: nowrap;
}

.lyra-webflow.report-page .report-bar-track {
  display: block;
  background: var(--report-track);
  height: 14px;
}

.lyra-webflow.report-page .report-bar-fill {
  display: block;
  height: 100%;
  background: var(--report-ink);
}

.lyra-webflow.report-page .report-bar-row.is-emphasis .report-bar-fill {
  background: var(--report-accent);
}

.lyra-webflow.report-page .report-bar-row.is-emphasis .report-bar-value {
  color: var(--report-accent);
}

/* Two panels on their own scales. They stack below 767 px rather than shrinking
   to a pair of 150 px columns nobody can read. */
.lyra-webflow.report-page .report-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.lyra-webflow.report-page .report-panel-heading {
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--report-line);
}

.lyra-webflow.report-page .report-panels .report-bar-row {
  grid-template-columns: minmax(5.5rem, 8rem) 1fr minmax(3rem, auto);
  gap: 0.75rem;
}

/* Grouped bars — the series name sits on the bar, so there is no key to look
   up. The second series is a fill-only grey; nothing readable is set in it. */
.lyra-webflow.report-page .report-grouped-row {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--report-line);
}

.lyra-webflow.report-page .report-grouped-row:first-child {
  border-top: 1px solid var(--report-line);
}

.lyra-webflow.report-page .report-grouped-label {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 1.02rem;
  margin: 0 0 0.8rem;
}

.lyra-webflow.report-page .report-grouped-bar {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7rem) 1fr minmax(4rem, auto);
  align-items: center;
  gap: 1rem;
  padding: 0.28rem 0;
}

.lyra-webflow.report-page .report-grouped-bar.series-2 .report-bar-fill {
  background: var(--report-fill-2);
}

/* ── One 100% stacked bar ───────────────────────────────────────────────── */

.lyra-webflow.report-page .report-stack {
  display: flex;
  height: 34px;
  /* The gutter, not the fill, is what separates the segments: adjacent steps of
     a monochrome ramp measure about 1.7:1 against each other, which no palette
     choice fixes. */
  gap: 2px;
  background: #fff;
}

.lyra-webflow.report-page .report-stack-segment {
  display: block;
  min-width: 3px;
  background: var(--report-ink);
}

/* The ramp is compressed rather than spread, and the floor is the reason.
   Adjacent steps are told apart by the 2 px gutter and the direct label, never
   by their fill — so the ramp's only remaining job is to stay visible against
   the page. At the old floor it did not: V20's Registration component is 0.6 %
   of the bar, and rgba(6, 50, 80, 0.24) measures 1.6:1 on white, so the widest
   it could ever be drawn was a 2 px sliver nobody could see. Every step below
   now clears the 3:1 non-text floor (the lightest measures 3.16:1), which is
   what makes a 2 px segment a mark rather than a rumour. */
.lyra-webflow.report-page .report-stack-segment.step-2,
.lyra-webflow.report-page .report-stack-swatch.step-2 {
  background: rgba(6, 50, 80, 0.9);
}
.lyra-webflow.report-page .report-stack-segment.step-3,
.lyra-webflow.report-page .report-stack-swatch.step-3 {
  background: rgba(6, 50, 80, 0.8);
}
.lyra-webflow.report-page .report-stack-segment.step-4,
.lyra-webflow.report-page .report-stack-swatch.step-4 {
  background: rgba(6, 50, 80, 0.71);
}
.lyra-webflow.report-page .report-stack-segment.step-5,
.lyra-webflow.report-page .report-stack-swatch.step-5 {
  background: rgba(6, 50, 80, 0.62);
}
.lyra-webflow.report-page .report-stack-segment.step-6,
.lyra-webflow.report-page .report-stack-swatch.step-6 {
  background: rgba(6, 50, 80, 0.52);
}

.lyra-webflow.report-page .report-stack-keys {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
}

.lyra-webflow.report-page .report-stack-key {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--report-line);
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 0.95rem;
}

.lyra-webflow.report-page .report-stack-swatch {
  width: 14px;
  height: 14px;
  background: var(--report-ink);
  transform: translateY(2px);
}

.lyra-webflow.report-page .report-stack-key-value {
  font-variant-numeric: tabular-nums;
}

.lyra-webflow.report-page .report-stack-block + .report-stack-block,
.lyra-webflow.report-page .report-cards + .report-stack-block {
  margin-top: 2.5rem;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

/* Horizontal hairlines and whitespace, nothing else -- the same grammar as the
   tables. The gridded box this replaces (a 1 px gap over a tinted ground, plus
   an outer border) was the one component on the page that argued with every
   other one, and on the beige at-a-glance band it read as a stray table. */
.lyra-webflow.report-page .report-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: 2.5rem;
  row-gap: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--report-line-strong);
  border-bottom: 1px solid var(--report-line);
}

/* Subgrid, so the label / value / detail rows line up ACROSS the cards and not
   just within each one. "Median price per metre" wraps to two lines while the
   other three labels do not, which dropped its €182,188/m a line below its
   neighbours and broke the row of numbers the cards exist to present. A
   min-height on the label would fix this set and fail the next one. */
.lyra-webflow.report-page .report-card {
  /* Bottom padding rather than a row gap: with `auto-fit` a narrow viewport
     wraps the cards onto a second row, and a row gap would also open between
     the four subgrid tracks inside every card. */
  padding: 0 0 1.7rem;
  display: grid;
  grid-template-rows: subgrid;
  /* Four, because statCards emits at most four children — label, value, and the
     optional detail and footnote. `span 3` put the fourth child back into the
     third track, so R01's footnote printed directly on top of its detail line
     in all five cards. A card with fewer children leaves its last track empty,
     which is what keeps the rows aligned across the row. The maximum is pinned
     by a test rather than left to whoever next adds a slot. */
  grid-row: span 4;
  align-content: start;
}

.lyra-webflow.report-page .report-card-label {
  margin-bottom: 0.7rem;
  color: var(--report-ink-2);
}

.lyra-webflow.report-page .report-card-value {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.lyra-webflow.report-page .report-card-detail {
  font-family: "EB Garamond", serif;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--report-ink-2);
  margin: 0.6rem 0 0;
}

.lyra-webflow.report-page .report-card-footnote {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--report-ink-2);
  margin: 0.7rem 0 0;
}

.lyra-webflow.report-page .report-benchmark-groups {
  display: grid;
  gap: 2.5rem;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

/* There is not one <table> element anywhere else under webflow/, so this is a
   new component rather than a reuse. No outer border, no vertical rules, no
   zebra striping and no row hover: separation is the same hairline already used
   by .sf-role-list li and .programme-card. */
.lyra-webflow.report-page .report-table-scroll {
  overflow-x: auto;
  /* tabindex="0" is on the element; without a visible focus ring a keyboard
     user cannot tell they have reached the scrollable region. */
  outline-offset: 3px;
  /* The caption above a table belongs to it and stays tight; the paragraph
     below does not, and was running straight into the last row's rule. */
  margin-bottom: 2rem;
}

.lyra-webflow.report-page .report-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.lyra-webflow.report-page .report-table caption {
  font-family: "EB Garamond", serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--report-ink-2);
  text-align: left;
  padding: 0 0 0.9rem;
}

.lyra-webflow.report-page .report-table th,
.lyra-webflow.report-page .report-table td {
  text-align: left;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--report-line);
  vertical-align: top;
}

.lyra-webflow.report-page .report-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  line-height: 1.4;
  border-bottom-color: var(--report-line-strong);
  /* Deliberately NOT nowrap. Six unbreakable headers set this table's
     min-content width at 810 px inside a 720 px measure, so it clipped its last
     column behind a horizontal scroll -- and any padding that separated the
     labels made the clipping worse. A header that wraps to two lines costs
     nothing here: the cells are already `vertical-align: top`. */
  text-wrap: balance;
}

.lyra-webflow.report-page .report-table tbody th {
  font-weight: 400;
}

/* Numeric columns are right-aligned, so the gap between two of them is one
   cell's right padding plus the next one's left padding -- and the base rule
   gives every cell a left padding of 0. Without the left padding below, the
   ownership table paints MODELSPRICE STATED, NENTRY PRICEMEDIAN PRICE: three
   headers touching at 0 px, which the DOM reports as three separate, perfectly
   healthy cells. Measure the painted range, not the box. */
.lyra-webflow.report-page .report-table .report-num {
  text-align: right;
  padding-left: 1rem;
}

/* Only the last column loses its right padding, so the final numerals sit flush
   with the table edge; an interior numeric column keeps the base 1rem. */
.lyra-webflow.report-page .report-table th.report-num:last-child,
.lyra-webflow.report-page .report-table td.report-num:last-child {
  padding-right: 0;
}

.lyra-webflow.report-page .report-table thead th.report-num {
  text-align: right;
}

/* ── SVG ────────────────────────────────────────────────────────────────── */

.lyra-webflow.report-page .report-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lyra-webflow.report-page .report-svg-bar {
  fill: var(--report-ink);
}

.lyra-webflow.report-page .report-svg-baseline {
  stroke: var(--report-line-strong);
  stroke-width: 1;
}

.lyra-webflow.report-page .report-svg-reference {
  stroke: var(--report-accent);
  stroke-width: 1.5;
}

.lyra-webflow.report-page .report-svg-value,
.lyra-webflow.report-page .report-svg-axis,
.lyra-webflow.report-page .report-svg-annotation,
.lyra-webflow.report-page .report-svg-reference-label {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  fill: var(--report-ink);
  font-size: 15px;
}

.lyra-webflow.report-page .report-svg-value {
  text-anchor: middle;
}

/* The ladder's values are a right-aligned column, so they anchor at their end.
   This lives in CSS and NOT as a `text-anchor` attribute in the markup: a CSS
   declaration beats a presentation attribute, so a rule here silently overrode
   `text-anchor="end"` in the generated SVG and left the values left-anchored
   inside their column, running into the annotation beside them. Anchoring is
   owned here; the generator sets x and nothing else. */
.lyra-webflow.report-page .report-svg-value-inline {
  text-anchor: end;
}

.lyra-webflow.report-page .report-svg-axis,
.lyra-webflow.report-page .report-svg-annotation {
  fill: var(--report-ink-2);
  font-size: 14px;
}

.lyra-webflow.report-page .report-svg-axis {
  text-anchor: middle;
}

.lyra-webflow.report-page .report-svg-axis-left {
  text-anchor: start;
}

.lyra-webflow.report-page .report-svg-reference-label {
  fill: var(--report-accent);
  font-size: 14px;
}

/* Both variants are static markup, swapped by display alone: no JavaScript, no
   measurement, and a crawler sees the numbers either way. */
.lyra-webflow.report-page .report-mobile-only {
  display: none;
}

/* ── Toggles ──────────────────────────────────────────────── */

/* Real <button aria-pressed> in a named group, not links and not a segmented
   control faked from divs — the pressed state has to survive a screen reader,
   and the buttons have to be reachable by keyboard in source order. */
.lyra-webflow.report-page .report-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 1.8rem;
  border: 1px solid var(--report-line-strong);
  width: fit-content;
}

.lyra-webflow.report-page .report-toggle-button {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--report-line-strong);
  cursor: pointer;
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--report-ink-2);
  padding: 0.6rem 1.1rem;
}

.lyra-webflow.report-page .report-toggle-button:last-child {
  border-right: 0;
}

/* The selected state is carried by fill and colour, not by fill alone, so it
   survives forced-colours mode and a monochrome print. */
.lyra-webflow.report-page .report-toggle-button[aria-pressed="true"] {
  background: var(--report-ink);
  color: #fff;
}

.lyra-webflow.report-page .report-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The mobile variant of V17 draws on the same logarithmic scale as its SVG, so
   it carries the same declaration. The SVG's own scale note lives inside the
   <svg>, which is display:none below 768 px — without this the phone reading
   had a log scale and nowhere that said so. */
.lyra-webflow.report-page .report-scale-note {
  font-family: "Tt Norms Pro Expanded", sans-serif;
  font-size: 0.86rem;
  color: var(--report-ink-2);
  margin: 1rem 0 0;
}

/* ── Answers ────────────────────────────────────────────────────────────── */

.lyra-webflow.report-page .report-answers dt {
  font-size: 1.1rem;
}

/* ── Mobile: 315 px of usable width at 375 px ───────────────────────────── */

@media screen and (max-width: 767px) {
  /* Below 768 px there is no gutter left to break out into, so the figure just
     fills the measure. margin-left is reset explicitly rather than left to the
     desktop calc — the two expressions happen to agree here, and a rule that is
     only correct by coincidence is one edit away from being wrong. */
  .lyra-webflow.report-page .report-figure-wide {
    width: 100%;
    margin-left: 0;
  }

  .lyra-webflow.report-page .report-toc-list {
    columns: 1;
  }

  .lyra-webflow.report-page .report-panels {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* An eight-column chart in 315 px means rotated axis labels, which is the
     failure mode rather than the fix. The horizontal variant reflows instead. */
  .lyra-webflow.report-page .report-svg {
    display: none;
  }

  .lyra-webflow.report-page .report-mobile-only {
    display: block;
  }

  .lyra-webflow.report-page .report-bar-row,
  .lyra-webflow.report-page .report-panels .report-bar-row,
  .lyra-webflow.report-page .report-grouped-bar {
    grid-template-columns: 1fr auto;
    gap: 0.4rem 0.75rem;
  }

  .lyra-webflow.report-page .report-bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .lyra-webflow.report-page .report-stack {
    height: 26px;
  }

  /* Card-per-row: the header cell moves in front of each value, so a six-column
     table becomes six readable lines instead of a horizontal scroll nobody
     finds. */
  .lyra-webflow.report-page .report-table,
  .lyra-webflow.report-page .report-table caption,
  .lyra-webflow.report-page .report-table tbody,
  .lyra-webflow.report-page .report-table tr,
  .lyra-webflow.report-page .report-table td,
  .lyra-webflow.report-page .report-table tbody th {
    display: block;
    width: auto;
  }

  .lyra-webflow.report-page .report-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lyra-webflow.report-page .report-table tr {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--report-line-strong);
  }

  .lyra-webflow.report-page .report-table tbody th {
    font-size: 1.05rem;
    padding: 0 0 0.5rem;
    border-bottom: none;
  }

  .lyra-webflow.report-page .report-table td {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 0.28rem 0;
    border-bottom: none;
  }

  .lyra-webflow.report-page .report-table td::before {
    content: attr(data-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: var(--report-ink-2);
  }

  /* Card-per-row puts one value on each line, so the desktop left padding is
     dead weight -- and it would win by default: .report-table .report-num is
     (0,4,0) against this block's td rule at (0,3,1). Reset it explicitly. */
  .lyra-webflow.report-page .report-table .report-num {
    text-align: right;
    padding-left: 0;
  }

  .lyra-webflow.report-page .report-hero {
    padding-top: 120px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lyra-webflow.report-page * {
    scroll-behavior: auto;
  }
}