/* THE DIVIDED LINE — service-detail (owned-stack layer) page components. Load AFTER divided-line.css */
/* reuses shared .sec/.wrap/.eyebrow/.display/.lead/.btn/.split/.ovr*/.diag/.final/.foot */
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--mut);text-transform:uppercase;margin-bottom:18px}
.crumb a{color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--gold)}
.crumb .sep{color:var(--gold);margin:0 9px}
.crumb .here{color:var(--bone)}
.svc-hero{background:var(--ink);color:var(--bone);
  background-image:radial-gradient(900px 460px at 86% -14%,rgba(200,150,44,.12),transparent 60%);padding:58px 0 70px}
.svc-hero .lx-badge{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:3px;
  color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:7px 16px;margin-bottom:20px}
.svc-hero .eyebrow{color:var(--gold)}
.svc-hero h1{font-size:clamp(42px,6.4vw,82px);margin:0 0 20px}
.svc-hero .lead{color:#cfd4db;max-width:60ch}
.svc-hero .swap{font-family:var(--mono);font-size:13px;letter-spacing:.4px;margin:24px 0 0;color:var(--mut)}
.svc-hero .swap .rent{text-decoration:line-through;text-decoration-color:#4b515c}
.svc-hero .swap .arrow{color:var(--gold);margin:0 10px}
.svc-hero .swap .own{color:var(--bone)}
.svc-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
/* capability grid */
.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(20,23,29,.12);
  border:1px solid rgba(20,23,29,.12);margin-top:36px}
.cap{background:var(--bone);padding:26px 26px 28px}
.cap .cx{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--gold);display:block;margin-bottom:10px}
.cap h4{font-family:'Highland';font-weight:700;font-size:19px;letter-spacing:.3px;margin:0 0 7px}
.cap p{font-size:14.5px;color:var(--slate);line-height:1.55;margin:0}
/* owned-vs-rented panel, centred on the page */
.ovr-center{max-width:780px;margin:34px auto 0}
.ovr-center .ovr{border-radius:12px}
/* where it runs — chips */
.runs{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.runs a{display:inline-block;text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.5px;
  color:var(--slate);border:1px solid rgba(20,23,29,.18);border-radius:999px;padding:8px 15px}
.runs a:hover{border-color:var(--gold);color:var(--ink)}
.runs a .star{color:var(--gold);margin-left:5px}
@media(max-width:920px){ .cap-grid{grid-template-columns:1fr} }

/* ---- Optional split hero with media (opt-in via .svc-hero.has-media) — added per handoff §6 ---- */
.svc-hero.has-media .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.svc-hero .hero-media{position:relative;border-radius:14px;overflow:hidden;background:var(--slate);aspect-ratio:4/3}
.svc-hero .hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-hero .hero-media .ph-note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);background:repeating-linear-gradient(45deg,#2c313c,#2c313c 12px,#262b34 12px,#262b34 24px)}
@media(max-width:820px){ .svc-hero.has-media .wrap{grid-template-columns:1fr} }
