/* About page: purpose, origin, experience and the company behind the product. */
/* One atmosphere spans the narrative, so light never stops at a section boundary. */
.about-page #main-content::after {
  background:
    radial-gradient(ellipse 40% 18% at 78% 12%, color-mix(in srgb, var(--landing-accent) 14%, transparent), transparent 100%),
    radial-gradient(ellipse 52% 20% at 48% 43%, color-mix(in srgb, var(--landing-accent) 12%, transparent), transparent 100%),
    radial-gradient(ellipse 42% 16% at 10% 65%, color-mix(in srgb, var(--landing-highlight) 6%, transparent), transparent 100%),
    radial-gradient(ellipse 65% 22% at 54% 94%, color-mix(in srgb, var(--landing-accent) 16%, transparent), transparent 100%);
  mask-image: linear-gradient(transparent, black 5%, black 90%, transparent);
}

.about-page :is(.about-hero, .about-section, .about-contact) { position: relative; isolation: isolate; }
.about-page :is(.about-hero__grid, .about-section__grid, .about-contact__grid) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(3rem, 7vw, 7rem); }
.about-page :is(.about-hero__grid, .about-section__grid, .about-contact__grid) > * { min-width: 0; }
.about-page :is(.about-hero h1, .about-section h2, .about-contact h2) { margin: 0; color: var(--ac-color-text-inverse); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.about-page :is(.about-hero h1, .about-section h2, .about-contact h2) span { color: var(--landing-highlight); }
.about-page :is(.about-prose, .about-company__intro, .about-contact__details) { font-size: 1rem; line-height: 1.75; }
.about-page :is(.about-prose, .about-contact__details) p + p { margin-top: 1.4rem; }
.about-page :is(.about-prose, .about-contact__details) a { color: var(--landing-highlight); text-decoration-color: var(--landing-border-strong); text-underline-offset: 0.25em; }
.about-page :is(.about-prose, .about-contact__details) a:hover { color: var(--ac-color-text-inverse); }
.about-page .about-prose > p:first-child { color: var(--ac-color-text-inverse); font-size: 1.15rem; line-height: 1.65; }
.about-page .about-section { padding-block: clamp(5rem, 8vw, 8rem); }
.about-page .about-section h2 { max-width: 19ch; font-size: clamp(2.6rem, 4vw, 4.15rem); }

.about-page .about-hero {
  padding-block: var(--landing-intro-space) 3rem;
}
.about-page .about-hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr); align-items: center; gap: clamp(3rem, 10vw, 10rem); }
.about-page .about-hero h1 { max-width: 17ch; font-size: clamp(3.3rem, 5.2vw, 5.4rem); line-height: 1.02; }
.about-page .about-hero h1 span { display: block; text-wrap: wrap; }
.about-page .about-hero__copy > p { max-width: 36rem; margin-top: 1.5rem; font-size: 1rem; }
.about-page .about-hero__copy .about-hero__lead { max-width: 31rem; margin-top: 2rem; color: var(--ac-color-text-inverse); font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.5; }
.about-page .about-hero__copy .about-hero__operator { font-size: 0.8rem; }
.about-page .about-story-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 1.2rem; margin-top: 1rem; }
.about-page .about-story-link span { font-size: 1.2rem; }

