/* About page — editorial layout with hairline rules.
 * All tokens from ../colors_and_type.css; no new colors.
 */

/* ─────────────── HERO ─────────────── */
.ab-hero{position:relative;padding:120px 0 80px;overflow:hidden;border-bottom:1px solid var(--line)}
.ab-hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 50% at 50% 30%,#000 30%,transparent 90%);
}
.ab-hero-inner{position:relative;max-width:1280px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
.ab-hero-top{display:grid;grid-template-columns:1.5fr 1fr;gap:96px;align-items:end}
.ab-hero h1{
  font:700 96px/.95 var(--font-heading);letter-spacing:-.045em;color:var(--text);
  text-wrap:balance;
}
.ab-hero h1 .signal{
  background:linear-gradient(135deg,var(--accent) 0%,#7C3AED 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ab-hero .ab-hero-eb{margin-bottom:28px}
.ab-hero .ab-hero-sub{
  font:400 18px/1.55 var(--font-body);color:var(--text-2);max-width:380px;
}
.ab-hero .ab-hero-meta{
  margin-top:34px;display:flex;flex-direction:column;gap:14px;
  padding-top:24px;border-top:1px solid var(--line);
}
.ab-hero .ab-hero-meta .row{
  display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:baseline;
  font:var(--type-mono-meta);color:var(--text-3);
}
.ab-hero .ab-hero-meta .row .k{text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.ab-hero .ab-hero-meta .row .v{color:var(--text-2);font:500 13px/1.4 var(--font-body)}
.ab-hero .ab-hero-meta .row .v b{color:var(--text);font-weight:600}

/* Hero variants — controlled by data-variant on the .ab-hero root */
.ab-hero[data-variant="story"] h1{font-size:72px;line-height:1.05}
.ab-hero[data-variant="principles"] h1{font-size:80px;line-height:1}

/* ─────────────── EDITORIAL SECTION BASE ─────────────── */
.ab-sec{padding:120px 0;border-bottom:1px solid var(--line)}
.ab-sec.alt{background:var(--brand-surface)}
.ab-sec-inner{max-width:1280px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
.ab-sec-head{
  display:grid;grid-template-columns:1fr 1.4fr;gap:96px;
  margin-bottom:64px;align-items:end;
}
.ab-sec-head h2{
  font:700 56px/1.03 var(--font-heading);letter-spacing:-.035em;color:var(--text);
  text-wrap:balance;
}
.ab-sec-head .ab-sec-deck{
  font:400 17px/1.6 var(--font-body);color:var(--text-2);max-width:520px;
}
.ab-sec-head .eyebrow{margin-bottom:18px}

/* ─────────────── WHY / FOUNDING ─────────────── */
.ab-why-body{display:grid;grid-template-columns:1fr 1.5fr;gap:96px;align-items:start}
.ab-why-meta{
  display:flex;flex-direction:column;gap:18px;
  padding:24px 0 0;border-top:2px solid var(--text);
  position:sticky;top:96px;
}
.ab-why-meta .row{display:grid;grid-template-columns:100px 1fr;gap:18px;align-items:baseline}
.ab-why-meta .k{font:600 10px/1.4 var(--mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.12em}
.ab-why-meta .v{font:500 14px/1.4 var(--font-body);color:var(--text)}
.ab-why-meta .v b{font-weight:600}

.ab-why-prose{display:flex;flex-direction:column;gap:24px}
.ab-why-prose p{font:400 18px/1.6 var(--font-body);color:var(--text-2);max-width:640px}
.ab-why-prose p.lead{font:500 22px/1.4 var(--font-heading);color:var(--text);letter-spacing:-.015em}
.ab-why-prose p .em{color:var(--text);font-weight:500}
.ab-why-prose .pull{
  margin:24px 0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font:600 26px/1.3 var(--font-heading);color:var(--text);letter-spacing:-.02em;
  text-wrap:balance;max-width:620px;
}
.ab-why-prose .pull::before{
  content:"";display:block;width:24px;height:1.5px;background:var(--accent);margin-bottom:18px;
}
.ab-placeholder-note{
  margin-top:14px;font:var(--type-mono-meta);color:var(--text-3);
  padding:10px 14px;background:var(--bg-1);border:1px dashed var(--line-2);border-radius:8px;
  display:inline-flex;align-items:center;gap:8px;
}
.ab-placeholder-note::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--warn);
}
.ab-placeholder-note b{color:var(--text-2);font-weight:600}

/* ─────────────── PRINCIPLES ─────────────── */
.ab-prin{display:grid;grid-template-columns:1fr;gap:0}
.ab-prin-row{
  display:grid;grid-template-columns:160px 1fr 1fr;gap:64px;
  padding:48px 0;border-top:1px solid var(--line);align-items:start;
}
.ab-prin-row:last-child{border-bottom:1px solid var(--line)}
.ab-prin-row .num{
  font:700 64px/1 var(--mono);color:var(--text-3);letter-spacing:-.04em;
}
.ab-prin-row.accent .num{color:var(--accent)}
.ab-prin-row .title{display:flex;flex-direction:column;gap:14px}
.ab-prin-row h3{font:700 28px/1.15 var(--font-heading);color:var(--text);letter-spacing:-.02em;text-wrap:balance}
.ab-prin-row .tag{
  font:600 10px/1 var(--mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
}
.ab-prin-row .tag::before{content:"";width:14px;height:1px;background:var(--text-3)}
.ab-prin-row .body{font:400 16px/1.6 var(--font-body);color:var(--text-2);max-width:480px}
.ab-prin-row .body b{color:var(--text);font-weight:600}

/* ─────────────── WORKSHOP VISUAL ─────────────── */
.ab-vis{padding:0;border-bottom:1px solid var(--line)}
.ab-vis-inner{max-width:1280px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box;padding:48px 0}
.ab-vis-frame{
  position:relative;height:420px;border-radius:18px;overflow:hidden;
  background:var(--brand-surface);border:1px solid var(--line);
}
.ab-vis-stripes{
  position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,
    rgba(15,23,42,.04) 0 18px,
    rgba(15,23,42,.07) 18px 36px);
}
.ab-vis-radial{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 600px 300px at 30% 50%,rgba(79,70,229,.12),transparent 70%),
    radial-gradient(ellipse 500px 280px at 80% 60%,rgba(124,58,237,.1),transparent 70%);
}
.ab-vis-caption{
  position:absolute;left:40px;bottom:32px;
  display:flex;flex-direction:column;gap:8px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  padding:14px 18px;border-radius:10px;border:1px solid var(--line);
  box-shadow:var(--sh-1);
}
.ab-vis-caption .k{
  font:600 10px/1 var(--mono);color:var(--text-3);
  text-transform:uppercase;letter-spacing:.12em;
}
.ab-vis-caption .v{font:500 14px/1.4 var(--font-body);color:var(--text)}
.ab-vis-caption .v b{color:var(--text);font-weight:600}
.ab-vis-corner{
  position:absolute;top:24px;right:32px;
  font:var(--type-mono-meta);color:var(--text-3);
  display:inline-flex;align-items:center;gap:8px;
}
.ab-vis-corner .dot{width:6px;height:6px;border-radius:50%;background:var(--warn)}

/* ─────────────── TEAM (no photos, credits scroll) ─────────────── */
.ab-team{display:flex;flex-direction:column;gap:0}
.ab-team-block{
  display:grid;grid-template-columns:200px 1fr;gap:64px;
  padding:36px 0;border-top:1px solid var(--line);align-items:start;
}
.ab-team-block:last-child{border-bottom:1px solid var(--line)}
.ab-team-block .dept{
  display:flex;flex-direction:column;gap:6px;
}
.ab-team-block .dept .nm{font:700 18px/1.2 var(--font-heading);color:var(--text);letter-spacing:-.01em}
.ab-team-block .dept .ct{font:600 11px/1 var(--mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
.ab-team-block .roster{display:flex;flex-direction:column;gap:0}
.ab-team-row{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;
  padding:14px 0;border-top:1px dashed var(--line);align-items:baseline;
}
.ab-team-row:first-child{border-top:0;padding-top:0}
.ab-team-row .name{font:600 17px/1.25 var(--font-heading);color:var(--text);letter-spacing:-.01em}
.ab-team-row .role{font:500 13px/1.4 var(--font-body);color:var(--text-2)}
.ab-team-row .prev{font:var(--type-mono-meta);color:var(--text-3)}
.ab-team-row .prev b{color:var(--text-2);font-weight:500}
.ab-team-row.lead .name::after{
  content:"FOUNDER";display:inline-block;margin-left:10px;
  font:600 9px/1 var(--mono);color:var(--accent);
  background:var(--accent-soft);padding:3px 7px;border-radius:99px;
  text-transform:uppercase;letter-spacing:.08em;vertical-align:middle;
}

/* ─────────────── OPEN ROLES ─────────────── */
.ab-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ab-role{
  display:flex;flex-direction:column;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;
  box-shadow:var(--sh-0);transition:all .2s var(--ease-out);
}
.ab-role:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.ab-role .meta{
  display:flex;flex-wrap:wrap;gap:8px;
}
.ab-role .pill{
  font:600 10px/1 var(--mono);padding:5px 10px;border-radius:99px;
  background:var(--bg-1);color:var(--text-2);
  text-transform:uppercase;letter-spacing:.08em;
}
.ab-role .pill.dept{background:var(--accent-soft);color:var(--accent)}
.ab-role h3{font:700 22px/1.2 var(--font-heading);color:var(--text);letter-spacing:-.015em;text-wrap:balance}
.ab-role p{font:400 14.5px/1.55 var(--font-body);color:var(--text-2)}
.ab-role .foot{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  font:var(--type-mono-meta);color:var(--text-3);
}
.ab-role .foot a{color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:6px}

/* ─────────────── PRESS & NOTES ─────────────── */
.ab-press-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px}

.ab-press-list{display:flex;flex-direction:column;gap:0}
.ab-press-row{
  display:grid;grid-template-columns:1fr 120px 60px;gap:24px;
  padding:22px 0;border-top:1px solid var(--line);align-items:baseline;
}
.ab-press-row:last-child{border-bottom:1px solid var(--line)}
.ab-press-row .quote{
  font:500 17px/1.4 var(--font-heading);color:var(--text);
  letter-spacing:-.01em;text-wrap:pretty;
}
.ab-press-row .quote::before{content:"\201C";color:var(--text-3);margin-right:2px}
.ab-press-row .quote::after{content:"\201D";color:var(--text-3);margin-left:2px}
.ab-press-row .src{font:var(--type-mono-meta);color:var(--text-2);font-weight:500}
.ab-press-row .date{font:var(--type-mono-meta);color:var(--text-3);text-align:right}

.ab-press-side{
  display:flex;flex-direction:column;gap:24px;
  padding:32px;background:var(--text);color:#fff;border-radius:18px;
  align-self:start;
}
.ab-press-side .eyebrow{color:#a5b4fc}
.ab-press-side .eyebrow::before{background:#a5b4fc}
.ab-press-side h3{font:700 28px/1.15 var(--font-heading);color:#fff;letter-spacing:-.02em;text-wrap:balance}
.ab-press-side p{font:400 15px/1.55 var(--font-body);color:rgba(255,255,255,.72)}
.ab-press-side .links{
  display:flex;flex-direction:column;gap:0;margin-top:6px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
}
.ab-press-side .links a{
  display:grid;grid-template-columns:1fr auto;gap:14px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);
  align-items:center;color:#fff;
}
.ab-press-side .links a:last-child{border-bottom:0}
.ab-press-side .links a .lt{font:500 14px/1.3 var(--font-body)}
.ab-press-side .links a .lt .sub{font:var(--type-mono-meta);color:rgba(255,255,255,.5);margin-top:3px}
.ab-press-side .links a .ar{color:#a5b4fc;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* ─────────────── CONTACT BAR ─────────────── */
.ab-contact{padding:120px 0;border-bottom:1px solid var(--line);background:var(--brand-canvas)}
.ab-contact-inner{max-width:1280px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
.ab-contact-top{display:grid;grid-template-columns:1.4fr 1fr;gap:96px;margin-bottom:64px;align-items:end}
.ab-contact-top h2{
  font:700 76px/1 var(--font-heading);letter-spacing:-.04em;color:var(--text);text-wrap:balance;
}
.ab-contact-top h2 .em{
  background:linear-gradient(135deg,var(--accent) 0%,#7C3AED 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ab-contact-top p{font:400 17px/1.55 var(--font-body);color:var(--text-2);max-width:420px}

.ab-contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ab-contact-card{
  display:flex;flex-direction:column;gap:10px;
  padding:24px;background:#fff;border:1px solid var(--line);border-radius:14px;
  transition:all .2s var(--ease-out);
}
.ab-contact-card:hover{transform:translateY(-2px);box-shadow:var(--sh-1);border-color:var(--line-2)}
.ab-contact-card .k{font:600 10px/1 var(--mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.12em}
.ab-contact-card .v{font:600 18px/1.2 var(--font-heading);color:var(--text);letter-spacing:-.01em;word-break:break-all}
.ab-contact-card .v a{color:inherit}
.ab-contact-card .desc{font:400 13px/1.5 var(--font-body);color:var(--text-2);margin-top:4px}
.ab-contact-card .badge{
  font:600 9px/1 var(--mono);padding:4px 8px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;align-self:flex-start;
}

/* ─────────────── FINAL CTA ─────────────── */
.ab-cta{padding:120px 0;background:var(--text);color:#fff}
.ab-cta-inner{
  max-width:1280px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box;display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:end;
}
.ab-cta h2{font:700 64px/1 var(--font-heading);letter-spacing:-.04em;color:#fff;text-wrap:balance}
.ab-cta h2 .em{color:#a5b4fc}
.ab-cta p{font:400 17px/1.55 var(--font-body);color:rgba(255,255,255,.72);max-width:480px;margin-top:22px}
.ab-cta .ctas{margin-top:32px;display:flex;gap:12px}
.ab-cta .btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2)}
.ab-cta .btn-outline:hover{border-color:#a5b4fc;color:#a5b4fc}
.ab-cta-meta{
  display:flex;flex-direction:column;gap:14px;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.12);
}
.ab-cta-meta .row{display:grid;grid-template-columns:100px 1fr;gap:18px;align-items:baseline;font:var(--type-mono-meta);color:rgba(255,255,255,.5)}
.ab-cta-meta .row .k{text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.ab-cta-meta .row .v{color:rgba(255,255,255,.92);font:500 13px/1.4 var(--font-body)}
.ab-cta-meta .row .v b{color:#a5b4fc;font-weight:600}

/* ─────────────── EYEBROW VARIATIONS ─────────────── */
.ab-sec-eb{margin-bottom:18px}

/* Responsive — design ships fixed 1440px. */
@media (max-width:980px){
  .ab-hero-top,.ab-sec-head,.ab-why-body,.ab-press-grid,.ab-contact-top,.ab-cta-inner{grid-template-columns:1fr !important;gap:32px !important}
  .ab-prin-row{grid-template-columns:1fr !important;gap:8px !important}
  .ab-team,.ab-roles,.ab-contact-grid{grid-template-columns:1fr !important}
}

/* ─────────────────────────── RESPONSIVE (mobile) ───────────────────────
   Bare .container divs need padding; the page shipped one 980px breakpoint
   that missed the team roster grids and the display headings. */
.container{max-width:1280px;width:100%;margin:0 auto;padding:0 24px;box-sizing:border-box}

@media (max-width:920px){
  /* blanket heading clamp — .marketing-site h1/h2 (marketing.css) outranks
     bare/section h2 rules, so match its specificity and clamp every heading */
  .marketing-site h1{font-size:clamp(38px,9vw,84px)}
  .marketing-site h2{font-size:clamp(28px,6vw,56px)}
  /* .ab-team-block is the 200px+1fr label/roster grid — collapse it too */
  .ab-team-block,.ab-team-row,.ab-press-row{grid-template-columns:minmax(0,1fr);gap:14px}
  .ab-prin-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .ab-team-block .dept{margin-bottom:8px}
  .ab-roles,.ab-contact-grid,.ab-press-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* collapsed grid items must shrink to their track, not their content */
  .ab-cta-inner>*,.ab-hero-top>*,.ab-why-body>*,.ab-contact-top>*,.ab-sec-head>*{min-width:0}
  .ab-cta-ctas,.ctas,.ab-hero-ctas{flex-wrap:wrap}
}
@media (max-width:600px){
  .ab-roles,.ab-contact-grid,.ab-press-grid{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================================
 * Mobile fix sweep (≤640px) — about page is 13,047px, less of a problem than
 * the others but worth tightening for consistency.
 * ============================================================================ */
@media (max-width:640px){
  .ab-hero{padding:40px 0 32px}
  .ab-sec{padding:48px 0}
  .ab-vis{padding:32px 0}
  .ab-contact{padding:48px 0}
  .ab-cta{padding:48px 0}
}