@import url("https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400..800;1,400..800&family=Sen:wght@400..800&display=swap");

/* ==========================================================================
   RenoMe — Public site theme
   One committed system: warm editorial calm (70%) + structured credibility (30%).
   Colour roles follow the approved brand proportion guide (Asset-002):
     60% foundation (white / mist) · 25% structure (dark teal / deep teal / slate)
     10% parent accent (renewal teal) · 5% program identity (blue / coral / violet,
     used ONLY inside program-specific contexts via .theme-voice/.theme-lead/.theme-future).
   ========================================================================== */

/* ----- 01 · Tokens ----- */
:root {
  /* Brand palette (source of truth: Brand Assets/08_Web_Kit) */
  --white: #ffffff;
  --mist: #e8f7f5;
  --sky-mist: #e0f2fe;
  --dark-teal: #002526;
  --deep-teal: #004145;
  --gradient-teal-end: #007a7f;
  --renewal-teal: #0d9488;
  --teal-bright: #12c7b7;
  --horizon-blue: #0284c7;
  --coral: #ff6645;
  --coral-tint: #ffd1c6;
  --violet: #7c3aed;
  --violet-mist: #ede9fe;
  --slate: #4a5568;
  --sand-line: #d7d2ca;

  /* Derived roles */
  --ink: var(--dark-teal);
  --ink-soft: rgba(74, 85, 104, 0.96);
  --ink-inverse: rgba(255, 255, 255, 0.82);
  --line: rgba(0, 65, 69, 0.14);
  --line-soft: rgba(0, 65, 69, 0.09);
  --accent: var(--renewal-teal);

  /* Type scale */
  --font-body: "Epilogue", "Segoe UI", Arial, sans-serif;
  --font-display: "Sen", "Segoe UI", Arial, sans-serif;
  --font: var(--font-body);
  --text-display: clamp(42px, 6vw, 76px);
  --text-h2: clamp(30px, 4vw, 50px);
  --text-h3: clamp(21px, 2.2vw, 28px);
  --text-h4: 19px;
  --text-body: 17px;
  --text-lede: clamp(18px, 2vw, 21px);
  --text-small: 14px;
  --text-eyebrow: 12px;

  /* Rhythm */
  --section-pad: clamp(80px, 10vw, 140px);
  --section-pad-tight: clamp(48px, 6vw, 84px);
  --gutter: clamp(18px, 4vw, 52px);
  --gap-card: 20px;
  --container: 1180px;
  --container-narrow: 900px;

  /* Surfaces */
  --radius: 10px;
  --radius-small: 7px;
  --shadow-soft: 0 10px 34px rgba(0, 37, 38, 0.07);
  --shadow-lift: 0 24px 64px rgba(0, 37, 38, 0.12);

  /* Human Momentum: one restrained motion language for confidence and progress. */
  --motion-instant: 120ms;
  --motion-fast: 190ms;
  --motion-medium: 260ms;
  --motion-slow: 520ms;
  --motion-section: 760ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ----- 02 · Base ----- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid rgba(13, 148, 136, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--dark-teal);
  color: var(--white);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-64px);
}

.skip-link:focus {
  transform: translateY(0);
}

h1,
h2,
h3,
h4,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
.button,
.eyebrow,
.text-link,
.site-header .nav a,
.nav-cta,
strong {
  font-family: var(--font-display);
}

h1 {
  margin: 0;
  max-width: 780px;
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 800;
}

h2 {
  margin: 0;
  font-size: var(--text-h2);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 800;
}

h3 {
  margin: 0;
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 750;
}

h4 {
  margin: 0;
  font-size: var(--text-h4);
  line-height: 1.3;
  font-weight: 750;
}

/* ----- 03 · Utilities ----- */
.container {
  width: min(var(--container), 100%);
  margin: 0 auto;
}

.narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: var(--section-pad) var(--gutter);
}

.section-tight {
  padding-top: var(--section-pad-tight);
}

.section-heading {
  max-width: 760px;
  margin-bottom: clamp(30px, 4vw, 46px);
}

.section-heading.wide {
  max-width: 900px;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: var(--text-eyebrow);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.muted {
  color: var(--ink-soft);
}

.lede {
  max-width: 760px;
  color: var(--ink-soft);
  font-size: var(--text-lede);
  line-height: 1.6;
}

/* Scroll reveal — applies only when JS confirms it can finish the job */
.has-js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.has-js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----- 04 · Buttons ----- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button:hover {
    transition: none;
    transform: none;
  }
}

.button.primary {
  color: var(--white);
  /* #007a7f gives white-text contrast 5.13:1 (AA); Renewal Teal #0d9488 was 3.74:1.
     Both are approved brand teal tokens — accent identity is preserved. */
  background: var(--gradient-teal-end);
  box-shadow: 0 12px 26px rgba(0, 65, 69, 0.24);
}

.button.primary:hover {
  background: var(--deep-teal);
}

.button.secondary {
  color: var(--dark-teal);
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 65, 69, 0.22);
}

.button.secondary:hover {
  border-color: rgba(13, 148, 136, 0.55);
  color: var(--deep-teal);
}

.button.ghost {
  color: var(--deep-teal);
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: rgba(13, 148, 136, 0.4);
  text-underline-offset: 6px;
  padding-inline: 8px;
}

.button.dark {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
}

.button.dark:hover {
  border-color: var(--teal-bright);
  color: var(--teal-bright);
}

.button.small {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
}

/* ----- 05 · Header & navigation ----- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid rgba(0, 65, 69, 0.1);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
}

.brand {
  flex: none;
}

.brand img {
  width: clamp(190px, 18vw, 240px);
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 32px);
  color: rgba(0, 37, 38, 0.78);
  font-size: 14.5px;
  font-weight: 750;
}

.nav a,
.nav-cta {
  text-decoration: none;
}

.nav a {
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--renewal-teal);
  border-bottom-color: rgba(13, 148, 136, 0.5);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  color: var(--white);
  background: var(--gradient-teal-end);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.nav-cta:hover {
  background: var(--deep-teal);
  color: var(--white);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--renewal-teal);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----- 06 · Heroes ----- */
.hero {
  position: relative;
  min-height: min(860px, 100svh);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  isolation: isolate;
  background-image: url("assets/images/hero-community-workshop.webp");
  background-position: 58% 36%;
  background-size: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white));
  z-index: -1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0.4) 68%, rgba(0, 37, 38, 0.22) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(232, 247, 245, 0.42));
}

.hero-content {
  width: min(800px, calc(100% - 36px));
  margin-left: clamp(18px, 7vw, 104px);
  padding-top: clamp(150px, 18vh, 210px);
  padding-bottom: 90px;
}

.hero-visual-only {
  min-height: clamp(420px, 70svh, 760px);
  align-items: stretch;
  background-position: center 36%;
}

.hero-visual-only .hero-overlay {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 37, 38, 0.12)),
    linear-gradient(110deg, rgba(13, 148, 136, 0.08), transparent 52%);
}

.hero-supporting {
  margin: 22px 0 0;
  color: var(--deep-teal);
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.hero-copy {
  max-width: 640px;
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: var(--text-lede);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.support-line {
  margin: 32px 0 0;
  color: var(--deep-teal);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

/* Inner-page hero (also used by public-content.js views) */
.public-hero,
.page-hero {
  padding-top: clamp(148px, 16vw, 200px);
  padding-bottom: clamp(54px, 7vw, 90px);
  background: var(--mist);
}

.public-hero .container > p:not(.eyebrow),
.page-hero .container > p:not(.eyebrow) {
  max-width: 760px;
  color: var(--ink-soft);
  font-size: var(--text-lede);
}

.page-hero.on-dark {
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(0, 37, 38, 0.97), rgba(0, 65, 69, 0.94)),
    var(--dark-teal);
}

.page-hero.on-dark .container > p:not(.eyebrow) {
  color: var(--ink-inverse);
}

.page-hero.on-dark .eyebrow {
  color: var(--teal-bright);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: rgba(74, 85, 104, 0.5);
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--renewal-teal);
}

/* ----- 07 · Cards ----- */
.path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-card);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-card);
}

.path-card,
.program-card,
.metric,
.content-card,
.benefit-card,
.publish-card,
.audience-card,
.person-card,
.info-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.path-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 38px);
}

.path-label {
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.path-card p {
  margin: 16px 0 26px;
  color: var(--ink-soft);
  font-size: 17px;
}

.path-card a,
.text-link {
  color: var(--deep-teal);
  font-weight: 850;
  text-decoration-color: rgba(13, 148, 136, 0.4);
  text-underline-offset: 6px;
}

.path-card a:hover,
.text-link:hover {
  color: var(--renewal-teal);
}

.audience-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
}

.audience-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  flex-grow: 1;
}

.audience-card .path-label {
  font-size: 12px;
}

.info-card {
  padding: clamp(24px, 3.4vw, 34px);
}

.info-card p {
  color: var(--ink-soft);
}

/* Program cards (approved SVG art) */
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
}

.program-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

@media (prefers-reduced-motion: reduce) {
  .program-card,
  .program-card:hover {
    transition: none;
    transform: none;
  }
}

.program-image {
  height: 250px;
  background: var(--mist);
  overflow: hidden;
}

.program-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.approved-program-asset > img {
  object-fit: cover;
  object-position: center;
}

.program-brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  padding: 28px;
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
}

.program-brand-panel::before {
  position: absolute;
  top: -54px;
  right: -38px;
  z-index: -1;
  width: 210px;
  height: 210px;
  border: 34px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  content: "";
}

