@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');
header {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: initial;
}
.back {
  color: inherit;
  text-decoration: none;
  font: 500 .66rem Manrope, sans-serif;
  letter-spacing: .14em;
  justify-self: start;
}
header > div { justify-self: end; }
body, input, textarea, select, button { font-family: "DM Sans", sans-serif; }
.appointment-video-page {
  position: relative;
  isolation: isolate;
  background: #f1efec;
}
.appointment-video-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: rgba(244,241,237,.42);
  pointer-events: none;
}
.appointment-bg-video {
  position: fixed;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(.84) brightness(.94) blur(.8px);
  opacity: .78;
  transform: scale(1.025);
  pointer-events: none;
}
.appointment-video-page .nav { background: rgba(244,241,237,.88); backdrop-filter: blur(12px); }
.appointment-video-page main { position: relative; }
.brand, .form-intro h1 { font-family: "Cormorant Garamond", serif; }
.brand-full {
  display: flex;
  width: fit-content;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .12rem;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: .055em;
  white-space: nowrap;
}
.brand-full span:last-child {
  margin: 0;
  padding: 0;
  font-family: "DM Sans", sans-serif;
  font-size: .52rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .22em;
}
.required-note {
  margin: 0 0 2.2rem;
  font-size: .7rem;
  letter-spacing: .12em;
  color: #7d4032;
}
.kicker {
  margin: 0;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .16em;
}
.form-intro h1 {
  margin: 1.4rem 0 2rem;
  font-size: clamp(3.1rem, 6.2vw, 6.2rem);
  line-height: .94;
}
label:has(input[required]) > span:first-child::after,
label:has(textarea[required]) > span:first-child::after,
fieldset:has(select[required]) > legend::after,
.consent > span::after {
  content: " *";
  color: #9c3f30;
  font-weight: 500;
}
@media (max-width: 800px) {
  header { grid-template-columns: 1fr auto; }
  header > .brand { display: flex; }
  .brand-full { font-size: 1.48rem; }
  .brand-full span:last-child { font-size: .53rem; }
  .kicker { font-size: .82rem; }
  .form-intro h1 { margin-top: 1.2rem; font-size: 3.25rem; line-height: .96; }
}
