/* ==========================================================================
   Piston Tribe: About (/about/) and team member pages (/about/{slug}/)
   Source of truth: about-mockup.html (Plan/)

   RULES FOR THIS FILE
   - Copy it in as-is. Don't round, rename or "tidy" values.
   - Every selector is prefixed .pt-ab-. Nothing outside .pt-ab-scope is styled.
   - Load it only on /about/, /about/{slug}/ and /about/careers/.
   - Tokens marked ASSUMED: if design-tokens.md differs, report it. Don't
     silently swap it.
   - Theme fixes go ONLY in the OVERRIDES block at the bottom, each with a
     comment.
   ========================================================================== */

:root{
  --pt-ab-ink:#1A1A1A;
  --pt-ab-paper:#FAF9F6;
  --pt-ab-white:#FFFFFF;
  --pt-ab-graphite:#23211E;
  --pt-ab-bone:#EFEBE3;
  --pt-ab-sunk:#F3F1EB;          /* ASSUMED */
  --pt-ab-line:#E4E2DB;
  --pt-ab-line-strong:#C9C7BF;
  --pt-ab-accent:#185FA5;
  --pt-ab-amber:#B26A00;         /* ASSUMED: "next" milestone only */
  --pt-ab-green:#1F6B45;         /* ASSUMED */
  --pt-ab-muted:#78746C;         /* ASSUMED */
  --pt-ab-soft:#55524C;          /* ASSUMED */
  --pt-ab-band-text:#F3F1EB;
  --pt-ab-band-dim:#AFA89C;
  --pt-ab-band-line:#3A3631;
  --pt-ab-sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --pt-ab-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

/* 0. Scope ---------------------------------------------------------------- */
.pt-ab-scope,.pt-ab-scope *{box-sizing:border-box}
.pt-ab-scope{background:var(--pt-ab-paper);color:var(--pt-ab-ink);font-family:var(--pt-ab-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.pt-ab-scope :focus-visible{outline:2px solid var(--pt-ab-accent);outline-offset:2px}
.pt-ab-scope [hidden]{display:none!important}
.pt-ab-scope a{color:var(--pt-ab-accent);text-decoration:none}
.pt-ab-scope a:hover{text-decoration:underline;text-underline-offset:3px}
.pt-ab-scope h1,.pt-ab-scope h2,.pt-ab-scope h3,.pt-ab-scope p{margin:0;text-transform:none}
.pt-ab-mono{font-family:var(--pt-ab-mono)}
.pt-ab-wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* 1. Buttons ------------------------------------------------------------- */
.pt-ab-btn,.pt-ab-btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:0;font:700 15px var(--pt-ab-sans);text-transform:none;letter-spacing:0;cursor:pointer;white-space:nowrap}
.pt-ab-scope a.pt-ab-btn,.pt-ab-btn{background:var(--pt-ab-ink);color:var(--pt-ab-paper);border:0}
.pt-ab-scope a.pt-ab-btn:hover{background:#000;text-decoration:none}
.pt-ab-scope a.pt-ab-btn2,.pt-ab-btn2{background:var(--pt-ab-white);color:var(--pt-ab-ink);border:1px solid var(--pt-ab-line-strong)}
.pt-ab-scope a.pt-ab-btn2:hover{border-color:var(--pt-ab-ink);text-decoration:none}
.pt-ab-scope a.pt-ab-btn.is-light,.pt-ab-btn.is-light{background:var(--pt-ab-bone);color:var(--pt-ab-ink)}
.pt-ab-scope a.pt-ab-btn2.is-dark,.pt-ab-btn2.is-dark{background:transparent;color:var(--pt-ab-band-text);border-color:var(--pt-ab-band-dim)}
.pt-ab-actions{display:flex;gap:10px;flex-wrap:wrap}

/* 2. Hero ------------------------------------------------------------------ */
.pt-ab-hero{background:var(--pt-ab-graphite);color:var(--pt-ab-band-text);padding:34px 0 64px}
.pt-ab-crumb{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;margin-bottom:48px;border-bottom:1px solid var(--pt-ab-band-line);font:12.5px var(--pt-ab-mono);color:var(--pt-ab-band-dim)}
.pt-ab-scope .pt-ab-crumb a{color:var(--pt-ab-band-dim)}
.pt-ab-hero h1{max-width:22ch;font-size:52px;line-height:1.05;font-weight:800;letter-spacing:-.03em;color:var(--pt-ab-band-text)}
.pt-ab-hero-lead{max-width:60ch;margin-top:20px!important;font-size:18px;line-height:1.55;color:var(--pt-ab-band-dim)}
.pt-ab-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.pt-ab-fact{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--pt-ab-band-line);font:12.5px var(--pt-ab-mono);color:var(--pt-ab-band-text)}

/* In-page nav (sticky under the site header) */
.pt-ab-toc{position:sticky;top:var(--pt-header-h,72px);z-index:20;background:var(--pt-ab-paper);border-bottom:1px solid var(--pt-ab-line)}
.pt-ab-toc-in{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;height:52px;align-items:center}
.pt-ab-toc-in::-webkit-scrollbar{display:none}
.pt-ab-scope .pt-ab-toc a{flex:none;font-size:14px;font-weight:600;color:var(--pt-ab-soft);padding:14px 0;border-bottom:2px solid transparent}
.pt-ab-scope .pt-ab-toc a:hover{color:var(--pt-ab-ink);text-decoration:none}
.pt-ab-scope .pt-ab-toc a[aria-current="true"]{color:var(--pt-ab-ink);border-bottom-color:var(--pt-ab-ink)}

/* 3. Section shell ------------------------------------------------------- */
.pt-ab-sec{padding:80px 0;border-top:1px solid var(--pt-ab-line);scroll-margin-top:calc(var(--pt-header-h,72px) + 52px)}
.pt-ab-sec.is-white{background:var(--pt-ab-white)}
.pt-ab-eyebrow{margin:0 0 10px!important;font:12.5px var(--pt-ab-mono);color:var(--pt-ab-muted)}
.pt-ab-h2{max-width:30ch;font-size:34px;line-height:1.12;font-weight:800;letter-spacing:-.025em;color:var(--pt-ab-ink)}
.pt-ab-intro{max-width:62ch;margin-top:14px!important;font-size:17px;line-height:1.6;color:var(--pt-ab-soft)}
.pt-ab-head{margin-bottom:44px}

/* 4. Mission + pillars --------------------------------------------------- */
.pt-ab-mission{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start}
.pt-ab-statement{font-size:28px;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--pt-ab-ink);border-left:3px solid var(--pt-ab-ink);padding-left:24px}
.pt-ab-pillars{display:grid;gap:16px}
.pt-ab-pillar{background:var(--pt-ab-white);border:1px solid var(--pt-ab-line);padding:22px 24px}
.pt-ab-pillar-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pt-ab-ic{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--pt-ab-line-strong);background:var(--pt-ab-white)}
.pt-ab-ic svg{width:18px;height:18px;display:block}
.pt-ab-pillar h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
.pt-ab-pillar p{font-size:15px;line-height:1.6;color:var(--pt-ab-soft)}

