/* Typography roles measured from the Gold Photo Booth page. Its established
   component typography remains untouched; other pages consume these values. */
:root {
  --type-heading: Georgia, "Times New Roman", serif;
  --type-body: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --type-section-size: clamp(2rem, 3.6vw, 3.25rem);
  --type-card-size: 1.45rem;
  --type-feature-size: 1.2rem;
  --type-step-size: var(--type-feature-size);
  --type-body-leading: 1.65;
  --type-intro-leading: 1.8;
  --type-faq-size: 1.0625rem;
  --type-footer-size: 15px;
  --type-body-size: 1rem;
  --type-heading-weight: 500;
  --type-heading-tracking: .01em;
}

/* Shared ivory footer, including the legal pages. */
body #footer.footer {
  --background-color: #f1ece3;
  --surface-color: #f1ece3;
  --default-color: #5d554c;
  --heading-color: #332e28;
  --accent-color: #806027;
  background: #f1ece3;
  color: #5d554c;
  border-top: 1px solid #cfc1aa;
}
body #footer.footer :is(a, p, address, .footer-contact-list) {
  color: #5d554c;
}
body #footer.footer :is(.footer-heading, .sitename) {
  color: #332e28;
}
body #footer.footer .social-links a {
  background: transparent;
  color: #806027;
  border-color: #8a692f;
}
body #footer.footer a:hover {
  color: #806027;
}
body #footer.footer a:focus-visible {
  outline: 2px solid #806027;
  outline-offset: 3px;
}
body #footer.footer .social-links a:is(:hover, :focus-visible) {
  background: #806027;
  border-color: #806027;
  color: #f1ece3;
}

/* Explicit major-section themes. Values come from the approved homepage.
   #marketing-page scopes this layer away from heroes, footers and legal pages. */
#marketing-page .theme-ivory {
  --theme-bg: #f1ece3;
  --theme-heading: #332e28;
  --theme-subheading: #332e28;
  --theme-copy: #5d554c;
  --theme-strong: #332e28;
  --theme-accent: #806027;
  --theme-divider: #cfc1aa;
  --theme-panel: #f1ece3;
  --theme-field: #f1ece3;
  --theme-field-border: #8a692f;
}

#marketing-page .theme-dark {
  --theme-bg: #090909;
  --theme-heading: #dcc188;
  --theme-subheading: #f1e4c2;
  --theme-copy: rgba(245, 241, 232, .74);
  --theme-strong: #f5f1e8;
  --theme-accent: #c7ae6a;
  --theme-divider: rgba(199, 174, 106, .22);
  --theme-panel: #12100d;
  --theme-field: #0c0b09;
  --theme-field-border: rgba(199, 174, 106, .28);
}

#marketing-page main .theme-section:is(.theme-ivory, .theme-dark) {
  --background-color: var(--theme-bg);
  --heading-color: var(--theme-heading);
  --default-color: var(--theme-strong);
  --muted-color: var(--theme-copy);
  --accent-color: var(--theme-accent);
  --surface-color: var(--theme-panel);
  --border-color: var(--theme-divider);
  background: var(--theme-bg);
  color: var(--theme-strong);
  padding-block: 88px;
  font-family: var(--default-font);
}

#marketing-page main .theme-section::before {
  display: none;
}

#marketing-page .theme-section:is(.theme-ivory, .theme-dark) :is(h2, h3, h4) {
  color: var(--theme-subheading);
  font-family: var(--heading-font);
}

#marketing-page .theme-section:is(.theme-ivory, .theme-dark) h2 {
  color: var(--theme-heading);
}

#marketing-page .theme-section:is(.theme-ivory, .theme-dark) :is(p, li, blockquote, figcaption) {
  color: var(--theme-copy);
}

#marketing-page .theme-section:is(.theme-ivory, .theme-dark) :is(a, .eyebrow, .theme-eyebrow, .best-for, .faq-toggle) {
  color: var(--theme-accent);
}

#marketing-page .theme-section:is(.theme-ivory, .theme-dark) :is(h3, h4) a {
  color: inherit;
}