.about-page .about-credentials { position: relative; padding: 0 0 0 2rem; border-left: 1px solid var(--landing-border-strong); }
.about-page .about-credentials__number { margin: 0; color: var(--landing-highlight); font-family: var(--ac-font-editorial); font-size: clamp(8rem, 13vw, 12rem); line-height: 0.85; letter-spacing: -0.075em; }
.about-page .about-credentials__number span { display: inline-block; margin-left: 0.1em; font-size: 0.45em; vertical-align: top; line-height: 1.4; }
.about-page .about-credentials__label { margin-block: 1.2rem 2rem; font-size: 0.85rem; }
.about-page .about-credentials__sectors { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.about-page .about-credentials__sectors li { border-top: 1px solid var(--landing-border); padding-block: 0.7rem; color: var(--ac-color-text-inverse); font-size: 1.1rem; }
.about-page .about-credentials__location { margin: 1.5rem 0 0; font-size: 0.75rem; }
.about-page .about-status { display: flex; gap: 1.5rem; align-items: baseline; margin-top: 4rem; border-top: 1px solid var(--landing-border); padding-top: 1.25rem; }
.about-page .about-status__label { flex-shrink: 0; color: var(--landing-highlight); font-size: 0.7rem; font-weight: var(--ac-font-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; }
.about-page .about-status p { max-width: 46rem; margin: 0; font-size: 0.8rem; }

.about-page .about-lineage { display: grid; grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr); align-items: center; margin: 4rem 0 0; }
.about-page .about-lineage__stage { position: relative; border-block: 1px solid var(--landing-border-strong); padding: 2rem clamp(1.5rem, 3vw, 3rem); }
.about-page .about-lineage__stage--idea { border-color: var(--landing-highlight); background: linear-gradient(120deg, color-mix(in srgb, var(--landing-accent) 12%, transparent), transparent); }
.about-page .about-lineage__label { margin: 0 0 1rem; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; }
.about-page .about-lineage__stage--idea .about-lineage__label { color: var(--landing-highlight); }
.about-page .about-lineage h3 { max-width: none; margin: 0 0 1rem; color: var(--ac-color-text-inverse); font-size: clamp(1.8rem, 2.8vw, 3rem); line-height: 1.1; letter-spacing: -0.03em; }
.about-page .about-lineage__stage > p:last-child { margin: 0; font-size: 0.9rem; }
.about-page .about-lineage__connection { position: relative; color: var(--landing-highlight); font-size: 2rem; text-align: center; }
.about-page .about-lineage__connection::before { position: absolute; inset: 50% 0 auto; z-index: -1; height: 1px; background: var(--landing-border-strong); content: ""; }
.about-page .about-lineage figcaption { grid-column: 1 / -1; margin-top: 1.25rem; color: var(--landing-muted); font-size: 0.75rem; text-align: center; }

.about-page .about-experience { padding-top: 4rem; }
.about-page .about-perspective { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; margin-top: 3.5rem; border-left: 1px solid var(--landing-highlight); padding: 2rem 0 2rem 2rem; }
.about-page .about-perspective__statement { margin: 0; color: var(--ac-color-text-inverse); font-family: var(--ac-font-editorial); font-size: clamp(2.4rem, 4.2vw, 4.5rem); line-height: 1.12; letter-spacing: -0.035em; }
.about-page .about-perspective__statement span { color: var(--landing-highlight); }
.about-page .about-perspective__detail p:first-child { margin-top: 0; color: var(--ac-color-text-inverse); font-size: 1.1rem; }
.about-page .about-perspective__detail p:last-child { margin-bottom: 0; font-size: 0.8rem; line-height: 1.7; }

.about-page .about-team { margin-top: clamp(3rem, 6vw, 5rem); }
.about-page .about-team > h3 { max-width: none; margin: 0 0 2rem; color: var(--ac-color-text-inverse); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; letter-spacing: -0.025em; }
.about-page .about-team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 7vw, 7rem); }
.about-page .about-team__member { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid var(--landing-border-strong); padding-top: 1.75rem; }
.about-page .about-team__member h4 { margin: 0; color: var(--ac-color-text-inverse); font-family: var(--ac-font-editorial); font-size: 1.9rem; font-weight: var(--ac-font-weight-regular); line-height: 1.2; letter-spacing: -0.02em; }
.about-page .about-team__role { margin: 0.6rem 0 1.5rem; color: var(--landing-highlight); font-size: 0.85rem; line-height: 1.6; }
.about-page .about-team__bio { margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.75; }
.about-page .about-team__bio p { margin: 0 0 1rem; }
.about-page .about-team__link { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.75rem; min-height: 2.75rem; margin-top: auto; }

.about-page .about-company { padding-top: 3rem; }
.about-page .about-company__intro { max-width: 32rem; margin: 1.75rem 0 0; }
.about-page .about-facts { align-self: center; margin: 0; border-top: 1px solid var(--landing-border-strong); }
.about-page .about-facts > div { display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr); gap: 1.5rem; border-bottom: 1px solid var(--landing-border); padding-block: 1.5rem; }
.about-page .about-facts dt { color: var(--landing-highlight); font-size: 0.7rem; font-weight: var(--ac-font-weight-semibold); letter-spacing: 0.09em; text-transform: uppercase; }
.about-page .about-facts dd { margin: 0; color: var(--ac-color-text-inverse); font-size: 0.95rem; line-height: 1.6; }

