/* ============================================================
   SUREWORX — COMMAND LAYER THEME OVERRIDE
   Loaded AFTER home.css / journey.css on every interior page.
   Reskins the existing markup into the Command Layer system:
   dark teal #283837 · coral #FF5F4B single accent · warm off-white
   Space Grotesk (display) · Inter (body) · IBM Plex Mono (HUD)
   ============================================================ */

/* ---------- 1 · Token remap (covers home.css AND journey.css) ---------- */
:root {
  /* light surfaces become the teal system */
  --cream:    #283837;
  --cream-2:  #1c2928;
  --paper:    #1f2f2e;

  --forest:      #131e1d;
  --forest-2:    #1c2928;
  --forest-3:    #223231;
  --forest-soft: #2e4341;
  --forest-deep: #131e1d;

  --coral:   #FF5F4B;
  --coral-2: #ff7360;
  --coral-soft: rgba(255, 95, 75, 0.12);

  /* single-accent discipline: amber folds into coral */
  --amber: #FF5F4B;
  --peach: #ff8a75;
  --sage:  #93a7a2;
  --sage-soft: rgba(255, 95, 75, 0.08);

  --text:   #F4EFE7;
  --muted:  rgba(244, 239, 231, 0.62);
  --text-muted: rgba(244, 239, 231, 0.62);
  --on-dark:   #F4EFE7;
  --on-dark-2: rgba(244, 239, 231, 0.62);
  --text-on-dark:   #F4EFE7;
  --text-on-dark-2: rgba(244, 239, 231, 0.62);

  --line:      rgba(244, 239, 231, 0.14);
  --line-2:    rgba(244, 239, 231, 0.08);
  --line-dark: rgba(244, 239, 231, 0.14);
  --border:        rgba(244, 239, 231, 0.14);
  --border-dark:   rgba(244, 239, 231, 0.14);
  --border-dark-2: rgba(244, 239, 231, 0.26);

  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 4px;

  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.45);

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
}

html, body { background: var(--cream); color: var(--text); }
::selection { background: #FF5F4B; color: #131e1d; }

/* ---------- 2 · Display type — Space Grotesk replaces Bebas ---------- */
.display { font-weight: 700; letter-spacing: 0.02em; line-height: 1.03; }

/* home.css headings (Bebas sizes pulled down ~35% for the wider face) */
.section-head h2 { font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: 1.06; letter-spacing: 0.02em; }
.page-hero h1 { font-weight: 700; font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: 0.015em; }
.cta h2 { font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: 0.02em; }
.promise-copy h2 { font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.06; }
.projects-head h2 { font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: 1.06; }
.role h4 { font-weight: 600; font-size: 1.3rem; line-height: 1.15; letter-spacing: 0.02em; }
.choose-card h4 { font-weight: 600; font-size: 1.1rem; line-height: 1.15; }
.persona h2 { font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.05; }
.persona-num { font-weight: 700; font-size: clamp(6rem, 15vw, 13rem); color: rgba(244, 239, 231, 0.05); }
.stat .n { font-weight: 700; font-size: clamp(2.2rem, 4.2vw, 3.5rem); line-height: 1; }
.stat .n .u { color: var(--coral); }
.hero-title { font-weight: 700; letter-spacing: 0.02em; }
.uc-body h3 { font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.08; }

/* numeric ornaments become mono HUD tags */
.cap .num, .why-card .why-n {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; color: var(--coral);
}

/* journey.css headings */
.menu-phases a { font-weight: 700; font-size: clamp(20px, 3vw, 36px); line-height: 1.1; }
.intro-label { font-weight: 700; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.05; }
.screen--exit .exit-head { font-weight: 700; font-size: clamp(24px, 3.6vw, 42px); line-height: 1.05; }
.personas h2 { font-weight: 700; font-size: clamp(28px, 4vw, 48px); line-height: 1.05; }
.persona-card h3 { font-weight: 600; font-size: 21px; line-height: 1.15; }
.stat .value { font-weight: 700; font-size: 36px; }
.contact h2 { font-weight: 700; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.04; }
.story-copy h3 { font-weight: 700; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.06; }
.pillars-head h2 { font-weight: 700; font-size: clamp(26px, 3.8vw, 44px); line-height: 1.05; }
.usecase-body h3 { font-weight: 700; font-size: clamp(26px, 3.8vw, 44px); line-height: 1.06; }
.usecase-strip h4 { font-weight: 600; font-size: 20px; }
.form-success h3 { font-weight: 600; font-size: 21px; }

/* ---------- 3 · Kickers & labels → mono HUD language ---------- */
.kicker, .persona-k, .hero-kicker {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--coral);
}
.kicker .dot { width: 5px; height: 5px; border-radius: 0; background: var(--coral); }
.hero-kicker, .persona-k {
  background: rgba(19, 30, 29, 0.55); border: 1px solid var(--line);
  border-radius: 2px; padding: 9px 14px; color: var(--text);
}
.hero-kicker .pulse { background: var(--coral); }
.proj-body .loc, .ins .cat {
  font-family: var(--font-mono); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.26em; color: var(--coral);
}
.ins .date { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; }
.caps-foot {
  font-family: var(--font-mono); font-weight: 400; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}

