/* ============================================================================
   eVamb Cinematic (evamb.io) — page CSS (route shells)
   Depends on shared tokens.css + base.css + components.css (load those first).
   Holds the nav, hero stage, footer, gateway + page-shell layout that the
   shared design system doesn't define. Palette/typography all come from tokens.
   ========================================================================== */

/* ---- Top nav (V-mark + wordmark constant top-left) ------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--container-pad);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hairline-on-ink);
  color: var(--text-on-ink);
}
.brand-lockup { display: inline-flex; align-items: center; gap: var(--sp-2); }
.brand-lockup .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;          /* ~+20%: the lockup reads larger in the header */
  letter-spacing: -0.02em;
  color: var(--text-on-ink);
  line-height: 1;
  display: inline-flex; align-items: center; gap: 0;
}
.brand-lockup .v-node {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 4px rgba(201,120,60,.18);
  flex: none;
}
.nav-links { display: none; align-items: center; gap: var(--sp-5); }
.nav-links a { font-size: var(--fs-body-sm); color: var(--text-on-ink-muted); }
.nav-links a:hover { color: var(--text-on-ink); }
.nav-right { display: flex; align-items: center; gap: var(--sp-3); }
.nav-cross {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-on-ink-faint);
}
.nav-cross:hover { color: var(--amber); }
.nav-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  width: 44px; height: 44px;        /* >=44px touch target */
  padding: 10px; border-radius: var(--r-sm);
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text-on-ink); border-radius: 2px; }

/* slide-down mobile menu */
.nav-menu {
  position: fixed;
  inset: 0 0 auto 0;
  top: 0;
  padding: calc(var(--sp-7) + var(--sp-4)) var(--container-pad) var(--sp-6);
  background: var(--ink);
  color: var(--text-on-ink);
  display: grid;
  gap: var(--sp-4);
  transform: translateY(-100%);
  transition: transform var(--dur-3) var(--ease-brand);
  z-index: calc(var(--z-nav) - 1);
  border-bottom: 1px solid var(--hairline-on-ink);
}
.nav-menu[data-open="true"] { transform: translateY(0); }
.nav-menu a { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-on-ink);
  display: flex; align-items: center; min-height: 44px; }   /* comfortable tap target */
.nav-menu .nav-cross-m {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: .12em; color: var(--text-on-ink-faint);
}

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cross { display: inline-flex; }
  .nav-toggle { display: none; }
  .nav-menu { display: none; }
}

/* ---- Hero (4-layer cinema) ------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(560px, 88vh, 920px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-stage { position: absolute; inset: 0; z-index: 0; }
.hero-stage::after {            /* gradient/grain atmosphere layer */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(201,120,60,.20), transparent 60%),
    radial-gradient(90% 80% at 12% 92%, rgba(16,58,92,.45), transparent 60%);
  pointer-events: none;
}
.hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-inner { position: relative; z-index: 2; }
.hero h1 { font-family: var(--font-display); font-size: var(--fs-display); }
.hero .lead { max-width: 56ch; margin-top: var(--sp-4); }
.hero .hero-ctas { margin-top: var(--sp-6); }

/* ---- Section heading block ------------------------------------------- */
.section-head { max-width: 64ch; }
.section-head h2 { margin-top: var(--sp-3); }
.section-head .lead { margin-top: var(--sp-4); }

/* ---- Steps (neekOS walk) --------------------------------------------- */
.steps { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
.step { display: grid; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg);
        border: 1px solid var(--hairline-on-ink); background: var(--surface-ink-raise); }
.step .step-n {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-eyebrow);
  letter-spacing: .14em; color: var(--copper);
}
@media (min-width: 680px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---- Demo / interactive product moment ------------------------------- */
.demo-frame {
  margin-top: var(--sp-7);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-on-ink);
  background: var(--surface-ink-raise);
  overflow: hidden;
  box-shadow: var(--shadow-card-ink);
}
.demo-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline-on-ink);
}
.demo-bar .dots { display: inline-flex; gap: 6px; }
.demo-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--text-on-ink-faint); }
.demo-body { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.demo-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
            padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
            background: rgba(240,232,216,.04); border: 1px solid var(--hairline-on-ink); }
.demo-row .done { color: #3FB27A; font-family: var(--font-mono); font-size: var(--fs-eyebrow);
                  letter-spacing: .1em; text-transform: uppercase; }

/* ---- Use-case / product grids ---------------------------------------- */
.tile-grid { display: grid; gap: var(--grid-gap); margin-top: var(--sp-7); }
@media (min-width: 680px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .tile-grid { grid-template-columns: repeat(3, 1fr); } }
.tile { display: grid; gap: var(--sp-2); }
.tile h3 { font-size: var(--fs-h5); }
.tile .tile-cta { margin-top: var(--sp-2); }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
             margin-bottom: var(--sp-2); }

