@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700;800&family=Nunito+Sans:wght@400;700;800&display=swap");

/* Yes. And… Colorado (yesandcolorado) — Denver South research-series microsite.
 *
 * 1:1 port of the hand-built single page in fruition/yesandcolorado-denversouth
 * (site/index.html <style>), scoped to this tenant: every selector is prefixed
 * with [data-tenant="yesandcolorado"], :root/body map to that wrapper, and keyframes carry a yac- prefix.
 * Page bands are html blocks rendered bare by
 * components/blocks/tenants/yesandcolorado/html.tsx. Interactivity (subscribe
 * dialog + HubSpot embed, reveal/count-up animations, train scroll) lives in
 * the site's body_end marketing tag, because content html can't carry scripts,
 * buttons or data-* attributes. The source's data-animate hooks are classes
 * here (.yac-animate, .yac-animate-trigger) so the reveal state is styled from
 * first paint, before that script runs.
 *
 * The source page has no site header and its own footer band, so the platform
 * chrome is hidden below. Fonts (Roboto Slab + Nunito Sans, as on the source)
 * load from the @import above.
 */

/* ---------- Platform chrome (the page supplies its own) ---------- */
[data-tenant="yesandcolorado"] > header.sticky,
[data-tenant="yesandcolorado"] .st-footer { display: none; }

/* ---------- Platform heading reset ----------
   The platform stylesheet gives headings the theme font and a negative
   letter-spacing; the source page relies on browser defaults. Placed before
   the ported rules so the page's own heading rules still win ties. */
[data-tenant="yesandcolorado"] :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; letter-spacing: normal; }

[data-tenant="yesandcolorado"] {
  /* Campaign palette — sampled from the Articulation comp so extracted images blend seamlessly */
  --coral: #ed6a58;
  --coral-light: #f19080;
  --teal-dark: #30a1b0;
  --teal-cell: #90c4cf;
  --teal-pale: #c0dfe4;
  --seafoam: #51a79a;
  --seafoam-light: #7cbeb4;
  --gray-dark: #414143;
  --gray-mid: #999999;
  --gray-light: #d4d3ce;
  --gray-chip: #b0b0b0;   /* comp uses #999; lightened so ink text passes 4.5:1 */
  --ink: #414042;
  --teal-link: #177482;   /* darkened from --teal-dark for 4.5:1 on white */
  --rule-line: rgba(65, 64, 66, 0.25);

  --font-slab: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-tenant="yesandcolorado"] *, [data-tenant="yesandcolorado"] *::before, [data-tenant="yesandcolorado"] *::after { box-sizing: border-box; margin: 0; padding: 0; }

[data-tenant="yesandcolorado"], [data-tenant="yesandcolorado"] > main {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

[data-tenant="yesandcolorado"] img { max-width: 100%; height: auto; display: block; }

[data-tenant="yesandcolorado"] h2, [data-tenant="yesandcolorado"] h3 { font-family: var(--font-slab); font-weight: 700; line-height: 1.15; }

[data-tenant="yesandcolorado"] a:focus-visible,
[data-tenant="yesandcolorado"] button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
[data-tenant="yesandcolorado"] .table-scroll:focus-visible { outline: 3px solid var(--teal-link); outline-offset: 3px; }

[data-tenant="yesandcolorado"] .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[data-tenant="yesandcolorado"] .container { max-width: 72rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

[data-tenant="yesandcolorado"] .band { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
[data-tenant="yesandcolorado"] .band--dark { background: var(--gray-dark); color: #fff; }
[data-tenant="yesandcolorado"] .band--gray { background: var(--gray-light); }
[data-tenant="yesandcolorado"] .band--coral { background: var(--coral); color: #fff; }

[data-tenant="yesandcolorado"] .lede {
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.55;
  text-align: center;
  max-width: 58rem;
  margin-inline: auto;
}

[data-tenant="yesandcolorado"] .runin { text-transform: uppercase; letter-spacing: 0.01em; }

/* ---------- Hero ---------- */
[data-tenant="yesandcolorado"] .hero__media { position: relative; overflow: hidden; }
[data-tenant="yesandcolorado"] .hero__photo {
  width: 100%;
  height: min(56.25vw, 780px);
  object-fit: cover;
  object-position: 50% 100%;
}
/* No overlay at the bottom of the photo — the grass runs its full height and
   sits flush on the white eyebrow band, keeping the paper-cutout layering. */
[data-tenant="yesandcolorado"] .hero__eyebrow {
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.4rem 1rem;
}
@media (max-width: 640px) {
  [data-tenant="yesandcolorado"] .hero__photo { height: 78vw; }
}

[data-tenant="yesandcolorado"] .hero__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5.4vw;
  margin: 0;
  z-index: 1;
  font-family: var(--font-slab);
  font-size: 5.9vw;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--gray-dark);
}
@media (max-width: 640px) {
  [data-tenant="yesandcolorado"] .hero__title { font-size: 8.2vw; bottom: 7.5vw; }
}
[data-tenant="yesandcolorado"] .hero__title .word { display: inline-block; white-space: nowrap; }
[data-tenant="yesandcolorado"] .hero__title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: yac-char-in 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--ci) * 45ms + 250ms);
}
@keyframes yac-char-in {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-tenant="yesandcolorado"] .hero__title .char { animation: none; opacity: 1; transform: none; }
}

/* Sky sprites: cut from the artwork and overlaid at their original spots (positions in vw
   because the hero image always renders at 100vw wide, bottom-anchored) */
