:root {
  --bg: #080909;
  --bg-soft: #111314;
  --panel: rgba(20, 24, 25, 0.72);
  --panel-strong: rgba(26, 31, 33, 0.92);
  --panel-light: rgba(239, 235, 227, 0.06);
  --text: #f5f0e7;
  --text-soft: rgba(245, 240, 231, 0.72);
  --text-dim: rgba(245, 240, 231, 0.52);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --gold: #d8bf8c;
  --gold-soft: rgba(216, 191, 140, 0.18);
  --sage: #8eac9e;
  --slate: #7c8da5;
  --rose: #c4958a;
  --glow: radial-gradient(circle at top, rgba(216, 191, 140, 0.26), transparent 55%);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.24);
  --radius-xl: 36px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max-width: 1280px;
  --gutter: clamp(24px, 3.5vw, 56px);
  --section-pad: clamp(72px, 10vw, 140px);
  --hero-pad: clamp(88px, 12vw, 168px);
  --display: clamp(3.25rem, 7vw, 7rem);
  --headline: clamp(2rem, 4vw, 4rem);
  --title: clamp(1.35rem, 2.2vw, 2.2rem);
  --body-lg: clamp(1.05rem, 1.8vw, 1.35rem);
  --body: 1rem;
  --small: 0.9rem;
  --transition: 650ms cubic-bezier(0.2, 0.65, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
.cn-page {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(142, 172, 158, 0.12), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(124, 141, 165, 0.14), transparent 25%),
    linear-gradient(180deg, #0b0d0e 0%, #080909 100%);
  color: var(--text);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.55;
}

.cn-page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.cn-page::before,
.cn-page::after {
  content: '';
  position: fixed;
  inset: auto;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(16px);
  opacity: 0.56;
  z-index: 0;
  will-change: transform, opacity;
}

.cn-page::before {
  top: -8vw;
  right: -10vw;
  background: rgba(216, 191, 140, 0.08);
  animation: cnFloatA 20s ease-in-out infinite;
}

.cn-page::after {
  bottom: -12vw;
  left: -10vw;
  background: rgba(124, 141, 165, 0.08);
  animation: cnFloatB 24s ease-in-out infinite;
}

.cn-shell {
  position: relative;
  z-index: 1;
}

.cn-container {
  width: min(calc(100% - (var(--gutter) * 2)), var(--max-width));
  margin: 0 auto;
}

.cn-topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  backdrop-filter: blur(20px);
  background: rgba(8, 9, 9, 0.62);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cn-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
}

.cn-brand {
  display: grid;
  gap: 4px;
}

.cn-brand__eyebrow,
.cn-label,
.cn-meta,
.cn-nav a,
.cn-chip,
.cn-kpi__label,
.cn-step__index {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.cn-brand__name {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.cn-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 18px;
  align-items: center;
}

.cn-menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}

.cn-menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.cn-nav a {
  color: var(--text-soft);
  text-decoration: none;
  transition: color 180ms ease;
}

.cn-nav__group {
  position: relative;
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: -14px;
}

.cn-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-soft);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-family: inherit;
}

.cn-nav__trigger::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.cn-nav__submenu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  min-width: 240px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)),
    rgba(14, 16, 17, 0.96);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(22px);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  z-index: 20;
}

.cn-nav__group::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: 100%;
  height: 18px;
}

.cn-nav__submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.cn-nav__group.is-open .cn-nav__trigger::after,
.cn-nav__group:hover .cn-nav__trigger::after,
.cn-nav__group:focus-within .cn-nav__trigger::after {
  transform: translateY(1px) rotate(225deg);
}

.cn-nav__group.is-open .cn-nav__submenu,
.cn-nav__group:hover .cn-nav__submenu,
.cn-nav__group:focus-within .cn-nav__submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cn-nav a:hover,
.cn-nav a:focus-visible,
.cn-nav__trigger:hover,
.cn-nav__trigger:focus-visible,
.cn-nav__group:hover .cn-nav__trigger,
.cn-nav__group:focus-within .cn-nav__trigger {
  color: var(--text);
}

.cn-hero,
.cn-section,
.cn-chapter {
  position: relative;
  padding: var(--section-pad) 0;
}

.cn-hero {
  padding: var(--hero-pad) 0 calc(var(--hero-pad) * 0.92);
}

.cn-section + .cn-section,
.cn-chapter + .cn-chapter {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.cn-grid {
  display: grid;
  gap: 28px;
}

.cn-grid--2 {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.cn-grid--split {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.cn-grid--split-backcasting-method {
  grid-template-columns: minmax(0, 1.34fr) minmax(260px, 0.66fr);
}

/* Slightly wider metric panels for Wayfair case study */
.cn-case--wayfair .cn-grid--2 {
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
}

/* Wayhome row: make image and KPIs 50/50 */
.cn-grid--wayhome-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Reversed split: narrower first column, wider second */
.cn-grid--split-reverse {
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
}

.cn-grid--split-about-bio {
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
}

.cn-grid--split-about-model {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.cn-grid--split-case-arc {
  grid-template-columns: minmax(360px, 1.18fr) minmax(0, 0.82fr);
  align-items: stretch;
}

.cn-grid--split-learnings {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: stretch;
}

.cn-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cn-grid--equal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cn-card__status-icon {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.86rem;
  line-height: 1;
  pointer-events: none;
}

.cn-eyebrow-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.cn-eyebrow-with-icon .cn-eyebrow {
  margin: 0;
}

.cn-card--banned-phrases .cn-eyebrow-with-icon {
  margin-bottom: 30px;
}

.cn-card--right-idea-copy {
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 14px;
}

.cn-card--right-idea-copy .cn-title {
  margin-bottom: 4px;
}

.cn-card--right-idea-copy .cn-list {
  margin-top: 2px;
  gap: 14px;
}

.cn-card--right-idea-copy .cn-list li {
  line-height: 1.65;
}

.cn-card--right-idea-copy .cn-list {
  margin-bottom: 22px;
}

.cn-card__status-icon--do {
  color: #b9d8c9;
  border-color: rgba(142, 172, 158, 0.45);
  background: rgba(142, 172, 158, 0.14);
}

.cn-card__status-icon--dont {
  color: #e3a69c;
  border-color: rgba(196, 149, 138, 0.45);
  background: rgba(196, 149, 138, 0.15);
}

.cn-card__status-icon--warn {
  color: #f0d7a4;
  border-color: rgba(216, 191, 140, 0.5);
  background: rgba(216, 191, 140, 0.18);
}

.cn-card__status-icon--expletive {
  color: #d7b6e8;
  border-color: rgba(172, 131, 196, 0.5);
  background: rgba(172, 131, 196, 0.2);
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  font-weight: 700;
}

.cn-copy {
  max-width: 760px;
}

.cn-eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.74rem;
}

.cn-display,
.cn-headline,
.cn-title,
.cn-stat__value,
.cn-kpi__value,
.cn-quote__text {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 100%;
}

.cn-display {
  font-size: var(--display);
  max-width: 10ch;
  line-height: 0.96;
}

.cn-headline {
  font-size: var(--headline);
  max-width: 14ch;
  line-height: 1.02;
}

.cn-title {
  font-size: var(--title);
  line-height: 1.2;
  margin-bottom: 16px;
}

.cn-subtitle {
  margin: 20px 0 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.12rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--text-soft);
}

.cn-card .cn-title,
.cn-kpi-panel .cn-title,
.cn-process .cn-title,
.cn-ratio .cn-title,
.cn-diagram .cn-title,
.cn-tableau .cn-title,
.cn-pullout .cn-title,
.cn-method .cn-title {
  max-width: none;
}

.cn-lead {
  margin: 24px 0 0;
  max-width: 62ch;
  font-size: var(--body-lg);
  color: var(--text-soft);
}

.cn-body,
.cn-list,
.cn-note {
  color: var(--text-soft);
}

.cn-body {
  margin: 0;
  font-size: var(--body);
}

.cn-lead a,
.cn-body a,
.cn-note a,
.cn-list a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 191, 140, 0.3);
  transition:
    color 180ms ease,
    border-color 180ms ease;
}

.cn-lead a:hover,
.cn-lead a:focus-visible,
.cn-body a:hover,
.cn-body a:focus-visible,
.cn-note a:hover,
.cn-note a:focus-visible,
.cn-list a:hover,
.cn-list a:focus-visible {
  color: #f0d7a4;
  border-color: rgba(240, 215, 164, 0.68);
}

.cn-body + .cn-body {
  margin-top: 16px;
}

.cn-stack {
  display: grid;
  gap: 18px;
}

