/* ============================================================
   VUVA SYSTEMS — LAYER 2: DEEP EXPLORATION DRAWERS
   Loaded after the public redesign layer. Uses the existing
   Operational Cartography tokens so the drawers read as part of
   the same system, not a new layer bolted on.
   ============================================================ */

.drawer-host { display: none; }
.drawer-host[hidden] { display: none; }

/* ---------- Shell ---------- */
.drawer {
  position: fixed;
  inset: 0;
  /* Uses the global z-index scale so the drawer always clears the fixed
     header (1000) and the mobile menu overlay without guessing a number. */
  z-index: var(--z-drawer, 1500);
  display: grid;
  grid-template-columns: 1fr min(74rem, 92vw);
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer-backdrop {
  grid-column: 1;
  background: rgba(4, 7, 6, .72);
  backdrop-filter: blur(6px) saturate(.9);
  -webkit-backdrop-filter: blur(6px) saturate(.9);
  opacity: 0;
  transition: opacity .45s var(--oc-ease);
}
.drawer.is-open .drawer-backdrop { opacity: 1; }

/* ---------- Panel ---------- */
.drawer-panel {
  grid-column: 2;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--oc-carbon);
  border-left: 1px solid var(--oc-rule-dark);
  box-shadow: -2rem 0 6rem rgba(0, 0, 0, .45);
  transform: translateX(3.5rem);
  opacity: 0;
  transition:
    transform .55s var(--oc-ease),
    opacity .4s var(--oc-ease);
}
.drawer.is-open .drawer-panel { transform: none; opacity: 1; }

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.5rem, 4vw, 3.4rem) 1.4rem;
  border-bottom: 1px solid var(--oc-rule-dark-soft);
  flex: 0 0 auto;
}
.drawer-kicker {
  margin: 0 0 .9rem;
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--oc-signal);
}
.drawer-title {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 500;
  color: #edf3ef;
  text-wrap: balance;
}
.drawer-title:focus-visible { outline: 2px solid var(--oc-signal); outline-offset: 6px; }
.drawer-lede {
  margin: .9rem 0 0;
  max-width: 46ch;
  font-size: .95rem;
  line-height: 1.55;
  color: #a9b6ae;
}
.drawer-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: #edf3ef;
  background: transparent;
  border: 1px solid var(--oc-rule-dark);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .25s var(--oc-ease), color .25s var(--oc-ease), background-color .25s var(--oc-ease);
}
.drawer-close:hover { border-color: var(--oc-signal); color: var(--oc-signal); }
.drawer-close:focus-visible { outline: 2px solid var(--oc-signal); outline-offset: 3px; }

.drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--oc-graphite) transparent;
}
.drawer-scroll::-webkit-scrollbar { width: 10px; }
.drawer-scroll::-webkit-scrollbar-thumb { background: var(--oc-graphite); border-radius: 99px; }
.drawer-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- Content normalisation ---------- */
/* A full-bleed homepage section becomes readable content inside the panel. */
.is-drawer-content {
  display: block;
  padding-block: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--oc-carbon);
}
.is-drawer-content .container,
.is-drawer-content[data-drawer-id] .container { width: min(100% - 2.5rem, 64rem); }
.is-drawer-content > *:first-child { padding-top: 0; }
/* Section rhythm is owned by the drawer, so drop the page-level band padding. */
.is-drawer-content.section-dark,
.is-drawer-content.section-light,
.is-drawer-content.section-paper {
  padding-block: 0;
  background: var(--oc-carbon);
  color: #edf3ef;
}
.is-drawer-content.section-light .section-head h2,
.is-drawer-content.section-paper .section-head h2,
.is-drawer-content .about-statement { color: #edf3ef; }
.is-drawer-content .section-lede { color: #a9b6ae; }
.is-drawer-content .kicker { color: var(--oc-signal); }

/* Re-tint the light sections' content for the dark panel without changing
   the original DOM or its data hooks. */
.is-drawer-content .intro-sub,
.is-drawer-content .sr-main p,
.is-drawer-content .wp-lead,
.is-drawer-content .wp-facts dd,
.is-drawer-content .about-body p,
.is-drawer-content .trust-list p,
.is-drawer-content .work-disclosure,
.is-drawer-content .pf-blurb { color: #a9b6ae; }
.is-drawer-content .sr-main h3,
.is-drawer-content .wp-body h3,
.is-drawer-content .process-track h3 { color: #edf3ef; }
.is-drawer-content .service-row,
.is-drawer-content .wp-facts > div,
.is-drawer-content .trust-list li,
.is-drawer-content .process-track li { border-color: var(--oc-rule-dark-soft); }
.is-drawer-content .process-track,
.is-drawer-content .pf-grid,
.is-drawer-content .pf-card,
.is-drawer-content .pf-card-btn,
.is-drawer-content .stack-card,
.is-drawer-content .cap-stage { background: #101813; border-color: var(--oc-rule-dark-soft); }
.is-drawer-content .wp-media,
.is-drawer-content .pf-media,
.is-drawer-content .sc-visual { border-color: var(--oc-rule-dark-soft); }
.is-drawer-content .wp-body h3:hover,
.is-drawer-content .service-row:hover h3 { color: var(--oc-signal); }

/* Capability strip inside a drawer: no travel, fully readable. */
.is-drawer-content .marquee { overflow: visible; }
.is-drawer-content .marquee-track { animation: none; width: auto; flex-wrap: wrap; row-gap: .35rem; }

/* ---------- Nav triggers ---------- */
.nav-drawer {
  font: inherit;
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted-dark, #96a39c);
  background: transparent;
  border: 0;
  padding: .3rem 0;
  cursor: pointer;
  position: relative;
  transition: color .25s var(--oc-ease);
}
.nav-drawer::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--oc-ease);
}
.nav-drawer:hover { color: #edf3ef; }
.nav-drawer:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-drawer:focus-visible { outline: 2px solid var(--oc-signal); outline-offset: 4px; }
.nav-drawer[aria-expanded="true"] { color: var(--oc-signal); }
.nav-drawer--accent { color: var(--oc-signal); }
.nav-drawer--accent::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: .5rem;
  vertical-align: middle;
  background: currentColor;
  border-radius: 50%;
}

.site-footer .footer-nav button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color .25s var(--oc-ease);
}
.site-footer .footer-nav button:hover,
.site-footer .footer-nav button:focus-visible { color: var(--oc-signal); }

.drawer-open { cursor: pointer; }
.drawer-open:focus-visible { outline: 2px solid var(--oc-signal); outline-offset: 3px; }

/* ---------- Mobile menu parity ---------- */
@media (max-width: 780px) {
  .primary-nav .nav-drawer {
    font-family: var(--oc-display, var(--display-font));
    font-size: clamp(1.35rem, 5.5vw, 1.9rem);
    letter-spacing: -.01em;
    font-weight: 600;
    text-transform: none;
    color: var(--text-light, #edf3ef);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s var(--oc-ease), transform .6s var(--oc-ease);
  }
  .primary-nav.is-open .nav-drawer { opacity: 1; transform: none; }
  .primary-nav .nav-drawer::after { display: none; }
  .primary-nav .nav-drawer--accent { color: var(--oc-signal); }
}

/* ---------- Mobile / tablet: near-full-screen panel ---------- */
@media (max-width: 900px) {
  .drawer {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .drawer-backdrop { grid-column: 1; grid-row: 1; }
  .drawer-panel {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    border-left: 0;
    border-top: 1px solid var(--oc-rule-dark);
    transform: translateY(2.5rem);
    box-shadow: 0 -2rem 6rem rgba(0, 0, 0, .5);
  }
  .drawer.is-open .drawer-panel { transform: none; }
  .drawer-head { padding-top: 1.25rem; }
  .is-drawer-content .container,
  .is-drawer-content[data-drawer-id] .container { width: calc(100% - 2.5rem); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .drawer-backdrop,
  .drawer-panel { transition: none; }
  .drawer-panel { transform: none; opacity: 1; }
}

/* ---------- Body scroll lock while a drawer is open ---------- */
body.has-drawer { overflow: hidden; }
/* While a drawer is open the header is decorative: keep it underneath so the
   panel's close control is always the topmost hit target. */
body.has-drawer .site-header { z-index: 900; }