[data-tenant="yesandcolorado"] .hero__sprite { position: absolute; pointer-events: none; }
[data-tenant="yesandcolorado"] .hero__sprite--clouds { left: 7vw; bottom: 41.75vw; width: 27.75vw; }
[data-tenant="yesandcolorado"] .hero__sprite--sun { left: 34.75vw; bottom: 43.125vw; width: 9.75vw; }
[data-tenant="yesandcolorado"] .hero__sprite--plane { left: 72.375vw; bottom: 41.75vw; width: 15.625vw; }
@media (prefers-reduced-motion: no-preference) {
  [data-tenant="yesandcolorado"] .hero__sprite--clouds { animation: yac-cloud-drift 40s ease-in-out infinite alternate; }
  [data-tenant="yesandcolorado"] .hero__sprite--sun { animation: yac-sun-float 10s ease-in-out infinite alternate; }
  [data-tenant="yesandcolorado"] .hero__sprite--plane { animation: yac-plane-glide 28s linear infinite; }
}
@media (max-width: 640px) {
  /* the 78vw cover crop changes the image-to-viewport mapping, so vw positions no longer hold */
  [data-tenant="yesandcolorado"] .hero__sprite { display: none; }
}
@keyframes yac-cloud-drift {
  from { transform: translateX(-3vw); }
  to { transform: translateX(4vw); }
}
@keyframes yac-sun-float {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-0.8vw) scale(1.04); }
}
@keyframes yac-plane-glide {
  0% { transform: translateX(-6vw); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  92% { transform: translateX(6vw); opacity: 0; }
  100% { transform: translateX(-6vw); opacity: 0; }
}

/* ---------- Arrow CTA ---------- */
[data-tenant="yesandcolorado"] .cta {
  --arrow-w: 5.5rem;
  --notch: 2rem;
  position: relative;
  display: block;
  width: fit-content;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto;
  /* Right pad clears the arrow wedge, left pad is inflated to match: keeps the
     copy optically centered in the full rectangle, not just in the coral block. */
  padding: 0.85rem calc(var(--arrow-w) + 1.1rem) 0.95rem 3.9rem;
  background: var(--coral);
  color: #fff;
  text-align: center;
  text-decoration: none;
  /* Button reset: these are dialog triggers, not links, so they carry no href. */
  border: 0;
  font: inherit;
  cursor: pointer;
}
[data-tenant="yesandcolorado"] .cta::after {
  content: '';
  position: absolute; top: 0; bottom: 0; right: 0; width: var(--arrow-w);
  background: var(--coral-light);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--notch) 50%);
}
[data-tenant="yesandcolorado"] .cta__title {
  display: block;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
/* sub + action stay at 1.17rem (18.7px bold) — the AA large-text floor for white/ink on coral */
[data-tenant="yesandcolorado"] .cta__sub {
  display: block;
  font-size: 1.17rem;
  font-weight: 700;
  line-height: 1.4;
}
[data-tenant="yesandcolorado"] .cta__action {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink);
  font-size: 1.17rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
@media (prefers-reduced-motion: no-preference) {
  [data-tenant="yesandcolorado"] .cta { transition: filter 150ms ease, transform 150ms ease; }
  [data-tenant="yesandcolorado"] .cta:hover { filter: brightness(0.95); transform: translateX(4px); }
}
@media (max-width: 560px) {
  [data-tenant="yesandcolorado"] .cta { --arrow-w: 4.5rem; --notch: 1.6rem; padding-block: 1rem 1.1rem; padding-left: 2.4rem; }
}

/* ---------- Subscribe modal ---------- */
/* The HubSpot embed has no popup mode — it only ever renders inline where its
   container sits — so the dialog is ours. <dialog> supplies the scrim, the focus
   trap, ESC, and focus return to the trigger natively; don't hand-roll those. */
[data-tenant="yesandcolorado"] .subscribe-modal {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(90vh, 46rem);
  /* Restated because the universal reset zeroes margin, and a dialog relies on
     the UA's `margin: auto` to centre itself against inset 0. */
  margin: auto;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--ink);
  overflow: hidden auto;
}
[data-tenant="yesandcolorado"] .subscribe-modal::backdrop { background: rgba(65, 65, 67, 0.82); }
/* Coral edge: reads as the CTA's block opening into a panel rather than an
   unrelated floating card. Square corners, matching every other edge on the page. */
