/* ============================================================
   About — Executive experience refinements
   Presentation only. Scoped to body.page-about so no other
   page inherits these rules.
   ============================================================ */

/* ---------- 1. White space: each section reads as a chapter ---------- */
.page-about .section{padding-top:5.6rem;padding-bottom:5.6rem}
.page-about .section--dark{padding-top:6rem;padding-bottom:6rem}
.page-about .hero-about{padding-bottom:4.5rem}
.page-about .section > .container > h2{margin-bottom:1.15rem}
.page-about .section > .container > .lede{margin-bottom:.5rem}
.page-about .section > .container > .grid,
.page-about .section > .container > .cap-grid,
.page-about .section > .container > .feed-grid{margin-top:2.75rem !important}

/* Subtle chapter divider instead of louder headings */
.page-about .section + .section:not(.section--alt):not(.section--dark) > .container::before{
  content:"";display:block;height:1px;margin:-2.4rem 0 2.4rem;
  background:linear-gradient(90deg,rgba(13,138,138,.28),rgba(13,138,138,.06) 45%,transparent 80%);
}

/* ---------- 2. Reading width: ~70-80 characters ---------- */
.page-about .section > .container > p,
.page-about .section > .container > .lede,
.page-about .hero-about .lede,
.page-about .founder-bio > p{max-width:72ch}
.page-about .founder-bio > p{line-height:1.72}

/* ---------- 3. Hierarchy: calmer, more deliberate headings ---------- */
.page-about .section > .container > h2{font-size:clamp(1.7rem,2.9vw,2.25rem);letter-spacing:-.028em;line-height:1.18}
.page-about .eyebrow{margin-bottom:1.15rem}
.page-about .section > .container > h2::after{width:44px;height:2px}

/* ---------- 4. Founder metrics: a visual highlight ---------- */
.page-about .metrics-strip{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.15rem;margin-top:4rem
}
.page-about .metric-card{
  position:relative;padding:1.9rem 1.6rem 1.7rem;border-radius:18px;gap:.55rem;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbfb 100%);
  border:1px solid rgba(13,138,138,.16);
  box-shadow:0 1px 2px rgba(15,40,60,.04),0 22px 40px -34px rgba(13,138,138,.55);
  transition:transform .35s cubic-bezier(.22,.8,.3,1),box-shadow .35s ease,border-color .35s ease;
  overflow:hidden
}
.page-about .metric-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--teal),rgba(13,138,138,0));
  opacity:.55;transition:opacity .35s ease
}
.page-about .metric-card:hover{transform:translateY(-4px);border-color:rgba(13,138,138,.34);box-shadow:0 1px 2px rgba(15,40,60,.05),0 28px 52px -34px rgba(13,138,138,.7)}
.page-about .metric-card:hover::before{opacity:1}
.page-about .metric-icon{
  width:52px;height:52px;margin-bottom:.65rem;border-radius:14px;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(13,138,138,.14),rgba(0,120,212,.08));
  border:1px solid rgba(13,138,138,.2);color:var(--teal);
  transition:transform .35s cubic-bezier(.22,.8,.3,1)
}
.page-about .metric-icon svg{width:24px;height:24px}
.page-about .metric-card:hover .metric-icon{transform:translateY(-2px) scale(1.04)}
.page-about .metric-value{
  font-family:'Space Grotesk',sans-serif;font-size:1.32rem;font-weight:700;
  color:var(--ink);letter-spacing:-.02em;line-height:1.2
}
.page-about .metric-label{font-size:.86rem;letter-spacing:.01em;line-height:1.5}

/* ---------- 5. Areas of Expertise cards ---------- */
.page-about .exp-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.1rem;align-items:stretch
}
.page-about .exp-card{
  display:flex;flex-direction:column;height:100%;
  padding:1.6rem 1.5rem;border-radius:16px;background:#fff;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.22,.8,.3,1),box-shadow .35s ease,border-color .35s ease
}
.page-about .exp-card:hover,
.page-about .exp-card:focus-within{transform:translateY(-4px);border-color:rgba(13,138,138,.34);box-shadow:0 24px 44px -32px rgba(13,138,138,.6)}
.page-about .exp-icon{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;margin-bottom:1.1rem;color:var(--teal);
  background:rgba(13,138,138,.08);border:1px solid rgba(13,138,138,.16);
  transition:background .35s ease,transform .35s cubic-bezier(.22,.8,.3,1)
}
.page-about .exp-card:hover .exp-icon{background:rgba(13,138,138,.14);transform:translateY(-2px)}
.page-about .exp-card h3{
  margin:0 0 .5rem;font-size:1.02rem;line-height:1.35;color:var(--ink);letter-spacing:-.01em
}
.page-about .exp-card p{margin:0;font-size:.92rem;line-height:1.62;color:var(--body)}

