/* ==========================================================================
   Lava New Media, 2026 design: About (/about/)

   Sections in the order of design/about/ABOUT.md: hero, the red seam, how
   we work, the partners, the company we keep (with the Estill quote), the
   close. Grounds: ink, red, white, charcoal, white, ink.
   Tokens, fonts, masthead, buttons, links, eyebrows and the footer are
   lava.css.

   The staged-object, reveal and close-actions rules under "shared" repeat
   what-we-do.css's (which repeat work.css's, case-study.css's and
   home.css's) exactly. They belong in lava.css, once, when that is allowed.
   ========================================================================== */

/* --------------------------------------------------------------- shared -- */
/* An object on a dark ground: rounded rectangle, the hairline edge and
   nothing else (SPEC.md section 1). */
.shot {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-object);
  border: 1px solid var(--edge-dark);
  background: var(--near-black);
}
.shot img { width: 100%; height: auto; object-fit: cover; object-position: top; }

/* Button plus text link; stacked and full width on the phone. */
.actions { display: flex; align-items: center; gap: 28px; margin-top: 8px; }
@media (max-width: 767px) {
  .actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 4px; }
  .actions .link { text-align: center; padding: 8px; }
}

/* Reveals, armed only once lava.js adds .js-anim: fade from 0.001 and rise
   16px when in view, once. */
