/* ============================================================
   FPA // service-page shared components
   Used by capability.html (and reusable by other service pages).
   Builds on styles.css tokens — load styles.css first.
   ============================================================ */

.svc-page{padding-top:62px}

/* ---- breadcrumbs ---- */
.crumbs{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);text-shadow:none;margin-bottom:26px;flex-wrap:wrap}
.crumbs a{color:var(--dim);border-bottom:1px solid transparent;transition:color .12s,border-color .12s}
.crumbs a:hover{color:var(--phos);border-color:var(--phos)}
.crumbs .sep{color:var(--faint)}

/* ---- hero ---- */
.svc-hero{border-bottom:1px solid var(--border);background:var(--bg-2);padding:72px 0 0}
.svc-hero .kick{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-shadow:none;margin-bottom:18px}
.svc-hero h1{font-size:clamp(34px,5.6vw,72px);color:var(--phos);text-shadow:var(--glow);line-height:.98}
.svc-hero .tagline{color:var(--phos);text-shadow:var(--glow-soft);font-size:clamp(15px,1.6vw,20px);
  margin-top:22px;max-width:54ch;line-height:1.6}
.svc-hero .acts{display:flex;gap:14px;margin:32px 0 56px;flex-wrap:wrap}
.svc-hero .shot{margin-bottom:-1px}

/* ---- hero variant: full-bleed background photo + text overlay (index style) ---- */
.svc-hero.hero-photo{position:relative;min-height:92vh;display:flex;align-items:center;
  padding:96px 0 64px;overflow:hidden;border-bottom:1px solid var(--border);background:var(--bg)}
.svc-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.svc-hero-bg image-slot{position:absolute;inset:0;width:100%;height:100%;color:var(--dim)}
.svc-hero-bg::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,var(--scan-a)) 3px,rgba(0,0,0,var(--scan-a)) 4px)}
.svc-hero-bg .grade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 16%, rgba(10,10,10,.74) 42%, rgba(10,10,10,.28) 72%, rgba(10,10,10,.6) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,0) 36%)}
.svc-hero.hero-photo .wrap{position:relative;z-index:4;pointer-events:none}
.svc-hero.hero-photo .wrap a,.svc-hero.hero-photo .wrap button{pointer-events:auto}
.svc-hero.hero-photo .tagline{text-shadow:var(--glow-soft),0 1px 12px rgba(0,0,0,.9)}
.svc-hero.hero-photo h1{text-shadow:var(--glow),0 2px 18px rgba(0,0,0,.85)}
.svc-hero.hero-photo .acts{margin-bottom:0}
.svc-hero-tag{position:absolute;right:32px;bottom:24px;z-index:4;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--phos);text-shadow:var(--glow);pointer-events:none}

/* ---- photo slot ---- */
.shot{position:relative;border:1px solid var(--border);overflow:hidden;background:var(--panel)}
.shot image-slot{display:block;width:100%;color:var(--dim)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,var(--scan-a)) 3px,rgba(0,0,0,var(--scan-a)) 4px)}
.shot .cap{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;color:var(--dim);text-shadow:none;
  background:linear-gradient(0deg,rgba(7,8,7,.92),transparent);pointer-events:none}
.shot .corner{position:absolute;z-index:4;width:16px;height:16px;border:1px solid var(--phos);pointer-events:none;opacity:.7}
.shot .corner.tl{top:9px;left:9px;border-right:0;border-bottom:0}
.shot .corner.br{bottom:9px;right:9px;border-left:0;border-top:0}

/* ---- approach band (overview + supporting photo) ---- */
.approach{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.approach .copy h2{font-size:clamp(24px,3vw,38px);color:var(--phos);text-shadow:var(--glow)}
.approach .copy p{color:var(--dim);text-shadow:var(--glow-soft);font-size:14.5px;line-height:1.7;margin-top:18px;max-width:54ch}

/* ---- deliver grid ---- */
.deliver{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dcard{border:1px solid var(--border);background:var(--panel);padding:20px;transition:border-color .15s,background .15s}
.dcard:hover{border-color:var(--phos);background:var(--panel-2)}
.dcard .dn{font-size:11px;color:var(--muted);text-shadow:none;letter-spacing:.1em}
.dcard h3{font-size:14.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--phos);margin:10px 0 10px}
.dcard p{color:var(--dim);text-shadow:var(--glow-soft);font-size:13px;line-height:1.6}

/* ---- process strip ---- */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--border)}
.pstep{padding:22px 20px;border-right:1px solid var(--border);position:relative}
.pstep:last-child{border-right:none}
.pstep .pn{font-size:12px;color:var(--muted);letter-spacing:.16em;text-shadow:none}
.pstep h4{font-size:14px;margin:12px 0 9px;text-transform:uppercase}
.pstep p{color:var(--dim);font-size:12.5px;text-shadow:var(--glow-soft);line-height:1.55}
.pstep .arrow{position:absolute;right:-9px;top:26px;color:var(--muted);z-index:2;background:var(--bg);padding:0 2px;text-shadow:none}
.process.on-dark .pstep .arrow{background:var(--bg-2)}

/* ---- spec panel ---- */
.spec .row{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.spec .row:last-child{border-bottom:none}
.spec .row .k{color:var(--muted);text-shadow:none;font-size:12px;letter-spacing:.08em}
.spec .row .v{color:var(--phos)}
.spec .cta-box{margin-top:18px;border:1px solid var(--phos);padding:16px;font-size:13px}
.spec .cta-box p{color:var(--dim);text-shadow:var(--glow-soft);margin-bottom:13px}

/* ---- related services ---- */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ocard{border:1px solid var(--border);background:var(--panel);padding:16px;transition:border-color .15s,background .15s;display:block}
.ocard:hover{border-color:var(--phos);background:var(--panel-2)}
.ocard .oix{font-size:11px;color:var(--muted);text-shadow:none;letter-spacing:.1em}
.ocard .ott{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:8px;color:var(--phos)}
.ocard .od{font-size:12.5px;color:var(--dim);text-shadow:var(--glow-soft);margin-top:9px;line-height:1.55}
.ocard .omore{font-size:11.5px;color:var(--dim);margin-top:12px}
.ocard:hover .omore{color:var(--phos)}

/* ---- CTA band ---- */
.svc-cta{padding:78px 0}
.svc-cta .box{border:1px solid var(--phos);background:var(--panel);padding:clamp(26px,4vw,52px);
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;box-shadow:var(--glow-soft)}
.svc-cta h3{font-size:clamp(22px,3vw,34px);color:var(--phos);text-shadow:var(--glow)}
.svc-cta p{color:var(--dim);text-shadow:var(--glow-soft);margin-top:12px;max-width:48ch;font-size:14px}

/* ---- two-column body (deliver + spec) ---- */
.body-grid{display:grid;grid-template-columns:1fr 320px;gap:30px;align-items:start}
.body-grid .spec{position:sticky;top:84px}

@media(max-width:1000px){
  .deliver{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .pstep .arrow{display:none}
  .approach{grid-template-columns:1fr;gap:26px}
  .body-grid{grid-template-columns:1fr}
  .body-grid .spec{position:static}
}
@media(max-width:680px){
  .deliver,.related-grid,.process{grid-template-columns:1fr}
  .pstep{border-right:none;border-bottom:1px solid var(--border)}
  .pstep:last-child{border-bottom:none}
}