/* ---------- 6. Professional timeline: consulting roadmap ---------- */
.page-about .section > .container > ol.pro-timeline,
.page-about .pro-timeline{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  position:relative;margin-top:3.25rem;padding-top:.25rem
}
.page-about .pro-timeline::before{
  content:"";position:absolute;top:29px;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,rgba(13,138,138,.18),rgba(13,138,138,.55));
  border-radius:2px
}
.page-about .section > .container > ol.pro-timeline > li,
.page-about .pro-timeline li{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  text-align:center;padding:0 .6rem;position:relative;z-index:1;min-width:0
}
.page-about .pro-timeline li::after{content:none !important}
.page-about .pt-node{
  width:58px;height:58px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:#fff;color:var(--teal);
  border:1px solid rgba(13,138,138,.28);
  box-shadow:0 10px 26px -20px rgba(13,138,138,.8);
  transition:transform .35s cubic-bezier(.22,.8,.3,1),box-shadow .35s ease,border-color .35s ease
}
.page-about .pro-timeline li:hover .pt-node{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 16px 30px -20px rgba(13,138,138,.9)}
.page-about .pt-node--now{background:var(--grad-hero,linear-gradient(135deg,#0d8a8a,#0f4c81));color:#fff;border-color:transparent}
.page-about .pt-node--now::after{
  content:"";position:absolute;top:0;width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(13,138,138,.35);animation:ptPulse 3.2s ease-out infinite
}
@keyframes ptPulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
.page-about .pt-label{
  font-size:.92rem;font-weight:600;color:var(--ink);white-space:normal;line-height:1.35
}
.page-about .pt-stage{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);opacity:.75
}

/* ---------- 7. Speaking topics as executive cards ---------- */
.page-about .topic-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:.9rem;margin-top:2.75rem
}
.page-about .topic-pill{
  display:flex;align-items:center;gap:.75rem;border-radius:14px;padding:1.05rem 1.2rem;
  background:#fff;border:1px solid var(--border);color:var(--ink);
  font-size:.95rem;font-weight:600;line-height:1.4;box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.22,.8,.3,1),border-color .3s ease,box-shadow .3s ease
}
.page-about .topic-pill::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--teal);box-shadow:0 0 0 4px rgba(13,138,138,.14)
}
.page-about .topic-pill:hover{transform:translateY(-3px);border-color:rgba(13,138,138,.34);box-shadow:0 20px 36px -30px rgba(13,138,138,.7)}
.page-about .topic-note{margin-top:2rem;font-size:.95rem}

/* ---------- 8 & 9. Guides and Builder's Notes ---------- */
.page-about .feed-card{
  padding:1.7rem 1.6rem;border-radius:16px;gap:.75rem;
  transition:transform .35s cubic-bezier(.22,.8,.3,1),box-shadow .35s ease,border-color .35s ease
}
.page-about .feed-card:hover,
.page-about .feed-card:focus-within{transform:translateY(-4px);border-color:rgba(13,138,138,.32);box-shadow:0 24px 44px -32px rgba(13,138,138,.6)}
.page-about .feed-card__meta{
  font-size:.7rem;font-weight:700;letter-spacing:.13em;color:var(--teal);opacity:.9
}
.page-about .feed-card h3{font-size:1.16rem;line-height:1.32;letter-spacing:-.015em}
.page-about .feed-card > p{font-size:.9rem;line-height:1.6;opacity:.82;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.page-about .feed-card__cta{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  padding-top:.9rem;font-size:.9rem;font-weight:700;color:var(--teal)
}
.page-about .feed-card__cta::after{content:"\2192";transition:transform .25s ease}
.page-about .feed-card:hover .feed-card__cta::after{transform:translateX(4px)}

/* Builder's Notes — engineering register, same palette */
.page-about .feed-grid--notes .feed-card{
  background:linear-gradient(180deg,#fbfdfd 0%,#f6f9fa 100%);
  border-radius:12px;border-left:3px solid rgba(13,138,138,.55);padding-left:1.45rem
}
.page-about .feed-grid--notes .feed-card__meta{
  font-family:'Space Grotesk',ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;text-transform:none;color:var(--muted);font-weight:600
}
.page-about .feed-grid--notes .feed-card h3{font-size:1.04rem}
.page-about .feed-grid--notes .feed-card:hover{border-left-color:var(--teal)}

/* ---------- 10. Principles ---------- */
.page-about .principle-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.35rem;align-items:stretch
}
.page-about .principle-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:2rem 1.8rem 1.85rem;border-radius:18px;background:#fff;
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(15,40,60,.04),0 20px 40px -36px rgba(15,40,60,.55);
  transition:transform .35s cubic-bezier(.22,.8,.3,1),box-shadow .35s ease,border-color .35s ease
}
.page-about .principle-card::before{
  content:"\201C";position:absolute;top:.35rem;right:1.15rem;
  font-family:Georgia,'Times New Roman',serif;font-size:4.2rem;line-height:1;
  color:rgba(13,138,138,.1);pointer-events:none
}
.page-about .principle-card:hover{transform:translateY(-5px);border-color:rgba(13,138,138,.3);box-shadow:0 1px 2px rgba(15,40,60,.05),0 30px 54px -34px rgba(13,138,138,.65)}
.page-about .principle-icon{
  width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:13px;margin-bottom:1.15rem;color:var(--teal);
  background:linear-gradient(135deg,rgba(13,138,138,.13),rgba(0,120,212,.07));
  border:1px solid rgba(13,138,138,.18);
  transition:transform .35s cubic-bezier(.22,.8,.3,1)
}
.page-about .principle-card:hover .principle-icon{transform:translateY(-2px) rotate(-3deg)}
.page-about .principle-card h3{
  margin:0 0 .65rem;font-size:1.08rem;line-height:1.38;color:var(--ink);letter-spacing:-.015em
}
.page-about .principle-card p{margin:0;font-size:.93rem;line-height:1.68;color:var(--body)}