.program-brand-panel::after {
  position: absolute;
  right: 24px;
  bottom: 28px;
  z-index: -1;
  width: 72px;
  height: 72px;
  background: url("assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
  filter: brightness(0) invert(1);
  opacity: 0.3;
}

.voice .program-brand-panel {
  background: linear-gradient(145deg, #005f82, var(--horizon-blue));
}

.lead .program-brand-panel {
  background: linear-gradient(145deg, #b9361e, var(--coral));
}

.future .program-brand-panel {
  background: linear-gradient(145deg, #4c1d95, var(--violet));
}

.program-art-number {
  position: absolute;
  top: 24px;
  left: 28px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.program-brand-panel strong {
  max-width: 210px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.program-art-line {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.program-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.program-body span {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Program identity colours — scoped to program contexts only (brand rule) */
.voice .program-body span,
.theme-voice .program-accent {
  color: var(--horizon-blue);
}

.lead .program-body span,
.theme-lead .program-accent {
  color: var(--coral);
}

.future .program-body span,
.theme-future .program-accent {
  color: var(--violet);
}

.theme-voice .program-band {
  background: var(--sky-mist);
}

.theme-lead .program-band {
  background: #fff2ee;
}

.theme-future .program-band {
  background: var(--violet-mist);
}

.program-body p {
  margin: 12px 0 0;
  color: var(--ink-soft);
}

.program-body .text-link {
  margin-top: 18px;
  font-size: 15px;
}

/* Editorial content cards (public-content.js) */
.public-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
}

.content-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.content-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--mist);
}

.content-card > div {
  padding: 24px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.content-card h2 {
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.2;
}

.content-card p {
  color: var(--ink-soft);
  font-size: 15.5px;
}

.content-card .button {
  align-self: flex-start;
  margin-top: auto;
}

/* Stat / metric tiles */
.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.metric {
  min-height: 158px;
  padding: 26px 20px;
  border-top: 3px solid var(--renewal-teal);
}

.metric strong {
  display: block;
  color: var(--renewal-teal);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.metric span {
  display: block;
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
}

.goals-note {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: var(--text-small);
}

/* Person / profile cards (board, advisory — future) */
.person-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
}

.person-card {
  padding: 26px;
}

.person-card img {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--mist);
  margin-bottom: 16px;
}

.person-card .role {
  display: block;
  margin-top: 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 850;
}

.person-card p {
  color: var(--ink-soft);
  font-size: 15px;
}

.placeholder-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(74, 85, 104, 0.1);
  color: var(--slate);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Logo placeholder slots (partners/sponsors — honest empty state) */
.logo-slot-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  border: 1.5px dashed rgba(0, 65, 69, 0.25);
  border-radius: var(--radius);
  color: var(--slate);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
  padding: 12px;
  background: rgba(232, 247, 245, 0.35);
}

/* ----- 08 · Bands & layouts ----- */
.why-section,
.band-mist {
  background: var(--mist);
}

.why-layout,
.community-layout,
.origin-layout,
.form-layout,
.partner-grid,
.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: clamp(30px, 6vw, 74px);
  align-items: center;
}

.why-copy p:not(.eyebrow),
.community-copy p,
.origin-layout p,
.form-intro p,
.partner-grid p,
.split-layout p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 17.5px;
}

.proof-panel {
  display: grid;
  gap: 14px;
}

.proof-panel div {
  padding: 26px;
  border-left: 4px solid var(--renewal-teal);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.proof-panel strong,
.proof-panel span {
  display: block;
}

.proof-panel strong {
  font-size: 21px;
  line-height: 1.15;
}

.proof-panel span {
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.community-section {
  background: var(--mist);
}

.community-image {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.community-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.brand-photo {
  position: relative;
  margin: 0;
  border: 1px solid rgba(13, 148, 136, 0.24);
  border-radius: 22px 22px 22px 4px;
  background: var(--dark-teal);
  box-shadow: var(--shadow-lift);
  isolation: isolate;
}

.brand-photo::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(145deg, rgba(0, 37, 38, 0.04) 35%, rgba(13, 148, 136, 0.48)),
    linear-gradient(90deg, transparent 68%, rgba(255, 255, 255, 0.1) 68% 69%, transparent 69%);
  content: "";
  pointer-events: none;
}

.brand-photo::after {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 74px;
  height: 74px;
  background: url("assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
  filter: brightness(0) invert(1);
  opacity: 0.76;
}

.brand-photo img {
  filter: saturate(0.84) contrast(1.03);
}

.brand-photo figcaption {
  position: absolute;
  right: 22px;
  bottom: 20px;
  left: 22px;
  z-index: 2;
  padding: 12px 16px;
  border-left: 4px solid var(--teal-bright);
  color: var(--white);
  background: rgba(0, 37, 38, 0.82);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-photo-employer::before {
  background:
    linear-gradient(145deg, rgba(0, 37, 38, 0.02) 34%, rgba(2, 132, 199, 0.44)),
    linear-gradient(90deg, transparent 68%, rgba(255, 255, 255, 0.1) 68% 69%, transparent 69%);
}

.brand-photo-employer figcaption {
  border-left-color: var(--horizon-blue);
}

.check-list {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--deep-teal);
  font-weight: 750;
}

.check-list li {
  position: relative;
  padding-left: 26px;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 2px;
  background: var(--renewal-teal);
}

.impact-section {
  background: var(--white);
}

.origin-section {
  color: var(--white);
  background: var(--dark-teal);
}

.origin-section .eyebrow {
  color: var(--teal-bright);
}

.origin-layout p {
  color: var(--ink-inverse);
}

.partner-section {
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(0, 37, 38, 0.98), rgba(0, 65, 69, 0.96)),
    var(--dark-teal);
}

.partner-section .eyebrow {
  color: var(--teal-bright);
}

.partner-grid {
  align-items: stretch;
}

.partner-grid article {
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
}

.partner-grid p {
  color: var(--ink-inverse);
}

/* Renovon remains a quiet, secondary brand within RenoMe's partner story. */
.renovon-partner-section {
  background:
    radial-gradient(circle at 8% 88%, rgba(222, 160, 45, 0.10), transparent 28%),
    linear-gradient(145deg, rgba(232, 247, 245, 0.72), rgba(255, 255, 255, 0.98));
}

.renovon-partner-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(15, 107, 110, 0.18);
  border-radius: 28px 28px 28px 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 64px rgba(0, 65, 69, 0.10);
}

.renovon-brand-panel,
.renovon-partner-copy {
  position: relative;
  z-index: 1;
}

.renovon-brand-panel {
  display: flex;
  min-height: 410px;
  padding: clamp(30px, 5vw, 56px);
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white);
  background:
    linear-gradient(155deg, rgba(15, 107, 110, 0.96), rgba(11, 45, 56, 0.99));
}

.renovon-brand-panel .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.renovon-brand-panel img {
  width: min(100%, 410px);
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.renovon-role {
  margin: 0;
  color: #dea02d;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.renovon-partner-copy {
  padding: clamp(34px, 6vw, 72px);
}

.renovon-partner-copy h2 {
  max-width: 760px;
  margin-bottom: 22px;
}

.renovon-partner-copy > p:not(.eyebrow) {
  max-width: 770px;
  color: var(--ink-soft);
  font-size: 17.5px;
}

.renovon-capabilities {
  display: flex;
  margin: 28px 0 0;
  padding: 0;
  gap: 18px;
  flex-wrap: wrap;
  list-style: none;
}

.renovon-capabilities li {
  padding: 0;
  border: 0;
  color: #c07a00;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.renovon-actions {
  margin-top: 30px;
}

.renovon-actions .button.primary {
  background: linear-gradient(115deg, #0b2d38, #0f6b6e);
}

@media (max-width: 980px) {
  .renovon-partner-card {
    grid-template-columns: 1fr;
  }

  .renovon-brand-panel {
    min-height: 280px;
    border-right: 0;
  }
}

@media (max-width: 640px) {
  .renovon-partner-card {
    border-radius: 22px 22px 22px 7px;
  }

  .renovon-brand-panel {
    min-height: 240px;
    padding: 28px 24px;
  }

  .renovon-brand-panel img {
    width: min(100%, 320px);
  }

  .renovon-partner-copy {
    padding: 32px 24px 38px;
  }
}

.cta-band {
  margin-top: 44px;
  padding: clamp(26px, 4vw, 40px);
  border-radius: var(--radius);
  color: var(--white);
  background: var(--dark-teal);
}

.cta-band p {
  color: var(--ink-inverse);
}

.cta-band .button {
  margin-top: 14px;
}

.final-cta {
  text-align: center;
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(0, 37, 38, 0.98), rgba(0, 65, 69, 0.96)),
    var(--dark-teal);
}

.final-cta .eyebrow {
  color: var(--teal-bright);
}

.final-cta h2 {
  max-width: 780px;
  margin: 0 auto;
}

.final-cta p {
  max-width: 640px;
  margin: 18px auto 32px;
  color: var(--ink-inverse);
  font-size: var(--text-lede);
}

.final-cta .hero-actions {
  justify-content: center;
  margin-top: 0;
}

/* Advisor / low-pressure band */
.advisor-band {
  background: var(--sky-mist);
}

.advisor-band .eyebrow {
  color: var(--horizon-blue);
}

/* ----- 09 · Forms ----- */
label {
  display: grid;
  gap: 8px;
  color: var(--deep-teal);
  font-size: 13.5px;
  font-weight: 850;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(0, 65, 69, 0.2);
  border-radius: var(--radius-small);
  padding: 11px 14px;
  color: var(--dark-teal);
  background: #fff;
  font: inherit;
  font-size: 16px;
}

textarea {
  min-height: 118px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(13, 148, 136, 0.2);
  border-color: var(--renewal-teal);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #c2410c;
}

.field-hint {
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
}

.field-error-msg {
  display: none;
  color: #9a3412;
  font-size: 13px;
  font-weight: 750;
}

.field-error-msg.visible {
  display: block;
}

.full,
.full-button {
  grid-column: 1 / -1;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-soft);
  font-weight: 650;
  font-size: 14.5px;
  line-height: 1.5;
}

.checkbox input {
  width: 19px;
  min-height: 19px;
  min-width: 19px;
  margin-top: 2px;
  accent-color: var(--renewal-teal);
}

.full-button {
  border: 0;
}

/* Shared intake form card (also styles legacy .interest-form / .submit-form) */
.intake-form,
.interest-form,
.submit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-lift);
}

/* Approved RenoMe intake treatment. Kept separate from legacy forms so every
   public intake shares one branded, accessible visual system. */
.intake-form {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 15px 16px;
  padding: clamp(20px, 3vw, 30px);
  border-color: rgba(0, 65, 69, 0.2);
  border-radius: 6px;
  background:
    linear-gradient(145deg, rgba(232, 247, 246, 0.88) 0%, rgba(255, 255, 255, 0.98) 48%, rgba(239, 244, 255, 0.92) 100%);
  box-shadow:
    0 16px 38px rgba(0, 65, 69, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.intake-form::before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--horizon-blue) 0 33.333%,
    var(--coral) 33.333% 66.666%,
    var(--violet) 66.666% 100%
  );
  content: "";
}

.intake-form::after {
  position: absolute;
  z-index: 0;
  right: -42px;
  bottom: -52px;
  width: 210px;
  aspect-ratio: 1;
  background: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  color: var(--renewal-teal);
  content: "";
  opacity: 0.045;
  pointer-events: none;
}

.intake-form > * {
  position: relative;
  z-index: 1;
}

.intake-form label {
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.intake-form .field-label {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.intake-form .field-label .field-hint {
  font-family: var(--font-body);
  font-size: 0.92em;
  font-weight: 500;
  letter-spacing: 0;
}

.intake-form input:not([type="checkbox"]):not([type="radio"]),
.intake-form select,
.intake-form textarea {
  min-height: 50px;
  border: 1px solid rgba(0, 65, 69, 0.34);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.intake-form input::placeholder,
.intake-form textarea::placeholder {
  font-family: var(--font-body);
  font-weight: 500;
}

.intake-form select {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--deep-teal) 50%),
    linear-gradient(135deg, var(--deep-teal) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 14px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px;
}

.intake-form textarea {
  min-height: 132px;
}

.intake-form input:not([type="checkbox"]):not([type="radio"]):hover,
.intake-form select:hover,
.intake-form textarea:hover {
  border-color: rgba(13, 148, 136, 0.62);
}

.intake-form input:not([type="checkbox"]):not([type="radio"]):focus,
.intake-form select:focus,
.intake-form textarea:focus {
  border-color: var(--renewal-teal);
  outline: none;
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.16);
}

.intake-form .checkbox {
  padding: 12px 14px;
  border: 1px solid rgba(0, 65, 69, 0.18);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.7);
}

.intake-form .full-button {
  min-height: 54px;
  justify-self: start;
  min-width: min(100%, 220px);
}

.form-error-box,
.field-error {
  grid-column: 1 / -1;
  display: none;
  padding: 14px 18px;
  border-radius: var(--radius-small);
  background: #fff1ec;
  border: 1px solid var(--coral-tint);
  color: #9a3412;
  font-weight: 700;
  font-size: 14.5px;
}

.form-error-box.visible {
  display: block;
}

.form-privacy {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 13px;
}

.form-security {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(0, 65, 69, 0.18);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.72);
}

.form-security > [data-turnstile-widget] {
  min-height: 65px;
}

.form-security iframe {
  max-width: 100%;
}

.form-security p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 650;
}

.form-security.ready p {
  color: var(--deep-teal);
}

.form-security.unavailable {
  border-color: var(--coral-tint);
  background: #fff1ec;
}

.form-security.unavailable p {
  color: #9a3412;
}

.intake-form button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

/* Honeypot — hidden from humans, present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Confirmation card (thank-you pages + legacy submit confirm) */
.submit-confirm,
.confirm-card {
  max-width: 680px;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-lift);
  text-align: center;
  margin: 0 auto;
}

.submit-confirm .check,
.confirm-card .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.12);
  color: var(--renewal-teal);
  font-size: 32px;
  font-weight: 900;
}

.confirm-card .hero-actions {
  justify-content: center;
  margin-top: 26px;
}

.next-steps {
  margin: 26px auto 0;
  padding: 0;
  max-width: 460px;
  list-style: none;
  display: grid;
  gap: 12px;
  text-align: left;
  counter-reset: nstep;
}

.next-steps li {
  position: relative;
  padding-left: 44px;
  color: var(--ink-soft);
  font-size: 15.5px;
  counter-increment: nstep;
}

.next-steps li::before {
  content: counter(nstep);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--deep-teal);
  font-size: 14px;
  font-weight: 850;
}

.form-intro .check-list {
  font-size: 15.5px;
}

.form-layout {
  align-items: start;
}

/* ----- 10 · Timeline, guidelines, FAQ, pills ----- */
.review-timeline,
.step-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  counter-reset: step;
}

.step-timeline.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.review-step,
.step-card {
  position: relative;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.review-step::before,
.step-card::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--renewal-teal);
  color: var(--white);
  font-weight: 900;
  font-size: 18px;
}

.review-step h3,
.step-card h3 {
  font-size: 19px;
}

.review-step p,
.step-card p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.review-note {
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 4px solid var(--coral);
  background: #fff6f3;
  color: var(--deep-teal);
  font-weight: 700;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

.guideline-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-card);
  margin-top: 34px;
}

.guideline-col {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.guideline-col.avoid {
  background: #fff6f3;
  border-color: var(--coral-tint);
}

.guideline-col h3 {
  margin-bottom: 16px;
}

.guideline-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--deep-teal);
  font-weight: 650;
}

.guideline-list li {
  position: relative;
  padding-left: 26px;
}

.guideline-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--renewal-teal);
}

.guideline-list.avoid li::before {
  background: var(--coral);
}

.faq {
  margin-top: 30px;
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 850;
  color: var(--deep-teal);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--renewal-teal);
  font-weight: 900;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item p {
  margin: 0;
  padding: 0 24px 22px;
  color: var(--ink-soft);
}

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

.pill {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--deep-teal);
  font-size: 13px;
  font-weight: 750;
}

.publish-hero {
  padding-top: clamp(150px, 17vw, 200px);
  padding-bottom: clamp(56px, 8vw, 96px);
  background:
    linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(2, 132, 199, 0.08)),
    var(--mist);
}

.publish-hero .hero-copy {
  margin-inline: 0;
}

.publish-hero .hero-actions {
  margin-top: 30px;
}

.publish-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.publish-card {
  padding: 22px;
  font-weight: 800;
  color: var(--deep-teal);
}

.publish-card span {
  display: block;
  margin-bottom: 10px;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--renewal-teal);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.benefit-card {
  padding: 26px;
}

.benefit-card strong {
  display: block;
  font-size: 18px;
  color: var(--deep-teal);
}

.benefit-card p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ----- 11 · Article & contributor pages ----- */
.article-page {
  padding-top: clamp(148px, 16vw, 196px);
}

.article-page h1 {
  max-width: 900px;
}

.article-image {
  width: 100%;
  margin: 34px 0 20px;
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-shadow: var(--shadow-lift);
}

.author-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 34px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.author-strip img,
.contributor-public img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
}

