/* /services/ pages. Loaded only on those pages. Uses the site tokens (tokens.css) and the light theme only. */

/* numbered section labels: "01 · What you get" */
.sp-label-n{display:flex;align-items:center;gap:6px}
.sp-label-n span{font-family:var(--font-mono);letter-spacing:0;color:var(--brand)}
.sp-sec .section-head .lead{max-width:62ch}

/* ---------- hero ---------- */
.sp-hero{padding-top:var(--space-6)}
.sp-hero-grid{display:grid;gap:var(--space-7);align-items:center}
@media(min-width:960px){.sp-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.sp-hero .display-l{max-width:20ch;margin-top:var(--space-3)}
.sp-hero .lead{margin-top:var(--space-4);color:var(--ink-muted)}
.sp-hero .btn-row{margin-top:var(--space-6)}
.sp-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-6);max-width:520px}
.sp-chips li{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3);background:var(--surface-raised)}
.sp-chips b{display:block;font-size:24px;line-height:28px;font-weight:700;color:var(--brand)}
.sp-chips span{display:block;margin-top:2px;font-size:13px;line-height:17px;color:var(--ink-muted)}
.sp-hero-art{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--radius-md);background:linear-gradient(180deg,var(--surface-raised),var(--surface-sunken));overflow:hidden}
.sp-hero-art .sp-svg{display:block;width:100%;height:auto}

/* phase / time strip under graphics and phase cards */
.sp-strip{display:flex;justify-content:space-between;gap:var(--space-3);margin:0;padding:10px var(--space-4);border-top:1px solid var(--line);background:var(--surface-sunken);font:700 11px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.sp-strip i{font-style:normal;font-family:var(--font-mono);color:var(--brand);margin-right:6px;letter-spacing:0}

/* ---------- svg line art ---------- */
.sp-svg{overflow:visible}
.sp-svg text{font-family:var(--font-sans)}
.sp-contour{fill:none;stroke:var(--border-strong);stroke-width:1;stroke-opacity:.35}
.sp-dash{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-dasharray:6 6;stroke-linecap:round}
.sp-line{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-opacity:.75}
.sp-line-strong{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round}
.sp-tangle{fill:none;stroke:var(--border-strong);stroke-width:1.2;stroke-opacity:.45}
.sp-axis{stroke:var(--line);stroke-width:1}
.sp-ring{fill:var(--surface-raised);stroke:var(--brand);stroke-width:1.5}
.sp-ring-accent{stroke:var(--brass);stroke-width:2}
.sp-dot{fill:var(--brand)}
.sp-dot-start{fill:var(--ink-muted)}
.sp-dot-accent{fill:var(--brass)}
.sp-dot-dim{fill:var(--border-strong);opacity:.5}
.sp-dot-inv{fill:var(--surface-raised)}
.sp-flag{fill:var(--brass)}
.sp-box{fill:var(--surface-raised);stroke:var(--brand);stroke-width:1.5}
.sp-bubble{fill:var(--surface-raised);stroke:var(--border-strong);stroke-width:1.2}
.sp-bubble-a{stroke:var(--brand);stroke-width:1.5}
.sp-text-line{stroke:var(--line);stroke-width:8;stroke-linecap:round}
.sp-mark{fill:var(--brass);fill-opacity:.18;stroke:var(--brass);stroke-width:1}
.sp-pin{fill:var(--brand)}
.sp-pin-dim{fill:none;stroke:var(--border-strong);stroke-width:1.2}
.sp-ripple{fill:none;stroke:var(--brass);stroke-width:1.2;stroke-opacity:.6}
.sp-glow-a{stop-color:var(--brass);stop-opacity:.28}
.sp-glow-b{stop-color:var(--brass);stop-opacity:0}
.sp-label{font-size:13px;font-weight:700;letter-spacing:.12em;fill:var(--ink-muted)}
.sp-label-s{font-size:11px;letter-spacing:.06em}
.sp-label-strong{fill:var(--ink)}
.sp-num{font-family:var(--font-mono);font-size:12px;fill:var(--brand)}
.sp-ico{color:var(--brand);flex:none}

/* draw-on-reveal: the mask path is drawn when the parent .reveal gets .is-in (site.js) */
.js-motion .reveal .sp-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease-out) .2s}
.js-motion .reveal.is-in .sp-draw{stroke-dashoffset:0}
.js-motion .reveal .sp-glow,.js-motion .reveal .sp-fade,.js-motion .reveal .sp-flag{opacity:0;transition:opacity .8s var(--ease-out) 1.1s}
.js-motion .reveal.is-in .sp-glow{opacity:1}
.js-motion .reveal.is-in .sp-flag{opacity:1}
.js-motion .reveal.is-in .sp-fade{opacity:.55}
.js-motion .reveal .sp-ripple{transform-origin:280px 222px;transform:scale(.6);opacity:0;transition:transform 1.2s var(--ease-out) .6s,opacity 1.2s var(--ease-out) .6s}
.js-motion .reveal.is-in .sp-ripple{transform:scale(1);opacity:1}

