.page-about{
  --ab-line:rgba(17,24,21,.14);
  --ab-line-light:rgba(248,251,249,.22);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
}

.page-about :where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0;}

.page-about .ab-shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.page-about a{
  color:inherit;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.page-about a:focus-visible,
.page-about button:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}

/* ---------- HERO ---------- */
.page-about .ab-hero{
  position:relative;
  background:var(--forest);
  color:var(--cold);
  padding-block:clamp(16px,3vw,26px) 0;
  overflow:hidden;
}

.page-about .ab-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(115deg,rgba(140,167,154,.16) 0 1px,transparent 1px 28px);
  pointer-events:none;
}

.page-about .ab-hero-inner{
  position:relative;
  z-index:1;
}

.page-about .ab-hero .breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
}

.page-about .ab-hero .breadcrumbs li{
  display:flex;
  align-items:center;
  gap:8px;
}

.page-about .ab-hero .breadcrumbs li + li::before{
  content:"/";
  color:var(--sage);
}

.page-about .ab-hero .breadcrumbs a{
  color:var(--sage);
  text-decoration:none;
}

.page-about .ab-hero .breadcrumbs a:hover{
  color:var(--cold);
}

.page-about .ab-hero .breadcrumbs [aria-current="page"]{
  color:var(--cold);
}

.page-about .ab-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,4vw,40px);
  margin-top:clamp(20px,4vw,36px);
}

.page-about .ab-eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  color:var(--ember);
  margin-bottom:14px;
}

.page-about .ab-hero h1{
  font-size:clamp(1.95rem,6.2vw,3.7rem);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  color:var(--cold);
  max-width:16em;
}

.page-about .ab-lede{
  margin-top:18px;
  max-width:36em;
  font-size:clamp(.98rem,1.6vw,1.08rem);
  line-height:1.85;
  color:rgba(248,251,249,.84);
}

.page-about .ab-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.page-about .ab-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:12px 22px;
  font-size:.94rem;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
}

.page-about .ab-btn--solid{
  background:var(--ember);
  color:var(--cold);
}

.page-about .ab-btn--solid:hover{
  background:var(--ember-deep);
}

.page-about .ab-btn--line{
  border-color:rgba(248,251,249,.42);
  color:var(--cold);
}

.page-about .ab-btn--line:hover{
  border-color:var(--signal);
  color:var(--signal);
}

.page-about .ab-hero-figure{
  position:relative;
  background:var(--pitch);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}

.page-about .ab-hero-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}

.page-about .ab-hero-figure figcaption{
  position:absolute;
  left:0;
  bottom:0;
  padding:8px 14px;
  background:var(--forest-deep);
  color:var(--sage);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.04em;
}

.page-about .ab-figures{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 20px;
  margin-top:clamp(24px,4vw,40px);
  padding-block:20px 26px;
  border-top:1px solid var(--ab-line-light);
}

.page-about .ab-figures dt{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--sage);
}

.page-about .ab-figures dd{
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:clamp(1.35rem,3.4vw,1.95rem);
  font-weight:700;
  line-height:1.1;
  color:var(--cold);
}

.page-about .ab-figures dd span{
  margin-left:3px;
  font-size:.58em;
  font-weight:400;
  color:var(--sage);
}

/* ---------- LAYOUT ---------- */
.page-about .ab-body{
  padding-block:clamp(26px,4vw,52px);
}

.page-about .ab-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3vw,40px);
  align-items:start;
}

.page-about .ab-rail-sticky{
  background:var(--cold);
  border-top:3px solid var(--forest);
  padding:18px 18px 20px;
}

.page-about .ab-rail-title{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.16em;
  color:var(--pitch);
  margin-bottom:10px;
}

.page-about .ab-index{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}

.page-about .ab-index a{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:8px 10px;
  border-left:3px solid transparent;
  font-size:.92rem;
  line-height:1.5;
  text-decoration:none;
  color:var(--ink);
}

.page-about .ab-index a:hover,
.page-about .ab-index a:focus-visible{
  border-left-color:var(--ember);
  background:var(--paper);
}

.page-about .ab-idx{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--sage);
}

.page-about .ab-rail-track-wrap{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--mist);
}

.page-about .ab-rail-track{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}

.page-about .ab-rail-track li{
  position:relative;
  padding:0 0 14px 18px;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.02em;
  color:var(--pitch);
}

.page-about .ab-rail-track li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:7px;
  height:7px;
  background:var(--signal);
  transform:rotate(45deg);
}

.page-about .ab-rail-track li::after{
  content:"";
  position:absolute;
  left:3px;
  top:18px;
  bottom:0;
  width:1px;
  background:var(--paper-deep);
}

.page-about .ab-rail-track li:last-child{
  padding-bottom:0;
}

.page-about .ab-rail-track li:last-child::after{
  display:none;
}

.page-about .ab-rail-cta{
  display:block;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--mist);
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  color:var(--ember);
}

.page-about .ab-rail-cta:hover{
  color:var(--ember-deep);
}

.page-about .ab-flow{
  display:grid;
  gap:clamp(16px,2.4vw,24px);
  min-width:0;
}

/* ---------- BLOCKS ---------- */
.page-about .ab-block{
  position:relative;
  background:var(--cold);
  border-top:3px solid var(--forest);
  padding:clamp(20px,4vw,40px);
}

.page-about .ab-block > * + *{
  margin-top:16px;
}

.page-about .ab-block--dark{
  background:var(--forest);
  color:var(--cold);
  border-top-color:var(--ember);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}

.page-about .ab-block--pitch{
  background:var(--pitch);
  color:var(--cold);
  border-top-color:var(--signal);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}

.page-about .ab-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--ab-line);
  margin-bottom:18px;
}