.author-strip span {
  display: block;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.article-body {
  color: var(--dark-teal);
  font-size: 19px;
  line-height: 1.75;
}

.contributor-public {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(24px, 5vw, 54px);
  align-items: center;
}

.contributor-public img {
  width: 180px;
  height: 180px;
  box-shadow: var(--shadow-lift);
}

.expertise-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.social-link {
  font-weight: 850;
  color: var(--deep-teal);
  text-decoration-color: rgba(13, 148, 136, 0.4);
  text-underline-offset: 5px;
}

.social-link:hover {
  color: var(--renewal-teal);
}

.contributor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 44px);
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.contributor-meta strong {
  display: block;
  color: var(--renewal-teal);
  font-size: 24px;
  line-height: 1;
}

.contributor-meta span {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 750;
}

/* Sponsorship tiers */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
  margin-top: 34px;
  align-items: stretch;
}

.tier-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.tier-card.featured {
  border-color: var(--renewal-teal);
  box-shadow: 0 24px 60px rgba(13, 148, 136, 0.16);
}

.tier-name {
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tier-card h3 {
  margin-top: 8px;
}

.tier-tagline {
  margin: 10px 0 18px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.tier-card ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--deep-teal);
  font-weight: 650;
  font-size: 15px;
}

.tier-card li {
  position: relative;
  padding-left: 24px;
}

.tier-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--renewal-teal);
}

.tier-card .button {
  margin-top: auto;
}

.tier-badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--renewal-teal);
  color: var(--white);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Outcome list — audience "what you get" checklists */
.outcome-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.outcome-list li {
  position: relative;
  padding-left: 40px;
  color: var(--ink-soft);
  font-size: 16.5px;
}

.outcome-list li strong {
  display: block;
  color: var(--deep-teal);
  font-size: 17px;
}

.outcome-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230d9488' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Email links remain text links, not button-like pills. */
.email-link {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--deep-teal);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(13, 148, 136, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.email-link:hover {
  color: var(--renewal-teal);
  text-decoration-color: currentColor;
}

.email-link.on-dark {
  color: rgba(255, 255, 255, 0.85);
  text-decoration-color: rgba(18, 199, 183, 0.65);
}

.email-link.on-dark:hover {
  color: var(--teal-bright);
  text-decoration-color: currentColor;
}

/* ----- 12 · Footer (rendered by site-chrome.js — contract preserved) ----- */
.site-footer {
  padding: clamp(52px, 7vw, 84px) var(--gutter) 42px;
  color: rgba(255, 255, 255, 0.68);
  background: var(--dark-teal);
  font-size: 15px;
}

.footer-inner {
  width: min(var(--container), 100%);
  margin: 0 auto;
}

.site-footer .footer-brand img {
  width: 172px;
  height: auto;
}

.footer-grid {
  width: min(var(--container), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3.5vw, 48px);
}

.footer-brand p {
  margin: 14px 0 0;
  font-size: 14px;
  max-width: 300px;
  line-height: 1.6;
}

.footer-tag {
  color: var(--teal-bright);
  font-weight: 850;
  letter-spacing: 0.03em;
}

.footer-col h2 {
  margin: 0 0 14px;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-col a {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--teal-bright);
}

.footer-soon {
  pointer-events: none;
  opacity: 0.55;
}

.footer-soon span {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-legal {
  width: min(var(--container), 100%);
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-small {
  font-size: 13px;
}

.footer-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.footer-admin:hover {
  color: rgba(255, 255, 255, 0.82);
}

/* ----- 13 · Responsive ----- */
@media (max-width: 980px) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px var(--gutter) 22px;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(0, 65, 69, 0.12);
    box-shadow: 0 24px 40px rgba(0, 37, 38, 0.12);
  }

  .nav a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
  }

  .nav-open .nav {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  .hero {
    min-height: 780px;
    background-position: 63% 36%;
  }

  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0.48) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(232, 247, 245, 0.4));
  }

  .path-grid,
  .why-layout,
  .community-layout,
  .origin-layout,
  .form-layout,
  .partner-grid,
  .split-layout,
  .guideline-cols,
  .tier-grid {
    grid-template-columns: 1fr;
  }

  .program-grid,
  .metrics,
  .public-grid,
  .audience-grid,
  .person-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-timeline,
  .step-timeline,
  .step-timeline.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 640px) {
  .site-header {
    min-height: 68px;
    padding-inline: 16px;
  }

  .brand img {
    width: 174px;
  }

  .nav-cta {
    display: none;
  }

  .hero {
    min-height: 780px;
    background-position: 66% 34%;
  }

  .hero-visual-only {
    min-height: 520px;
    background-position: 61% center;
  }

  .hero-content {
    width: calc(100vw - 32px);
    margin-left: 16px;
    padding-top: 140px;
  }

  h1 {
    font-size: clamp(34px, 9.6vw, 44px);
    line-height: 1.06;
  }

  h2 {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.12;
  }

  .hero-copy,
  .hero-supporting {
    font-size: 16.5px;
  }

  .container {
    max-width: calc(100vw - 36px);
  }

  .hero-actions .button,
  .full-button {
    width: 100%;
  }

  .program-grid,
  .metrics,
  .interest-form,
  .intake-form,
  .submit-form,
  .public-grid,
  .contributor-public,
  .audience-grid,
  .person-grid,
  .footer-grid,
  .publish-cards,
  .benefit-grid,
  .review-timeline,
  .step-timeline,
  .step-timeline.four,
  .step-timeline.three {
    grid-template-columns: 1fr;
  }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }

  .program-image {
    height: 230px;
  }

  .metric {
    min-height: 130px;
  }
}

/* ----- 24 · RenoMe dimensional interface system -----
   Inspired by modern editorial cards while keeping the RenoMe colour hierarchy. */
.button,
.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 50px;
  padding-inline: 26px;
  border: 1px solid rgba(0, 65, 69, 0.14);
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 10px 22px rgba(0, 37, 38, 0.1);
  letter-spacing: -0.01em;
  transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.button::before,
.nav-cta::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, var(--deep-teal) 0%, var(--gradient-teal-end) 58%, var(--renewal-teal) 100%);
  content: "";
  transition: filter var(--motion-fast) var(--ease-out);
}

.button:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0, 65, 69, 0.18);
}

.button:hover::before,
.nav-cta:hover::before {
  filter: saturate(1.18) brightness(1.06);
}

.button.primary,
.nav-cta {
  color: var(--white);
  background: transparent;
}

.button.secondary {
  color: var(--deep-teal);
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 65, 69, 0.18);
}

.button.secondary::before,
.button.ghost::before {
  background: linear-gradient(110deg, rgba(232, 247, 245, 0.92), rgba(255, 255, 255, 0.96));
}

.button.ghost {
  padding-inline: 20px;
  border-color: rgba(13, 148, 136, 0.22);
  text-decoration: none;
}

.button.dark::before {
  background: linear-gradient(115deg, rgba(255,255,255,.08), rgba(18,199,183,.2));
}

.theme-voice .button.primary::before { background: linear-gradient(115deg, var(--deep-teal), var(--horizon-blue)); }
.theme-lead .button.primary::before { background: linear-gradient(115deg, var(--deep-teal), var(--coral)); }
.theme-future .button.primary::before { background: linear-gradient(115deg, var(--deep-teal), var(--violet)); }

.path-card,
.audience-card,
.benefit-card,
.info-card,
.tier-card,
.content-card,
.publish-card,
.person-card {
  --card-accent: var(--renewal-teal);
  border: 1px solid rgba(0, 65, 69, 0.1);
  border-radius: 20px 20px 20px 7px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,252,251,.94));
  box-shadow: 0 18px 42px rgba(0, 37, 38, 0.08), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform var(--motion-medium) var(--ease-out), box-shadow var(--motion-medium) var(--ease-out), border-color var(--motion-medium) var(--ease-out);
}

.path-card::after,
.audience-card::after,
.benefit-card::after,
.info-card::after,
.tier-card::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 12px;
  height: auto;
  border: 0;
  border-radius: 0 20px 20px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 72%, white), var(--card-accent));
  box-shadow: -8px 0 22px color-mix(in srgb, var(--card-accent) 14%, transparent);
}

.path-card:nth-child(3n + 2),
.audience-card:nth-child(3n + 2),
.benefit-card:nth-child(3n + 2),
.info-card:nth-child(3n + 2) { --card-accent: var(--horizon-blue); }

.path-card:nth-child(3n),
.audience-card:nth-child(3n),
.benefit-card:nth-child(3n),
.info-card:nth-child(3n) { --card-accent: var(--violet); }

.path-card:hover,
.audience-card:hover,
.benefit-card:hover,
.info-card:hover,
.tier-card:hover {
  border-color: color-mix(in srgb, var(--card-accent) 32%, transparent);
  box-shadow: 0 26px 54px rgba(0, 37, 38, 0.13);
  transform: translateY(-5px) rotate(-0.35deg);
}

.program-card {
  --program-accent: var(--renewal-teal);
  border: 1px solid color-mix(in srgb, var(--program-accent) 22%, transparent);
  border-radius: 24px 24px 24px 8px;
  background: linear-gradient(145deg, var(--white), color-mix(in srgb, var(--program-accent) 6%, white));
  box-shadow: 0 22px 52px rgba(0, 37, 38, 0.11);
}

.program-card.voice { --program-accent: var(--horizon-blue); }
.program-card.lead { --program-accent: var(--coral); }
.program-card.future { --program-accent: var(--violet); }

.program-card:hover {
  border-color: color-mix(in srgb, var(--program-accent) 45%, transparent);
  box-shadow: 0 30px 66px color-mix(in srgb, var(--program-accent) 16%, rgba(0,37,38,.12));
  transform: translateY(-7px) rotate(-0.25deg);
}

.step-timeline {
  gap: clamp(18px, 2.4vw, 28px);
}

.step-timeline::before {
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(0,65,69,.2) 0 9px, transparent 9px 18px);
}

.step-card {
  --step-accent: var(--renewal-teal);
  min-height: 230px;
  padding: 82px 26px 28px;
  border: 1px solid color-mix(in srgb, var(--step-accent) 20%, transparent);
  border-radius: 24px 24px 24px 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), color-mix(in srgb, var(--step-accent) 8%, white));
  box-shadow: 0 22px 48px rgba(0,37,38,.1);
  transform: rotate(-0.45deg);
  transition: transform var(--motion-medium) var(--ease-out), box-shadow var(--motion-medium) var(--ease-out);
}

.step-card:nth-child(3n + 2) { --step-accent: var(--horizon-blue); transform: rotate(.55deg); }
.step-card:nth-child(3n) { --step-accent: var(--violet); }

.step-card::before {
  top: 22px;
  left: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 50% 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--step-accent) 74%, white), var(--step-accent));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--step-accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
}

.step-card::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: var(--step-accent);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--step-accent) 35%, transparent);
  content: "";
  transform: translate(-50%, -45%);
}

.step-card:hover,
.step-card:focus-within {
  box-shadow: 0 30px 62px rgba(0,37,38,.14);
  transform: translateY(-6px) rotate(0);
}

.theme-voice { --accent: var(--horizon-blue); }
.theme-lead { --accent: var(--coral); }
.theme-future { --accent: var(--violet); }
.theme-voice .step-card { --step-accent: var(--horizon-blue); }
.theme-lead .step-card { --step-accent: var(--coral); }
.theme-future .step-card { --step-accent: var(--violet); }

@media (max-width: 760px) {
  .button,
  .nav-cta {
    min-height: 48px;
    padding-inline: 20px;
    border-radius: 12px 12px 12px 4px;
  }

  .path-card,
  .audience-card,
  .benefit-card,
  .info-card,
  .tier-card,
  .program-card,
  .step-card {
    border-radius: 18px 18px 18px 6px;
  }

  .step-card,
  .step-card:nth-child(3n + 2),
  .step-card:nth-child(3n) {
    min-height: 0;
    transform: none;
  }
}

/* ----- 25 · ACCESS-inspired modular homepage, expressed in RenoMe branding ----- */
.site-header .nav a {
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.site-header .nav a::after { display: none; }
.site-header .nav a:hover,
.site-header .nav a[aria-current="page"] {
  color: var(--deep-teal);
  background: linear-gradient(110deg, rgba(232,247,245,.96), rgba(224,242,254,.78));
  transform: translateY(-1px);
}

.hero-mosaic {
  min-height: auto;
  padding: 104px var(--gutter) clamp(54px, 7vw, 88px);
  color: var(--white);
  background: var(--white);
}

.hero-mosaic::before,
.hero-mosaic::after { display: none; }

.hero-mosaic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(270px, .72fr);
  gap: 16px;
  width: min(100%, 1340px);
  margin-inline: auto;
}

.hero-mosaic-main {
  position: relative;
  min-height: clamp(540px, 66vw, 720px);
  overflow: hidden;
  border-radius: 28px 28px 28px 9px;
  background: var(--deep-teal);
}

.hero-mosaic-main::after {
  position: absolute;
  inset: 26% 0 0;
  background: linear-gradient(180deg, transparent, rgba(0,37,38,.9));
  content: "";
}

.hero-mosaic-main > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-mosaic-copy {
  position: absolute;
  right: clamp(26px, 5vw, 68px);
  bottom: clamp(28px, 5vw, 58px);
  left: clamp(26px, 5vw, 68px);
  z-index: 1;
  max-width: 760px;
}

.hero-mosaic-copy .eyebrow { color: var(--teal-bright); }
.hero-mosaic-copy h1 {
  max-width: 720px;
  margin: 10px 0 14px;
  color: var(--white);
  font-size: clamp(44px, 6vw, 78px);
  line-height: .98;
  letter-spacing: -.045em;
}