/* Guided deal: three stages */
.pt-ab-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:56px;border:1px solid var(--pt-ab-line);background:var(--pt-ab-white)}
.pt-ab-stage{padding:24px 26px;border-left:1px solid var(--pt-ab-line)}
.pt-ab-stage:first-child{border-left:0}
.pt-ab-stage-n{font:600 12.5px var(--pt-ab-mono);color:var(--pt-ab-muted);margin-bottom:10px!important}
.pt-ab-stage h3{font-size:17px;font-weight:800;margin-bottom:6px}
.pt-ab-stage p{font-size:14.5px;line-height:1.6;color:var(--pt-ab-soft)}
.pt-ab-stages-cap{margin-top:12px!important;font-size:13.5px;color:var(--pt-ab-muted)}

/* 5. Three sides --------------------------------------------------------- */
.pt-ab-sides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pt-ab-side{display:flex;flex-direction:column;background:var(--pt-ab-white);border:1px solid var(--pt-ab-line);padding:24px}
.pt-ab-side h3{font-size:20px;font-weight:800;margin:14px 0 6px}
.pt-ab-side p{font-size:15px;line-height:1.6;color:var(--pt-ab-soft);flex:1}
.pt-ab-scope .pt-ab-side-link{margin-top:16px;font-size:14.5px;font-weight:600}

