/* A three-second cinematic entrance, then the existing inquiry form. */
.quote-dialog {
  width: min(820px, calc(100vw - 40px));
  max-height: calc(100svh - 40px);
  padding: 0;
  margin: auto;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 100px rgb(0 0 0 / 30%);
}
.quote-dialog[open] { animation: dialog-in 400ms var(--ease); }
.quote-dialog::backdrop { background: rgb(20 16 10 / 76%); backdrop-filter: blur(10px); }
.quote-dialog > .dialog-close {
  top: 16px;
  right: 18px;
  z-index: 6;
  background: var(--surface);
  color: var(--ink);
}
.quote-dialog.quote-opening {
  width: 100vw;
  height: 100svh;
  max-width: 100vw;
  max-height: 100svh;
  margin: 0;
  border-radius: 0;
  background: #17110c;
  color: #fff;
  animation: none;
}
.quote-opening > .dialog-close {
  color: #fff;
  background: rgb(34 23 15 / 78%);
  top: 26px;
  right: 28px;
}
.quote-transition { position: absolute; inset: 0; opacity: 1; transition: opacity 300ms ease; }
.quote-transition[hidden], .quote-content[hidden] { display: none; }
.quote-transition .intro-scene img { width: 100%; height: 100%; object-fit: cover; animation-duration: 3s; }
.quote-transition .intro-progress { animation-duration: 2.7s; }
.quote-transition .intro-dim {
  background: linear-gradient(90deg, rgb(26 19 10 / 84%), rgb(26 19 10 / 48%) 48%, transparent 88%), linear-gradient(0deg, rgb(26 19 10 / 55%), transparent 82%);
}
.quote-transition .quote-passion-copy {
  left: 7%;
  right: auto;
  bottom: 17%;
  width: min(850px, 78%);
  padding: 0;
  text-align: left;
}
.quote-passion-copy > span {
  font: 500 12px/1.4 var(--sans);
  letter-spacing: .22em;
  color: #f3dba4;
  text-shadow: none;
}
.quote-passion-copy p {
  font: italic 400 clamp(44px, 5.8vw, 88px)/1.05 var(--serif);
  letter-spacing: -.025em;
  color: #fff9eb;
  max-width: 800px;
  margin: 24px 0;
  text-wrap: balance;
}
.quote-passion-copy small {
  font: 400 clamp(17px, 1.65vw, 24px)/1.5 var(--sans);
  letter-spacing: 0;
  color: #f4dfb1;
  margin-top: 20px;
}
.quote-transition .intro-skip { top: 29px; right: 90px; }
.quote-fading .quote-transition { opacity: 0; }
.quote-content {
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 48px 48px 38px;
  scrollbar-color: var(--gold-light) transparent;
}
.quote-heading { padding-right: 24px; margin-bottom: 30px; }
.quote-heading .section-label { margin-bottom: 18px; font-size: 12px; }
.quote-heading h2 { font-size: clamp(36px, 4.3vw, 52px); line-height: 1.06; margin-bottom: 16px; }
.quote-heading p { font-size: 16px; color: var(--muted); max-width: 560px; }
.quote-heading h2:focus { outline: none; }
.quote-dialog .inquiry-form { opacity: 1; transform: none; }
.quote-dialog .inquiry-form input,
.quote-dialog .inquiry-form select,
.quote-dialog .inquiry-form textarea { border-bottom-color: var(--gold-light); }
.quote-dialog .checkboxes label { border-color: var(--gold-light); }

@media (max-width: 640px) {
  .quote-dialog { width: calc(100vw - 20px); max-height: calc(100svh - 20px); border-radius: 20px; }
  .quote-content { max-height: calc(100svh - 20px); padding: 66px 22px 28px; }
  .quote-heading { padding-right: 0; }
  .quote-heading h2 { font-size: 38px; }
  .quote-opening > .dialog-close { top: 18px; right: 18px; }
  .quote-transition .intro-skip { top: 18px; right: 70px; }
  .quote-transition .quote-passion-copy { left: 7%; bottom: 16%; width: 86%; }
  .quote-transition .quote-passion-copy > span { font-size: 10px; }
  .quote-transition .quote-passion-copy p { font-size: clamp(40px, 10.5vw, 62px); max-width: 460px; margin: 20px 0; }
  .quote-transition .quote-passion-copy small { font-size: 17px; letter-spacing: 0; margin-top: 20px; }
  .quote-transition .intro-scene img { object-position: 57% 50%; }
  .quote-transition .intro-dim { background: linear-gradient(0deg, rgb(26 19 10 / 88%), rgb(26 19 10 / 14%) 95%); }
}