/* ============================================================
   HaloLogic.ai — Services & offers ("Modern Halo", 0b④)
   Visual contract: design/services/index.html — approved by Brad
   2026-07-11 (D-013 platform-agnostic training, D-015 fCAIO flagship).
   Load order (functions.php): tokens.css -> base.css -> site.css ->
   this file, enqueued ONLY on the page with slug "services".
   Type scale + section vocabulary mirror the gated pages, page-scoped
   the same way. Contrast: BRAND.md §1.1 verified pairs only; the
   flagship section's card color reset keeps card text charcoal on
   white inside the charcoal section. No page JS (no forms here; the
   footer newsletter is site.js's job). No page motion.
   Gate 2026-07-11: PASS; NEW-28 (mini-heads are h3s), NEW-30 (space
   after the Pricing strong), NEW-31 (copper comment) folded in.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:100%;scroll-behavior:smooth;}
body{font-size:1.0625rem;line-height:1.65;}
h1,h2,h3{margin:0 0 .5em;}
h1{font-size:clamp(2.2rem,5vw + 1rem,3.6rem);font-weight:800;letter-spacing:-.01em;}
h2{font-size:clamp(1.7rem,2.6vw + 1rem,2.5rem);font-weight:700;letter-spacing:-.01em;}
h3{font-size:clamp(1.12rem,1vw + 1rem,1.35rem);font-weight:600;}
p{margin:0 0 1.1em;}
a{color:inherit;}

.section{padding:clamp(3.5rem,7vw,6rem) 0;}
.section--cream{background:var(--cream);}
.section--charcoal{background:var(--charcoal);color:var(--white);}
.lead{font-size:clamp(1.12rem,1.3vw + 1rem,1.4rem);color:var(--muted-ink);max-width:48ch;}
.section--charcoal .lead,.svc-hero .lead{color:var(--muted-on-dark);}
.narrow{max-width:50rem;}
/* In the narrow explainer the lead matches the body text's full column
   width (Brad, 2026-07-11: the 48ch cap wrapped it short of the
   paragraph below). */
.narrow .lead{max-width:none;}

.eyebrow{font-family:var(--ff-head);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--charcoal);display:inline-block;margin-bottom:1rem;}
.section--charcoal .eyebrow,.svc-hero .eyebrow{color:var(--gold);}
.eyebrow::after{content:"";display:block;width:2.2rem;height:3px;background:var(--copper);border-radius:2px;margin-top:.5rem;}

.svc-hero :focus,.section--charcoal :focus,.a11y-proof :focus{outline-color:var(--gold);}
.svc-hero :focus-visible,.section--charcoal :focus-visible,.a11y-proof :focus-visible{outline-color:var(--gold);}

/* Hero */
.svc-hero{position:relative;overflow:hidden;background:var(--charcoal);color:var(--white);padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3.5rem,7vw,5.5rem);}
.svc-hero .wrap{max-width:52rem;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem;}

/* Per-service sections */
.kicker{display:inline-block;font-family:var(--ff-head);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--charcoal);background:var(--sage-tint);border-radius:999px;padding:.25rem .7rem;margin-bottom:.8rem;}
/* Intro text runs the full content width so its lines align with the
   card frames below, wrapping only with the viewport (Brad, 2026-07-11:
   the 48ch lead cap and the 52rem intro cap both broke lines early). */
.svc-intro{max-width:none;}
.svc-intro .lead{max-width:none;}
.svc-grid{display:grid;gap:1.5rem;grid-template-columns:1fr;margin-top:2rem;}
@media (min-width:44rem){.svc-grid{grid-template-columns:1fr 1fr;}}
.card{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);padding:1.6rem 1.5rem;}
.section--cream .card{box-shadow:0 10px 30px -22px rgba(16,31,38,.35);}
.card h3{margin-bottom:.6rem;}
.card p{margin:0 0 .8em;color:var(--muted-ink);}
.card p:last-child{margin-bottom:0;}
.card .mini-head{font-family:var(--ff-head);font-weight:700;font-size:.95rem;color:var(--charcoal);margin:1.1rem 0 .3rem;}
.card .mini-head:first-of-type{margin-top:0;}

/* Checklist (copper check SVGs are decorative, aria-hidden) */
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;}
.svc-list li{display:flex;gap:.75rem;align-items:flex-start;color:var(--muted-ink);}
.svc-list svg{flex:none;width:1.3rem;height:1.3rem;color:var(--copper);margin-top:.2rem;}

/* Offer row: price slot + CTA. The button sits flush right (aligned with
   the cards' outer edge above); the price text takes the remaining width
   and wraps only when the viewport forces it (Brad, 2026-07-11). */
.offer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.8rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--hairline);}
.offer-price{margin:0;font-size:.98rem;color:var(--muted-ink);flex:1 1 26rem;}
.offer-price strong{font-family:var(--ff-head);color:var(--charcoal);display:block;font-size:1.02rem;margin-bottom:.15rem;}

/* Flagship (charcoal) offer section (D-015): white cards pop on charcoal;
   the hairline and price text flip to their on-dark equivalents
   (muted-on-dark 12:1, white 16.9:1 — both gated pairs). The color reset
   on .card matters: without it the card's h3 inherits the section's
   white and vanishes on the white card. */
.section--charcoal .card{border-color:transparent;box-shadow:var(--shadow);color:var(--charcoal);}
.section--charcoal .offer-row{border-top-color:rgba(255,255,255,.22);}
.section--charcoal .offer-price{color:var(--muted-on-dark);}
.section--charcoal .offer-price strong{color:var(--white);}

/* Accessibility proof card (charcoal feature inside cream section) */
.a11y-proof{margin-top:2rem;background:var(--charcoal);color:var(--white);border-radius:var(--radius);padding:clamp(1.5rem,3.5vw,2.2rem);box-shadow:var(--shadow);}
.a11y-proof p{margin:0;color:var(--muted-on-dark);}
.a11y-proof strong{color:var(--white);}
.a11y-proof a{color:var(--gold);text-decoration:underline;}

/* Final CTA */
.final-cta{text-align:center;}
.final-cta h2{color:var(--white);max-width:24ch;margin-inline:auto;}
.final-cta .lead{margin-inline:auto;}
.final-cta .btn{margin-top:1.6rem;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}