/* 6. How we work (promises) ---------------------------------------------- */
.pt-ab-promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--pt-ab-ink)}
.pt-ab-promise{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:22px 24px 22px 0;border-bottom:1px solid var(--pt-ab-line)}
.pt-ab-promise:nth-child(even){padding-left:24px;padding-right:0;border-left:1px solid var(--pt-ab-line)}
.pt-ab-promise svg{width:20px;height:20px;margin-top:3px}
.pt-ab-promise h3{font-size:16.5px;font-weight:800;margin-bottom:4px}
.pt-ab-promise p{font-size:15px;line-height:1.6;color:var(--pt-ab-soft)}

/* 7. How we make money --------------------------------------------------- */
.pt-ab-money{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;align-items:start}
.pt-ab-rows{background:var(--pt-ab-white);border:1px solid var(--pt-ab-line)}
.pt-ab-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:16px 20px;border-bottom:1px solid var(--pt-ab-line);align-items:baseline}
.pt-ab-row:last-child{border-bottom:0}
.pt-ab-row b{display:block;font-size:15px;font-weight:700}
.pt-ab-row-sub{font-size:13.5px;color:var(--pt-ab-muted)}
.pt-ab-row-v{font:600 15px var(--pt-ab-mono);color:var(--pt-ab-ink);text-align:right;white-space:nowrap}

/* 8. Timeline ------------------------------------------------------------ */
.pt-ab-tl{position:relative}
.pt-ab-tl-track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:0;overflow-x:auto;scrollbar-width:thin;padding-bottom:8px}
.pt-ab-tl-track::before{content:"";position:absolute;left:0;right:0;top:27px;border-top:1px solid var(--pt-ab-line-strong)}
.pt-ab-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 16px 16px 0;background:none;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.pt-ab-node-dot{width:18px;height:18px;border-radius:50%;background:var(--pt-ab-ink);border:3px solid var(--pt-ab-paper);box-shadow:0 0 0 1px var(--pt-ab-ink);position:relative;z-index:1;margin-bottom:6px}
.pt-ab-node.is-next .pt-ab-node-dot{background:var(--pt-ab-paper);box-shadow:0 0 0 1px var(--pt-ab-amber)}
.pt-ab-node-date{font:600 12.5px var(--pt-ab-mono);color:var(--pt-ab-muted)}
.pt-ab-node.is-next .pt-ab-node-date{color:var(--pt-ab-amber)}
.pt-ab-node-title{font-size:15px;line-height:1.35;font-weight:700;color:var(--pt-ab-ink);max-width:20ch}
.pt-ab-node-more{font-size:13px;color:var(--pt-ab-accent)}
.pt-ab-node[aria-expanded="true"] .pt-ab-node-dot{transform:scale(1.25)}
.pt-ab-node[aria-expanded="true"] .pt-ab-node-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.pt-ab-node:hover .pt-ab-node-title{text-decoration:underline;text-underline-offset:4px}

.pt-ab-tl-panel{margin-top:16px;background:var(--pt-ab-white);border:1px solid var(--pt-ab-line);border-left:3px solid var(--pt-ab-ink);padding:24px 28px;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:32px}
.pt-ab-tl-panel.no-media{grid-template-columns:1fr}
.pt-ab-tl-panel-date{font:600 12.5px var(--pt-ab-mono);color:var(--pt-ab-muted);margin-bottom:6px!important}
.pt-ab-tl-panel h3{font-size:22px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.pt-ab-tl-panel p{font-size:15.5px;line-height:1.65;color:var(--pt-ab-soft);max-width:64ch}
.pt-ab-tl-panel p + p{margin-top:10px}
.pt-ab-tl-media{border:1px solid var(--pt-ab-line);aspect-ratio:4/3;overflow:hidden;background:var(--pt-ab-sunk)}
.pt-ab-tl-media img{width:100%;height:100%;object-fit:cover;display:block}
.pt-ab-tl-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px!important;font-size:13.5px}
.pt-ab-tl-nav{display:flex;gap:8px}
.pt-ab-tl-nav button{height:34px;padding:0 12px;border:1px solid var(--pt-ab-line-strong);background:var(--pt-ab-white);font:600 13px var(--pt-ab-sans);cursor:pointer;border-radius:0}
.pt-ab-tl-nav button:hover{border-color:var(--pt-ab-ink)}