[data-tenant="yesandcolorado"] .subscribe-modal__inner {
  position: relative;
  border-top: 0.5rem solid var(--coral);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
[data-tenant="yesandcolorado"] .subscribe-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
/* Type picked up from .cta__title so the panel reads as continuous with the
   button that opened it. */
[data-tenant="yesandcolorado"] .subscribe-modal__title {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding-right: 2.25rem; /* clears the close button */
}
/* min-height reserves room so the panel doesn't resize under the cursor when
   the HubSpot iframe reports its height. Tight top margin because the form
   carries its own heading and description from the HubSpot side. */
[data-tenant="yesandcolorado"] .subscribe-modal__form { margin-top: 0.5rem; min-height: 20rem; }

@media (prefers-reduced-motion: no-preference) {
  [data-tenant="yesandcolorado"] .subscribe-modal[open] { animation: yac-modal-in 200ms cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes yac-modal-in {
  from { opacity: 0; transform: translateY(0.75rem); }
}

/* ---------- Two-column copy ---------- */
[data-tenant="yesandcolorado"] .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
[data-tenant="yesandcolorado"] .two-col > * { min-width: 0; }
@media (max-width: 768px) {
  [data-tenant="yesandcolorado"] .two-col { grid-template-columns: 1fr; }
}

/* ---------- Both things can be true ---------- */
[data-tenant="yesandcolorado"] .split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
[data-tenant="yesandcolorado"] .split h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); margin-bottom: 0.75rem; }
[data-tenant="yesandcolorado"] .split__map { justify-self: center; position: relative; }
[data-tenant="yesandcolorado"] .split__rays {
  position: absolute;
  left: 32%;
  top: 44.3%;
  width: 37.5%;
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: no-preference) {
  [data-tenant="yesandcolorado"] .split__rays { animation: yac-rays-spin 30s linear infinite; }
}
@keyframes yac-rays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (max-width: 860px) {
  [data-tenant="yesandcolorado"] .split { grid-template-columns: minmax(0, 1fr); }
  [data-tenant="yesandcolorado"] .split__map { max-width: min(30rem, 100%); }
}

/* ---------- Office illustration ---------- */
/* Square corners — the paper-cutout artwork reads linear, so rounding fights it. */
[data-tenant="yesandcolorado"] .office {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

/* ---------- Research section ---------- */
[data-tenant="yesandcolorado"] .rule-heading {
  font-size: clamp(1.7rem, 1.25rem + 2vw, 2.6rem);
  text-align: center;
  border-block: 1px solid var(--rule-line);
  padding-block: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
[data-tenant="yesandcolorado"] hr.rule {
  border: 0;
  border-top: 1px solid var(--rule-line);
  margin-block: clamp(2rem, 4vw, 3rem);
}

[data-tenant="yesandcolorado"] .card { background: var(--gray-light); display: flex; flex-direction: column; }
[data-tenant="yesandcolorado"] .card__body--center { display: flex; flex-direction: column; }
[data-tenant="yesandcolorado"] .card__body--center .calendar { margin-block: auto; }
[data-tenant="yesandcolorado"] .card__header {
  background: var(--gray-dark);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.9rem 1rem;
}
[data-tenant="yesandcolorado"] .card__body { flex: 1; padding: clamp(1.5rem, 3vw, 2.5rem); }
[data-tenant="yesandcolorado"] .card h4 {
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 1rem;
}
[data-tenant="yesandcolorado"] .card .source {
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 1.25rem;
  overflow-wrap: break-word;
}
[data-tenant="yesandcolorado"] .card .source a { color: var(--ink); }
[data-tenant="yesandcolorado"] .card .source a:hover { color: var(--teal-link); }

[data-tenant="yesandcolorado"] .card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
  [data-tenant="yesandcolorado"] .card-grid { grid-template-columns: 1fr; }
}

/* ---------- Bar chart ---------- */
/* Title and rows share one column definition so the caption tracks the bar
   width at every breakpoint instead of spanning the label column too. */
[data-tenant="yesandcolorado"] .chart {
  --chart-cols: minmax(9rem, 11rem) 1fr;
  --chart-gap: 1rem;
  margin-top: 1.5rem;
}
[data-tenant="yesandcolorado"] .chart__title {
  display: grid;
  grid-template-columns: var(--chart-cols);
  gap: var(--chart-gap);
  font-style: italic;
  font-size: 0.95rem;
  text-align: left;
  margin-bottom: 0.5rem;
}
[data-tenant="yesandcolorado"] .chart__title::before { content: ''; }
[data-tenant="yesandcolorado"] .chart__row {
  display: grid;
  grid-template-columns: var(--chart-cols);
  align-items: center;
  gap: var(--chart-gap);
  margin-bottom: 1.1rem;
}
[data-tenant="yesandcolorado"] .chart__label { font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
[data-tenant="yesandcolorado"] .chart__track { background: var(--track); height: 3.2rem; }
/* Fixed left inset rather than centering — centering made the gap a function of bar
   length, so short bars crushed their value. min-width fits inset + value + point. */
[data-tenant="yesandcolorado"] .chart__fill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: var(--target);
  min-width: 6rem;
  background: var(--fill);
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%);
  padding-left: 1.25rem;
  padding-right: 0.9rem;
}
[data-tenant="yesandcolorado"] .chart__value { font-size: 1.12rem; font-weight: 800; }
@media (max-width: 560px) {
  [data-tenant="yesandcolorado"] .chart { --chart-cols: 1fr; --chart-gap: 0.3rem; }
  [data-tenant="yesandcolorado"] .chart__title::before { display: none; }
}

/* ---------- Workforce table ---------- */
[data-tenant="yesandcolorado"] .table-note { font-weight: 800; font-size: 1.1rem; text-align: center; margin: 1.5rem 0 1rem; }
[data-tenant="yesandcolorado"] .table-scroll { overflow-x: auto; }
[data-tenant="yesandcolorado"] .wf-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 29rem;
  font-size: 0.82rem;
  line-height: 1.3;
}
/* Grid lines take the card background so they read as gaps, not rules. */
[data-tenant="yesandcolorado"] .wf-table th, [data-tenant="yesandcolorado"] .wf-table td { border: 2px solid var(--gray-light); padding: 0.55rem 0.35rem; text-align: center; }
[data-tenant="yesandcolorado"] .wf-table thead th { font-weight: 700; vertical-align: middle; }
/* Numerals sit below the 18.66px bold large-text floor, so they need 4.5:1 rather than 3:1.
   --ink only reaches 3.34:1 on coral; this is the lightest neutral that clears 4.5:1 there. */
