/* Contact / demo booking page. Not in scss: gulp's clean task wipes assets/css except the files it lists. */
.contact-page {
  --ct-bg: #f1f1f1;
  --ct-ink: #1c1c1e;
  --ct-muted: #4b5563;
  --ct-faint: #7b7f87;
  --ct-card: #fff;
  --ct-field: #e9e5dc;
  --ct-input-bg: #d6f1ee;
  --ct-panel: #ece9e1;
  --ct-panel-border: #ddd8cb;
  --ct-line: #d9d4c7;
  --ct-accent: #2563eb;
  --ct-accent-soft: #a9bef3;
  --ct-required: #b94a3b;
  --ct-error: #b42318;
  background: var(--ct-bg);
  color: var(--ct-ink);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.dark-mode .contact-page {
  --ct-bg: #0e1218;
  --ct-ink: #eef0f3;
  --ct-muted: #aab1bc;
  --ct-faint: #8b93a1;
  --ct-card: #171c24;
  --ct-field: #232a35;
  --ct-input-bg: #1b3a3d;
  --ct-panel: #1d232d;
  --ct-panel-border: #2b3340;
  --ct-line: #323b49;
  --ct-accent: #5b8cff;
  --ct-accent-soft: #3a4d7a;
  --ct-required: #ff8a78;
  --ct-error: #ff8a78;
}

.ct-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 250px 24px 96px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  align-items: start;
}
.ct-wrap *, .ct-wrap *::before, .ct-wrap *::after { box-sizing: border-box; }

/* Intro column */
.ct-title {
  font-family: var(--si-font-sans-serif);
  font-weight: 700;
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  color: var(--ct-ink);
}
.ct-lede { font-size: 1.1rem; line-height: 1.55; color: var(--ct-muted); margin: 0 0 32px; max-width: 30rem; }
.ct-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 26rem; }
.ct-links li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; color: var(--ct-muted); }
.ct-links .ct-chip {
  width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--ct-card);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--ct-ink);
}
.ct-links a {
  margin-left: auto; font-weight: 600; font-size: 0.9rem; color: var(--ct-accent); text-decoration: none; white-space: nowrap;
}
.ct-links a:hover { text-decoration: underline; }

