/* ==========================================================================
   Components — B2B site. Depends on tokens.css.
   Shared primitives (section header, buttons, hero, credibility, stats,
   final CTA) mirror the coaching property's system so both feel like one
   brand. Everything below the primitives is specific to the B2B offer
   pages, buyer-recognition grid, method steps, and contact form.
   ========================================================================== */

/* ---- Section header ---- */

.section-title {
  text-align: center;
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-md);
}

.section-subtitle {
  text-align: center;
  font-size: var(--font-size-2xl);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3xl);
  max-width: var(--prose-max-sm);
  margin-left: auto;
  margin-right: auto;
}

.section-eyebrow {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--space-sm);
}

/* ---- Page header (interior pages without a full hero) ---- */

.page-header {
  padding: var(--space-px-120) 0 var(--space-px-80);
  text-align: center;
}

@media (max-width: 768px) {
  .page-header {
    padding: var(--space-px-120) 0 var(--space-px-60);
  }
}

/* ---- Buttons ---- */

.btn {
  display: inline-block;
  padding: var(--space-px-14) var(--space-px-30);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  text-align: center;
  transition: all var(--duration-fast);
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-bg);
}

.btn-primary:hover {
  background: var(--color-gold-hover);
  transform: translateY(var(--lift-sm));
  box-shadow: var(--shadow-gold-md);
}

.btn-secondary {
  background: var(--overlay-white-05);
  border: var(--space-px-2) solid var(--overlay-white-10);
  color: var(--color-text);
  backdrop-filter: blur(var(--blur-sm));
}

.btn-secondary:hover {
  border-color: var(--color-gold);
  background: var(--overlay-gold-10);
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-lg {
  padding: var(--space-px-20) var(--space-px-50);
  border-radius: var(--radius-md);
}

.btn-lg.btn-primary {
  box-shadow: var(--shadow-gold-md);
}

.btn-lg.btn-primary:hover {
  box-shadow: var(--shadow-gold-lg);
  transform: translateY(var(--lift-md));
}

/* ---- Section wrapper ---- */

.section {
  padding: var(--space-px-120) var(--space-px-40);
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-px-80) var(--space-px-20);
  }
}

.section-alt {
  background: var(--overlay-white-03);
  border-top: var(--space-px-1) solid var(--overlay-white-05);
  border-bottom: var(--space-px-1) solid var(--overlay-white-05);
}

/* ---- Hero ---- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: var(--space-px-120) var(--space-px-40) var(--space-px-80);
}

.hero-aurora {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center, var(--overlay-gold-10) 0%, transparent 55%);
  animation: aurora-breathe var(--duration-aurora-breathe) var(--ease-smooth) infinite;
  pointer-events: none;
}

.hero-aurora::before,
.hero-aurora::after {
  content: '';
  position: absolute;
  inset: 0;
}

.hero-aurora::before {
  background: radial-gradient(ellipse at 68% 32%, var(--overlay-gold-15) 0%, transparent 50%);
  animation:
    aurora-rotate var(--duration-aurora-slow) linear infinite,
    aurora-pulse var(--duration-aurora-pulse) ease-in-out infinite;
}

.hero-aurora::after {
  background: radial-gradient(ellipse at 30% 70%, var(--overlay-gold-secondary-15) 0%, transparent 45%);
  animation:
    aurora-rotate-reverse var(--duration-aurora-mid) linear infinite,
    aurora-pulse var(--duration-aurora-pulse) ease-in-out infinite reverse;
}

@keyframes aurora-rotate {
  to { transform: rotate(1turn); }
}

@keyframes aurora-rotate-reverse {
  to { transform: rotate(-1turn); }
}

@keyframes aurora-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@keyframes aurora-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

.hero-content {
  position: relative;
  z-index: var(--z-content);
  max-width: var(--content-max);
}

.hero .hero-badge,
.hero h1,
.hero .hero-subtitle,
.hero .hero-cta-group {
  animation: hero-enter var(--duration-slow) var(--ease-smooth) both;
}

.hero h1 { animation-delay: var(--stagger-step); }
.hero .hero-subtitle { animation-delay: calc(var(--stagger-step) * 2); }
.hero .hero-cta-group { animation-delay: calc(var(--stagger-step) * 3); }

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(var(--fade-offset));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-badge {
  display: inline-block;
  padding: var(--space-px-8) var(--space-px-20);
  background: var(--overlay-gold-15);
  border: var(--space-px-1) solid var(--overlay-gold-30);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold);
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.hero h1 {
  font-size: var(--font-size-hero-title);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  max-width: 880px;
  margin: 0 auto var(--space-lg);
}

.hero h1 .highlight,
.final-cta-title .highlight {
  background: linear-gradient(135deg, var(--color-gold-secondary), var(--color-gold) 55%, var(--color-gold-hover));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  font-size: var(--font-size-hero-subtitle);
  color: var(--color-text-secondary);
  max-width: var(--prose-max);
  margin: 0 auto var(--space-2xl);
}

.hero-cta-group {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hero-secondary-link {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  transition: color var(--duration-fast);
}

.hero-secondary-link:hover {
  color: var(--color-gold);
}

@media (max-width: 768px) {
  .hero-cta-group {
    flex-direction: column;
    align-items: center;
  }

  .hero-cta-group .btn {
    width: 100%;
    max-width: var(--mobile-cta-max);
  }
}

/* ---- Credibility bar ---- */