/* ---------- 12. Final CTA ---------- */
.page-about .about-cta{padding-top:6.5rem;padding-bottom:6.5rem;text-align:center}
.page-about .about-cta > .container > h2{
  max-width:20ch;margin-inline:auto;font-size:clamp(1.9rem,3.4vw,2.6rem)
}
.page-about .about-cta > .container > h2::after{left:50%;transform:translateX(-50%)}
.page-about .about-cta .lede{max-width:60ch;margin-inline:auto;font-size:1.12rem}
.page-about .about-cta .btn-row{justify-content:center;margin-top:2.5rem;gap:.9rem}
.page-about .about-cta .btn{padding:.95rem 1.9rem;font-size:1rem}
.page-about .about-cta .btn-primary{box-shadow:0 20px 38px -22px rgba(13,138,138,.85)}
.page-about .about-cta .btn-primary:hover{transform:translateY(-2px)}

/* ---------- 11. Micro interactions ---------- */
.page-about [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1)}
.page-about [data-reveal].is-revealed{opacity:1;transform:none}

/* ---------- 14. Accessibility ---------- */
.page-about a:focus-visible,
.page-about button:focus-visible,
.page-about .exec-progress a:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;border-radius:6px
}
.page-about .card a:focus-visible{outline-offset:2px}

/* ---------- 15. Executive progress navigation (desktop only) ---------- */
.exec-progress{display:none}
@media (min-width:1400px){
  .page-about .exec-progress{
    display:block;position:fixed;left:max(1.25rem,calc((100vw - 1140px)/2 - 210px));
    top:50%;transform:translateY(-50%);z-index:40;width:190px;
    opacity:0;transition:opacity .5s ease;pointer-events:none
  }
  .page-about .exec-progress.is-visible{opacity:1;pointer-events:auto}
  .page-about .exec-progress ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
  .page-about .exec-progress a{
    display:flex;align-items:center;gap:.6rem;padding:.32rem .35rem;
    font-size:.78rem;line-height:1.3;color:#8a97a6;text-decoration:none;
    letter-spacing:.01em;transition:color .25s ease
  }
  .page-about .exec-progress a::before{
    content:"";width:7px;height:7px;flex:none;border-radius:50%;
    border:1px solid #c3ccd6;background:transparent;
    transition:background .25s ease,border-color .25s ease,box-shadow .25s ease
  }
  .page-about .exec-progress a:hover{color:var(--teal)}
  .page-about .exec-progress a[aria-current="true"]{color:var(--teal);font-weight:600}
  .page-about .exec-progress a[aria-current="true"]::before{
    background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,138,138,.16)
  }
}

/* ---------- 13. Mobile ---------- */
@media (max-width:1000px){
  .page-about .section{padding-top:4.4rem;padding-bottom:4.4rem}
  .page-about .pro-timeline,
  .page-about .section > .container > ol.pro-timeline{grid-template-columns:repeat(2,1fr);gap:1.5rem .5rem}
  .page-about .pro-timeline::before{display:none}
}
@media (max-width:640px){
  .page-about .section{padding-top:3.9rem;padding-bottom:3.9rem}
  .page-about .section > .container > .grid,
  .page-about .section > .container > .cap-grid,
  .page-about .section > .container > .feed-grid{margin-top:2.1rem !important}
  .page-about .metrics-strip{grid-template-columns:1fr;gap:.9rem;margin-top:2.75rem}
  .page-about .metric-card{padding:1.5rem 1.35rem}
  .page-about .pro-timeline,
  .page-about .section > .container > ol.pro-timeline{
    grid-template-columns:1fr;gap:1.1rem;justify-items:start
  }
  .page-about .section > .container > ol.pro-timeline > li,
  .page-about .pro-timeline li{
    flex-direction:row;align-items:center;text-align:left;gap:1rem;padding:0;width:100%
  }
  .page-about .pt-node{width:48px;height:48px}
  .page-about .pt-node--now::after{width:48px;height:48px}
  .page-about .principle-card{padding:1.6rem 1.4rem}
  .page-about .about-cta{padding-top:4.5rem;padding-bottom:4.5rem}
  .page-about .about-cta .btn{width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .page-about [data-reveal]{opacity:1 !important;transform:none !important;transition:none}
  .page-about .metric-card,.page-about .exp-card,.page-about .principle-card,
  .page-about .topic-pill,.page-about .feed-card,.page-about .pt-node{transition:none}
  .page-about .metric-card:hover,.page-about .exp-card:hover,.page-about .principle-card:hover,
  .page-about .topic-pill:hover,.page-about .feed-card:hover{transform:none}
  .page-about .pt-node--now::after{animation:none}
}