/* ============================================================
   services.css — Services page redesign (scoped components)
   Relies on tokens from style.css (--red, --ink, --line, etc.)
   ============================================================ */

:root{
  --amber:#F59E0B;
  --violet:#8B5CF6;
  --green2:#16A34A;
  --cardline:#E6E5E0;
}

/* accent colour for new headings (style.css only reds specific parents) */
.svc-hero-grid2 h1 .accent,
.outcomes-head h2 .accent{color:var(--red);}

/* ---------- scroll-reveal animation utilities ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .draw-path{stroke-dashoffset:0!important;}
  .grow-bar{transform:none!important;}
}

/* chart draw-in: container .oc-chart gets .in, children animate */
.oc-chart .draw-path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.33,.1,.25,1);}
.oc-chart.in .draw-path{stroke-dashoffset:0;}
.oc-chart .grow-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.22,.61,.36,1);}
.oc-chart.in .grow-bar{transform:scaleY(1);}
.oc-chart .fade-el{opacity:0;transition:opacity .8s ease .45s;}
.oc-chart.in .fade-el{opacity:1;}
.oc-chart .ba-mini .fl{width:0;transition:width 1.1s cubic-bezier(.22,.61,.36,1);}
.oc-chart.in .ba-mini .fl{width:var(--w);}

/* ============================================================
   HERO proof strip tweak (reuse .hero-proof from style.css)
   ============================================================ */
.svc-hero-wrap{padding:64px 0 26px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 70%);}
.svc-hero-grid2{display:grid;grid-template-columns:1.18fr 1fr;gap:56px;align-items:end;}
.svc-hero-grid2 h1{font-size:clamp(40px,5.4vw,68px);line-height:1.02;letter-spacing:-.03em;font-weight:700;margin:18px 0 22px;}
.svc-hero-grid2 .lede{font-size:16px;line-height:1.6;color:var(--ink-3);max-width:46ch;margin:0;}
@media (max-width:980px){.svc-hero-grid2{grid-template-columns:1fr;gap:40px;}}

/* ============================================================
   FRAMEWORK panel
   ============================================================ */
.svc-fw{border:1px solid var(--cardline);border-radius:18px;background:#fff;
  padding:34px 36px;margin-top:8px;box-shadow:0 1px 0 rgba(11,11,12,.02);}
.svc-fw-grid{display:grid;grid-template-columns:0.82fr 2.6fr;gap:40px;align-items:center;}
.svc-fw-intro .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:14px;}
.svc-fw-intro h2{font-size:clamp(24px,2.4vw,30px);line-height:1.08;letter-spacing:-.02em;font-weight:700;margin:0 0 16px;}
.svc-fw-intro h2 .reg{font-size:.5em;vertical-align:super;font-weight:600;color:var(--ink-3);}
.svc-fw-intro p{font-size:14px;line-height:1.6;color:var(--ink-3);margin:0 0 18px;max-width:34ch;}
.svc-fw-intro .fw-link{display:inline-flex;align-items:center;gap:7px;color:var(--red);font-weight:600;font-size:14px;}
.svc-fw-intro .fw-link .arrow{transition:transform .15s;}
.svc-fw-intro .fw-link:hover .arrow{transform:translateX(4px);}

.flow{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;}
.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:0 0 auto;width:84px;}
.flow-ico{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--cardline);
  display:flex;align-items:center;justify-content:center;background:#fff;margin-bottom:12px;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;}