.credibility {
  padding: var(--space-px-60) var(--space-px-40);
  text-align: center;
  border-bottom: var(--space-px-1) solid var(--overlay-white-05);
}

.credibility-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-lg);
}

.credibility-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.credibility-logo {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--overlay-offwhite-30);
  transition: color var(--duration-fast);
}

.credibility-logo:hover {
  color: var(--overlay-offwhite-60);
}

@media (max-width: 768px) {
  .credibility-logos {
    gap: var(--space-lg);
  }
}

/* ---- Stats ---- */

.stats {
  padding: var(--space-px-80) var(--space-px-40);
  background: radial-gradient(ellipse at center, var(--overlay-gold-05) 0%, transparent 70%);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2xl);
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}

.stat-number {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-gold);
  margin-bottom: var(--space-2xs);
  letter-spacing: var(--letter-spacing-tight);
  text-shadow: 0 0 var(--space-px-40) var(--overlay-gold-30);
}

.stat-label {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ---- Credibility fact list (approved facts only, no client logos) ---- */

.fact-list {
  max-width: var(--prose-max-sm);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.fact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.fact-item::before {
  content: '';
  flex-shrink: 0;
  width: var(--space-px-8);
  height: var(--space-px-8);
  margin-top: var(--space-px-8);
  border-radius: var(--radius-full);
  background: var(--color-gold);
}

/* ---- Buyer-recognition grid ---- */

.buyer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin: 0 auto;
}

.buyer-card {
  display: block;
  background: var(--overlay-white-03);
  backdrop-filter: blur(var(--blur-sm));
  border: var(--space-px-1) solid var(--overlay-white-08);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: inset 0 var(--space-px-1) 0 var(--overlay-white-08);
  transition:
    border-color var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-out-quint);
}

.buyer-card:hover {
  border-color: var(--overlay-gold-30);
  transform: translateY(var(--lift-lg));
  box-shadow:
    inset 0 var(--space-px-1) 0 var(--overlay-gold-15),
    var(--shadow-gold-sm);
}

.buyer-card-situation {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-bottom: var(--space-md);
  line-height: var(--line-height-relaxed);
}

.buyer-card-link {
  color: var(--color-gold);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm-alt);
}

/* ---- Offer grid / cards ---- */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin: 0 auto;
}

.offer-card {
  display: flex;
  flex-direction: column;
  background: var(--overlay-white-03);
  backdrop-filter: blur(var(--blur-sm));
  border: var(--space-px-1) solid var(--overlay-white-08);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: inset 0 var(--space-px-1) 0 var(--overlay-white-08);
  transition:
    border-color var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-out-quint);
}

.offer-card:hover {
  border-color: var(--overlay-gold-30);
  transform: translateY(var(--lift-lg));
  box-shadow:
    inset 0 var(--space-px-1) 0 var(--overlay-gold-15),
    var(--shadow-gold-sm);
}

