/* ============================================================
   Antarius — site stylesheet
   Design tokens, base type, marketing chrome, case-study
   layout and the guided-walkthrough rail.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink:#1B1F22; --ink-soft:#586066; --paper:#EEF2F3; --paper-raised:#FFFFFF; --line:#D3DBDC;
  --brand:#1E5F5A; --brand-solid:#1E5F5A; --brand-soft:#DDEBE9;
  --plumberium:#B8672E; --plumberium-solid:#96541F; --plumberium-soft:#F3E3D5;
  --brokerage:#46518C; --brokerage-solid:#38406E; --brokerage-soft:#E4E6F2;
  --field:#9C7F24; --field-solid:#7A6318; --field-soft:#F1E9D2;
  --success:#2E7D4F; --warning:#B8892E; --danger:#B8402E;
  --on-solid:#FFFFFF;
  --shadow:0 1px 2px rgba(27,31,34,.06), 0 10px 26px -14px rgba(27,31,34,.22);
  --radius:12px; --radius-sm:7px;
  --font-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  /* default accent = house brand; overridden inside [data-accent] scopes */
  --accent:var(--brand); --accent-solid:var(--brand-solid); --accent-soft:var(--brand-soft);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDF1F1; --ink-soft:#9FACAC; --paper:#12171A; --paper-raised:#1B2225; --line:#2B3437;
    --brand:#4FB3A8; --brand-solid:#3FA79E; --brand-soft:rgba(79,179,168,.16);
    --plumberium:#E08A45; --plumberium-solid:#D97B34; --plumberium-soft:rgba(224,138,69,.16);
    --brokerage:#8891C9; --brokerage-solid:#7480C2; --brokerage-soft:rgba(136,145,201,.18);
    --field:#D4AF4B; --field-solid:#C79E3A; --field-soft:rgba(212,175,75,.16);
    --success:#4CAF74; --warning:#E0BA55; --danger:#E0654A;
    --on-solid:#0B0F11;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -16px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --ink:#EDF1F1; --ink-soft:#9FACAC; --paper:#12171A; --paper-raised:#1B2225; --line:#2B3437;
  --brand:#4FB3A8; --brand-solid:#3FA79E; --brand-soft:rgba(79,179,168,.16);
  --plumberium:#E08A45; --plumberium-solid:#D97B34; --plumberium-soft:rgba(224,138,69,.16);
  --brokerage:#8891C9; --brokerage-solid:#7480C2; --brokerage-soft:rgba(136,145,201,.18);
  --field:#D4AF4B; --field-solid:#C79E3A; --field-soft:rgba(212,175,75,.16);
  --success:#4CAF74; --warning:#E0BA55; --danger:#E0654A;
  --on-solid:#0B0F11;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -16px rgba(0,0,0,.65);
}

[data-accent="plumberium"]{ --accent:var(--plumberium); --accent-solid:var(--plumberium-solid); --accent-soft:var(--plumberium-soft); }
[data-accent="brokerage"]{ --accent:var(--brokerage); --accent-solid:var(--brokerage-solid); --accent-soft:var(--brokerage-soft); }
[data-accent="field"]{ --accent:var(--field); --accent-solid:var(--field-solid); --accent-soft:var(--field-soft); }

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.015em; text-wrap:balance; margin:0; color:var(--ink); }
p{ margin:0; }
img{ max-width:100%; }
a{ color:inherit; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.muted{ color:var(--ink-soft); }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto; } }

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--brand-solid); color:var(--on-solid);
  padding:.6rem 1rem; z-index:100; border-radius:0 0 var(--radius-sm) 0; font-family:var(--font-display); font-weight:700; }
.skip-link:focus{ left:0; }

