/* work.css — #/work · the operational AI diagnostic (conversion route).
   One sharp path: problem → offer → how it runs → proof → CTA.
   Same locked language as the rest of the site; gold = active/fired only,
   which is exactly what a CTA is. */

.wk-main{ position:relative; z-index:5; max-width:1100px; margin:0 auto;
  padding:150px 64px 60px; display:flex; flex-direction:column; gap:54px; }

/* nav accent: the one commercial door is findable, not shouting */
.topnav a[data-route="work"]{ color:var(--gold-dim); }
.topnav a[data-route="work"]:hover{ color:var(--gold); }
.topnav a[data-route="work"].current{ color:var(--gold-hi); }

/* ── head ─────────────────────────────────────────────────────────── */
.wk-head{ display:flex; flex-direction:column; gap:14px; max-width:780px; }
.wk-head .sub{ color:var(--gold); font-size:12px; letter-spacing:.3em; text-transform:uppercase; }
.wk-head .ttl{ font-size:clamp(34px,4.4vw,52px); font-weight:500; color:var(--ink); line-height:1.08; letter-spacing:-0.01em; }
.wk-head .ttl .dot{ color:var(--gold); }
.wk-head .intro{ color:var(--ink-dim); font-size:16.5px; line-height:1.7; margin:6px 0 0; text-wrap:pretty; }
.wk-head .intro .em{ color:var(--gold-hi); }
.wk-status{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.wk-why{ font-size:13px; line-height:1.65; color:var(--faint); max-width:720px; margin:14px 0 0;
  border-left:1px solid var(--gold-dim); padding-left:14px; text-wrap:pretty; }

/* ── the ONE living element: leak -> 0, drained on scroll-in by spa-work.js.
   The offer's thesis made visible; gold rides only the live draining segment. ── */
.wk-leak{ margin:18px 0 4px; max-width:560px; display:flex; flex-direction:column; gap:13px; }
.wk-leak-cap{ display:flex; align-items:center; gap:11px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; }
.wk-leak-cap .wk-leak-k{ color:var(--ink-dim); }
.wk-leak-cap .wk-leak-arrow{ color:var(--gold-dim); }
.wk-leak-cap .wk-leak-z{ color:var(--gold-hi); }
/* the rail + draining filament use the shared .fil-rail / .fil-fill atom (styles.css) */
.wk-leak-read{ display:flex; align-items:baseline; gap:10px; }
.wk-leak-val{ font-family:var(--serif); font-size:24px; color:var(--gold-hi);
  font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.wk-leak-unit{ font-size:11px; letter-spacing:.04em; color:var(--faint); }

/* ── decision cluster: cost + reassurance + action, co-located at the close ── */
.wk-decide{ display:flex; flex-direction:column; gap:28px;
  border-top:1px solid var(--line-soft); padding-top:42px; }
/* the offer lead = the FREE scope (no public price — pricing is scoped privately on the
   call). The one gold beat is the .em on "free 20-minute scope" (the offer/decision). */
.wk-offer{ display:flex; flex-direction:column; gap:11px; max-width:620px; }
.wk-offer-lead{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,40px);
  line-height:1.06; letter-spacing:-0.01em; color:var(--ink); }
.wk-offer-lead .em{ color:var(--gold-hi); }
.wk-offer-sub{ font-size:13.5px; line-height:1.6; color:var(--ink-dim); max-width:540px; }

/* ── deliverables + steps ─────────────────────────────────────────── */
.wk-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; }
.wk-label{ font-size:10px; letter-spacing:.22em; color:var(--faint); text-transform:uppercase; margin-bottom:18px; }
.wk-deliver ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.wk-deliver li{ position:relative; padding-left:26px; font-size:14px; line-height:1.65; color:var(--ink-dim); }
.wk-deliver li::before{ content:""; position:absolute; left:0; top:11px; width:13px; height:1px; background:var(--gold-dim); }
.wk-deliver li b{ color:var(--ink); font-weight:500; }