.cn-stat-band,
.cn-card,
.cn-media,
.cn-quote,
.cn-timeline,
.cn-process,
.cn-kpi-panel,
.cn-method,
.cn-ratio,
.cn-diagram,
.cn-tableau,
.cn-marquee,
.cn-pullout {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
    rgba(14, 16, 17, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.cn-card,
.cn-media,
.cn-quote,
.cn-process,
.cn-kpi-panel,
.cn-method,
.cn-ratio,
.cn-diagram,
.cn-tableau,
.cn-pullout {
  padding: clamp(22px, 3vw, 34px);
}

.cn-card::before,
.cn-media::before,
.cn-quote::before,
.cn-process::before,
.cn-kpi-panel::before,
.cn-method::before,
.cn-ratio::before,
.cn-diagram::before,
.cn-tableau::before,
.cn-pullout::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 191, 140, 0.65), transparent);
}

.cn-stat-band {
  padding: 0;
}

.cn-stat-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Keep all five objective KPIs on one line on wide screens */
.cn-stat-band--objective .cn-stat-band__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cn-stat {
  padding: 30px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-stat:last-child {
  border-right: 0;
}

.cn-stat__value {
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  margin-bottom: 10px;
}

.cn-stat__label {
  font-size: 0.88rem;
  color: var(--text-soft);
}

.cn-chip-row,
.cn-link-row,
.cn-kpi-grid,
.cn-card-grid,
.cn-method-grid,
.cn-artifact-grid,
.cn-story-grid {
  display: grid;
  gap: 18px;
}

.cn-chip-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.cn-chip {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 96px;
  padding: 16px 16px 15px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(9, 13, 20, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
}

.cn-chip__label {
  color: var(--text-soft);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cn-chip__value {
  color: var(--text-main);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-transform: none;
}

.cn-home-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.cn-home-timeline__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  min-height: 92px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
  color: inherit;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.cn-home-timeline__item:hover,
.cn-home-timeline__item:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(216, 191, 140, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.028);
}

.cn-home-timeline__item.is-static {
  opacity: 0.7;
}

.cn-home-timeline__year {
  display: block;
  width: 100%;
  min-height: 1.2em;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cn-home-timeline__role {
  display: block;
  width: 100%;
  margin-top: 12px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.cn-home-timeline__meta {
  display: block;
  width: 100%;
  margin-top: 7px;
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
}

.cn-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* About page testimonials: 3-up grid on desktop */
.cn-card-grid--testimonials {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cn-card--testimonial .cn-body:first-of-type {
  font-size: 0.98rem;
  line-height: 1.7;
}

.cn-card--testimonial .cn-muted {
  margin-top: 10px;
  font-size: 0.86rem;
}

/* Leadership block: four small cards under a single story */
.cn-card-grid--leadership {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cn-card--leadership-icon {
  display: grid;
  align-content: start;
}

.cn-card--leadership-icon .cn-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 32px;
  height: 32px;
  color: var(--gold);
  margin-bottom: 20px;
}

.cn-card--leadership-icon .cn-card__icon svg {
  width: 100%;
  height: 100%;
}

.cn-card h3,
.cn-method h3,
.cn-kpi-panel h3,
.cn-media h3,
.cn-pullout h3 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.cn-contact-card {
  display: grid;
  gap: 0;
}

.cn-contact-card__intro {
  display: grid;
  gap: 6px;
}

.cn-contact-card__name {
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cn-home .cn-contact-card__name {
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.cn-contact-card__role {
  color: var(--text-soft);
  font-size: 0.98rem;
}

.cn-contact-card__list {
  display: grid;
}

.cn-contact-card__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cn-contact-card__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cn-contact-card__label {
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cn-contact-card__value {
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 180ms ease;
}

.cn-contact-card__value:hover,
.cn-contact-card__value:focus-visible {
  color: var(--gold);
}

.cn-contact-card__value.is-static {
  color: var(--text-soft);
}

.cn-about-connect-card {
  grid-column: 1 / -1;
}

@media (min-width: 961px) {
  .cn-about-connect-card {
    grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
    column-gap: clamp(24px, 4vw, 44px);
    align-items: start;
  }

  .cn-about-connect-card > .cn-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 14px;
  }

  .cn-about-connect-card > br,
  .cn-about-connect-card > .cn-divider {
    display: none;
  }

  .cn-about-connect-card > .cn-contact-card__intro {
    align-content: start;
  }

  .cn-about-connect-card .cn-contact-card__name {
    color: var(--text);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.6rem, 2.1vw, 2.05rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }

  .cn-about-connect-card .cn-contact-card__role {
    margin-top: 6px;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--text-soft);
  }

  .cn-about-connect-card > .cn-contact-card__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }

  .cn-about-connect-card .cn-contact-card__row {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
  }

  .cn-about-connect-card .cn-contact-card__row:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
  }
}

.cn-card p,
.cn-method p,
.cn-kpi-panel p,
.cn-media p,
.cn-pullout p,
.cn-list li {
  margin: 0;
  color: var(--text-soft);
}

/* Extra breathing room between eyebrows and titles inside panels/cards */
.cn-kpi-panel > .cn-eyebrow,
.cn-card > .cn-eyebrow {
  margin-bottom: 10px;
}

.cn-card p + p,
.cn-method p + p,
.cn-kpi-panel p + p {
  margin-top: 12px;
}

.cn-link-card {
  display: grid;
  gap: 18px;
  min-height: 250px;
  text-decoration: none;
  color: inherit;
}

/* Generic image slot for cards (e.g. Results so far visual) */
.cn-card__art {
  margin-top: 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  aspect-ratio: 16 / 9;
}

/* Image containers that can open in PhotoSwipe */
.cn-card__art,
.cn-wide-art,
.cn-backcasting-image-slot,
.cn-editorial__art,
.cn-section-label__art,
.cn-about-visual-card__art,
.cn-case-visual-card__art,
.cn-innovation-row__art {
  cursor: zoom-in;
}

/* Decorative / contextual art: no lightbox affordance */
[data-no-lightbox].cn-card__art,
[data-no-lightbox].cn-wide-art,
[data-no-lightbox].cn-backcasting-image-slot,
[data-no-lightbox].cn-editorial__art,
[data-no-lightbox].cn-section-label__art,
[data-no-lightbox].cn-about-visual-card__art,
[data-no-lightbox].cn-case-visual-card__art,
[data-no-lightbox].cn-innovation-row__art {
  cursor: default;
}

/* Walmart WLS results image handoff: set via CSS so HTML stays clean */
.cn-case--walmart .cn-card__art--wls-results {
  background-image: url('./images/walmart-wls-results.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 400 / 285;
}

/* Wayfair Service Marketplace image handoff: set your image URL below */
.cn-case--wayfair .cn-card__art--wayfair-services {
  background-image: url('./images/wayfair-service-marketplace.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 400 / 190;
}

/* Wayhome landing image handoff */
.cn-case--wayfair .cn-card__art--wayhome-landing {
  background-image: url('./images/wayhome.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Wayhome services image handoff */
.cn-case--wayfair .cn-card__art--wayhome-services {
  background-image: url('./images/wayhome-process.png');
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Wayfair AllModern Photo image card */
.cn-case--wayfair .cn-card__art--wayfair-flooring {
  background-image: url('./images/wayfair-store.jpg');
  background-size: 101%;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 0;
}

.cn-link-card:hover,
.cn-link-card:focus-visible {
  transform: translateY(-4px);
  transition: transform 220ms ease;
}

.cn-link-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--text-dim);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cn-link-card > div {
  margin-top: 0;
}

.cn-link-card__title {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
}

.cn-link-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-size: 0.9rem;
}

.cn-media {
  min-height: 300px;
}

.cn-media--hero {
  position: relative;
  width: min(100%, 564px);
  aspect-ratio: 1 / 2;
  min-height: 0;
  display: grid;
  align-content: end;
  justify-self: end;
  margin-top: 4px;
}

.cn-media--interactive {
  cursor: pointer;
  outline: none;
}

.cn-media--interactive .cn-media__backdrop,
.cn-media--interactive .cn-media__frame,
.cn-media--interactive .cn-media__overlay {
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.2, 0.65, 0.2, 1),
    box-shadow 320ms ease,
    border-color 240ms ease,
    filter 320ms ease;
}

.cn-media--interactive:focus-visible .cn-media__frame {
  border-color: rgba(216, 191, 140, 0.34);
  box-shadow: 0 0 0 1px rgba(216, 191, 140, 0.18);
}

/* Image handoff:
   1. For full-bleed hero/background imagery, add a background-image to `.cn-media__backdrop`
      or target a page-specific selector like `.cn-home .cn-media__backdrop`.
   2. For a framed product shot, portrait, PDF crop, or mockup, replace the placeholder treatment
      on `.cn-media__mock` with a background-image, or swap the empty div for an <img> in the HTML. */
.cn-media__backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(216, 191, 140, 0.16), transparent 40%),
    linear-gradient(210deg, rgba(124, 141, 165, 0.18), transparent 40%),
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 20%);
  opacity: 0.9;
}

.cn-media__frame {
  position: absolute;
  inset: 22px;
  border-radius: calc(var(--radius-lg) - 8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%),
    rgba(255, 255, 255, 0.03);
}

.cn-media__overlay {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 38px;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(216, 191, 140, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(8, 9, 9, 0.94), rgba(13, 15, 16, 0.84)),
    rgba(8, 9, 9, 0.88);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  pointer-events: none;
}

.cn-media__overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 191, 140, 0.82), transparent);
}

