:root {
  color-scheme: light;
  --ink: #20162d;
  --ink-soft: #5b5166;
  --paper: #fbf7ef;
  --white: #fffdf8;
  --line: #ded2bf;
  --evergreen: #3b1d5a;
  --teal: #6f3fa0;
  --clay: #9a6335;
  --gold: #d8a72f;
  --night: #1b1028;
  --mist: #f0e8f8;
  --sun-soft: #f6e5a6;
  --radius: 8px;
  --shadow: 0 22px 70px rgba(59, 29, 90, 0.14);
  /* Single source of truth for outer page gutter.
     Used by header, content sections, and footer so they all align. */
  --page-gutter: 96px;
  --content-max: 1140px;
}

@media (max-width: 980px) {
  :root {
    --page-gutter: 48px;
  }
}

@media (max-width: 640px) {
  :root {
    --page-gutter: 24px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Public Sans", "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(59, 29, 90, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(216, 167, 47, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
}

a {
  color: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px var(--page-gutter);
  border-bottom: 1px solid rgba(216, 208, 196, 0.85);
  background: rgba(251, 247, 239, 0.94);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--evergreen);
  text-decoration: none;
  font-weight: 800;
  line-height: 1.05;
}

.brand-mark {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 0;
  background: url("/assets/pdhs-logo-upload.png") center / contain no-repeat;
  color: transparent;
  font-family: "Fraunces", Georgia, serif;
  box-shadow: none;
}

.brand > span:not(.brand-mark) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 700;
}

.nav a,
.site-footer a,
.text-link {
  text-decoration: none;
}

.nav a:hover,
.text-link:hover,
.site-footer a:hover {
  color: var(--teal);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--evergreen);
  border-radius: var(--radius);
  background: var(--evergreen);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: #2b1343;
}

.button.ghost {
  background: transparent;
  color: var(--evergreen);
}

.button.ghost:hover {
  background: var(--mist);
}

.button.light {
  border-color: var(--sun-soft);
  background: var(--sun-soft);
  color: var(--evergreen);
}

.button.small {
  min-height: 40px;
  font-size: 0.9rem;
}

.hero,
.page-hero,
.section,
.final-cta {
  /* Content width: capped at --content-max, with --page-gutter on each side.
     Aligns with the header and footer which use the same variable. */
  width: min(var(--content-max), calc(100% - 2 * var(--page-gutter)));
  margin: 0 auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 44px;
  align-items: center;
  min-height: auto;
  padding: 72px 0 56px;
}

.hero-content {
  display: grid;
  gap: 28px;
  align-items: start;
}

.page-hero {
  padding: 78px 0 44px;
}

.hero-copy,
.page-hero .narrow {
  max-width: 850px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--clay);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.02;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2.8rem, 4.8vw, 4.8rem);
  max-width: 980px;
}

h2 {
  font-size: clamp(2rem, 4vw, 4rem);
}

h3 {
  font-size: 1.35rem;
}

p {
  color: var(--ink-soft);
  line-height: 1.72;
}

/* Hero Image */
.hero-image {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: slideIn 700ms ease-out;
}

.hero-image img {
  width: 100%;
  aspect-ratio: 7 / 5;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.hero-image:hover img {
  transform: scale(1.02);
}

.hero-image figcaption {
  padding: 10px 14px;
  background: var(--mist);
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: right;
}

.hero-image figcaption a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}

.hero-image figcaption a:hover {
  text-decoration: underline;
}

/* Section Images */
.section-image {
  border-radius: var(--radius);
  overflow: hidden;
  margin: 28px 0;
  box-shadow: 0 8px 24px rgba(23, 32, 35, 0.08);
  animation: fadeIn 600ms ease-out;
}

.section-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.section-image:hover img {
  transform: scale(1.01);
}

/* Entrance animations
   Pattern: animation uses `backwards` fill-mode so the invisible "from" state
   only applies during the animation. If animations are disabled (Reduce Motion,
   browser quirks, etc.) the element falls back to its normal visible state.
   Do NOT set opacity: 0 as a baseline — that strands elements invisible when
   animations don't run. */
.metric {
  animation: slideUp 500ms ease-out backwards, metricPulse 2800ms ease-in-out 900ms infinite;
}

