/* ============================================================
   AURELLE — ABOUT PAGE  (about.css)
   Supplements style.css. Uses ONLY existing design tokens
   (--ink, --ivory, --champagne, --sp, --pad-x, --ease, fonts…)
   defined in style.css. No shared component is redefined here.
   ============================================================ */

/* ---------- [S1] ABOUT HERO (dark banner) ---------- */
/* Builds on .hero but as a full-bleed dark banner with bg image. */
.about-hero{
  min-height:88svh;
  background:var(--ink);color:var(--warm-white);
  display:flex;flex-direction:column;justify-content:center;
  padding:12rem var(--pad-x) 5rem;
}
.about-hero__bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.about-hero__bg img{width:100%;height:118%;object-fit:cover;opacity:.30;will-change:transform}
.about-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(20,17,13,.9) 0%,rgba(20,17,13,.6) 55%,rgba(20,17,13,.82) 100%)}
.about-hero__inner{position:relative;z-index:2;max-width:900px}
.about-hero__title{color:var(--warm-white);margin:.4rem 0 1.6rem}
.about-hero__title em{color:var(--champ-soft)}
.about-hero__sub{
  font-family:var(--f-display);font-style:italic;font-weight:330;
  font-size:clamp(1.5rem,3.4vw,2.6rem);color:var(--champ-soft);
  letter-spacing:-.01em;margin-bottom:2rem;line-height:1.15;
}
.about-hero__lede{
  max-width:70ch;color:rgba(245,241,232,.76);
  font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.85;
}
.about-hero .scroll-ind{color:var(--champ-soft)}
.about-hero .scroll-ind__line{background:var(--line-light)}

/* ---------- [S2] OUR APPROACH additions ---------- */
/* .why layout is reused as-is; these only style the copy + values. */
.approach__body{margin-top:2.6rem;display:flex;flex-direction:column;gap:1.2rem}
.approach__p{color:rgba(245,241,232,.78);font-size:1rem;line-height:1.8;max-width:60ch}
.approach__values{margin-top:3rem}

/* ---------- [S3] HOW WE WORK rows ---------- */
/* Reuses .svc-index / .svc-row; add a description under each title. */
/* ---------- SPACE ABOVE HOW WE WORK ---------- */
.services.how{
  padding-top: 7rem;
}
.how-row{grid-template-columns:auto auto 1fr auto}
.how-row__text{display:flex;flex-direction:column;gap:.5rem}
.how-row__desc{
  font-family:var(--f-body);font-size:.95rem;line-height:1.6;color:var(--graphite);
  max-width:52ch;
}
.how-row .svc-row__tag{align-self:center}

/* ---------- [S4] TECHNICAL EXCELLENCE ---------- */
/* Reuses .intro grid; add a title above the statement. */
.tech__title{
  font-family:var(--f-display);font-weight:340;
  font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;letter-spacing:-.02em;
  margin-bottom:1.8rem;color:var(--ink);
}
.tech__statement{font-size:clamp(1.6rem,3.2vw,2.6rem);margin-bottom:2rem}

/* ---------- [S5] THE AURELLE STANDARD ---------- */
.standard{padding:var(--sp) var(--pad-x);background:var(--warm-white);border-top:1px solid var(--line)}
.standard__head{max-width:1400px;margin:0 auto 3.4rem}
.standard__grid{
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 3rem;
}
.standard__grid li{
  padding:1.5rem 1.8rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ivory);font-size:1.02rem;color:var(--ink);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.standard__grid li:hover{border-color:var(--champagne);transform:translateY(-2px)}

/* ---------- RESPONSIVE (mirrors style.css breakpoints) ---------- */
@media (max-width:1024px){
  .about-hero{min-height:78svh;padding-top:10rem}
  .standard__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .about-hero{padding-top:8.5rem}
  .how-row{grid-template-columns:auto auto 1fr}
  .how-row .svc-row__tag{display:none}
  .how-row__desc{font-size:.9rem}
}