.cn-media__overlay-title {
  margin: 0;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cn-media__overlay-copy {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 40ch; /* weird */
}

.cn-media__overlay-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.cn-media__overlay-link:hover,
.cn-media__overlay-link:focus-visible {
  color: #f0d7a4;
}

.cn-media--interactive.is-active .cn-media__overlay {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.cn-media--interactive.is-active .cn-media__frame {
  border-color: rgba(216, 191, 140, 0.22);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.22);
}

.cn-media--interactive.is-active .cn-media__backdrop {
  filter: saturate(1.02) contrast(1.04) brightness(0.96);
}

.cn-media__mock {
  position: absolute;
  right: 38px;
  bottom: 38px;
  width: min(360px, 55%);
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 16%),
    linear-gradient(160deg, rgba(216, 191, 140, 0.18), rgba(124, 141, 165, 0.06) 60%, rgba(255, 255, 255, 0.02));
  box-shadow: var(--shadow);
}

.cn-media__mock::before,
.cn-media__mock::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.cn-media__mock::before {
  top: 24px;
  height: 10px;
}

.cn-media__mock::after {
  top: 46px;
  height: 2px;
}

/* Page-specific image stubs:
   Paste real asset URLs into the selectors below as you replace placeholders.
   Keep the shared gradient layers if you want the same cinematic color treatment,
   or overwrite them completely with your own background stack.

   Example:
   .cn-home .cn-media__backdrop {
     background-image:
       linear-gradient(135deg, rgba(216, 191, 140, 0.12), transparent 42%),
       url('https://your-image-url-here');
     background-size: cover;
     background-position: center;
   }
*/

/* Home hero background image */
.cn-home .cn-media__backdrop {
  background-image: url('./images/multipass-app-1.png');
  background-size: cover;
  background-position: center;
}

.cn-media--single-hero .cn-media__frame {
  inset: 18px;
  border-radius: 30px;
}

.cn-media--single-hero .cn-media__mock {
  display: none;
}

/* Home hero now uses a single tall artifact instead of a backdrop + inner mock pairing. */
.cn-home .cn-media--single-hero .cn-media__backdrop {
  filter: saturate(0.96) contrast(1.02);
}

/* Portrait hero: tie height to width via aspect-ratio. Do not use height: calc(min(100%,…)*2):
   % in height resolves to the containing block's height (often auto when stacked), not this box's width. */
.cn-home .cn-media--hero {
  aspect-ratio: 1 / 2;
  height: auto;
}

@media (min-width: 1201px) {
  .cn-home .cn-hero {
    padding-top: clamp(72px, 8vw, 120px);
    padding-bottom: clamp(60px, 7vw, 104px);
  }

  .cn-home .cn-display {
    font-size: clamp(4rem, 5.75vw, 6.25rem);
    max-width: 8.8ch;
  }

  .cn-home .cn-media--hero {
    width: min(100%, 506px);
    margin-top: 4px;
    aspect-ratio: 1 / 2;
    height: auto;
  }

  .cn-about .cn-hero,
  .cn-case .cn-hero,
  .cn-method-page .cn-hero {
    padding-top: clamp(72px, 8vw, 120px);
    padding-bottom: clamp(60px, 7vw, 104px);
  }

  .cn-about .cn-display {
    font-size: clamp(3.85rem, 5.45vw, 6.1rem);
    max-width: 9.4ch;
  }

  .cn-about .cn-lead {
    max-width: 56ch;
  }

  .cn-case .cn-display {
    font-size: clamp(3.45rem, 4.9vw, 5.5rem);
    max-width: 10.2ch;
  }

  .cn-case--wayfair .cn-display {
    font-size: clamp(3.45rem, 4.8vw, 5.3rem);
  }

  .cn-about .cn-media--hero {
    width: min(100%, 568px);
    margin-top: 48px;
    aspect-ratio: 3.5 / 5;
  }

  .cn-case .cn-media--hero {
    width: min(100%, 502px);
    margin-top: 4px;
    aspect-ratio: 1 / 2;
  }
}

/* About hero background image */
.cn-about .cn-media__backdrop {
  background-image: url('./images/1b.jpg'); 
  background-size: 107%;
  background-position: 50% -32px;
  aspect-ratio: 1 / 1.45;
}

.cn-about .cn-media__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('./images/p1.png');
  background-size: 33%;
  background-repeat: repeat;
}

/* Current Projects hero background image */
.cn-case--current .cn-media__backdrop {
  background-image: url('./images/multipass-app-2.png');
  background-size: cover;
  background-position: center;
}


/* Walmart hero background image */
.cn-case--walmart .cn-media__backdrop {
  background-image: url('./images/multipass-landing-full-width.png');
  background-size: contain;
  background-position: center; 
  background-repeat: no-repeat;
}

/* Full-width network map art (Walmart global fulfillment network) */
.cn-wide-art {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  aspect-ratio: 1920 / 816;
  background-color: rgba(255, 255, 255, 0.02);
}