.metric:nth-of-type(1) { animation-delay: 100ms, 1000ms; }
.metric:nth-of-type(2) { animation-delay: 220ms, 1120ms; }
.metric:nth-of-type(3) { animation-delay: 340ms, 1240ms; }

/* Step Card Animation */
.steps article {
  animation: fadeIn 600ms ease-out backwards;
}

.steps article:nth-child(1) { animation-delay: 100ms; }
.steps article:nth-child(2) { animation-delay: 200ms; }
.steps article:nth-child(3) { animation-delay: 300ms; }
.steps article:nth-child(4) { animation-delay: 400ms; }

/* Issue Grid Animation */
.issue-grid article {
  animation: fadeIn 600ms ease-out backwards;
}

.issue-grid article:nth-child(1) { animation-delay: 100ms; }
.issue-grid article:nth-child(2) { animation-delay: 200ms; }
.issue-grid article:nth-child(3) { animation-delay: 300ms; }
.issue-grid article:nth-child(4) { animation-delay: 400ms; }

/* Keyframe Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes metricPulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 rgba(216, 167, 47, 0);
  }
  45% {
    box-shadow: inset 4px 0 0 rgba(216, 167, 47, 0.28);
  }
}

/* Enhanced Button Interactions */
.button {
  transition: all 200ms ease;
  position: relative;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(23, 32, 35, 0.15);
}

.button:active {
  transform: translateY(0);
}

.button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.button.ghost:hover {
  background: var(--mist);
  transform: translateY(-2px);
}

/* Enhanced Link Interactions */
.nav a:focus-visible,
.text-link:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-color: var(--teal);
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .metric,
  .hero-image img,
  .section-image img,
  .steps article,
  .issue-grid article,
  .button,
  * {
    animation: none !important;
    transition: none !important;
  }
}

.lede {
  max-width: 820px;
  margin: 24px 0 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

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

.hero-panel,
.note-panel,
.form-card,
.resource-card,
.issue-grid article,
.steps article,
.offer,
.founder,
.content-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.82);
  box-shadow: var(--shadow);
}

.hero-panel {
  padding: 28px 32px;
}

.panel-label {
  margin-top: 0;
  color: var(--clay);
  font-weight: 800;
}

.metric {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.metric strong,
.metric span {
  display: block;
}

.metric strong {
  color: var(--ink);
}

.metric span {
  margin-top: 6px;
  color: var(--ink-soft);
}

.section {
  padding: 72px 0;
}

.split,
.founder {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: start;
}

.issue-grid,
.steps,
.deliverables,
.resource-grid,
.cards-grid {
  display: grid;
  gap: 16px;
}

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

.issue-grid article,
.steps article,
.resource-card,
.content-card {
  padding: 24px;
}

.cost-band,
.final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  /* Generous horizontal padding so headings and body don't run to the card edge */
  padding: 56px 72px;
  border-radius: var(--radius);
  background: var(--evergreen);
  color: var(--white);
}

.cost-band p,
.cost-band .eyebrow,
.final-cta p,
.final-cta h2 {
  color: rgba(255, 253, 248, 0.88);
}

.cost-band h2 {
  color: var(--white);
}

.steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
}

.compact-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.steps span {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--teal);
  font-weight: 900;
}

.founder {
  padding: 44px 56px;
}

.cred-list,
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cred-list li,
.check-list li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-weight: 700;
}

.text-link {
  color: var(--teal);
  font-weight: 800;
}

.offer {
  padding: 52px 64px;
}

.deliverables {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px 0;
}

.deliverables span {
  padding: 14px;
  border-left: 4px solid var(--gold);
  background: linear-gradient(90deg, rgba(216, 167, 47, 0.16), rgba(240, 232, 248, 0.95));
  font-weight: 800;
}

.final-cta {
  margin-bottom: 72px;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, auto) minmax(220px, auto);
  align-items: start;
  gap: 24px;
  padding: 32px var(--page-gutter);
  border-top: 1px solid var(--line);
  background: var(--night);
  color: var(--white);
}

.site-footer p {
  margin: 0;
  color: var(--white);
  font-weight: 800;
}