.js-anim .reveal {
  opacity: 0.001; transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* Eyebrows: red rule and label on white; a grey label under the gold rule
   on the charcoal. */
.eyebrow--red::before { background: var(--red); }
.eyebrow--red .eyebrow__label { color: var(--red); }
.ab-partners .eyebrow__label { color: var(--gray-3); }

/* Held phrases ({...} in the copy, cs_text()): whole on one line from 768. */
@media (min-width: 768px) { .cs-keep { display: inline-block; } }
.cs-hero__red { color: var(--red); }

/* The section heading, Raleway 500 34. */
.ab-h2 { font: 500 34px/1.25 var(--display); letter-spacing: -0.5px; }
.ab-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.ab-label { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 767px) {
  .ab-h2 { font-size: 28px; line-height: 1.22; }
  .ab-head, .ab-label { gap: 16px; }
}

/* The label column (440 at 1440) beside the paragraphs, 64 apart. Stacked
   below 1024. */
.ab-split { display: grid; grid-template-columns: minmax(0, 440fr) minmax(0, 768fr); column-gap: 64px; align-items: start; }
.ab-split .ab-h2 { color: var(--ink); }
.ab-body { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; font: 400 19px/1.65 var(--body); color: var(--gray-1); }
.ab-body--company { gap: 18px; }
.ab-body__link { font-size: 15px; line-height: 1.5; }
@media (max-width: 1023px) {
  .ab-split { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .ab-label { max-width: 34em; }
  .ab-body { max-width: 40em; padding-top: 0; }
}
@media (max-width: 767px) {
  .ab-split { row-gap: 16px; }
  .ab-body { gap: 16px; font-size: 16px; line-height: 1.6; }
  .ab-body--company { gap: 16px; }
}

/* A portrait: the 3:4 crop at its own height inside the dark-ground
   hairline (rgba white 0.10) and the object radius. Nothing trims it. */
.ab-portrait {
  display: block; overflow: hidden;
  border-radius: var(--r-object);
  border: 1px solid var(--edge-dark);
  background: var(--near-black);
}
.ab-portrait img { width: 100%; height: auto; }

/* ----------------------------------------------------------------- hero -- */
/* Ink. From 1280 up: the copy at the left (a 700 column, the subhead 600 at
   most), the three portraits (176 each at 3:4, 24 apart: 576) as a row
   ending on the content margin, Ed and Tom on one baseline and Dave lifted
   60px, a name under each. The H1 reads "Three partners. 21 years." / "All
   referrals." at 76px: its first line is 833px, wider than the column, so
   the H1 alone may run 880 wide, over the row's column, and the row sits
   low enough that Ed's portrait (the one under that line's end) starts 48px
   below the line. The hero ends 140px under the row. Nothing bleeds. From
   1280 to 1440 the hero scales with the page (--u is one board px); above
   1440 it holds its 1440 sizes. (Ed's change of 2026-10-02 to board 50,
   which had a 520 column and 216 portraits.) */
.ab-hero { background: var(--near-black); color: var(--white); container-type: inline-size; }
.ab-hero__grid { --u: calc(min(100cqw, 1440px) / 1440); }
.ab-hero__eyebrow { font: 600 12px/1.25 var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.ab-hero h1 { margin-top: 26px; font: 700 76px/1.02 var(--display); letter-spacing: -2.2px; }
.ab-hero__sub { margin-top: 26px; max-width: 480px; font: 400 19px/1.6 var(--body); color: var(--gray-4); }

.ab-faces { display: grid; grid-template-columns: repeat(3, minmax(0, 216px)); column-gap: 24px; align-items: end; }
.ab-face { display: flex; flex-direction: column; gap: 14px; }
.ab-face--lift { padding-bottom: 60px; }
/* Each name centred under its portrait, at every width. */
.ab-face__name { font: 600 15px/1.3 var(--body); color: var(--white); text-align: center; }

/* 1024 up: the wider column, the H1 on two lines (greedy, not balanced:
   balance would pick "Three partners." / "21 years. All referrals."), the
   subhead 600, the portraits 176. */
@media (min-width: 1024px) {
  .ab-hero__text { max-width: 700px; }
  .ab-hero h1 { max-width: none; text-wrap: wrap; }
  .ab-hero__sub { max-width: 600px; }
  .ab-faces { grid-template-columns: repeat(3, minmax(0, 176px)); }
}
@media (min-width: 1280px) {
  .ab-hero__grid {
    /* The row's top: the H1's first line ends 160u + 41px (the eyebrow and
       its gap) + 77.52u (one 76px line) below the hero's top; Ed's portrait
       starts 48u under that, and Dave's 60u above Ed's. Its height: Dave's
       portrait (176u at 3:4, plus its 1px edges), the 14px gap, the 19.5px
       name, and the 60u lift. */
    --row-top: calc(225.52 * var(--u) + 41px);
    --row-h: calc(234.67 * var(--u) + 2px + 33.5px + 60 * var(--u));
    position: relative;
    min-height: calc(var(--row-top) + var(--row-h) + 140 * var(--u));
    padding-top: calc(160 * var(--u)); padding-bottom: calc(140 * var(--u));
  }
  .ab-hero__text { max-width: calc(700 * var(--u)); }
  .ab-hero h1 { width: calc(880 * var(--u)); font-size: calc(76 * var(--u)); letter-spacing: calc(-2.2 * var(--u)); }
  .ab-hero__sub { max-width: calc(600 * var(--u)); }
  .ab-faces {
    position: absolute; top: var(--row-top); right: var(--margin);
    grid-template-columns: repeat(3, calc(176 * var(--u))); column-gap: calc(24 * var(--u));
  }
  .ab-face--lift { padding-bottom: calc(60 * var(--u)); }
}
@media (min-width: 1280px) and (max-width: 1439px) { .ab-hero__sub { font-size: 18px; } }
/* 768 to 1279: the copy, then the row under it at the left. */
@media (max-width: 1279px) {
  .ab-hero__grid { padding-top: 104px; padding-bottom: 112px; }
  .ab-hero h1 { font-size: 64px; letter-spacing: -1.8px; }
  .ab-faces { margin-top: 64px; }
}
@media (max-width: 1023px) { .ab-hero h1 { max-width: 9em; font-size: 60px; } }
/* The phone, as the 390 board: 106-wide portraits (narrower at 360, where
   three at 106 do not fit), 12 apart, Dave lifted 36, first names only. */
@media (max-width: 767px) {
  .ab-hero__grid { padding-top: 64px; padding-bottom: 56px; }
  .ab-hero__eyebrow { font-size: 11px; }
  .ab-hero h1 { margin-top: 18px; font-size: 44px; line-height: 1.04; letter-spacing: -1.4px; }
  .ab-hero__sub { margin-top: 18px; font-size: 16px; }
  .ab-faces { margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 106px)); column-gap: 12px; }
  .ab-face { gap: 8px; }
  .ab-face--lift { padding-bottom: 36px; }
  .ab-portrait--hero { border-radius: 14px; }
  .ab-face__name { font-size: 13px; }
  .ab-face__last { display: none; }
}

/* ------------------------------------------------------------- red seam -- */
/* --lava-red-band. The line in a 520 column, the two paragraphs beside it. */
.ab-band { background: var(--lava-red-band); color: var(--white); padding: 120px 0 128px; }
.ab-band__grid { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 688fr); column-gap: 64px; align-items: start; }
.ab-band__heading { font: 700 64px/1.08 var(--display); letter-spacing: -1.8px; }
.ab-band__body { display: flex; flex-direction: column; gap: 20px; padding-top: 10px; font: 400 18px/1.65 var(--body); }
/* "never advertised." is held on one line (498px at 64), so the line
   scales with the page from 1280 to 1440 (57px at 1280, in a 451 column)
   and the band stacks below 1280, as it does on What We Do below 1024. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .ab-band__heading { font-size: calc(64 / 1440 * 100vw); letter-spacing: calc(-1.8 / 1440 * 100vw); }
}
@media (max-width: 1279px) {
  .ab-band { padding: 96px 0 104px; }
  .ab-band__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .ab-band__heading { max-width: 10em; font-size: 56px; }
  .ab-band__body { max-width: 40em; padding-top: 0; }
}
@media (max-width: 767px) {
  .ab-band { padding: 64px 0; }
  .ab-band__grid { row-gap: 18px; }
  .ab-band__heading { font-size: 40px; letter-spacing: -1px; }
  .ab-band__body { gap: 18px; font-size: 16px; line-height: 1.6; }
}
@media (max-width: 374px) { .ab-band__heading { font-size: 38px; } }

/* ---------------------------------------------------------- how we work -- */
.ab-how { padding: 130px 0; }
@media (max-width: 1023px) { .ab-how { padding: 104px 0; } }
@media (max-width: 767px)  { .ab-how { padding: 64px 0 56px; } }

