/*
  About page only (loaded after site.css). Founders' story animation beside the headline, a three-step
  timeline, and six values whose scenes fill with color as you reach them (like the how-it-works steps).
*/
.about-hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,88px);background:radial-gradient(circle at 90% 10%,var(--tint) 0,rgba(234,246,254,0) 45%),linear-gradient(180deg,var(--cool),var(--paper))}
.about-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
.about-copy{display:grid;gap:20px;min-width:0;animation:rise .7s ease-out backwards}
.about-copy h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.about-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.about-story{margin:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--shadow);aspect-ratio:4/3;animation:rise .8s ease-out .2s backwards}
.story-clip{width:100%;height:100%;object-fit:cover;display:block}
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);position:relative}
.timeline::before{content:"";position:absolute;left:6%;right:6%;top:23px;height:2px;background:linear-gradient(90deg,var(--blue),var(--hair))}
.timeline li{position:relative;display:grid;gap:10px;align-content:start}
.t-mark{justify-self:start;position:relative;z-index:1;padding:10px 18px;border-radius:999px;background:var(--navy);color:#fff;font-weight:600;font-size:.95rem}
.timeline p{color:var(--muted)}
.values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value{display:grid;gap:8px;justify-items:center;text-align:center;padding:24px 24px 28px;border-radius:22px;background:var(--paper);border:1px solid var(--hair);transition:box-shadow .5s,transform .5s,border-color .5s}
.value img{width:min(180px,70%);height:auto;filter:grayscale(1) opacity(.35);transition:filter .9s ease,transform .6s ease}
.value.lit{box-shadow:var(--shadow);border-color:transparent;transform:translateY(-4px)}
.value.lit img{filter:none;transform:scale(1.04)}
.value p{color:var(--muted);max-width:30ch}
.about-trust{padding-block:clamp(28px,4vw,44px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.about-trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.about-trust li{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:500;color:var(--navy);text-align:center}
.about-trust svg.ico{width:24px;height:24px;color:#000;flex:none}
.about-trust .stars svg{width:15px;height:15px}
@media (max-width:860px){
  .about-hero{padding-top:96px!important}
  .about-hero .wrap{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .timeline::before{left:23px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--blue),var(--hair))}
  .values{grid-template-columns:1fr 1fr;gap:12px}
  .value{padding:18px 14px 20px}
  .about-trust ul{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){.values{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.value img{filter:none}}