#marketing-page .theme-section a:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 3px;
}

/* Existing editorial cards keep their composition and become surface-aware. */
#marketing-page .theme-section:is(.theme-ivory, .theme-dark) :is(
  .option-card, .wedding-booth-card, .corporate-booth-card, .booth-card,
  .feature-card, .step-card, .inclusion-card, .booth-decision-card,
  .packages-card, .packages-upgrade-card, .editorial-split, .image-story-grid figure,
  .intro-sign, .intro-benefit
) {
  background: var(--theme-panel);
  color: var(--theme-strong);
  border-color: var(--theme-divider);
  border-radius: 0;
  box-shadow: none;
}

#marketing-page .theme-section:is(.theme-ivory, .theme-dark) :is(.feature-card, .step-card, .inclusion-card) {
  background: transparent;
}

#marketing-page .theme-section:is(.theme-ivory, .theme-dark) :is(
  .feature-card i, .intro-benefit i, .step-number
) {
  color: var(--theme-accent);
}

#marketing-page .theme-section .experience-step::before,
#marketing-page .theme-section .included-list li::before {
  color: var(--theme-accent);
}

#marketing-page .theme-section .intro-sign figcaption span {
  color: var(--theme-strong);
}

#marketing-page .theme-section:is(.theme-ivory, .theme-dark) :is(.packages-card__price, .packages-card__price-value, strong) {
  color: var(--theme-strong);
}

#marketing-page .theme-section:is(.theme-ivory, .theme-dark) .packages-card,
#marketing-page .theme-section:is(.theme-ivory, .theme-dark) .booth-decision-card.current {
  border-top-color: var(--theme-accent);
}

#marketing-page .theme-section .packages-card__toggle {
  color: var(--theme-accent);
  background: transparent;
  border-color: var(--theme-divider);
}

/* One FAQ architecture; only its inherited surface tokens change. */
#marketing-page main .theme-section:is(.theme-ivory, .theme-dark) .faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--theme-divider);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

#marketing-page main .theme-section:is(.theme-ivory, .theme-dark) .faq-question {
  background: transparent;
  color: var(--theme-strong);
  font-family: var(--default-font);
  font-size: 1rem;
  line-height: 1.55;
  padding: 21px 4px;
}

#marketing-page main .theme-section:is(.theme-ivory, .theme-dark) .faq-answer {
  color: var(--theme-copy);
  font-size: 1rem;
  line-height: 1.72;
  margin: 0;
  padding: 0 40px 22px 4px;
}

#marketing-page .theme-section .faq-question:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: -2px;
}

/* Shared form geometry matches the homepage; light contact panels use ivory. */
#marketing-page main .theme-section:is(.theme-ivory, .theme-dark) .php-email-form {
  background: var(--theme-panel);
  color: var(--theme-strong);
  border: 1px solid var(--theme-divider);
  border-radius: 18px;
  box-shadow: none;
  padding: clamp(24px, 4vw, 42px);
}

#marketing-page main .theme-section:is(.theme-ivory, .theme-dark) .php-email-form label {
  color: var(--theme-strong);
  font-family: var(--default-font);
  font-size: .88rem;
  font-weight: 600;
}

#marketing-page main .theme-section:is(.theme-ivory, .theme-dark) .php-email-form :is(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea
) {
  background: var(--theme-field);
  color: var(--theme-strong);
  border: 1px solid var(--theme-field-border);
  border-radius: 8px;
  min-height: 50px;
  padding: 12px 14px;
}

#marketing-page main .theme-section:is(.theme-ivory, .theme-dark) .php-email-form textarea {
  min-height: 132px;
}

#marketing-page .theme-section .php-email-form :is(input, textarea)::placeholder {
  color: var(--theme-copy);
  opacity: 1;
}

#marketing-page .theme-section .php-email-form option {
  background: var(--theme-field);
  color: var(--theme-strong);
}

#marketing-page .theme-section .php-email-form :is(input, select, textarea):focus {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

#marketing-page .theme-section .php-email-form :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--theme-accent);
}

