/* =========================================================
   CONTACT PAGE (FINAL / CLEAN)
   - Transition directly under header/menu
   - ONE unified dark canvas everywhere (page + transition + stage)
   - White boxes unchanged (form + side cards)
   ========================================================= */

@import "../sections/contact/layout.css";
@import "../sections/contact/hero.css";
@import "../sections/contact/form.css";
@import "../sections/contact/process.css";
@import "../sections/contact/calendly.css";
@import "../sections/contact/direct.css";

/* -------------------------
   CANVAS TOKENS
   ------------------------- */
:root{
  --contact-header-light: #e6e6e8; /* header grey */
  --contact-canvas: #0b0f1a;
  --contact-notch: polygon(
    0% 0%,
    100% 0%,
    100% 62%,
    58% 62%,
    44% 100%,
    0% 100%
  );
}

/* -------------------------
   PAGE BASE (MUST MATCH CANVAS)
   ------------------------- */
.page-contact{
  background: var(--contact-canvas); /* IMPORTANT: same as transition + stage */
  min-height: 100vh;
}

body.page-contact .header-transition{
  background: #06090f !important;
}

body.page-contact main.page{
  padding-top: 0 !important;
  background: #06090f !important;
}

/* ---------------------------------------------------------
   TOP TRANSITION (RIGHT UNDER HEADER)
   --------------------------------------------------------- */
.page-contact .contact-top-transition{
  position: relative;
  width: 100%;
  height: 120px;                 /* tune: smaller = headline moves up */
  overflow: hidden;
  background: var(--contact-canvas);
}

/* Light wedge (header -> dark) */
.page-contact .contact-top-transition::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--contact-header-light);
  clip-path: var(--contact-notch);
}

/* Hide any 1px seam if header has a bottom border */
.page-contact #header-placeholder + .contact-top-transition{
  margin-top: -1px;
}