.invitation-section {
  --form-scroll-panel: 110px;
  --form-gap: 22px;
  --form-gap-small: 18px;
  --form-message-height: 100px;
  --form-consent-height: 28px;
  --form-check-size: 20px;
  --form-inset: 14px;
  --form-control-height: 54px;
  --form-title-gap: 10px;
  --form-scroll-top: 120px;
  --form-scroll-bottom: 40px;
  --form-mobile-inset: 15px;
  --form-mobile-label-inset: 44px;
  --form-choice-height: 72px;
  --form-border: #8b847a;
  --form-error: #a51e28;
  --form-soft-blue: rgba(var(--blue-rgb), .06);
}
.invitation-section .contact-panel { scroll-margin-top: var(--form-scroll-panel); }
.invitation-section .form-intro h2, .invitation-section .form-intro h3 { text-transform: none; letter-spacing: -.035em; }
.invitation-section .form-intro p { max-width: 56ch; line-height: 1.65; }
.invitation-section .form-grid { gap: var(--form-gap) var(--form-gap-small); }
.invitation-section .form-field label, .invitation-section .form-options > legend { color: var(--ink); text-transform: none; font-size: .875rem; font-weight: 750; line-height: 1.5; }
.invitation-section .form-field label span { color: var(--muted); font-weight: 450; }
.invitation-section .form-field input, .invitation-section .form-field textarea { border-color: var(--form-border); font-size: 1rem; font-weight: 450; }
.invitation-section .form-field textarea { min-height: var(--form-message-height); }
.invitation-section .field-hint { font-size: .8125rem; font-weight: 450; line-height: 1.5; }
.invitation-section .option-card { padding: 36px var(--form-inset) 16px; align-content: start; border-color: var(--form-border); }
.invitation-section .option-card input { opacity: 1; pointer-events: auto; top: 13px; left: var(--form-inset); width: 17px; height: 17px; margin: 0; accent-color: var(--wt-blue); }
.invitation-section .option-card strong { font-size: .9375rem; line-height: 1.35; font-weight: 800; }
.invitation-section .option-card small { font-size: .75rem; font-weight: 500; line-height: 1.5; }
.invitation-section .option-card:has(input:checked) { background: var(--form-soft-blue); }
.invitation-section .option-card:has(input:focus-visible), .invitation-section input:focus-visible, .invitation-section textarea:focus-visible, .invitation-section button:focus-visible, .invitation-section .form-status:focus-visible { outline: var(--focus-width) solid var(--wt-blue); outline-offset: var(--focus-offset); }
.invitation-section .checkbox-field { font-size: .8125rem; font-weight: 450; line-height: 1.65; min-height: var(--form-consent-height); }
.invitation-section .checkbox-field input { width: var(--form-check-size); height: var(--form-check-size); }
.invitation-section .form-hint { font-size: .8125rem; font-weight: 450; line-height: 1.6; }
.invitation-section .form-actions { align-items: flex-start; gap: var(--form-inset); }
.invitation-section .form-actions .button { display: inline-flex; gap: var(--form-gap); justify-content: space-between; min-height: var(--form-control-height); }
.invitation-section .form-actions .button:disabled { opacity: .7; cursor: wait; }
.invitation-section .field-error { color: var(--form-error); font-size: .8125rem; font-weight: 600; line-height: 1.5; }
.invitation-section .field-error.full { grid-column: 1 / -1; }
.invitation-section [aria-invalid="true"] { border: 2px solid var(--form-error); }
.invitation-section [hidden] { display: none !important; }
.invitation-section .form-status { font-weight: 600; line-height: 1.65; }
.invitation-section .contact-black { justify-content: flex-start; }
.invitation-section .contact-fact small { color: var(--paper); font-size: .8125rem; font-weight: 450; line-height: 1.6; }
.invitation-section .contact-family h4 { font-size: 1rem; line-height: 1.4; margin: 0 0 var(--form-title-gap); }
.invitation-section .contact-family p { font-size: .875rem; line-height: 1.65; }
.invitation-section .contact-actions { margin-top: auto; }
.invitation-section input, .invitation-section textarea, .invitation-section button { scroll-margin-block: var(--form-scroll-top) var(--form-scroll-bottom); }
@media (max-width: 600px) {
  .invitation-section .option-card { padding: var(--form-mobile-inset) var(--form-mobile-inset) var(--form-mobile-inset) var(--form-mobile-label-inset); min-height: var(--form-choice-height); }
  .invitation-section .option-card input { top: var(--form-gap-small); left: var(--form-mobile-inset); }
  .invitation-section .form-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .invitation-section .option-card, .invitation-section input, .invitation-section textarea { transition: none; }
}

html.contact-confirmation-open { overflow: hidden; }
.contact-confirmation {
  width: min(520px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.contact-confirmation::backdrop { background: rgba(9, 9, 9, .7); }
.contact-confirmation-content { position: relative; padding: 36px; text-align: center; }
.contact-confirmation-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: inherit; font-size: 30px; line-height: 1; cursor: pointer; }
.contact-confirmation-close:hover { background: var(--line); color: var(--ink); }
.contact-confirmation-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.contact-confirmation-icon svg { width: 32px; height: 32px; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-confirmation .contact-confirmation-eyebrow { margin: 0 0 8px; color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.contact-confirmation h2 { margin: 0 0 16px; font-size: clamp(1.65rem, 5vw, 2rem); line-height: 1.15; letter-spacing: -.025em; text-transform: none; text-wrap: balance; }
.contact-confirmation p { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.65; }
.contact-confirmation-email { display: grid; gap: 5px; margin: 24px 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.contact-confirmation-email > span { color: var(--muted); font-size: .8125rem; }
.contact-confirmation-email > strong { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.contact-confirmation .contact-confirmation-hint { margin-top: 20px; color: var(--muted); font-size: .875rem; }
.contact-confirmation-done { width: 100%; min-height: 50px; margin-top: 28px; justify-content: center; }
.contact-confirmation button:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
@media (max-width: 600px) {
  .contact-confirmation-content { padding: 32px 24px 24px; }
}