.wk-steps{ display:flex; flex-direction:column; }
.wk-step{ display:grid; grid-template-columns:54px 1fr; gap:18px; padding:16px 0; align-items:start; }
.wk-step + .wk-step{ border-top:1px dashed var(--line-soft); }
.wk-step .callnum{ width:42px; height:42px; font-size:13px; }
.wk-step .st-name{ font-size:14px; color:var(--ink); margin-bottom:5px; letter-spacing:.05em; }
.wk-step .st-desc{ font-size:13px; line-height:1.62; color:var(--ink-dim); }

/* ── proof strip ──────────────────────────────────────────────────── */
.wk-proof{ border:1px dashed var(--line-soft); border-radius:10px; padding:26px 30px;
  background:linear-gradient(180deg, rgba(15,19,29,0.95), rgba(9,12,18,0.97));
  box-shadow:inset 0 1px 0 rgba(234,240,251,0.04), 0 18px 44px -30px rgba(0,0,0,0.9);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:34px; align-items:center; }
.wk-proof p{ margin:0; font-size:14.5px; line-height:1.7; color:var(--ink-dim); max-width:620px; text-wrap:pretty; }
.wk-proof p b{ color:var(--ink); font-weight:500; }
.wk-proof .num{ color:var(--gold-hi); }
.wk-metrics{ display:flex; flex-direction:column; gap:12px; }
.wk-metric{ display:flex; align-items:baseline; gap:10px; white-space:nowrap; }
.wk-metric .mv{ font-size:23px; color:var(--gold-hi); }
.wk-metric .ml{ font-size:10.5px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase; }

/* ── guarantee ────────────────────────────────────────────────────── */
.wk-guarantee{ display:flex; gap:14px; align-items:baseline; font-size:15px;
  color:var(--ink); max-width:680px; line-height:1.6; }
.wk-guarantee .tick{ width:8px; height:8px; flex:none;
  border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold);
  transform:rotate(45deg) translateY(2px); }

/* ── CTA ──────────────────────────────────────────────────────────── */
.wk-cta{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
/* refined line-and-light CTA — matches the hero language (no solid/rounded button) */
.cta-btn{ position:relative; display:inline-flex; align-items:center; gap:12px; isolation:isolate;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-hi); padding:15px 26px; border:1px solid var(--gold-dim); background:transparent; overflow:hidden;
  transition:color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.cta-btn::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(130% 200% at 0% 50%, rgba(212,162,76,0.16), rgba(212,162,76,0) 62%);
  opacity:.55; transition:opacity .35s var(--ease); }
.cta-btn::after{ content:""; position:absolute; top:5px; right:5px; width:8px; height:8px;
  border-top:1px solid var(--gold); border-right:1px solid var(--gold); opacity:.55; transition:opacity .3s var(--ease); }
.cta-btn:hover{ color:#fff; border-color:var(--gold);
  box-shadow:0 0 32px -8px var(--gold-glow), inset 0 0 28px -16px var(--gold-glow); }
.cta-btn:hover::before{ opacity:1; } .cta-btn:hover::after{ opacity:1; }
.cta-alt{ font-size:12.5px; color:var(--faint); }
.cta-alt a{ color:var(--ink-dim); border-bottom:1px dotted var(--gold-dim); transition:color .2s var(--ease); }
.cta-alt a:hover{ color:var(--gold); }
.wk-foot-note{ font-size:11px; color:var(--faint); letter-spacing:.05em; }

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:760px){
  .wk-main{ padding:96px 22px 40px; gap:40px; }
  .wk-grid{ grid-template-columns:1fr; gap:34px; }
  .wk-proof{ grid-template-columns:1fr; gap:22px; }
  .wk-metrics{ flex-direction:row; flex-wrap:wrap; gap:18px; }
  .wk-leak{ max-width:none; }
  .wk-decide{ gap:24px; padding-top:34px; }
}