/* ---- Compliance trust band ------------------------------------------- */
.trust-band { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ---- Promises (managed) ---------------------------------------------- */
.promise-grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); }
@media (min-width: 680px) { .promise-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Access gateway -------------------------------------------------- */
.gateway {
  margin-top: var(--sp-7);
  display: grid; gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface-cream-raise);
  border: 1px solid var(--hairline-on-cream);
  box-shadow: var(--shadow-card);
}
.gateway .note {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: .12em; color: var(--copper-on-cream);
}
.contact-line { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); }
.contact-line a { font-weight: 600; }

/* ---- Access request form (cream ground) ------------------------------ */
.access-form label {
  display: grid; gap: var(--sp-2);
  font-weight: 600; font-size: var(--fs-body-sm); color: var(--text-on-cream);
}
.access-form input[type="text"],
.access-form input[type="email"],
.access-form textarea {
  width: 100%;
  font-family: var(--font-body); font-weight: 400; font-size: 1rem;
  color: var(--text-on-cream);
  background: #fff;
  border: 1px solid var(--hairline-on-cream);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: border-color var(--dur-2) var(--ease-brand), box-shadow var(--dur-2) var(--ease-brand);
}
.access-form textarea { resize: vertical; min-height: 92px; }
.access-form input::placeholder,
.access-form textarea::placeholder { color: var(--text-on-cream-muted); }
.access-form input:focus-visible,
.access-form textarea:focus-visible {
  outline: none; border-color: var(--copper-on-cream); box-shadow: var(--focus-ring);
}
/* the consent checkbox row inside the form stays a normal flex row on cream */
.access-form .consent-cat { color: var(--text-on-cream); }
.access-form .consent-cat .desc { color: var(--text-on-cream-muted); }
.access-form .consent-cat input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--copper); }

/* ---- Docs access gateway (gated areas) ------------------------------- */
.locked-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.locked-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--hairline-on-cream); background: var(--surface-cream-raise);
  /* self-contained cream surface: keep dark-on-light even inside a ground-ink section */
  color: var(--text-on-cream);
  --c-text: var(--text-on-cream);
  --c-muted: var(--text-on-cream-muted);
}
.locked-row .lock {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-on-cream-muted);
}

/* ---- Operations (Aria + Buddy + dashboard) --------------------------- */
.ops-grid { display: grid; gap: var(--grid-gap); margin-top: var(--sp-7); }
@media (min-width: 1024px) { .ops-grid { grid-template-columns: 1fr 1fr; } }
.voice-orb {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--grad-gold);
  display: grid; place-items: center; color: var(--ink);
  box-shadow: 0 0 0 10px rgba(201,120,60,.12), 0 0 40px rgba(232,162,60,.35);
  margin-bottom: var(--sp-3);
}
.chat-thread { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.bubble { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); max-width: 80%; }
.bubble.them { background: rgba(240,232,216,.05); border: 1px solid var(--hairline-on-ink); justify-self: start; }
.bubble.us { background: var(--grad-gold-soft); border: 1px solid var(--hairline-on-ink); justify-self: end; color: var(--text-on-ink); }
.ops-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.metric { padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--hairline-on-ink); background: rgba(240,232,216,.03); }
.metric .num { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); display: block; }
.metric .lbl { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .1em; color: var(--text-on-ink-faint); }

/* ---- Generic deep-page feature list ---------------------------------- */
.feature-cols { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); }
@media (min-width: 1024px) { .feature-cols { grid-template-columns: 1fr 1fr; } }

/* ---- Footer ---------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--text-on-ink); padding: var(--sp-8) var(--container-pad) var(--sp-6); }
/* Footer wordmark: larger (~+20%) and correctly centered. The lockup is a flex
   row (align-items:center) so the V glyph rides the optical center of the
   cap-height rather than dropping below the baseline. */
.site-footer .brand-lockup { align-items: center; }
.site-footer .brand-lockup .wordmark {
  font-size: 1.7rem; line-height: 1;
  display: inline-flex; align-items: center; gap: 0;
}
.site-footer .brand-lockup .v-glyph { vertical-align: middle; align-self: center; }
.footer-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 680px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-col h4 { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-eyebrow);
                 text-transform: uppercase; letter-spacing: .14em; color: var(--text-on-ink-faint); margin-bottom: var(--sp-3); }
.footer-col ul { display: grid; gap: var(--sp-2); }
.footer-col a { font-size: var(--fs-body-sm); color: var(--text-on-ink-muted); display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer-col a:hover { color: var(--text-on-ink); }
.footer-col .stage-mini { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em;
                          text-transform: uppercase; color: var(--text-on-ink-faint); }
.footer-bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline-on-ink);
                 display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: var(--fs-body-sm); color: var(--text-on-ink-muted); }
.footer-meta { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .1em; color: var(--text-on-ink-faint); }

