.page-about{
  --about-orange-soft: rgba(255,107,10,.16);
  --about-line-dark: rgba(11,42,74,.14);
  background: var(--color-canvas);
}

.page-about .breadcrumbs__inner{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding-top:.75rem;
  padding-bottom:.75rem;
  font-size:.875rem;
}

.page-about .breadcrumbs__sep{
  color: var(--color-navy-2);
}

.page-about .breadcrumbs a{
  color: var(--color-navy-2);
  text-decoration:none;
}

.page-about .breadcrumbs a:hover{
  color: var(--color-orange);
}

.page-about .about-hero{
  background:
    radial-gradient(circle at 78% 22%, rgba(255,107,10,.18) 0, rgba(255,107,10,0) 34%),
    linear-gradient(140deg, var(--color-grad-d) 0%, var(--color-navy) 52%, var(--color-navy-2) 100%);
  color: var(--color-white);
  padding: var(--space-6) 0;
}

.page-about .about-hero__grid{
  display:grid;
  gap: var(--space-5);
}

.page-about .about-hero__eyebrow{
  font-size:.75rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.page-about .about-hero h1{
  font-family: var(--font-headline);
  font-weight:900;
  font-size: clamp(1.75rem, 4.6vw, 2.9rem);
  line-height:1.18;
  letter-spacing:-.02em;
  margin-bottom: var(--space-4);
}

.page-about .about-hero__lead{
  font-size:1rem;
  line-height:1.85;
  color: rgba(244,247,250,.82);
  max-width:58ch;
  margin-bottom: var(--space-5);
}

.page-about .about-hero__facts{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.page-about .about-hero__fact{
  display:flex;
  flex-direction:column;
  gap:2px;
  border-left:2px solid var(--color-orange);
  padding-left: var(--space-3);
}

.page-about .about-hero__fact .stat-num{
  font-family: var(--font-numeric);
  font-size:2rem;
  font-weight:900;
  color: var(--color-orange);
  line-height:1;
}

.page-about .about-hero__fact .stat-label{
  font-size:.75rem;
  letter-spacing:.12em;
  color: rgba(244,247,250,.68);
}

.page-about .about-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-3);
}

.page-about .about-hero .btn--ghost{
  border-color: rgba(244,247,250,.55);
  color: var(--color-white);
}

.page-about .about-hero .btn--ghost:hover{
  border-color: var(--color-white);
  background: rgba(244,247,250,.08);
}

.page-about .about-hero__svg{
  width:100%;
  height:auto;
  display:block;
}

.page-about .about-hero__svg text{
  font-family: var(--font-body);
}

.page-about .about-chapter{
  position:relative;
  padding: var(--space-6) 0;
  overflow:hidden;
}

.page-about .about-chapter > .container{
  position:relative;
  z-index:2;
}

.page-about .about-chapter--one{
  background: var(--color-canvas);
}

.page-about .about-chapter--two{
  background:
    radial-gradient(circle at 12% 18%, rgba(245,166,35,.10) 0, rgba(245,166,35,0) 30%),
    linear-gradient(150deg, var(--color-grad-d) 0%, var(--color-navy) 58%, var(--color-navy-2) 100%);
  color: var(--color-white);
}

.page-about .about-chapter--three{
  background: var(--color-canvas);
}

.page-about .about-chapter__mark{
  position:absolute;
  top: var(--space-5);
  left: var(--space-3);
  z-index:1;
  display:flex;
  align-items:flex-start;
  gap: var(--space-2);
  pointer-events:none;
}

.page-about .about-chapter__num{
  font-family: var(--font-numeric);
  font-size: clamp(64px, 16vw, 120px);
  font-weight:900;
  line-height:.9;
  color: var(--about-orange-soft);
  letter-spacing:-.04em;
}

.page-about .about-chapter--two .about-chapter__num{
  color: rgba(255,107,10,.26);
}

.page-about .about-chapter__axis{
  writing-mode: vertical-rl;
  font-size:.6875rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color: var(--color-navy-2);
  padding-top: var(--space-2);
  white-space:nowrap;
}

