/* ==========================================================================
   About — concept deck page 07 (hero summit, mission panel), story, the name,
   careers teaser. Page-scoped: every class is prefixed .about-.
   ========================================================================== */

:root { --about-overlap: clamp(72px, 9vw, 150px); }

/* ---------- Hero ---------- */
/* The scene is placed by where the figure should stand: --sw scene width (16:9), --fx / --fy the
   figure's feet in page coordinates. The peak sits at 56% x 40% of the scene (summitScene). */
.about-hero {
  --sw: clamp(1500px, 142vw, 2300px); --fx: 68vw; --fy: clamp(300px, 23vw, 360px);
  min-height: 720px;
  padding-bottom: calc(clamp(64px, 8vw, 120px) + var(--about-overlap));
}
/* The bottom fade is a mask (not an overlay) so no sliver of scene survives at a fractional hero edge. */
.about-hero__media {
  left: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 12%); mask-image: linear-gradient(0deg, transparent 0, #000 12%);
}
.about-hero__scene {
  position: absolute; width: var(--sw); aspect-ratio: 16 / 9;
  left: calc(var(--fx) - 0.56 * var(--sw)); top: calc(var(--fy) - 0.225 * var(--sw));
}
.about-hero__scene svg { display: block; width: 100%; height: 100%; }
/* Left: fade into the page behind the copy. Top: a light band under the header. The bottom fade
   (mask above) is short, so the lower slopes still pass behind the top of the mission panel. */
.about-hero__media::after {
  z-index: 1;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(7, 9, 12, 0.9) 22%, rgba(7, 9, 12, 0.5) 40%, rgba(7, 9, 12, 0) 58%),
    linear-gradient(180deg, rgba(7, 9, 12, 0.3) 0%, rgba(7, 9, 12, 0) 12%);
}
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.about-hero__copy { max-width: 640px; }
.about-hero .lede { max-width: 31em; }
.about-hero__stack { margin-top: 4px; font-size: 0.875rem; line-height: 1.5; text-shadow: 0 1px 14px rgba(7, 9, 12, 0.7); }
/* Below ~1320px the copy column is proportionally wider, so the ridge's left flank would cross
   the lede. The summit drops to sit beside the lede (its flank then runs below the text) and
   moves right. Below ~1100px the stack would crowd the figure; it is decorative, so it steps
   aside and the figure moves further right. Measured clearance: >= 20px from 861px to 1320px. */
@media (max-width: 1320px) {
  .about-hero { --fx: 70vw; --fy: 380px; }
}
@media (max-width: 1100px) {
  .about-hero { --fx: 78vw; }
  .about-hero__stack { display: none; }
}

@media (max-width: 860px) {
  /* Scene sits behind the copy with a strong top-to-bottom fade; the figure stands just above the eyebrow. */
  .about-hero { --sw: min(250vw, 1300px); --fx: 62vw; min-height: 0; padding-top: calc(var(--header-h) + clamp(150px, 46vw, 320px)); }
  .about-hero__media { bottom: auto; height: clamp(400px, 122vw, 700px); }
  .about-hero__scene { top: 0; }
  .about-hero__media::after {
    background: linear-gradient(180deg, rgba(7, 9, 12, 0.3) 0%, rgba(7, 9, 12, 0) 16%, rgba(7, 9, 12, 0) 36%, rgba(7, 9, 12, 0.72) 58%, var(--bg) 84%);
  }
  .about-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- Mission (glass panel over the hero's lower edge) ---------- */
.about-mission { position: relative; z-index: 2; margin-top: calc(-1 * var(--about-overlap)); }
.about-mission__panel {
  padding: clamp(28px, 4.2vw, 60px);
  border-color: var(--line-strong);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.9);
}
/* Firelight catching the top edge of the glass. */
.about-mission__panel::before {
  content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242, 161, 91, 0.55) 50%, transparent);
}
.about-mission__statement {
  margin-top: 18px; max-width: 19em;
  font-family: var(--font-display); font-weight: 300; color: var(--text);
  font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.5rem); line-height: 1.16; letter-spacing: -0.025em;
  text-wrap: balance;
}
.about-values {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--line);
}
.about-values li { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: clamp(16px, 3vw, 40px); }
.about-values li + li { border-left: 1px solid var(--line); }
.about-values .icon-ring { width: 60px; height: 60px; background: radial-gradient(circle at 50% 30%, rgba(255, 211, 161, 0.08), transparent 70%); }
.about-values .icon-ring svg { width: 24px; height: 24px; }
.about-values h3 { margin-top: 20px; font-size: 1.2rem; }
.about-values p { margin-top: 8px; color: var(--text-2); font-size: var(--fs-small); max-width: 14em; text-wrap: balance; }