.hero-mosaic-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin: 0 0 24px;
  color: rgba(255,255,255,.86);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
}

.footer-admin-link { color: rgba(255,255,255,.62); font-size: .76rem; letter-spacing: .06em; text-decoration: none; }
.footer-admin-link:hover, .footer-admin-link:focus-visible { color: #12c7b7; text-decoration: underline; text-underline-offset: .25em; }

.hero-mosaic-copy > .hero-definition {
  max-width: 680px;
  margin-bottom: 10px;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.55;
  font-weight: 550;
}

.hero-mosaic-copy > .hero-promise {
  margin-bottom: 18px;
  font-size: clamp(15px, 1.55vw, 18px);
}

.hero-glass-button {
  border-color: rgba(255,255,255,.48);
  color: var(--white);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.hero-glass-button::before { background: linear-gradient(110deg, rgba(0,65,69,.76), rgba(13,148,136,.84)); }

.hero-mosaic-side {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}

.hero-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 168px;
  padding: 30px;
  overflow: hidden;
  border-radius: 24px 24px 24px 8px;
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 18px 44px rgba(0,37,38,.12);
  transition: transform var(--motion-medium) var(--ease-out), box-shadow var(--motion-medium) var(--ease-out);
}

.hero-tile::after {
  position: absolute;
  top: -24%;
  right: -20%;
  width: 74%;
  aspect-ratio: 1;
  background: url("assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
  filter: brightness(0) invert(1);
  opacity: .13;
  transform: rotate(-14deg);
}

.hero-tile span { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.hero-tile strong { font-size: clamp(27px, 3vw, 42px); line-height: 1; letter-spacing: -.04em; }
.hero-tile-voice { background: linear-gradient(145deg, #005f82, var(--horizon-blue)); }
.hero-tile-lead { background: linear-gradient(145deg, #b9361e, var(--coral)); }
.hero-tile-future { background: linear-gradient(145deg, #4c1d95, var(--violet)); }
.hero-tile:hover { transform: translateY(-5px); box-shadow: 0 28px 58px rgba(0,37,38,.18); }

.program-brand-panel::before { display: none; }
.program-brand-panel::after {
  top: 50%;
  right: -10%;
  bottom: auto;
  width: 74%;
  height: 74%;
  opacity: .2;
  transform: translateY(-50%) rotate(-10deg);
}

.step-timeline::before,
.step-timeline::after,
.pathway-forward .step-timeline::before,
.pathway-forward .step-timeline::after,
.step-card::after,
.pathway-forward .step-card::after { display: none; }

.community-section .check-list li::before { display: none; }
.community-section .check-list li { padding-left: 0; }
.community-section .check-list { display: grid; gap: 12px; }
.community-section .check-list li {
  padding: 13px 16px;
  border-radius: 12px 12px 12px 4px;
  background: rgba(255,255,255,.62);
  box-shadow: inset 4px 0 0 var(--renewal-teal);
}

.metrics {
  align-items: end;
  gap: 12px;
  min-height: 300px;
  padding: 28px 28px 0;
  border: 1px solid var(--line);
  border-radius: 26px 26px 26px 8px;
  background:
    repeating-linear-gradient(to top, rgba(0,65,69,.07) 0 1px, transparent 1px 52px),
    linear-gradient(145deg, rgba(232,247,245,.72), rgba(255,255,255,.96));
  box-shadow: var(--shadow-soft);
}

.metric {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: var(--goal-level);
  padding: 22px 16px 24px;
  overflow: hidden;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--metric-accent, var(--renewal-teal)) 76%, white), var(--metric-accent, var(--renewal-teal)));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--metric-accent, var(--renewal-teal)) 18%, transparent);
}

.metric:nth-child(2) { --metric-accent: var(--horizon-blue); }
.metric:nth-child(3) { --metric-accent: var(--violet); }
.metric:nth-child(4) { --metric-accent: var(--renewal-teal); }
.metric:nth-child(5) { --metric-accent: var(--horizon-blue); }
.metric strong { color: var(--white) !important; font-size: clamp(27px, 3.2vw, 43px); text-wrap: nowrap; }
.metric span { color: rgba(255,255,255,.9); font-size: clamp(12px, 1.25vw, 14px); line-height: 1.35; }

.employer-section .button.secondary {
  border-color: rgba(255,255,255,.5);
  color: var(--deep-teal);
  background: var(--white);
}
.employer-section .button.secondary::before { background: linear-gradient(110deg, var(--white), var(--mist)); }

@media (max-width: 900px) {
  .hero-mosaic-grid { grid-template-columns: 1fr; }
  .hero-mosaic-side { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; }
  .hero-tile { min-height: 180px; }
  .metrics { min-height: 280px; padding-inline: 14px; }
}

@media (max-width: 640px) {
  .hero-mosaic { padding: 92px 14px 54px; }
  .hero-mosaic-main { min-height: 620px; border-radius: 22px 22px 22px 8px; }
  .hero-mosaic-main > img { object-position: 57% center; }
  .hero-mosaic-side { grid-template-columns: 1fr; }
  .hero-tile { min-height: 150px; }
  .metrics { display: grid; grid-template-columns: 1fr; min-height: 0; padding: 16px; }
  .metric { min-height: 128px; border-radius: 16px 16px 16px 5px; }
  .metric strong { text-wrap: wrap; }
}

/* ===========================================================================
   14 · Human Momentum interaction layer
   ========================================================================== */
.site-header {
  transition: background-color var(--motion-medium) var(--ease-standard), box-shadow var(--motion-medium) var(--ease-standard), backdrop-filter var(--motion-medium) var(--ease-standard);
}

.site-header.is-scrolled,
.site-header.nav-open {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 30px rgba(0, 37, 38, 0.09);
  backdrop-filter: blur(14px);
}

.nav a {
  position: relative;
  transition: color var(--motion-fast) var(--ease-standard);
}

.nav a::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--renewal-teal);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta::after, .button::after, .text-link::after { content: none; display: none; }
.nav-lock { overflow: hidden; }

.hero { overflow: hidden; }
.hero::before { transition: transform 900ms var(--ease-out); transform: scale(1.04); }
.has-js .hero::before { transform: scale(1); }
.hero-content > * { animation: hero-arrive var(--motion-section) var(--ease-out) both; }
.hero-content > :nth-child(2) { animation-delay: 90ms; }
.hero-content > :nth-child(3) { animation-delay: 170ms; }
.hero-content > :nth-child(4) { animation-delay: 240ms; }
.hero-content > :nth-child(5) { animation-delay: 310ms; }
.hero-content > :nth-child(6) { animation-delay: 380ms; }
.hero h1 span { display: block; }

@keyframes hero-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.why-layout { position: relative; }
.why-layout::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--renewal-teal); content: ""; transform: scaleY(0); transform-origin: top; transition: transform var(--motion-section) var(--ease-out); }
.why-section:has(.in) .why-layout::before { transform: scaleY(1); }
.proof-panel { background: transparent; box-shadow: none; border: 0; }
.proof-panel > div { border-top: 1px solid var(--line); transition-delay: calc(var(--reveal-index, 0) * 90ms); }

.program-pathway { display: block; border-top: 1px solid var(--line); }
.program-pathway .program-card { display: grid; grid-template-columns: minmax(180px, 28%) 1fr; min-height: 230px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; transition: background-color 340ms var(--ease-standard), opacity 340ms var(--ease-standard), transform 340ms var(--ease-out); }
.program-pathway .program-image { height: 230px; overflow: hidden; }
.program-pathway .program-image img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--motion-slow) var(--ease-out); }
.program-pathway .program-body { display: grid; align-content: center; padding: clamp(26px, 4vw, 52px); }
.program-body > span b { margin-right: 14px; color: var(--ink-soft); font-size: 0.78em; }

.step-timeline { position: relative; }
.step-timeline::before { position: absolute; top: 24px; right: 12.5%; left: 12.5%; z-index: 0; height: 2px; background: var(--line); content: ""; }
.step-timeline::after { position: absolute; top: 24px; left: 12.5%; z-index: 0; width: 75%; height: 2px; background: var(--renewal-teal); content: ""; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-section) var(--ease-out); }
.step-timeline.in::after { transform: scaleX(1); }
.step-card { position: relative; z-index: 1; }

.goals-flag { display: inline-flex; margin: 0 0 28px; padding: 7px 12px; border: 1px solid currentColor; border-radius: 999px; color: var(--renewal-teal); font-size: 12px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.metric { border-top: 3px solid var(--renewal-teal); transition-delay: calc(var(--reveal-index, 0) * 90ms); }
.path-number { display: block; margin-bottom: 28px; color: var(--renewal-teal); font-size: 13px; font-weight: 900; letter-spacing: 0.1em; }

.employer-section { color: var(--white); background: var(--dark-teal); }
.employer-section .eyebrow { color: var(--teal-bright); }
.employer-section .button.secondary { color: var(--white); border-color: rgba(255,255,255,.55); }
.trust-list { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 24px 0; padding: 0; list-style: none; }
.trust-list li { position: relative; padding-left: 18px; font-size: 14px; font-weight: 750; }
.trust-list li::before { position: absolute; left: 0; color: var(--teal-bright); content: "\2713"; }

.content-empty { max-width: 760px; padding: clamp(28px, 5vw, 56px); border: 1px solid var(--line); background: var(--mist); }

.has-js [data-reveal], .has-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); }
.has-js [data-reveal].in, .has-js .reveal.in { opacity: 1; transform: none; }
[data-reveal="stagger"].in > * { transition-delay: calc(var(--reveal-index, 0) * 90ms); }

@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .button:hover,
  .nav-cta:hover { transform: translateY(-2px); }
  .audience-card:hover, .content-card:hover { transform: translateY(-3px); border-color: rgba(13,148,136,.5); box-shadow: var(--shadow-soft); }
  .program-pathway:has(.program-card:hover) .program-card:not(:hover) { opacity: .62; }
  .program-pathway .program-card:hover, .program-pathway .program-card:focus-within { transform: translateX(4px); }
  .program-pathway .program-card:hover .program-image img, .program-pathway .program-card:focus-within .program-image img { transform: scale(1.03); }
  .program-pathway .voice:hover { background: rgba(2,132,199,.07); }
  .program-pathway .lead:hover { background: rgba(255,102,69,.07); }
  .program-pathway .future:hover { background: rgba(124,58,237,.07); }
}

@media (max-width: 980px) {
  .nav { display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), visibility 0s linear var(--motion-fast); }
  .nav-open .nav { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .why-layout::before { display: none; }
  .step-timeline::before, .step-timeline::after { display: none; }
}

@media (max-width: 640px) {
  .program-pathway .program-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; background: var(--white); }
  .program-pathway { border: 0; }
  .trust-list { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  .has-js [data-reveal], .has-js .reveal { opacity: 1; transform: none; }
  .hero::before { transform: none; }
}

/* ==========================================================================
   15 · Editorial information design
   Inspired by the RenoMe reference board: strong hierarchy, numbered pathways,
   visual contrast and clear data structures — expressed only in RenoMe tokens.
   ========================================================================== */
.section-heading h2,
.public-hero h1,
.page-hero h1 {
  text-wrap: balance;
}

.section-heading h2 {
  position: relative;
  padding-top: 18px;
}

.section-heading h2::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--renewal-teal), var(--horizon-blue));
  content: "";
}

.path-card,
.audience-card,
.benefit-card,
.info-card,
.tier-card {
  position: relative;
  overflow: hidden;
}