/* Form card */
.ct-card {
  background: var(--ct-card);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 48px rgba(40, 36, 24, 0.08);
}
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; }
.ct-full { grid-column: 1 / -1; }
.ct-field label, .ct-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ct-muted); margin-bottom: 6px; }
.ct-req { color: var(--ct-required); }
.ct-input, .ct-select, .ct-textarea {
  width: 100%;
  border: 2px solid #a0b9bc;
  background: #f2faff;
  color: var(--ct-ink);
  border-radius: 6px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  &:hover {
    border: 2px solid #a6cbd0;
    background-color: #e5f7ff;
  }
  &:focus {
    border: 2px solid #5699be !important;
    outline: 1px solid #cdebfb !important;
    background-color: #e2f6ff;
    box-shadow: 2px 2px 2px 1px #00000020 !important;
  }
}
.ct-input::placeholder, .ct-textarea::placeholder { color: var(--ct-faint); opacity: 0.85; }
.ct-input:focus, .ct-select:focus, .ct-textarea:focus {
  border-color: var(--ct-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-accent) 22%, transparent);
}
.ct-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b7f87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.ct-textarea { min-height: 84px; resize: vertical; }
.ct-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Scheduler */
.ct-sched {
  border: 2px solid #a0b9bc;
  background: #f2faff;
  border-radius: 6px;
  padding: 10px 10px 9px 12px;
  &:hover {
    border: 2px solid #a6cbd0;
    background-color: #e5f7ff;
  }
  &:focus {
    border: 2px solid #5699be !important;
    outline: 1px solid #cdebfb !important;
    background-color: #e2f6ff;
    box-shadow: 2px 2px 2px 1px #00000020 !important;
  }
}
.ct-sched-head {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ct-sched-head:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 4px; border-radius: 6px; }
.ct-sched-text { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ct-sched-chev { font-size: 1.3rem; color: var(--ct-muted); transition: transform 0.3s ease; }
.ct-sched.is-open .ct-sched-chev { transform: rotate(180deg); }
.ct-sched-panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 0.35s ease, visibility 0s 0.35s;
}
.ct-sched.is-open .ct-sched-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.35s ease; }
.ct-sched-inner { overflow: hidden; min-height: 0; }
.ct-sched-content { padding-top: 14px; }
.ct-fade { animation: ct-fade-in 0.4s ease backwards; }
@keyframes ct-fade-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .ct-fade { animation: none; }
  .ct-sched-panel, .ct-sched-chev { transition: none; }
}
.ct-sched-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; margin: 0; color: var(--ct-ink); }
.ct-sched-tz { font-size: 0.75rem; color: var(--ct-faint); }
.ct-sched-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.ct-cal { background: var(--ct-card); border: 1px solid var(--ct-panel-border); border-radius: 14px; padding: 12px; }
.ct-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ct-cal-month { font-weight: 700; font-size: 0.85rem; }
.ct-cal-nav {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--ct-line); background: transparent;
  color: var(--ct-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 1.1rem;
}
.ct-cal-nav:disabled { opacity: 0.35; cursor: default; }
.ct-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; text-align: center; }
.ct-cal-dow { font-size: 0.65rem; font-weight: 700; color: var(--ct-faint); padding: 4px 0; }
.ct-cal-day {
  height: 28px; width: 28px; margin: 0 auto; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--ct-ink); cursor: pointer; padding: 0;
}
.ct-cal-day:hover:not(:disabled):not(.is-selected) { background: var(--ct-field); }
.ct-cal-day:disabled { color: var(--ct-faint); opacity: 0.55; font-weight: 500; cursor: default; }
.ct-cal-day.is-selected { background: var(--ct-accent); color: #fff; }
.ct-cal-day:focus-visible, .ct-slot:focus-visible, .ct-cal-nav:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 2px; }

.ct-times-date { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; margin: 2px 0 10px; }
.ct-slots {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 232px; overflow-y: auto; padding-right: 6px;
  align-content: start;
}
.ct-slot {
  border: 1px solid var(--ct-line); background: var(--ct-card); color: var(--ct-ink); border-radius: 10px;
  padding: 8px 4px; font: inherit; font-size: 0.8rem; cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.ct-slot:hover { border-color: var(--ct-accent); }
.ct-slot.is-selected { background: var(--ct-accent); border-color: var(--ct-accent); color: #fff; }
.ct-sched-note { font-size: 0.78rem; color: var(--ct-faint); margin: 12px 0 0; }
.ct-sched-empty { font-size: 0.85rem; color: var(--ct-muted); padding: 12px 0; grid-column: 1 / -1; }

/* Submit row */
.ct-submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ct-btn { gap: 8px; --si-btn-disabled-opacity: 0.5; }
.ct-hint { font-size: 0.78rem; color: var(--ct-faint); }
.ct-status { font-size: 0.85rem; color: var(--ct-error); margin: 12px 0 0; min-height: 1.2em; }

/* Success */
.ct-done { text-align: center; padding: 32px 12px; }
.ct-done i { font-size: 2.5rem; color: var(--ct-accent); }
.ct-done h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 2rem; margin: 8px 0 12px; color: var(--ct-ink); }
.ct-done p { color: var(--ct-muted); margin: 0 auto 8px; max-width: 26rem; line-height: 1.55; }

@media (max-width: 991.98px) {
  .ct-wrap { grid-template-columns: 1fr; gap: 36px; padding: 130px 20px 72px; }
}
@media (max-width: 575.98px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-sched-body { grid-template-columns: 1fr; }
  .ct-sched-text { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ct-card { padding: 18px; }
}