/* 9. Team structure (org chart) ------------------------------------------ */
.pt-ab-org{background:var(--pt-ab-white);border:1px solid var(--pt-ab-line);padding:40px 32px 36px}
.pt-ab-org-top{display:flex;justify-content:center}
.pt-ab-scope a.pt-ab-lead{display:flex;align-items:center;gap:14px;min-width:300px;padding:14px 22px 14px 14px;background:var(--pt-ab-graphite);color:var(--pt-ab-band-text);text-decoration:none}
.pt-ab-lead .pt-ab-av{width:52px;height:52px;border:2px solid var(--pt-ab-band-line)}
.pt-ab-lead b{display:block;font-size:18px;font-weight:800;color:var(--pt-ab-band-text)}
.pt-ab-lead-sub{display:block;font-size:13.5px;color:var(--pt-ab-band-dim)}
.pt-ab-scope a.pt-ab-lead:hover b{text-decoration:underline;text-underline-offset:3px}

.pt-ab-depts{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding-top:28px}
.pt-ab-depts::before{content:"";position:absolute;top:0;left:50%;height:28px;border-left:1px solid var(--pt-ab-line-strong)}
.pt-ab-dept{position:relative;padding:28px 12px 0}
.pt-ab-dept::before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--pt-ab-line-strong)}
.pt-ab-dept:first-child::before{left:50%}
.pt-ab-dept:last-child::before{right:50%}
.pt-ab-dept:only-child::before{display:none}
.pt-ab-dept::after{content:"";position:absolute;top:0;left:50%;height:28px;border-left:1px solid var(--pt-ab-line-strong)}
.pt-ab-dept-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--pt-ab-sunk);border:1px solid var(--pt-ab-line)}
.pt-ab-dept-head b{font-size:15.5px;font-weight:800}
.pt-ab-dept-head span{font:12.5px var(--pt-ab-mono);color:var(--pt-ab-muted)}
.pt-ab-people{position:relative;display:grid;gap:10px;margin-top:20px}
.pt-ab-people::before{content:"";position:absolute;top:-20px;left:50%;height:20px;border-left:1px solid var(--pt-ab-line-strong)}
.pt-ab-scope a.pt-ab-person{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--pt-ab-white);border:1px solid var(--pt-ab-line);color:var(--pt-ab-ink);text-decoration:none}
.pt-ab-scope a.pt-ab-person:hover{border-color:var(--pt-ab-ink);text-decoration:none}
.pt-ab-av{width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;background:var(--pt-ab-sunk);display:block}
.pt-ab-av img{width:100%;height:100%;object-fit:cover;display:block}
.pt-ab-person b{display:block;font-size:15px;font-weight:700;line-height:1.3;color:var(--pt-ab-ink)}
.pt-ab-person-sub{display:block;font-size:13.5px;color:var(--pt-ab-muted);line-height:1.35}
.pt-ab-scope a.pt-ab-open{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px dashed var(--pt-ab-line-strong);background:transparent;color:var(--pt-ab-ink);text-decoration:none}
.pt-ab-scope a.pt-ab-open:hover{border-color:var(--pt-ab-ink);text-decoration:none}
.pt-ab-open-ic{width:44px;height:44px;flex:none;border-radius:50%;border:1px dashed var(--pt-ab-line-strong);display:flex;align-items:center;justify-content:center;color:var(--pt-ab-muted)}
.pt-ab-open b{display:block;font-size:15px;font-weight:700;color:var(--pt-ab-ink)}
.pt-ab-open-sub{display:block;font-size:13.5px;color:var(--pt-ab-accent)}
.pt-ab-org-cap{margin-top:16px!important;font-size:13.5px;color:var(--pt-ab-muted)}
/* More than 4 departments: wrap, and drop the horizontal connector */
.pt-ab-depts.is-many{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 0}
.pt-ab-depts.is-many .pt-ab-dept::before{display:none}