.path-card::after,
.audience-card::after,
.benefit-card::after,
.info-card::after,
.tier-card::after {
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 92px;
  height: 92px;
  border: 18px solid rgba(13, 148, 136, 0.07);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.step-card {
  counter-increment: renome-step;
  min-height: 190px;
  padding: 72px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.step-timeline {
  counter-reset: renome-step;
}

.step-card::before {
  position: absolute;
  top: 18px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px 12px 12px 3px;
  color: var(--white);
  background: var(--deep-teal);
  content: counter(renome-step, decimal-leading-zero);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.metric:nth-child(3n + 2) {
  border-top-color: var(--horizon-blue);
}

.metric:nth-child(3n + 2) strong {
  color: var(--horizon-blue);
}

.metric:nth-child(3n) {
  border-top-color: var(--violet);
}

.metric:nth-child(3n) strong {
  color: var(--violet);
}

.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.data-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: var(--deep-teal);
  font-size: 15px;
}

.data-table th {
  padding: 18px 20px;
  color: var(--white);
  background: var(--deep-teal);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
}

.data-table td {
  padding: 17px 20px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.data-table tbody tr:nth-child(even) {
  background: rgba(232, 247, 245, 0.42);
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Homepage pathway — approved visual concept translated into responsive UI */
.pathway-forward {
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(13, 148, 136, 0.1) 0 150px, transparent 151px),
    radial-gradient(circle at 100% 100%, rgba(2, 132, 199, 0.08) 0 190px, transparent 191px),
    var(--white);
}

.pathway-forward .section-heading {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.pathway-forward .section-heading h2 {
  padding-top: 0;
  font-size: clamp(38px, 5.4vw, 68px);
}

.pathway-forward .section-heading h2::before {
  display: none;
}

.pathway-forward .section-heading .lede {
  max-width: 720px;
  margin: 20px auto 0;
}

.pathway-forward .step-timeline {
  gap: 18px;
  margin-top: clamp(42px, 6vw, 68px);
}

.pathway-forward .step-timeline::before,
.pathway-forward .step-timeline::after {
  top: auto;
  bottom: 28px;
  left: 8%;
  width: 84%;
}

.pathway-forward .step-timeline::after {
  background: linear-gradient(90deg, var(--renewal-teal), var(--horizon-blue), var(--violet));
}

.pathway-forward .step-card {
  --pathway-color: var(--renewal-teal);
  min-height: 330px;
  padding: 112px 28px 58px;
  border-color: rgba(0, 65, 69, 0.12);
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(0, 37, 38, 0.08);
}

.pathway-forward .step-card::before {
  top: 28px;
  left: 28px;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  color: var(--dark-teal);
  background: transparent;
  font-size: clamp(48px, 5vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.pathway-forward .step-card::after {
  position: absolute;
  top: 92px;
  left: 28px;
  width: 58px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--pathway-color);
  content: "";
}

.pathway-forward .step-card h3 {
  color: var(--dark-teal);
  font-size: clamp(23px, 2.2vw, 31px);
}

.pathway-forward .step-card p {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 16px;
}

.pathway-forward .pathway-develop {
  --pathway-color: var(--renewal-teal);
}

.pathway-forward .pathway-demonstrate {
  --pathway-color: var(--horizon-blue);
}

.pathway-forward .pathway-progress {
  --pathway-color: var(--violet);
}

.pathway-forward .step-card:focus-within,
.pathway-forward .step-card:hover {
  border-color: color-mix(in srgb, var(--pathway-color) 50%, transparent);
  transform: translateY(-4px);
}

@media (max-width: 640px) {
  .step-card {
    min-height: 0;
  }

  .section-heading h2::before {
    width: 42px;
  }

  .pathway-forward .section-heading {
    text-align: left;
  }

  .pathway-forward .section-heading .lede {
    margin-inline: 0;
  }

  .pathway-forward .step-card {
    min-height: 280px;
  }
}

/* Final scoped pathway labels and RenoMe program colours. */
.pathway-forward .pathway-discover {
  --pathway-color: var(--horizon-blue);
  --step-accent: var(--horizon-blue);
}

.pathway-forward .pathway-develop {
  --pathway-color: var(--coral);
  --step-accent: var(--coral);
}

.pathway-forward .pathway-demonstrate {
  --pathway-color: var(--violet);
  --step-accent: var(--violet);
}

.pathway-forward .pathway-progress {
  --pathway-color: var(--renewal-teal);
  --step-accent: var(--renewal-teal);
}

.pathway-forward .step-card::before {
  width: auto;
  min-width: 46px;
  padding-inline: 15px;
  border-radius: 15px 15px 15px 5px;
  content: attr(data-step-label);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Five Get Involved pathways: three above, two balanced below. */
.involvement-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.involvement-grid > .audience-card {
  grid-column: span 2;
}

.involvement-grid > .audience-card:nth-child(4),
.involvement-grid > .audience-card:nth-child(5) {
  grid-column: span 3;
}

@media (max-width: 980px) {
  .involvement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .involvement-grid > .audience-card,
  .involvement-grid > .audience-card:nth-child(4),
  .involvement-grid > .audience-card:nth-child(5) {
    grid-column: auto;
  }

  .involvement-grid > .audience-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .involvement-grid {
    grid-template-columns: 1fr;
  }

  .involvement-grid > .audience-card:last-child {
    grid-column: auto;
  }
}

/* Small labels on white cards need the darker brand colour for AA contrast. */
.confirm-card > .eyebrow,
.intake-support > .eyebrow {
  color: var(--deep-teal);
}

/* Compact, action-first confirmation pages. */
.confirmation-page .page-hero {
  padding-top: clamp(122px, 12vw, 154px);
  padding-bottom: clamp(38px, 5vw, 58px);
}

.confirmation-page .confirm-card {
  max-width: 640px;
  padding: clamp(26px, 4vw, 42px);
}

.confirmation-page .confirm-card .check {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  font-size: 27px;
}

.confirmation-page .next-steps {
  margin-top: 20px;
  gap: 10px;
}

.confirmation-page .next-steps > li::before {
  background: var(--renewal-teal);
  -webkit-mask: url('/assets/logos/renome-fan-mark.svg') left center / contain no-repeat;
  mask: url('/assets/logos/renome-fan-mark.svg') left center / contain no-repeat;
}

.confirmation-page .next-steps > li:nth-child(2)::before { background: var(--horizon-blue); }
.confirmation-page .next-steps > li:nth-child(3)::before { background: var(--violet); }

.confirmation-page .confirm-card .hero-actions {
  margin-top: 20px;
}

@media (max-width: 640px) {
  .confirmation-page .page-hero {
    padding-top: 104px;
    padding-bottom: 32px;
  }

  .confirmation-page .confirm-card {
    padding: 22px 18px;
  }

  .confirmation-page .confirm-card .check {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    font-size: 23px;
  }

  .confirmation-page .next-steps li {
    padding-left: 40px;
    font-size: 14.25px;
    line-height: 1.45;
  }

  .confirmation-page .confirm-card h1 {
    font-size: 27px !important;
    line-height: 1.08;
  }

  .confirmation-page .confirm-card > p.muted {
    margin-top: 13px !important;
    margin-bottom: 0 !important;
    font-size: 15px !important;
    line-height: 1.45;
  }

  .confirmation-page .confirm-card .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .confirmation-page .confirm-card .button {
    min-width: 0;
    padding: 10px 8px;
    font-size: 13.5px;
  }
}

/* RenoMe fan language: one blade for bullets, progressive blades for sequences. */
.check-list {
  --fan-accent: var(--renewal-teal);
}

.theme-voice .check-list { --fan-accent: var(--horizon-blue); }
.theme-lead .check-list { --fan-accent: var(--coral); }
.theme-future .check-list { --fan-accent: var(--violet); }

.check-list li {
  padding-left: 30px;
}

.check-list li::before {
  display: block;
  top: .46em;
  width: 17px;
  height: 11px;
  border-radius: 1px 5px 5px 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fan-accent) 72%, white), var(--fan-accent));
  clip-path: polygon(0 44%, 100% 0, 88% 100%, 0 60%);
  transform: rotate(-4deg);
  transform-origin: left center;
}

/*
  RenoMe sequence count:
  - Steps one and two use purpose-built one- and two-blade marks.
  - Step three uses the approved three-blade RenoMe fan.
  - Five blades occupy 90deg; ten blades occupy 180deg.
*/
.fan-sequence,
.next-steps,
.review-timeline,
.step-timeline {
  --fan-count: 1;
  --fan-angle: 18deg;
}

.fan-sequence > :nth-child(1),
.next-steps > :nth-child(1),
.review-timeline > :nth-child(1),
.step-timeline > :nth-child(1) { --fan-count: 1; --fan-angle: 18deg; }
.fan-sequence > :nth-child(2),
.next-steps > :nth-child(2),
.review-timeline > :nth-child(2),
.step-timeline > :nth-child(2) { --fan-count: 2; --fan-angle: 36deg; }
.fan-sequence > :nth-child(3),
.next-steps > :nth-child(3),
.review-timeline > :nth-child(3),
.step-timeline > :nth-child(3) { --fan-count: 3; --fan-angle: 54deg; }
.fan-sequence > :nth-child(4),
.next-steps > :nth-child(4),
.review-timeline > :nth-child(4),
.step-timeline > :nth-child(4) { --fan-count: 4; --fan-angle: 72deg; }
.fan-sequence > :nth-child(5),
.next-steps > :nth-child(5),
.review-timeline > :nth-child(5),
.step-timeline > :nth-child(5) { --fan-count: 5; --fan-angle: 90deg; }
.fan-sequence > :nth-child(6),
.next-steps > :nth-child(6),
.review-timeline > :nth-child(6),
.step-timeline > :nth-child(6) { --fan-count: 6; --fan-angle: 108deg; }
.fan-sequence > :nth-child(7),
.next-steps > :nth-child(7),
.review-timeline > :nth-child(7),
.step-timeline > :nth-child(7) { --fan-count: 7; --fan-angle: 126deg; }
.fan-sequence > :nth-child(8),
.next-steps > :nth-child(8),
.review-timeline > :nth-child(8),
.step-timeline > :nth-child(8) { --fan-count: 8; --fan-angle: 144deg; }
.fan-sequence > :nth-child(9),
.next-steps > :nth-child(9),
.review-timeline > :nth-child(9),
.step-timeline > :nth-child(9) { --fan-count: 9; --fan-angle: 162deg; }
.fan-sequence > :nth-child(10),
.next-steps > :nth-child(10),
.review-timeline > :nth-child(10),
.step-timeline > :nth-child(10) { --fan-count: 10; --fan-angle: 180deg; }

.fan-sequence > li::before,
.next-steps > li::before,
.review-timeline .review-step::before,
.step-timeline .step-card::before {
  content: "";
  border: 0;
  border-radius: 0;
  background: repeating-conic-gradient(
    from 0deg at 0 100%,
    var(--fan-accent, var(--step-accent, var(--renewal-teal))) 0 12deg,
    transparent 12deg 18deg
  );
  -webkit-mask: conic-gradient(from 0deg at 0 100%, #000 0 var(--fan-angle), transparent 0);
  mask: conic-gradient(from 0deg at 0 100%, #000 0 var(--fan-angle), transparent 0);
  box-shadow: none;
  transform: none;
}

/* The first three counts use brand-shaped artwork, not generic radial stripes. */
.fan-sequence > :nth-child(1)::before,
.next-steps > :nth-child(1)::before,
.review-timeline > :nth-child(1)::before,
.step-timeline > :nth-child(1)::before {
  background: var(--fan-accent, var(--step-accent, var(--renewal-teal)));
  -webkit-mask: url('/assets/logos/renome-fan-count-1.svg') left bottom / contain no-repeat;
  mask: url('/assets/logos/renome-fan-count-1.svg') left bottom / contain no-repeat;
}

.fan-sequence > :nth-child(2)::before,
.next-steps > :nth-child(2)::before,
.review-timeline > :nth-child(2)::before,
.step-timeline > :nth-child(2)::before {
  background: var(--fan-accent, var(--step-accent, var(--renewal-teal)));
  -webkit-mask: url('/assets/logos/renome-fan-count-2.svg') left bottom / contain no-repeat;
  mask: url('/assets/logos/renome-fan-count-2.svg') left bottom / contain no-repeat;
}

.fan-sequence > :nth-child(3)::before,
.next-steps > :nth-child(3)::before,
.review-timeline > :nth-child(3)::before,
.step-timeline > :nth-child(3)::before {
  background: var(--fan-accent, var(--step-accent, var(--renewal-teal)));
  -webkit-mask: url('/assets/logos/renome-fan-mark.svg') left bottom / contain no-repeat;
  mask: url('/assets/logos/renome-fan-mark.svg') left bottom / contain no-repeat;
}

.fan-sequence > li {
  --fan-accent: var(--renewal-teal);
  padding-left: 46px;
}

.fan-sequence > li::before {
  top: .28em;
  width: 32px;
  height: 22px;
}

.next-steps > li::before {
  top: .05em;
  width: 32px;
  height: 24px;
  background: var(--renewal-teal);
  -webkit-mask: url('/assets/logos/renome-fan-mark.svg') left center / contain no-repeat;
  mask: url('/assets/logos/renome-fan-mark.svg') left center / contain no-repeat;
}

.next-steps > li:nth-child(2)::before { background: var(--horizon-blue); }
.next-steps > li:nth-child(3)::before { background: var(--violet); }

.review-timeline .review-step::before,
.step-timeline .step-card::before {
  width: 66px;
  height: 42px;
}

/* Preserve the approved homepage pathway keyword badges. */
.pathway-forward .step-card::before {
  width: auto;
  height: 46px;
  min-width: 46px;
  padding-inline: 15px;
  border-radius: 15px 15px 15px 5px;
  content: attr(data-step-label);
  background: linear-gradient(145deg, color-mix(in srgb, var(--step-accent) 74%, white), var(--step-accent));
  -webkit-mask: none;
  mask: none;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--step-accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ----- Mentor intake pilot: compact, task-first public form experience ----- */
.intake-masthead {
  position: relative;
  overflow: hidden;
  padding: clamp(104px, 7.5vw, 112px) var(--gutter) clamp(26px, 2.6vw, 36px);
  border-bottom: 1px solid rgba(0, 65, 69, 0.12);
  background:
    linear-gradient(120deg, rgba(232, 247, 245, 0.96), rgba(255, 255, 255, 0.98) 58%, rgba(239, 244, 255, 0.9));
}

.intake-masthead::after {
  position: absolute;
  right: clamp(24px, 7vw, 110px);
  bottom: -42px;
  width: clamp(120px, 16vw, 210px);
  aspect-ratio: 1;
  background: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
  opacity: 0.055;
  pointer-events: none;
}

.intake-masthead-inner {
  position: relative;
  z-index: 1;
}

.intake-masthead .breadcrumb {
  margin-bottom: 16px;
}

.intake-masthead .breadcrumb a {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.intake-masthead h1 {
  max-width: 21ch;
  margin: 7px 0 16px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.intake-masthead-copy {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.58;
}

.intake-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.intake-trust-row li {
  position: relative;
  padding-left: 24px;
  color: var(--deep-teal);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.45;
}

.intake-trust-row li::before {
  position: absolute;
  top: 0.19em;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--renewal-teal);
  -webkit-mask: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  mask: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
}

.intake-task-section {
  padding-block: clamp(28px, 3vw, 40px) clamp(68px, 8vw, 108px);
}

.intake-task-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.45fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.intake-task-layout > .intake-form {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 820px;
  justify-self: end;
  gap: 18px;
  padding: clamp(24px, 3vw, 34px);
}

.intake-support {
  grid-column: 1;
  grid-row: 1;
  padding-top: 12px;
}

.intake-support h2 {
  max-width: 13ch;
  margin: 8px 0 26px;
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.08;
}

.intake-next-steps {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.intake-next-steps li {
  position: relative;
  min-height: 28px;
  padding-left: 42px;
  color: var(--deep-teal);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 730;
  line-height: 1.48;
}

.intake-next-steps li::before {
  position: absolute;
  top: 0.05em;
  left: 0;
  width: 27px;
  height: 27px;
  background: var(--renewal-teal);
  -webkit-mask: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  mask: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
}

.intake-next-steps li:nth-child(2)::before {
  background: var(--horizon-blue);
}

.intake-next-steps li:nth-child(3)::before {
  background: var(--violet);
}

.intake-support-note {
  margin: 28px 0 0;
  padding: 18px 20px;
  border-left: 3px solid var(--renewal-teal);
  background: rgba(232, 247, 245, 0.62);
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.62;
}

.intake-task-layout .form-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 65, 69, 0.16);
}

.intake-task-layout .form-heading h2 {
  margin: 0 0 5px;
  font-size: clamp(27px, 2.5vw, 34px);
  line-height: 1.12;
}

.intake-task-layout .form-heading p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.intake-task-layout .form-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
  padding: 20px 0 2px;
  border-top: 1px solid rgba(0, 65, 69, 0.16);
}

.intake-task-layout .form-group--first {
  padding-top: 2px;
  border-top: 0;
}

.intake-task-layout .form-group-title {
  margin: 0 0 1px;
  color: var(--deep-teal);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
}

.intake-task-layout .intake-form label {
  align-self: start;
  gap: 7px;
  font-size: 15px;
  line-height: 1.35;
}

.intake-task-layout .intake-form [data-language-other][hidden] {
  display: none !important;
}

.intake-task-layout .intake-form input:not([type="checkbox"]):not([type="radio"]),
.intake-task-layout .intake-form select,
.intake-task-layout .intake-form textarea {
  min-height: 54px;
  font-size: 16px;
  line-height: 1.4;
}

.intake-task-layout .intake-form input::placeholder,
.intake-task-layout .intake-form textarea::placeholder {
  color: rgba(0, 37, 38, 0.6);
  opacity: 1;
}

.intake-task-layout .intake-form textarea {
  min-height: 138px;
}

.intake-task-layout .field-help {
  display: block;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
}

.intake-task-layout .intake-form .checkbox {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.52;
}

.intake-task-layout .form-privacy {
  font-size: 14px;
  line-height: 1.55;
}

.intake-support-link {
  margin: 22px 0 0;
  font-size: 15px;
}

@media (max-width: 980px) {
  .intake-masthead {
    padding-top: 112px;
  }

  .intake-task-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .intake-task-layout > .intake-form,
  .intake-support {
    grid-column: 1;
  }

  .intake-task-layout > .intake-form {
    grid-row: 1;
    max-width: none;
    justify-self: stretch;
  }

  .intake-support {
    grid-row: 2;
    max-width: 680px;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .intake-masthead {
    padding: 88px 18px 20px;
  }

  .intake-masthead::after {
    right: -28px;
    bottom: -34px;
    width: 130px;
  }

  .intake-masthead .breadcrumb {
    margin-bottom: 13px;
    font-size: 12px;
  }

  .intake-masthead h1 {
    max-width: none;
    margin-bottom: 13px;
    font-size: clamp(33px, 9.7vw, 38px);
  }

  .intake-masthead-copy {
    font-size: 16px;
    line-height: 1.52;
  }

  .intake-trust-row {
    display: grid;
    gap: 7px;
    margin-top: 18px;
  }

  .intake-trust-row li {
    font-size: 13.5px;
  }

  .intake-task-section {
    padding-block: 18px 70px;
  }

  .intake-task-layout {
    gap: 34px;
  }

  .intake-task-layout > .intake-form {
    gap: 17px;
    padding: 22px 18px;
  }

  .intake-task-layout .form-group {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .intake-task-layout .form-heading {
    padding-bottom: 15px;
  }

  .intake-support h2 {
    margin-bottom: 22px;
  }

  .intake-next-steps {
    gap: 17px;
  }
}

/* ----- Publish with RenoMe: editorial field-guide layout ----- */
.publish-editorial-page main h2 {
  text-wrap: balance;
}

.publish-editorial-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(106px, 8vw, 120px) var(--gutter) clamp(46px, 5vw, 66px);
  border-bottom: 1px solid rgba(0, 65, 69, 0.12);
  background:
    radial-gradient(circle at 88% 24%, rgba(2, 132, 199, 0.11), transparent 24%),
    linear-gradient(118deg, rgba(232, 247, 245, 0.98), rgba(255, 255, 255, 0.98) 64%, rgba(239, 244, 255, 0.92));
}

.publish-editorial-hero::after {
  position: absolute;
  right: clamp(18px, 7vw, 110px);
  bottom: -64px;
  width: clamp(180px, 23vw, 330px);
  aspect-ratio: 1;
  background: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
  opacity: 0.045;
  pointer-events: none;
}

.publish-editorial-hero-inner {
  position: relative;
  z-index: 1;
}

.publish-editorial-hero .breadcrumb {
  margin-bottom: 22px;
}

.publish-editorial-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.68fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
}

.publish-editorial-hero h1 {
  max-width: 15ch;
  margin: 8px 0 18px;
  font-size: clamp(44px, 5vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.publish-editorial-lede {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.58;
}

.publish-proof {
  display: grid;
  gap: 11px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.publish-proof li {
  position: relative;
  padding-left: 24px;
  color: var(--deep-teal);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 760;
}

.publish-proof li::before {
  position: absolute;
  top: 0.08em;
  left: 0;
  width: 17px;
  height: 17px;
  background: var(--renewal-teal);
  -webkit-mask: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  mask: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
}

.publish-proof li:nth-child(2)::before { background: var(--horizon-blue); }
.publish-proof li:nth-child(3)::before { background: var(--violet); }

.publish-hero-brief {
  position: relative;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid rgba(0, 65, 69, 0.14);
  border-radius: 24px 24px 24px 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 24px 64px rgba(0, 65, 69, 0.1);
  backdrop-filter: blur(10px);
}

.publish-hero-brief::before {
  position: absolute;
  top: 0;
  right: 28px;
  width: 72px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--renewal-teal), var(--horizon-blue), var(--violet));
  content: "";
}

.publish-hero-brief-label {
  margin: 0 0 13px;
  color: var(--renewal-teal);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.publish-editorial-page main .publish-hero-brief h2 {
  margin: 0 0 14px;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.publish-hero-brief > p:not(.publish-hero-brief-label) {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

.publish-editorial-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: 28px;
}

.publish-editorial-page main > .section {
  padding-block: clamp(58px, 7vw, 92px);
}

.publish-section-label {
  margin: 0 0 15px;
  color: var(--renewal-teal);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.publish-purpose-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}

.publish-purpose h2,
.publish-editorial-heading h2,
.publish-outcomes h2,
.publish-faq-block h2 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.publish-purpose-copy {
  display: grid;
  gap: 18px;
  padding-top: 30px;
}

.publish-purpose-copy p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.68;
}

.publish-tonal-section {
  border-block: 1px solid rgba(0, 65, 69, 0.08);
  background: linear-gradient(145deg, rgba(232, 247, 245, 0.56), rgba(239, 244, 255, 0.48));
}

.publish-editorial-heading {
  max-width: 850px;
  margin-bottom: clamp(30px, 4vw, 46px);
}

.publish-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.publish-pillar {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 25px 24px 28px;
  border: 1px solid rgba(0, 65, 69, 0.13);
  border-radius: 20px 20px 20px 7px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(0, 37, 38, 0.07);
}

.publish-pillar::after {
  position: absolute;
  right: -28px;
  bottom: -30px;
  width: 110px;
  aspect-ratio: 1;
  background: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
  opacity: 0.035;
}

.publish-pillar-number {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px 13px 13px 4px;
  color: var(--white);
  background: var(--renewal-teal);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.publish-pillar:nth-child(2) .publish-pillar-number { background: var(--horizon-blue); }
.publish-pillar:nth-child(3) .publish-pillar-number { background: var(--coral); }
.publish-pillar:nth-child(4) .publish-pillar-number { background: var(--violet); }

.publish-pillar h3 {
  margin: 23px 0 0;
  font-size: 22px;
  line-height: 1.18;
}

.publish-pillar p {
  margin: 13px 0 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.58;
}

.publish-guidance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.publish-guidance-panel {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(0, 65, 69, 0.14);
  border-radius: 20px 20px 20px 7px;
  background: linear-gradient(145deg, rgba(232, 247, 245, 0.78), rgba(255, 255, 255, 0.98));
}

.publish-guidance-panel-avoid {
  border-color: rgba(245, 112, 85, 0.28);
  background: linear-gradient(145deg, rgba(255, 246, 243, 0.96), rgba(255, 255, 255, 0.98));
}

.publish-guidance-panel h3 {
  margin: 0 0 22px;
  font-size: 21px;
  line-height: 1.3;
}

.publish-guidance-list {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.publish-guidance-list li {
  position: relative;
  padding-left: 36px;
  color: var(--deep-teal);
  font-size: 16px;
  line-height: 1.5;
}

.publish-guidance-list li::before {
  position: absolute;
  top: 0.12em;
  left: 0;
  width: 23px;
  height: 23px;
  background: var(--renewal-teal);
  -webkit-mask: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  mask: url("/assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
}

.publish-guidance-panel-avoid .publish-guidance-list li::before {
  background: var(--coral);
}

.publish-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: publish-stage;
}

.publish-process li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-content: start;
  padding: 24px 20px;
  border: 1px solid rgba(0, 65, 69, 0.12);
  border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, 0.94);
  counter-increment: publish-stage;
}

.publish-process li::before {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px 14px 14px 5px;
  color: var(--white);
  background: var(--deep-teal);
  content: "0" counter(publish-stage);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.publish-process strong,
.publish-process span {
  grid-column: 2;
}

.publish-process strong {
  align-self: end;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.28;
}

.publish-process span {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.publish-decision-note {
  max-width: 850px;
  margin: 26px 0 0;
  padding: 17px 20px;
  border-radius: 12px 12px 12px 4px;
  color: var(--deep-teal);
  background: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.publish-closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(400px, 1.15fr);
  gap: clamp(46px, 7vw, 96px);
  align-items: start;
}

.publish-outcomes ul {
  display: grid;
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.publish-outcomes li {
  display: grid;
  gap: 7px;
  padding: 19px 0;
  border-bottom: 1px solid rgba(0, 65, 69, 0.13);
}

.publish-outcomes li:first-child {
  border-top: 1px solid rgba(0, 65, 69, 0.13);
}

.publish-outcomes strong {
  color: var(--deep-teal);
  font-family: var(--font-display);
  font-size: 17px;
}

.publish-outcomes span {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}

.publish-faq-block .faq {
  margin-top: 30px;
}

.publish-editorial-cta {
  text-align: left;
  color: var(--white);
  background:
    linear-gradient(115deg, rgba(0, 37, 38, 0.98), rgba(0, 65, 69, 0.96));
}

.publish-editorial-cta .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 50px;
  align-items: end;
}

.publish-editorial-cta .eyebrow,
.publish-editorial-cta h2,
.publish-editorial-cta p {
  grid-column: 1;
}

.publish-editorial-cta .eyebrow {
  margin-bottom: 0;
  color: var(--teal-bright);
}

.publish-editorial-cta h2 {
  max-width: 740px;
  margin: 0;
  font-size: clamp(36px, 5vw, 62px);
}

.publish-editorial-cta p {
  max-width: 680px;
  margin: 0;
  color: var(--ink-inverse);
  font-size: 17px;
}

.publish-editorial-cta .button {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
}

@media (max-width: 980px) {
  .publish-editorial-hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .publish-hero-brief {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: 30px;
    align-items: start;
  }

  .publish-hero-brief-label,
  .publish-hero-brief h2 {
    grid-column: 1;
  }

  .publish-hero-brief > p:not(.publish-hero-brief-label),
  .publish-hero-brief .publish-proof {
    grid-column: 2;
  }

  .publish-hero-brief > p:not(.publish-hero-brief-label) {
    grid-row: 1 / span 2;
  }

  .publish-hero-brief .publish-proof {
    grid-row: 3;
  }

  .publish-pillar-grid,
  .publish-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .publish-purpose-grid,
  .publish-closing-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .publish-purpose-copy {
    max-width: 760px;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .publish-editorial-hero {
    padding: 92px 18px 42px;
  }

  .publish-editorial-hero::after {
    right: -42px;
    bottom: -38px;
    width: 150px;
  }

  .publish-editorial-hero .breadcrumb {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .publish-editorial-hero h1 {
    max-width: none;
    font-size: clamp(35px, 10vw, 40px);
  }

  .publish-editorial-hero-grid {
    gap: 26px;
  }

  .publish-editorial-lede {
    font-size: 16px;
    line-height: 1.55;
  }

  .publish-proof {
    display: grid;
    gap: 8px;
    margin-top: 20px;
  }

  .publish-hero-brief {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .publish-hero-brief::before,
  .publish-hero-brief-label,
  .publish-hero-brief h2,
  .publish-hero-brief > p:not(.publish-hero-brief-label) {
    display: none;
  }

  .publish-hero-brief .publish-proof {
    margin: 0;
  }

  .publish-editorial-actions {
    display: grid;
    justify-items: start;
    margin-top: 24px;
  }

  .publish-editorial-actions .button {
    width: 100%;
  }

  .publish-editorial-page main > .section {
    padding-block: 58px;
  }

  .publish-purpose h2,
  .publish-editorial-heading h2,
  .publish-outcomes h2,
  .publish-faq-block h2 {
    font-size: clamp(31px, 9vw, 38px);
  }

  .publish-purpose-copy p {
    font-size: 16.5px;
  }

  .publish-pillar-grid,
  .publish-guidance-grid,
  .publish-process {
    grid-template-columns: 1fr;
  }

  .publish-pillar {
    min-height: 0;
  }

  .publish-editorial-cta .container {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .publish-editorial-cta .button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 12px;
  }
}

/* ===========================================================================
   Plan C · homepage-aligned interior system
   The locked homepage remains the source of truth for shape, colour and depth.
   ========================================================================== */

.page-hero,
.public-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 38px 10px;
  background:
    radial-gradient(circle at 82% 24%, rgba(2, 132, 199, .12), transparent 31%),
    radial-gradient(circle at 64% 112%, rgba(124, 58, 237, .09), transparent 38%),
    linear-gradient(135deg, rgba(232, 247, 245, .98), rgba(247, 252, 251, .98));
  box-shadow: inset 0 -1px 0 rgba(0, 65, 69, .1);
}

.page-hero::after,
.public-hero::after {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(18px, 3vw, 42px);
  z-index: -1;
  width: clamp(220px, 28vw, 400px);
  aspect-ratio: 1;
  background: url("assets/logos/renome-fan-mark.svg") right bottom / contain no-repeat;
  content: "";
  opacity: .085;
  pointer-events: none;
}

.page-hero > .container,
.public-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero h1,
.public-hero h1 {
  max-width: 15ch;
  letter-spacing: -.04em;
}

.page-hero .breadcrumb a {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body.theme-voice .page-hero {
  background:
    radial-gradient(circle at 82% 24%, rgba(2, 132, 199, .2), transparent 34%),
    linear-gradient(135deg, rgba(232, 247, 245, .98), rgba(224, 242, 254, .94));
}

body.theme-lead .page-hero {
  background:
    radial-gradient(circle at 82% 24%, rgba(255, 107, 79, .2), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 241, 237, .96));
}

body.theme-future .page-hero {
  background:
    radial-gradient(circle at 82% 24%, rgba(124, 58, 237, .2), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(244, 240, 255, .96));
}

.program-directory-hero {
  background:
    linear-gradient(112deg, rgba(2, 132, 199, .11), transparent 28%),
    linear-gradient(128deg, transparent 45%, rgba(255, 107, 79, .1) 62%, transparent 78%),
    radial-gradient(circle at 88% 18%, rgba(124, 58, 237, .17), transparent 34%),
    linear-gradient(135deg, rgba(232, 247, 245, .98), rgba(255, 255, 255, .98));
}

.program-photo-card {
  width: min(100%, 520px);
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, var(--renewal-teal)) 28%, transparent);
  border-radius: 26px 26px 26px 9px;
  background: var(--white);
  box-shadow: 0 24px 58px rgba(0, 37, 38, .14);
}

.program-photo-card .program-image {
  height: auto;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--accent, var(--renewal-teal)) 8%, white);
}

.program-photo-card .approved-program-asset > img {
  object-fit: cover;
  object-position: center;
  transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out);
}

.program-photo-card.voice { --accent: var(--horizon-blue); }
.program-photo-card.lead { --accent: var(--coral); }
.program-photo-card.future { --accent: var(--violet); }

@media (hover: hover) and (pointer: fine) {
  .program-photo-card:hover .approved-program-asset > img,
  .program-photo-card:focus-within .approved-program-asset > img {
    filter: saturate(1.04) contrast(1.02);
    transform: scale(1.035);
  }
}

.public-hero {
  border-bottom: 1px solid rgba(0, 65, 69, .1);
}

.public-hero .eyebrow {
  color: var(--renewal-teal);
}

@media (max-width: 760px) {
  .page-hero,
  .public-hero {
    border-radius: 0 0 24px 7px;
  }

  .page-hero::after,
  .public-hero::after {
    right: 12px;
    bottom: 16px;
    width: min(54vw, 210px);
  }

  .program-photo-card {
    width: 100%;
    justify-self: stretch;
  }
}

/* Keep the complete pathway fan inside the clipped section. */
.pathway-forward::after {
  right: auto;
  bottom: 24px;
  left: 24px;
  width: 220px;
  background-position: center;
  background-size: contain;
  display: none;
}

/* Year-one goals remain a five-bar chart at every viewport. */
.impact-section .metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  height: 300px;
  min-height: 0;
}

/* About: real people, with an intentional empty state until profiles are approved. */
.about-people-heading{margin-bottom:clamp(34px,5vw,64px)}.about-people-directory{display:grid;gap:clamp(34px,5vw,64px)}.about-featured-person{display:grid;grid-template-columns:minmax(300px,46%) 1fr;gap:clamp(34px,6vw,80px);align-items:center;padding:clamp(20px,3vw,34px);border:1px solid rgba(0,109,103,.18);border-radius:32px;background:rgba(255,255,255,.76);box-shadow:0 24px 70px rgba(0,47,48,.1)}.about-featured-person h3{margin:.1em 0;font-size:clamp(38px,5vw,68px);line-height:1}.about-featured-person strong{display:block;margin-bottom:18px;color:var(--slate)}.about-featured-person>div>p:not(.eyebrow){font-size:clamp(17px,1.6vw,20px);line-height:1.7;color:var(--slate)}.about-person-photo{position:relative;min-height:300px;display:grid;place-items:center;overflow:hidden;border-radius:22px;background:linear-gradient(145deg,var(--renewal-teal),var(--horizon-blue));color:white;font-size:64px;font-weight:900}.about-person-photo.featured{min-height:520px;border-radius:26px}.about-person-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.about-people-subheading{margin:0;font-size:clamp(30px,4vw,48px)}.about-people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.about-person-card{padding:16px 16px 26px;border:1px solid rgba(0,109,103,.18);border-radius:24px;background:#fff;box-shadow:0 18px 50px rgba(0,47,48,.08)}.about-person-card .eyebrow{margin:18px 0 6px}.about-person-card h3{margin:0;font-size:28px}.about-person-card strong{display:block;margin:6px 0;color:var(--slate)}.about-person-card>p:not(.eyebrow){line-height:1.6;color:var(--slate)}.about-people-empty,.about-people-loading,.about-people-directory.is-error{padding:54px;border:1px dashed rgba(0,109,103,.38);border-radius:24px;text-align:center;background:rgba(255,255,255,.62)}
@media(max-width:900px){.about-featured-person{grid-template-columns:1fr}.about-people-grid{grid-template-columns:1fr 1fr}.about-person-photo.featured{min-height:440px}}
@media(max-width:620px){.about-people-grid{grid-template-columns:1fr}.about-featured-person{padding:16px;border-radius:24px}.about-person-photo.featured{min-height:360px}.about-person-card{border-radius:20px}}

.impact-section .metric {
  grid-column: auto;
  align-self: end;
  align-items: center;
  justify-content: center;
  height: var(--goal-level);
  min-height: 0;
  text-align: center;
  transform-origin: center bottom;
  transition: height 520ms var(--ease-out), box-shadow 520ms var(--ease-out);
}

/* Show the minimum target first and reveal the stretch target. */
.metric strong {
  position: relative;
  min-height: 1em;
}

.metric strong .metric-value-lower,
.metric strong .metric-value-upper {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.metric strong .metric-value-upper {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: translateY(35%);
}

.metric:hover strong .metric-value-lower,
.metric:focus-visible strong .metric-value-lower {
  opacity: 0;
  transform: translateY(-35%);
}

.metric:hover strong .metric-value-upper,
.metric:focus-visible strong .metric-value-upper {
  opacity: 1;
  transform: translateY(0);
}

.metric:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--metric-accent, var(--renewal-teal)) 42%, white);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .impact-section .metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: clamp(190px, 28vw, 260px);
    padding: clamp(10px, 2vw, 18px) clamp(6px, 1.5vw, 14px) 0;
    gap: clamp(4px, 1.2vw, 10px);
  }

  .impact-section .metric {
    grid-column: auto;
    height: var(--goal-level);
    min-height: 0;
    padding: clamp(10px, 1.7vw, 18px) clamp(4px, 1vw, 10px) clamp(12px, 1.8vw, 20px);
    border-radius: clamp(11px, 1.8vw, 17px) clamp(11px, 1.8vw, 17px) 0 0;
  }

  .impact-section .metric strong { font-size: clamp(18px, 4vw, 36px); }
  .impact-section .metric span { font-size: clamp(8px, 1.5vw, 12px); line-height: 1.2; }
}

@media (max-width: 640px) {
  .impact-section .metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: 180px;
    padding: 12px 6px 0;
    gap: 4px;
  }

  .impact-section .metric,
  .impact-section .metric:nth-child(4),
  .impact-section .metric:nth-child(5) {
    grid-column: auto;
    height: var(--goal-level);
    min-height: 0;
    padding: 8px 3px 10px;
    border-radius: 10px 10px 0 0;
  }

  .impact-section .metric strong { font-size: 18px; }
  .impact-section .metric span { font-size: 7.5px; line-height: 1.15; }
}

.impact-section .metric:hover {
  height: var(--goal-hover-level, var(--goal-level));
  box-shadow: 0 22px 42px color-mix(in srgb, var(--metric-accent, var(--renewal-teal)) 28%, transparent);
}

.impact-section .metric:focus-visible {
  height: var(--goal-hover-level, var(--goal-level));
  box-shadow: 0 22px 42px color-mix(in srgb, var(--metric-accent, var(--renewal-teal)) 28%, transparent);
}

.advisor-band .split-layout {
  grid-template-columns: 1fr;
}

.advisor-band .advisor-copy {
  max-width: 780px;
}

.advisor-band .advisor-copy .button {
  margin-top: 26px;
}

.brand-photo-employer::before {
  background: linear-gradient(145deg, rgba(0,37,38,.02) 34%, rgba(2,132,199,.38));
}

/* Keep the pathway fan fully visible. */
.pathway-forward::after {
  bottom: 0;
  left: 0;
  width: clamp(190px, 24vw, 330px);
  background-position: left bottom;
}

/* Mentorship image: photo revealed through the RenoMe fan over solid brand green. */
.brand-photo-community {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.impact-section .metric strong .metric-value-upper {
  right: 0;
  left: 0;
}

/* Keep all three decorative fan blades visible. */
.pathway-forward::after {
  bottom: 96px;
  left: 14px;
  width: clamp(190px, 20vw, 265px);
}

/* Balanced mentorship composition with the complete masked image. */
.community-section .community-layout {
  grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr);
  gap: clamp(44px, 6vw, 84px);
  align-items: center;
}

.community-section .brand-photo-community {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  justify-self: center;
}

.community-section .brand-photo-community img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  -webkit-mask-position: left bottom;
  -webkit-mask-size: 100% 100%;
  mask-position: left bottom;
  mask-size: 100% 100%;
}

.community-section .community-copy {
  max-width: 600px;
}

@media (max-width: 900px) {
  .community-section .community-layout {
    grid-template-columns: 1fr;
  }

  .community-section .brand-photo-community,
  .community-section .community-copy {
    max-width: 620px;
    margin-inline: auto;
  }
}

.brand-photo-community::before,
.brand-photo-community::after {
  display: none;
}

.brand-photo-community img {
  position: relative;
  z-index: 2;
  display: block;
  filter: saturate(.9) contrast(1.05);
  -webkit-mask-image: url("assets/logos/renome-fan-mark.svg");
  -webkit-mask-position: left bottom;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url("assets/logos/renome-fan-mark.svg");
  mask-position: left bottom;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.brand-photo .community-fan-caption {
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  background: none;
}

.community-fan-caption span {
  font-size: clamp(18px, 2.5vw, 34px);
  letter-spacing: -.02em;
  text-shadow: none;
}

.community-fan-caption span:nth-child(1) {
  top: 12%;
  left: 7%;
  color: var(--horizon-blue);
  font-size: clamp(17px, 2.35vw, 32px);
  transform: none;
}

.community-fan-caption span:nth-child(2) {
  top: 47%;
  right: 6%;
  left: auto;
  color: var(--coral);
  transform: none;
}

.community-fan-caption span:nth-child(3) {
  bottom: auto;
  top: 84%;
  left: 10%;
  color: var(--violet);
  font-size: clamp(18px, 2.5vw, 34px);
  transform: none;
}

/* Final positioning for the pathway mark and mentorship photo treatment. */
.pathway-forward::after {
  bottom: 44px;
  left: 18px;
  z-index: 2;
  width: clamp(180px, 19vw, 250px);
  opacity: .085;
}

.brand-photo-community img {
  -webkit-mask-position: left bottom;
  -webkit-mask-size: 135% 135%;
  mask-position: left bottom;
  mask-size: 135% 135%;
}

.brand-photo .community-fan-caption {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 26px);
  height: clamp(58px, 8vw, 82px);
  padding: 12px 18px;
  background: var(--renewal-teal);
}

.community-fan-caption span,
.community-fan-caption span:nth-child(1),
.community-fan-caption span:nth-child(2),
.community-fan-caption span:nth-child(3) {
  position: static;
  color: inherit;
  font-size: clamp(10px, 1.15vw, 15px);
  letter-spacing: .055em;
  white-space: nowrap;
  transform: none;
}

.community-fan-caption span:nth-child(1) { color: var(--horizon-blue); }
.community-fan-caption span:nth-child(2) { color: var(--coral); }
.community-fan-caption span:nth-child(3) { color: var(--violet); }

/* Shared RenoMe light-sweep hover for header and footer navigation. */
.site-header .nav a,
.footer-col a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.site-header .nav a::before,
.footer-col a::before {
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: 0;
  z-index: -1;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .72), transparent);
  content: "";
  pointer-events: none;
  transform: translateX(-190%) skewX(-18deg);
  transition: transform 560ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .site-header .nav a:hover {
    color: transparent;
    background: linear-gradient(100deg, var(--deep-teal) 20%, var(--teal-bright) 45%, var(--deep-teal) 70%);
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    box-shadow: none;
    transform: scale(1.035);
    transform-origin: left center;
    animation: renome-text-shine 760ms var(--ease-out) both;
  }

  .site-header .nav a:hover::first-letter {
    color: var(--renewal-teal);
  }

  .footer-col a:hover {
    color: transparent;
    background: linear-gradient(100deg, rgba(255,255,255,.78) 20%, var(--teal-bright) 45%, rgba(255,255,255,.78) 70%);
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    box-shadow: none;
    transform: scale(1.035);
    transform-origin: left center;
    animation: renome-text-shine 760ms var(--ease-out) both;
  }

  .footer-col a:hover::first-letter {
    color: var(--teal-bright);
  }

  .site-header .nav a:hover::before,
  .footer-col a:hover::before {
    display: none;
  }
}

