/* If Possible 4.0: About page. Scoped under .hp, homepage tokens only. */

/* ---- Hero: the claim beside the two founders ---- */
.hp .ab-hero{padding-block:92px 120px}
.hp .ab-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.hp .ab-copy{display:flex;flex-direction:column;gap:30px}
.hp .ab-copy .h1{font-size:88px}
.hp .ab-duo{height:600px}
.hp .ab-duo .c{width:48%;height:70%}
.hp .ab-duo .s{width:48%;height:70%;top:22%}
.hp .ab-duo .c{transform:rotate(-1.4deg)}
.hp .ab-duo .s{transform:rotate(1.2deg)}
.hp .ab-duo .cap b{font-family:var(--f-mono);font-stretch:100%;font-weight:400;font-size:12px;letter-spacing:.12em;color:var(--ink2)}
.hp .ab-duo .cc{left:6px;top:calc(70% + 22px)}
.hp .ab-duo .cs{right:6px;top:calc(92% + 22px);text-align:right}
.hp .ab-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:84px}
.hp .ab-stats .num{margin:0}
.hp .ab-stats .wc{display:block}
.hp .ab-stats .long{color:var(--ink2);opacity:1}

/* ---- Pain points: nine numbered truths on the dark page ---- */
.hp .ab-pain{padding-block:120px}
.hp .ab-head{display:flex;flex-direction:column;gap:18px;margin-bottom:64px;max-width:900px}
.hp .ab-pp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:44px;counter-reset:pp}
.hp .ab-pp .pp{counter-increment:pp;border-top:1px solid var(--lineD);padding:26px 0 34px;display:flex;flex-direction:column;gap:14px}
.hp .ab-pp .pp-n::before{content:counter(pp,decimal-leading-zero);font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;color:var(--accD);transition:color .25s ease}
.hp .ab-pp .pp:hover .pp-n::before{color:#f6e270}
.hp .ab-pp .pp p{margin:0;font-size:19px;line-height:1.45;color:var(--inkD)}
.hp .ab-ppclose{margin-top:56px;padding-top:44px;border-top:1px solid var(--lineD);display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.hp .ab-ppclose .aside{margin:0;font-size:32px;max-width:720px}
.hp .ab-ppclose em{font-style:italic;color:var(--accD)}
.hp .ab-pain .qmom{margin-top:96px}

/* ---- Founder story: four real photos, the long letter beside them ---- */
.hp .ab-story{padding-block:130px}
.hp .ab-founder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:84px;align-items:start}
.hp .ab-photos{position:sticky;top:110px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.hp .ab-photos .ph{margin:0;background:var(--frame,#fff);padding:10px;box-shadow:var(--frame-sh)}
.hp .ab-photos .ph img{display:block;width:100%;height:auto;filter:url(#gu-duo-navy)}
.hp .ab-photos .p1{transform:rotate(-1.3deg)}
.hp .ab-photos .p2{margin-top:72px;transform:rotate(1.1deg)}
.hp .ab-photos .p3{margin-top:-48px;transform:rotate(.8deg)}
.hp .ab-photos .p4{transform:rotate(-1deg)}
.hp .ab-photos .p4 img{aspect-ratio:4/5;object-fit:cover;object-position:46% 40%}
.hp .ab-body{display:flex;flex-direction:column;gap:22px;max-width:640px}
.hp .ab-intro{display:flex;flex-direction:column;gap:20px;margin-bottom:14px}
.hp .ab-body .body{margin:0;font-size:18px;line-height:1.66;color:var(--ink2)}
.hp .ab-body .kick{color:var(--ink);font-weight:650}
.hp .ab-pulls{margin:8px 0 10px}
.hp .ab-pulls li{font-size:19px;color:var(--ink)}
.hp .ab-pulls em{font-family:var(--f-serif);font-style:italic;font-size:1.12em;color:var(--acc)}
.hp .ab-close{margin:22px 0 0;padding-top:30px;border-top:1px solid var(--line);font-family:var(--f-serif);font-style:italic;font-size:34px;line-height:1.2;color:var(--ink);text-wrap:balance}
.hp .ab-close em{font-family:var(--f-sans);font-style:normal;font-stretch:72%;font-weight:850;text-transform:uppercase;font-size:1.02em;background:linear-gradient(transparent 54%,var(--band) 54%,var(--band) 93%,transparent 93%);padding:0 .06em}

/* ---- The If Methodology ---- */
.hp .ab-meth{padding-block:120px}
.hp .ab-split{padding-block:0;margin-bottom:110px}
.hp .ab-venn{position:relative;container-type:inline-size;outline:none}
.hp .ab-venn svg{position:relative;z-index:1}
.hp .intel-grid{position:absolute;inset:-4% -2%;background-image:linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);background-size:28px 28px;-webkit-mask:radial-gradient(closest-side,#000,rgba(0,0,0,0));mask:radial-gradient(closest-side,#000,rgba(0,0,0,0));opacity:0;transition:opacity .45s ease;pointer-events:none}
.hp .intel-title{position:absolute;z-index:2;left:80.4%;top:50.2%;transform:translateY(-62%);display:flex;flex-direction:column;line-height:1.05;color:var(--ink);pointer-events:none}
.hp .intel-title .the{font-family:var(--f-serif);font-style:italic;font-size:2.6cqw}
.hp .intel-title .big{font-stretch:85%;font-weight:650;font-size:2.6cqw;white-space:nowrap}
.hp .ab-venn:hover .intel-grid,.hp .ab-venn:focus-visible .intel-grid{opacity:1}
.hp .ab-venn .intel-title .big{transition:text-shadow .45s ease}
.hp .ab-venn:hover .intel-title .big,.hp .ab-venn:focus-visible .intel-title .big{text-shadow:0 0 .35em rgba(246,226,112,.95),0 0 .9em rgba(246,226,112,.55)}
.hp .ab-comphead{margin-bottom:40px}
.hp .ab-comphead .hd{font-size:40px}
.hp .ab-comps{grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:comp}
.hp .ab-comps .card{counter-increment:comp}
.hp .ab-comps .card::after{content:counter(comp,decimal-leading-zero);position:absolute;right:30px;top:36px;font-family:var(--f-mono);font-size:13px;color:var(--ink2);letter-spacing:.08em}
.hp .ab-comps .ttl{font-size:32px}
.hp .ab-comps .rule{width:40px;height:2px;background:var(--acc);margin:4px 0}
.hp .ab-comps .body{margin:0}

/* ---- Reveal once (the live page's choreography, calmer) ---- */
html.ab-rv .hp [data-rv]{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.ab-rv .hp .ab-photos[data-rv],html.ab-rv .hp .ab-duo[data-rv]{transform:translateY(26px)}
html.ab-rv .hp [data-rv].rv-in{opacity:1;transform:none}

@container (max-width:700px){
  .hp .ab-hero{padding-block:44px 64px}
  .hp .ab-hero-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .hp .ab-copy .h1{font-size:46px}
  .hp .ab-duo{height:400px}
  .hp .ab-duo .cap b{font-size:10.5px}
  .hp .ab-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:72px}
  .hp .ab-stats .num{font-size:32px}
  .hp .ab-pain,.hp .ab-story,.hp .ab-meth{padding-block:72px}
  .hp .ab-head{margin-bottom:36px}
  .hp .ab-pp{grid-template-columns:minmax(0,1fr)}
  .hp .ab-pp .pp{padding:20px 0 24px;flex-direction:row;gap:18px;align-items:baseline}
  .hp .ab-pp .pp p{font-size:17px}
  .hp .ab-ppclose{margin-top:24px;padding-top:32px}
  .hp .ab-ppclose .aside{font-size:25px}
  .hp .ab-pain .qmom{margin-top:64px}
  .hp .ab-founder{grid-template-columns:minmax(0,1fr);gap:48px}
  .hp .ab-photos{position:static;gap:14px}
  .hp .ab-photos .ph{padding:7px}
  .hp .ab-photos .p2{margin-top:40px}
  .hp .ab-photos .p3{margin-top:-26px}
  .hp .ab-body .body{font-size:17px}
  .hp .ab-close{font-size:27px}
  .hp .ab-split{margin-bottom:64px;gap:36px}
  .hp .ab-venn{margin-right:-8px}
  .hp .intel-title .the,.hp .intel-title .big{font-size:2.7cqw}
  .hp .ab-comphead .hd{font-size:30px}
  .hp .ab-comps{grid-template-columns:minmax(0,1fr)}
  .hp .ab-comps .ttl{font-size:27px}
}

/* no italics outside quotes */
.hp.hp.hp .aside{font-style:normal;font-family:var(--f-sans);font-weight:600}

/* ---- QA pass: laptop and tablet fit (701 to 1140 wide) ---- */
@container (min-width:701px) and (max-width:1140px){
  .hp.t-stack .h1{font-size:clamp(52px,7.6cqw,104px)}
  .hp.t-stack .h2{font-size:clamp(36px,5.2cqw,70px)}
}

/* ---- QA pass: ledger numbers fit their cells (701 to 1140 wide) ---- */
@container (min-width:701px) and (max-width:1140px){
  .hp .stats .num{font-size:clamp(38px,4.8cqw,64px)}
  .hp .stats .wc{letter-spacing:.14em}
}

@container (min-width:701px) and (max-width:1140px){
  .hp .ab-copy .h1{font-size:clamp(48px,6.2cqw,88px)}
}

/* Founder bios (Oct 31): room above the eyebrow, and the #colleen / #scott anchors land clear of the top edge */
.hp .ab-bios{margin:26px 0 0}
.hp .ab-bio{scroll-margin-top:96px}
.hp .ab-bio a{color:inherit;text-decoration:underline;text-underline-offset:3px}