@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; }
}