/* ============================================================
   ARVESTA — ABOUT PAGE
   Inherits arvesta.css (tokens, nav, .phero, buttons, footer).
   ============================================================ */

/* ---------- WHY ARVESTA EXISTS ---------- */
.why-exists{background:var(--ivory)}
.we__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,6vw,88px);align-items:start}
.we__grid h2{max-width:15ch;margin-top:22px}
.we__body p + p{margin-top:18px}

.we__list{margin-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--line)}
.we__list li{
  list-style:none;display:flex;gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--navy);
  transition:padding-left .4s var(--ease-out);
}
.we__list li:hover{padding-left:10px}
.we__list li i{
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  flex:none;transform:translateY(-2px);
}
.we__turn{
  margin-top:clamp(30px,3.4vw,44px);padding:26px 28px;
  background:var(--navy);color:#fff;position:relative;overflow:hidden;
}
.we__turn::before{
  content:'';position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(to bottom,var(--gold),var(--emerald));
}
.we__turn p{
  font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.34rem);
  line-height:1.45;color:#fff;max-width:44ch;
}

/* ---------- PHILOSOPHY ---------- */
.phil{background:var(--navy-deep);color:var(--body-light);position:relative;overflow:hidden}
.phil::before{
  content:'';position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(25,184,165,.15),transparent 66%);
  top:-280px;right:-220px;
}
.phil__inner{position:relative;z-index:1}
.phil h2,.phil h3{color:#fff}
.phil__head{margin-bottom:clamp(46px,5vw,72px);max-width:46ch}
.phil__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--navy-line)}
.pcard{
  padding:clamp(30px,3.4vw,44px) clamp(22px,2.4vw,34px) clamp(34px,4vw,52px) 0;
  border-bottom:1px solid var(--navy-line);position:relative;
}
.pcard:not(:last-child){border-right:1px solid var(--navy-line)}
.pcard:not(:first-child){padding-left:clamp(22px,2.4vw,34px)}
.pcard__n{
  font-family:var(--serif);font-size:.8rem;letter-spacing:.14em;
  color:var(--gold);display:block;margin-bottom:20px;
}
.pcard h3{font-size:clamp(1.28rem,1.9vw,1.62rem);margin-bottom:12px}
.pcard p{font-size:.95rem;color:rgba(255,255,255,.62);max-width:26ch}
.pcard::after{
  content:'';position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--teal);transition:width .8s var(--ease-out);
}
.pcard.is-in::after{width:100%}

/* ---------- HOW WE WORK — timeline ---------- */
.hww{background:var(--ivory);overflow:hidden}
.hww__head{margin-bottom:clamp(48px,5.4vw,80px);max-width:44ch}
.hww__track{position:relative}
/* spans dot-centre to dot-centre rather than edge to edge */
.hww__rail{
  position:absolute;left:20px;right:20px;top:19px;height:2px;background:var(--line);z-index:0;
}
.hww__rail i{
  position:absolute;inset:0;background:linear-gradient(90deg,var(--emerald),var(--teal));
  transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease-out);
}
.hww__rail.is-in i{transform:scaleX(1)}
.hww__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,42px);position:relative;z-index:1}
.hstep{padding-right:clamp(10px,2vw,26px)}
.hstep__dot{
  width:40px;height:40px;border-radius:50%;background:var(--ivory);
  border:2px solid var(--line);display:grid;place-items:center;
  font-family:var(--serif);font-size:.86rem;color:var(--body);
  transition:border-color .5s var(--ease),color .5s var(--ease),background .5s var(--ease),box-shadow .5s;
}
.hstep.is-in .hstep__dot{border-color:var(--emerald);color:var(--emerald);background:var(--white);box-shadow:0 0 0 6px rgba(12,143,117,.10)}
.hstep h3{font-size:clamp(1.24rem,1.9vw,1.58rem);margin:26px 0 12px}
.hstep p{font-size:.95rem;max-width:26ch}

/* ---------- FOUNDER ---------- */
.fdr{background:var(--white)}
.fdr__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,6vw,86px);align-items:center}
.fdr__media{aspect-ratio:4/5;position:relative}
.fdr h2{max-width:16ch;margin:22px 0 22px}
.fdr__body p + p{margin-top:16px}
.fdr__quote{
  margin-top:32px;padding-left:24px;border-left:2px solid var(--emerald);
}
.fdr__quote p{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.08rem,1.5vw,1.28rem);
  color:var(--navy);line-height:1.44;
}
.fdr__quote cite{
  display:block;margin-top:14px;font-style:normal;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--body);opacity:.7;
}

/* editable-content flag — remove once real copy is in */
.todo{
  margin-top:26px;padding:16px 18px;border:1px dashed rgba(168,134,63,.55);
  background:rgba(209,175,104,.09);font-size:.83rem;color:var(--gold-dk);line-height:1.55;
}
.todo b{display:block;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.63rem;margin-bottom:6px}

/* ---------- ENDING ---------- */
.aend{
  background:var(--navy);color:var(--body-light);text-align:center;
  padding-block:clamp(88px,10vw,150px);position:relative;overflow:hidden;
}
.aend::before{
  content:'';position:absolute;width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(12,143,117,.22),transparent 64%);
  top:-380px;left:50%;transform:translateX(-50%);
}
.aend__inner{position:relative;z-index:1;max-width:800px;margin-inline:auto}
.aend h2{color:#fff;font-size:clamp(1.85rem,3.2vw,2.75rem);line-height:1.16}
.aend__btn{margin-top:42px;display:flex;justify-content:center}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .we__grid,.fdr__grid{grid-template-columns:1fr;gap:38px}
  .fdr__media{max-width:380px}
  .phil__grid{grid-template-columns:1fr 1fr}
  .pcard:nth-child(2){border-right:0}
  .pcard:nth-child(odd){padding-left:0}
  .pcard:nth-child(even){padding-left:clamp(22px,2.4vw,34px)}
  .hww__steps{grid-template-columns:1fr 1fr;gap:36px}
  .hww__rail{display:none}
}
@media (max-width:760px){
  .phil__grid,.hww__steps{grid-template-columns:1fr}
  .pcard,.pcard:nth-child(even),.pcard:nth-child(odd){border-right:0;padding-left:0;padding-right:0}
}