/* ============================================================================
   KJPTV — ABOUT PAGE FURNITURE
   Everything here is prefixed .ab-* (about). Linked by About.html only.
   Shared chrome (navbar, buttons, .kicker, .section, .gold-rule, .text-link,
   .founder-script, footer) lives in site.css and is NOT duplicated here.
   ========================================================================== */

/* ---- Hero: full-bleed soundstage, lights up -------------------------------
   The photo is high-key white, so it needs a heavier protection stack than the
   pattern heroes on the other pages: a vertical wash that seats the navbar and
   lands on solid onyx, plus a left radial so the copy column never sits on a
   hot spot. Desaturated and pulled down so the only real colour is the gold. */
.ab-hero { position: relative; overflow: hidden; isolation: isolate;
  padding: calc(var(--nav-height) + 104px) 0 100px; }
.ab-hero-img { position: absolute; inset: 0; z-index: 0;
  background: url('assets/bg-crew-set-2.jpg?v=e389bd3f') 50% 44% / cover no-repeat;
  filter: grayscale(0.42) brightness(0.46) contrast(1.08); }
.ab-hero-scrim { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(88% 78% at 6% 58%, rgba(6,6,6,0.88) 0%, rgba(6,6,6,0.4) 58%, rgba(6,6,6,0) 100%),
  linear-gradient(180deg, rgba(6,6,6,0.9) 0%, rgba(6,6,6,0.42) 30%, rgba(6,6,6,0.62) 66%, #060606 100%); }
.ab-hero .container { position: relative; z-index: 2; }
.ab-hero h1 { max-width: 16ch; font-size: clamp(calc(var(--size-display) * 0.6333), 6.4vw, calc(var(--size-display) * 1.1333)); font-weight: 900;
  line-height: 0.96; letter-spacing: -0.042em; text-wrap: pretty; }
.ab-lede { margin-top: 22px; max-width: 620px; font-size: calc(var(--size-subhead) * 0.9444); line-height: 1.62;
  color: rgba(245,245,245,0.78); text-wrap: pretty; }
.ab-hero-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
/* thin tapered gold rule closing the hero, same as the directory heroes */
.ab-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 1px;
  background: linear-gradient(90deg, rgba(214,157,56,0) 0%, rgba(255,210,107,0.55) 22%, rgba(255,210,107,0.75) 50%, rgba(255,210,107,0.55) 78%, rgba(214,157,56,0) 100%); }

/* ---- Mission & slogan ----------------------------------------------------- */
.ab-mission { position: relative; overflow: hidden; }
.ab-mission::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0.05;
  background: url('assets/brand-pattern.png?v=59e9ff10') center / 320px repeat; }
.ab-mission::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(110% 80% at 50% 0%, rgba(6,6,6,0.4) 0%, rgba(6,6,6,0.9) 70%, #060606 100%); }
.ab-mission .container { position: relative; z-index: 2; }
.ab-mission-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 72px; align-items: start; }
.ab-slogan { margin-top: 4px; font-size: clamp(calc(var(--size-heading) * 0.9375), 4vw, calc(var(--size-heading) * 1.5625)); font-weight: 900;
  line-height: 1.02; letter-spacing: -0.038em; color: var(--text-heading); }
.ab-slogan span { display: block; }
.ab-mission-stmt { margin-top: 32px; padding-top: 28px; max-width: 48ch;
  border-top: 1px solid var(--border-bevel-strong);
  font-size: var(--size-subhead); line-height: 1.56; font-weight: 500; color: var(--text-heading); text-wrap: pretty; }
.ab-mission-sub { margin-top: 16px; max-width: 52ch; text-wrap: pretty; }

.ab-principles { display: grid; gap: 22px; padding-top: 8px; }
.ab-principle { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; }
.ab-principle img { width: 20px; height: 20px; margin-top: 2px; }
.ab-principle h3 { font-size: calc(var(--size-body) * 1.1429); font-weight: 700; letter-spacing: -0.012em; color: var(--text-heading); }
.ab-principle p { margin-top: 6px; font-size: var(--size-body); line-height: 1.58; text-wrap: pretty; }