.flow-ico svg{width:23px;height:23px;}
.flow-step .fs-t{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.flow-step .fs-s{font-size:10.5px;line-height:1.35;color:var(--ink-3);margin-top:5px;max-width:11ch;}
.flow-arrow{flex:1 1 auto;height:54px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);opacity:.5;min-width:14px;}
.flow-arrow svg{width:16px;height:12px;}
/* per-step accent ring colors */
.flow-step:nth-child(1) .flow-ico{color:var(--ink);}
.flow-step:nth-child(3) .flow-ico{color:var(--amber);}
.flow-step:nth-child(5) .flow-ico{color:#3B82F6;}
.flow-step:nth-child(7) .flow-ico{color:var(--ink);}
.flow-step:nth-child(9) .flow-ico{color:#3B82F6;}
.flow-step:nth-child(11) .flow-ico{color:var(--violet);}
.flow-step:nth-child(13) .flow-ico{color:var(--red);}
.flow-step.lit .flow-ico{border-color:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 12%,transparent);transform:translateY(-2px);}
.fw-tagline{text-align:center;font-weight:700;font-size:15px;margin-top:26px;letter-spacing:-.01em;}
.fw-tagline .accent{color:var(--red);}
@media (max-width:980px){
  .svc-fw-grid{grid-template-columns:1fr;gap:28px;}
  .flow{flex-wrap:wrap;justify-content:flex-start;gap:18px 4px;}
  .flow-step{width:80px;}
  .flow-arrow{display:none;}
}

/* ============================================================
   OUTCOME CARDS
   ============================================================ */
.outcomes-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;flex-wrap:wrap;}
.outcomes-head h2{font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.05;}
.outcomes{display:flex;flex-direction:column;border:1px solid var(--cardline);border-radius:18px;overflow:hidden;background:#fff;}
.oc-card{display:grid;grid-template-columns:300px 1fr 230px 300px;gap:34px;padding:34px 36px;align-items:center;border-top:1px solid var(--line);}
.oc-card:first-child{border-top:none;}
.oc-head{display:flex;gap:20px;align-items:flex-start;}
.oc-illus{width:74px;height:74px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.oc-illus svg{width:36px;height:36px;}
.oc-num{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.04em;margin-bottom:6px;}
.oc-title{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0 0 10px;text-transform:uppercase;}
.oc-desc{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:0;max-width:24ch;}
.oc-do-lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:13px;}
.oc-do{display:flex;flex-direction:column;gap:9px;}
.oc-do li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);line-height:1.3;}
.oc-do li svg{width:15px;height:15px;flex-shrink:0;}
.oc-feat-lbl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:9px;}
.oc-feat-client{font-size:12.5px;color:var(--ink-3);margin-bottom:6px;}
.oc-feat-big{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1;margin-bottom:8px;}
.oc-feat-note{font-size:12.5px;line-height:1.4;color:var(--ink-3);margin-bottom:12px;max-width:22ch;}
.oc-feat-link{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:600;font-size:12.5px;}
.oc-feat-link .arrow{transition:transform .15s;}
.oc-feat-link:hover .arrow{transform:translateX(3px);}
.oc-chart{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;}
.oc-chart .ct-lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:10px;}
.oc-chart svg{width:100%;height:auto;display:block;}
.ba-mini{display:flex;flex-direction:column;gap:11px;}
.ba-mini .r{display:flex;align-items:center;gap:9px;}
.ba-mini .t{font-size:10.5px;color:var(--ink-3);width:42px;flex-shrink:0;}
.ba-mini .trk{flex:1;height:11px;border-radius:6px;background:var(--bg-3);overflow:hidden;}
.ba-mini .fl{height:100%;border-radius:6px;width:0;transition:width 1.1s cubic-bezier(.22,.61,.36,1);}
.ba-mini .v{font-size:11px;font-weight:700;color:var(--ink);width:34px;text-align:right;flex-shrink:0;}
/* accent helpers */
.acc-red{color:var(--red);} .bg-red{background:var(--red);}
.acc-amber{color:var(--amber);} .bg-amber{background:var(--amber);}
.acc-green{color:var(--green2);} .bg-green{background:var(--green2);}
.acc-violet{color:var(--violet);} .bg-violet{background:var(--violet);}
.tint-red{background:#FDF2F2;} .tint-amber{background:#FEF6E7;}
.tint-green{background:#EAF7EF;} .tint-violet{background:#F3EEFD;}
@media (max-width:1080px){
  .oc-card{grid-template-columns:1fr 1fr;gap:28px;}
}
@media (max-width:680px){
  .oc-card{grid-template-columns:1fr;gap:22px;padding:26px 22px;}
}

/* ============================================================
   CORE SERVICES LIST
   ============================================================ */
.core-head{margin-bottom:8px;}
.core-list{border-top:1px solid var(--line);}
.cs-row{display:grid;grid-template-columns:40px 56px 1.25fr 1fr 0.92fr;gap:26px;
  padding:26px 4px;border-bottom:1px solid var(--line);align-items:start;}
.cs-num{font-family:var(--display);font-size:16px;font-weight:700;color:var(--red);padding-top:3px;}
.cs-ico{width:46px;height:46px;border-radius:12px;border:1px solid var(--cardline);
  display:flex;align-items:center;justify-content:center;color:var(--ink);background:#fff;}
.cs-ico svg{width:22px;height:22px;}
.cs-ttl{font-family:var(--display);font-size:17.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 7px;color:var(--ink);}
.cs-desc{font-size:13px;line-height:1.5;color:var(--ink-3);margin:0;max-width:34ch;}
.cs-caps-lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:9px;}
.cs-caps{display:flex;flex-wrap:wrap;gap:6px;}
.cs-cap{font-size:11.5px;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);
  padding:4px 10px;border-radius:999px;white-space:nowrap;}
.cs-feat .fc{font-size:11.5px;color:var(--ink-3);margin-bottom:4px;}
.cs-feat .fb{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.05;margin-bottom:3px;}
.cs-feat .fb.green{color:var(--green2);} .cs-feat .fb.red{color:var(--red);}
.cs-feat .fn{font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-bottom:9px;max-width:22ch;}
.cs-feat .fl{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:600;font-size:12px;}
.cs-feat .fl .arrow{transition:transform .15s;}
.cs-row:hover .cs-feat .fl .arrow{transform:translateX(3px);}
.cs-row:hover .cs-ico{border-color:var(--red);color:var(--red);transition:.2s;}
@media (max-width:980px){
  .cs-row{grid-template-columns:32px 1fr;gap:14px 18px;}
  .cs-ico{display:none;}
  .cs-row > .cs-caps-col, .cs-row > .cs-feat{grid-column:2;}
}

/* ============================================================
   PARTNER BAND
   ============================================================ */
.pb-lbl{text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:24px;}
.pb-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.pb-box{border:1px solid var(--cardline);border-radius:12px;padding:20px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:84px;
  transition:border-color .2s,transform .2s;background:#fff;}
.pb-box:hover{border-color:var(--ink-3);transform:translateY(-2px);}
.pb-name{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);}
.pb-sub{font-size:10.5px;color:var(--ink-3);}
.pb-box.muted .pb-name{font-size:12.5px;font-weight:600;color:var(--ink-3);line-height:1.3;}
@media (max-width:860px){.pb-row{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.pb-row{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   QUICK ANSWERS (AEO) — extends .answer-card vocabulary
   ============================================================ */
.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px;}
.qa-item{border:1px solid var(--cardline);border-radius:14px;padding:22px 22px 24px;background:#fff;}
.qa-q{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 9px;color:var(--ink);}
.qa-a{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:0;}
.qa-a strong{color:var(--ink-2);font-weight:600;}
@media (max-width:860px){.qa-grid{grid-template-columns:1fr;}}