.about-page .about-contact { --about-earth-overhang: 12rem; overflow: hidden; padding-block: 7rem 9rem; }
.about-page .about-contact__earth { position: absolute; z-index: -2; inset: auto 0 calc(-1 * var(--about-earth-overhang)); width: 100%; height: 48rem; object-fit: cover; object-position: center top; opacity: 0.65; mask-image: radial-gradient(ellipse 90% 80% at 50% 70%, black 30%, transparent 100%), linear-gradient(transparent, black 22%, black 55%, transparent calc(100% - var(--about-earth-overhang))); mask-composite: intersect; pointer-events: none; }
.about-page .about-contact::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(var(--landing-canvas), color-mix(in srgb, var(--landing-canvas) 60%, transparent) 45%, var(--landing-canvas)); mask-image: linear-gradient(transparent, black 20%, black 75%, transparent); content: ""; pointer-events: none; }
.about-page .about-contact::after { mask-image: linear-gradient(transparent, black 4rem, black calc(100% - 4rem), transparent); }
.about-page .about-contact__grid { align-items: center; }
.about-page .about-contact h2 { max-width: 18ch; font-size: clamp(2.8rem, 4.5vw, 4.75rem); }
.about-page .about-contact__invitation { max-width: 29rem; margin-block: 1.75rem; }
.about-page .about-contact__details { border-left: 1px solid var(--landing-border-strong); padding-left: 2rem; }
.about-page .about-contact__details h3 { max-width: none; margin: 0 0 1rem; color: var(--ac-color-text-inverse); font-size: 2rem; }
.about-page .about-contact__email { display: inline-block; max-width: 100%; margin-block: 1rem 1.5rem; font-size: clamp(1.5rem, 2.4vw, 2.5rem); line-height: 1.3; letter-spacing: -0.025em; overflow-wrap: anywhere; }

@media (max-width: 64rem) {
  .about-page .about-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 2.5rem; }
  .about-page .about-hero h1 { font-size: clamp(2.8rem, 5.6vw, 4.6rem); }
  .about-page .about-credentials { padding-left: 1.5rem; }
  .about-page .about-credentials__number { font-size: 8rem; }
  .about-page :is(.about-section__grid, .about-contact__grid, .about-perspective) { gap: 2.5rem; }
  .about-page .about-lineage { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); }
  .about-page .about-lineage__stage { padding-inline: 1.25rem; }
}

@media (max-width: 48rem) {
  .about-page :is(.about-hero__grid, .about-section__grid, .about-contact__grid, .about-perspective) { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .about-page .about-hero h1 { max-width: 17ch; font-size: clamp(2.4rem, 10vw, 4.5rem); }
  .about-page .about-hero__copy > p { max-width: 35rem; }
  .about-page .about-credentials { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1.5rem; border-left: 0; border-top: 1px solid var(--landing-border); padding: 2rem 0 0; }
  .about-page .about-credentials__number { grid-row: 1 / 4; align-self: center; font-size: clamp(6rem, 18vw, 8rem); }
  .about-page .about-credentials__label { margin: 0 0 0.75rem; }
  .about-page .about-credentials__sectors li { padding-block: 0.45rem; font-size: 0.95rem; }
  .about-page .about-credentials__location { grid-column: 1 / -1; margin-top: 1rem; }
  .about-page .about-status { flex-direction: column; gap: 0.5rem; margin-top: 2.5rem; }
  .about-page .about-section { padding-block: 3.5rem; }
  .about-page .about-section h2 { max-width: 22ch; font-size: clamp(2.5rem, 7vw, 3.5rem); }
  .about-page .about-lineage { grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem; }
  .about-page .about-lineage__stage { padding: 1.75rem 1.25rem; }
  .about-page .about-lineage__connection { padding-block: 0.3rem; rotate: 90deg; }
  .about-page .about-lineage__connection::before { display: none; }
  .about-page .about-lineage figcaption { text-align: left; }
  .about-page .about-perspective { gap: 1.5rem; margin-top: 2.5rem; padding: 0.5rem 0 0.5rem 1.25rem; }
  .about-page .about-team__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .about-page .about-contact { --about-earth-overhang: 8rem; padding-block: 5rem 6rem; }
  .about-page .about-contact h2 { font-size: clamp(2.5rem, 8vw, 3.5rem); }
  .about-page .about-contact__earth { height: 40rem; }
  .about-page .about-contact__details { border-left: 0; border-top: 1px solid var(--landing-border-strong); padding: 2rem 0 0; }
}

@media (max-width: 24rem) {
  .about-page .about-credentials { gap: 0 1rem; }
  .about-page .about-credentials__number { font-size: 5rem; }
  .about-page .about-credentials__label { font-size: 0.75rem; }
  .about-page .about-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}

@media (forced-colors: active) {
  .about-page :is(.about-hero, .about-origin, .about-contact, .about-lineage__stage--idea) { background: Canvas; }
  .about-page :is(.about-contact__earth, .about-contact::before, .about-lineage__connection::before) { display: none; }
  .about-page :is(.about-credentials, .about-credentials__sectors li, .about-status, .about-lineage__stage, .about-perspective, .about-team__member, .about-facts, .about-facts > div, .about-contact__details) { border-color: CanvasText; }
}