/* ---------- quick answer ---------- */
.sp-answer-sec{padding-top:0}
.sp-answer{max-width:820px;border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:var(--radius-md);padding:var(--space-6);background:var(--surface-raised)}
.sp-answer .h2{margin-top:var(--space-3)}
.sp-answer .sp-quick{margin-top:var(--space-3);font-size:19px;line-height:29px}
.sp-answer .body-s{margin-top:var(--space-3);color:var(--ink-muted)}

/* ---------- problem ---------- */
.sp-pains .card{display:flex;flex-direction:column;gap:var(--space-3);background:transparent;border-style:dashed}
.sp-pains .sp-ico{color:var(--ink-muted)}
.sp-pains .body{color:var(--ink-muted)}
.sp-bridge{margin-top:var(--space-6);font-size:20px;line-height:30px;font-weight:600;color:var(--brand)}

/* ---------- what you get (numbered grid) ---------- */
.sp-gets{display:grid;gap:var(--space-5);grid-template-columns:1fr}
@media(min-width:640px){.sp-gets{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.sp-gets{grid-template-columns:repeat(6,1fr);gap:var(--space-6)}.sp-gets>li{grid-column:span 2}.sp-gets>li:nth-child(4):nth-last-child(2){grid-column:2 / span 2}}
.sp-gets .card{border-radius:var(--radius-md)}
.sp-gets .h4{margin-top:var(--space-3)}
.sp-gets .body-s{margin-top:var(--space-2);color:var(--ink-muted)}
.sp-tagline{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:13px;color:var(--brand)}
.sp-tag{font:700 11px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-ink);border:1px solid var(--line);border-radius:var(--radius-pill);padding:2px 10px}

