/* About page — page-specific styles.
   Artwork hooks and composition tweaks only.
============================================================ */

.s-about-hero {
  position: relative;
  isolation: isolate;
  min-height: min(860px, 94svh);
  padding: calc(var(--header-height, 88px) + clamp(4rem, 8vw, 7rem)) var(--container-gutter, 1.5rem) clamp(7rem, 12vw, 10rem);
  background:
    radial-gradient(circle at 16% 18%, rgba(216, 163, 74, 0.16), transparent 24rem),
    radial-gradient(circle at 86% 66%, rgba(72, 101, 136, 0.20), transparent 28rem),
    linear-gradient(145deg, #071023 0%, var(--brand-navy) 54%, #0a162b 100%);
  overflow: hidden;
}

.s-about-hero__inner {
  width: min(100%, var(--container-max, 1180px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(320px, 0.74fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}

.s-about-hero__content h1 {
  max-width: 14ch;
  margin: var(--space-4) 0 0;
  color: var(--color-dark-text);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.s-about-hero__copy {
  max-width: 62ch;
  margin-top: var(--space-6);
}

.s-about-hero__copy p {
  color: var(--color-dark-text-muted);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.14rem);
  line-height: 1.72;
}

.s-about-hero__copy p + p { margin-top: var(--space-4); }
.s-about-hero__content .s-actions { margin-top: var(--space-7); }

.s-about-hero__profile {
  justify-self: end;
  width: min(100%, 440px);
}

.about-split-copy {
  padding-left: clamp(1.5rem, 3vw, 2.8rem);
  border-left: 1px solid var(--section-rule-soft);
}

.about-belief-panel,
.about-scope-panel,
.about-method-panel,
.about-membership-panel { align-self: start; }

.about-method-panel,
.about-membership-panel {
  max-width: 1060px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.about-method-tags {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.about-training-grid {
  --grid-2-min: 27rem;
  margin-top: clamp(3rem, 5.5vw, 4.75rem);
}

.about-membership-panel > p { max-width: 72ch; }
.about-membership-grid { --membership-min: 18rem; }

.about-membership-panel .c-membership-card {
  background: linear-gradient(145deg, rgba(255, 250, 240, 0.08), rgba(255, 250, 240, 0.045));
  border-color: color-mix(in srgb, var(--brand-gold) 24%, transparent);
}

.about-membership-panel .c-membership-card__name { color: var(--brand-champagne); }
.about-membership-panel .c-membership-card__status { color: var(--brand-gold); }
.about-membership-panel .c-membership-card__note { color: var(--color-dark-text-muted); }

.about-values-grid { margin-top: clamp(3rem, 5.5vw, 4.75rem); }
.about-cta-panel p { color: var(--color-dark-text-muted); }

@media (max-width: 900px) {
  .s-about-hero__inner { grid-template-columns: 1fr; }
  .s-about-hero__profile {
    justify-self: start;
    width: min(100%, 500px);
  }
  .about-split-copy {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .s-about-hero { padding-top: calc(var(--header-height, 78px) + 3.5rem); }
  .s-about-hero__content h1 { max-width: 12ch; }
}


/* Phase 2.24 About refinements */

/* Hero restored to original conceptual wording; keep strong but slightly less oversized. */
.s-about-hero__content h1 {
  max-width: 11ch;
}

/* How I work: closer to original — darker feature panel with tags and consent note. */
.about-method-panel {
  background:
    radial-gradient(circle at 8% 12%, rgba(216, 163, 74, 0.10), transparent 24rem),
    linear-gradient(145deg, rgba(24, 44, 72, 0.92), rgba(10, 24, 43, 0.88));
}

.about-method-panel .c-tag {
  background: rgba(255, 250, 240, 0.07);
  border-color: color-mix(in srgb, var(--brand-gold) 24%, transparent);
  color: var(--color-dark-text-muted);
}

/* Neurodiversity emphasis line */
.about-emphasis-line {
  margin-block: var(--space-5);
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2vw, 1.6rem);
  border-left: 3px solid var(--section-rule);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--section-note-bg);
  color: var(--section-heading);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.75vw, 1.95rem);
  font-style: italic;
  line-height: 1.22;
}

/* Training: lighter cards */
.about-training-grid .c-credential-card {
  min-height: 100%;
}

/* Memberships: panel background consistent with the section, cards darker inside. */
.about-membership-panel {
  max-width: 1060px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--section-rule-soft);
}

.about-membership-panel .c-inset-title {
  color: var(--section-heading);
}

.about-membership-panel > p {
  color: var(--section-muted);
}

.about-membership-panel .c-membership-card {
  background:
    linear-gradient(145deg,
      rgba(24, 44, 72, 0.94),
      rgba(8, 18, 35, 0.91)
    );
  border-color: color-mix(in srgb, var(--brand-gold) 26%, transparent);
  box-shadow: var(--shadow-dark-soft);
}

.about-membership-panel .c-membership-card__name {
  color: var(--brand-champagne);
}

.about-membership-panel .c-membership-card__status {
  color: var(--brand-gold);
}

.about-membership-panel .c-membership-card__note {
  color: var(--color-dark-text-muted);
}

/* What matters: single stacked card rather than four separate cards. */
.about-values-panel {
  max-width: 980px;
}


/* Phase 2.25 About refinement pass */

/* Neurodiversity emphasis: no gradient, stronger editorial size. */
.about-emphasis-line {
  margin-block: var(--space-6);
  padding: clamp(1.25rem, 2.5vw, 1.8rem) clamp(1.25rem, 2.8vw, 2rem);
  border: 1px solid var(--section-border);
  border-left: 3px solid var(--section-rule);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: rgba(255, 250, 240, 0.72);
  color: var(--section-heading);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.25rem + 1.15vw, 2.55rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.16;
}

/* Membership section: consistent background, light cards. */
.about-membership-panel .c-inset-title {
  color: var(--section-heading);
  font-size: clamp(1.75rem, 1.25rem + 1.35vw, 2.75rem);
  line-height: 1.08;
}

.about-membership-panel .c-membership-card {
  background:
    linear-gradient(145deg,
      rgba(255, 252, 247, 0.98),
      rgba(248, 238, 224, 0.94)
    );
  border-color: var(--section-border);
  box-shadow: 0 18px 48px rgba(19, 32, 48, 0.07);
}

.about-membership-panel .c-membership-card__name {
  color: var(--section-card-heading);
}

.about-membership-panel .c-membership-card__status {
  color: var(--section-accent);
}

.about-membership-panel .c-membership-card__note {
  color: var(--section-card-muted);
}

/* Values: original-inspired dark feature layout. */
.about-values-intro h2 {
  max-width: 11ch;
  margin: var(--space-4) 0 0;
  color: var(--section-heading);
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 5vw, 5.3rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.about-values-intro p {
  max-width: 44ch;
  margin: var(--space-6) 0 0;
  color: var(--section-muted, var(--color-text-muted));
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.12rem);
  line-height: 1.72;
}

.about-values-intro .s-actions {
  margin-top: var(--space-7);
}

.about-values-panel {
  align-self: start;
}

.about-values-panel .c-editorial-item h3 {
  color: var(--brand-champagne);
}

.about-values-panel .c-editorial-item p {
  color: var(--section-muted, var(--color-text-muted));
}


/* Phase 2.26 About refinements */

/* Restore original-inspired How I work dark feature layout. */
.about-how-work-intro h2 {
  max-width: 11ch;
  margin: var(--space-4) 0 0;
  color: var(--section-heading);
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 5vw, 5.3rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.about-how-work-intro p {
  max-width: 58ch;
  margin: var(--space-5) 0 0;
  color: var(--section-muted, var(--color-text-muted));
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.12rem);
  line-height: 1.72;
}

.about-how-work-intro .s-actions {
  margin-top: var(--space-7);
}

.about-work-card {
  align-self: start;
}

/* Use the same deeper shade for values editorial card. */
.about-values-panel {
  align-self: start;
}

/* Membership logos lower in the card so text aligns at the top. */
.about-membership-panel .c-membership-card--logo-bottom .c-membership-card__logo {
  align-self: end;
}

.about-membership-panel .c-membership-card__logo img {
  max-height: 2.8rem;
}

.s-about-hero .c-eyebrow {
  color: var(--color-eyebrow-on-dark, var(--brand-champagne));
}