/* =====================================================================
   PAGE: SERVICES HUB — public/assets/css/pages/services.css (from design/services-hub-preview.html)
   Uses only --fv-* tokens and fv- components; page classes use svc-
   ===================================================================== */

/* 1 hero */
.svc-hero{padding-block:88px 96px;overflow:hidden}
.svc-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.svc-hero .fv-h1{margin-block:18px 24px}
.svc-hero .fv-lead{max-width:620px}
.svc-crumb{margin-bottom:28px}
.svc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.svc-promise{margin-top:28px;display:flex;gap:10px;align-items:center}
.svc-promise::before{content:"";width:18px;height:1px;background:var(--fv-green)}
.svc-split-art{width:100%;height:auto}
.svc-split-art .svc-art-faint{stroke:var(--fv-ink);stroke-opacity:.14}
.svc-split-art .svc-art-green{stroke:var(--fv-green)}
.svc-split-art .svc-art-dot{fill:var(--fv-green)}
.svc-split-art .svc-art-end{fill:var(--fv-paper);stroke:var(--fv-green);stroke-width:2}
[dir=rtl] .svc-split-art{transform:scaleX(-1)}

/* 2 mission + method */
.svc-intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:56px}
.svc-intro .fv-h2,.svc-head .fv-h2{margin-top:16px}

/* 3 three ways */
.svc-head .fv-h2{max-width:760px}
.svc-ways{margin-top:56px;position:relative;padding-inline-start:44px}
.svc-ways::before{content:"";position:absolute;inset-block:8px;inset-inline-start:10px;width:2px;background:var(--fv-green)}
.svc-way{display:grid;grid-template-columns:1fr 240px;gap:40px;padding-block:40px;border-bottom:1px solid var(--fv-line);position:relative}
.svc-way:last-child{border-bottom:0}
.svc-way::before{content:"";position:absolute;inset-inline-start:-41px;top:52px;width:16px;height:16px;border-radius:50%;background:var(--fv-paper);border:2px solid var(--fv-green)}
.svc-way__num{font-family:var(--fv-font-display);font-size:14px;color:var(--fv-green)}
.svc-way .fv-h3{margin-block:10px 6px}
.svc-way__tag{font-family:var(--fv-font-display);font-style:italic;font-size:19px;line-height:1.4;margin-bottom:14px}
.svc-way__text{color:var(--fv-muted);max-width:560px}
.svc-way__fact{margin-block:18px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center}
.svc-way__fact::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--fv-green)}
/* metaphor photos: shared .fv-photo (main.css, 4:5); page only sets the mobile ratio */

/* 4 which fits */
.svc-fit{margin-top:48px}
.svc-fit__head{display:grid;grid-template-columns:1.4fr 1fr 20px;gap:20px;padding-block:14px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fv-muted)}
.svc-fit .fv-row{grid-template-columns:1.4fr 1fr 20px;align-items:center}
.svc-fit .fv-row__title{font-style:italic;font-weight:400;font-size:20px;line-height:1.4}
.svc-fit .fv-row__tag{font-size:15px;margin:0}
.svc-unsure{margin-top:32px;background:var(--fv-surface);padding:24px 28px;display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}

/* 5 when the ways connect */
.svc-case{margin-top:48px;padding:0;display:grid;grid-template-columns:repeat(3,1fr) 1.1fr}
.svc-case__cell{padding:32px;border-inline-end:1px solid var(--fv-line)}
.svc-case__cell p{font-size:16px}
.svc-case__label{display:block;margin-bottom:14px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fv-muted)}
.svc-case__result{background:var(--fv-ink);color:var(--fv-on-ink);border:0}
.svc-case__result .svc-case__label{color:var(--fv-on-ink-muted)}
.svc-case__result .fv-num{display:block;font-size:44px;margin-block:6px 10px;white-space:nowrap}
.svc-case__result em{font-style:normal;color:var(--fv-green-soft)}
@media (max-width:600px){.svc-case{grid-template-columns:minmax(0,1fr)}.svc-case__result .fv-num{white-space:normal;font-size:36px}}

/* 6 cta */
.svc-cta{text-align:center}
.svc-cta .fv-eyebrow{justify-content:center}
.svc-cta .fv-lead{margin:20px auto 36px;max-width:560px}

@media(max-width:900px){
  .svc-hero__grid{grid-template-columns:1fr}
  .svc-split-art{max-width:420px}
  .svc-case{grid-template-columns:1fr 1fr}
  .svc-case__cell{border-bottom:1px solid var(--fv-line)}
}
@media(max-width:800px){
  .svc-intro{grid-template-columns:1fr;gap:20px}
  .svc-way{grid-template-columns:1fr}
  .svc-photo{aspect-ratio:16/9}
}
@media(max-width:700px){
  .svc-fit__head{display:none}
  .svc-fit .fv-row{grid-template-columns:1fr 20px;gap:8px}
  .svc-fit .fv-row__title{grid-column:1/-1}
}
@media(max-width:560px){.svc-case{grid-template-columns:1fr}}