/* 10. Company details ---------------------------------------------------- */
.pt-ab-legal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;align-items:start}
.pt-ab-dl{margin:0;background:var(--pt-ab-white);border:1px solid var(--pt-ab-line)}
.pt-ab-dl div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:14px 20px;border-bottom:1px solid var(--pt-ab-line)}
.pt-ab-dl div:last-child{border-bottom:0}
.pt-ab-dl dt{font-size:14px;color:var(--pt-ab-muted)}
.pt-ab-dl dd{margin:0;font-size:14.5px;color:var(--pt-ab-ink)}
.pt-ab-dl dd.pt-ab-mono{font-size:14px}

/* 11. Closing band ------------------------------------------------------- */
.pt-ab-cta{background:var(--pt-ab-graphite);color:var(--pt-ab-band-text);padding:64px 0}
.pt-ab-cta-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center}
.pt-ab-cta h2{font-size:32px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--pt-ab-band-text)}
.pt-ab-cta p{margin-top:10px!important;color:var(--pt-ab-band-dim);font-size:16px}
.pt-ab-cta-side{display:grid;gap:14px;justify-items:start}
.pt-ab-cta-small{font-size:14px;color:var(--pt-ab-band-dim)}
.pt-ab-scope .pt-ab-cta-small a{color:var(--pt-ab-band-text);text-decoration:underline;text-underline-offset:3px}

/* 12. Person page /about/{slug}/ ----------------------------------------- */
.pt-ab-p-hero{background:var(--pt-ab-graphite);color:var(--pt-ab-band-text);padding:34px 0 56px}
.pt-ab-p-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:end}
.pt-ab-p-photo{width:220px;height:220px;overflow:hidden;background:#3A3631;border:1px solid var(--pt-ab-band-line)}
.pt-ab-p-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pt-ab-p-role{font:12.5px var(--pt-ab-mono);color:var(--pt-ab-band-dim);margin-bottom:10px!important}
.pt-ab-p-hero h1{font-size:48px;line-height:1.05;font-weight:800;letter-spacing:-.03em;color:var(--pt-ab-band-text)}
.pt-ab-p-title{margin-top:10px!important;font-size:19px;color:var(--pt-ab-band-text)}
.pt-ab-p-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pt-ab-p-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;padding-top:64px;padding-bottom:80px;align-items:start}
.pt-ab-prose{max-width:66ch;font-size:17px;line-height:1.7;color:var(--pt-ab-soft)}
.pt-ab-prose h2{font-size:22px;font-weight:800;color:var(--pt-ab-ink);margin:36px 0 10px}
.pt-ab-prose h2:first-child{margin-top:0}
.pt-ab-prose p + p{margin-top:14px}
.pt-ab-prose ul{margin:10px 0 0;padding-left:20px}
.pt-ab-prose li{margin-bottom:6px}
.pt-ab-aside{display:grid;gap:16px;position:sticky;top:calc(var(--pt-header-h,72px) + 24px)}
.pt-ab-card{background:var(--pt-ab-white);border:1px solid var(--pt-ab-line);padding:20px}
.pt-ab-card h3{font-size:14px;font-weight:800;margin-bottom:12px}
.pt-ab-card .pt-ab-dl{border:0}
.pt-ab-card .pt-ab-dl div{grid-template-columns:100px minmax(0,1fr);padding:8px 0}
.pt-ab-links{display:grid;gap:8px;font-size:14.5px}
.pt-ab-mini{display:grid;gap:10px}
.pt-ab-scope a.pt-ab-mini-p{display:flex;gap:10px;align-items:center;color:var(--pt-ab-ink);font-size:14px}
.pt-ab-mini-p .pt-ab-av{width:32px;height:32px}
.pt-ab-mini-sub{color:var(--pt-ab-muted)}
.pt-ab-posts{display:grid;gap:12px}
.pt-ab-scope a.pt-ab-post{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;color:var(--pt-ab-ink)}
.pt-ab-post-th{width:72px;height:54px;background:var(--pt-ab-sunk);border:1px solid var(--pt-ab-line);overflow:hidden}
.pt-ab-post-th img{width:100%;height:100%;object-fit:cover;display:block}
.pt-ab-post b{display:block;font-size:14.5px;line-height:1.35}
.pt-ab-post-date{font:12px var(--pt-ab-mono);color:var(--pt-ab-muted)}