/* --------------------------------------------------------- the partners -- */
/* Charcoal. Three columns 66 apart: the portrait (380 at 1440), the name,
   the role in gold, the bio, LinkedIn. Under them, on a #2A2A2E hairline,
   who you'll talk to: the heading in the 440 label column, the paragraph
   beside it. 768 to 1023: one partner a row, the portrait (240) beside
   the text. The phone: stacked on hairlines, 200-wide portraits. */
.ab-partners { background: var(--charcoal); color: var(--white); padding: 130px 0 120px; }
.ab-people { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 66px; }
.ab-person { display: flex; flex-direction: column; gap: 18px; }
.ab-person__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ab-person__who { display: flex; flex-direction: column; gap: 6px; }
.ab-person__name { font: 600 26px/1.2 var(--display); color: var(--white); }
.ab-person__role { font: 400 14px/1.45 var(--body); color: var(--gold); }
.ab-person__bio { font: 400 15px/1.6 var(--body); color: var(--gray-4); }
.ab-person__link { font-size: 15px; }

.ab-talk {
  margin-top: 72px; padding-top: 40px; border-top: 1px solid #2A2A2E;
  display: grid; grid-template-columns: minmax(0, 440fr) minmax(0, 768fr); column-gap: 64px; align-items: start;
}
.ab-talk__heading { font: 600 26px/1.25 var(--display); color: var(--white); }
.ab-talk__body { font: 400 17px/1.65 var(--body); color: var(--gray-4); }