@media (max-width: 760px) {
  .about-values { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .about-values li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; align-items: center; text-align: left; padding: 22px 0; }
  .about-values li + li { border-left: 0; border-top: 1px solid var(--line); }
  .about-values li:last-child { padding-bottom: 0; }
  .about-values .icon-ring { width: 52px; height: 52px; grid-row: span 2; }
  .about-values .icon-ring svg { width: 22px; height: 22px; }
  .about-values h3 { margin-top: 0; font-size: 1.1rem; }
  .about-values p { margin-top: 4px; max-width: none; }
}

/* ---------- Story ---------- */
.about-story__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-story__head h2 { margin-top: 22px; max-width: 13em; }
.about-story__head h2 span { color: var(--text-2); }
.about-story__body { padding-top: 6px; }
.about-story__body > * + * { margin-top: 20px; }
.about-story__body > .about-story__sign { margin-top: 30px; }
.about-story__body .lede { color: var(--text); max-width: none; }
.about-story__sign {
  display: flex; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.05rem; color: var(--text); letter-spacing: -0.01em;
}
.about-story__sign svg { width: 20px; height: 20px; color: var(--ember); flex: none; }

.about-facts {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line);
}
.about-facts li { position: relative; padding: clamp(24px, 3vw, 36px) clamp(16px, 2.4vw, 32px) 0; }
.about-facts li:first-child { padding-left: 0; }
.about-facts li + li { border-left: 1px solid var(--line); }
.about-facts li::before { content: ""; position: absolute; top: -1px; left: clamp(16px, 2.4vw, 32px); width: 36px; height: 1px; background: var(--ember); }
.about-facts li:first-child::before { left: 0; }
.about-facts__value {
  font-family: var(--font-display); font-weight: 300; color: var(--text);
  font-size: clamp(2.8rem, 1.9rem + 3vw, 4.6rem); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
}
.about-facts__label { margin-top: 14px; font-size: var(--fs-small); color: var(--text-2); max-width: 13em; text-wrap: balance; }

@media (max-width: 860px) {
  .about-story__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .about-story__body { padding-top: 0; }
}
@media (max-width: 760px) {
  .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .about-facts li { padding: 26px 0 28px 20px; }
  .about-facts li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .about-facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .about-facts li::before { left: 20px; }
  .about-facts li:nth-child(odd)::before { left: 0; }
}

/* ---------- The name ---------- */
.about-name { overflow: hidden; isolation: isolate; }
.about-name__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.about-name__copy h2 { margin-top: 22px; max-width: 12em; }
.about-name__copy .lede { margin-top: 28px; color: var(--text); text-wrap: balance; } /* two even lines, not a lone "the gods." */
.about-name__copy p:not(.lede) { margin-top: 16px; max-width: 34em; }
.about-name__copy p, .about-careers__side p { text-wrap: pretty; }

.about-mark { margin: 0; display: flex; flex-direction: column; align-items: center; }
.about-mark__art { position: relative; width: min(100%, 340px); isolation: isolate; }
.about-mark__art::before {
  content: ""; position: absolute; inset: -18% -46% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 50% 36%, rgba(255, 211, 161, 0.26), rgba(242, 161, 91, 0.13) 42%, rgba(199, 102, 44, 0.05) 68%, transparent);
}
.about-mark__art::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -4%; height: 12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 161, 91, 0.2), transparent);
}
.about-mark img { width: 100%; height: auto; }
.about-mark figcaption {
  margin-top: 26px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); text-align: center;
  text-wrap: balance;
}
@media (prefers-reduced-motion: no-preference) {
  .about-mark__art::before { animation: about-breathe 7s ease-in-out infinite; }
}
@keyframes about-breathe { 0%, 100% { opacity: 0.82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

@media (max-width: 860px) {
  .about-name__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .about-mark__art { width: min(62%, 260px); }
}

/* ---------- Careers teaser ---------- */
.about-careers { border-top: 1px solid var(--line); }
.about-careers__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 28px clamp(32px, 6vw, 96px); align-items: end; }
.about-careers h2 { margin-top: 20px; }
.about-careers__side p { color: var(--text-2); max-width: 30em; margin-bottom: 16px; }
/* A 40px+ tap target for the page’s one careers action (the shared .link-arrow is ~31px tall). */
.about-careers .link-arrow { padding-block: 10px 8px; }
@media (max-width: 860px) { .about-careers__inner { grid-template-columns: minmax(0, 1fr); } }