/* service-page.css — shared rich layout + animations for Toughjobs service pages */

/* ── Section scaffolding ─────────────────────────────────────────────── */
.sp section{padding:clamp(72px,9vw,128px) 0;position:relative;overflow:hidden}
.sp .container{max-width:var(--container);margin:0 auto;padding:0 22px;position:relative;z-index:2}
header .container{padding:0}
.sp .bg-dark{background:#0B1326;background-image:url('assets/blueprint-bg-darker.webp');background-attachment:fixed;background-size:cover;background-position:center;color:var(--white)}
.sp .bg-navy{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);background-image:url('assets/blueprint-background.webp');background-attachment:fixed;background-size:cover;background-position:center;color:var(--white)}
.sp .bg-light{background:#F4F5F7;color:var(--ink);background-image:radial-gradient(circle at 1px 1px,rgba(10,15,28,.08) 1px,transparent 1px);background-size:24px 24px;background-position:0 0,12px 12px}
.sp .bg-accent2{background:linear-gradient(160deg,var(--accent2) 0%,#124a9e 100%);background-image:url('assets/blueprint-background.webp');background-attachment:fixed;background-size:cover;background-position:center;background-blend-mode:multiply;color:var(--white)}

/* halftone / blueprint texture */
.sp .tex{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5}
.sp .tex-dots{background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.4px);background-size:22px 22px}
.sp .tex-dots-d{background-image:radial-gradient(rgba(10,15,28,.10) 1.4px,transparent 1.4px);background-size:22px 22px}

/* ── Head row with optional fist-logo accent (canonical, from print-collateral.html) ── */
.sp .pc-headrow{display:flex;align-items:center;gap:clamp(16px,2vw,32px);margin-bottom:34px}
.sp .pc-headrow>.head{flex:0 1 auto;min-width:0;margin-bottom:0}
.sp .pc-logo-slot{flex:1 1 auto;display:flex;align-items:flex-start;justify-content:center;align-self:flex-start}
.sp .pc-title-logo{width:clamp(96px,10vw,152px);height:auto;transform:translateY(-14%);filter:drop-shadow(0 14px 26px rgba(0,0,0,.35))}
@media(max-width:1200px){.sp .pc-logo-slot{display:none}}
@media(max-width:880px){.sp .pc-headrow{flex-direction:column;align-items:flex-start;gap:22px}.sp .pc-logo-slot{display:none}}
.sp .tex-grid{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px}
.sp .edge-accent{position:absolute;top:0;left:0;width:100%;height:6px;background:repeating-linear-gradient(45deg,var(--accent) 0 8px,var(--accent2) 8px 16px);z-index:3}
@media(min-width:881px){.sp .edge-accent{height:26px}}

.sp .eyebrow{font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:13px}
.sp .display{font-family:"Archivo Black","Archivo",sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.94;text-wrap:balance}
.sp .lede{font-size:clamp(16px,1.4vw,19px);line-height:1.6;max-width:640px}
.sp .muted{opacity:.78}
.sp .accent{color:var(--accent)}
.sp .accent2c{color:var(--accent2)}

/* ── Hero split (text left / image right) ───────────────────────────── */
.sp .hero .container{display:block;position:relative;z-index:2}
.sp .hero-text{max-width:60%;min-width:0}
.sp .hero-img-slot{position:absolute;left:60%;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;padding:clamp(24px,4vw,56px) clamp(24px,3vw,48px)}
/* halftone dot matrix fading in at the bottom of every service hero */
.sp .hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.16) 1.7px,transparent 1.9px),radial-gradient(rgba(255,255,255,.09) 1.1px,transparent 1.3px);background-size:18px 18px,18px 18px;background-position:0 0,9px 9px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.28) 40%,rgba(0,0,0,.7) 72%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.28) 40%,rgba(0,0,0,.7) 72%,#000 100%)}
.sp .hero-img-slot .num{font-family:"Archivo Black",sans-serif;font-size:clamp(40px,5vw,64px);line-height:1;color:rgba(255,255,255,.22)}
.sp .hero-img-slot .lbl{font-family:"Archivo",sans-serif;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sp .hero-img-slot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center;position:relative;z-index:1}
@media(max-width:1024px){
  .sp .hero .container{display:block}
  .sp .hero-text{max-width:100%}
  .sp .hero-img-slot{display:none!important}
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.sp .hero{padding:clamp(80px,10vw,150px) 0 clamp(60px,7vw,96px);position:relative;overflow:visible}
.sp .hero h1{font-size:clamp(36px,4.6vw,72px);margin:18px 0 26px}
.sp .hero .lede{color:rgba(255,255,255,.82);margin-bottom:40px}
.sp .kpis{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(28px,5vw,72px);margin-top:54px}
.sp .kpi .num{font-family:"Archivo Black",sans-serif;font-size:clamp(40px,5.4vw,72px);line-height:1;color:var(--accent2);white-space:nowrap}
.sp .kpi .num .suf{color:var(--accent)}
.sp .kpi .num .suf:not(:first-child){font-size:0.4em;letter-spacing:.02em}
.sp .kpi .lbl{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.7;margin-top:10px;max-width:170px}
.sp .bg-dark .accent2c,
.sp .bg-navy .accent2c,
.sp .bg-accent2 .accent2c{color:var(--accent)}
.sp .bg-dark .kpi .num,
.sp .bg-navy .kpi .num,
.sp .bg-accent2 .kpi .num{color:var(--white)}
.sp .bg-dark .kpi .num .suf,
.sp .bg-navy .kpi .num .suf,
.sp .bg-accent2 .kpi .num .suf{color:var(--accent)}
.sp .bg-dark [style*="color:var(--accent2)"],
.sp .bg-navy [style*="color:var(--accent2)"],
.sp .bg-accent2 [style*="color:var(--accent2)"],
.sp .bg-dark [style*="color:#002768"],
.sp .bg-navy [style*="color:#002768"],
.sp .bg-accent2 [style*="color:#002768"]{color:var(--accent)!important}
@media(max-width:680px){.sp .kpis{grid-template-columns:1fr 1fr;gap:28px}}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.sp .btn{display:inline-flex;align-items:center;gap:10px;padding:18px 30px;font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:.06em;font-size:14px;text-transform:uppercase;text-decoration:none;background:var(--accent);color:var(--white);border:0;cursor:pointer;transition:transform .15s,box-shadow .15s}
.sp .btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,0,0,.85)}
.sp .btn.alt{background:var(--accent2)}
.sp .btn.ghost{background:transparent;border:2px solid currentColor}
.sp .btn.ghost:hover{box-shadow:5px 5px 0 var(--accent)}