[data-tenant="yesandcolorado"] .wf-table tbody th, [data-tenant="yesandcolorado"] .wf-table tbody td, [data-tenant="yesandcolorado"] .chart__value { color: #2c2c2c; }
[data-tenant="yesandcolorado"] .wf-table thead th:nth-child(even) { background: var(--gray-dark); color: #fff; }
[data-tenant="yesandcolorado"] .wf-table thead th:nth-child(odd) { background: var(--gray-chip); }
[data-tenant="yesandcolorado"] .wf-table thead th.wf-corner { background: transparent; border: 0; }
[data-tenant="yesandcolorado"] .wf-table tbody th { font-size: 1.02rem; font-weight: 700; }
[data-tenant="yesandcolorado"] .wf-table tbody td { font-size: 1.08rem; font-weight: 800; }
[data-tenant="yesandcolorado"] .wf-row--fall th { background: var(--teal-dark); }
[data-tenant="yesandcolorado"] .wf-row--fall td:nth-of-type(odd) { background: var(--teal-cell); }
[data-tenant="yesandcolorado"] .wf-row--fall td:nth-of-type(even) { background: var(--teal-dark); }
[data-tenant="yesandcolorado"] .wf-row--spring th { background: var(--coral-light); }
[data-tenant="yesandcolorado"] .wf-row--spring td:nth-of-type(odd) { background: var(--coral); }
[data-tenant="yesandcolorado"] .wf-row--spring td:nth-of-type(even) { background: var(--coral-light); }

/* ---------- Calendar stat card ---------- */
[data-tenant="yesandcolorado"] .num {
  display: inline-block;
  font-family: var(--font-slab);
  font-size: var(--num-size, 2.2em);
  font-weight: 800;
  line-height: 1;
  vertical-align: -0.08em;
}

[data-tenant="yesandcolorado"] .calendar { width: min(24rem, 100%); margin-inline: auto; }
[data-tenant="yesandcolorado"] .calendar__header {
  position: relative;
  background: var(--teal-dark);
  color: #fff;
  font-family: var(--font-slab);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-weight: 800;
  text-align: center;
  padding: 0.9rem 1rem;
  border-radius: 10px 10px 0 0;
}
[data-tenant="yesandcolorado"] .calendar__header::before, [data-tenant="yesandcolorado"] .calendar__header::after {
  content: '';
  position: absolute;
  top: -1.05rem;
  width: 1.35rem;
  height: 2rem;
  border: 0.55rem solid var(--teal-dark);
  border-radius: 0.7rem;
}
[data-tenant="yesandcolorado"] .calendar__header::before { left: 18%; }
[data-tenant="yesandcolorado"] .calendar__header::after { right: 18%; }
[data-tenant="yesandcolorado"] .calendar__body {
  --num-size: 2.6em;
  background: var(--teal-pale);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 0 0 10px 10px;
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.5;
}
/* Numerals darkened from the comp (#30a1b0 / #ed6a58), which measure 2.18:1 and
   2.19:1 on --teal-pale — below the 3:1 WCAG AA floor for large text. These
   reach 3.56:1 and 3.30:1. Reviewed and kept deliberately; don't "restore" the
   comp values without also lightening the panel behind them. */
[data-tenant="yesandcolorado"] .calendar__body .num--teal { color: #1e7a87; }
[data-tenant="yesandcolorado"] .calendar__body .num--coral { color: #c94a37; }

/* ---------- Regional collaboration ---------- */
[data-tenant="yesandcolorado"] .stat-line {
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  margin: 1.5rem 0;
}
[data-tenant="yesandcolorado"] .chevrons { list-style: none; }
[data-tenant="yesandcolorado"] .chevrons li {
  position: relative;
  z-index: calc(8 - var(--i));
  background: var(--bg);
  text-align: center;
  font-size: 1.17rem;
  font-weight: 700;
  padding: 0.85rem 1rem;
}
/* Point depth stays under the next row's 0.85rem padding-top so it never
   reaches the copy, including where labels wrap at narrow widths. */
[data-tenant="yesandcolorado"] .chevrons li::after {
  content: '';
  position: absolute;
  bottom: -0.8rem;
  border-left: 2.6rem solid transparent;
  border-right: 2.6rem solid transparent;
  border-top: 0.9rem solid var(--bg);
}
/* Anchored from the right edge, mirroring the left-hand point, so a fixed-width
   chevron can't overhang the color band as rows narrow (left: 68% did under ~260px). */
[data-tenant="yesandcolorado"] .chevrons li:nth-child(odd)::after { right: 16%; }
[data-tenant="yesandcolorado"] .chevrons li:nth-child(even)::after { left: 16%; }
[data-tenant="yesandcolorado"] .chevrons li:last-child::after { content: none; }

/* ---------- Closing band / train ---------- */
[data-tenant="yesandcolorado"] .band--closing { padding-bottom: 0; }
[data-tenant="yesandcolorado"] .band--closing .closing-copy { max-width: 62rem; margin-inline: auto; }
[data-tenant="yesandcolorado"] .band--closing .lede { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
/* Train is oversized inside a clipped track so it can travel without exposing a gap.
   Travel = 20% of the track width, so 120% width pairs with a -16.667% self-relative shift. */
[data-tenant="yesandcolorado"] .train-track { overflow: hidden; margin-top: clamp(2rem, 4vw, 3rem); }
[data-tenant="yesandcolorado"] .train { width: 120%; max-width: none; }
html.js [data-tenant="yesandcolorado"] .train {
  transform: translate3d(calc(var(--train-p, 0) * -16.667%), 0, 0);
  will-change: transform;
}

/* ---------- Coral banner ---------- */
[data-tenant="yesandcolorado"] .banner-quote {
  font-family: var(--font-slab);
  font-size: clamp(1.75rem, 1.1rem + 2.9vw, 3.2rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  max-width: 60rem;
  margin-inline: auto;
}

/* ---------- Footer ---------- */
[data-tenant="yesandcolorado"] .footer { background: var(--gray-light); text-align: center; padding-block: clamp(2rem, 4vw, 3rem); }
[data-tenant="yesandcolorado"] .footer p { margin-bottom: 1rem; }
[data-tenant="yesandcolorado"] .footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; }
[data-tenant="yesandcolorado"] .footer a { color: var(--ink); font-weight: 700; }
[data-tenant="yesandcolorado"] .footer a:hover { color: var(--teal-link); }

/* ---------- Arrow button (three parts + study links) ---------- */
/* Slim sibling of .cta: a solid bar with a lighter, notched arrow tip. Teal is
   --teal-link rather than the comp's #30a1b0, which gives white text only 3:1. */
[data-tenant="yesandcolorado"] .btn-arrow {
  --tip: 1.6rem;
  --bg: var(--teal-link);
  --bg-tip: var(--teal-dark);
  position: relative;
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 0.6rem calc(var(--tip) + 0.75rem) 0.6rem 1rem;
  background: linear-gradient(to right, var(--bg) calc(100% - var(--tip)), transparent 0);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
[data-tenant="yesandcolorado"] .btn-arrow::after {
  content: '';
  position: absolute; top: 0; bottom: 0; right: 0; width: var(--tip);
  background: var(--bg-tip);
  clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%);
}
[data-tenant="yesandcolorado"] .btn-arrow--dark { --bg: var(--gray-dark); --bg-tip: #6d6d70; }
@media (prefers-reduced-motion: no-preference) {
  [data-tenant="yesandcolorado"] .btn-arrow { transition: filter 150ms ease; }
}
[data-tenant="yesandcolorado"] .btn-arrow:hover { filter: brightness(1.12); }

/* ---------- Three parts ---------- */
[data-tenant="yesandcolorado"] .parts-heading {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  max-width: 52rem;
  margin: 0 auto clamp(1.25rem, 3vw, 1.75rem);
}
[data-tenant="yesandcolorado"] .parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  padding-top: 1.25rem;
}
[data-tenant="yesandcolorado"] .part { display: flex; flex-direction: column; padding-inline: clamp(0.75rem, 2vw, 1.25rem); }
[data-tenant="yesandcolorado"] .part + .part { border-left: 1px solid var(--ink); }
/* Coral darkened from the comp's #ed6a58 (2.06:1 on the gray band) to clear 3:1 as large bold text. */
[data-tenant="yesandcolorado"] .part__title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  color: #b5412e;
}
[data-tenant="yesandcolorado"] .part p { font-size: 0.95rem; line-height: 1.5; margin: 0.35rem 0 1.1rem; }
@media (max-width: 860px) {
  [data-tenant="yesandcolorado"] .parts { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  [data-tenant="yesandcolorado"] .part { padding-inline: 0; }
  [data-tenant="yesandcolorado"] .part + .part { border-left: 0; border-top: 1px solid var(--rule-line); padding-top: 1.5rem; }
}

/* ---------- Research: three study columns ---------- */
[data-tenant="yesandcolorado"] .research-heading { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.6rem); text-align: center; }
[data-tenant="yesandcolorado"] .research-sub {
  text-align: center;
  padding: 0.25rem 0 1rem;
  border-bottom: 1px solid var(--ink);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
[data-tenant="yesandcolorado"] .studies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-tenant="yesandcolorado"] .studies__col {
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 4vw, 3rem);
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}
[data-tenant="yesandcolorado"] .studies__col:first-child { padding-left: 0; }
[data-tenant="yesandcolorado"] .studies__col:last-child { padding-right: 0; }
[data-tenant="yesandcolorado"] .studies__col + .studies__col { border-left: 1px solid var(--ink); }
[data-tenant="yesandcolorado"] .study { display: flex; flex-direction: column; }
[data-tenant="yesandcolorado"] .study__title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--teal-link);
  margin-bottom: 0.4rem;
}
[data-tenant="yesandcolorado"] .study__num { display: block; font-size: 1.6rem; line-height: 1.1; }
[data-tenant="yesandcolorado"] .study > p { font-size: 0.98rem; line-height: 1.55; margin-bottom: 1rem; }
[data-tenant="yesandcolorado"] .study .btn-arrow { margin-top: 0; }

/* The landing page's charts, unchanged but scaled down to fit a column. */
[data-tenant="yesandcolorado"] .study__chart { background: var(--gray-light); padding: 1rem; margin-bottom: 1rem; }
[data-tenant="yesandcolorado"] .study__title + p + .study__chart { margin-top: 0; }
[data-tenant="yesandcolorado"] .study__chart h4 {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.5rem;
}
[data-tenant="yesandcolorado"] .study__chart p { font-size: 0.85rem; line-height: 1.45; }
[data-tenant="yesandcolorado"] .study__chart .source { font-size: 0.75rem; font-style: italic; margin-top: 0.75rem; overflow-wrap: anywhere; }
[data-tenant="yesandcolorado"] .study__chart .source a { color: var(--ink); }
[data-tenant="yesandcolorado"] .study__chart .source a:hover { color: var(--teal-link); }
[data-tenant="yesandcolorado"] .study__chart .chart { --chart-cols: minmax(5.5rem, 7rem) 1fr; --chart-gap: 0.6rem; margin-top: 0.9rem; }
[data-tenant="yesandcolorado"] .study__chart .chart__title { font-size: 0.8rem; }
[data-tenant="yesandcolorado"] .study__chart .chart__row { margin-bottom: 0.6rem; }
[data-tenant="yesandcolorado"] .study__chart .chart__label { font-size: 0.8rem; }
[data-tenant="yesandcolorado"] .study__chart .chart__track { height: 2.2rem; }
[data-tenant="yesandcolorado"] .study__chart .chart__fill { min-width: 4.6rem; padding-left: 0.75rem; }
[data-tenant="yesandcolorado"] .study__chart .chart__value { font-size: 0.95rem; }
[data-tenant="yesandcolorado"] .study__chart .table-note { font-size: 0.85rem; margin: 0.75rem 0 0.5rem; }
/* Fixed layout so all five columns fit the study column instead of scrolling. */
[data-tenant="yesandcolorado"] .study__chart .wf-table { min-width: 0; table-layout: fixed; font-size: 0.56rem; hyphens: auto; }
[data-tenant="yesandcolorado"] .study__chart .wf-table th, [data-tenant="yesandcolorado"] .study__chart .wf-table td { padding: 0.35rem 0.1rem; }
[data-tenant="yesandcolorado"] .study__chart .wf-table .wf-corner { width: 2.6rem; }
[data-tenant="yesandcolorado"] .study__chart .wf-table tbody th { font-size: 0.75rem; }
[data-tenant="yesandcolorado"] .study__chart .wf-table tbody td { font-size: 0.9rem; }
[data-tenant="yesandcolorado"] .study__chart .calendar { width: min(17rem, 100%); margin-top: 0.9rem; }
[data-tenant="yesandcolorado"] .study__chart .calendar__header { font-size: 1.35rem; padding: 0.55rem 1rem; }
[data-tenant="yesandcolorado"] .study__chart .calendar__header::before, [data-tenant="yesandcolorado"] .study__chart .calendar__header::after { top: -0.8rem; width: 1rem; height: 1.5rem; border-width: 0.4rem; }
[data-tenant="yesandcolorado"] .study__chart .calendar__body { --num-size: 2.3em; font-size: 0.95rem; padding: 1rem 1.25rem; }
[data-tenant="yesandcolorado"] .study__chart .stat-line { font-size: 1.05rem; margin: 0 0 0.75rem; }
[data-tenant="yesandcolorado"] .study__chart .chevrons li { font-size: 0.85rem; padding: 0.5rem 0.75rem; }
[data-tenant="yesandcolorado"] .study__chart .chevrons li::after { bottom: -0.45rem; border-left-width: 1.6rem; border-right-width: 1.6rem; border-top-width: 0.5rem; }

/* Rotating quote panel: every .quote shares one grid cell, so the panel sizes to
   the tallest and a swap never shifts the layout. The rotation script only
   engages once there is a second quote. */
[data-tenant="yesandcolorado"] .quotes { display: grid; background: var(--coral); color: #fff; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
[data-tenant="yesandcolorado"] .quotes::before {
  content: '\201C';
  grid-area: 1 / 1;
  font-family: var(--font-slab);
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 0.75;
}
[data-tenant="yesandcolorado"] .quote { grid-area: 1 / 1; padding-top: 3.5rem; opacity: 0; visibility: hidden; }
[data-tenant="yesandcolorado"] .quote.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  [data-tenant="yesandcolorado"] .quote { transition: opacity 600ms ease, visibility 600ms ease; }
}
/* 1.2rem bold clears the 18.66px large-text floor, where white on coral (3.09:1) passes. */
[data-tenant="yesandcolorado"] .quote blockquote p { font-size: 1.2rem; font-weight: 800; line-height: 1.45; text-transform: uppercase; }
[data-tenant="yesandcolorado"] .quote figcaption { margin-top: 1rem; font-size: 1.17rem; font-style: italic; font-weight: 700; line-height: 1.45; }

@media (max-width: 960px) {
  [data-tenant="yesandcolorado"] .studies { grid-template-columns: minmax(0, 1fr); }
  [data-tenant="yesandcolorado"] .studies__col { padding-inline: 0; }
  [data-tenant="yesandcolorado"] .studies__col + .studies__col { border-left: 0; margin-top: clamp(2.25rem, 4vw, 3rem); }
  [data-tenant="yesandcolorado"] .study__chart .wf-table { font-size: 0.68rem; }
}

/* ---------- Closing CTA ---------- */
/* train.png carries a coral rail (rows 124-160 of 160) that used to run into the
   coral banner. A white band follows the train now, so crop the track above it:
   the image renders at 120% of the track width, 124 rows -> 2000 / (124 * 1.2). */
[data-tenant="yesandcolorado"] .band--closing .train-track { aspect-ratio: 2000 / 148.8; }
[data-tenant="yesandcolorado"] .band--start { text-align: center; }
[data-tenant="yesandcolorado"] .start-heading { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
[data-tenant="yesandcolorado"] .start-sub { font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; margin-top: 0.5rem; }
[data-tenant="yesandcolorado"] .band--start .cta { margin-bottom: 0; }

/* Launch comp's closing banner color. White on it is 1.92:1 — below AA even as
   large text (ink #414042 would be 5.36:1); kept white to match the comp pending review. */
[data-tenant="yesandcolorado"] .band--seafoam { background: #74cabd; color: #fff; }

/* ---------- Scroll animations (scoped to html.js so content never hides without JS) ----------
   data-animate          → element fades/slides in when it enters the viewport
   data-animate="trigger" → element is only an observer hook; its children animate instead */
html.js [data-tenant="yesandcolorado"] .yac-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}
html.js [data-tenant="yesandcolorado"] :is(.yac-animate, .yac-animate-trigger).is-visible { opacity: 1; transform: none; }

html.js [data-tenant="yesandcolorado"] .chart__fill { width: 0; transition: width 900ms cubic-bezier(0.33, 1, 0.68, 1) 150ms; }
html.js [data-tenant="yesandcolorado"] .is-visible .chart__fill { width: var(--target); }

html.js [data-tenant="yesandcolorado"] .chevrons:is(.yac-animate, .yac-animate-trigger) li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 450ms ease, transform 450ms ease;
  transition-delay: calc((var(--i) - 1) * 70ms);
}
html.js [data-tenant="yesandcolorado"] .chevrons:is(.yac-animate, .yac-animate-trigger).is-visible li { opacity: 1; transform: none; }

html.js [data-tenant="yesandcolorado"] .card-grid > .card:nth-child(2) { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-tenant="yesandcolorado"] :is(.yac-animate, .yac-animate-trigger),
  html.js [data-tenant="yesandcolorado"] :is(.yac-animate, .yac-animate-trigger) li,
  html.js [data-tenant="yesandcolorado"] .train {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js [data-tenant="yesandcolorado"] .chart__fill { width: var(--target); transition: none; }
}


/* ===========================================================================
   Chapter pages (executive summaries) — yac_chapter_hero, yac_feature_card,
   yac_closing + the rich_text / quote / heading overrides.
   Ported from denversouth-microsite-static/standalone/yes-and-colorado/assets/
   exec-summary.css. Every rule is scoped to pages with a chapter hero
   (:has(.topic-hero)), so nothing here can reach the hub.
   ======================================================================== */

[data-tenant="yesandcolorado"] {
  --coral-ink: #c94a37;      /* 4.65:1 on white */
  --seafoam-pale: #dcece9;
}

/* Platform breadcrumb: chapter pages carry their own subnav. */
[data-tenant="yesandcolorado"] nav[aria-label="Breadcrumb"] { display: none; }

/* Chapter colour pair, set once by the hero's topic (NOTES.md accent registry). */
[data-tenant="yesandcolorado"]:has(.topic-hero) { --accent: var(--teal-dark); --accent-soft: var(--teal-pale); }
[data-tenant="yesandcolorado"]:has(.topic-hero--seafoam) { --accent: var(--seafoam); --accent-soft: var(--seafoam-pale); }

/* In the hand-built page the intro copy, CTA, pull quote, "What's Inside?" and
   the cards share one or two sections. As blocks each is its own band, so a
   run of light bands closes up into one: no padding between them, and the
   element spacing below stands in for the source's in-section margins. */
[data-tenant="yesandcolorado"]:has(.topic-hero) .yac-band:has(> :is(.band--intro, .band--cta, .band--quote, .band--heading, .band--card)):has(+ .yac-band > :is(.band--intro, .band--cta, .band--quote, .band--heading, .band--card)) > :is(.band--intro, .band--cta, .band--quote, .band--heading, .band--card) { padding-bottom: 0; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yac-band:has(> :is(.band--intro, .band--cta, .band--quote, .band--heading, .band--card)) + .yac-band > :is(.band--intro, .band--cta, .band--quote, .band--heading, .band--card) { padding-top: 0; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yac-band:has(> :is(.band--intro, .band--cta, .band--quote, .band--heading, .band--card)) + .yac-band > :is(.band--cta, .band--quote) > .container { padding-top: clamp(1.75rem, 4vw, 2.5rem); }
/* …except a pull quote ending the intro, which closes its section before
   "What's Inside?" opens the next: both keep their full padding. */
[data-tenant="yesandcolorado"]:has(.topic-hero) .yac-band:has(> .band--quote):has(+ .yac-band > .band--heading) > .band--quote { padding-bottom: clamp(2.75rem, 5.5vw, 4.5rem); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yac-band:has(> .band--quote) + .yac-band > .band--heading { padding-top: clamp(2.75rem, 5.5vw, 4.5rem); }
/* hr.rule between consecutive cards */
[data-tenant="yesandcolorado"]:has(.topic-hero) .yac-band:has(> .band--card) + .yac-band > .band--card > .container::before {
  content: "";
  display: block;
  border-top: 1px solid var(--rule-line);
  margin-block: clamp(2rem, 4vw, 3rem);
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .band--cta .cta { margin-block: 0; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yac-figure img { display: block; width: 100%; height: auto; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yac-figure .source { margin-top: 0.6rem; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .card__copy p + p { margin-top: 1rem; }
/* The source's `.card__body p + p` also spaces the "Inside, we…" line. */
[data-tenant="yesandcolorado"]:has(.topic-hero) .card__copy + .inside-line { margin-top: 1rem; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .card.card--visual-left .feature-split > .feature-split__visual { order: -1; }
@media (max-width: 860px) {
  [data-tenant="yesandcolorado"]:has(.topic-hero) .card.card--visual-left .feature-split > .feature-split__visual { order: 0; }
}

/* ---------- Subpage nav ----------
   The hub has no nav (it's a single scroll). Subpages need a way back up, and
   Amanda's comment asks for a chapter directory link, so this bar carries both. */
[data-tenant="yesandcolorado"]:has(.topic-hero) .subnav { background: var(--gray-dark); color: #fff; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .subnav .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .subnav a { color: #fff; text-decoration: none; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .subnav a:hover { text-decoration: underline; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .subnav__brand {
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .subnav__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .subnav__links a {
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

[data-tenant="yesandcolorado"]:has(.topic-hero) /* ---------- Topic hero ----------
   Flat accent band rather than a full-bleed photo: the hub's hero owns the
   photographic treatment,
[data-tenant="yesandcolorado"]:has(.topic-hero) and repeating it six times would flatten the
   hierarchy between hub and chapter. */
.topic-hero { background: var(--accent-soft); padding-block: clamp(2.25rem, 5vw, 3.75rem); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .topic-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  /* Generous gutter: the Yes/And lines run long, and a tight gap let them crowd
     the artwork's left edge. */
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .topic-hero__eyebrow {
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .topic-hero__title {
  font-family: var(--font-slab);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  line-height: 1.05;
  color: var(--gray-dark);
}
[data-tenant="yesandcolorado"]:has(.topic-hero) /* Square frame,
[data-tenant="yesandcolorado"]:has(.topic-hero) no radius — the artwork is cut-paper and rounding fights it.
   Height follows the art rather than the text column: cropping a cut-paper
   composition to fill a box lops the top off suns and rooflines. */
.topic-hero__art { align-self: center; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .topic-hero__art img { width: 100%; }
@media (max-width: 860px) {
  [data-tenant="yesandcolorado"]:has(.topic-hero) .topic-hero .container { grid-template-columns: minmax(0, 1fr); }
  [data-tenant="yesandcolorado"]:has(.topic-hero) .topic-hero__art { order: -1; }
}

[data-tenant="yesandcolorado"]:has(.topic-hero) /* ---------- "Yes. / And…" ----------
   The campaign's core device,
[data-tenant="yesandcolorado"]:has(.topic-hero) and the one structure both copy docs share: each
   summary opens and closes on a Yes/And pair. Setting the two halves in
   different weights and colors makes the turn visible at a glance. */
.yesand { max-width: 54rem; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yesand--center { margin-inline: auto; text-align: center; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .topic-hero .yesand { margin-top: clamp(1.25rem, 3vw, 2rem); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .band--dark .yesand--center { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yesand__line {
  font-family: var(--font-slab);
  font-weight: 700;
  /* The 1.17rem floor is deliberate, not a round number: at 18.7px bold this is
     still WCAG "large text", so the coral/teal keys only need 3:1 (they measure
     3.30:1 and 3.87:1 on the palest hero band). Drop below ~18.66px and the
     floor jumps to 4.5:1 and both keys fail — so shrink the top of this clamp,
     never the bottom, without re-darkening the keys to match. */
  font-size: clamp(1.17rem, 0.9rem + 0.7vw, 1.35rem);
  line-height: 1.35;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .yesand__line + .yesand__line { margin-top: 0.7rem; }
[data-tenant="yesandcolorado"]:has(.topic-hero) /* "Yes,
[data-tenant="yesandcolorado"]:has(.topic-hero) " is the concession,
[data-tenant="yesandcolorado"]:has(.topic-hero) so it sits back; "And" is the turn,
[data-tenant="yesandcolorado"]:has(.topic-hero) so it leads.
   The keys use the DARKENED coral and teal,
[data-tenant="yesandcolorado"]:has(.topic-hero) not the comp values: on the tinted
   hero band,
[data-tenant="yesandcolorado"]:has(.topic-hero) --coral measures 2.19:1 and --teal-dark 2.18:1,
[data-tenant="yesandcolorado"]:has(.topic-hero) both under the 3:1
   large-text floor. These reach 3.30:1 / 3.87:1 on the palest band. On
   --gray-dark the comp colors do clear 3:1,
[data-tenant="yesandcolorado"]:has(.topic-hero) so the dark band restores them. */
.yesand__key { font-weight: 800; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yesand__line--yes { color: #55555a; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yesand__line--yes .yesand__key { color: var(--coral-ink); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yesand__line--and .yesand__key { color: var(--teal-link); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .band--dark .yesand__line--yes { color: var(--gray-light); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .band--dark .yesand__line--yes .yesand__key { color: var(--coral); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .band--dark .yesand__line--and { color: #fff; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .band--dark .yesand__line--and .yesand__key { color: var(--teal-cell); }

[data-tenant="yesandcolorado"]:has(.topic-hero) /* ---------- Card feature split ----------
   Copy on one side,
[data-tenant="yesandcolorado"]:has(.topic-hero) the visual on the other,
[data-tenant="yesandcolorado"]:has(.topic-hero) sides alternating down the stack.
   Cheap zigzag rhythm so five stacked cards don't read as one grey column. */
.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  /* Top-aligned, not centred: the two columns are rarely the same height, and a
     short copy column centred against a tall chart reads as floating in dead
     space rather than as a deliberate pairing. */
  align-items: start;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .feature-split > * { min-width: 0; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yac-band:nth-child(even of :has(> .band--card)) .card:not(.card--visual-right) .feature-split > .feature-split__visual { order: -1; }
@media (max-width: 860px) {
  [data-tenant="yesandcolorado"]:has(.topic-hero) .feature-split { grid-template-columns: minmax(0, 1fr); }
  [data-tenant="yesandcolorado"]:has(.topic-hero) .yac-band:nth-child(even of :has(> .band--card)) .card:not(.card--visual-right) .feature-split > .feature-split__visual { order: 0; }
}

[data-tenant="yesandcolorado"]:has(.topic-hero) /* ---------- Pull quote ----------
   Amanda marks four of these across the two docs ("make this a pull quote").
   The left coral rule echoes the CTA wedge without competing with it. */
.pullquote {
  border-left: 0.5rem solid var(--coral);
  padding: 0.35rem 0 0.35rem 1.25rem;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .pullquote p {
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  line-height: 1.35;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .pullquote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Ink, not coral: at 0.9rem this is normal-size text needing 4.5:1, and
     --coral-ink manages only 3.10:1 on a --gray-light card. The left rule
     already supplies the coral. */
  color: var(--ink);
}

[data-tenant="yesandcolorado"]:has(.topic-hero) /* ---------- Icon list ----------
   For the bullets Amanda wants shown "as an icon/visual". Tiles rather than
   bullets: same information,
[data-tenant="yesandcolorado"]:has(.topic-hero) reads as a graphic in the card. Icon slots take
   Articulation's per-topic icons when they land; the geometric marks below are
   placeholders. */
.iconlist { list-style: none; display: grid; gap: 0.65rem; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .iconlist li {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  background: #fff;
  padding: 0.85rem 1rem;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .iconlist__icon {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  background: var(--tile, var(--accent));
  color: #fff;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .iconlist__icon svg { width: 1.6rem; height: 1.6rem; display: block; }

[data-tenant="yesandcolorado"]:has(.topic-hero) /* ---------- "Inside,
[data-tenant="yesandcolorado"]:has(.topic-hero) we…" line ----------
   Every H3 section in both docs ends on one of these. Making it a consistent
   element turns a repeated sentence into a recognisable signpost. */
.inside-line {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-line);
  font-weight: 700;
  font-size: 1.02rem;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) .inside-line::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-right: 0.6rem;
  vertical-align: 0.06em;
  border-block: 0.4rem solid transparent;
  border-left: 0.62rem solid var(--coral);
}

[data-tenant="yesandcolorado"]:has(.topic-hero) /* campaign.css defines this width on `.band--closing .closing-copy`,
[data-tenant="yesandcolorado"]:has(.topic-hero) but these
   subpages can't take `.band--closing` — it also zeroes padding-bottom for the
   hub's train graphic,
[data-tenant="yesandcolorado"]:has(.topic-hero) which they don't have. */
.closing-copy { max-width: 62rem; margin-inline: auto; }

[data-tenant="yesandcolorado"]:has(.topic-hero) /* ---------- Chapter CTA pair ----------
   Two arrow CTAs side by side at the foot: primary (this chapter) and the
   directory link Amanda asked about. .cta centres itself,
[data-tenant="yesandcolorado"]:has(.topic-hero) so the wrapper only
   has to handle the pairing. */
.cta-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(1rem, 3vw, 2.5rem);
}
[data-tenant="yesandcolorado"]:has(.topic-hero) /* .cta centres itself with `margin-inline: auto`,
[data-tenant="yesandcolorado"]:has(.topic-hero) which inside a flex row absorbs
   the free space and pushes the pair to opposite edges. The row centres them. */
.cta-pair .cta { margin-inline: 0; }
[data-tenant="yesandcolorado"]:has(.topic-hero) /* Secondary reads as the quieter of the two without inventing a new shape.
   Light-on-dark rather than a darker grey: .cta sets white text,
[data-tenant="yesandcolorado"]:has(.topic-hero) which measures
   only 2.85:1 on --gray-mid,
[data-tenant="yesandcolorado"]:has(.topic-hero) and a dark button would also vanish into the
   --band--dark it sits on. Ink on --gray-light is 6.88:1. */
.cta--ghost { background: var(--gray-light); color: var(--ink); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .cta--ghost::after { background: var(--gray-chip); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .cta--ghost .cta__action { color: var(--ink); }

[data-tenant="yesandcolorado"]:has(.topic-hero) /* A .cta that ends a band stacks its own bottom margin on top of the band's
   padding and the next band's,
[data-tenant="yesandcolorado"]:has(.topic-hero) leaving a visible hole. */
.band .container > .cta:last-child { margin-bottom: 0; }

[data-tenant="yesandcolorado"]:has(.topic-hero) /* ---------- Ranking rows ----------
   Rankings and percentages in the same card previously used two different
   treatments,
[data-tenant="yesandcolorado"]:has(.topic-hero) which read as two unrelated things. These put rankings in the
   bars' own label/value grid so the card is one system — but the chip is a
   FIXED width,
[data-tenant="yesandcolorado"]:has(.topic-hero) because a rank is a placing,
[data-tenant="yesandcolorado"]:has(.topic-hero) not a magnitude,
[data-tenant="yesandcolorado"]:has(.topic-hero) and nothing here
   should look proportional. (This is the honest half of Amanda's "four stat
   callouts" note: same visual family,
[data-tenant="yesandcolorado"]:has(.topic-hero) no fake bar lengths.) */
.chart__row--rank .chart__track { background: none; height: auto; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .rank-chip {
  display: inline-grid;
  place-items: center;
  min-width: 5.25rem;
  padding: 0.3rem 1rem;
  background: var(--gray-dark);
  color: #fff;
  font-family: var(--font-slab);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) /* A second group caption inside one .chart needs the space a first one doesn't. */
.chart__title:not(:first-child) { margin-top: 1.6rem; }

[data-tenant="yesandcolorado"]:has(.topic-hero) /* The global reset zeroes paragraph margins and the hub never stacks two <p> in
   one card,
[data-tenant="yesandcolorado"]:has(.topic-hero) so consecutive paragraphs ran together here. */
.card__body p + p { margin-top: 1rem; }

[data-tenant="yesandcolorado"]:has(.topic-hero) /* ---------- Inline source links ----------
   The copy docs hyperlink the data sources in running copy (9/30 request).
   Ink colour with a teal underline so they read as citations,
[data-tenant="yesandcolorado"]:has(.topic-hero) not CTAs;
   .card .source links keep their own campaign.css treatment. */
main p a,
[data-tenant="yesandcolorado"]:has(.topic-hero) .iconlist a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--teal-link);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
[data-tenant="yesandcolorado"]:has(.topic-hero) main p a:hover,
[data-tenant="yesandcolorado"]:has(.topic-hero) .iconlist a:hover { color: var(--teal-link); }

[data-tenant="yesandcolorado"]:has(.topic-hero) /* Opt a card out of the zigzag: keep the visual on the right. */
.card.card--visual-right .feature-split > .feature-split__visual { order: 0; }

[data-tenant="yesandcolorado"]:has(.topic-hero) /* ---------- Chapter header banner ----------
   Articulation's full-width chapter headers replace the side-column art. The
   banner sits flush at the top of the accent band; the live eyebrow,
[data-tenant="yesandcolorado"]:has(.topic-hero) H1 and
   Yes/And run full width beneath it. */
.topic-hero:has(.topic-hero__banner) { padding-top: 0; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .topic-hero__banner { margin: 0 0 clamp(1.75rem, 4vw, 3rem); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .topic-hero__banner img { display: block; width: 100%; height: auto; }
[data-tenant="yesandcolorado"]:has(.topic-hero) .topic-hero:has(.topic-hero__banner) .container { grid-template-columns: minmax(0, 1fr); }
[data-tenant="yesandcolorado"]:has(.topic-hero) .yac-card-cta { margin-top: 1.5rem; }