/* ============================================================================
   ABOUT PAGE
   ========================================================================== */
.about-hero{padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.ah-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:900px){.ah-grid{grid-template-columns:1.1fr .9fr}}
.ah-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.ah-media{position:relative}
/* Portrait frame for the full-length shot. The home page keeps the organic blob
   mask; this page gets a tall editorial rectangle so the two heroes read
   differently and the full-length photo is not cropped at the knees. */
.ah-frame{
  position:relative;overflow:hidden;aspect-ratio:4/5;
  border-radius:var(--r-xl);
  background:linear-gradient(160deg,var(--purple-tint),var(--blue-tint));
  box-shadow:0 30px 70px rgba(25,36,81,.18);
}
.ah-frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.ah-frame img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
@media(max-width:899px){.ah-frame{aspect-ratio:3/4;max-width:26rem;margin-inline:auto}}

/* credential bar */
.cred-bar{background:var(--navy);color:#fff}
.cred-grid{display:grid;gap:1.8rem;grid-template-columns:repeat(2,1fr);text-align:center}
@media(min-width:820px){.cred-grid{grid-template-columns:repeat(4,1fr)}}
.cred-bar .stat b{background:linear-gradient(135deg,#B78BE0,#7FB8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.cred-bar .stat span{color:rgba(255,255,255,.7)}

/* story */
.story-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(min-width:900px){.story-grid{grid-template-columns:.8fr 1.2fr}}
.story-aside{position:sticky;top:130px}
@media(max-width:899px){.story-aside{position:static}}
.cred-list{display:grid;gap:.85rem;margin:1.2rem 0 1.4rem}
.cred-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-small);color:var(--ink-soft)}
.cred-list b{color:var(--ink)}
.cred-list .ck{
  flex:none;width:21px;height:21px;margin-top:.15rem;border-radius:50%;
  display:grid;place-items:center;background:var(--grad);color:#fff;
}
.cred-list .ck svg{width:11px;height:11px}
.story-body h2{margin-bottom:1.4rem}

/* timeline */
.timeline{display:grid;gap:1.2rem;max-width:56rem;margin-inline:auto;position:relative}
@media(min-width:700px){
  .timeline::before{
    content:"";position:absolute;left:86px;top:12px;bottom:12px;width:2px;
    background:linear-gradient(180deg,var(--purple),var(--blue));opacity:.25;
  }
}
.tl-item{display:grid;gap:.8rem;position:relative}
@media(min-width:700px){
  .tl-item{grid-template-columns:110px 1fr;align-items:start;gap:1.6rem}
  .tl-item::before{
    content:"";position:absolute;left:80px;top:1.5rem;width:14px;height:14px;border-radius:50%;
    background:var(--grad);border:3px solid #FAF9F6;z-index:1;
  }
}
.tl-year{
  font-family:var(--font-display);font-size:1.2rem;font-weight:600;
  color:var(--purple);padding-top:1.1rem;
}
.tl-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.4rem 1.6rem;box-shadow:var(--shadow-sm);
  transition:transform var(--t-med),box-shadow var(--t-med);
}
.tl-card:hover{transform:translateX(4px);box-shadow:var(--shadow-md)}
.tl-card h3{font-size:1.15rem;margin-bottom:.35rem}
.tl-card p{font-size:var(--fs-small)}

/* values */
.val-grid .card{height:100%}

/* beyond work */
.beyond{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
/* the fitness portrait is a tall 5/8, so the media column is narrowed to keep
   its height in step with the copy beside it rather than towering over it. */
@media(min-width:880px){.beyond{grid-template-columns:1.24fr .76fr}}
.beyond-copy .btn{margin-top:1.6rem}
.beyond-media img{
  width:100%;aspect-ratio:5/8;object-fit:cover;
  border-radius:var(--r-xl);box-shadow:var(--shadow-lift);
}

/* badge wall */
.badge-wall{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.6rem,3.5vw,3rem);
}
.bw-item{display:grid;place-items:center;transition:transform var(--t-med),filter var(--t-med)}
.bw-item img{height:70px;width:auto;filter:grayscale(1) opacity(.6);transition:filter var(--t-med)}
.bw-item:hover img{filter:none}
.bw-item:hover{transform:translateY(-4px)}

/* ---- PRESS MENTION -------------------------------------------------------
   One article, so it is a single card rather than a logo wall - a strip built
   for many outlets looks emptier than a card built for one. */
.press-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.1rem;
  margin-top:2rem;padding:1.2rem 1.4rem;
  border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.press-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:rgba(96,36,149,.24)}
.press-ic{
  flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--purple-tint);color:var(--purple);
}
.press-ic svg{width:22px;height:22px}
.press-tag{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--purple);margin-bottom:.3rem;
}
.press-body b{
  display:block;font-family:var(--font-display);font-size:1.08rem;font-weight:580;
  color:var(--ink);line-height:1.3;
}
.press-body>span:last-child{
  display:block;font-size:var(--fs-small);color:var(--ink-soft);line-height:1.55;margin-top:.3rem;
}
.press-go{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(96,36,149,.24);
  transition:transform .35s var(--ease-spring);
}
.press-card:hover .press-go{transform:translate(2px,-2px) scale(1.06)}
.press-go svg{width:16px;height:16px}
@media(max-width:560px){
  .press-card{grid-template-columns:auto 1fr;padding:1.1rem 1.2rem}
  .press-go{display:none}
}