/* Vibecreed contact and privacy presentation layer.
   Scoped to page-contact / page-privacy plus the shared header, footer and
   button contracts used by these two pages. It does not redefine the global
   home page composition in site.css. Colour tokens are declared literally with
   fallbacks so the pages hold their shape even if a shared token is absent. */

.page-contact,
.page-privacy {
  --vc-cobalt: #3547CA;
  --vc-cobalt-strong: #2A38A6;
  --vc-cobalt-soft: #E7E9F8;
  --vc-cyan: #0FB6E8;
  --vc-ink: #15151B;
  --vc-ink-soft: #2C2C36;
  --vc-muted: #63636E;
  --vc-pearl: #F5F5F1;
  --vc-pearl-deep: #ECECE6;
  --vc-line: #DEDED6;
  --vc-line-strong: #C7C7BE;
  --vc-white: #FFFFFF;
  --vc-danger: #B4231F;
  --vc-danger-soft: #FBE9E7;
  --vc-ok: #1F7A46;
  --vc-radius: 6px;
  --vc-radius-sm: 4px;
  --vc-pad: clamp(1.25rem, 4vw, 3rem);
  --vc-maxw: 76rem;
  /* Shared type from site.css, repeated with an explicit fallback stack so the
     pages keep the Manrope sans face even if a shared token is absent. */
  --vc-font: var(--font-text, "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --vc-font-display: var(--font-display, "Manrope", "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  background: var(--vc-pearl);
  color: var(--vc-ink);
  font-family: var(--vc-font);
}

.page-contact *,
.page-privacy * { box-sizing: border-box; }

/* Form controls do not inherit a typeface from the user agent, so name the
   shared sans stack on them explicitly. */
.page-contact input,
.page-contact select,
.page-contact textarea,
.page-privacy input,
.page-privacy select,
.page-privacy textarea { font-family: var(--vc-font); }

/* Shared header: the sticky shell, brand box, nav links, header actions and
   the menu control all come from site.css. These two pages only line the bar
   up with their own content width and mark the current page. */
.page-contact .site-header__bar,
.page-privacy .site-header__bar {
  max-width: var(--vc-maxw);
  margin-inline: auto;
  padding-inline: var(--vc-pad);
}

.page-contact .site-nav__list a[aria-current="page"],
.page-privacy .site-nav__list a[aria-current="page"] { color: var(--vc-cobalt); }

.page-contact .site-nav__list a[aria-current="page"]::after,
.page-privacy .site-nav__list a[aria-current="page"]::after { width: 100%; }

/* Buttons use the shared .btn contract in site.css. Only the disabled state
   needs a tone of its own here. */
.page-contact .btn[disabled],
.page-privacy .btn[disabled] {
  background: var(--vc-line-strong);
  border-color: var(--vc-line-strong);
  color: var(--vc-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* Hero band. */
.contact-hero,
.privacy-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--vc-line);
}

.contact-glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  pointer-events: none;
  background:
    radial-gradient(42% 55% at 18% 20%, rgba(53, 71, 202, 0.22), rgba(53, 71, 202, 0) 70%),
    radial-gradient(38% 50% at 82% 12%, rgba(15, 182, 232, 0.20), rgba(15, 182, 232, 0) 72%);
  filter: blur(28px);
}

.contact-hero__inner,
.privacy-hero__inner {
  position: relative;
  max-width: var(--vc-maxw);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--vc-pad) clamp(2.5rem, 6vw, 4.5rem);
}

/* The contact page carries a short heading instead of a hero band, so it keeps
   only enough room above the form. */
.contact-hero__inner { padding: clamp(1.5rem, 3vw, 2.25rem) var(--vc-pad) clamp(0.75rem, 1.5vw, 1.25rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vc-cobalt);
}

.eyebrow__mark {
  width: 26px;
  height: 2px;
  background: var(--vc-cobalt);
  display: inline-block;
}

.contact-hero__title,
.privacy-hero__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--vc-font-display);
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  font-weight: 800;
  color: var(--vc-ink);
  text-wrap: balance;
}

.privacy-hero__lede {
  margin: 1.75rem 0 0;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--vc-ink-soft);
}

/* Layout: one centred column holding the form only. */
.contact-layout {
  max-width: calc(47.5rem + (2 * var(--vc-pad)));
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 1.75rem) var(--vc-pad) clamp(3.5rem, 8vw, 6rem);
}

.form-noscript a,
.consent a { color: var(--vc-cobalt); text-decoration: underline; text-underline-offset: 2px; }

/* Form panel. */
.contact-panel {
  background: var(--vc-white);
  border: 1px solid var(--vc-line);
  border-radius: var(--vc-radius);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: 0 1px 0 rgba(21, 21, 27, 0.03), 0 24px 60px -40px rgba(21, 21, 27, 0.35);
}

.contact-panel__head { margin-bottom: 1.75rem; }

.contact-panel__title {
  margin: 0;
  font-family: var(--vc-font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--vc-ink);
}