/* ---- Founder story -------------------------------------------------------- */
.ab-founder-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 68px; align-items: start; }
.ab-portrait { position: relative; margin: 0; border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--color-surface-2);
  border: 1px solid var(--border-bevel-strong); box-shadow: var(--bevel-highlight), var(--shadow-matte-lg); }
.ab-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.ab-portrait::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,6,0) 50%, rgba(6,6,6,0.28) 74%, rgba(6,6,6,0.8) 100%); }
.ab-portrait-tag { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ab-tag-name { font-size: calc(var(--size-body) * 1.0714); font-weight: 700; color: var(--text-heading); letter-spacing: -0.01em; }
.ab-tag-loc { font-size: calc(var(--size-meta) * 1.0455); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-mustard); }

.ab-founder-copy h2 { font-size: clamp(calc(var(--size-heading) * 0.875), 3.4vw, calc(var(--size-heading) * 1.3125)); font-weight: 800; line-height: 1.06;
  letter-spacing: -0.03em; margin-bottom: 22px; }
.ab-founder-copy p { max-width: 58ch; margin-bottom: 18px; text-wrap: pretty; }
.ab-founder-copy em { color: var(--text-heading); font-style: italic; }
.ab-quote { margin: 26px 0; padding: 0 0 0 22px; border-left: 2px solid var(--gold-honey);
  font-size: clamp(calc(var(--size-heading) * 0.5938), 2.1vw, calc(var(--size-heading) * 0.75)); font-weight: 600; line-height: 1.34;
  letter-spacing: -0.022em; color: var(--text-heading); text-wrap: pretty; }
.ab-sign { display: flex; align-items: center; gap: 18px; margin: 30px 0 20px; }

/* ---- Roadmap -------------------------------------------------------------- */
/* The rail is its own row ABOVE the cards, so no card background can occlude
   it. Knobs sit at the start of each grid column; the dotted line runs on past
   the last one, which is the point — the third phase is "and beyond". */
.ab-rm-rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; height: 22px; align-items: center; margin-bottom: 22px; }
.ab-rm-rail::before { content: ''; position: absolute; left: 11px; right: 0; top: 50%; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(214,157,56,0.5) 0 5px, transparent 5px 11px); }
.ab-rail-knob { position: relative; justify-self: start; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-surface-3); border: 1px solid rgba(214,157,56,0.26);
  box-shadow: var(--well-inset); transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ab-rail-knob.is-lit { background: var(--gold-knob); border-color: transparent;
  box-shadow: var(--gold-glow-strong), inset 0 1px 0 rgba(255,255,255,0.42); }

.ab-rm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ab-phase { position: relative; display: flex; flex-direction: column; padding: 26px 26px 30px;
  border-radius: var(--radius-card); border: 1px solid var(--border-bevel); background: var(--color-surface-1);
  box-shadow: var(--bevel-highlight), var(--shadow-matte); }
.ab-phase.is-now { background: var(--color-surface-2); border-color: var(--border-gold);
  box-shadow: var(--bevel-highlight), var(--shadow-matte-lg), var(--gold-glow); }
.ab-phase-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ab-when { display: inline-flex; align-items: center; height: 26px; padding: 0 13px; border-radius: 999px;
  font-size: calc(var(--size-meta) * 1.0455); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-body); background: var(--color-surface-3); border: 1px solid var(--border-bevel-strong); }
.ab-when.is-now { color: #2a1d05; background: var(--gold-metallic-135); border-color: transparent;
  box-shadow: var(--bevel-highlight); }
.ab-num { font-size: calc(var(--size-heading) * 0.8125); font-weight: 900; letter-spacing: -0.04em; line-height: 1;
  color: rgba(245,245,245,0.09); font-variant-numeric: tabular-nums; }