/* Existing gold primary action, scoped away from heroes and carousel arrows. */
#marketing-page main .theme-section:is(.theme-ivory, .theme-dark) :is(
  .btn-get-started, .btn-dark-gold, .services-experiences-link, .packages-card__cta, button[type="submit"]
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d8bb79;
  color: #120f09;
  -webkit-text-fill-color: #120f09;
  border: 1px solid #d8bb79;
  border-radius: 6px;
  min-height: 52px;
  padding: 13px 26px;
  box-shadow: none;
  font-family: var(--default-font);
  font-weight: 700;
}

/* Galleries retain their compact reference geometry in either colour mode. */
#marketing-page main .event-gallery.theme-section {
  padding-block: 44px 48px;
}

#marketing-page .theme-section.event-gallery .event-gallery__arrow {
  --home-control-color: var(--theme-accent);
  --home-control-border: var(--theme-accent);
  --home-control-background: transparent;
}

#marketing-page .theme-section.event-gallery .event-gallery__positions .is-active {
  background: var(--theme-accent);
}

@media (min-width: 768px) and (max-width: 1199px) {
  #marketing-page main .theme-section:is(.theme-ivory, .theme-dark):not(.event-gallery) {
    padding-block: 64px;
  }
}

/* Same measured five-column footer correction already used by gallery pages.
   Colours/content remain unchanged; 820px columns + 112px gaps fit 936px. */
@media (min-width: 992px) and (max-width: 1199px) {
  #marketing-page .footer .footer-sitemap {
    column-gap: 28px;
  }
}

@media (max-width: 767px) {
  #marketing-page main .theme-section:is(.theme-ivory, .theme-dark):not(.event-gallery) {
    padding-block: 48px;
  }
  #marketing-page main .event-gallery.theme-section {
    padding-block: 32px 36px;
  }
  #marketing-page main .theme-section:is(.theme-ivory, .theme-dark) .faq-question {
    padding: 19px 2px;
  }
  #marketing-page main .theme-section:is(.theme-ivory, .theme-dark) .faq-answer {
    padding-left: 2px;
    padding-right: 28px;
  }
  #marketing-page main .theme-section:is(.theme-ivory, .theme-dark) .php-email-form {
    padding: 26px 20px;
  }
}

/* Gold's typography hierarchy, shared across the other public pages.
   These rules change type only: no geometry, colour, content or behaviour. */
body:not(.gold-booth-page) {
  font-family: var(--type-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .01em;
}
#marketing-page:not(.gold-booth-page) main .theme-section h2 {
  font-family: var(--type-heading);
  font-size: var(--type-section-size);
  font-weight: var(--type-heading-weight);
  line-height: 1.12;
  letter-spacing: var(--type-heading-tracking);
  text-transform: none;
}
#marketing-page main #contact h2 {
  font-family: var(--type-heading);
  font-size: var(--type-section-size);
  font-weight: var(--type-heading-weight);
  line-height: 1.12;
  letter-spacing: var(--type-heading-tracking);
}
#marketing-page:not(.gold-booth-page) main .theme-section :is(h3,h4) {
  font-family: var(--type-heading);
  font-size: var(--type-card-size);
  font-weight: var(--type-heading-weight);
  line-height: 1.2;
  letter-spacing: var(--type-heading-tracking);
  text-transform: none;
}
#marketing-page:not(.gold-booth-page) main .theme-section :is(.feature-card,.intro-benefit,.guestbook-feature,.proof-summary-card,.inclusion-card) :is(h3,h4) {
  font-size: var(--type-feature-size);
}
#marketing-page:not(.gold-booth-page) main .theme-section :is(.experience-step,.step-card) :is(h3,h4) {
  font-size: var(--type-step-size);
}
#marketing-page:not(.gold-booth-page) main .theme-section :is(p,li) {
  font-family: var(--type-body);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--type-body-leading);
  letter-spacing: .16px;
}
#marketing-page:not(.gold-booth-page) main .theme-section :is(.feature-card,.intro-benefit,.guestbook-feature,.proof-summary-card,.inclusion-card) p {
  line-height: 1.65;
}
#marketing-page:not(.gold-booth-page) main .theme-section :is(.experience-step,.step-card) p {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}
#marketing-page:not(.gold-booth-page) main .theme-section .lead {
  font-size: 1.16rem;
  font-weight: 300;
  line-height: 1.75;
}
#marketing-page:not(.gold-booth-page) main .theme-section :is(.eyebrow,.theme-eyebrow,.best-for) {
  font-family: var(--type-body);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
  text-transform: uppercase;
}
#marketing-page:not(.gold-booth-page) main .theme-section .faq-question {
  font-family: var(--type-body);
  font-size: var(--type-faq-size);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
}
#marketing-page:not(.gold-booth-page) main .theme-section .faq-answer,
#marketing-page:not(.gold-booth-page) main .theme-section .faq-answer p {
  font-family: var(--type-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: .16px;
}
#marketing-page:not(.gold-booth-page) main .theme-section .php-email-form label {
  font-family: var(--type-body);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#marketing-page:not(.gold-booth-page) main .theme-section .php-email-form :is(input,select,textarea) {
  font-family: var(--type-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}
