/* ==========================================================================
   Page-specific composition — hero, diagram, page sections.
   Shared across pages by class name; section-unique rules only.
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------------ */
.hero {
  padding-block: var(--space-2xl) var(--space-xl);
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.hero__eyebrow {
  margin-block-end: var(--space-sm);
}

.hero h1 {
  font-size: var(--text-4xl);
  max-width: 16ch;
}

.hero__lede {
  margin-block-start: var(--space-md);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.hero__credibility {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline-inverse);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-text-inverse-muted);
  max-width: 46ch;
}

.hero__diagram {
  inline-size: 100%;
  block-size: auto;
  color: var(--color-line-dark);
}

/* Below ~640px the diagram's five labeled nodes shrink below legible size
   in the available column width. It's decorative (aria-hidden) and the
   same modernization-path story is told in full detail — and full
   width — later on the page in the "Visual modernization pathway"
   section, so hide it here rather than ship illegible text. */
@media (max-width: 639px) {
  .hero__visual {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  /* Medium desktop: the base fluid clamp is already near its max here,
     which makes the headline overpower the hero diagram beside it. Step
     it down slightly until 1440px gives both columns enough room. */
  .hero h1 {
    font-size: clamp(2.75rem, 2.1rem + 2.4vw, 3.75rem);
  }
}

@media (min-width: 1440px) {
  .hero h1 {
    font-size: var(--text-4xl);
  }
}

/* ---- Credibility strip ------------------------------------------------------ */
.credibility-strip {
  padding-block: var(--space-lg);
}

.credibility-strip__row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

.credibility-strip__item {
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--color-accent);
}

.credibility-strip__item h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: none;
  color: var(--color-text-muted);
  margin-block-end: var(--space-3xs);
}

.credibility-strip__item p {
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .credibility-strip__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Section headers ---------------------------------------------------------- */
.section-head {
  max-width: 44rem;
  margin-block-end: var(--space-lg);
}

.section-head h2 {
  margin-block-start: var(--space-2xs);
}

.section-head p {
  margin-block-start: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.on-dark .section-head p {
  color: var(--color-text-inverse-muted);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* ---- Modernization pathway diagram section ------------------------------------- */
.pathway {
  overflow-x: auto;
  padding-block: var(--space-md);
}

.pathway svg {
  min-inline-size: 640px;
  width: 100%;
  height: auto;
}

/* ---- Industries -------------------------------------------------------------- */
.industry-list {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
}

.industry-item {
  border: var(--border-hairline);
  padding: var(--space-md);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .industry-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .industry-list {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---- Founder / about ----------------------------------------------------------- */
.founder {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}

.founder__photo {
  aspect-ratio: 4 / 5;
  background-color: var(--color-slate-700);
  border: var(--border-hairline-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse-muted);
  text-align: center;
  padding: var(--space-lg);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.founder__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
}

@media (min-width: 1024px) {
  .founder {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
  }
}

.founder-page__bio {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .founder-page__bio {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }
}

/* ---- Scenario / representative engagements -------------------------------------- */
.scenario-list {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .scenario-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Academy preview strip ------------------------------------------------------- */
.academy-preview {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 1024px) {
  .academy-preview {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Final CTA band --------------------------------------------------------------- */
.final-cta {
  padding-block: var(--space-2xl);
  text-align: center;
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

/* ---- Assessment page: what-you-answer list ----------------------------------------- */
.answers-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .answers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Strategy chip list -------------------------------------------------------------- */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* ---- Capability statement (capabilities.html) ---------------------------------------- */
.capstate {
  padding-block: var(--space-xl);
}

.capstate__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block-end: var(--space-md);
  border-block-end: 2px solid var(--color-ink-900);
  margin-block-end: var(--space-lg);
}

.capstate__section {
  margin-block-end: var(--space-lg);
}

.capstate__section h2 {
  font-size: var(--text-lg);
  border-block-end: var(--border-hairline);
  padding-block-end: var(--space-2xs);
  margin-block-end: var(--space-sm);
}

.capstate__meta-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .capstate__meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 404 page --------------------------------------------------------------------------- */
.error-page {
  min-block-size: 70svh;
  display: flex;
  align-items: center;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent-strong);
  letter-spacing: var(--tracking-tight);
}

/* ---- Contact page ---------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}

.contact-aside {
  position: sticky;
  top: calc(4.5rem + var(--space-lg));
}

/* ---- Privacy / legal text pages ---------------------------------------------------------- */
.prose h2 {
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-sm);
}

.prose h2:first-child {
  margin-block-start: 0;
}

.prose ul {
  list-style: disc;
  padding-inline-start: 1.25em;
}

.prose li + li {
  margin-block-start: var(--space-2xs);
}

.prose ul,
.prose ol {
  margin-block-start: var(--space-sm);
}