.offer-card-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-sm);
}

.offer-card-promise {
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-lg);
  flex-grow: 1;
}

/* ---- Working method (numbered steps) ---- */

.method-steps {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  counter-reset: method-step;
}

/* Rail linking the four steps, sitting behind the cards at number height. */
.method-steps::before {
  content: '';
  position: absolute;
  top: calc(var(--space-lg) + var(--size-icon-lg) / 2);
  left: var(--space-2xl);
  right: var(--space-2xl);
  height: var(--space-px-1);
  background: linear-gradient(
    90deg,
    transparent,
    var(--overlay-gold-30) 15%,
    var(--overlay-gold-30) 85%,
    transparent
  );
}

.method-step {
  position: relative;
  padding: var(--space-lg);
  background: var(--overlay-white-03);
  border: var(--space-px-1) solid var(--overlay-white-08);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 var(--space-px-1) 0 var(--overlay-white-08);
  transition:
    border-color var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-out-quint);
}

.method-step:hover {
  border-color: var(--overlay-gold-30);
  transform: translateY(var(--lift-md));
}

.method-step-number {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: var(--space-px-1) solid var(--overlay-gold-30);
  color: var(--color-gold);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-lg);
}

/* Crosshair ticks radiating from each step number. */
.method-step-number::before,
.method-step-number::after {
  content: '';
  position: absolute;
  background: var(--overlay-gold-30);
}

.method-step-number::before {
  left: calc(-1 * var(--space-2xs));
  width: var(--space-2xs);
  height: var(--space-px-1);
}

.method-step-number::after {
  right: calc(-1 * var(--space-2xs));
  width: var(--space-2xs);
  height: var(--space-px-1);
}

.method-step-title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2xs);
}

.method-step-body {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm-alt);
  line-height: var(--line-height-relaxed);
}

@media (max-width: 1024px) {
  .method-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .method-steps::before {
    display: none;
  }
}

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

/* ---- Final CTA ---- */

.final-cta {
  text-align: center;
  background: radial-gradient(ellipse at center, var(--overlay-gold-10) 0%, transparent 70%);
}

.final-cta-title {
  font-size: var(--font-size-final-cta-title);
  margin-bottom: var(--space-md);
}


/* ---- Offer-detail page pattern ---- */

.offer-hero {
  padding: var(--space-px-120) var(--space-px-40) var(--space-px-80);
  text-align: center;
  max-width: var(--prose-max);
  margin: 0 auto;
}

.offer-hero .hero-badge {
  margin-bottom: var(--space-lg);
}

.offer-hero h1 {
  font-size: var(--font-size-section-title);
  margin-bottom: var(--space-lg);
}

.offer-hero-promise {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
}

.audience-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.audience-card {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: var(--space-px-1) solid var(--overlay-white-08);
  background: var(--overlay-white-03);
}

.audience-card-fit {
  border-color: var(--overlay-gold-30);
  background: var(--overlay-gold-05);
}

.audience-card-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-md);
}

.audience-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.audience-list li {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  padding-left: var(--space-md);
  position: relative;
}

.audience-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--color-text-subtle);
}

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

.scope-list {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-2xl);
}

.scope-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.scope-list li::before {
  content: '';
  flex-shrink: 0;
  width: var(--space-px-8);
  height: var(--space-px-8);
  margin-top: var(--space-px-8);
  border-radius: var(--radius-full);
  background: var(--color-gold);
}

@media (max-width: 768px) {
  .scope-list {
    grid-template-columns: 1fr;
  }
}

.how-steps {
  max-width: var(--prose-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  counter-reset: how-step;
}

.how-step {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
}

.how-step::before {
  counter-increment: how-step;
  content: counter(how-step);
  flex-shrink: 0;
  width: var(--space-2xl);
  height: var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--overlay-gold-15);
  color: var(--color-gold);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

.how-step-body {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  padding-top: var(--space-2xs);
}

/* ---- About page ---- */

.about-body {
  max-width: var(--prose-max-sm);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ---- Contact form ---- */

.contact-layout {
  max-width: var(--prose-max);
  margin: 0 auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form-group label {
  font-size: var(--font-size-sm-alt);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.form-group .optional-tag {
  color: var(--color-text-subtle);
  font-weight: var(--font-weight-regular);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--overlay-white-05);
  border: var(--space-px-1) solid var(--overlay-white-10);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  transition: border-color var(--duration-fast);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-subtle);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-gold);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-sm-alt);
  color: var(--color-text-muted);
}