@keyframes renome-text-shine {
  from { background-position: 110% 0; }
  to { background-position: -110% 0; }
}

/* Professional editorial remodel — scoped only to Why RenoMe exists. */
.why-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(18,199,183,.12), transparent 28%),
    linear-gradient(145deg, #f7fbfb, var(--mist));
}

.why-section .why-layout {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 52px);
  padding: clamp(34px, 6vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(0,65,69,.1);
  border-radius: 28px 28px 28px 9px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 28px 70px rgba(0,37,38,.1);
  backdrop-filter: blur(12px);
}

.why-section .why-layout::before {
  display: none;
}

.why-section .why-layout::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/logos/renome-fan-mark.svg") center / 82% auto no-repeat;
  content: "";
  opacity: .025;
  pointer-events: none;
}

.why-section .why-copy {
  z-index: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.1fr);
  column-gap: clamp(34px, 6vw, 78px);
  align-items: start;
}

.why-section .why-copy .eyebrow {
  grid-column: 1;
  margin-bottom: 18px;
}

.why-section .why-copy h2 {
  grid-column: 1;
  grid-row: 2 / span 2;
  margin: 0;
  max-width: 15ch;
  font-size: clamp(34px, 3.7vw, 50px);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: pretty;
}

.why-section .why-copy p:not(.eyebrow) {
  margin: 0 0 20px;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.75;
}