/* ---------- shared buttons (also used inside the demo apps) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:var(--radius-sm);
  padding:.55rem .95rem; font-family:var(--font-display); font-weight:700; font-size:.85rem; border:1px solid transparent;
  text-decoration:none; transition:filter .15s, background .15s, border-color .15s; }
.btn-primary{ background:var(--accent-solid); color:var(--on-solid); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:var(--paper-raised); border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--paper); }
.btn-block{ width:100%; }
.btn-lg{ padding:.75rem 1.35rem; font-size:.95rem; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------- layout ---------- */
.wrap{ max-width:1180px; margin:0 auto; padding:0 1.5rem; }
.wrap-narrow{ max-width:860px; margin:0 auto; padding:0 1.5rem; }
section{ scroll-margin-top:80px; }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- site nav ---------- */
.site-nav{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.8rem; padding-bottom:.8rem; flex-wrap:wrap; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:800;
  font-size:1.06rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.brand svg{ color:var(--brand); flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap:.2rem; flex-wrap:wrap; }
.nav-links a{ padding:.45rem .75rem; border-radius:999px; font-family:var(--font-display); font-weight:600;
  font-size:.88rem; color:var(--ink-soft); text-decoration:none; border:1px solid transparent; transition:background .15s,color .15s; }
.nav-links a:hover{ background:var(--paper-raised); color:var(--ink); }
.nav-links a[aria-current="page"]{ background:var(--brand-soft); color:var(--brand); border-color:var(--line); }
.nav-links a.nav-cta{ background:var(--brand-solid); color:var(--on-solid); margin-left:.4rem; }
.nav-links a.nav-cta:hover{ filter:brightness(1.08); background:var(--brand-solid); color:var(--on-solid); }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:5rem 0 3rem; }
.hero-grid-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:38px 38px; opacity:.42; mask-image:linear-gradient(to bottom, black, transparent 90%);
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 90%); }
.hero .wrap{ position:relative; z-index:1; }
.eyebrow{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; font-size:.75rem;
  color:var(--accent); font-weight:600; margin-bottom:1rem; }
.hero h1{ font-size:clamp(2.05rem,4.6vw,3.3rem); line-height:1.1; margin-bottom:1.3rem; max-width:20ch; }
.hero h1 em{ font-style:normal; color:var(--brand); }
.lede{ font-size:1.1rem; color:var(--ink-soft); max-width:60ch; }
.hero-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem; }
.hero-facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6rem; margin:3rem 0 0;
  padding-top:1.6rem; border-top:1px solid var(--line); }
@media (max-width:760px){ .hero-facts{ grid-template-columns:repeat(2,1fr); } }
.hero-facts dt{ font-family:var(--font-mono); font-size:.71rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.hero-facts dd{ margin:.3rem 0 0; font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.35; }

/* ---------- section headings ---------- */
.section{ padding:4rem 0; }
.section-tight{ padding:2.4rem 0; }
.section-head{ max-width:64ch; margin-bottom:2.2rem; }
.section-head h2{ font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.2; margin-bottom:.7rem; }
.section-head p{ color:var(--ink-soft); font-size:1.02rem; }
.kicker{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-soft); font-weight:600; margin-bottom:.8rem; display:block; }

/* ---------- generic cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
@media (max-width:860px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.65rem; box-shadow:var(--shadow); }
.card h3{ font-size:1.12rem; }
.card p{ color:var(--ink-soft); font-size:.96rem; }
.card ul{ margin:.2rem 0 0; padding-left:1.1rem; color:var(--ink-soft); font-size:.92rem; }
.card li{ margin-bottom:.3rem; }
.card-icon{ width:42px; height:42px; border-radius:10px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; }

/* ---------- process steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ border-top:2px solid var(--line); padding-top:1rem; }
.step .num{ font-family:var(--font-mono); font-size:.75rem; color:var(--brand); font-weight:600; letter-spacing:.08em; }
.step h3{ font-size:1.02rem; margin:.4rem 0 .45rem; }
.step p{ color:var(--ink-soft); font-size:.93rem; }

/* ---------- work / portfolio cards ---------- */
.work-card{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); margin-bottom:1.5rem; }
@media (max-width:900px){ .work-card{ grid-template-columns:1fr; } }
.work-card-body{ padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:.85rem; }
.work-card-side{ padding:1.9rem 1.7rem; border-left:1px solid var(--line); background:var(--accent-soft); }
@media (max-width:900px){ .work-card-side{ border-left:none; border-top:1px solid var(--line); } }
.work-card .bar{ position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); }
.work-card h3{ font-size:1.35rem; }
.client-line{ font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); font-weight:600; }
.work-card p{ color:var(--ink-soft); }
.spec-list{ list-style:none; margin:0; padding:0; }
.spec-list li{ display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.spec-list li:last-child{ border-bottom:none; }
.spec-list .k{ font-family:var(--font-mono); font-size:.71rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft); padding-top:.2rem; }
@media (max-width:520px){ .spec-list li{ grid-template-columns:1fr; gap:.1rem; } }
.tag-row{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.2rem; }
.tag{ font-family:var(--font-mono); font-size:.72rem; padding:.2rem .55rem; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft); background:var(--paper); }
.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display);
  font-weight:700; font-size:.92rem; color:var(--accent); text-decoration:none; }