#marketing-page:not(.gold-booth-page) main .theme-section .php-email-form :is(input[type="email"],textarea) {
  font-size: 14px;
}
#marketing-page:not(.gold-booth-page) main .theme-section .php-email-form :is(input,textarea)::placeholder { font: inherit; letter-spacing: inherit; }
#marketing-page:not(.gold-booth-page) main .theme-section :is(.btn-get-started,.btn-dark-gold,.services-experiences-link,.packages-card__cta,button[type="submit"]) {
  font-family: var(--type-body);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body:not(.gold-booth-page) #footer .footer-heading {
  font-family: var(--type-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body:not(.gold-booth-page) #footer .footer-link-list a {
  font-family: var(--type-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .16px;
}
body:not(.gold-booth-page) #footer .footer-contact-list {
  font-family: var(--type-body);
  font-size: var(--type-footer-size);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .16px;
}
/* Legal documents retain document-sized headings, not photographic hero type. */
body.index-page:not([id]) main section :is(h1,h2,h3,h4) {
  font-family: var(--type-heading);
  font-weight: var(--type-heading-weight);
  line-height: 1.2;
  letter-spacing: .01em;
}
body.index-page:not([id]) main section :is(p,li) {
  font-family: var(--type-body);
  font-size: 1rem;
  line-height: 1.75;
}

/* Section introductions follow Gold's gallery/supporting-copy rhythm. */
#marketing-page:not(.gold-booth-page) main .theme-section :is(.event-gallery__intro, .section-title > p, .section-heading > p, .wedding-section-heading > p, .corporate-section-heading > p, .contact-copy > p):not(.eyebrow):not(.theme-eyebrow) {
  line-height: var(--type-intro-leading);
}
/* Subheadings stay subordinate to card titles; Gold's small feature heading supplies the scale. */
#marketing-page:not(.gold-booth-page) main .theme-section h4,
#marketing-page:not(.gold-booth-page) main .theme-section .php-email-form h3 {
  font-size: var(--type-feature-size);
  text-transform: none;
}
#marketing-page:not(.gold-booth-page) main .theme-section :is(.form-reassurance, .service-options-note, .form-note, .form-text, .contact-disclaimer, .contact-note, small) {
  font-family: var(--type-body);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .01em;
  text-transform: none;
}
@media (max-width: 767px) {
  #marketing-page:not(.gold-booth-page) main .theme-section :is(.event-gallery__intro, .section-title > p, .section-heading > p, .wedding-section-heading > p, .corporate-section-heading > p, .contact-copy > p):not(.eyebrow):not(.theme-eyebrow) {
    --type-intro-leading: 1.66;
  }
}

/* Keep FAQ separators between questions, without a trailing divider. */
#marketing-page main #faq .row > :last-child > .faq-item:last-child {
  border-bottom: 0;
}