.cn-case--walmart .cn-wide-art--wls-network {
  background-image: url('./images/ed0a86e0-c561-4548-a90c-75080a104f30.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Wayfair Large Parcel flow image handoff: set your flow image URL below */
.cn-case--wayfair .cn-wide-art--wayfair-lp-flow {
  background-image: url('./images/largeparcelflow.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 2000 / 655;
}

/* Wayfair AllModern full-width image handoff */
.cn-case--wayfair .cn-wide-art--wayfair-flooring-full {
  background-image: url('./images/allmodern.jpg');
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  aspect-ratio: 2000 / 894;
}

/* Walmart hero: natural aspect, 40px top margin, height matches left column; frame = border only */
.cn-case--walmart .cn-media--hero {
  margin-top: 40px;
  height: calc(100% - 40px);
  width: auto;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 1 / 1.31;
}

.cn-case--walmart .cn-media__frame {
  inset: 0;
  border-radius: var(--radius-lg);
}

/* Walmart hero: narrow left column so right has room for image at 1/1.31 to match left height */
.cn-case--walmart .cn-hero .cn-grid--2 {
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 1.22fr);
}

/* Wayfair hero background image */
.cn-case--wayfair .cn-media__backdrop {
  background-image: url('./images/wayfair-home-services.png');
  background-size: contain;
  background-position: center;
}

/* JCPenney hero: wider aspect to match natural image (phone-in-hand photo) */
.cn-case--jcpenney .cn-media--hero {
  width: min(100%, 600px);
  aspect-ratio: 3.85 / 5;
  margin-top: 32px;
}

.cn-case--jcpenney .cn-media__backdrop {
  background-image: url('./images/jcp-app-aspirational.jpg');
  background-size: cover;
  background-position: center;
}

/* Pull hero and first content block closer (About: bio; JCPenney: stat band) */
.cn-about .cn-hero,
.cn-case--jcpenney .cn-hero {
  padding-bottom: calc(var(--hero-pad) * 0.52);
}

.cn-about .cn-hero + .cn-section,
.cn-case--jcpenney .cn-hero + .cn-section {
  padding-top: clamp(28px, 4vw, 56px);
}

/* JCPenney transformation path: 5 steps fill full width */
.cn-case--jcpenney .cn-process__line {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* JCPenney native app redesign: full-width image below the two cards.
   Set your image URL below. */
.cn-case--jcpenney .cn-wide-art--jcp-redesign {
  background-image: url('./images/jcp-app-dark.jpg');
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  aspect-ratio: 400 / 170;
}

/* JCP wallet support: supporting image in the right card next to the Wallet diagram. Set your image URL below. */
.cn-case--jcpenney .cn-card__art--jcp-wallet-support {
  margin-top: 0;
  min-height: 260px;
  background-image: url('./images/image003.jpg'); 
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  aspect-ratio: 200 / 150;
}

/* JCP wallet photo: full-width image below the wallet results stat bar. Set your image URL below. */
.cn-case--jcpenney .cn-wide-art--jcp-wallet-photo {
  background-image: url('./images/jcp-store-checkout.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Heading with icon: icon centered in the indent space to the left of title */
.cn-heading-with-icon {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 14px;
}

.cn-heading-with-icon .cn-title {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.cn-heading-with-icon__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 28px;
  color: var(--gold);
  margin: 0 16px 0 -16px;
}

.cn-heading-with-icon__icon svg {
  width: 28px;
  height: 28px;
}

/* Indent eyebrow and body when they sit with a heading-with-icon, so the icon stays leftmost */
.cn-eyebrow:has(+ .cn-heading-with-icon) {
  margin-left: 40px;
}

.cn-heading-with-icon + .cn-body {
  margin-left: 40px;
}

/* JCP Lincoln Design System: supporting image in the right card. Set your image URL below. */
.cn-case--jcpenney .cn-card__art--jcp-lincoln-support {
  margin-top: 0;
  min-height: 260px;
  background-image: url('./images/lds.jpg');
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  aspect-ratio: 100 / 120;
}

/* JCP Flagship Store Innovations: supporting image in the right card. Set your image URL below. */
.cn-case--jcpenney .cn-card__art--jcp-flagship-support {
  margin-top: 0;
  min-height: 260px;
  background-image: url("./images/pennys.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 130 / 100
}

/* Flagship innovations: 3 even image containers with blurb below each */
.cn-innovation-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.cn-innovation-row__card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  align-content: start;
  padding: 0;
  overflow: hidden;
}

.cn-innovation-row__art {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cn-innovation-row__copy {
  padding: clamp(22px, 3vw, 28px) clamp(18px, 2.5vw, 22px) clamp(18px, 2.5vw, 22px);
}

.cn-innovation-row__copy .cn-eyebrow {
  margin: 0 0 8px 0;
}

.cn-innovation-row__blurb {
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--text-soft);
}

.cn-innovation-row__card::before {
  display: none;
}

/* JCP Flagship innovation image 1. Set your image URL below. */
.cn-case--jcpenney .cn-innovation-row__art--flagship-1 {
  background-image: url('./images/jcp-mirror.jpg'); 
}

/* JCP Flagship innovation image 2. Set your image URL below. */
.cn-case--jcpenney .cn-innovation-row__art--flagship-2 {
  background-image: url('./images/jcp-ar-makeup.jpg');
  background-size: 101%;
  background-position: right;
}

/* JCP Flagship innovation image 3. Set your image URL below. */
.cn-case--jcpenney .cn-innovation-row__art--flagship-3 {
  background-image: url('./images/611fea28-ad49-44f2-bf49-8cbfaab32dbd.jpg'); 
  background-size: 120%;
  background-position: 66% 100%;
}

.cn-case--jcpenney .cn-quote__text {
  max-width: 100%;
}

/* Native app section: only the first eyebrow (section title) is gold; The action / The results stay gray */
.cn-case--jcpenney .cn-grid--wayhome-row .cn-card:first-child > .cn-eyebrow:first-of-type {
  color: var(--gold);
}

/* Flagship Store Innovations section: only the section title eyebrow is gold; innovation card eyebrows stay gray */
.cn-case--jcpenney .cn-grid--split .cn-card:first-child > .cn-eyebrow {
  color: var(--gold);
}

/* Result callout: trophy icon + highlighted result line (e.g. Top 10 Black Friday) */
.cn-result-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.cn-result-callout__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--gold);
}

.cn-result-callout__icon svg {
  width: 100%;
  height: 100%;
}

.cn-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cn-kpi {
  padding: 26px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-kpi:last-child {
  border-right: 0;
}

.cn-kpi__value {
  font-size: clamp(2.1rem, 3.4vw, 3.4rem);
  margin-bottom: 10px;
}

.cn-kpi__label {
  color: var(--text-dim);
}

.cn-timeline {
  padding: 0;
}

.cn-timeline__item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  padding: 26px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-timeline__item:last-child {
  border-bottom: 0;
}

.cn-timeline__year {
  color: var(--gold);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cn-timeline__title {
  margin: 0 0 8px;
  font-size: 1.18rem;
  font-weight: 600;
}

.cn-timeline__results {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.cn-timeline__result {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(216, 191, 140, 0.2);
  background: rgba(216, 191, 140, 0.09);
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cn-timeline__result.is-positive {
  border-color: rgba(142, 172, 158, 0.24);
  background: rgba(142, 172, 158, 0.12);
  color: #b9d8c9;
}

.cn-process {
  display: grid;
  gap: 26px;
}

.cn-process--case-arc .cn-process__line {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.cn-process--animated {
  overflow: hidden;
}

.cn-process--animated::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(216, 191, 140, 0.04) 38%, rgba(124, 141, 165, 0.06) 52%, transparent 72%);
  transform: translate3d(-120%, 0, 0);
  pointer-events: none;
  animation: cnProcessSweep 9s linear infinite;
}

.cn-process__line {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.cn-step {
  position: relative;
  padding-top: 24px;
}

.cn-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 18px);
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 191, 140, 0.65), rgba(255, 255, 255, 0.08));
}

.cn-process--animated .cn-step::after {
  content: '';
  position: absolute;
  top: 0;
  left: -12%;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 191, 140, 0.95), rgba(142, 172, 158, 0.55), transparent);
  opacity: 0.95;
  transform: translate3d(-180%, 0, 0);
  pointer-events: none;
  animation: cnProcessPulse 5.8s linear infinite;
}

.cn-process--animated .cn-step:nth-child(2)::after {
  animation-delay: 0.12s;
}

.cn-process--animated .cn-step:nth-child(3)::after {
  animation-delay: 0.24s;
}

.cn-process--animated .cn-step:nth-child(4)::after {
  animation-delay: 0.36s;
}

.cn-process--animated .cn-step:nth-child(5)::after {
  animation-delay: 0.48s;
}

.cn-process--animated .cn-step:nth-child(6)::after {
  animation-delay: 0.6s;
}

.cn-step:last-child::before {
  width: 100%;
}

.cn-step__index {
  color: var(--gold);
  margin-bottom: 8px;
}

.cn-step__title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
}

.cn-card--case-problem {
  display: grid;
  align-content: start;
  gap: 18px;
  height: 100%;
  max-width: 520px;
  justify-self: end;
}

.cn-process--case-arc {
  height: 100%;
}

.cn-card--case-problem > * {
  margin: 0;
}

.cn-card--case-problem .cn-title {
  margin-top: 4px;
}

.cn-card--case-problem .cn-body + .cn-body {
  margin-top: 0;
}

.cn-method-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cn-ratio {
  display: grid;
  gap: 16px;
}

.cn-ratio__track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cn-ratio__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), #efe0bf);
  transition: width 1200ms cubic-bezier(0.2, 0.65, 0.2, 1);
}

.cn-ratio__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.92rem;
  color: var(--text-soft);
}

/* Dual-line growth chart (e.g. team + market share over time) */
.cn-growth-chart {
  display: grid;
  gap: 14px;
}

.cn-growth-chart__wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 10px;
  min-height: 180px;
}

.cn-growth-chart__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.cn-growth-chart__y--left {
  text-align: right;
}

.cn-growth-chart__y--right {
  text-align: left;
}

.cn-growth-chart__svg {
  width: 100%;
  height: 100%;
  min-height: 160px;
}

.cn-growth-chart__area {
  opacity: 0;
  transition: opacity 800ms ease 200ms;
}

.cn-growth-chart.is-visible .cn-growth-chart__area {
  opacity: 1;
}

.cn-growth-chart__area--team {
  fill: url(#walmart-team-fill);
}

.cn-growth-chart__area--market {
  fill: url(#walmart-market-fill);
}

.cn-growth-chart__area--teams {
  fill: url(#walmart-teams-fill);
}

.cn-growth-chart__line {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 1000ms cubic-bezier(0.2, 0.65, 0.2, 1) 100ms;
}

.cn-growth-chart__line--team {
  stroke: var(--gold);
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

.cn-growth-chart__line--market {
  stroke: var(--slate);
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

.cn-growth-chart__line--teams {
  stroke: var(--rose);
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1000ms cubic-bezier(0.2, 0.65, 0.2, 1) 200ms;
}

.cn-growth-chart.is-visible .cn-growth-chart__line--team,
.cn-growth-chart.is-visible .cn-growth-chart__line--market,
.cn-growth-chart.is-visible .cn-growth-chart__line--teams {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cn-growth-chart__line--team,
  .cn-growth-chart__line--market,
  .cn-growth-chart__line--teams {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}

.cn-growth-chart__x {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  padding: 0 2px;
}

.cn-growth-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  font-size: 0.86rem;
  color: var(--text-soft);
}

.cn-growth-chart__legend-item--team::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 3px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--gold);
}

.cn-growth-chart__legend-item--market::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 3px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--slate);
}

.cn-growth-chart__legend-item--teams::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 3px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--rose);
}

.cn-diagram {
  display: grid;
  gap: 18px;
  align-content: start;
}

.cn-diagram__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cn-diagram--before-after .cn-diagram__row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cn-diagram__cell {
  min-height: 120px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cn-diagram__label {
  margin-bottom: 12px;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cn-bar-chart {
  display: grid;
  gap: 16px;
}

.cn-bar {
  display: grid;
  grid-template-columns: 150px 1fr 80px;
  align-items: center;
  gap: 16px;
}

.cn-bar__label,
.cn-bar__value {
  font-size: 0.92rem;
  color: var(--text-soft);
}

.cn-bar__track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cn-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(142, 172, 158, 0.94), rgba(216, 191, 140, 0.92));
  transition: width 1100ms cubic-bezier(0.2, 0.65, 0.2, 1);
}