/* ---------- how it works (phases) ---------- */
.sp-phases{display:grid;gap:var(--space-5);grid-template-columns:1fr;counter-reset:ph}
@media(min-width:640px){.sp-phases{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sp-phases{grid-template-columns:repeat(4,1fr)}}
.sp-phase{display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.sp-phase-art{position:relative;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-5) 0}
.sp-phase-path{flex:1;height:0;border-top:1.5px dashed var(--brand);opacity:.6;transform-origin:left;transition:transform 1.2s var(--ease-out) .3s}
.js-motion .sp-phase.reveal .sp-phase-path{transform:scaleX(0)}
.js-motion .sp-phase.reveal.is-in .sp-phase-path{transform:scaleX(1)}
.sp-phase .h4{padding:var(--space-4) var(--space-5) 0}
.sp-phase .body-s{padding:var(--space-2) var(--space-5) var(--space-5);color:var(--ink-muted);flex:1}

/* ---------- proof ---------- */
.sp-proof-card .sp-mini{display:block;width:100%;max-width:300px;height:auto;margin-top:var(--space-4)}
.sp-proof-card .body-s{margin-top:var(--space-4)}
.sp-proof-card .card-link{margin-top:var(--space-4)}
.sp-proof-empty{max-width:640px;border-style:dashed}

/* ---------- mid CTA ---------- */
.sp-mid{padding:var(--space-6) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(60% 140% at 85% 50%,rgba(185,138,46,.12),transparent 70%),var(--surface-raised)}
.sp-mid-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
.sp-mid-inner .body{flex:1 1 320px;color:var(--ink-muted)}

/* ---------- why me ---------- */
.sp-why{display:grid;gap:var(--space-7);align-items:start}
@media(min-width:900px){.sp-why{grid-template-columns:280px 1fr}}
.sp-why-photo{margin:0;max-width:280px}
.sp-why-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 0 10px var(--surface-sunken)}
.sp-why .h1{margin:var(--space-2) 0 var(--space-4)}
.sp-why .body+.body{margin-top:var(--space-3)}
.sp-badges{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.sp-badges li{font:600 14px/20px var(--font-sans);padding:6px 14px;border:1px solid var(--brass);border-radius:var(--radius-pill);color:var(--brass-ink)}
.sp-why-quote{margin-top:var(--space-5)}
.sp-why .body-s{margin-top:var(--space-4)}

/* ---------- fit ---------- */
.sp-fit ul{margin-top:var(--space-4);display:grid;gap:var(--space-3)}
.sp-fit li{position:relative;padding-left:30px}
.sp-fit li::before{position:absolute;left:0;top:0;width:20px;text-align:center;font-weight:700}
.sp-fit-yes{border-top:2px solid var(--yield)}
.sp-fit-yes li::before{content:"✓";color:var(--yield)}
.sp-fit-no li{color:var(--ink-muted)}
.sp-fit-no li::before{content:"–";color:var(--border-strong)}

/* ---------- pricing ---------- */
.sp-price{display:grid;gap:var(--space-7)}
@media(min-width:960px){.sp-price{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr)}}
.sp-price .list{margin-top:var(--space-4);display:grid;gap:var(--space-2)}
.sp-price-call{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line)}
.sp-models{display:grid;gap:var(--space-4);grid-template-columns:1fr}
@media(min-width:640px){.sp-models{grid-template-columns:repeat(3,1fr)}}
.sp-models .card{display:flex;flex-direction:column;border-radius:var(--radius-md)}
.sp-models .h4{margin-top:var(--space-3)}
.sp-models .body-s{margin-top:var(--space-2);color:var(--ink-muted);flex:1}
.sp-model-btn{margin-top:var(--space-5);width:100%}

/* ---------- compare ---------- */
.sp-compare th.sp-me,.sp-compare td.sp-me{background:rgba(14,59,74,.05);box-shadow:inset 1px 0 0 var(--brand),inset -1px 0 0 var(--brand)}
.sp-compare thead th.sp-me{color:var(--brand);box-shadow:inset 1px 0 0 var(--brand),inset -1px 0 0 var(--brand),inset 0 2px 0 var(--brand)}
.sp-compare tbody tr:last-child td.sp-me{box-shadow:inset 1px 0 0 var(--brand),inset -1px 0 0 var(--brand),inset 0 -1px 0 var(--brand)}

/* ---------- merged-keyword H2s ---------- */
#more{padding-bottom:0}
.sp-extra .h2{margin:var(--space-2) 0 var(--space-3)}
.sp-extra .body-s{margin-top:var(--space-3)}

/* ---------- FAQ (site accordion, numbered) ---------- */
.sp-faq{max-width:880px}
.sp-faq-n{flex:none;font-family:var(--font-mono);font-size:13px;color:var(--brand);width:28px}
.sp-faq-q{flex:1}
.sp-faq .faq-item button{justify-content:flex-start}

