/* =========================================================
   ABOUT PAGE — page-specific styles
   ========================================================= */

/* hero art tweaks */
.hero-art .spine-set rect{transform-origin:bottom center;}

/* ---- journey timeline ---- */
.journey{margin-top:56px;position:relative;display:grid;gap:0;}
.journey::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:3px;background:var(--line-strong);border-radius:2px;}
.chapter{display:grid;grid-template-columns:36px 1fr;gap:26px;padding:0 0 44px;position:relative;}
.chapter:last-child{padding-bottom:0;}
.ch-marker{position:relative;}
.ch-marker span{position:absolute;left:6px;top:6px;width:25px;height:25px;border-radius:50%;background:var(--yellow);border:4px solid var(--paper);box-shadow:0 0 0 3px var(--yellow);}
.ch-card{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--yellow);border-radius:12px;padding:28px 30px;transition:transform .2s ease, box-shadow .2s ease;}
.ch-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(20,20,20,.09);}
.ch-meta{display:flex;align-items:baseline;gap:16px;margin-bottom:10px;flex-wrap:wrap;}
.ch-label{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow-deep);}
.ch-year{font-family:var(--display);font-weight:700;font-size:34px;line-height:1;color:var(--ink);}
.ch-card h3{font-weight:600;font-size:18px;color:var(--ink);margin-bottom:8px;}
.ch-card p{max-width:64ch;}

/* ---- what we believe: pillars ---- */
.pillar{margin-top:52px;}
.pillar-head{display:flex;align-items:center;gap:18px;margin-bottom:22px;}
.pillar-head h3{font-family:var(--display);font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);line-height:1.05;}
.pillar-head p{font-size:15px;margin-top:2px;}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.principle{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--yellow);border-radius:12px;padding:24px 24px 22px;transition:transform .2s ease, box-shadow .2s ease;}
.principle:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,20,20,.09);}
.principle h4{font-weight:600;font-size:16px;color:var(--ink);margin-bottom:8px;line-height:1.35;}
.principle p{font-size:14.5px;}

/* ---- what changes (ink) ---- */
.changes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
.change{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:30px 28px;transition:transform .2s ease, border-color .2s ease;}
.change:hover{transform:translateY(-4px);border-color:rgba(249,181,20,.5);}
.change h3{font-family:var(--display);font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:.05em;color:#fff;margin:18px 0 10px;}
.change p{font-size:15px;}

/* ---- founder note ---- */
.note{margin-top:44px;background:var(--warm);border:1px solid var(--line);border-radius:16px;padding:52px 56px;display:grid;grid-template-columns:90px 1fr;gap:14px;position:relative;overflow:hidden;}
.note::after{content:"";position:absolute;right:-90px;bottom:-110px;width:280px;height:280px;border-radius:50%;background:rgba(249,181,20,.14);}
.note-mark{font-family:var(--display);font-weight:700;font-size:130px;line-height:.7;color:var(--yellow);}
.note-body{position:relative;z-index:1;}
.note-body p{max-width:66ch;margin-bottom:16px;font-size:16px;color:var(--ink-soft);}
.note-sign{display:flex;align-items:center;gap:16px;margin-top:28px;font-size:15px;color:var(--muted);}
.note-sign strong{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);}
.sign-photo-wrap{flex:none;position:relative;}
.sign-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--yellow);box-shadow:0 2px 0 rgba(20,20,20,.2);display:block;}
.sign-avatar{width:72px;height:72px;border-radius:50%;background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:30px;flex:none;box-shadow:0 2px 0 rgba(20,20,20,.2);}

/* ---- closing bookend ---- */
.closing{background:var(--yellow);position:relative;overflow:hidden;padding:96px 0;}
.closing::after{content:"";position:absolute;right:-120px;top:-140px;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.22);}
.closing::before{content:"";position:absolute;left:-100px;bottom:-160px;width:320px;height:320px;border-radius:50%;background:rgba(20,20,20,.05);}
.closing-in{text-align:center;position:relative;z-index:1;}
.closing h2{max-width:22ch;margin:0 auto 10px;}
.closing .knock{color:#fff;text-shadow:0 1px 0 rgba(20,20,20,.08);}

/* ---- responsive ---- */
@media(max-width:980px){
  .principles{grid-template-columns:1fr 1fr;}
  .changes{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .principles{grid-template-columns:1fr;}
  .note{grid-template-columns:1fr;padding:36px 28px;}
  .note-mark{font-size:80px;}
  .chapter{grid-template-columns:28px 1fr;gap:18px;}
  .journey::before{left:13px;}
  .ch-marker span{left:2px;width:22px;height:22px;}
}

/* ---- founders: lead signature + co-signatories ---- */
.note-cosign{display:flex;gap:34px;flex-wrap:wrap;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);position:relative;z-index:1;}
.cosign{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);}
.cosign strong{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);line-height:1.2;}
.cosign-ava{width:42px;height:42px;border-radius:50%;background:var(--cream);border:2px solid var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:18px;flex:none;}
.cosign-photo-wrap{overflow:hidden;padding:0;width:72px;height:72px;border:3px solid var(--yellow);box-shadow:0 2px 0 rgba(20,20,20,.2);background:none;}
.cosign-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.cosign strong{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);}
.cosign{gap:16px;font-size:15px;}
.sign-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease;}
.sign-link:hover,.sign-link:focus-visible{border-bottom-color:var(--yellow-deep);}
@media(max-width:640px){ .note-cosign{gap:18px;flex-direction:column;} }

/* #16 founder names must wrap on narrow screens (uppercase condensed names clipped otherwise) */
@media(max-width:600px){
  .note-sign{flex-wrap:wrap;}
  .note-sign strong,.cosign strong{white-space:normal;overflow-wrap:break-word;word-break:break-word;font-size:18px;}
  .note-sign span,.cosign span{min-width:0;}
}