/* 13. Tablet ------------------------------------------------------------- */
@media (max-width:1000px){
  .pt-ab-mission,.pt-ab-money,.pt-ab-legal{grid-template-columns:1fr;gap:32px}
  .pt-ab-p-body{grid-template-columns:1fr;gap:40px}
  .pt-ab-aside{position:static}
  .pt-ab-cta-in{grid-template-columns:1fr;gap:24px}
}

/* 14. Phone -------------------------------------------------------------- */
@media (max-width:760px){
  .pt-ab-wrap{padding:0 16px}
  .pt-ab-hero{padding:24px 0 44px}
  .pt-ab-crumb{margin-bottom:32px}
  .pt-ab-hero h1{font-size:34px}
  .pt-ab-hero-lead{font-size:16px}
  .pt-ab-sec{padding:56px 0}
  .pt-ab-h2{font-size:26px}
  .pt-ab-intro{font-size:15.5px}
  .pt-ab-head{margin-bottom:28px}
  .pt-ab-statement{font-size:21px;padding-left:16px}
  .pt-ab-stages,.pt-ab-sides{grid-template-columns:1fr}
  .pt-ab-stage{border-left:0;border-top:1px solid var(--pt-ab-line)}
  .pt-ab-stage:first-child{border-top:0}
  .pt-ab-promises{grid-template-columns:1fr}
  .pt-ab-promise,.pt-ab-promise:nth-child(even){padding:18px 0;border-left:0}

  /* Timeline becomes vertical; panels open under their own node */
  .pt-ab-tl-track{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding:0 0 0 0}
  .pt-ab-tl-track::before{top:0;bottom:0;left:8px;right:auto;border-top:0;border-left:1px solid var(--pt-ab-line-strong)}
  .pt-ab-node{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:14px 0}
  .pt-ab-node-dot{margin:0}
  .pt-ab-node-date{min-width:70px}
  .pt-ab-node-title{flex:1 1 60%;max-width:none}
  .pt-ab-node-more{flex-basis:100%;padding-left:30px}
  .pt-ab-tl-panel{grid-template-columns:1fr;gap:16px;margin:0 0 8px 30px;padding:18px}
  .pt-ab-tl-media{order:-1}

  /* Org chart becomes an indented tree */
  .pt-ab-org{padding:20px 16px}
  .pt-ab-scope a.pt-ab-lead{min-width:0;width:100%}
  .pt-ab-depts,.pt-ab-depts.is-many{grid-auto-flow:row;grid-template-columns:1fr;padding:16px 0 0 16px;gap:16px;border-left:1px solid var(--pt-ab-line-strong);margin-left:26px}
  .pt-ab-depts::before,.pt-ab-dept::before,.pt-ab-dept::after,.pt-ab-people::before{display:none}
  .pt-ab-dept{padding:0}
  .pt-ab-people{margin-top:10px;padding-left:14px;border-left:1px solid var(--pt-ab-line)}

  .pt-ab-dl div{grid-template-columns:1fr;gap:2px}
  .pt-ab-cta{padding:48px 0}
  .pt-ab-cta h2{font-size:26px}

  .pt-ab-p-hero{padding:24px 0 40px}
  .pt-ab-p-grid{grid-template-columns:1fr;gap:24px}
  .pt-ab-p-photo{width:140px;height:140px}
  .pt-ab-p-hero h1{font-size:34px}
  .pt-ab-p-body{padding-top:40px;padding-bottom:56px}
  .pt-ab-prose{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .pt-ab-node[aria-expanded="true"] .pt-ab-node-dot{transform:none}
}

/* ==========================================================================
   OVERRIDES: only more specific .pt-ab- selectors, each with a comment
   saying what it beats and why. List every one in the report.
   ========================================================================== */

/* Everything below was added for the live site. The block above is Plan/pt-about.css, byte for byte. */

/* 1. FULL BLEED. The page renders inside GeneratePress's centred .container, whose #content is display:flex:
      the graphite hero was a box in a column, not a band across the page. Same break-out the help centre and
      homepage use, for the same reasons: negative margins pull the wrapper to the viewport, the explicit 100vw
      flex basis stops the flex item merely shifting left (measured on the brands archive and /help/), and
      overflow-x:clip trims the scrollbar's worth of overshoot without making a scroll container.
      Beats: .container / #content layout. */
.pt-ab-scope{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);flex:0 0 100vw;width:100vw;max-width:100vw;overflow-x:clip}
/* 100vw counts the vertical scrollbar; the document must not scroll sideways by it. Beats: nothing (new). */
body.pt-about-page{overflow-x:clip}

