/* ================================================
   vairee design system — reusable components
   Nav, buttons, cards, inputs, modal
   ================================================ */
 
/* ── NAV (mobile-first) ──────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: calc(12px + var(--safe-top)) var(--page-pad-r) 12px var(--page-pad-x);
  min-height: calc(var(--nav-h) + var(--safe-top));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 4, 7, 0.92) 0%, rgba(5, 4, 7, 0.55) 70%, transparent 100%);
}
.nav > * { pointer-events: auto; }
.nav.nav-on-light {
  mix-blend-mode: normal;
  background: linear-gradient(180deg, rgba(245, 241, 235, 0.97) 0%, rgba(245, 241, 235, 0.7) 80%, transparent 100%);
}
.nav.nav-on-light .wordmark { color: var(--ink); }
.nav.nav-on-light .nav-right { color: var(--ink); }
.nav.nav-on-light .nav-path-switch {
  color: var(--ink);
  border-color: rgba(21, 17, 13, 0.18);
}
 
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
/* Orange use #1 — the only orange dot */
.wordmark::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
  animation: pulse-dot 3.5s ease-in-out infinite;
  margin-left: 2px;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.9; }
}
 
.nav-right {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 1;
  min-width: 0;
}
.nav-right a,
.nav-path-switch {
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.nav-right a:hover { opacity: 0.55; }

.nav-path-switch {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: rgba(236, 227, 210, 0.06);
  border: 1px solid rgba(236, 227, 210, 0.2);
  border-radius: 999px;
  padding: 10px 14px;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-path-switch:active {
  background: rgba(236, 227, 210, 0.12);
  transform: scale(0.98);
}
.nav-access {
  flex-shrink: 0;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  padding: 10px 4px;
  color: inherit;
  letter-spacing: 2px;
}
.nav-access-long { display: none; }
.nav-access-short { display: inline; }

@media (min-width: 480px) {
  .nav-access-long { display: inline; }
  .nav-access-short { display: none; }
}

/* Mobile path switch bar — thumb zone below nav */
.nav-path-bar {
  position: fixed;
  top: calc(var(--nav-h) + var(--safe-top));
  left: 0;
  right: 0;
  z-index: 58;
  padding: 8px var(--page-pad-r) 8px var(--page-pad-x);
  pointer-events: none;
}
.nav-path-bar button {
  pointer-events: auto;
  width: 100%;
  min-height: var(--touch-min);
  font: inherit;
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(236, 227, 210, 0.22);
  background: rgba(8, 7, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.nav-path-bar button:active { transform: scale(0.99); background: rgba(18, 16, 24, 0.95); }
.nav-on-light + .nav-path-bar button,
body:has(.nav-on-light) .nav-path-bar button {
  border-color: rgba(21, 17, 13, 0.15);
  background: rgba(245, 241, 235, 0.92);
  color: var(--ink);
}

@media (max-width: 760px) {
  .nav-path-switch { display: none; }
  body:has(.nav-path-bar) .scroll-track {
    top: calc(var(--nav-h) + var(--safe-top) + var(--path-bar-h));
  }
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .modal-input { font-size: 16px; /* prevents iOS zoom on focus */ }
}

@media (min-width: 761px) {
  .nav-path-bar { display: none; }
  .nav {
    padding: 26px 40px;
    min-height: 0;
    font-size: 11px;
    letter-spacing: 2.4px;
    mix-blend-mode: difference;
    background: transparent;
  }
  .nav.nav-on-light { background: transparent; }
}

/* ── SCROLL TRACK (below nav) ────────────────── */
.scroll-track {
  position: fixed;
  top: calc(var(--nav-h) + var(--safe-top) + 4px);
  left: 0; right: 0;
  height: 1px;
  background: rgba(236, 227, 210, 0.05);
  z-index: 59;
  pointer-events: none;
}
.scroll-fill {
  height: 100%;
  background: rgba(236, 227, 210, 0.20);
  transition: width 0.1s linear;
}
.scroll-dot {
  position: absolute;
  top: -2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(236, 227, 210, 0.45);
  transform: translateX(-50%);
  transition: left 0.1s linear;
}
 
/* ── BUTTONS ─────────────────────────────────── */
/* Primary — used ONLY on hiring panel CTA (orange use #3) */
.btn-primary {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  padding: 17px 28px;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--orange);
  color: #fff;
  box-shadow: 0 16px 48px -12px rgba(250, 135, 20, 0.30);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); background: #e07810; }
}
.btn-primary:active { transform: scale(0.98); background: #e07810; }
.btn-primary,
.btn-ghost,
.path-choice {
  min-height: var(--touch-min);
}
 
/* Ghost — used on talent panel CTA and secondary actions */
.btn-ghost {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  padding: 17px 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(236, 227, 210, 0.18);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
@media (hover: hover) {
  .btn-ghost:hover {
    border-color: rgba(236, 227, 210, 0.35);
    background: rgba(236, 227, 210, 0.04);
  }
}
.btn-ghost:active {
  background: rgba(236, 227, 210, 0.08);
  transform: scale(0.98);
}
.btn-ghost-on-light {
  color: var(--ink);
  border-color: rgba(21, 17, 13, 0.2);
}
.btn-ghost-on-light:active {
  background: rgba(21, 17, 13, 0.06);
}
 
/* Text link with underline */
.btn-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(236, 227, 210, 0.22);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-text:hover { border-color: rgba(236, 227, 210, 0.5); }
.path-story-hiring .btn-text,
.path-editorial--hiring .btn-text {
  color: var(--ink-2);
  border-bottom-color: rgba(21, 17, 13, 0.2);
}
.path-story-hiring .btn-text:hover,
.path-editorial--hiring .btn-text:hover {
  color: var(--ink);
  border-bottom-color: rgba(21, 17, 13, 0.4);
}
 
/* ── MODAL ───────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 4, 7, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-box {
  background: #0e0c14;
  border: 1px solid rgba(250, 135, 20, 0.15);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 32px var(--page-pad-r) calc(28px + var(--safe-bottom)) var(--page-pad-x);
  max-width: 440px;
  width: 100%;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-out);
}
.modal-overlay.open .modal-box {
  transform: translateY(0);
}
@media (min-width: 761px) {
  .modal-overlay {
    align-items: center;
    padding: 24px;
  }
  .modal-box {
    border-radius: var(--r-lg);
    padding: 48px 40px;
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
  }
  .modal-overlay.open .modal-box {
    transform: translateY(0);
    opacity: 1;
  }
}
.modal-close {
  position: absolute;
  top: 18px; right: 20px;
  font-size: 20px;
  color: var(--paper-3);
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}
.modal-close:hover { color: var(--paper); }
.modal-eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 14px;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--paper);
  margin-bottom: 10px;
  line-height: 0.95;
}
.modal-body {
  font-size: 14px;
  font-weight: 300;
  color: var(--paper-2);
  line-height: 1.6;
  margin-bottom: 28px;
}
.modal-input {
  width: 100%;
  background: rgba(236, 227, 210, 0.04);
  border: 1px solid rgba(236, 227, 210, 0.12);
  border-radius: var(--r-md);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  padding: 14px 16px;
  outline: none;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.modal-input:focus  { border-color: rgba(236, 227, 210, 0.35); }
.modal-input::placeholder { color: var(--paper-3); }
.modal-note {
  font-size: 11px;
  font-weight: 300;
  color: var(--paper-3);
  text-align: center;
  margin-top: 14px;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
.modal-box--talent,
.modal-box--hiring {
  max-width: 520px;
  max-height: min(92dvh, 880px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Shared: light form controls (readable on dark + light panels; fixes iOS dark UI) */
.modal-box--talent .modal-form,
.modal-box--hiring .modal-form {
  color-scheme: light;
}
.modal-box--talent .modal-input,
.modal-box--talent select.modal-input,
.modal-box--talent textarea.modal-input,
.modal-box--hiring .modal-input,
.modal-box--hiring select.modal-input,
.modal-box--hiring textarea.modal-input {
  background-color: #ffffff;
  color: #15110d;
  border: 1px solid rgba(21, 17, 13, 0.18);
  -webkit-appearance: none;
  appearance: none;
}
.modal-box--talent .modal-input::placeholder,
.modal-box--hiring .modal-input::placeholder {
  color: #7a7268;
}
.modal-box--talent .modal-input:focus,
.modal-box--hiring .modal-input:focus {
  border-color: rgba(21, 17, 13, 0.4);
  outline: 2px solid rgba(250, 135, 20, 0.25);
  outline-offset: 0;
}
.modal-box--talent select.modal-input,
.modal-box--hiring select.modal-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2315110d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.modal-box--talent select.modal-input option,
.modal-box--hiring select.modal-input option {
  background: #ffffff;
  color: #15110d;
}
.modal-box--talent .modal-input:-webkit-autofill,
.modal-box--hiring .modal-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-text-fill-color: #15110d;
}

/* Talent waitlist — dark panel, light fields + white copy */
.modal-box--talent {
  background: #0a0807;
  border-color: rgba(236, 227, 210, 0.12);
  color: #ece3d2;
}
.modal-box--talent .modal-close {
  color: rgba(236, 227, 210, 0.7);
}
.modal-box--talent .modal-close:hover { color: #ece3d2; }
.modal-box--talent .modal-eyebrow,
.modal-box--talent .modal-label {
  color: #ece3d2;
}
.modal-box--talent .modal-label-note {
  color: rgba(236, 227, 210, 0.88);
}
.modal-box--talent .modal-title { color: #ece3d2; }
.modal-box--talent .modal-body,
.modal-box--talent .modal-body-stack p,
.modal-box--talent .modal-field-hint {
  color: #ece3d2;
  font-weight: 400;
}
.modal-box--talent .modal-field-hint a { color: var(--orange); }
.modal-box--talent .modal-note,
.modal-box--talent .modal-legal {
  color: rgba(236, 227, 210, 0.9);
}
.modal-box--talent .modal-legal a {
  color: #ece3d2;
  text-decoration: underline;
}

/* Hiring waitlist — parchment panel (explicit hex if tokens fail to load) */
.modal-box--hiring {
  background: #f5f1eb;
  border-color: rgba(21, 17, 13, 0.1);
  color: #15110d;
}
.modal-box--hiring .modal-close {
  color: #7a7268;
}
.modal-box--hiring .modal-close:hover { color: #15110d; }
.modal-box--hiring .modal-eyebrow {
  color: #7a7268;
}
.modal-box--hiring .modal-title {
  color: #15110d;
}
.modal-box--hiring .modal-body,
.modal-box--hiring .modal-body-stack p {
  color: #3d3832;
}
.modal-box--hiring .modal-label {
  color: #15110d;
}
.modal-box--hiring .modal-label-note {
  color: #7a7268;
}
.modal-box--hiring .modal-field-hint {
  color: #3d3832;
}
.modal-box--hiring .modal-field-hint a { color: var(--orange); }
.modal-box--hiring .modal-legal {
  color: #7a7268;
}
.modal-box--hiring .modal-legal a {
  color: #3d3832;
}
.modal-box--hiring .modal-note {
  color: #7a7268;
}
.modal-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.45;
}
.modal-body-stack {
  margin-bottom: 20px;
}
.modal-body-stack p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
}
.modal-body-stack p:last-child { margin-bottom: 0; }
.modal-form { margin-top: 4px; }
.modal-field {
  display: block;
  margin-bottom: 14px;
}
.modal-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 14px;
}
.modal-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 6px;
}
.modal-label-note {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--paper-4, var(--paper-3));
}
.modal-field-hint {
  font-size: 12px;
  font-weight: 300;
  color: var(--paper-2);
  line-height: 1.5;
  margin: 0 0 8px;
}
.modal-field-hint a {
  color: var(--orange);
  text-decoration: underline;
}
.modal-field .modal-input { margin-bottom: 0; }
.modal-legal {
  font-size: 10px;
  font-weight: 300;
  color: var(--paper-3);
  line-height: 1.45;
  margin: 4px 0 16px;
}
.modal-legal a {
  color: var(--paper-2);
  text-decoration: underline;
  word-break: break-all;
}
.modal-submit {
  width: 100%;
  margin-top: 4px;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.modal-box--talent .modal-submit.panel-cta-ghost {
  color: var(--paper);
  border: 1px solid rgba(236, 227, 210, 0.12);
  background: transparent;
}
.modal-box--talent .modal-submit.panel-cta-ghost .arrow {
  color: var(--paper);
}
.modal-box--hiring .modal-submit.panel-cta {
  background: var(--orange);
  color: #fff;
  border: none;
  box-shadow: 0 12px 40px -12px rgba(250, 135, 20, 0.28);
}
.modal-box--hiring .modal-submit.panel-cta .arrow {
  color: #fff;
}
@media (hover: hover) {
  .modal-box--talent .modal-submit.panel-cta-ghost:hover {
    border-color: rgba(236, 227, 210, 0.22);
    background: rgba(236, 227, 210, 0.04);
  }
  .modal-box--hiring .modal-submit.panel-cta:hover {
    background: #e07810;
    transform: translateY(-1px);
  }
}
.modal-box--talent .modal-submit.panel-cta-ghost:active,
.modal-box--hiring .modal-submit.panel-cta:active {
  transform: scale(0.98);
}
button.panel-cta,
button.panel-cta-ghost {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}