.cn-bar-chart--agreement {
  gap: 14px;
  margin-top: 6px;
}

.cn-bar-chart--agreement .cn-bar {
  grid-template-columns: 108px 1fr 64px;
}

.cn-bar-chart--agreement .cn-bar__value {
  color: #b9d8c9;
  font-weight: 600;
}

.cn-quote {
  display: grid;
  gap: 18px;
}

.cn-quote__text {
  font-size: clamp(2rem, 3vw, 3rem);
  max-width: 100%;
}

.cn-quote__byline {
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cn-marquee {
  padding: 18px 0;
}

.cn-marquee__track {
  display: flex;
  gap: 18px;
  min-width: max-content;
  animation: cnMarquee 24s linear infinite;
}

.cn-marquee__item {
  padding: 0 24px;
  color: var(--text-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* Full-width editorial block (e.g. "The Problem" statement) */
.cn-editorial {
  display: grid;
  gap: 18px;
  max-width: 52ch;
  padding: clamp(32px, 5vw, 56px) 0;
}

.cn-editorial--with-art {
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.7fr);
  align-items: flex-start;
  gap: clamp(24px, 4vw, 40px);
  max-width: none;
  padding-bottom: clamp(40px, 6vw, 64px);
}

.cn-editorial__copy {
  display: grid;
  gap: 18px;
}

.cn-editorial__statement {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* Editorial art: same container treatment as .cn-section-label__art (inner border, gradients, shadow) */
.cn-editorial__art {
  position: relative;
  aspect-ratio: 936 / 722;
  min-height: 200px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    linear-gradient(135deg, rgba(216, 191, 140, 0.12), transparent 44%),
    linear-gradient(220deg, rgba(124, 141, 165, 0.12), transparent 42%),
    rgba(14, 16, 17, 0.78);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}


.cn-editorial__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 0;
}

/* Editorial art image handoff (Walmart "The Problem"): add your image URL below, same pattern as other pages.
   Image is in ::after so the container gradients/border stay. */
.cn-case--walmart .cn-editorial__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./images/old.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.cn-section-label {
  display: grid;
  gap: 14px;
  margin-bottom: 48px;
}

.cn-section-label__copy {
  display: grid;
  gap: 14px;
}

.cn-section-label--with-art {
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.8fr);
  align-items: end;
  gap: 28px;
}

.cn-section-label__art {
  position: relative;
  min-height: 220px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    linear-gradient(135deg, rgba(216, 191, 140, 0.12), transparent 44%),
    linear-gradient(220deg, rgba(124, 141, 165, 0.12), transparent 42%),
    rgba(14, 16, 17, 0.78);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.cn-section-label__art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 26%, rgba(216, 191, 140, 0.14), transparent 22%),
    radial-gradient(circle at 76% 68%, rgba(124, 141, 165, 0.12), transparent 26%);
  opacity: 0.9;
}

/* About Methods image handoff:
   Add your image to the methods header art slot below.
   Example:
   .cn-section-label__art--about-methods {
     background-image:
       linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
       url('https://your-image-url-here');
     background-size: cover;
     background-position: center;
   }
*/
.cn-section-label__art--about-methods {
  background-image: url('./images/e39289c1-1fa2-4543-8d25-2fdc30d52a06.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  min-height: 345px;
}

.cn-section-label--wide .cn-headline {
  max-width: 90%;
}

.cn-section-label--headline-three-quarter .cn-headline {
  max-width: 100%;
}

/* Lincoln section: section-level title above the cards (exception) */
.cn-section-label--lincoln {
  margin-bottom: 0;
}

.cn-section-label--lincoln .cn-headline {
  max-width: 100%;
}

.cn-section-label--timeline {
  margin-bottom: 48px;
}

.cn-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.cn-principles-card {
  display: grid;
  align-content: start;
  width: 100%;
  min-width: 0;
}

.cn-principles-card .cn-divider {
  margin: 16px 0 18px;
}

.cn-principles-list {
  padding-left: 0;
  gap: 0;
  list-style: none;
}

.cn-principles-list li {
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-soft);
}

.cn-principles-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.cn-principles-list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: rgba(216, 191, 140, 0.72);
  box-shadow: 0 0 12px rgba(216, 191, 140, 0.18);
}

.cn-principles-list li:first-child::before {
  margin-top: 0.6em;
}

/* Results list: value + label (e.g. JCPenney app redesign highlights), principles-style card */
.cn-results-list {
  width: 100%;
  min-width: 0;
}

.cn-results-list li {
  grid-template-columns: 10px minmax(0, 1fr);
}

/* Single content cell so value + text stay in second column (grid had 3 children = text wrapped into bullet column) */
.cn-results-list__cell {
  min-width: 0;
}

.cn-results-list .cn-results-list__value {
  display: block;
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 600;
  font-family: 'Cormorant Garamond', Georgia, serif;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.cn-case-sidecard {
  display: grid;
  align-content: start;
  gap: 0;
}

.cn-case-sidecard > .cn-eyebrow {
  margin-bottom: 12px;
}

.cn-case-sidecard .cn-divider:first-of-type {
  margin: 18px 0 18px;
}

.cn-case-sidecard .cn-divider:last-of-type {
  margin: 22px 0 18px;
}

.cn-case-sidecard h3 {
  margin: 0;
  max-width: none;
  line-height: 1.18;
}

.cn-case-sidecard .cn-body {
  margin: 0;
}

.cn-case-list {
  padding-left: 0;
  gap: 0;
  list-style: none;
}

.cn-case-list li {
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-soft);
  line-height: 1.55;
}

.cn-case-list__content {
  display: block;
  min-width: 0;
}

.cn-case-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.cn-case-list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: rgba(216, 191, 140, 0.72);
  box-shadow: 0 0 12px rgba(216, 191, 140, 0.18);
}

.cn-case-list strong {
  color: var(--text);
  font-weight: 600;
}

.cn-case-list__detail {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
}

.cn-card--case-learnings {
  display: grid;
  align-content: start;
  gap: 18px;
  height: 100%;
}

.cn-case-learnings__header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cn-case-learnings__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 5px;
  border-radius: 999px;
  border: 1px solid rgba(216, 191, 140, 0.18);
  background: rgba(216, 191, 140, 0.08);
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cn-case-learnings__badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(216, 191, 140, 0.98), rgba(255, 255, 255, 0.9));
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(216, 191, 140, 0.24);
}

.cn-case-learnings__subhead {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cn-kpi-panel--economics {
  display: grid;
  align-content: start;
  gap: 18px;
}

/* WLS chapter KPIs: 2x2 small cards instead of a horizontal strip */
.cn-kpi-grid--wls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cn-kpi-panel--wls .cn-kpi {
  align-items: flex-start;
  border-right: 0;
}

/* Make WLS KPI values read more like section subheads than giant stats */
.cn-kpi-panel--wls .cn-kpi__value {
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  line-height: 1.18;
}

/* Wayfair KPI panels: keep stats strong but slightly smaller for multi-line values */
.cn-kpi-panel--wayfair-services .cn-kpi__value,
.cn-kpi-panel--wayfair-lp .cn-kpi__value {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.2;
}

/* Wayhome growth KPIs: stacked, slightly smaller stats */
.cn-kpi-grid--wayhome {
  grid-template-columns: 1fr;
  gap: 12px;
}

.cn-card--wayhome-kpis .cn-kpi {
  padding: 0;
  border-right: 0;
}

.cn-card--wayhome-kpis .cn-kpi__value {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.2;
}

.cn-econ-matrix {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  margin-top: 16px;
}

.cn-econ-matrix__cell {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.015)),
    rgba(13, 16, 19, 0.84);
  color: var(--text);
  font-size: 0.92rem;
  text-align: center;
}