.page-about .ab-block--dark .ab-head,
.page-about .ab-block--pitch .ab-head{
  border-bottom-color:var(--ab-line-light);
}

.page-about .ab-num{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--ember);
  flex:none;
}

.page-about .ab-block--dark .ab-num,
.page-about .ab-block--pitch .ab-num{
  color:var(--signal);
}

.page-about .ab-head h2{
  font-size:clamp(1.28rem,3.4vw,1.85rem);
  line-height:1.28;
  letter-spacing:-.01em;
  font-weight:800;
}

.page-about .ab-block p{
  max-width:38em;
  line-height:1.85;
}

.page-about .ab-block--dark p,
.page-about .ab-block--pitch p{
  color:rgba(248,251,249,.86);
}

.page-about .ab-quote{
  border-left:3px solid var(--ember);
  padding:6px 0 6px 16px;
  font-family:var(--font-serif);
  font-size:1.02rem;
  line-height:1.8;
  color:var(--pitch);
}

/* ---------- ROLES ---------- */
.page-about .ab-roles{
  list-style:none;
  margin-top:22px;
  padding:1px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--ab-line-light);
}

.page-about .ab-role{
  background:var(--forest);
  padding:16px;
}

.page-about .ab-role-name{
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--signal);
  margin-bottom:6px;
}

.page-about .ab-role-desc{
  font-size:.88rem;
  line-height:1.7;
}

/* ---------- STEPS ---------- */
.page-about .ab-steps{
  list-style:none;
  margin-top:22px;
  padding:0;
  display:grid;
  gap:14px;
  counter-reset:abstep;
}

.page-about .ab-step{
  position:relative;
  padding-left:46px;
}

.page-about .ab-step::before{
  counter-increment:abstep;
  content:counter(abstep,decimal-leading-zero);
  position:absolute;
  left:0;
  top:1px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid var(--signal);
  color:var(--signal);
  font-family:var(--font-mono);
  font-size:.74rem;
  clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);
}

.page-about .ab-step-title{
  font-size:.96rem;
  font-weight:700;
  color:var(--cold);
  margin-bottom:4px;
}

.page-about .ab-step p{
  font-size:.9rem;
}

/* ---------- VERSIONS ---------- */
.page-about .ab-versions{
  list-style:none;
  margin-top:20px;
  padding:0;
  display:grid;
}

.page-about .ab-version{
  position:relative;
  padding:0 0 22px 30px;
}

.page-about .ab-version::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:10px;
  height:10px;
  background:var(--ember);
  transform:rotate(45deg);
  transition:background-color var(--dur) var(--ease);
}

.page-about .ab-version::after{
  content:"";
  position:absolute;
  left:4px;
  top:24px;
  bottom:0;
  width:1px;
  background:var(--paper-deep);
}

.page-about .ab-version:last-child{
  padding-bottom:0;
}

.page-about .ab-version:last-child::after{
  display:none;
}

.page-about .ab-version:hover::before{
  background:var(--pitch);
}

.page-about .ab-version-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.page-about .ab-version-tag{
  flex:none;
  background:var(--forest);
  color:var(--cold);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  padding:2px 9px;
  clip-path:polygon(0 0,100% 0,100% 70%,72% 100%,0 100%);
}

.page-about .ab-version-head h3{
  font-size:1.02rem;
  font-weight:700;
  line-height:1.45;
}

.page-about .ab-version p{
  font-size:.92rem;
  color:rgba(17,24,21,.82);
}

/* ---------- ZONES ---------- */
.page-about .ab-zones{
  list-style:none;
  margin-top:20px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.page-about .ab-zone{
  background:rgba(7,30,24,.26);
  border-left:3px solid var(--signal);
  padding:10px 12px;
  font-size:.84rem;
  line-height:1.6;
  color:var(--cold);
}

.page-about .ab-zone-name{
  display:block;
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.02em;
}

/* ---------- FIGURES ---------- */
.page-about .ab-figure{
  background:var(--paper-deep);
}

.page-about .ab-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

.page-about .ab-figure figcaption{
  padding:9px 14px;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.04em;
}

.page-about .ab-figure--zones{
  margin-bottom:6px;
}

.page-about .ab-figure--zones figcaption{
  background:var(--forest-deep);
  color:var(--sage);
}

.page-about .ab-figure--square figcaption{
  background:var(--paper-deep);
  color:var(--ink);
}

.page-about .ab-split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  align-items:start;
}

.page-about .ab-split-text > * + *{
  margin-top:16px;
}

/* ---------- CTA ---------- */
.page-about .ab-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.page-about .ab-quick{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:26px;
}

.page-about .ab-quick-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:13px 14px;
  background:var(--forest);
  color:var(--cold);
  font-size:.88rem;
  font-weight:700;
  text-decoration:none;
  border-left:3px solid var(--signal);
}

.page-about .ab-quick-link:hover{
  background:var(--pitch);
  border-left-color:var(--ember);
}

/* ---------- BREAKPOINTS ---------- */
@media (min-width:620px){
  .page-about .ab-roles{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .page-about .ab-zones{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:768px){
  .page-about .ab-figures{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px 28px;
  }

  .page-about .ab-quick{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (min-width:900px){
  .page-about .ab-hero-grid{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    align-items:end;
  }

  .page-about .ab-hero-figure{
    align-self:end;
  }

  .page-about .ab-split{
    grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    gap:26px;
  }
}

@media (min-width:1000px){
  .page-about .ab-layout{
    grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    gap:clamp(24px,3vw,40px);
  }

  .page-about .ab-rail-sticky{
    position:sticky;
    top:88px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about *{
    transition:none !important;
  }
}
<<<END>>>