/* About: the founder's segment. Studio hero with video 01, run-sheet story, control-room credentials. */

/* ---------- Hero ---------- */
.about-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3.5rem, 2rem + 5vw, 7rem); overflow: clip; }
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: center; }
@media (min-width: 900px) { .about-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: clamp(2rem, 1rem + 4vw, 6rem); } }
.about-hero .display { max-width: 12ch; }
.about-hero .lead { max-width: 46ch; }
.about-facts { margin: var(--s-7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: var(--s-3) clamp(1.25rem, 0.5rem + 3vw, 3rem); border-top: 1px solid var(--studio-line); padding-top: var(--s-5); }
.about-facts dt { color: var(--on-studio-3); margin-bottom: 0.35rem; }
.about-facts dd { margin: 0; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
@media (max-width: 520px) { .about-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .about-facts div:last-child { grid-column: 1 / -1; } }
.about-hero__monitor { position: relative; justify-self: center; width: min(100%, 22rem); }
@media (min-width: 900px) { .about-hero__monitor { justify-self: end; } }
.about-hero__monitor .chyron { position: absolute; left: -1.1rem; bottom: 4.6rem; pointer-events: none; }
@media (max-width: 899px) { .about-hero__monitor .chyron { left: 0.6rem; } }

/* ---------- Why it exists ---------- */
.why__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
@media (min-width: 960px) { .why__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--s-9); align-items: start; } }
.why__frame { width: min(100%, 26rem); }
@media (min-width: 960px) { .why__frame { position: sticky; top: 7rem; } }
.monitor--tall .monitor__screen { aspect-ratio: 3 / 4; }
.why__quote { font-size: clamp(1.875rem, 1.1rem + 3.2vw, 4rem); line-height: 1.04; color: var(--ink); max-width: 20ch; }
.why__quote em { color: var(--tally-ink); }
.why__attr { margin-top: var(--s-6); }
.why__body { margin-top: var(--s-8); display: grid; gap: var(--s-5); color: var(--ink-2); max-width: 58ch; border-top: 1px solid var(--sheet-line); padding-top: var(--s-6); }
.why__lede { font-family: var(--f-voice); font-style: normal; font-weight: 620; letter-spacing: -0.02em; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.32; color: var(--ink); }

/* ---------- Credentials ---------- */
.creds__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
@media (min-width: 960px) { .creds__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: var(--s-8); } }
.creds__head .h2 { max-width: 16ch; }
.creds__head p { color: var(--on-studio-2); max-width: 50ch; }
.creds__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
@media (min-width: 960px) { .creds__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-9); align-items: start; } }
.creds__list { border-top: 1px solid var(--studio-line); }
.creds__list li { display: grid; gap: var(--s-2); padding-block: clamp(1.1rem, 0.9rem + 1vw, 1.75rem); border-bottom: 1px solid var(--studio-line); max-width: none; }
.creds__list .time { color: var(--on-studio-3); }
.creds__what { font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.25rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1.08; }
.creds__what a { color: var(--on-studio); text-decoration-color: var(--studio-line); }
.creds__what a:hover { text-decoration-color: var(--tally); }
.creds__what a svg { display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.15em; vertical-align: 0.1em; }
.creds__cap { margin-top: var(--s-5); color: var(--on-studio-2); font-size: var(--t-small); max-width: 44ch; }
.creds__cap a { color: var(--on-studio); font-weight: 650; }

/* ---------- Beliefs ---------- */
.beliefs__list { margin-top: var(--s-8); border-top: 2px solid var(--ink); }
.belief { display: grid; gap: var(--s-3); padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-bottom: 1px solid var(--sheet-line); max-width: none; }
@media (min-width: 900px) { .belief { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: baseline; } }
.belief__claim { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; }
.belief p { color: var(--ink-2); max-width: 50ch; }
.beliefs__quote { margin-top: var(--s-9); display: grid; gap: var(--s-5); justify-items: start; }
@media (min-width: 900px) { .beliefs__quote { margin-left: auto; width: min(100%, 44rem); } }
.beliefs__quote .voice { color: var(--ink); font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem); line-height: 1.05; }

/* ---------- Team ---------- */
.team__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
@media (min-width: 960px) { .team__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--s-8); } }
.team__head p { color: var(--on-studio-2); max-width: 48ch; }
.team__group { position: relative; margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.team__group img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.team__group .chyron { position: absolute; left: -0.6rem; bottom: 1.75rem; }
@media (max-width: 959px) { .team__group .chyron { left: 0.6rem; bottom: 1rem; } }
.team__leads { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8) var(--s-6); }
@media (min-width: 640px) { .team__leads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .team__leads { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lead-card { position: relative; display: grid; gap: var(--s-4); align-content: start; max-width: none; }
.monitor--square .monitor__screen { aspect-ratio: 1 / 1; }
.lead-card .chyron { margin-top: -3.25rem; margin-left: -0.5rem; position: relative; z-index: 1; }
.lead-card p { color: var(--on-studio-2); font-size: var(--t-small); display: grid; gap: var(--s-3); justify-items: start; }

.team__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-9); }
@media (min-width: 1100px) { .team__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; } }
@media (min-width: 1024px) { .team__leads--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .team__body .roster__list { grid-template-columns: minmax(0, 1fr); } }
.roster__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--studio-line); }
.roster__list { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .roster__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); } }
.roster__list li { display: grid; gap: 0.25rem; padding-block: var(--s-5); border-bottom: 1px solid var(--studio-line); max-width: none; }
.roster__name { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 780; letter-spacing: -0.03em; line-height: 1.1; }
.roster__role { color: var(--on-studio-2); font-size: var(--t-small); }

/* ---------- Close + awards footnote ---------- */
.about-close__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 960px) { .about-close__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-9); align-items: end; } }
.about-close .h2 { max-width: 15ch; }
.about-close__grid p { color: var(--ink-2); max-width: 44ch; }
.about-close .cta-group { margin-top: var(--s-5); }
.about-close__alt { margin-top: var(--s-4); font-size: var(--t-small); }
.about-close__alt a { color: var(--ink); font-weight: 650; }
.awards { margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--sheet-line); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); font-size: 0.875rem; color: var(--ink-2); }
.awards li { display: inline-flex; gap: var(--s-3); align-items: baseline; max-width: none; }
.awards .time { color: var(--ink-2); }

/* Hero runs full width until the team photo is placed */
.about-hero__grid--solo { grid-template-columns: minmax(0, 1fr) !important; }
.about-hero__grid--solo .about-hero__copy { max-width: 62rem; }

/* Monogram slate for team members whose headshot is still to come */
.monogram { display: grid; place-items: center; aspect-ratio: 1 / 1; background: radial-gradient(ellipse 70% 60% at 50% 40%, var(--studio-2), var(--control) 75%); }
.monogram__mark { font-size: clamp(3.5rem, 2rem + 5vw, 6rem); font-weight: 820; letter-spacing: -0.04em; color: var(--on-studio); line-height: 1; }