.link-arrow svg{ transition:transform .15s; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---------- notice strip ---------- */
.notice{ display:flex; gap:.7rem; align-items:flex-start; background:var(--paper-raised); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:.9rem 1.05rem; }
.notice svg{ color:var(--accent); flex-shrink:0; margin-top:.2rem; }
.notice p{ font-size:.92rem; color:var(--ink-soft); }

/* ---------- case study header ---------- */
.case-head{ padding:3rem 0 2rem; }
.crumb{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-soft); margin-bottom:1.2rem; }
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--ink); }
.case-title-row{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-bottom:1rem; }
.case-mark{ width:48px; height:48px; border-radius:12px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.case-head h1{ font-size:clamp(1.8rem,3.6vw,2.55rem); line-height:1.12; }
.demo-badge{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.3rem .62rem; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:600; }
.case-facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.4rem; margin:2rem 0 0;
  padding-top:1.5rem; border-top:1px solid var(--line); }
@media (max-width:820px){ .case-facts{ grid-template-columns:repeat(2,1fr); } }
.case-facts dt{ font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.case-facts dd{ margin:.3rem 0 0; font-size:.94rem; line-height:1.5; }

.prose{ max-width:72ch; }
.prose h2{ font-size:1.45rem; margin:2.4rem 0 .8rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.06rem; margin:1.8rem 0 .5rem; }
.prose p{ margin-bottom:1rem; color:var(--ink-soft); }
.prose p strong{ color:var(--ink); font-weight:600; }
.prose ul, .prose ol{ margin:0 0 1.1rem; padding-left:1.2rem; color:var(--ink-soft); }
.prose li{ margin-bottom:.45rem; }
.prose li strong{ color:var(--ink); }

/* ============================================================
   Guided walkthrough
   ============================================================ */
.tour{ display:grid; grid-template-columns:390px minmax(0,1fr); gap:1.6rem; align-items:start; }
@media (max-width:1100px){ .tour{ grid-template-columns:1fr; } }

.tour-rail{ position:sticky; top:70px; display:flex; flex-direction:column; max-height:calc(100vh - 90px);
  background:var(--paper-raised); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
@media (max-width:1100px){ .tour-rail{ position:static; max-height:none; } }
.tour-rail-head{ flex:0 0 auto; padding:1.05rem 1.2rem 1rem; border-bottom:1px solid var(--line); background:var(--accent-soft); }
.tour-rail-head h2{ font-size:1.02rem; margin-bottom:.25rem; }
.tour-rail-head p{ font-size:.84rem; color:var(--ink-soft); }
.tour-progress{ display:flex; align-items:center; gap:.6rem; margin-top:.85rem; }
.tour-progress-bar{ flex:1; height:4px; border-radius:999px; background:color-mix(in srgb, var(--ink) 14%, transparent); overflow:hidden; }
.tour-progress-fill{ display:block; height:100%; width:0; background:var(--accent-solid); border-radius:999px; transition:width .3s ease; }
.tour-progress-label{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); }

.tour-steps{ list-style:none; margin:0; padding:.5rem; flex:1 1 auto; min-height:0; overflow-y:auto; }
@media (max-width:1100px){ .tour-steps{ overflow-y:visible; } }
.tour-step{ border-radius:var(--radius-sm); }
.tour-step-btn{ width:100%; display:flex; gap:.7rem; align-items:flex-start; text-align:left; background:none;
  border:none; padding:.62rem .65rem; border-radius:var(--radius-sm); transition:background .15s; }
.tour-step-btn:hover{ background:var(--paper); }
.tour-step-num{ flex-shrink:0; width:22px; height:22px; border-radius:999px; border:1px solid var(--line);
  font-family:var(--font-mono); font-size:.7rem; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); margin-top:.1rem; }
