/* ============================================================================
   2050 BetterPlace — SECTION LIBRARY STYLES. Authored CSS.

   This file REPLACES the compiled-Tailwind output that stood here before v1.1.0. Under the
   plain-CSS ruling (docs/design-generation-contract.md) a fragment must render from THIS FILE
   ALONE, and every class a fragment writes must be defined here. No utilities: a utility in a
   fragment resolves only because some unrelated scanned file happened to use the same one, which
   is a correctness-by-coincidence the build cannot test and a browser cannot report.

   Classes are NAMESPACED PER BLOCK (`lcol-`, `ctab-`, `tstory-`…). A second generic vocabulary in
   this file would be Tailwind again with worse tooling. The only shared names are `.sec-container`
   and `.sec-btn` — a container and a button, i.e. components that name a THING, not a property.

   This is a CONVERSION, not a redesign. Every rule below reproduces what the compiled utilities
   computed to, including the parts that are arguably wrong; those are marked ⚠ and listed in
   designs/2050/section-library.md rather than silently corrected.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PORTABILITY FLOOR — every custom property this file consumes, declared here.
   This file is ported into stacks on its own, and stacks vendor dist/2050/theme-tokens.css, NOT
   this generation's token sources. Anything defined only in those sources resolves to NOTHING once
   ported — the failure mode that shipped --header-height (v1.3.9), --weight-light (v1.4.5) and
   --tracking-tight2 (v1.6.1), each silently, because a var() with a plausible fallback looks
   deliberate.

   The selector is :where(:root) / :where(.dark) on purpose: ZERO specificity, so a real token
   sheet, a tenant theme or a per-page override always wins when one is present.

   SOURCE OF TRUTH is tokens.json (shipped as dist/2050/theme-tokens.css). This block is a FALLBACK
   COPY of those values, not their definition. Change one and you must change the other; if the two
   disagree the floor loses, which is the safe direction.
   ---------------------------------------------------------------------------- */