.page-about .about-chapter--two .about-chapter__axis{
  color: var(--color-orange);
}

.page-about .about-chapter__head{
  max-width:720px;
  margin-bottom: var(--space-6);
}

.page-about .about-chapter__kicker{
  font-size:.75rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color: var(--color-orange);
  display:flex;
  align-items:center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.page-about .about-chapter__kicker::before{
  content:"";
  width:28px;
  height:1px;
  background: currentColor;
  flex:none;
}

.page-about .about-chapter__head h2{
  font-family: var(--font-headline);
  font-weight:900;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom: var(--space-3);
  color: var(--color-ink);
}

.page-about .about-chapter--two .about-chapter__head h2{
  color: var(--color-white);
}

.page-about .about-chapter__lead{
  line-height:1.8;
  color: rgba(26,26,26,.72);
}

.page-about .about-chapter--two .about-chapter__lead{
  color: rgba(244,247,250,.78);
}

.page-about .about-origin{
  padding-bottom: var(--space-6);
}

.page-about .about-origin h2{
  font-family: var(--font-headline);
  font-weight:900;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom: var(--space-4);
  color: var(--color-ink);
}

.page-about .about-origin__layout{
  display:grid;
  gap: var(--space-5);
  align-items:start;
}

.page-about .about-origin__text p{
  line-height:1.85;
  margin-bottom: var(--space-3);
  color: rgba(26,26,26,.8);
}

.page-about .about-origin__stats{
  margin:0;
  border-top:2px solid var(--color-navy);
}

.page-about .about-origin__stats div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom:1px solid var(--about-line-dark);
}

.page-about .about-origin__stats dt{
  font-family: var(--font-numeric);
  font-weight:900;
  font-size:1.25rem;
  color: var(--color-orange);
  white-space:nowrap;
}

.page-about .about-origin__stats dd{
  margin:0;
  font-size:.8125rem;
  color: rgba(26,26,26,.6);
  text-align:right;
}

.page-about .about-sync{
  border-top:2px solid var(--color-navy);
  padding-top: var(--space-6);
}

.page-about .about-sync__head{
  max-width:720px;
}

.page-about .about-sync__head h3{
  font-family: var(--font-headline);
  font-weight:900;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  margin-bottom: var(--space-3);
  color: var(--color-ink);
}

.page-about .about-sync__head p{
  line-height:1.8;
  color: rgba(26,26,26,.72);
}