/* ---- Consent layer --------------------------------------------------- */
.consent {
  position: fixed; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
  z-index: var(--z-overlay);
  max-width: 560px; margin-inline: auto;
  background: var(--surface-cream-raise);
  color: var(--text-on-cream);
  border: 1px solid var(--hairline-on-cream);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 50px rgba(10,13,20,.35);
  padding: var(--sp-5);
}
.consent h2 { font-size: var(--fs-h5); }
.consent p { font-size: var(--fs-body-sm); color: var(--text-on-cream-muted); margin-top: var(--sp-2); }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.consent-actions .btn { padding: 11px 20px; font-size: var(--fs-body-sm); }
.consent-manage { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.consent-cat { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3);
               border: 1px solid var(--hairline-on-cream); border-radius: var(--r-md); }
.consent-cat label { font-weight: 600; }
.consent-cat .desc { font-size: var(--fs-body-sm); color: var(--text-on-cream-muted); }
.consent-link { font-size: var(--fs-body-sm); margin-top: var(--sp-3); display: inline-block; }

/* ---- Page-shell hero (interior routes — lighter than home hero) ------ */
.page-hero { position: relative; overflow: hidden; }
.page-hero .stage-label { margin-bottom: var(--sp-3); }
.page-hero h1 { margin-top: var(--sp-3); }
.breadcrumbs { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase;
               letter-spacing: .1em; color: var(--text-on-ink-faint); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.breadcrumbs a:hover { color: var(--amber); }
.breadcrumbs .sep { opacity: .5; }

/* ============================================================================
   NESTED-GROUND CORRECTION LAYER (io-owned · loads after components.css)
   Every io page sets <body class="ground-ink"> and then nests cream/paper
   sections inside it. components.css has `.ground-ink .btn-ghost { color:
   var(--text-on-ink) }` which matches EVERY ghost button on the page (they are
   all descendants of body.ground-ink), and its `.ground-cream .btn-ghost`
   companion only restyles the border — not the text color. The result is a
   ghost button on a cream/paper section rendering cream text + cream border on
   a light ground (invisible). These rules re-assert the correct ink-on-light
   colors for ghost buttons (and links) that live inside a nearer light ground,
   winning the cascade by equal specificity + later source order.
   ========================================================================== */
.ground-cream .btn-ghost,
.ground-paper .btn-ghost {
  color: var(--text-on-cream);
  border-color: var(--hairline-on-cream);
}
.ground-cream .btn-ghost:hover,
.ground-paper .btn-ghost:hover {
  background: rgba(10, 13, 20, .04);
  box-shadow: none;
}

/* The cream `.card` is a self-contained LIGHT surface. When it is dropped into
   a `ground-ink` section (e.g. the "Other lines of work" tile grids), its text
   otherwise inherits the ink-ground cream color and renders cream-on-paper
   (invisible). Re-theme any plain `.card` to dark-on-light, regardless of the
   surrounding ground. `.card-ink` is the dark-surface variant and is excluded. */
.card:not(.card-ink) {
  color: var(--text-on-cream);
  --c-text: var(--text-on-cream);
  --c-muted: var(--text-on-cream-muted);
  --c-eyebrow: var(--copper-on-cream);
}
.card:not(.card-ink) h1, .card:not(.card-ink) h2, .card:not(.card-ink) h3,
.card:not(.card-ink) h4, .card:not(.card-ink) h5, .card:not(.card-ink) h6 { color: var(--text-on-cream); }
.card:not(.card-ink) p { color: var(--text-on-cream-muted); }
/* tile CTA link inside a cream card: copper underline + dark label (AA on cream) */
.card:not(.card-ink) .tile-cta { color: var(--text-on-cream); }

/* Stage-label badges (border + text use currentColor). The default tints are
   tuned for the INK ground (azure/green/amber all clear AA on ink). On a
   cream/paper ground — or inside a cream `.card` — azure(2.53), green(2.43)
   and amber(1.98) fail AA. Re-tint to AA-safe equivalents on light grounds so
   the badge text and 1px border are clearly visible. Same semantics (blue =
   beta/pilot, green = live, amber/copper = trial). */
.ground-cream .stage-beta,  .ground-paper .stage-beta,  .card:not(.card-ink) .stage-beta,
.ground-cream .stage-pilot, .ground-paper .stage-pilot, .card:not(.card-ink) .stage-pilot { color: var(--blue); }
.ground-cream .stage-live,  .ground-paper .stage-live,  .card:not(.card-ink) .stage-live  { color: #1E7A4A; }
.ground-cream .stage-trial, .ground-paper .stage-trial, .card:not(.card-ink) .stage-trial { color: var(--copper-on-cream); }
.ground-cream .stage-dev,   .ground-paper .stage-dev,   .card:not(.card-ink) .stage-dev   { color: var(--text-on-cream-muted); }