.contact-panel__intro {
  margin: 0.6rem 0 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--vc-muted);
}

.form-state {
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--vc-radius-sm);
  border: 1px solid var(--vc-line-strong);
  background: var(--vc-pearl);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--vc-ink-soft);
}

.form-state[data-state="notice"] {
  border-color: #B7C0F0;
  background: var(--vc-cobalt-soft);
  color: var(--vc-cobalt-strong);
}

.form-state[data-state="error"] {
  border-color: #E6B3AF;
  background: var(--vc-danger-soft);
  color: var(--vc-danger);
}

.form-summary {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--vc-radius-sm);
  border: 1px solid #E6B3AF;
  background: var(--vc-danger-soft);
  color: var(--vc-danger);
}

.form-summary:focus-visible { outline: 2px solid var(--vc-danger); outline-offset: 2px; }

.form-summary__title { margin: 0 0 0.5rem; font-weight: 660; font-size: 1rem; }

.form-summary__list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.95rem;
}

.form-summary__list a { color: var(--vc-danger); }

.contact-form { display: flex; flex-direction: column; gap: 1.75rem; }

.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.fieldset__legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vc-muted);
}

.field { display: flex; flex-direction: column; gap: 0.5rem; }

.field__label {
  font-size: 0.98rem;
  font-weight: 620;
  color: var(--vc-ink);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.field__required,
.field__optional {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.field__required { color: var(--vc-cobalt); }
.field__optional { color: var(--vc-muted); }

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 0.95rem;
  font: inherit;
  font-size: 1rem;
  color: var(--vc-ink);
  background: var(--vc-pearl);
  border: 1px solid var(--vc-line-strong);
  border-radius: var(--vc-radius-sm);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.field__input--area { min-height: 9.5rem; resize: vertical; line-height: 1.5; }

.field__input::placeholder { color: var(--vc-muted); }

.field__input:hover { border-color: var(--vc-ink-soft); }

.field__input:focus-visible {
  outline: none;
  border-color: var(--vc-cobalt);
  background: var(--vc-white);
  box-shadow: 0 0 0 3px rgba(53, 71, 202, 0.22);
}

.field__hint { margin: 0; font-size: 0.85rem; color: var(--vc-muted); }

.field[data-error="true"] .field__input {
  border-color: var(--vc-danger);
  background: #FFF7F6;
}

.field[data-error="true"] .field__input:focus-visible {
  box-shadow: 0 0 0 3px rgba(180, 35, 31, 0.22);
}

.field__error,
.consent__error {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 560;
  color: var(--vc-danger);
}

/* Interest choice group. */
.choice { display: flex; flex-direction: column; gap: 0.6rem; }

.choice__option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  min-height: 48px;
  border: 1px solid var(--vc-line-strong);
  border-radius: var(--vc-radius-sm);
  background: var(--vc-pearl);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.choice__option:hover { border-color: var(--vc-ink-soft); }

.choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choice__box {
  flex: none;
  margin-top: 0.15rem;
  width: 20px;
  height: 20px;
  border: 2px solid var(--vc-line-strong);
  border-radius: 50%;
  background: var(--vc-white);
  position: relative;
}

.choice__input:checked + .choice__box { border-color: var(--vc-cobalt); }

.choice__input:checked + .choice__box::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--vc-cobalt);
}

.choice__input:focus-visible + .choice__box { box-shadow: 0 0 0 3px rgba(53, 71, 202, 0.28); }

.choice__option:has(.choice__input:checked) {
  border-color: var(--vc-cobalt);
  background: var(--vc-cobalt-soft);
}

.choice__text { display: flex; flex-direction: column; gap: 0.15rem; }
.choice__title { font-weight: 620; font-size: 1rem; color: var(--vc-ink); }
.choice__desc { font-size: 0.86rem; color: var(--vc-muted); }

.field--choice[data-error="true"] .choice__option { border-color: var(--vc-danger); }

/* Consent checkbox. */
.consent { display: flex; flex-direction: column; gap: 0.5rem; }

.consent__label {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-height: 48px;
  cursor: pointer;
}

/* The real control stays a native checkbox, so Space and the label keep
   toggling it, but it is stretched over the drawn box to a full 44px hit
   area. A 1px transparent input under the drawn span is not clickable: the
   span wins the hit test and the click never reaches the input. */
.consent__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.consent__box {
  flex: none;
  margin-top: 0.1rem;
  width: 22px;
  height: 22px;
  border: 2px solid var(--vc-line-strong);
  border-radius: var(--vc-radius-sm);
  background: var(--vc-white);
  position: relative;
  /* Decoration only: it must not intercept the pointer, or the click lands on
     this span instead of the input it mirrors. */
  pointer-events: none;
}

.consent__input:checked + .consent__box { background: var(--vc-cobalt); border-color: var(--vc-cobalt); }