.page-about .about-sync__grid{
  display:grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.page-about .about-sync__item{
  border-top:2px solid var(--color-navy);
  padding-top: var(--space-3);
  background: linear-gradient(180deg, rgba(11,42,74,.04) 0, rgba(11,42,74,0) 100%);
}

.page-about .about-sync__num{
  font-family: var(--font-numeric);
  font-weight:900;
  font-size:.875rem;
  color: var(--color-orange);
}

.page-about .about-sync__item h4{
  font-family: var(--font-headline);
  font-weight:700;
  font-size:1.1rem;
  margin: var(--space-2) 0 var(--space-1);
  color: var(--color-ink);
}

.page-about .about-sync__item p{
  font-size:.875rem;
  line-height:1.7;
  color: rgba(26,26,26,.72);
}

.page-about .about-sync__figure{
  max-width:780px;
  margin: var(--space-6) auto 0;
}

.page-about figure{
  margin:0;
}

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

.page-about figure figcaption{
  padding-top: var(--space-2);
  font-size:.8125rem;
  line-height:1.6;
  color: rgba(26,26,26,.64);
}

.page-about .about-chapter--two figure img{
  border:1px solid rgba(244,247,250,.18);
}

.page-about .about-chapter--two figcaption{
  color: rgba(244,247,250,.66);
}

.page-about .about-evolution{
  display:grid;
  gap: var(--space-6);
  align-items:start;
}

.page-about .about-timeline__item{
  position:relative;
  padding-left: calc(var(--space-4) + 6px);
  padding-bottom: var(--space-5);
  border-bottom:1px solid rgba(244,247,250,.14);
}

.page-about .about-timeline__item::before{
  content:"";
  position:absolute;
  left:3px;
  top:10px;
  bottom:0;
  width:1px;
  background: rgba(244,247,250,.22);
}

.page-about .about-timeline__item:last-child::before{
  height:24px;
  bottom:auto;
}

.page-about .about-timeline__node{
  position:absolute;
  left:0;
  top:10px;
  width:8px;
  height:8px;
  background: var(--color-gold);
}

.page-about .about-timeline__node--accent{
  background: var(--color-orange);
  box-shadow:0 0 0 4px rgba(255,107,10,.22);
}

.page-about .about-timeline__head{
  display:flex;
  align-items:center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.page-about .about-timeline__version{
  font-family: var(--font-numeric);
  font-weight:900;
  font-size:1.1rem;
  color: var(--color-orange);
  min-width:2ch;
}

.page-about .about-timeline__head h3{
  font-family: var(--font-headline);
  font-weight:700;
  font-size:1.15rem;
  color: var(--color-white);
  margin:0;
}

.page-about .about-timeline__toggle{
  margin-left:auto;
  font-size:.75rem;
  padding:4px 10px;
  background:transparent;
  border:1px solid rgba(244,247,250,.35);
  color: rgba(244,247,250,.85);
  cursor:pointer;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.page-about .about-timeline__toggle:hover{
  border-color: var(--color-orange);
  color: var(--color-white);
}

.page-about .about-timeline__summary{
  font-size:.9375rem;
  line-height:1.75;
  color: rgba(244,247,250,.82);
}

.page-about .about-timeline__body .detail__content{
  margin-top: var(--space-3);
  font-size:.875rem;
  line-height:1.75;
  color: rgba(244,247,250,.66);
  border-left:2px solid var(--color-orange);
  padding-left: var(--space-3);
}

.page-about .about-favorites{
  display:grid;
  gap: var(--space-5);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top:1px solid rgba(244,247,250,.16);
}

.page-about .about-favorites h2{
  font-family: var(--font-headline);
  font-weight:900;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom: var(--space-3);
  color: var(--color-white);
}

.page-about .about-favorites__lead{
  line-height:1.8;
  color: rgba(244,247,250,.82);
}

.page-about .about-favorites__points{
  list-style:none;
  margin: var(--space-4) 0;
  padding:0;
}

.page-about .about-favorites__points li{
  position:relative;
  padding-left:20px;
  margin-bottom: var(--space-2);
  line-height:1.75;
  color: rgba(244,247,250,.86);
}

.page-about .about-favorites__points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:8px;
  height:8px;
  background: var(--color-gold);
}

.page-about .about-favorites__steps{
  counter-reset: step;
  list-style:none;
  margin: var(--space-4) 0;
  padding:0;
  display:grid;
  gap: var(--space-2);
}

.page-about .about-favorites__steps li{
  counter-increment: step;
  display:flex;
  gap: var(--space-3);
  align-items:baseline;
  line-height:1.7;
  color: rgba(244,247,250,.9);
  font-size:.9375rem;
}

.page-about .about-favorites__steps li::before{
  content: "0" counter(step);
  font-family: var(--font-numeric);
  font-weight:900;
  color: var(--color-orange);
  font-size:.875rem;
  flex:none;
}

.page-about .about-skilltree{
  margin: var(--space-5) 0 0;
}

.page-about .about-skilltree__svg{
  width:100%;
  height:auto;
  display:block;
}

.page-about .about-skilltree__wire{
  stroke: var(--color-navy-2);
  stroke-width:2;
  fill:none;
  transition: stroke var(--duration) var(--ease);
}

.page-about .about-skilltree__node{
  fill: var(--color-navy);
  transition: fill var(--duration) var(--ease);
}

.page-about .about-skilltree__node--root{
  fill: var(--color-orange);
}

.page-about .about-skilltree__label{
  font-family: var(--font-body);
  font-size:14px;
  font-weight:600;
  fill: var(--color-ink);
  transition: fill var(--duration) var(--ease);
}

.page-about .about-skilltree__label--root{
  font-family: var(--font-headline);
  font-weight:900;
  fill: var(--color-navy);
}

.page-about .about-skilltree__hint{
  font-size:12px;
  fill: rgba(26,26,26,.55);
  transition: fill var(--duration) var(--ease);
}

.page-about .about-skilltree__branch:hover .about-skilltree__wire{
  stroke: var(--color-orange);
}

.page-about .about-skilltree__branch:hover .about-skilltree__node{
  fill: var(--color-orange);
}

.page-about .about-skilltree__branch:hover .about-skilltree__hint{
  fill: var(--color-navy-2);
}

.page-about .about-skilltree__caption{
  font-size:.8125rem;
  color: rgba(26,26,26,.6);
  margin-top: var(--space-2);
  text-align:center;
}

.page-about .about-team{
  padding-top: var(--space-6);
  border-top:1px solid var(--about-line-dark);
  margin-top: var(--space-6);
}

.page-about .about-team h2{
  font-family: var(--font-headline);
  font-weight:900;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom: var(--space-3);
  color: var(--color-ink);
}

.page-about .about-team__lead{
  line-height:1.8;
  color: rgba(26,26,26,.74);
  max-width:680px;
}

.page-about .about-team__grid{
  display:grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.page-about .about-team__role{
  border-top:2px solid var(--color-navy);
  padding-top: var(--space-4);
}

.page-about .about-team__index{
  font-family: var(--font-numeric);
  font-weight:900;
  font-size:.875rem;
  color: var(--color-orange);
  letter-spacing:.08em;
}

.page-about .about-team__role h3{
  font-family: var(--font-headline);
  font-weight:700;
  font-size:1.1rem;
  margin: var(--space-2) 0 var(--space-1);
  color: var(--color-ink);
}

.page-about .about-team__role p{
  font-size:.9375rem;
  line-height:1.75;
  color: rgba(26,26,26,.76);
}

.page-about .about-team__role a{
  color: var(--color-navy-2);
}

.page-about .about-team__quote{
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(120deg, var(--color-grad-d), var(--color-navy));
  color: var(--color-white);
  border-left:4px solid var(--color-orange);
}

.page-about .about-team__quote p{
  font-family: var(--font-headline);
  font-weight:900;
  font-size:1.25rem;
  line-height:1.5;
  margin:0;
}

.page-about .about-team__quote footer{
  margin-top: var(--space-2);
  font-size:.8125rem;
  color: rgba(244,247,250,.7);
}

.page-about .about-team__trust{
  margin-top: var(--space-4);
  font-size:.875rem;
  line-height:1.7;
  color: rgba(26,26,26,.6);
  border-left:2px solid var(--color-gold);
  padding-left: var(--space-3);
}

.page-about .about-links{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top:1px solid var(--about-line-dark);
}

.page-about .about-links a{
  font-size:.875rem;
  color: var(--color-navy-2);
  text-decoration:none;
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.page-about .about-links a:hover{
  color: var(--color-orange);
  border-color: var(--color-orange);
}

@media (min-width:720px){
  .page-about .about-sync__grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--space-4) var(--space-6);
  }

  .page-about .about-team__grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--space-4) var(--space-6);
  }
}

@media (min-width:860px){
  .page-about .about-hero{
    padding: var(--space-7) 0;
  }

  .page-about .about-hero__grid{
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center;
    gap: var(--space-7);
  }

  .page-about .about-chapter{
    padding: var(--space-7) 0;
  }

  .page-about .about-chapter__mark{
    top: var(--space-6);
    left: var(--space-4);
  }

  .page-about .about-origin__layout{
    grid-template-columns: minmax(0,1fr) 280px;
    gap: var(--space-7);
  }
}

@media (min-width:960px){
  .page-about .about-favorites{
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center;
    gap: var(--space-7);
  }

  .page-about .about-favorites__text{
    order:1;
  }

  .page-about .about-favorites__figure{
    order:2;
  }
}

@media (min-width:1100px){
  .page-about .about-sync__grid{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  .page-about .about-evolution{
    grid-template-columns: minmax(0,1fr) minmax(0,.88fr);
    gap: var(--space-7);
  }

  .page-about .about-evolution__figure{
    position:sticky;
    top: var(--space-5);
  }
}