.ab-phase h3 { font-size: calc(var(--size-subhead) * 1.1667); font-weight: 800; letter-spacing: -0.024em; color: var(--text-heading); }
.ab-phase > p { margin-top: 10px; font-size: calc(var(--size-body) * 1.0357); line-height: 1.6; text-wrap: pretty; }
.ab-list { list-style: none; display: grid; gap: 11px; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--border-bevel-strong); }
.ab-list li { position: relative; padding-left: 22px; font-size: var(--size-body); line-height: 1.55;
  color: var(--text-body); text-wrap: pretty; }
.ab-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold-bar); box-shadow: 0 0 0 3px rgba(214,157,56,0.1); }

/* ---- Studio band ----------------------------------------------------------
   Unlike the hero, this photo arrives already dark and near-monochrome, so it
   needs a light touch: no heavy desaturation, and a left-to-right wash only
   deep enough to seat the copy column. The practical lights stay blown out. */
.ab-studio { position: relative; overflow: hidden; padding: 108px 0; }
.ab-studio-img { position: absolute; inset: 0; z-index: 0;
  background: url('assets/about/studio-chair.jpg?v=536542db') 52% 46% / cover no-repeat;
  filter: grayscale(0.2) brightness(0.88) contrast(1.04); }
.ab-studio-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(6,6,6,0.93) 0%, rgba(6,6,6,0.78) 38%, rgba(6,6,6,0.14) 76%, rgba(6,6,6,0) 100%),
  linear-gradient(180deg, #060606 0%, rgba(6,6,6,0) 22%, rgba(6,6,6,0) 76%, #060606 100%); }
.ab-studio .container { position: relative; z-index: 2; }
.ab-studio-copy { max-width: 620px; }
.ab-studio-copy h2 { font-size: clamp(calc(var(--size-heading) * 0.875), 3.6vw, calc(var(--size-heading) * 1.375)); font-weight: 800; line-height: 1.04;
  letter-spacing: -0.032em; margin-bottom: 22px; }
.ab-studio-copy p { margin-bottom: 16px; max-width: 56ch; color: rgba(255,255,255,0.8); text-wrap: pretty; }
.ab-studio-marks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ab-mark { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px;
  border-radius: 999px; font-size: calc(var(--size-small) * 1.0833); font-weight: 600; color: var(--text-heading);
  background: var(--glass-sheen); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--glass-edge); }
.ab-mark img { width: 15px; height: 15px; }

/* ---- Standing crew -------------------------------------------------------- */
.ab-crew { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.ab-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px;
  padding: 24px 12px 22px; border-radius: var(--radius-card); background: var(--color-surface-1);
  border: 1px solid var(--border-bevel); box-shadow: var(--bevel-highlight);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ab-person:hover { transform: translateY(-3px); border-color: var(--border-bevel-strong);
  box-shadow: var(--bevel-highlight), var(--shadow-matte); }
.ab-face { position: relative; width: 74px; height: 74px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-3); box-shadow: var(--well-inset); }
.ab-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* Plain gold, weight 800 — the same initials treatment as every other avatar
   well on the site (.mb-avatar, .dir-chip-face, .pm-initials). Never the
   metallic gradient: that recipe is for display headlines, not 20px glyphs. */
.ab-face-initials { font-size: calc(var(--size-subhead) * 1.1111); font-weight: 800; letter-spacing: -0.01em; color: var(--gold-mustard); }
.ab-person-id { display: block; }
.ab-person-name { display: block; font-size: calc(var(--size-body) * 1.0357); font-weight: 700; letter-spacing: -0.012em; color: var(--text-heading); line-height: 1.25; }
.ab-person-role { display: block; margin-top: 4px; font-size: var(--size-small); line-height: 1.4; color: var(--text-body); }
.ab-person-credits { display: block; margin-top: 7px; font-size: var(--size-meta); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); }

/* ---- Work with us --------------------------------------------------------- */
.ab-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ab-way { display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--radius-card);
  background: var(--color-surface-1); border: 1px solid var(--border-bevel);
  box-shadow: var(--bevel-highlight), var(--shadow-matte);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.ab-way:hover { transform: translateY(-4px); border-color: var(--border-bevel-strong); }