/* ---------- related ---------- */
.sp-related .card{display:flex;flex-direction:column;gap:var(--space-2);border-radius:var(--radius-md)}
.sp-related .body-s{color:var(--ink-muted);flex:1}
.sp-also{margin-top:var(--space-6);max-width:880px}

/* ---------- stats band + final CTA ---------- */
.sp-stats{padding:var(--space-7) 0;border-top:1px solid var(--line)}
.sp-stats ul{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
@media(min-width:900px){.sp-stats ul{grid-template-columns:repeat(4,1fr)}}
.sp-stats b{display:block;font-size:clamp(36px,5vw,52px);line-height:1.05;font-weight:700;color:var(--brand)}
.sp-stats span{display:block;margin-top:var(--space-2);font-size:15px;line-height:21px;color:var(--ink-muted)}
.sp-final{position:relative;overflow:hidden;text-align:center}
.sp-final-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);max-width:760px}
.sp-final-inner .btn-row{justify-content:center;margin-top:var(--space-3)}
.sp-final em{font-style:italic;font-weight:400;color:var(--brass)}
.sp-final .body-s{opacity:.85}
.sp-final .body-s a{color:inherit}
.sp-final-rings{position:absolute;left:50%;top:50%;width:620px;height:620px;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(255,255,255,.18);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.02);pointer-events:none}
.sp-btn-ghost{color:var(--ink-inverse);border-color:rgba(255,255,255,.5)}
.sp-btn-ghost:hover{border-color:var(--ink-inverse)}
.sp-author{padding:var(--space-5) 0}

/* ---------- hub ---------- */
.sp-hub-nav{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.sp-hub-nav .chip{display:inline-flex;align-items:center;text-decoration:none}
.sp-hub-group .grid>li{display:flex}
.sp-hub-group .grid>li>.card{flex:1}
.sp-soon{opacity:.7;border-style:dashed}

@media(prefers-reduced-motion:reduce){
  .js-motion .reveal .sp-draw{stroke-dashoffset:0;transition:none}
  .js-motion .reveal .sp-glow,.js-motion .reveal .sp-flag,.js-motion .reveal .sp-fade,.js-motion .reveal .sp-ripple,.sp-phase-path{opacity:1;transform:none;transition:none}
}

/* ---------- split graphic rows ---------- */
.sp-row{fill:var(--surface-raised);stroke:var(--line);stroke-width:1}
.sp-text-line-s{stroke-width:5}

/* ---------- "How I'd approach it" (no proof yet) ---------- */
.sp-approach{display:grid;gap:var(--space-6)}
@media(min-width:960px){.sp-approach{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}}
.sp-approach-steps{display:grid;gap:var(--space-4)}
.sp-approach-steps li{display:flex;gap:var(--space-4);padding:var(--space-4) var(--space-5);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised)}
.sp-approach-n{flex:none;font-family:var(--font-mono);font-size:14px;line-height:27px;color:var(--brand)}
.sp-approach-measure{border-radius:var(--radius-md);border-top:2px solid var(--brass)}
.sp-approach-measure .list{margin-top:var(--space-4);display:grid;gap:var(--space-2)}
.sp-own{margin-top:var(--space-5);padding-top:var(--space-3);border-top:1px solid var(--line)}

/* ---------- industries we cover (parent pages) ---------- */
.sp-ind-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sp-ind-list a{display:inline-flex;min-height:44px;align-items:center;padding:8px 16px;border:1px solid var(--line);border-radius:var(--radius-pill);text-decoration:none;color:var(--ink)}
.sp-ind-list a:hover{border-color:var(--brand)}

/* services hub: cut-out portrait beside the intro */
.sp-hub-photo{margin:0;justify-self:center}
.sp-hub-photo img{display:block;width:100%;max-width:380px;height:auto;border-radius:50%;background:var(--surface-sunken)}
@media(max-width:959px){.sp-hub-photo{display:none}}