/* ============================================================
   AURELLE — SERVICES PAGE  (services.css)
   Supplements style.css. Uses ONLY existing design tokens
   (--ink, --ivory, --champagne, --sp, --pad-x, --ease, fonts…)
   and existing components (.hero, .why, .svc-index, .checklist,
   .eyebrow, .mask, .cta …). No shared component is redefined.
   ============================================================ */

/* ---------- [S1] SERVICES HERO (dark banner) ---------- */
/* Same pattern as the About hero: full-bleed dark banner. */
.svc-hero{
  min-height:90svh;
  background:var(--ink);color:var(--warm-white);
  display:flex;flex-direction:column;justify-content:center;
  padding:12rem var(--pad-x) 5rem;
}
.svc-hero__bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.svc-hero__bg img{width:100%;height:118%;object-fit:cover;opacity:.28;will-change:transform}
.svc-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(20,17,13,.9) 0%,rgba(20,17,13,.58) 55%,rgba(20,17,13,.82) 100%)}
.svc-hero__inner{position:relative;z-index:2;max-width:920px}
.svc-hero__title{color:var(--warm-white);margin:.4rem 0 1.6rem}
.svc-hero__title em{color:var(--champ-soft)}
.svc-hero__sub{
  font-family:var(--f-display);font-style:italic;font-weight:330;
  font-size:clamp(1.4rem,3.2vw,2.4rem);color:var(--champ-soft);
  letter-spacing:-.01em;margin-bottom:2rem;line-height:1.15;
}
.svc-hero__lede{
  max-width:72ch;color:rgba(245,241,232,.76);
  font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.85;margin-bottom:2.6rem;
}
.svc-hero__actions{display:flex;gap:1rem;flex-wrap:wrap}
.svc-hero .scroll-ind{color:var(--champ-soft)}
.svc-hero .scroll-ind__line{background:var(--line-light)}

/* ---------- [S2] SERVICE INDEX STRIP ---------- */
/* Reuses .svc-index / .svc-row; make each row an anchor link. */
.svc-menu{padding-top:var(--sp)}
.svc-row__link{
  display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;
  gap:1.6rem;width:100%;color:inherit;
}
.svc-menu .svc-row{padding-left:0}
.svc-menu .svc-row:hover{padding-left:1.6rem}

/* ---------- SERVICE DARK SPREAD (.svc-block on .why) ---------- */
/* Adds paragraph styling + list spacing; layout inherited from .why. */
.svc-block__intro{
  font-family:var(--f-display);font-style:italic;font-weight:330;
  font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.5;color:var(--champ-soft);
  margin-top:2.4rem;max-width:52ch;
}
.svc-block__body{
  color:rgba(245,241,232,.78);font-size:1rem;line-height:1.8;
  margin-top:1.4rem;max-width:56ch;
}
.svc-block__list{margin-top:2.6rem}

/* Reversed spread: image on the right instead of left. */
.svc-block--rev.why{grid-template-columns:1.15fr 1fr}
.svc-block--rev .why__media{order:2}
.svc-block--rev .why__content{order:1}

/* ---------- LIGHT EDITORIAL SPREAD (.svc-light) ---------- */
/* Same rhythm as the homepage .intro: sticky label + body column. */
.svc-light{padding:var(--sp) var(--pad-x);background:var(--ivory)}
.svc-light--split{background:var(--warm-white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc-light__grid{
  display:grid;grid-template-columns:.9fr 2.1fr;gap:clamp(2rem,6vw,6rem);
  max-width:1400px;margin:0 auto;align-items:start;
}
.svc-light__label{padding-top:.7rem;position:sticky;top:120px}
.svc-light__label .mono{color:var(--bronze)}
.svc-light__intro{
  font-family:var(--f-display);font-style:italic;font-weight:330;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.4;color:var(--ink);
  letter-spacing:-.01em;margin-top:2.4rem;max-width:52ch;
}
.svc-light__note{
  color:var(--graphite);font-size:1.05rem;line-height:1.85;
  margin-top:1.4rem;max-width:58ch;
}
.svc-light__list{margin-top:2.8rem;max-width:60ch}

/* Two-column benefit lists (AMC covers / ideal for) */
.svc-cover{
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,4vw,4rem);
  margin-top:3.4rem;padding-top:3rem;border-top:1px solid var(--line);
}
.svc-cover__h{
  color:var(--bronze);margin-bottom:1.6rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line);
}

/* ---------- RESPONSIVE (mirrors style.css breakpoints) ---------- */
@media (max-width:1024px){
  .svc-hero{min-height:80svh;padding-top:10rem}
  .svc-block--rev.why{grid-template-columns:1fr}
  .svc-block--rev .why__media{order:0}
  .svc-block--rev .why__content{order:0}
  .svc-light__grid{grid-template-columns:1fr;gap:2rem}
  .svc-light__label{position:static}
  .svc-cover{grid-template-columns:1fr;gap:2.4rem}
}
@media (max-width:640px){
  .svc-hero{padding-top:8.5rem}
  .svc-row__link{grid-template-columns:auto auto 1fr;gap:1rem}
  .svc-menu .svc-row .svc-row__tag,
  .svc-menu .svc-row .svc-row__arrow{display:none}
}