/* P-171 (founder, 2026-11-10, K11.1): /about on the homepage's own styles (homepage.css, homepage-a11y.css, homepage-sample.css
   are loaded first: header, footer, .hero.dark, .softband, .btn, .posline, .lede, .h2, .ic). This file is only the page's layout,
   built from the homepage's tokens. One light theme (decision 178) with one navy band; WCAG AA; no sideways scroll at 360–430 px;
   44 px tap targets on phones (P-159). */

/* One measure for the whole page: the story column (640) + the founder card (300). */
.ab-story,.ab-in{max-width:1012px;margin-left:auto;margin-right:auto}

/* homepage-a11y.css renders the homepage's long sections lazily (content-visibility, 900 px placeholders); these are short. */
.ab-page main>section{content-visibility:visible;contain-intrinsic-size:none}

/* The navy band: the homepage hero (its glow and grid), shorter. */
.ab-hero{padding:88px 0 96px}
.ab-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:13.5px;font-weight:700}
.ab-hero h1{max-width:820px;margin-bottom:22px}
.ab-hero .lede{max-width:640px;margin-bottom:0}

/* The story and the founder card. */
.ab-story-s{padding:80px 0 24px}
.ab-story{display:grid;grid-template-columns:minmax(0,640px) 300px;grid-template-areas:"s1 card" "s2 card";column-gap:72px}
.ab-s1{grid-area:s1}
.ab-s2{grid-area:s2}
.ab-story p{font-size:18px;line-height:1.7;color:#24324A;margin:0 0 22px}
.ab-story .ab-why{margin:32px 0 0;font-size:21px;line-height:1.4;color:var(--ink)}
.ab-card{grid-area:card;align-self:start;position:sticky;top:104px;background:#fff;border:1px solid #DFE6EF;border-radius:24px;padding:28px 24px 22px;text-align:center;box-shadow:0 30px 80px -40px rgba(7,20,36,.4)}
.ab-card p{margin:0}
.ab-ph{display:block;width:160px;height:160px;margin:0 auto 16px;border-radius:50%;overflow:hidden;background:var(--mist)}
.ab-ph img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 40%}
.ab-card .ab-name{font-size:20px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.ab-card .ab-role{margin-top:2px;font-size:15.5px;font-weight:600;color:#3B4A60}
.ab-card .ab-loc{margin-top:2px;font-size:15px;color:#3B4A60}
.ab-card .ab-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.ab-lk{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid #C9D4E3;background:#fff;color:var(--ink);font-size:15px;font-weight:700;text-decoration:none;transition:border-color .2s,background .2s}
.ab-lk:hover{border-color:#8FA3BF;background:#F7FAFD}
.ab-lk:focus-visible,.ab-btn2:focus-visible,.ab-contact a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* What we look at. */
.ab-look{padding:56px 0 88px}
.ab-h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:16px}
.ab-p{font-size:18px;line-height:1.7;color:#24324A}
.ab-in .ab-p{max-width:720px;margin:0}
.ab-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:28px 0 0}
.ab-chips li{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid #DFE6EF;font-size:15.5px;font-weight:700;color:var(--ink)}
.ab-chips .ic{width:20px;height:20px;color:#1d3557}

/* The statement band (#EEF3F9, the homepage's .softband). */
.ab-band{padding:104px 0}
.ab-big{margin-top:0;margin-bottom:0;font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.12;font-weight:800;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.ab-big span{display:block}
.ab-rev{display:flex;align-items:flex-start;gap:10px;margin-top:32px;margin-bottom:0;font-size:18px;line-height:1.5;font-weight:600;color:#3B4A60}
.ab-rev .ic{width:24px;height:24px;color:#1d3557;margin-top:0}

/* The close. */
.ab-close{padding:88px 0 96px}
.ab-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ab-btn2{background:#fff;border-color:#C9D4E3;color:var(--ink)}
.ab-btn2:hover{border-color:#8FA3BF;background:#F7FAFD}
.ab-contact{margin-top:28px;margin-bottom:0;font-size:15.5px;line-height:1.6;color:#3B4A60}
.ab-contact a{color:#1f57c4;font-weight:600;text-underline-offset:2px;overflow-wrap:anywhere}

/* Tablets and phones: one column, the founder card right after the first paragraph so the face shows early. */
@media (max-width:1000px){
  .ab-story{grid-template-columns:minmax(0,640px);grid-template-areas:"s1" "card" "s2";justify-content:center}
  .ab-card{position:static;margin:6px 0 34px}
  .ab-in{max-width:640px}
}
@media (max-width:760px){
  .ab-hero{padding:56px 0 64px}
  .ab-story-s{padding:48px 0 16px}
  .ab-story p,.ab-p{font-size:17px}
  .ab-story .ab-why{font-size:19px}
  .ab-ph{width:120px;height:120px;margin-bottom:12px}
  .ab-card{padding:24px 18px 18px}
  .ab-look{padding:40px 0 64px}
  .ab-band{padding:68px 0}
  .ab-rev{font-size:17px}
  .ab-close{padding:64px 0 72px}
  .ab-ctas .btn{flex:1 1 100%;white-space:normal;text-align:center}
  /* The homepage header's and footer's links, as 44 px tap targets on a phone (P-159); they look the same. */
  .ab-page .nav .logo,.ab-page .foot .logo{min-height:44px}
  .ab-page .nav-menu-b{width:44px;height:44px}
  .ab-page .foot nav{gap:0 20px}
  .ab-page .foot nav a{display:inline-flex;align-items:center;min-height:44px}
}
/* P-176: the hero H1's second sentence starts its own line (no break mid-sentence on phones). */
.ab-h1b{display:block}