.form-consent input {
  margin-top: var(--space-3xs);
}

.form-status {
  font-size: var(--font-size-sm-alt);
  font-weight: var(--font-weight-semibold);
}

.form-status[data-state="success"] {
  color: var(--color-gold);
}

.form-status[data-state="error"] {
  color: #e57373;
}

/* ---- Privacy / legal prose ---- */

.prose {
  max-width: var(--prose-max-sm);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.prose h2 {
  font-size: var(--font-size-xl);
  color: var(--color-text);
  margin-top: var(--space-lg);
}


/* ---- Alternatives comparison (what this isn't) ---- */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--space-md);
  max-width: var(--content-max);
  margin: 0 auto;
}

.compare-card {
  background: var(--overlay-white-03);
  border: var(--space-px-1) solid var(--overlay-white-08);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.compare-card-label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-xs);
}

.compare-card-body {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.compare-card.is-us {
  border-color: var(--overlay-gold-30);
  background: var(--overlay-gold-05);
}

.compare-card.is-us .compare-card-label { color: var(--color-gold); }
.compare-card.is-us .compare-card-body { color: var(--color-text); }

/* ---- FAQ (native details/summary - works without JS) ---- */

.faq-list {
  max-width: var(--prose-max);
  margin: 0 auto;
  border-top: var(--space-px-1) solid var(--overlay-white-08);
}

.faq-item {
  border-bottom: var(--space-px-1) solid var(--overlay-white-08);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-smooth);
}

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

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--color-gold);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item summary:hover,
.faq-item summary:focus-visible { color: var(--color-gold); }

.faq-answer {
  margin: 0;
  padding: 0 0 var(--space-md);
  max-width: var(--prose-max-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.faq-answer a { color: var(--color-gold); }

/* ---- Testimonials (LinkedIn recommendations) ---- */

.testimonial-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

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

.testimonial-card {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: var(--space-px-1) solid var(--overlay-white-08);
  background: var(--overlay-white-03);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.testimonial-quote {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.testimonial-expand {
  margin-top: calc(var(--space-md) * -1);
}

.testimonial-expand summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-px-8);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.testimonial-expand summary::-webkit-details-marker { display: none; }

.testimonial-expand summary::after {
  content: "+";
  font-size: var(--font-size-lg);
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.testimonial-expand[open] summary::after { transform: rotate(45deg); }

.testimonial-expand summary:hover,
.testimonial-expand summary:focus-visible { color: var(--color-gold-hover); }

.testimonial-quote-full {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.testimonial-meta {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: var(--space-px-1) solid var(--overlay-white-08);
}

.testimonial-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.testimonial-role {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.testimonial-context {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-top: var(--space-px-8);
}

.section-more-link {
  text-align: center;
  margin-top: var(--space-xl);
  font-weight: var(--font-weight-semibold);
}

/* ---- What happens next (contact expectation setting) ---- */

.next-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--prose-max-sm);
  margin: var(--space-3xl) auto 0;
  padding-top: var(--space-xl);
  border-top: var(--space-px-1) solid var(--overlay-white-08);
}

.next-steps-title {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 var(--space-2xs);
}

.next-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.next-step-number {
  flex-shrink: 0;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-gold);
  padding-top: var(--space-3xs);
}

.next-step-body {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}


/* ---- About portrait ---- */

.about-body-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xl);
  max-width: var(--content-max);
  margin: 0 auto;
}

.about-portrait {
  display: block;
  width: 320px;
  height: 464px;
  object-fit: contain;
  flex-shrink: 0;
}

.about-body-inner .about-body {
  margin: 0;
  flex: 1;
}

@media (max-width: 768px) {
  .about-body-inner {
    flex-direction: column;
    align-items: center;
  }

  .about-portrait {
    width: 220px;
    height: 319px;
    margin: 0 auto;
  }
}