.why-section .why-narrative {
  grid-column: 2;
  grid-row: 1 / span 3;
  padding-top: 4px;
}

.why-section .why-narrative p:last-child {
  margin-bottom: 0;
}

.why-section .proof-panel {
  z-index: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.why-section .proof-panel > div {
  position: relative;
  min-height: 170px;
  padding: 30px 24px 26px;
  overflow: hidden;
  border: 1px solid rgba(0,65,69,.1);
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(145deg, var(--white), rgba(232,247,245,.72));
  box-shadow: 0 16px 34px rgba(0,37,38,.07);
}

.why-section .proof-panel > div::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--renewal-teal), var(--horizon-blue), var(--violet));
  content: "";
}

.why-section .proof-panel strong {
  font-size: clamp(20px, 2vw, 25px);
}

/* Homepage pathway refinements. */
.pathway-forward {
  position: relative;
  background: var(--white);
}

.pathway-forward::after {
  position: absolute;
  bottom: -72px;
  left: -38px;
  width: clamp(220px, 28vw, 390px);
  aspect-ratio: 1;
  background: url("assets/logos/renome-fan-mark.svg") center / contain no-repeat;
  content: "";
  opacity: .075;
  pointer-events: none;
}

.pathway-forward > .container {
  position: relative;
  z-index: 1;
}