.ab-way h3 { font-size: calc(var(--size-subhead) * 1.0556); font-weight: 800; letter-spacing: -0.022em; color: var(--text-heading); }
.ab-way p { margin-top: 10px; margin-bottom: 22px; font-size: calc(var(--size-body) * 1.0357); line-height: 1.6; text-wrap: pretty; }
.ab-way .text-link { margin-top: auto; align-self: flex-start; }

/* ---- Press & inquiries ---------------------------------------------------- */
.ab-press { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 20px 40px; padding: 30px 0 0; }
.ab-press h3 { font-size: calc(var(--size-subhead) * 0.9444); font-weight: 700; letter-spacing: -0.014em; color: var(--text-heading); }
.ab-press p { margin-top: 7px; font-size: var(--size-body); max-width: 46ch; }
.ab-press-lines { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: var(--size-body); }
.ab-press-lines span { color: var(--text-muted); }

/* ---- Closing CTA: follow -------------------------------------------------- */
.ab-cta { position: relative; overflow: hidden; text-align: center; }
.ab-cta::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0.05;
  background: url('assets/brand-pattern.png?v=59e9ff10') center / 320px repeat; }
.ab-cta::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(80% 90% at 50% 40%, rgba(6,6,6,0.32) 0%, rgba(6,6,6,0.9) 68%, #060606 100%); }
.ab-cta .container { position: relative; z-index: 2; }
.ab-cta .kicker { margin-inline: auto; }
.ab-cta h2 { font-size: clamp(calc(var(--size-heading) * 0.9375), 4vw, calc(var(--size-heading) * 1.5)); font-weight: 900; line-height: 1.02; letter-spacing: -0.036em; }
.ab-cta > .container > p { margin: 16px auto 0; max-width: 46ch; text-wrap: pretty; }
.ab-socials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 42px; }
.ab-social { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 14px;
  border-radius: var(--radius-card); background: var(--color-surface-1); border: 1px solid var(--border-bevel);
  box-shadow: var(--bevel-highlight);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.ab-social:hover { transform: translateY(-4px); border-color: var(--border-gold);
  box-shadow: var(--bevel-highlight), var(--shadow-matte), var(--gold-glow); }
/* Same deep inset well the homepage value cards use (.value-icon) */
.ab-social-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: calc(var(--radius-card) * 0.8125); color: var(--gold-mustard);
  background: var(--color-surface-2); border: 1px solid var(--border-bevel);
  box-shadow: inset 0 4px 9px rgba(0,0,0,0.72), inset 0 8px 16px rgba(0,0,0,0.4), inset 0 -2px 3px rgba(255,255,255,0.04); }
.ab-social-net { font-size: var(--size-body); font-weight: 700; color: var(--text-heading); }
.ab-social-at { font-size: calc(var(--size-small) * 1.0833); font-weight: 600; color: var(--gold-mustard); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .ab-mission-grid { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .ab-founder-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 44px; }
  .ab-crew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-ways { grid-template-columns: minmax(0, 1fr); }
  .ab-rm, .ab-rm-rail { grid-template-columns: minmax(0, 1fr); }
  .ab-rm-rail { display: none; }
  .ab-rm { gap: 18px; }
}
@media (max-width: 760px) {
  .ab-hero { padding: calc(var(--nav-height) + 64px) 0 68px; }
  .ab-hero-img { background-position: 58% 44%; }
  .ab-lede { font-size: calc(var(--size-body) * 1.1429); }
  .ab-hero-links .btn { flex: 1 1 160px; justify-content: center; }
  .ab-founder-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ab-portrait { max-width: 380px; }
  .ab-studio { padding: 76px 0; }
  .ab-studio-img { background-position: 58% 46%; }
  .ab-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-press { flex-direction: column; }
}
@media (max-width: 480px) {
  .ab-slogan { font-size: calc(var(--size-heading) * 0.9375); }
  .ab-phase { padding: 22px 20px 26px; }
  .ab-way { padding: 26px 22px; }
}