.consent__input:checked + .consent__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--vc-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.consent__input:focus-visible + .consent__box { box-shadow: 0 0 0 3px rgba(53, 71, 202, 0.28); }

.consent__text { font-size: 0.98rem; line-height: 1.5; color: var(--vc-ink-soft); }
.consent__hint { margin: 0; font-size: 0.85rem; color: var(--vc-muted); }
.consent[data-error="true"] .consent__box { border-color: var(--vc-danger); }

/* Honeypot. */
.botcheck {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit row. */
.contact-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--vc-line);
}

.page-contact .submit { padding-left: 1.7rem; padding-right: 1.7rem; font-size: 1rem; }

.contact-submit[data-pending="true"] .submit { opacity: 0.7; }

.submit__meta {
  margin: 0;
  flex: 1 1 14rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--vc-muted);
}

/* Challenge. */
.challenge {
  border: 1px solid var(--vc-line-strong);
  border-radius: var(--vc-radius-sm);
  padding: 1rem;
  background: var(--vc-pearl);
}

.challenge__label {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vc-muted);
}

.challenge__box { min-height: 66px; }

.challenge__status { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--vc-danger); }

/* Live status. */
.form-status {
  margin: 0;
  min-height: 1.4rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--vc-ink-soft);
}

.form-status[data-tone="success"] { color: var(--vc-ok); font-weight: 560; }
.form-status[data-tone="error"] { color: var(--vc-danger); font-weight: 560; }
.form-status[data-tone="notice"] { color: var(--vc-cobalt-strong); font-weight: 560; }

.form-noscript {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--vc-line-strong);
  border-radius: var(--vc-radius-sm);
  background: var(--vc-pearl);
}

.form-noscript__title { margin: 0 0 0.4rem; font-weight: 620; color: var(--vc-ink); }
.form-noscript__text { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--vc-ink-soft); }

/* Privacy page. */
.privacy-hero__title { max-width: 26ch; }

.privacy-body {
  max-width: var(--vc-maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--vc-pad) clamp(3.5rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}

.privacy-toc {
  position: sticky;
  top: 108px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.privacy-toc a {
  color: var(--vc-ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 540;
}

.privacy-toc a:hover { color: var(--vc-cobalt); }

.privacy-sections { display: flex; flex-direction: column; gap: clamp(1.75rem, 4vw, 2.75rem); }

.privacy-section {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--vc-line);
}

.privacy-section:last-child { border-bottom: 0; padding-bottom: 0; }

.privacy-section__title {
  margin: 0 0 0.75rem;
  font-family: var(--vc-font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--vc-ink);
}

.privacy-section p { margin: 0 0 0.9rem; font-size: 1.02rem; line-height: 1.6; color: var(--vc-ink-soft); max-width: 68ch; }
.privacy-section p:last-child { margin-bottom: 0; }
.privacy-section a { color: var(--vc-cobalt); text-decoration: underline; text-underline-offset: 2px; }

.privacy-list { margin: 0 0 0.9rem; padding-left: 1.15rem; max-width: 68ch; }
.privacy-list li { font-size: 1.02rem; line-height: 1.6; color: var(--vc-ink-soft); margin-bottom: 0.35rem; }

.privacy-callout {
  margin: 0;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--vc-cobalt);
  background: var(--vc-pearl-deep);
  border-radius: 0 var(--vc-radius-sm) var(--vc-radius-sm) 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--vc-ink-soft);
}

/* Shared footer contract, tuned for these pages. */
.page-contact .site-footer,
.page-privacy .site-footer {
  background: var(--vc-ink);
  color: var(--vc-pearl);
  padding: clamp(2.5rem, 5vw, 4rem) var(--vc-pad) 2rem;
}

/* The footer grid, type and control sizes come from site.css; the pages only
   match the footer's content width to their own. */
.page-contact .site-footer__top,
.page-privacy .site-footer__top {
  max-width: var(--vc-maxw);
  margin-inline: auto;
}

.page-contact .site-footer__legal,
.page-privacy .site-footer__legal {
  max-width: var(--vc-maxw);
  margin: 0 auto;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* Focus rings and the skip link come from site.css, which already switches the
   outline to cyan inside the header and the footer. The only additions these
   pages keep are the field-level focus treatments defined above. */

@media (max-width: 62rem) {
  .privacy-body { grid-template-columns: 1fr; }
  .privacy-toc { position: static; }
  .privacy-toc { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
}

/* The menu control and the collapsed nav panel are site.css's: it reveals the
   hamburger at 900px and animates the panel with .is-open, which site.js
   toggles. No page-level breakpoint is needed for them. */

/* On narrow phones the bar cannot hold the wordmark, the compact action and
   the menu control at once, so the header contact action steps aside. That is
   now the shared .site-header__actions .btn--compact rule in site.css, which
   covers this page too, so it is not repeated as a copy here. */

@media (prefers-reduced-motion: reduce) {
  .page-contact .btn,
  .page-privacy .btn,
  .field__input,
  .choice__option { transition: none; }
}