.pathway-forward .pathway-discover {
  --pathway-color: var(--horizon-blue);
  --step-accent: var(--horizon-blue);
}

.pathway-forward .pathway-develop {
  --pathway-color: var(--coral);
  --step-accent: var(--coral);
}

.pathway-forward .pathway-demonstrate {
  --pathway-color: var(--violet);
  --step-accent: var(--violet);
}

.pathway-forward .pathway-progress {
  --pathway-color: var(--renewal-teal);
  --step-accent: var(--renewal-teal);
}

.pathway-forward .step-card::before {
  width: auto;
  min-width: 46px;
  padding-inline: 15px;
  border-radius: 15px 15px 15px 5px;
  content: attr(data-step-label);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Remove the image seam and add a restrained RenoMe treatment. */
.brand-photo-community::before {
  background: linear-gradient(145deg, rgba(0,37,38,.02) 34%, rgba(13,148,136,.24));
}

.brand-photo-community::after {
  display: none;
}

.brand-photo .community-fan-caption {
  right: auto;
  bottom: 14px;
  left: 20px;
  width: 255px;
  height: 290px;
  padding: 0;
  border: 0;
  color: var(--white);
  background: url("assets/logos/renome-fan-mark.svg") left bottom / contain no-repeat;
  backdrop-filter: none;
}

.community-fan-caption span {
  position: absolute;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  transform-origin: left center;
}

.community-fan-caption span:nth-child(1) {
  top: 70px;
  left: 96px;
  font-size: 11px;
  transform: rotate(-49deg);
}

.community-fan-caption span:nth-child(2) {
  top: 151px;
  left: 82px;
  transform: rotate(-25deg);
}

.community-fan-caption span:nth-child(3) {
  bottom: 34px;
  left: 82px;
  font-size: 12.5px;
}

@media (max-width: 900px) {
  .why-section .why-copy {
    grid-template-columns: 1fr;
  }

  .why-section .why-copy .eyebrow,
  .why-section .why-copy h2,
  .why-section .why-narrative {
    grid-column: 1;
    grid-row: auto;
  }

  .why-section .why-copy h2 {
    max-width: 18ch;
    margin-bottom: 26px;
  }

  .why-section .proof-panel {
    grid-template-columns: 1fr;
  }

  .why-section .proof-panel > div {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .why-section .why-layout {
    padding: 28px 22px;
    border-radius: 20px 20px 20px 7px;
  }
}

/* Menu-dash hover mirrors the locked button interaction. */
.nav-toggle {
  border: 1px solid transparent;
  transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.nav-toggle span:not(.sr-only) {
  transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav-toggle:hover {
    border-color: transparent;
    border-radius: 12px 12px 12px 4px;
    background:
      linear-gradient(var(--white), var(--white)) padding-box,
      linear-gradient(120deg, var(--teal-bright), var(--horizon-blue), var(--violet)) border-box;
    box-shadow: 0 8px 18px rgba(0, 65, 69, .1);
    transform: translateY(-2px);
  }

  .nav-toggle:hover span:not(.sr-only) {
    background: var(--renewal-teal);
  }
}

/* Final cascade for the RenoMe dimensional system. */
.path-card,
.audience-card,
.benefit-card,
.info-card,
.tier-card,
.content-card,
.publish-card,
.person-card {
  border: 1px solid rgba(0, 65, 69, 0.1);
  border-radius: 20px 20px 20px 7px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,252,251,.94));
  box-shadow: 0 18px 42px rgba(0,37,38,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

.path-card::after,
.audience-card::after,
.benefit-card::after,
.info-card::after,
.tier-card::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 12px;
  height: auto;
  border: 0;
  border-radius: 0 20px 20px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-accent, var(--renewal-teal)) 72%, white), var(--card-accent, var(--renewal-teal)));
  box-shadow: -8px 0 22px color-mix(in srgb, var(--card-accent, var(--renewal-teal)) 14%, transparent);
}

.step-timeline { gap: clamp(18px, 2.4vw, 28px); }
.step-timeline::before { background: repeating-linear-gradient(90deg, rgba(0,65,69,.2) 0 9px, transparent 9px 18px); }

.step-card,
.pathway-forward .step-card {
  --step-accent: var(--pathway-color, var(--renewal-teal));
  min-height: 230px;
  padding: 82px 26px 28px;
  border: 1px solid color-mix(in srgb, var(--step-accent) 20%, transparent);
  border-radius: 24px 24px 24px 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), color-mix(in srgb, var(--step-accent) 8%, white));
  box-shadow: 0 22px 48px rgba(0,37,38,.1);
  transform: rotate(-0.45deg);
}

.step-card:nth-child(3n + 2) { --step-accent: var(--horizon-blue); transform: rotate(.55deg); }
.step-card:nth-child(3n) { --step-accent: var(--violet); }

.step-card::before,
.pathway-forward .step-card::before {
  top: 22px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 50% 12px;
  color: var(--white);
  background: linear-gradient(145deg, color-mix(in srgb, var(--step-accent) 74%, white), var(--step-accent));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--step-accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .06em;
}

.step-card::after,
.pathway-forward .step-card::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: var(--step-accent);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--step-accent) 35%, transparent);
  content: "";
  transform: translate(-50%, -45%);
}

.step-card:hover,
.step-card:focus-within,
.pathway-forward .step-card:hover,
.pathway-forward .step-card:focus-within {
  box-shadow: 0 30px 62px rgba(0,37,38,.14);
  transform: translateY(-6px) rotate(0);
}

@media (max-width: 760px) {
  .step-card,
  .step-card:nth-child(3n + 2),
  .step-card:nth-child(3n),
  .pathway-forward .step-card {
    min-height: 0;
    transform: none;
  }
}

/* Connector-free step cards requested for the final homepage system. */
.step-timeline::before,
.step-timeline::after,
.pathway-forward .step-timeline::before,
.pathway-forward .step-timeline::after,
.step-card::after,
.pathway-forward .step-card::after {
  display: none;
}

.employer-section .button.secondary {
  border-color: rgba(255,255,255,.5);
  color: var(--deep-teal);
  background: var(--white);
}

.employer-section .button.secondary::before {
  background: linear-gradient(110deg, var(--white), var(--mist));
}

/* Elegant colour-swap hover: preserve every button's existing shape and size. */
.button::before,
.nav-cta::before {
  transition: opacity var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .button.primary:hover,
  .nav-cta:hover,
  .button.dark:hover,
  .hero-glass-button:hover {
    border-color: transparent;
    color: var(--deep-teal);
    background:
      linear-gradient(110deg, var(--white), var(--mist)) padding-box,
      linear-gradient(120deg, var(--renewal-teal), var(--horizon-blue), var(--violet)) border-box;
  }

  .button.secondary:hover,
  .button.ghost:hover {
    border-color: transparent;
    color: var(--white);
    background:
      linear-gradient(110deg, var(--deep-teal), var(--gradient-teal-end)) padding-box,
      linear-gradient(120deg, var(--teal-bright), var(--horizon-blue), var(--violet)) border-box;
  }

  .button:hover::before,
  .nav-cta:hover::before {
    opacity: 0;
  }

  .theme-voice .button.primary:hover { color: var(--horizon-blue); }
  .theme-lead .button.primary:hover { color: var(--coral); }
  .theme-future .button.primary:hover { color: var(--violet); }

  .employer-section .button.secondary:hover {
    color: var(--white);
    background:
      linear-gradient(110deg, var(--deep-teal), var(--gradient-teal-end)) padding-box,
      linear-gradient(120deg, var(--teal-bright), var(--horizon-blue)) border-box;
  }
}

/* Keep pathway keyword badges and program colours after the final card cascade. */
.pathway-forward .pathway-discover { --pathway-color: var(--horizon-blue); --step-accent: var(--horizon-blue); }
.pathway-forward .pathway-develop { --pathway-color: var(--coral); --step-accent: var(--coral); }
.pathway-forward .pathway-demonstrate { --pathway-color: var(--violet); --step-accent: var(--violet); }
.pathway-forward .pathway-progress { --pathway-color: var(--renewal-teal); --step-accent: var(--renewal-teal); }

.pathway-forward .step-card::before {
  width: auto;
  min-width: 46px;
  padding-inline: 15px;
  border-radius: 15px 15px 15px 5px;
  content: attr(data-step-label);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Current volunteer openings extend the existing RenoMe card and form styles. */
.volunteer-openings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.volunteer-openings .audience-card { display: flex; flex-direction: column; align-items: flex-start; }
.volunteer-openings .audience-card .button { margin-top: auto; }
.volunteer-role-description { max-width: 850px; margin-top: 44px; }
.volunteer-role-description h3 { margin-top: 28px; }
.intake-form [hidden] { display: none !important; }
.intake-form input[type="file"] { max-width: 100%; padding: 12px; font-size: 1rem; }
@media (max-width: 760px) { .volunteer-openings { grid-template-columns: 1fr; } }