/* 2. §5a — GeneratePress prints `button:hover, button:focus { background:#333; color:#fff }` (0,1,1) inline on
      every page; it darkens the timeline nodes and the Earlier/Later buttons on hover. Every <button> here
      restates background AND color for :hover, :focus and :active. Beats: that inline rule.
      The REST state too: the theme's `button { color:#fff; background:#000 }` — the mockup's .pt-ab-tl-nav button
      sets a white background but never a color, so on the live site "Earlier" and "Later" were white on white
      (caught in the 29 Sep side-by-side). Beats: theme button color. */
.pt-ab-scope .pt-ab-tl-nav button{color:var(--pt-ab-ink)}
.pt-ab-scope .pt-ab-node:hover,.pt-ab-scope .pt-ab-node:focus,.pt-ab-scope .pt-ab-node:active{background:none;color:inherit}
.pt-ab-scope .pt-ab-tl-nav button:hover,.pt-ab-scope .pt-ab-tl-nav button:focus,.pt-ab-scope .pt-ab-tl-nav button:active{background:var(--pt-ab-white);color:var(--pt-ab-ink);border-color:var(--pt-ab-ink)}

/* 3. LISTS. The org chart is nested <ul>s for screen readers (brief §4.3); the mockup used <div>s. GeneratePress
      gives every ul `margin:0 0 1.5em 3em` and the browser adds padding-left:40px and bullets. :where() keeps
      these at (0,0,1) — enough to beat the theme's bare `ul`, never enough to beat the mockup's own
      .pt-ab-depts / .pt-ab-people / .pt-ab-dept rules (0,1,0), including the phone indents. Beats: theme ul/li. */
:where(.pt-ab-org) ul{list-style:none;margin:0;padding:0}
:where(.pt-ab-org) li{margin:0;padding:0;list-style:none}
/*    …and the theme's nested-list rule `li > ul { margin-left:1.5em }` is (0,0,2): the people list under each
      department sat 24px to the right of its head (measured 29 Sep). Same specificity, later, so it wins. */
:where(.pt-ab-org) li > ul{margin-left:0}

/* 4. INITIALS MONOGRAM — the final photo fallback (brief §4.2): initials on bone. New element, so new rules;
      sized per box. Beats: nothing (new). */
.pt-ab-scope .pt-ab-initials{display:flex;width:100%;height:100%;align-items:center;justify-content:center;background:var(--pt-ab-bone);color:var(--pt-ab-ink);font-weight:800;letter-spacing:-.02em;font-size:16px;line-height:1}
.pt-ab-scope .pt-ab-lead .pt-ab-initials{font-size:19px}
.pt-ab-scope .pt-ab-mini-p .pt-ab-initials{font-size:12px}
.pt-ab-scope .pt-ab-p-photo .pt-ab-initials{font-size:72px}
@media (max-width:760px){.pt-ab-scope .pt-ab-p-photo .pt-ab-initials{font-size:48px}}

/* 5. THEME RESETS the mockup never had to fight. dt: GeneratePress makes <dt> bold; the mockup's dt is regular
      (14px muted). img: the theme's `img{max-width:100%;height:auto}` is fine, but its `figure`/`img` margins
      are not — none here. Beats: theme dt / img. */
.pt-ab-scope dt{font-weight:400}
.pt-ab-scope img{margin:0;vertical-align:middle}