/* ── Section heading block ───────────────────────────────────────────── */
.sp .head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.sp .head .eyebrow{color:var(--accent);margin-bottom:14px}
.sp .bg-light .head .eyebrow{color:var(--accent)}
.sp .head h2{font-size:clamp(34px,4.4vw,62px);margin:0 0 18px}
.sp .head .lede{color:inherit}
.sp .bg-light .head .lede{color:#3a4254}

/* ── Workflow diagram ────────────────────────────────────────────────── */
.sp .flow{display:grid;grid-template-columns:repeat(var(--steps,4),1fr);gap:0;position:relative;margin-top:24px}
.sp .flow .step{position:relative;padding:0 18px}
.sp .flow .step:before{content:"";position:absolute;top:30px;left:0;right:0;height:3px;background:rgba(10,15,28,.12);z-index:0}
.sp .bg-dark .flow .step:before,.sp .bg-navy .flow .step:before{background:rgba(255,255,255,.14)}
.sp .flow .step:first-child:before{left:50%}
.sp .flow .step:last-child:before{right:50%}
.sp .flow .node{position:relative;z-index:2;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Archivo Black",sans-serif;font-size:22px;color:#fff;background:var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.25);margin-bottom:22px}
.sp .flow .step:nth-child(even) .node{background:var(--accent2)}
.sp .flow .step h4{font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:15px;margin:0 0 8px}
.sp .flow .step p{font-size:14px;line-height:1.5;margin:0;opacity:.8}
@media(max-width:820px){.sp .flow{grid-template-columns:1fr 1fr;gap:36px 0}.sp .flow .step:before{display:none}}
@media(max-width:480px){.sp .flow{grid-template-columns:1fr}}

/* ── Earn cards ──────────────────────────────────────────────────────── */
.sp .earn{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sp .earn .card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);padding:32px 28px;position:relative;overflow:hidden}
.sp .earn .card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--accent)}
.sp .earn .card:nth-child(even):before{background:var(--accent2)}
.sp .earn .card .ic{font-family:"Archivo Black",sans-serif;font-size:28px;color:var(--accent2);margin-bottom:14px}
.sp .bg-navy .earn .card .ic,.sp .bg-dark .earn .card .ic,.sp .bg-accent2 .earn .card .ic{color:var(--red,#C8262A)}
.sp .earn .card h4{font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:18px;margin:0 0 10px}
.sp .earn .card p{font-size:14px;line-height:1.6;margin:0;opacity:.82}
@media(max-width:1024px){.sp .earn{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.sp .earn{grid-template-columns:1fr}}

/* ── Comparison table ────────────────────────────────────────────────── */
.sp .cmp{width:100%;border-collapse:collapse;font-size:15px;background:#fff;box-shadow:0 24px 60px rgba(10,15,28,.12)}
.sp .cmp th,.sp .cmp td{padding:18px 20px;text-align:left;border-bottom:1px solid #e7e9ee}
.sp .cmp thead th{font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:#fff;background:#002768}
.sp .cmp thead th.tj{background:var(--ink);color:#fff}
.sp .cmp td.rowlbl{font-weight:700;color:var(--ink)}
.sp .cmp td.tj{background:rgba(200,38,42,.06);font-weight:700;color:var(--ink)}
.sp .cmp td.tj .yes{color:var(--accent)}
.sp .cmp .x{color:#b9bfca;font-weight:700}
.sp .cmp tbody tr:last-child td{border-bottom:0}
.sp .cmp .tjhead{display:flex;align-items:center;gap:8px}
.sp .cmp-wrap{overflow-x:auto}
.sp .cmp-note{font-size:13px;color:#6a7283;margin-top:14px}

/* ── ROI calculator ──────────────────────────────────────────────────── */
.sp .roi{display:grid;grid-template-columns:1fr 1fr;gap:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14)}
.sp .roi .controls{padding:clamp(28px,3.4vw,44px)}
.sp .roi .out{padding:clamp(28px,3.4vw,44px);background:var(--accent2);display:flex;flex-direction:column;justify-content:center;gap:22px}
.sp .roi .field{margin-bottom:26px}
.sp .roi .field:last-child{margin-bottom:0}
.sp .roi .field label{display:flex;justify-content:space-between;align-items:baseline;font-family:"Archivo",sans-serif;font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:12px}
.sp .roi .field label .val{font-family:"Archivo Black",sans-serif;font-size:20px;color:var(--accent2)}
.sp .bg-dark .roi .field label .val,
.sp .bg-navy .roi .field label .val,
.sp .bg-accent2 .roi .field label .val{color:var(--accent)}
.sp .roi input[type=range]{width:100%;-webkit-appearance:none;height:6px;border-radius:3px;background:rgba(255,255,255,.18);outline:none}
.sp .roi input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.sp .roi input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid #fff}
.sp .roi .out .big{font-family:"Archivo Black",sans-serif;font-size:clamp(40px,5vw,66px);line-height:.95}
.sp .roi .out .reslbl{font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;opacity:.85;margin-top:6px}
.sp .roi .out .divline{height:1px;background:rgba(255,255,255,.25)}
.sp .roi .out .sub{font-size:14px;line-height:1.5;opacity:.9}
@media(max-width:820px){.sp .roi{grid-template-columns:1fr}}

/* ── Testimonials ────────────────────────────────────────────────────── */
.sp .tess{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sp .tess .t{background:#0E1626;border:1px solid rgba(255,255,255,.08);border-left:5px solid var(--accent);padding:34px 32px;box-shadow:0 14px 36px rgba(10,15,28,.18)}
.sp .tess .t:nth-child(even){border-left-color:var(--accent2)}
.sp .tess .t h3{color:#fff;font-family:"Archivo Black",sans-serif;text-transform:uppercase;margin:0 0 10px}
.sp .tess .t .q{font-size:18px;line-height:1.55;color:#fff;font-weight:500;font-style:normal;margin:0 0 20px}
.sp .tess .t .who{display:flex;align-items:center;gap:14px}
.sp .tess .t .av{width:50px;height:50px;border-radius:50%;background:rgba(200,38,42,.10);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1}
.sp .tess .t:nth-child(even) .av{background:rgba(31,111,235,.10)}
.sp .tess .t .nm{font-weight:800;font-size:14px;color:#fff}
.sp .tess .t .rl{font-size:13px;color:rgba(255,255,255,.6)}
@media(max-width:960px){.sp .tess{grid-template-columns:1fr}}

/* ── CTA band ────────────────────────────────────────────────────────── */
.sp .ctaband{text-align:center}
.sp .ctaband h2{font-size:clamp(34px,4.6vw,68px);margin:0 0 18px;color:#fff}
.sp .ctaband p{font-size:18px;line-height:1.6;max-width:620px;margin:0 auto 36px;color:rgba(255,255,255,.92)}
.sp .ctaband .btn{background:var(--red)}
.sp .ctaband .btn:hover{box-shadow:5px 5px 0 rgba(0,0,0,.4)}
.sp .bg-red.ctaband .btn{background:#fff;color:var(--red)}
.sp .bg-red.ctaband .btn:hover{box-shadow:5px 5px 0 rgba(10,15,28,.55)}

/* ── Scroll reveal ───────────────────────────────────────────────────── */
.sp .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.9,.3,1),transform .7s cubic-bezier(.22,.9,.3,1)}
.sp .reveal.in{opacity:1;transform:none}
.sp .reveal.d1{transition-delay:.08s}.sp .reveal.d2{transition-delay:.16s}.sp .reveal.d3{transition-delay:.24s}.sp .reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.sp .reveal{opacity:1;transform:none;transition:none}}


/* ── Universal table header bar: navy band, white caps type ── */
.sp table thead th{font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:#fff;background:#002768;padding:14px 18px;text-align:left}
.sp table thead th.tj{background:var(--ink)}

/* ── Tall blueprint sections: span full width, tile vertically ── */
.sp .td-analysis,.td-analysis{background-size:100% auto;background-repeat:repeat-y;background-position:top center}

/* ── Floating-tool host containment (real tools mount via flying-tools.js) ── */
.sp .bg-white,.sp .bg-light,.sp .light-section,.sp .on-light,.sp .blurbs-section,.td-analysis{position:relative;overflow:hidden}
.td-analysis-inner{padding:0 22px}

/* Shared utilities (replace per-page one-off classes) */
.sp .kpi .num.num-word{font-size:clamp(20px,2.7vw,38px)}
.sp .flow.steps-4{--steps:4}
.sp .btn-row{margin-top:24px}