.footer-disclaimer {
  max-width: 520px;
  margin-top: 12px !important;
  color: rgba(255, 253, 248, 0.68) !important;
  font-size: 0.78rem;
  font-weight: 500 !important;
  line-height: 1.55;
}

.footer-contact {
  display: grid;
  gap: 6px;
  color: rgba(255, 253, 248, 0.78);
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.55;
}

.footer-contact a {
  color: var(--sun-soft);
  text-decoration: none;
  font-weight: 800;
}

.site-footer nav {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  color: rgba(255, 253, 248, 0.75);
}

.page-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 32px;
  align-items: start;
}

.contact-single {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

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

.phase {
  padding: 28px;
  border-left: 5px solid var(--teal);
  background: var(--white);
}

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

.form-card {
  padding: 36px 44px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

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

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

.disclaimer {
  font-size: 0.9rem;
}

.form-note,
.form-consent {
  margin: 18px 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
}

.form-note {
  color: var(--clay);
  font-weight: 800;
}

.form-consent a {
  color: var(--teal);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content {
  max-width: 860px;
}

.legal-content h2 {
  margin-top: 34px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.legal-content ul {
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.legal-content .effective-date {
  color: var(--ink);
  font-weight: 800;
}

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

.resource-card h3 {
  min-height: 3.3rem;
}

.lead-magnet-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
}

.lead-magnet-download {
  justify-self: start;
}

.lead-magnet-band,
.proof-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  gap: 32px;
  align-items: start;
}

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

.proof-metrics article {
  display: grid;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.proof-metrics strong {
  color: var(--teal);
  font-size: 1.9rem;
  line-height: 1;
}

.proof-metrics span {
  color: var(--ink-soft);
  line-height: 1.55;
}

@media (min-width: 981px) {
  /* Width is set via the --page-gutter / --content-max custom properties at
     the top of the file. Nothing to override here. */

  .hero {
    gap: 56px;
    padding: 86px 0 72px;
  }

  .hero-copy {
    max-width: 690px;
  }

  .hero h1 {
    font-size: clamp(3.1rem, 4.2vw, 4.55rem);
    max-width: 690px;
  }

  .page-hero h1 {
    font-size: clamp(3rem, 4.4vw, 4.7rem);
    max-width: 960px;
  }

  .lede {
    font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  }

  .hero-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 22px 24px;
  }

  .hero-panel .panel-label {
    grid-column: 1 / -1;
  }

  .metric {
    padding: 16px 18px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .metric:nth-of-type(1) {
    border-left: 0;
  }

  .split {
    grid-template-columns: minmax(420px, 0.92fr) minmax(0, 1.08fr);
  }

  .section-image {
    max-width: 640px;
  }

  .cost-band .section-image {
    max-width: 560px;
  }

  .section > .section-image {
    max-width: 860px;
    margin-top: 34px;
  }

  .founder {
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  }
}

@media (max-width: 980px) {
  .site-header {
    position: static;
    flex-wrap: wrap;
  }

  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .hero,
  .split,
  .founder,
  .page-grid,
  .contact-single {
    grid-template-columns: 1fr;
  }

  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 52px;
  }

  .steps,
  .deliverables,
  .resource-grid,
  .compact-steps,
  .lead-magnet-band,
  .proof-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .results {
    position: static;
  }

  .hero-image {
    order: 2;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 16px var(--page-gutter);
  }

  .brand {
    font-size: 0.86rem;
  }

  .brand-mark {
    width: 92px;
    height: 92px;
  }

  /* Width is set via --page-gutter / --content-max custom properties at the
     top of the file. The mobile breakpoint overrides --page-gutter to 24px. */

  .site-footer {
    padding: 32px var(--page-gutter);
  }

  h1 {
    font-size: 3rem;
  }

  .cost-band,
  .final-cta,
  .founder,
  .offer {
    padding: 28px;
  }

  .cost-band,
  .final-cta {
    display: grid;
  }

  .issue-grid,
  .steps,
  .compact-steps,
  .deliverables,
  .resource-grid,
  .cards-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .site-footer {
    display: grid;
  }
}

/* Consulting-site refinement */
body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  background: var(--paper);
}

body::before {
  content: none;
}

.site-header {
  padding: 8px var(--page-gutter);
  border-bottom: 1px solid rgba(222, 210, 191, 0.9);
  background: rgba(255, 255, 255, 0.94);
}

.brand-mark {
  width: 88px;
  height: 88px;
}

.nav {
  gap: 18px;
  font-size: 0.88rem;
}

.button {
  min-height: 42px;
  padding: 0 16px;
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: none;
}

.button:hover {
  background: #2b1343;
}

.button.ghost {
  border-color: var(--line);
  background: var(--white);
  color: var(--evergreen);
}

.button.light {
  border-color: var(--sun-soft);
  background: var(--sun-soft);
  color: var(--night);
}

.hero {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
  gap: 36px;
  padding: 58px 0 46px;
}

.hero-copy,
.page-hero .narrow {
  max-width: 760px;
}

h1,
h2,
h3 {
  font-family: "Manrope", "Segoe UI", sans-serif;
  line-height: 1.1;
  letter-spacing: 0;
}

h1 {
  max-width: 760px;
  font-size: clamp(2.25rem, 4vw, 3.85rem);
}

h2 {
  font-size: clamp(1.65rem, 2.6vw, 2.65rem);
}

h3 {
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
}

.lede {
  margin-top: 18px;
  font-size: clamp(1rem, 1.35vw, 1.17rem);
}

p {
  line-height: 1.65;
}

.eyebrow {
  margin-bottom: 10px;
  color: var(--teal);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.hero-panel,
.note-panel,
.form-card,
.resource-card,
.issue-grid article,
.steps article,
.offer,
.founder,
.content-card,
.study-carousel {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.hero-image,
.section-image {
  box-shadow: var(--shadow);
}

.section {
  padding: 56px 0;
}

.section.cost-band,
.section.founder,
.section.offer {
  padding: clamp(32px, 4vw, 56px);
}

.split,
.founder {
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
}

.cost-band,
.final-cta {
  background: linear-gradient(135deg, #3b1d5a, #6f3fa0);
}

.research-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 0.95fr);
  gap: 28px;
  align-items: start;
}

.research-section > *,
.study-carousel {
  min-width: 0;
}

.research-copy {
  max-width: 440px;
}

.study-carousel {
  padding: 26px;
}

.study-carousel-head,
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.study-carousel-head h3 {
  max-width: 720px;
}

.carousel-controls {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-weight: 800;
}

.icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--evergreen);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

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

.table-frame {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  background: var(--white);
}

.data-table th,
.data-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 0.9rem;
}

.data-table th {
  background: var(--mist);
  color: var(--evergreen);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

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

.portrait-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.portrait-card img {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  object-position: center top;
}

.portrait-card figcaption {
  display: grid;
  gap: 5px;
  padding: 18px;
  color: var(--ink-soft);
}

.portrait-card strong {
  color: var(--ink);
}

.about-portrait img {
  max-height: 720px;
}

@media (min-width: 981px) {
  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.45rem, 3.4vw, 3.9rem);
    max-width: 820px;
  }

  .hero-panel {
    grid-template-columns: 1fr;
  }

  .metric,
  .metric:nth-of-type(1) {
    border-left: 0;
  }
}

@media (max-width: 980px) {
  .hero,
  .split,
  .founder,
  .page-grid,
  .contact-single {
    grid-template-columns: 1fr;
  }

  .hero-content {
    width: 100%;
  }

  .research-section {
    grid-template-columns: 1fr;
  }

  .lead-magnet-band,
  .compact-steps,
  .proof-section {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 640px) {
  .brand-mark {
    width: 72px;
    height: 72px;
  }

  h1 {
    font-size: 2.25rem;
  }

  .study-carousel {
    padding: 20px;
  }

  .section.cost-band,
  .section.founder,
  .section.offer {
    padding: 24px;
  }

  .study-carousel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    justify-content: flex-start;
  }

  .table-frame {
    overflow-x: visible;
    border: 0;
  }

  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 12px;
    background: transparent;
  }

  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .data-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
  }

  .data-table td {
    display: grid;
    grid-template-columns: minmax(95px, 0.42fr) minmax(0, 1fr);
    gap: 12px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 0.82rem;
  }

  .data-table td::before {
    content: attr(data-label);
    color: var(--evergreen);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
  }

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