/* One responsive enquiry grid, retaining the existing field and group markup. */
#marketing-page #contact .php-email-form > .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}
#marketing-page #contact .php-email-form > .row > div {
  min-width: 0;
  width: auto;
  max-width: none;
  margin-top: 0;
  padding-inline: 0;
}
#marketing-page #contact .php-email-form > .row > :is(.col-12, .col-md-12) {
  grid-column: 1 / -1;
}
/* Pair a venue followed by event type; an unpaired duration gets a full row. */
#marketing-page #contact .php-email-form > .row > div:has(> input[name="venue"]):has(+ div > select[name="event_type"]) {
  grid-column: auto;
}
#marketing-page #contact .php-email-form > .row > div:has(> select[name="booking_duration"]):has(+ div > textarea) {
  grid-column: 1 / -1;
}
/* Equal-height field wrappers align controls even when one label wraps. */
#marketing-page #contact .php-email-form > .row > div:has(> .form-control) {
  display: flex;
  flex-direction: column;
}
#marketing-page #contact .php-email-form .form-control {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#marketing-page #contact .php-email-form > .row > div > .form-control {
  margin-top: auto;
}
@media (max-width: 767px) {
  #marketing-page #contact .php-email-form > .row {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Keep email and message controls at the existing 16px input scale on phones. */
  #marketing-page #contact .php-email-form .form-control {
    font-size: 16px;
  }
}

/* Progressive enhancement: the original complete form remains the desktop fallback. */
#marketing-page #contact .php-email-form .contact-wizard__ui {
  display: none;
}
@media (max-width: 767px) {
  #marketing-page #contact .php-email-form.contact-wizard {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  #marketing-page #contact .contact-wizard .contact-wizard__ui {
    display: block;
  }
  #marketing-page #contact .php-email-form.contact-wizard [data-form-step]:not([data-step-active]),
  #marketing-page #contact .contact-wizard > .contact-wizard__empty-row,
  #marketing-page #contact .contact-wizard .contact-wizard__original-heading,
  #marketing-page #contact .contact-wizard .contact-wizard__navigation--finished,
  #marketing-page #contact .contact-wizard[data-submitted="true"] .contact-wizard__ui {
    display: none;
  }
  #marketing-page #contact .contact-wizard .contact-wizard__header h3 {
    margin: 0;
    scroll-margin-top: 100px;
    font-family: var(--type-heading);
    font-size: var(--type-feature-size);
    font-weight: var(--type-heading-weight);
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: none;
  }
  #marketing-page #contact .contact-wizard .contact-wizard__progress {
    color: var(--theme-accent);
    margin: 0 0 8px;
  }
  #marketing-page #contact .contact-wizard .contact-wizard__selection {
    margin: 0;
  }
  #marketing-page #contact .contact-wizard .contact-wizard__navigation {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  #marketing-page #contact .contact-wizard .contact-wizard__navigation--finished {
    display: none;
  }
  #marketing-page #contact .contact-wizard :is(.contact-wizard__back, .contact-wizard__continue) {
    min-height: 52px;
    padding: 13px 20px;
    border: 1px solid #d8bb79;
    border-radius: 6px;
    background: #d8bb79;
    color: #120f09;
    font: 700 .78rem/1.65 var(--type-body);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  #marketing-page #contact .contact-wizard .contact-wizard__back {
    background: transparent;
    color: var(--theme-accent);
  }
  #marketing-page #contact .contact-wizard .contact-wizard__continue {
    margin-left: auto;
  }
  #marketing-page #contact .contact-wizard .contact-wizard__final-back {
    margin: 0 0 16px;
  }
  #marketing-page #contact .contact-wizard button:disabled {
    cursor: default;
  }
  #marketing-page #contact .contact-wizard > .form-check-list {
    gap: 12px 16px;
  }
  #marketing-page #contact .contact-wizard .form-check-list > div {
    display: contents;
  }
  #marketing-page #contact .contact-wizard .form-check-list br {
    display: none;
  }
  #marketing-page #contact .contact-wizard .form-check-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 44px;
  }
  #marketing-page #contact .contact-wizard .form-check-list input {
    flex-shrink: 0;
  }
}
@media (min-width: 390px) and (max-width: 767px) {
  #marketing-page #contact .contact-wizard > .form-check-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}