/* ============================================================
   ob-services.css — Services-page-specific layout.
   Loads AFTER the shared ob-home.css (same tokens, chrome, hero,
   buttons, CTA). Only the expanded six-service ledger is new here.
   ============================================================ */

/* The Services headline is short — give it a little more presence */
.hero h1{max-width:18ch}

/* ---------- Six services: ledger language, expanded to breathe ---------- */
.services-section{padding:0 var(--pad);border-bottom:1px solid var(--line)}
.services{margin:0}

.svc{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(18px,4vw,56px);align-items:start;
  padding:clamp(40px,6vw,76px) clamp(8px,1.5vw,20px);
  border-top:1px solid var(--line);
}
.svc:first-child{border-top:0}

/* gold cursor-aware hover glow (same mechanism as the homepage ledger) */
.svc::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:8px;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),var(--accent-hover-weak),transparent 70%);
  transition:opacity .35s var(--ease);
}
.svc:hover::before,.svc:focus-within::before{opacity:1}

.svc__num{
  font-family:var(--font-mono);font-size:clamp(14px,1.4vw,16px);color:var(--muted);
  padding-top:.5em;transition:color .3s var(--ease);
}
.svc:hover .svc__num{color:var(--accent-hover)}

.svc__main{min-width:0}
.svc__name{
  font-size:clamp(26px,3.5vw,42px);line-height:1.04;letter-spacing:-.025em;
  transition:transform .3s var(--ease);
}
.svc:hover .svc__name{transform:translateX(6px)}
.svc__desc{
  color:var(--muted);font-size:clamp(15px,1.55vw,18px);line-height:1.65;
  max-width:64ch;margin-top:clamp(16px,1.8vw,22px);
}

/* capability tags — mono, dot-separated, accent middots */
.svc__tags{
  font-family:var(--font-mono);font-size:clamp(12px,1.25vw,13.5px);
  letter-spacing:.02em;line-height:1.9;color:var(--text);
  max-width:72ch;margin-top:clamp(18px,2vw,26px);
}
.svc__tags i{color:var(--accent);font-style:normal;margin:0 9px;opacity:.85}

/* arrow indicator (gold on hover), like the homepage ledger */
.svc__ar{
  font-family:var(--font-mono);color:var(--accent-hover);
  padding-top:.45em;opacity:0;transform:translateX(-10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.svc:hover .svc__ar{opacity:1;transform:none}

@media (max-width:760px){
  .svc{grid-template-columns:1fr;gap:10px}
  .svc__num{padding-top:0}
  .svc__ar{display:none}
  .svc:hover .svc__name{transform:none}
}
@media (max-width:620px){
  .hero h1{max-width:none}
}

/* ---------- Featured service card (AI Agent Setup) ---------- */
.svc-feature{padding:0 var(--pad) clamp(58px,9vw,110px)}
.svc-feature__card{max-width:var(--max);margin:0 auto;padding:clamp(30px,4vw,52px);border:1px solid var(--accent);border-radius:20px;background:linear-gradient(180deg,var(--accent-weak),transparent 70%),var(--surface)}
.svc-feature__name{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em;margin-top:16px;max-width:26ch;line-height:1.12}
.svc-feature__desc{color:var(--muted);margin-top:16px;max-width:66ch;line-height:1.64}
.svc-feature__link{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--font-mono);font-size:13px;letter-spacing:.05em;color:var(--accent-hover)}
.svc-feature__link .ar{transition:transform .3s var(--ease)}
.svc-feature__link:hover .ar{transform:translateX(4px)}