.tour-step-title{ font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--ink-soft); line-height:1.35; }
.tour-step[data-state="done"] .tour-step-num{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.tour-step[data-state="current"]{ background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.tour-step[data-state="current"] .tour-step-num{ background:var(--accent-solid); color:var(--on-solid); border-color:transparent; }
.tour-step[data-state="current"] .tour-step-title{ color:var(--ink); font-weight:700; }

.tour-detail{ padding:0 .7rem .9rem 2.05rem; display:none; }
.tour-step[data-state="current"] .tour-detail{ display:block; }
.tour-detail > p{ font-size:.92rem; color:var(--ink-soft); margin-bottom:.7rem; }
.tour-detail > p:last-child{ margin-bottom:0; }
.tour-detail strong{ color:var(--ink); font-weight:600; }
.tour-detail code{ font-family:var(--font-mono); font-size:.82em; background:var(--paper);
  border:1px solid var(--line); border-radius:4px; padding:.05rem .3rem; }
.tour-note{ border-left:2px solid var(--accent); padding:.1rem 0 .1rem .7rem; margin:.75rem 0; }
.tour-note span{ display:block; font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--accent); font-weight:600; margin-bottom:.2rem; }
.tour-note p{ font-size:.86rem; margin:0; color:var(--ink-soft); }
.tour-do{ display:inline-flex; align-items:flex-start; gap:.4rem; font-family:var(--font-mono); font-size:.74rem;
  line-height:1.45; background:var(--paper); border:1px dashed var(--accent); color:var(--accent); border-radius:var(--radius-sm);
  padding:.35rem .65rem; margin-top:.3rem; }

.tour-nav{ flex:0 0 auto; display:flex; gap:.5rem; align-items:center; padding:.85rem 1.2rem; border-top:1px solid var(--line); background:var(--paper); }
.tour-nav .spacer{ flex:1; }
.tour-reset{ background:none; border:none; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); text-decoration:underline; padding:0; }

.tour-stage{ min-width:0; }
.tour-spot{ position:relative; z-index:1; border-radius:var(--radius-sm);
  box-shadow:0 0 0 2px var(--accent-solid), 0 0 0 7px var(--accent-soft);
  animation:tourPulse 1.6s ease-out 2; }
@keyframes tourPulse{
  0%{ box-shadow:0 0 0 2px var(--accent-solid), 0 0 0 0 var(--accent-soft); }
  55%{ box-shadow:0 0 0 2px var(--accent-solid), 0 0 0 11px var(--accent-soft); }
  100%{ box-shadow:0 0 0 2px var(--accent-solid), 0 0 0 7px var(--accent-soft); }
}

/* ---------- contact ---------- */
.contact-strip{ background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.contact-strip .wrap{ padding-top:3.2rem; padding-bottom:3.2rem; display:flex; gap:2rem;
  align-items:center; justify-content:space-between; flex-wrap:wrap; }
.contact-strip h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:.5rem; }
.contact-strip p{ color:var(--ink-soft); max-width:52ch; }
.mail-link{ font-family:var(--font-mono); font-size:1.02rem; color:var(--brand); text-decoration:none; border-bottom:1px solid currentColor; }

/* ---------- footer ---------- */
.site-footer{ padding:2.4rem 0 3rem; }
.site-footer .wrap{ display:flex; gap:1.5rem; justify-content:space-between; flex-wrap:wrap; align-items:flex-start; }
.site-footer p, .site-footer a{ font-size:.84rem; color:var(--ink-soft); }
.site-footer nav{ display:flex; gap:1.1rem; flex-wrap:wrap; }
.site-footer nav a{ text-decoration:none; }
.site-footer nav a:hover{ color:var(--ink); }
.footer-note{ max-width:48ch; margin-top:.5rem; }

/* ---------- demo stage framing (case-study pages) ---------- */
.tour-wrap{ max-width:1400px; margin:0 auto; padding:0 1.5rem; }
.tour-stage{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:0 1.3rem 1.6rem; }
@media (max-width:560px){ .tour-stage{ padding:0 .8rem 1.2rem; } }
.tour-stage .product-shell{ padding-top:1.3rem; }
.tour-stage .sidebar-nav{ top:1rem; }