/* ============================================================ *
 * About page — page-about.php
 * Big editorial layout: principles grid, values, "how we make
 * money" callout, team stub, links to methodology / contact.
 * ============================================================ */

.about-hero{padding:var(--sp-6) 0 var(--sp-4);position:relative;overflow:hidden}
.about-hero::before{
  content:"";position:absolute;inset:auto -8% -40% auto;width:60%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(255,46,136,.18),transparent 70%);
  filter:blur(20px);z-index:0;
}
.about-hero > .container{position:relative;z-index:1}
.about-hero .lede{font-size:var(--t-lg);max-width:60ch;color:var(--ink-soft);margin-top:var(--sp-3);font-weight:400}
.about-hero h1{margin-top:var(--sp-2);max-width:18ch}
.about-hero h1 em{font-style:normal;background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Principles — what we believe */
.about-principles{padding:var(--sp-5) 0;background:var(--paper-2)}
.about-principles__grid{
  display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:var(--sp-4);
}
.principle{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:var(--sp-3);position:relative;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.principle::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad-hot);border-radius:var(--rad) var(--rad) 0 0;opacity:.85;
}
.principle:nth-child(2n)::before{background:var(--grad-cyan)}
.principle:nth-child(3n)::before{background:var(--grad-lime)}
.principle:nth-child(4n)::before{background:var(--grad-gold)}
.principle:hover{transform:translateY(-3px);border-color:rgba(255,46,136,.3);box-shadow:var(--shadow-pop)}
.principle .num{
  font-family:var(--serif);font-size:2.4rem;font-weight:800;
  color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 30;line-height:.9;
  margin-bottom:.4rem;display:block;
}
.principle h3{margin:.2rem 0 .6rem;font-size:1.18rem;line-height:1.2}
.principle p{color:var(--ink-soft);font-size:var(--t-sm);margin:0;line-height:1.6}

/* Money callout */
.about-money{padding:var(--sp-5) 0}
.about-money__box{
  background:var(--ink);color:var(--paper);border-radius:var(--rad);
  padding:var(--sp-4) var(--sp-4);position:relative;overflow:hidden;
  margin-top:var(--sp-3);
}
.about-money__box::before{
  content:"";position:absolute;inset:-30% -10% auto auto;width:60%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(245,185,33,.25),transparent 70%);
}
.about-money__box > *{position:relative;z-index:1}
.about-money__box h2{color:#fff;font-size:1.8rem;margin-bottom:var(--sp-2)}
.about-money__box p{color:rgba(250,247,242,.85);max-width:60ch;font-size:1.04rem;line-height:1.7}
.about-money__box ol{margin:var(--sp-2) 0 var(--sp-3) 1.4em;color:rgba(250,247,242,.92)}
.about-money__box ol li{margin:.4rem 0;line-height:1.6}
.about-money__box .paid-pill{
  display:inline-block;background:var(--grad-gold);color:#3D2A00;
  padding:.16rem .55rem;border-radius:var(--rad-pill);
  font-weight:800;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  margin:0 .15rem;
}
.about-money__box a{color:var(--lime);border-bottom:2px solid rgba(199,242,60,.4)}
.about-money__box a:hover{border-color:var(--lime)}

/* Team stub */
.about-team{padding:var(--sp-5) 0;background:var(--paper-2)}
.about-team__placeholder{
  background:#fff;border:2px dashed var(--line);border-radius:var(--rad);
  padding:var(--sp-4);text-align:center;color:var(--ink-mute);
  font-style:italic;margin-top:var(--sp-3);
}

/* Trust bar — quick stats / signal */
.about-trust{padding:var(--sp-4) 0}
.about-trust__row{
  display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-top:var(--sp-3);
}
.about-trust__row .stat{padding:var(--sp-2) 0}

/* CTA strip — methodology + contact */
.about-cta{padding:var(--sp-5) 0;background:var(--ink);color:var(--paper)}
.about-cta h2{color:#fff;font-size:1.8rem}
.about-cta p{color:rgba(250,247,242,.8);max-width:50ch}
.about-cta .actions{display:flex;gap:.8rem;margin-top:var(--sp-3);flex-wrap:wrap}