/* ---------- 4 · Buttons & links ---------- */
.btn {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 2px; padding: 15px 26px;
}
.btn-coral { color: #131e1d; box-shadow: none; }
.btn-coral:hover { background: var(--coral-2); box-shadow: none; }
.btn-dark { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-dark:hover { background: transparent; border-color: var(--coral); color: var(--coral); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { background: transparent; border-color: var(--coral); color: var(--coral); }
.btn-light { background: transparent; color: var(--text); border: 1px solid var(--line); backdrop-filter: none; }
.btn-light:hover { background: transparent; border-color: var(--coral); color: var(--coral); }
.link-arrow {
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral);
}
.link-arrow:hover { color: var(--coral-2); }
.role .link-arrow { color: var(--coral); }
.role .link-arrow:hover { color: var(--coral-2); }

/* ---------- 5 · Unified header (sw-nav) → command topbar ----------
   Kept visually identical to the homepage .topbar: gradient scrim,
   stacked logo + mono tag, same link and CTA metrics. */
.sw-nav {
  background: linear-gradient(180deg, rgba(19, 30, 29, 0.72) 0%, rgba(19, 30, 29, 0.38) 62%, transparent 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--font-body);
  height: 76px;
}
.sw-nav.scrolled {
  background: rgba(19, 30, 29, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
  box-shadow: none;
}
.sw-nav-brand {
  flex-direction: column; align-items: flex-start; gap: 6px;
}
.sw-nav-brand img { height: 26px; }
.sw-nav-brand .sw-tag {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.66);
  text-shadow: 0 1px 10px rgba(19, 30, 29, 0.9);
  border-left: 0; padding-left: 0;
}
.sw-nav-links a {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.88);
  text-shadow: 0 1px 12px rgba(19, 30, 29, 0.9);
}
.sw-nav-links a::after { height: 1px; background: #FF5F4B; }
.sw-nav-links a:hover { color: #F4EFE7; }
.sw-nav-links a.is-current { color: #FF5F4B; font-weight: 400; }
.sw-nav-links a.is-current::after { background: #FF5F4B; }
.sw-btn-coral {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #131e1d !important;
  border-radius: 2px; padding: 12px 26px 12px 28px; line-height: 1;
  box-shadow: none; text-shadow: none;
}
.sw-btn-coral:hover { background: #ff7360; box-shadow: none; }
.sw-nav-toggle { border-color: var(--line); color: #F4EFE7; border-radius: 2px; }
@media (max-width: 900px) {
  .sw-nav-links {
    top: 76px;
    background: rgba(19, 30, 29, 0.97);
    border-bottom-color: var(--line);
    box-shadow: none;
  }
  .sw-nav-brand img { height: 24px; }
  .sw-nav-links a { border-bottom: 1px solid rgba(244, 239, 231, 0.06); }
}

/* ---------- 6 · Cards & surfaces ---------- */
.cap {
  background: linear-gradient(180deg, rgba(244, 239, 231, 0.025), transparent);
  border: 1px solid var(--line);
}
.cap:hover { border-color: rgba(255, 95, 75, 0.55); box-shadow: none; transform: translateY(-4px); }
.cap h4 { color: var(--text); }
.cap .ic { background: rgba(255, 95, 75, 0.08); border-radius: 2px; }
.cap .ic svg { stroke: var(--text); }
.cap:hover .ic svg { stroke: var(--coral); }

.proj { background: transparent; border: 1px solid var(--line); }
.proj:hover { border-color: rgba(255, 95, 75, 0.55); box-shadow: none; }
.proj-type {
  background: rgba(19, 30, 29, 0.85); color: var(--text);
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: 0.2em;
}
.proj-body h4 { color: var(--text); }

.ins-img { border-color: var(--line); }
.ins h4 { color: var(--text); }

.why-card { background: rgba(244, 239, 231, 0.03); border: 1px solid var(--line); }
.why-card:hover { border-color: rgba(255, 95, 75, 0.55); }
.why-card h4 { color: var(--text); }

.role { background: rgba(244, 239, 231, 0.03); border: 1px solid var(--line); }
.role:hover { background: rgba(244, 239, 231, 0.05); border-color: rgba(255, 95, 75, 0.55); }
.role .rk {
  font-family: var(--font-mono); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.3em; color: var(--coral);
}
.role h4 { color: var(--text); }

.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { border-left: 1px solid var(--line); }

.promise-media { box-shadow: none; border: 1px solid var(--line); }
.promise-media .badge {
  border-radius: 2px; font-family: var(--font-mono); font-weight: 400;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
}
.promise-list .tick {
  border-radius: 2px; background: rgba(255, 95, 75, 0.1); color: var(--coral);
}
.promise-list b { color: var(--text); }

.usecase-card { background: var(--cream-2); border: 1px solid var(--line); box-shadow: none; }
.usecase-card:hover { box-shadow: none; border-color: rgba(255, 95, 75, 0.55); }
.uc-body h3 .accent, .section-head h2 .accent, .page-hero h1 .accent,
.cta h2 .accent, .promise-copy h2 .accent, .persona h2 .accent, .hero-title .accent { color: var(--coral); }
.phases-mini span {
  font-family: var(--font-mono); font-weight: 400; font-size: 9px;
  letter-spacing: 0.18em; border-radius: 2px; border-color: var(--line);
}

.choose-card { border-radius: 3px; background: rgba(19, 30, 29, 0.66); border-color: var(--line); }
.choose-card:hover { background: rgba(28, 41, 40, 0.9); border-color: rgba(255, 95, 75, 0.55); }
.choose-card .ck { font-family: var(--font-mono); font-weight: 500; font-size: 9px; letter-spacing: 0.3em; color: var(--coral); }
.choose-card p { color: var(--muted); }
.choose-card .ca { border-radius: 2px; border-color: var(--line); }
.choose-card:hover .ca { background: var(--coral); border-color: var(--coral); }
.choose-card:hover .ca svg { stroke: #131e1d; color: #131e1d; }

.persona-proof li {
  background: rgba(19, 30, 29, 0.6); border: 1px solid var(--line); border-radius: 3px;
}
.persona-proof .tick { background: rgba(255, 95, 75, 0.12); color: var(--coral); border-radius: 2px; }
.persona-proof b { color: #F4EFE7; }

.hero-chip .ic { border-radius: 2px; background: rgba(19, 30, 29, 0.5); border-color: var(--line); }

/* CTA band — flatten the gradient into clean teal-black + hairlines */
.cta { background: var(--forest); border-top: 1px solid var(--line); }
.cta::before {
  background:
    radial-gradient(60% 120% at 80% 0%, rgba(255, 95, 75, 0.08), transparent 60%),
    radial-gradient(50% 100% at 10% 100%, rgba(255, 95, 75, 0.06), transparent 60%);
}

/* ---------- 7 · Footer ---------- */
.site-footer { background: #131e1d; border-top: 1px solid var(--line); }
.site-footer h5 {
  font-family: var(--font-mono); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.3em; color: rgba(244, 239, 231, 0.34);
}
.by-role a {
  font-family: var(--font-mono); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral);
  border: 1px solid var(--line); border-radius: 2px; padding: 7px 12px;
}
.by-role a:hover { border-color: rgba(255, 95, 75, 0.55); }
.socials a { border-radius: 2px; }
.socials a:hover { color: var(--coral); border-color: rgba(255, 95, 75, 0.55); }
.site-footer-bottom { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; }
.site-footer ul a:hover { color: var(--coral); }
.site-footer-bottom a:hover { color: var(--coral); }

/* ---------- 8 · Cookie banner ---------- */
.sw-cookie {
  font-family: var(--font-body);
  border-radius: 4px; background: #131e1d; border-color: var(--line);
}
.sw-cookie h4 { font-family: var(--font-display); letter-spacing: 0.03em; }
.sw-cookie p a { color: var(--coral); }
.sw-cookie-actions button { border-radius: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.sw-cookie-accept { background: #FF5F4B; color: #131e1d; box-shadow: none; }
.sw-cookie-decline { border: 1px solid rgba(244, 239, 231, 0.35); }

/* ---------- 9 · Micro-details ---------- */
.scroll-cue { font-family: var(--font-mono); letter-spacing: 0.34em; }
.skip-link { border-radius: 2px; color: #131e1d; font-family: var(--font-mono); }
:where(a, button, input, select, textarea):focus-visible { border-radius: 2px; }

/* thin coordinate rule under page heros — HUD echo */
.page-hero-inner::after {
  content: "32°51′S 151°32′E · GRID SEQ 04";
  display: block; margin-top: 34px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em;
  color: rgba(244, 239, 231, 0.34);
}

/* ---------- 10 · Contrast repairs after the token remap ----------
   home.css / journey.css used --cream as light TEXT and --forest as
   dark TEXT; both now resolve to dark surfaces, so re-pin the ink. */

/* home.css headings that were forest-on-cream */
.section-head h2, .promise-copy h2, .projects-head h2 { color: var(--text); }

/* journey.css: light text that referenced --cream */
.loader-title, .jnav-menu-btn, .btn-ghost-dark, .scroll-btn, .menu-close,
.menu-phases a, .hero-title, .kickoff-title, .phase-title, .step-sum p,
.node-dot, .screen--exit .exit-head, .contact h2, .field textarea,
.form-success h3, .story-media .story-tag, .story-copy h3,
.story-copy .story-points li, .pillars-head h2, .pillar h4,
.usecase-body h3, .usecase-body .phases-mini span, .usecase-strip h4 { color: var(--text); }
.btn-ghost-dark:hover { color: var(--coral); }

/* journey.css: dark text that referenced --forest on now-dark sections */
.intro-label, .intro-copy .lead-line, .personas h2, .persona-card h3,
.stat .value, .node-card h4 { color: var(--text); }
.module-legend .mchip { color: var(--muted); }
.node-card { background: #1c2928; border: 1px solid var(--line); color: var(--muted); }
.node-card .runs-on { color: var(--text); background: rgba(244, 239, 231, 0.06); border-radius: 2px; }
.jnav-what .tooltip { background: #1c2928; border: 1px solid var(--line); color: var(--muted); }

noscript .noscript-note { color: #131e1d; }