@media (max-width: 1279px) { .ab-people { column-gap: 40px; } }
@media (max-width: 1023px) {
  .ab-partners { padding: 104px 0 96px; }
  .ab-people { grid-template-columns: minmax(0, 1fr); margin-top: 48px; border-bottom: 1px solid #2A2A2E; }
  .ab-person {
    display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 40px; align-items: start;
    padding: 40px 0; border-top: 1px solid #2A2A2E;
  }
  .ab-person__text { max-width: 34em; }
  .ab-talk { margin-top: 0; border-top: 0; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .ab-talk__body { max-width: 40em; }
}
@media (max-width: 767px) {
  .ab-partners { padding: 64px 0 56px; }
  .ab-people { margin-top: 24px; border-bottom: 0; }
  .ab-person { display: flex; flex-direction: column; gap: 14px; padding: 28px 0; }
  .ab-person .ab-portrait { width: 200px; }
  .ab-person__text { gap: 14px; }
  .ab-person__who { gap: 4px; }
  .ab-person__name { font-size: 24px; }
  .ab-person__role { font-size: 13px; }
  .ab-person__bio { line-height: 1.55; }
  .ab-talk { padding-top: 28px; border-top: 1px solid #2A2A2E; row-gap: 10px; }
  .ab-talk__heading { font-size: 22px; }
  .ab-talk__body { font-size: 15px; line-height: 1.6; }
}

/* ---------------------------------------------------- the company we keep -- */
/* White. The label column and the paragraph, then, 110 under them, the
   pull quote at the home page pattern: the red mark (180, a glyph hidden
   from assistive tech, its ink on the margin), the quote in Raleway 500 36
   across the content measure (1000 at most), then the Estill mark in ink
   beside a 1px #E6E6E6 rule, the name and title, and the story link. */
.ab-company { padding: 130px 0; }
.ab-quote { margin-top: 110px; display: flex; flex-direction: column; align-items: flex-start; }
.ab-quote__mark {
  margin: -10px 0 -74px -0.046875em;
  font: 700 180px/1 var(--display); color: var(--red);
  user-select: none; pointer-events: none;
}
.ab-quote__text { max-width: 1000px; font: 500 36px/1.22 var(--display); letter-spacing: -0.6px; color: var(--ink); }
.ab-quote__text p { text-wrap: balance; }
.ab-quote__who { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.ab-quote__logo { flex-shrink: 0; width: auto; height: 32px; }
.ab-quote__rule { flex: none; width: 1px; height: 40px; background: var(--hairline-light); }
.ab-quote__person { display: flex; flex-direction: column; gap: 4px; }
.ab-quote__name { font: 600 16px/1.3 var(--body); color: var(--ink); }
.ab-quote__title { font: 400 15px/1.3 var(--body); color: var(--gray-2); }
.ab-quote__link { margin-left: 24px; font-size: 15px; }
@media (max-width: 1023px) {
  .ab-company { padding: 104px 0; }
  .ab-quote { margin-top: 88px; }
  .ab-quote__text { font-size: 32px; }
  .ab-quote__who { flex-wrap: wrap; row-gap: 24px; }
  .ab-quote__link { flex-basis: 100%; margin-left: 0; }
}
/* The phone, as the 390 board: the mark at 120, the quote at 24, the name
   and title, the link under them; no logo. */
@media (max-width: 767px) {
  .ab-company { padding: 64px 0 56px; }
  .ab-quote { margin-top: 48px; }
  .ab-quote__mark { margin: 0 0 -48px -0.046875em; font-size: 120px; }
  .ab-quote__text { font-size: 24px; line-height: 1.25; letter-spacing: -0.5px; }
  .ab-quote__who { margin-top: 20px; row-gap: 12px; }
  .ab-quote__logo, .ab-quote__rule { display: none; }
  .ab-quote__name { font-size: 15px; }
  .ab-quote__title { font-size: 14px; line-height: 1.5; }
}

/* ---------------------------------------------------------------- close -- */
/* Ink, continuous with the footer; the footer's hairline is the seam. */
.ab-close { background: var(--near-black); color: var(--white); }
.ab-close__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 120px; padding-bottom: 100px; }
.ab-close h2 { font: 700 56px/1.08 var(--display); letter-spacing: -1.5px; }
.ab-close__sub { max-width: 720px; font: 400 19px/1.6 var(--body); color: var(--gray-4); }
.ab-close .actions { align-self: stretch; }
@media (max-width: 1023px) {
  .ab-close__inner { padding-top: 100px; padding-bottom: 88px; }
  .ab-close h2 { font-size: 48px; }
}
@media (max-width: 767px) {
  .ab-close__inner { gap: 18px; padding-top: 64px; padding-bottom: 80px; }
  .ab-close h2 { font-size: 36px; line-height: 1.1; letter-spacing: -1px; }
  .ab-close__sub { font-size: 16px; }
  .ab-close .actions { margin-top: 6px; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
}