.cn-econ-matrix__cell.is-corner,
.cn-econ-matrix__cell.is-label {
  justify-items: start;
  text-align: left;
  color: var(--text-soft);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cn-econ-matrix__cell.is-header {
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cn-econ-matrix__cell.is-positive {
  color: #b9d8c9;
  font-weight: 600;
}

.cn-econ-matrix__cell.is-muted {
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cn-econ-scale {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cn-econ-scale__item {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.cn-econ-scale__label {
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cn-econ-scale__value {
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.75rem, 2vw, 2.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.cn-econ-scale__meta {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.cn-case-visual-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  height: 100%;
}

.cn-case-visual-card .cn-divider {
  margin: 16px 0 18px;
}

.cn-case-visual-card__art {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 100%;
  min-height: 220px;
  aspect-ratio: 1 / 2;
  justify-self: center;
  align-self: start;
  border-radius: calc(var(--radius-lg) - 4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    linear-gradient(135deg, rgba(216, 191, 140, 0.12), transparent 44%),
    linear-gradient(220deg, rgba(124, 141, 165, 0.12), transparent 42%),
    rgba(14, 16, 17, 0.78);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.cn-case-visual-card__art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 26%, rgba(216, 191, 140, 0.14), transparent 22%),
    radial-gradient(circle at 76% 68%, rgba(124, 141, 165, 0.12), transparent 26%);
  opacity: 0.9;
}

/* Multipass roadmap image handoff:
   Add a supporting image for the learnings / next-steps section below.
   Example:
   .cn-case-visual-card__art--multipass-roadmap {
     background-image:
       linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
       url('https://your-image-url-here');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
   }
*/
.cn-case-visual-card__art--multipass-roadmap {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), url('./images/multipass-app-3.png');
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
}

@media (min-width: 961px) {
  .cn-case-visual-card__art--multipass-roadmap {
    max-height: 748px;
    max-width: 374px;
  }
}

.cn-about-visual-card {
  display: grid;
  align-content: start;
}

.cn-about-visual-card .cn-divider {
  margin: 16px 0 20px;
}

.cn-about-visual-card__art {
  position: relative;
  width: min(100%, 345px);
  min-height: 0;
  aspect-ratio: 1 / 1;
  justify-self: center;
  border-radius: calc(var(--radius-lg) - 4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    linear-gradient(135deg, rgba(216, 191, 140, 0.12), transparent 44%),
    linear-gradient(220deg, rgba(124, 141, 165, 0.12), transparent 42%),
    rgba(14, 16, 17, 0.78);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.cn-about-visual-card__art::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 26%, rgba(216, 191, 140, 0.14), transparent 22%),
    radial-gradient(circle at 76% 68%, rgba(124, 141, 165, 0.12), transparent 26%);
  opacity: 0.9;
}

/* About Leadership image handoff:
   Add your image to the leadership card slot below.
   This one is intentionally larger and uses `contain` instead of `cover`.
   Example:
   .cn-about-visual-card__art--leadership {
     background-image:
       linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
       url('https://your-image-url-here');
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
   }
*/
.cn-about-visual-card__art--leadership {
  background-image: url('./images/641dfe8a-b1db-4f59-96d7-92b66afdb927.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.cn-about-credentials {
  display: grid;
  align-content: start;
}

.cn-about-credentials__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.cn-about-credentials__item {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 156px;
  padding: 20px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.cn-about-credentials__school {
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.cn-about-credentials__program {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.cn-about-credentials__year {
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cn-community-card {
  display: grid;
  align-content: start;
}

.cn-community-card .cn-divider:first-of-type {
  margin: 16px 0 18px;
}

.cn-community-card .cn-divider:last-of-type {
  margin: 22px 0 18px;
}

.cn-community-list {
  padding-left: 0;
  gap: 0;
  list-style: none;
}

.cn-community-list li {
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-soft);
}

.cn-community-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.cn-community-list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: rgba(216, 191, 140, 0.72);
  box-shadow: 0 0 12px rgba(216, 191, 140, 0.18);
}

.cn-community-card__note {
  color: var(--text-dim);
  line-height: 1.7;
}

.cn-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  margin: 28px 0;
}

.cn-artifact-grid {
  grid-template-columns: 1.1fr 0.9fr;
}

.cn-tableau {
  min-height: 320px;
}

.cn-tableau__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.cn-tableau__tile {
  min-height: 120px;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.cn-tableau__tile strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
}

/* Backcasting method page */
.cn-method--backcasting .cn-display {
  max-width: 11ch;
  font-size: clamp(3.45rem, 4.9vw, 5.5rem);
}

.cn-method--backcasting .cn-headline {
  max-width: 18ch;
}

.cn-method--backcasting .cn-section-label--backcasting-timeline .cn-headline {
  max-width: 100%;
}

.cn-method--backcasting .cn-process__line {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cn-method--backcasting .cn-backcasting-method-note {
  padding-top: 16px;
}

.cn-method--backcasting .cn-process--animated {
  grid-template-rows: auto 1fr;
}

.cn-method--backcasting .cn-process--animated .cn-process__line {
  align-self: end;
}

.cn-method--backcasting .cn-media--hero {
  width: min(100%, 502px);
  margin-top: 56px;
  aspect-ratio: 593 / 1000;
  min-height: clamp(662px, 58vw, 877px);
}

/* Backcasting hero image handoff: set your image URL below */
.cn-method--backcasting .cn-media__backdrop {
  background-image: url('./images/aabede03-7da6-4ef6-bfe7-c308ba21262d_1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Backcasting supporting image card (5-step method row, right column) */
.cn-method--backcasting .cn-card__art--backcasting-support {
  margin-top: 0;
  min-height: 100%;
  aspect-ratio: 4 / 5;
  background-image: url('./images/image-276.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Backcasting timeline walkthrough full-width image */
.cn-method--backcasting .cn-wide-art--backcasting-timeline {
  background-image: url('./images/group-177.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1500 / 600;
}

/* Backcasting scary-zone supporting image (square) */
.cn-method--backcasting .cn-card__art--backcasting-scary-zone {
  margin-top: 0;
  aspect-ratio: 1 / 1;
  background-image: url('./images/group-178.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cn-card--scary-zone-text > .cn-body {
  line-height: 1.75;
  margin-bottom: 56px;
}

.cn-card--scary-zone-text {
  display: flex;
  flex-direction: column;
  align-content: start;
}

.cn-card--right-idea-copy .cn-pill-row,
.cn-card--scary-zone-text .cn-pill-row {
  margin-top: auto;
}

.cn-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.cn-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 12px 6px;
  border-radius: 999px;
  border: 1px solid rgba(216, 191, 140, 0.22);
  background: rgba(216, 191, 140, 0.1);
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cn-pill--optimal {
  color: #b9d8c9;
  border-color: rgba(142, 172, 158, 0.48);
  background: rgba(142, 172, 158, 0.2);
}

.cn-inline-callout {
  margin-top: 14px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.cn-inline-callout__label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--text-dim);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cn-pullout--faq-map {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cn-pullout--faq-map .cn-inline-callout {
  margin-top: auto;
}

.cn-faq-map {
  display: grid;
  gap: 12px;
}

.cn-faq-map__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

.cn-faq-map__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(216, 191, 140, 0.28);
  background: rgba(216, 191, 140, 0.11);
  color: var(--gold);
  font-size: 0.8rem;
  line-height: 1;
}

.cn-faq-map__title {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cn-pill-row--goldilocks .cn-pill {
  position: relative;
}

.cn-pill-row--goldilocks {
  gap: 10px;
  align-items: center;
}

.cn-pill-connector {
  flex: 0 0 16px;
  width: 16px;
  height: 0;
  border-top: 2px dotted rgba(216, 191, 140, 0.62);
  transform: translateY(-1px);
}

@media (max-width: 540px) {
  .cn-pill-connector {
    display: none;
  }
}

/* Placeholder image for scary-zone section (5:4) */
.cn-method--backcasting .cn-card__art--backcasting-scary-zone-placeholder {
  margin-top: 0;
  aspect-ratio: 5 / 4;
  background-image: url('./images/image-280.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cn-backcasting-image-slot {
  width: 100%;
  min-height: 260px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    linear-gradient(135deg, rgba(216, 191, 140, 0.12), transparent 44%),
    linear-gradient(220deg, rgba(124, 141, 165, 0.12), transparent 42%),
    rgba(14, 16, 17, 0.78);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cn-backcast-rail {
  overflow: hidden;
}

.cn-backcast-progress {
  width: 100%;
  height: 3px;
  margin: 0 0 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(216, 191, 140, 0.95), rgba(124, 141, 165, 0.9));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 900ms cubic-bezier(0.2, 0.65, 0.2, 1);
}

.cn-backcast-rail.is-visible .cn-backcast-progress {
  transform: scaleX(1);
}

.cn-backcast-milestone-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.cn-backcast-milestone {
  min-height: 132px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.42;
  transform: translateY(8px);
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    border-color 260ms ease,
    background 260ms ease;
}

.cn-backcast-stepper.is-visible .cn-backcast-milestone.is-active {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(216, 191, 140, 0.25);
  background: rgba(216, 191, 140, 0.08);
}

.cn-backcast-milestone__label {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cn-reveal,
.cn-stagger > * {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity var(--transition),
    transform var(--transition);
}

.cn-stagger > * {
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

.cn-reveal.is-visible,
.cn-stagger.is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.cn-parallax {
  will-change: transform;
}

.cn-muted {
  color: var(--text-dim);
}

.cn-return {
  padding: 10px 0 8px;
}

.cn-return__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 20px 18px;
}

.cn-return__inner::before {
  content: '';
  width: min(160px, 32vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 191, 140, 0.72), transparent);
}

.cn-return__link {
  display: inline-grid;
  justify-items: center;
  gap: 8px;
  color: var(--text-soft);
  text-decoration: none;
  transition:
    color 180ms ease,
    transform 220ms ease;
}

.cn-return__link:hover,
.cn-return__link:focus-visible {
  color: var(--text);
  transform: translate3d(0, -2px, 0);
}

.cn-return__arrow {
  color: var(--gold);
  font-size: 0.9rem;
  line-height: 1;
}

.cn-return__label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cn-footer {
  padding: 40px 0 72px;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
}

@keyframes cnFloatA {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(-3vw, 1.5vw, 0) scale(1.12);
    opacity: 0.66;
  }
}

@keyframes cnFloatB {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.48;
  }
  50% {
    transform: translate3d(3.5vw, -1.75vw, 0) scale(1.16);
    opacity: 0.64;
  }
}

@keyframes cnMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes cnProcessSweep {
  0% {
    transform: translate3d(-120%, 0, 0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  58% {
    opacity: 1;
  }
  100% {
    transform: translate3d(120%, 0, 0);
    opacity: 0;
  }
}

@keyframes cnProcessPulse {
  0% {
    transform: translate3d(-180%, 0, 0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate3d(420%, 0, 0);
    opacity: 0;
  }
}

@media (min-width: 1600px) {
  :root {
    --max-width: 1440px;
    --gutter: clamp(32px, 4vw, 64px);
    --hero-pad: clamp(108px, 12vw, 190px);
    --section-pad: clamp(84px, 9vw, 150px);
    --display: clamp(4.8rem, 6vw, 7.5rem);
    --headline: clamp(2.5rem, 3.6vw, 4.5rem);
  }

  .cn-topbar__inner {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 1440px) {
  :root {
    --max-width: 1200px;
    --display: clamp(3rem, 6.1vw, 5.75rem);
    --headline: clamp(2rem, 3.8vw, 3.7rem);
  }

  .cn-topbar__inner {
    gap: 16px;
  }

  .cn-nav {
    gap: 10px 14px;
  }

  .cn-chip-row {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

@media (max-width: 1200px) {
  :root {
    --gutter: clamp(22px, 4vw, 40px);
    --hero-pad: clamp(72px, 9vw, 120px);
    --section-pad: clamp(64px, 8vw, 108px);
    --display: clamp(2.8rem, 5.2vw, 4.8rem);
    --headline: clamp(1.95rem, 3.3vw, 3rem);
    --title: clamp(1.28rem, 2vw, 1.95rem);
  }

  .cn-topbar__inner {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .cn-hero .cn-grid--2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cn-case--walmart .cn-hero .cn-grid--2 {
    grid-template-columns: 1fr;
  }

  .cn-case--walmart .cn-media--hero {
    height: auto;
    width: min(100%, 502px);
  }

  .cn-copy,
  .cn-display,
  .cn-headline {
    max-width: none;
  }

  .cn-section-label--with-art {
    grid-template-columns: 1fr;
  }

  .cn-editorial--with-art {
    grid-template-columns: 1fr;
  }

  .cn-section-label__art {
    min-height: 180px;
  }

  .cn-about-visual-card__art {
    width: min(100%, 300px);
  }

  .cn-about-credentials__grid {
    grid-template-columns: 1fr 1fr;
  }

  .cn-card-grid,
  .cn-method-grid,
  .cn-grid--split,
  .cn-artifact-grid,
  .cn-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cn-grid--wayhome-row {
    grid-template-columns: 1fr;
  }

  .cn-grid--split-case-arc {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  }

  .cn-grid--split-learnings {
    grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.96fr);
  }

  .cn-econ-matrix {
    grid-template-columns: minmax(108px, 1fr) repeat(3, minmax(0, 1fr));
  }

  .cn-bar-chart--agreement .cn-bar {
    grid-template-columns: 92px 1fr 56px;
  }

  .cn-process__line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cn-backcast-milestone-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cn-stat-band__grid,
  .cn-diagram__row,
  .cn-tableau__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cn-media--hero {
    width: min(100%, 400px);
  }

  .cn-home-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cn-media__mock {
    width: min(320px, 48%);
    right: 28px;
    bottom: 28px;
  }

  .cn-link-card {
    min-height: 220px;
  }
}

@media (max-width: 960px) {
  :root {
    --max-width: 100%;
    --gutter: clamp(20px, 4.5vw, 28px);
    --hero-pad: clamp(64px, 10vw, 92px);
    --section-pad: clamp(56px, 8vw, 84px);
    --display: clamp(2.55rem, 7vw, 4rem);
    --headline: clamp(1.8rem, 4.8vw, 2.7rem);
    --body-lg: clamp(1rem, 2vw, 1.18rem);
  }

  .cn-page::before,
  .cn-page::after {
    width: 46vw;
    height: 46vw;
  }

  .cn-topbar__inner {
    align-items: start;
    flex-direction: column;
  }

  .cn-nav {
    justify-content: start;
    width: 100%;
  }

  .cn-grid--2,
  .cn-grid--split,
  .cn-grid--split-reverse,
  .cn-kpi-grid,
  .cn-artifact-grid,
  .cn-grid--split-about-bio,
  .cn-grid--wayhome-row {
    grid-template-columns: 1fr;
  }

  .cn-innovation-row {
    grid-template-columns: 1fr;
  }

  /* Force Wayfair two-column layouts to stack on small screens, even with case-specific overrides */
  .cn-case--wayfair .cn-grid--2 {
    grid-template-columns: 1fr;
  }

  .cn-case--walmart .cn-hero .cn-grid--2 {
    grid-template-columns: 1fr;
  }

  .cn-grid--split-case-arc {
    grid-template-columns: 1fr;
  }

  .cn-grid--split-learnings {
    grid-template-columns: 1fr;
  }

  /* Collapse case-specific process rows to two columns on tablets */
  .cn-process--case-arc .cn-process__line,
  .cn-case--jcpenney .cn-process__line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cn-card-grid,
  .cn-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cn-kpi {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .cn-kpi:last-child {
    border-bottom: 0;
  }

  .cn-bar {
    grid-template-columns: 120px 1fr 72px;
  }

  .cn-case-sidecard h3 {
    max-width: none;
  }

  .cn-econ-scale {
    grid-template-columns: 1fr;
  }

  .cn-card--case-problem {
    max-width: none;
    justify-self: stretch;
  }

  .cn-timeline__item {
    grid-template-columns: 140px 1fr;
    gap: 18px;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --hero-pad: 56px;
    --section-pad: 48px;
    --display: clamp(2.25rem, 10vw, 3.4rem);
    --headline: clamp(1.65rem, 6vw, 2.4rem);
    --title: clamp(1.2rem, 4vw, 1.7rem);
    --body: 0.98rem;
  }

  .cn-topbar {
    position: sticky;
    background: rgba(8, 9, 9, 0.82);
    backdrop-filter: blur(26px);
  }

  .cn-topbar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .cn-brand {
    gap: 2px;
  }

  .cn-menu-toggle {
    display: inline-flex;
    justify-self: end;
  }

  .cn-topbar.is-menu-open .cn-menu-toggle span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  .cn-topbar.is-menu-open .cn-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  .cn-topbar.is-menu-open .cn-menu-toggle span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  .cn-nav {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    padding: 0;
    margin-top: -2px;
    border-radius: 20px;
    border: 1px solid transparent;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
      rgba(10, 12, 13, 0.94);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);
    transition:
      max-height 240ms ease,
      opacity 180ms ease,
      padding 180ms ease,
      border-color 180ms ease;
  }

  .cn-topbar.is-menu-open .cn-nav {
    max-height: 75vh;
    opacity: 1;
    pointer-events: auto;
    padding: 14px;
    border-color: rgba(255, 255, 255, 0.08);
  }

  .cn-nav > a,
  .cn-nav__trigger {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
  }

  .cn-nav__group,
  .cn-nav__submenu,
  .cn-nav__trigger {
    width: 100%;
  }

  .cn-nav__group {
    display: grid;
    gap: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .cn-nav__trigger {
    justify-content: space-between;
  }

  .cn-nav__submenu {
    position: static;
    min-width: 0;
    max-height: 0;
    margin-top: 0;
    padding: 0 14px;
    border-radius: 18px;
    overflow: hidden;
    opacity: 0;
    transform: none;
    pointer-events: none;
    box-shadow: none;
    transition:
      opacity 180ms ease,
      max-height 220ms ease,
      padding 180ms ease,
      margin-top 180ms ease;
  }

  .cn-nav__submenu a {
    padding: 12px 14px;
  }

  .cn-nav__group.is-open .cn-nav__submenu,
  .cn-nav__group:hover .cn-nav__submenu,
  .cn-nav__group:focus-within .cn-nav__submenu {
    opacity: 1;
    max-height: 320px;
    margin-top: 10px;
    padding: 14px;
    pointer-events: auto;
  }

  .cn-card-grid,
  .cn-method-grid,
  .cn-process__line,
  .cn-stat-band__grid,
  .cn-diagram__row,
  .cn-tableau__grid,
  .cn-backcast-milestone-track {
    grid-template-columns: 1fr;
  }

  /* Override desktop 5-column process layouts on phones */
  .cn-process--case-arc .cn-process__line,
  .cn-case--jcpenney .cn-process__line {
    grid-template-columns: 1fr;
  }

  .cn-chip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .cn-home-timeline {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
  }

  .cn-home-timeline__item {
    min-height: 0;
    padding: 14px 16px;
  }

  .cn-stat,
  .cn-kpi {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .cn-stat:last-child,
  .cn-kpi:last-child {
    border-bottom: 0;
  }

  .cn-bar,
  .cn-timeline__item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cn-bar-chart--agreement .cn-bar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cn-bar-chart--agreement .cn-bar__value {
    justify-self: start;
  }

  .cn-media,
  .cn-media--hero {
    min-height: 0;
  }

  .cn-hero {
    padding-top: calc(var(--hero-pad) * 0.92);
  }

  .cn-copy {
    display: grid;
    gap: 14px;
  }

  .cn-eyebrow {
    margin-bottom: 10px;
  }

  .cn-lead {
    margin-top: 0;
    max-width: none;
  }

  .cn-section-label {
    gap: 12px;
    margin-bottom: 22px;
  }

  .cn-media__frame {
    inset: 16px;
  }

  .cn-media__mock {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 320px;
    margin-top: 24px;
  }

  .cn-media--hero {
    width: min(100%, 360px);
    justify-self: center;
  }

  .cn-about-credentials__grid {
    grid-template-columns: 1fr 1fr;
  }

  .cn-about-credentials__item {
    min-height: 140px;
    padding: 18px 16px;
  }

  .cn-media__overlay {
    left: 26px;
    right: 26px;
    bottom: 28px;
    padding: 16px 18px 14px;
  }

  .cn-media__overlay-copy {
    font-size: 0.9rem;
  }

  .cn-link-card {
    min-height: 0;
    gap: 14px;
  }

  .cn-link-card__title {
    font-size: clamp(1.55rem, 7vw, 2.1rem);
  }

  .cn-link-card__meta {
    flex-direction: column;
    align-items: start;
  }

  .cn-link-card__arrow {
    margin-top: 4px;
  }

  .cn-quote__text {
    max-width: none;
  }

  .cn-process__line {
    gap: 14px;
  }

  .cn-step {
    padding-top: 16px;
  }

  .cn-marquee {
    padding: 12px 0;
  }
}

@media (max-width: 991px) and (min-width: 541px) {
  .cn-media--hero {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .cn-method--backcasting .cn-media--hero {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  /* Keep About hero image in the same portrait aspect as other breakpoints */
  .cn-about .cn-media--hero {
    aspect-ratio: 1 / 1.4;
  }
}

@media (max-width: 540px) {
  :root {
    --gutter: 16px;
    --hero-pad: 44px;
    --section-pad: 40px;
    --display: clamp(2rem, 11vw, 2.85rem);
    --headline: clamp(1.45rem, 7vw, 2rem);
    --title: clamp(1.1rem, 5vw, 1.45rem);
    --body-lg: 1rem;
    --body: 0.95rem;
  }

  .cn-page::before,
  .cn-page::after {
    width: 62vw;
    height: 62vw;
    opacity: 0.32;
  }

  .cn-brand__eyebrow,
  .cn-brand__name {
    line-height: 1.3;
  }

  .cn-brand__name {
    font-size: 0.88rem;
  }

  .cn-topbar__inner {
    gap: 10px;
  }

  .cn-menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .cn-chip-row {
    grid-template-columns: 1fr;
  }

  .cn-home-timeline {
    margin-top: 18px;
  }

  .cn-home-timeline__role {
    font-size: 0.95rem;
  }

  .cn-chip,
  .cn-nav > a,
  .cn-nav__trigger {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .cn-econ-matrix {
    grid-template-columns: 92px repeat(3, minmax(0, 1fr));
  }

  .cn-econ-matrix__cell {
    min-height: 52px;
    padding: 10px 8px;
    font-size: 0.8rem;
  }

  .cn-econ-matrix__cell.is-corner,
  .cn-econ-matrix__cell.is-label,
  .cn-econ-matrix__cell.is-header,
  .cn-econ-matrix__cell.is-muted {
    font-size: 0.64rem;
    letter-spacing: 0.1em;
  }

  .cn-econ-scale__item {
    padding: 16px;
  }

  .cn-econ-scale__meta {
    font-size: 0.88rem;
  }

  .cn-nav > a,
  .cn-nav__trigger {
    padding: 10px 12px;
  }

  .cn-nav__submenu a {
    padding: 10px 12px;
  }

  .cn-hero {
    padding-top: 36px;
  }

  .cn-about .cn-media--hero {
    aspect-ratio: 1 / 1.4;
  }

  .cn-copy {
    gap: 12px;
  }

  .cn-display {
    max-width: 8ch;
    letter-spacing: -0.04em;
  }

  .cn-lead {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .cn-section-label {
    gap: 10px;
    margin-bottom: 18px;
  }

  .cn-card,
  .cn-media,
  .cn-quote,
  .cn-process,
  .cn-kpi-panel,
  .cn-method,
  .cn-ratio,
  .cn-diagram,
  .cn-tableau,
  .cn-pullout {
    padding: 20px;
  }

  .cn-contact-card__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 0;
  }

  .cn-about-credentials__grid {
    grid-template-columns: 1fr;
  }

  .cn-about-credentials__school {
    font-size: clamp(1.8rem, 8vw, 2.35rem);
  }

  .cn-stat {
    padding: 22px 18px;
  }

  .cn-media__overlay {
    left: 20px;
    right: 20px;
    bottom: 22px;
    padding: 14px 16px 13px;
    gap: 6px;
  }

  .cn-media__overlay-title {
    font-size: 1.05rem;
  }

  .cn-media__overlay-copy {
    font-size: 0.86rem;
  }

  .cn-media__overlay-link {
    font-size: 0.72rem;
  }

  .cn-stat__label,
  .cn-kpi__label {
    font-size: 0.82rem;
  }

  .cn-stat__value,
  .cn-kpi__value {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .cn-link-card__title {
    font-size: clamp(1.4rem, 8vw, 1.9rem);
  }

  .cn-card h3,
  .cn-method h3,
  .cn-kpi-panel h3,
  .cn-media h3,
  .cn-pullout h3 {
    font-size: 1rem;
  }

  .cn-quote__text {
    font-size: clamp(1.6rem, 9vw, 2.2rem);
  }

  .cn-tableau__tile {
    min-height: 100px;
  }
}

@media (max-width: 390px) {
  :root {
    --gutter: 14px;
    --hero-pad: 36px;
    --section-pad: 32px;
    --display: clamp(1.8rem, 10vw, 2.35rem);
    --headline: clamp(1.3rem, 7vw, 1.8rem);
    --title: 1.05rem;
    --body: 0.92rem;
  }

  .cn-topbar__inner {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .cn-menu-toggle {
    width: 42px;
    height: 42px;
  }

  .cn-nav {
    gap: 8px;
  }

  .cn-nav > a,
  .cn-nav__trigger {
    padding: 9px 10px;
  }

  .cn-card,
  .cn-media,
  .cn-quote,
  .cn-process,
  .cn-kpi-panel,
  .cn-method,
  .cn-ratio,
  .cn-diagram,
  .cn-tableau,
  .cn-pullout {
    padding: 18px;
  }

  .cn-media,
  .cn-media--hero {
    min-height: 0;
  }

  .cn-media__mock {
    max-width: 100%;
    border-radius: 22px;
  }

  .cn-media--hero {
    width: min(100%, 300px);
  }

  .cn-link-card__title {
    font-size: clamp(1.25rem, 7.5vw, 1.65rem);
  }
}

@media (max-width: 991px) and (min-width: 541px) {
  .cn-method--backcasting .cn-display {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .cn-method--backcasting .cn-process__line {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cn-page::before,
  .cn-page::after,
  .cn-marquee__track,
  .cn-process--animated::after,
  .cn-process--animated .cn-step::after {
    animation: none;
  }

  .cn-reveal,
  .cn-stagger > *,
  .cn-ratio__fill,
  .cn-bar__fill,
  .cn-backcast-progress,
  .cn-backcast-milestone {
    transition: none;
  }

  .cn-backcast-progress {
    transform: scaleX(1);
  }

  .cn-backcast-milestone {
    opacity: 1;
    transform: none;
  }
}