:where(:root) {
  --color-primary: var(--brand-primary, #1d4ed8);
  --color-primary-soft: var(--sem-primary-soft, var(--brand-primary, #1d4ed8));
  --color-surface-warm: var(--sem-surface-warm, #fcf7f4);
  --color-surface-raised: var(--sem-surface-raised, #fff);
  --color-surface-muted: var(--sem-surface-muted, #f5f5f5);
  --color-heading: var(--sem-heading, #171717);
  --color-ink: var(--sem-ink, #404040);
  --color-edge: var(--sem-edge, #e5e5e5);
  --color-edge-strong: var(--sem-edge-strong, #d4d4d4);
  /* 2050's signature diagonal-corner pairing. Large by design — these are the hero radii, not the
     control radii, and blocks apply them to ONE or TWO corners, never all four. */
  --radius-hero: 96px;
  --radius-hero-lg: 128px;
}
/* Both dark triggers are listed so the flip fires regardless of which one a stack ships
   (.dark class on pc/la, [data-theme] attribute on go). */
:where(.dark), :where([data-theme="dark"]) {
  /* --sem-primary-soft is NOT set here. It was, to var(--brand-primary) — and the standalone rule
     below overrode it with a 55%-white mix, same specificity, later in source. The dead line read
     as the answer and cost a producer cut: it recoloured three classes OFF primary-soft believing
     it was "too dim in dark", when soft is the BRIGHTER of the two. A dead declaration that states
     the opposite of the live one is worse than no declaration. */
  --sem-surface-warm: #1c1917;
  --sem-surface-raised: #171717;
  --sem-surface-muted: #262626;
  --sem-heading: #fff;
  --sem-ink: #d4d4d4;
  --sem-edge: #262626;
  --sem-edge-strong: #404040;
}
@supports (color: color-mix(in lab, red, red)) {
  :where(.dark), :where([data-theme="dark"]) { --sem-primary-soft: color-mix(in oklab, var(--brand-primary, #1d4ed8) 55%, white); }
}

/* ----------------------------------------------------------------------------
   SHARED — the two things that are genuinely one component used by many blocks.
   ---------------------------------------------------------------------------- */
/* The library's standard measure: centred, 80rem, gutter steps once at 40rem. */
/* ============================================================================
   GENERATION SCOPE — every block rule below renders only inside a page shell that
   carries data-design="2050". :where() adds NO specificity, so tenant and stack
   overrides keep winning exactly as before.

   NOT inside this wrapper, deliberately: the :where(:root) portability floor and the
   :where(.dark)/[data-theme] token flip above. Both are DOCUMENT-ROOT state — the stacks
   set .dark on <html>, an ANCESTOR of this wrapper — so scoping them makes them match
   nothing. Any future rule keyed on a root state belongs above this line too.
   ============================================================================ */
:where([data-design="2050"]) {
.sec-container { margin-inline: auto; max-width: 80rem; padding-inline: 1rem; }
@media (min-width: 40rem) { .sec-container { padding-inline: 1.5rem; } }

/* The filled brand pill. Four blocks draw it; four copies would be the coincidence problem in a
   different costume. It names a button, not a property. */
.sec-btn { display: inline-flex; align-items: center; border-radius: 0.5rem; background: var(--color-primary); padding: 0.75rem 1.75rem; font-weight: 600; color: #fff; transition: opacity 0.15s cubic-bezier(.4, 0, .2, 1); }
.sec-btn:hover { opacity: 0.9; color: #fff; }

/* ----------------------------------------------------------------------------
   LIFESTYLE COLLAGE — one large frame plus a stacked pair, diagonal hero corners.
   ---------------------------------------------------------------------------- */
.lcol { margin-inline: auto; max-width: 80rem; padding-inline: 1rem; padding-bottom: 1.5rem; }
.lcol > * + * { margin-top: 1.5rem; }
@media (min-width: 40rem) { .lcol { padding-inline: 1.5rem; } }
@media (min-width: 48rem) { .lcol { padding-bottom: 3rem; } }
@media (min-width: 64rem) { .lcol { padding-bottom: 5rem; } }
.lcol-head > * + * { margin-top: 0.75rem; }
@media (min-width: 64rem) { .lcol-head { max-width: 48rem; } }
.lcol-title { margin: 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .lcol-title { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 64rem) { .lcol-title { font-size: 3rem; line-height: 1; } }
.lcol-body { margin: 0; font-weight: 300; color: var(--color-ink); }
/* Below 48rem the frames carry their own ratios and stack; at and above it the ROW takes a fixed
   height and the ratios are released, which is what lets the pair match the large frame exactly. */
.lcol-grid { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 48rem) { .lcol-grid { height: 420px; flex-direction: row; } }
@media (min-width: 64rem) { .lcol-grid { height: 460px; gap: 2rem; } }
.lcol-a, .lcol-b, .lcol-c { position: relative; min-height: 0; overflow: hidden; border-radius: 0.5rem; }
.lcol-a { aspect-ratio: 16 / 9; border-top-left-radius: var(--radius-hero, 96px); }
@media (min-width: 48rem) { .lcol-a { aspect-ratio: auto; flex-basis: 66.666667%; border-radius: 0.75rem; border-top-left-radius: var(--radius-hero-lg, 128px); } }
.lcol-stack { display: flex; gap: 1.25rem; }
@media (min-width: 48rem) { .lcol-stack { flex-basis: 33.333333%; flex-direction: column; } }
@media (min-width: 64rem) { .lcol-stack { gap: 2rem; } }
.lcol-b, .lcol-c { flex: 1 1 0%; aspect-ratio: 4 / 3; }
.lcol-c { border-bottom-right-radius: var(--radius-hero, 96px); }
@media (min-width: 48rem) { .lcol-b, .lcol-c { aspect-ratio: auto; } .lcol-c { border-bottom-right-radius: var(--radius-hero-lg, 128px); } }
/* Absolute fill rather than height:100% — the frames have no intrinsic height at the row's fixed
   height, so a flow image would collapse them. */
.lcol-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------------------
   LIFESTYLE INTRO — panel + render, each with an opposite pair of hero corners.
   ---------------------------------------------------------------------------- */
.lint { margin-inline: auto; display: grid; max-width: 80rem; align-items: center; gap: 2.5rem; padding: 4rem 1rem; }
@media (min-width: 40rem) { .lint { padding-inline: 1.5rem; } }
@media (min-width: 48rem) { .lint { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 6rem; } }
.lint-card { border-radius: 1rem; border-bottom-left-radius: var(--radius-hero, 96px); border-top-right-radius: var(--radius-hero, 96px); border: 1px solid var(--color-edge); background: var(--color-surface-raised); padding: 2rem; }
.lint-card > :not(:last-child) { margin-block-end: 1.5rem; }
@media (min-width: 48rem) { .lint-card { padding: 2.5rem; } }
.lint-kicker { margin: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary-soft); }
.lint-title { margin: 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .lint-title { font-size: 2.25rem; line-height: 2.5rem; } }
.lint-body { margin: 0; color: var(--color-ink); }
.lint-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1rem; border-bottom-right-radius: var(--radius-hero, 96px); border-top-left-radius: var(--radius-hero, 96px); border: 1px solid var(--color-edge); background: var(--color-surface-muted); }
.lint-img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------------------
   CONTENT SPLIT — two alternating rows inside one warm panel.
   ---------------------------------------------------------------------------- */
.csplit { margin-inline: auto; max-width: 80rem; padding-inline: 1rem; }
.csplit > * + * { margin-top: 1.5rem; }
@media (min-width: 40rem) { .csplit { padding-inline: 1.5rem; } }
.csplit-head { margin-inline: auto; max-width: 48rem; text-align: center; }
.csplit-head > * + * { margin-top: 0.75rem; }
.csplit-title { margin: 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .csplit-title { font-size: 2.25rem; line-height: 2.5rem; } }
.csplit-lede { margin: 0; color: var(--color-ink); }
.csplit-panel { overflow: hidden; border-radius: 1.5rem; background: var(--color-surface-warm); font-weight: 300; }
@media (min-width: 48rem) { .csplit-panel { border-radius: var(--radius-hero, 96px); } }
/* column-reverse on the second row so the render leads on a phone in BOTH rows while the desktop
   grid alternates image-left / image-right. */
.csplit-row-rev { display: flex; flex-direction: column-reverse; }
@media (min-width: 48rem) { .csplit-row, .csplit-row-rev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.csplit-media { overflow: hidden; aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .csplit-media { aspect-ratio: auto; } }
.csplit-img { height: 100%; width: 100%; object-fit: cover; }
.csplit-copy { align-self: center; padding: 2.75rem 2rem; text-align: center; }
.csplit-copy > :not(:last-child) { margin-block-end: 0.75rem; }
@media (min-width: 48rem) { .csplit-copy { padding-block: 5rem; } }
.csplit-h { margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 500; color: var(--color-heading); }
.csplit-strap { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; color: var(--color-ink); }
.csplit-body { margin: 0; color: var(--color-ink); }
.csplit-cta { margin-top: 0.5rem; }

/* ----------------------------------------------------------------------------
   VALUE PROPS — four filled cards, icon + heading on one line.
   ---------------------------------------------------------------------------- */
.vprop { margin-inline: auto; max-width: 80rem; padding: 2.5rem 1rem; }
@media (min-width: 40rem) { .vprop { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .vprop { padding-block: 5rem; } }
.vprop-stack > :not(:last-child) { margin-block-end: 2rem; }
@media (min-width: 64rem) { .vprop-stack > :not(:last-child) { margin-block-end: 3.5rem; } }
.vprop-head { margin-inline: auto; max-width: 42rem; text-align: center; }
.vprop-title { margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .vprop-title { font-size: 1.875rem; line-height: 2.25rem; } }
.vprop-grid { margin-inline: auto; display: grid; max-width: 56rem; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 48rem) { .vprop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vprop-card { border-radius: 0.75rem; background: var(--color-surface-muted); padding: 1.5rem; }
.vprop-card > :not(:last-child) { margin-block-end: 1.5rem; }
@media (min-width: 48rem) { .vprop-card { padding: 3rem; } }
@media (min-width: 64rem) { .vprop-card { padding: 4rem; } }
.vprop-row { display: flex; align-items: center; gap: 0.75rem; }
.vprop-icon { width: 1.75rem; height: 1.75rem; flex-shrink: 0; color: var(--color-primary-soft); }
.vprop-name { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--color-heading); }
.vprop-body { margin: 0; color: var(--color-ink); }
.vprop-foot { text-align: center; }
.vprop-foot > :not(:last-child) { margin-block-end: 1rem; }
.vprop-note { margin: 0; color: var(--color-ink); }

/* ----------------------------------------------------------------------------
   FEATURE ACCORDION — sticky render beside native <details> rows.
   Native disclosure, so the block opens and closes with no script — which is what lets it be a
   library fragment at all (a fragment injected as HTML cannot run one).
   ---------------------------------------------------------------------------- */
.facc { margin-inline: auto; max-width: 80rem; padding: 4rem 1rem; }
@media (min-width: 40rem) { .facc { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .facc { padding-block: 6rem; } }
.facc-head { margin: 0 auto 2.5rem; max-width: 42rem; text-align: center; }
@media (min-width: 64rem) { .facc-head { margin-bottom: 3.5rem; } }
.facc-kicker { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-primary); }
.facc-title { margin: 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .facc-title { font-size: 2.25rem; line-height: 2.5rem; } }
.facc-body { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 64rem) { .facc-body { flex-direction: row; align-items: flex-start; gap: 3rem; } }
.facc-media { overflow: hidden; border-radius: 1.5rem; aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .facc-media { border-radius: var(--radius-hero, 96px); } }
/* The ratio is dropped exactly where the pin starts: pinned, the frame's height is the column's,
   and a ratio would fight it. */
@media (min-width: 64rem) { .facc-media { aspect-ratio: auto; position: sticky; top: 7rem; flex-basis: 40%; } }
.facc-img { height: 100%; width: 100%; object-fit: cover; }
.facc-list > :not(:last-child) { margin-block-end: 1rem; }
@media (min-width: 64rem) { .facc-list { flex-basis: 60%; } }
.facc-item { border-radius: 1rem; background: var(--color-surface-raised); padding: 1.25rem 1.5rem; box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; transition: box-shadow 0.15s cubic-bezier(.4, 0, .2, 1); }
.facc-item[open] { box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; }
.facc-summary { display: flex; cursor: pointer; list-style: none; align-items: center; gap: 1rem; }
.facc-summary::-webkit-details-marker { display: none; }
.facc-num { width: 2rem; flex-shrink: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--color-primary); }
.facc-label { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--color-heading); }
.facc-chev { margin-left: auto; width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--color-ink); transition: rotate 0.3s cubic-bezier(.4, 0, .2, 1); }
.facc-item[open] .facc-chev { rotate: 180deg; }
/* Indented to clear the number column, so the answer lines up under its question. */
.facc-text { margin: 1rem 0 0; padding-left: 3rem; color: var(--color-ink); }

/* ----------------------------------------------------------------------------
   THE INVESTMENT CASE — numbered argument cards on a warm band.
   ---------------------------------------------------------------------------- */
.tic { background: var(--color-surface-warm); padding-block: 4rem; }
@media (min-width: 64rem) { .tic { padding-block: 6rem; } }
.tic-inner { margin-inline: auto; max-width: 48rem; padding-inline: 1rem; }
@media (min-width: 40rem) { .tic-inner { padding-inline: 1.5rem; } }
.tic-head { margin: 0 auto 2.5rem; max-width: 42rem; text-align: center; }
@media (min-width: 64rem) { .tic-head { margin-bottom: 3.5rem; } }
.tic-kicker { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-primary); }
.tic-title { margin: 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .tic-title { font-size: 2.25rem; line-height: 2.5rem; } }
.tic-list > :not(:last-child) { margin-block-end: 1rem; }
.tic-item { display: flex; align-items: flex-start; gap: 1rem; border-radius: 1rem; border-left: 4px solid var(--color-primary); background: var(--color-surface-raised); padding: 1.5rem; box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; transition: box-shadow 0.15s cubic-bezier(.4, 0, .2, 1); }
.tic-item:hover { box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; }
.tic-num { display: flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-primary); font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: #fff; }
.tic-name { margin: 0 0 0.25rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--color-heading); }
.tic-body { margin: 0; color: var(--color-ink); }
.tic-note { margin: 2.5rem 0 0; text-align: center; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-ink); }

/* ----------------------------------------------------------------------------
   PROCESS STEPS — four numbered discs.
   ---------------------------------------------------------------------------- */
.pstep { margin-inline: auto; max-width: 80rem; padding: 2.5rem 1rem; }
@media (min-width: 40rem) { .pstep { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .pstep { padding-block: 5rem; } }
.pstep-stack > :not(:last-child) { margin-block-end: 2.5rem; }
@media (min-width: 64rem) { .pstep-stack > :not(:last-child) { margin-block-end: 4rem; } }
.pstep-head { margin-inline: auto; max-width: 32rem; text-align: center; }
.pstep-head > :not(:last-child) { margin-block-end: 1rem; }
.pstep-title { margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .pstep-title { font-size: 1.875rem; line-height: 2.25rem; } }
.pstep-lede { margin: 0; color: var(--color-ink); }
.pstep-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 48rem) { .pstep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pstep-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pstep-item { text-align: center; }
.pstep-item > :not(:last-child) { margin-block-end: 1rem; }
.pstep-num { margin-inline: auto; display: flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-primary); font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #fff; }
.pstep-name { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--color-heading); }
.pstep-body { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-ink); }

/* ----------------------------------------------------------------------------
   STATS GRID — four filled figure cards.
   ---------------------------------------------------------------------------- */
.sgrid { margin-inline: auto; max-width: 80rem; padding: 2.5rem 1rem; }
@media (min-width: 40rem) { .sgrid { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .sgrid { padding-block: 5rem; } }
.sgrid-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 64rem) { .sgrid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sgrid-card { border-radius: 0.75rem; background: var(--color-surface-muted); padding: 1.5rem; text-align: center; }
.sgrid-card > :not(:last-child) { margin-block-end: 0.5rem; }
.sgrid-value { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: var(--color-primary-soft); }
.sgrid-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--color-ink); }

/* ----------------------------------------------------------------------------
   PROJECT FACT SHEET — a two-column definition list inside one drawn panel.
   ⚠ The rows are laid out by the GRID, so they read down-then-across, not across-then-down: with
   16 rows in two columns, "Project Name" and "District" are side by side. Reproduced as-is.
   ---------------------------------------------------------------------------- */
.pfs { margin-inline: auto; max-width: 56rem; padding: 4rem 1rem; }
@media (min-width: 40rem) { .pfs { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .pfs { padding-block: 5rem; } }
.pfs-head { margin-bottom: 2rem; text-align: center; }
.pfs-title { margin: 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .pfs-title { font-size: 2.25rem; line-height: 2.5rem; } }
.pfs-list { margin: 0; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); column-gap: 2.5rem; border-radius: 1rem; border: 1px solid var(--color-edge); background: var(--color-surface-raised); padding: 1.5rem; }
@media (min-width: 40rem) { .pfs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .pfs-list { padding: 2rem; } }
.pfs-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--color-edge); padding-block: 0.75rem; }
.pfs-key { margin: 0; flex-shrink: 0; color: var(--color-ink); }
.pfs-val { margin: 0; text-align: right; font-weight: 500; color: var(--color-heading); }

/* ----------------------------------------------------------------------------
   PRICE COMPARISON GRID — comparable cards plus one "not launched" card.
   ⚠ The pending card is drawn in the RAW AMBER PALETTE, not in semantic tokens: it is the one
   place in this library that hardcodes colour, and it therefore does NOT flip with the theme —
   amber-50 stays a pale fill on the dark canvas. Pre-existing; reproduced, not corrected. It needs
   a semantic `warning` role, which is a token decision, not a conversion one.
   ---------------------------------------------------------------------------- */
.pcg { margin-inline: auto; max-width: 80rem; padding: 4rem 1rem; }
@media (min-width: 40rem) { .pcg { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .pcg { padding-block: 6rem; } }
.pcg-head { margin: 0 auto 2.5rem; max-width: 48rem; text-align: center; }
@media (min-width: 64rem) { .pcg-head { margin-bottom: 3rem; } }
.pcg-title { margin: 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .pcg-title { font-size: 2.25rem; line-height: 2.5rem; } }
.pcg-sub { margin: 0.75rem 0 0; color: var(--color-ink); }
.pcg-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 48rem) { .pcg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pcg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcg-card { display: flex; flex-direction: column; border-radius: 1rem; border: 1px solid var(--color-edge); background: var(--color-surface-raised); padding: 1.5rem; box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; }
.pcg-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.pcg-name { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--color-heading); }
.pcg-badge { flex-shrink: 0; border-radius: 999px; background: var(--color-primary); padding: 0.25rem 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--color-primary); }
@supports (color: color-mix(in lab, red, red)) { .pcg-badge { background: color-mix(in oklab, var(--color-primary) 10%, transparent); } }
.pcg-meta { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-ink); }
.pcg-figs { margin: 1rem 0 0; border-top: 1px solid var(--color-edge); padding-top: 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.pcg-figs > :not(:last-child) { margin-block-end: 0.625rem; }
.pcg-fig { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pcg-fig-key { margin: 0; flex-shrink: 0; color: var(--color-ink); }
.pcg-fig-val { margin: 0; text-align: right; font-weight: 600; color: var(--color-heading); }
.pcg-note { margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-ink); }
.pcg-card--pending { border-color: oklch(87.9% .169 91.605); background: oklch(98.7% .022 95.277); }
.pcg-card--pending .pcg-name, .pcg-card--pending .pcg-fig-val { color: oklch(41.4% .112 45.904); }
.pcg-card--pending .pcg-meta, .pcg-card--pending .pcg-note, .pcg-card--pending .pcg-fig-key { color: oklch(47.3% .137 46.201); }
.pcg-card--pending .pcg-figs { border-top-color: oklch(92.4% .12 95.746); }
.pcg-badge--pending { background: oklch(66.6% .179 58.318); color: #fff; text-transform: uppercase; }
@supports (color: color-mix(in lab, red, red)) { .pcg-badge--pending { background: oklch(66.6% .179 58.318); } }
.pcg-sources { margin: 2rem auto 0; max-width: 48rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-ink); }
/* ⚠ The URA link renders as PLAIN TEXT — no colour, no underline. That is what it does today: the
   host page's Tailwind preflight flattens every unclassed <a>, and the fragment never styled it.
   Reproduced here so the block renders the same from this file alone. It should be a visible link;
   changing it is a design decision and is filed as one, not smuggled into a conversion. */
.pcg-link { color: inherit; text-decoration: inherit; }

/* ----------------------------------------------------------------------------
   LOCATION HIGHLIGHTS — map, a rule-and-eyebrow divider, facts beside three cards.
   ---------------------------------------------------------------------------- */
.lhi { margin-inline: auto; max-width: 80rem; padding: 4rem 1rem; }
@media (min-width: 40rem) { .lhi { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .lhi { padding-block: 5rem; } }
.lhi-title { margin: 0; max-width: 48rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .lhi-title { font-size: 2.25rem; line-height: 2.5rem; } }
.lhi-rule { margin: 1.5rem 0 2rem; display: flex; align-items: center; gap: 1rem; }
.lhi-eyebrow { flex-shrink: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-primary); }
.lhi-line { height: 1px; flex: 1 1 0%; background: var(--color-edge); }
.lhi-map { max-height: 420px; width: 100%; border-radius: 1rem; object-fit: cover; }
.lhi-cols { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 64rem) { .lhi-cols { flex-direction: row; align-items: flex-start; } .lhi-aside { flex-basis: 25%; } .lhi-main { flex-basis: 75%; } }
.lhi-panel { border-radius: 1rem; border: 1px solid var(--color-edge); background: var(--color-surface-raised); padding: 1.5rem; }
.lhi-fact { border-bottom: 1px solid var(--color-edge); padding-block: 1rem; }
.lhi-fact:first-child { padding-top: 0; }
.lhi-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.lhi-fact-title { margin: 0; text-align: center; font-weight: 600; color: var(--color-heading); }
.lhi-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 40rem) { .lhi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lhi-card { overflow: hidden; border-radius: 1rem; border: 1px solid var(--color-edge); background: var(--color-surface-raised); }
.lhi-card-img { height: 11rem; width: 100%; object-fit: cover; }
.lhi-card-body { padding: 1.25rem; text-align: center; }
.lhi-card-title { margin: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-heading); }
.lhi-card-text { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-ink); }

/* ----------------------------------------------------------------------------
   MASONRY GALLERY — CSS multi-column, so tile order reads DOWN each column.
   Each tile's ratio is a block-local modifier rather than a position rule: deleting one tile in the
   editor must not re-shuffle the ratios of the rest.
   ---------------------------------------------------------------------------- */
.mgal { background: var(--color-surface-warm); padding-block: 4rem; }
@media (min-width: 64rem) { .mgal { padding-block: 6rem; } }
.mgal-head { margin: 0 auto 3rem; max-width: 48rem; text-align: center; }
.mgal-head > :not(:last-child) { margin-block-end: 0.75rem; }
.mgal-title { margin: 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .mgal-title { font-size: 2.25rem; line-height: 2.5rem; } }
.mgal-lede { margin: 0; color: var(--color-ink); }
.mgal-cols { columns: 1; gap: 1.5rem; }
@media (min-width: 40rem) { .mgal-cols { columns: 2; } }
@media (min-width: 64rem) { .mgal-cols { columns: 3; } }
@media (min-width: 80rem) { .mgal-cols { columns: 4; } }
.mgal-tile { margin-bottom: 1.5rem; break-inside: avoid; overflow: hidden; border-radius: 1rem; background: var(--color-surface-raised); box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; }
.mgal-frame--5x6 { aspect-ratio: 5 / 6; }
.mgal-frame--4x3 { aspect-ratio: 4 / 3; }
.mgal-frame--1x1 { aspect-ratio: 1 / 1; }
.mgal-frame--3x4 { aspect-ratio: 3 / 4; }
.mgal-frame--5x4 { aspect-ratio: 5 / 4; }
.mgal-frame--4x5 { aspect-ratio: 4 / 5; }
.mgal-img { height: 100%; width: 100%; object-fit: cover; }

/* ----------------------------------------------------------------------------
   TRANSFORMATION STORY — the library's long-form editorial block: brand masthead, image strip,
   three data tables.
   ⚠ It opens with an <h1>. A fragment is injected into a page that already has one, so this makes
   two. Pre-existing (SEC-3); reproduced, and filed as a defect rather than fixed here, because
   changing it changes the page's document outline.
   ---------------------------------------------------------------------------- */
.tstory { margin-inline: auto; max-width: 64rem; padding: 4rem 1rem; }
@media (min-width: 40rem) { .tstory { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .tstory { padding-block: 5rem; } }
.tstory-hero { overflow: hidden; border-radius: 1rem; background: var(--color-primary); padding: 2.5rem 1.5rem; color: #fff; }
@media (min-width: 48rem) { .tstory-hero { padding: 3rem 2.5rem; } }
.tstory-eyebrow { margin: 0; font-size: 0.75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgb(255 255 255 / 0.7); }
.tstory-title { margin: 0.75rem 0 0; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; }
@media (min-width: 48rem) { .tstory-title { font-size: 2.25rem; line-height: 2.5rem; } }
.tstory-lede { margin: 0.75rem 0 0; max-width: 42rem; color: rgb(255 255 255 / 0.85); }
.tstory-stats { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.25); padding-top: 1.5rem; }
@media (min-width: 48rem) { .tstory-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tstory-stat-value { font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.tstory-stat-label { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.025em; color: rgb(255 255 255 / 0.7); }
.tstory-strip { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; overflow: hidden; border-radius: 1rem; }
@media (min-width: 48rem) { .tstory-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tstory-strip-img { height: 10rem; width: 100%; object-fit: cover; }
@media (min-width: 48rem) { .tstory-strip-img { height: 13rem; } }
.tstory-sec { margin-top: 3.5rem; }
/* inline-block so the rule under the heading is the width of the WORDS, not of the column. */
.tstory-h2 { margin: 0 0 1.25rem; display: inline-block; border-bottom: 2px solid var(--color-primary); padding-bottom: 0.375rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--color-heading); }
.tstory-body { margin: 0 0 1.75rem; max-width: 48rem; color: var(--color-ink); }
.tstory-tablewrap { overflow-x: auto; border-radius: 1rem; border: 1px solid var(--color-edge); }
.tstory-table { width: 100%; border-collapse: collapse; background: var(--color-surface-raised); font-size: 0.875rem; line-height: 1.25rem; }
.tstory-table caption { padding: 1rem 1rem 0; text-align: left; font-size: 0.875rem; line-height: 1.25rem; font-style: italic; color: var(--color-ink); }
.tstory-table th { border-bottom: 1px solid var(--color-edge); background: var(--color-primary); padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: #fff; }
.tstory-table td { border-bottom: 1px solid var(--color-edge); padding: 0.75rem 1rem; vertical-align: top; color: var(--color-ink); }
.tstory-table tbody tr:nth-child(2n) { background: var(--color-surface-warm); }
.tstory-table tbody tr:last-child td { border-bottom: 0; }
.tstory-table td:first-child { white-space: nowrap; font-weight: 600; color: var(--color-heading); }
/* Table 2 sets its driver column in brand rather than heading ink — the only column that differs. */
.tstory-table--drivers td:first-child { color: var(--color-primary); }
.tstory-note { margin: 1rem 0 0; border-left: 4px solid var(--color-primary); background: var(--color-surface-warm); padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-ink); }
.tstory-fig { margin: 2rem 0 0; overflow: hidden; border-radius: 1rem; border: 1px solid var(--color-edge); background: var(--color-surface-raised); }
.tstory-fig-img { max-height: 420px; width: 100%; object-fit: cover; }
.tstory-fig-cap { border-top: 1px solid var(--color-edge); padding: 0.75rem 1rem; font-size: 0.75rem; line-height: 1rem; color: var(--color-ink); }

/* ----------------------------------------------------------------------------
   AGENT TIMELINE — a rail with year dots, each year a small masonry set.
   ---------------------------------------------------------------------------- */
.atl { background: var(--color-surface-warm); padding-block: 4rem; }
@media (min-width: 64rem) { .atl { padding-block: 6rem; } }
.atl-head { margin-bottom: 2.5rem; display: flex; align-items: center; gap: 1rem; }
.atl-avatar { display: flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-primary); font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: #fff; }
.atl-name { margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--color-heading); }
@media (min-width: 48rem) { .atl-name { font-size: 1.875rem; line-height: 2.25rem; } }
.atl-role { margin: 0; color: var(--color-ink); }
.atl-rail { margin-left: 0.5rem; border-left: 2px solid var(--color-edge-strong); padding-left: 2rem; }
.atl-entry { position: relative; padding-bottom: 2.5rem; }
.atl-entry:last-child { padding-bottom: 0; }
/* -41px puts the dot's centre on the 2px rail: 2rem of padding + the 1px half-rail, less half the
   dot. The ring is the band colour, so the rail appears to pass behind the dot rather than through it. */
.atl-dot { position: absolute; left: -41px; top: 0.25rem; width: 1rem; height: 1rem; border-radius: 999px; background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-surface-warm); }
.atl-year { margin-bottom: 1.25rem; }
.atl-year-badge { display: inline-block; border-radius: 999px; background: var(--color-primary); padding: 0.25rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: #fff; }
.atl-cols { columns: 1; gap: 1.5rem; }
@media (min-width: 40rem) { .atl-cols { columns: 2; } }
@media (min-width: 64rem) { .atl-cols { columns: 3; } }
.atl-tile { margin-bottom: 1.5rem; break-inside: avoid; overflow: hidden; border-radius: 1rem; background: var(--color-surface-raised); box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; }
/* height:auto, unlike the gallery — these tiles take the picture's own ratio. */
.atl-img { display: block; height: auto; width: 100%; }

/* ----------------------------------------------------------------------------
   CTA OVER IMAGE — a card on a full-bleed render, one hero corner.
   ⚠ The render sits at z-index:-10 with no `isolation` on the section, so it can fall behind an
   opaque page background instead of behind the card. Pre-existing; reproduced.
   ---------------------------------------------------------------------------- */
.ctai { position: relative; margin-inline: auto; max-width: 80rem; padding: 4rem 1rem; }
@media (min-width: 40rem) { .ctai { padding-inline: 1.5rem; } }
@media (min-width: 48rem) { .ctai { padding-block: 8rem; } }
.ctai-bg { position: absolute; inset: 0; z-index: -10; overflow: hidden; }
.ctai-img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.ctai-card { max-width: 36rem; border-radius: 0.5rem; border-bottom-right-radius: var(--radius-hero, 96px); background: var(--color-surface-raised); padding: 2rem; }
@media (min-width: 48rem) { .ctai-card { border-bottom-right-radius: var(--radius-hero-lg, 128px); padding: 3.5rem 2.75rem; } }
.ctai-copy > :not(:last-child) { margin-block-end: 1.25rem; }
.ctai-title { margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 500; color: var(--color-heading); }
@media (min-width: 48rem) { .ctai-title { font-size: 1.875rem; line-height: 2.25rem; } }
.ctai-body { margin: 0; color: var(--color-ink); }
.ctai-cta { margin-top: 2rem; }

/* ----------------------------------------------------------------------------
   CTA BANNER — a solid brand card with two contact buttons.
   ---------------------------------------------------------------------------- */
.ctab { margin-inline: auto; max-width: 80rem; padding: 2.5rem 1rem; }
@media (min-width: 40rem) { .ctab { padding-inline: 1.5rem; } }
@media (min-width: 64rem) { .ctab { padding-block: 5rem; } }
.ctab-card { border-radius: 1rem; background: var(--color-primary); padding: 3rem 2rem; text-align: center; color: #fff; }
@media (min-width: 48rem) { .ctab-card { padding: 4rem; } }
.ctab-copy { margin-inline: auto; max-width: 36rem; }
.ctab-copy > :not(:last-child) { margin-block-end: 1.5rem; }
.ctab-title { margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
@media (min-width: 48rem) { .ctab-title { font-size: 1.875rem; line-height: 2.25rem; } }
.ctab-body { margin: 0; color: rgb(255 255 255 / 0.8); }
.ctab-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.ctab-btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 0.5rem; padding: 0.75rem 1.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.ctab-btn--light { background: var(--color-surface-raised); font-weight: 700; color: var(--color-primary); }
.ctab-btn--light:hover { background: rgb(255 255 255 / 0.9); color: var(--color-primary); }
.ctab-btn--ghost { border: 1px solid rgb(255 255 255 / 0.5); font-weight: 600; color: #fff; }
.ctab-btn--ghost:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.ctab-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

} /* closes :where([data-design="2050"]) */