/* Contact page. Mobile-first; tokens come from the shared stylesheet with fallbacks. */
body.page-contact { margin: 0; background: var(--tgs-bg, #FAF8FF); color: var(--tgs-ink, #1B1030); font-family: var(--tgs-font-body, Inter, system-ui, sans-serif); }
.page-contact *, .page-contact *::before, .page-contact *::after { box-sizing: border-box; }
.contactContainer { width: min(80rem, 100% - 2 * var(--tgs-gutter, 1rem)); margin-inline: auto; }
.page-contact h1, .page-contact h2, .page-contact h3 { margin: 0; font-family: var(--tgs-font-head, 'Cormorant Garamond', Georgia, serif); font-weight: 500; line-height: 1.08; text-wrap: balance; }
.page-contact h1 { margin: 1rem 0; color: #fff; font-size: var(--tgs-step-4, clamp(2.5rem, 1.8rem + 3.5vw, 5.5rem)); }
.page-contact h2 { margin-bottom: .75rem; font-size: var(--tgs-step-3, clamp(2rem, 1.6rem + 2vw, 3.5rem)); }
.page-contact h3 { font-size: var(--tgs-step-1, 1.5rem); }
.page-contact p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.contactGradientWord { font-style: italic; color: var(--tgs-violet-700, #5B21B6); }
.contactKicker { font-size: .75rem; font-weight: 800; letter-spacing: .16em; color: var(--tgs-violet-700, #5B21B6); }
.contactHero .contactKicker, .contactStepsBand .contactKicker, .contactClosing .contactKicker { color: var(--tgs-orchid, #C084FC); }
.contactHero .contactGradientWord, .contactStepsBand .contactGradientWord, .contactClosing .contactGradientWord { color: var(--tgs-violet-100, #EDE9FE); }

/* buttons */
.contactButton { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: var(--tgs-tap, 2.75rem); padding: .75rem 1.5rem; border: 1px solid var(--tgs-violet-700, #5B21B6); border-radius: var(--tgs-r-pill, 999px); background: #fff; color: var(--tgs-violet-800, #3B0A7A); font: 700 1rem/1.2 var(--tgs-font-body, Inter, sans-serif); text-align: center; text-decoration: none; cursor: pointer; transition: transform .25s var(--tgs-ease, ease), box-shadow .25s var(--tgs-ease, ease); }
.contactButtonPrimary { border-color: transparent; background: var(--tgs-grad-primary, linear-gradient(135deg, #3B0A7A, #5B21B6 50%, #8B5CF6)); color: #fff; }
.contactHero .contactButtonSecondary, .contactClosing .contactButtonSecondary { border-color: rgba(255, 255, 255, .6); background: transparent; color: #fff; }
.contactButton:disabled { opacity: .6; cursor: wait; }
.contactButton:focus-visible, .contactChoice:focus-visible, .contactGeneralLink:focus-visible, .contactFaqList summary:focus-visible, .contactSellerSummary:focus-visible { outline: 3px solid var(--tgs-violet-500, #8B5CF6); outline-offset: 3px; }
.contactActions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.contactActions .contactButton { flex: 1 1 12rem; }

/* hero + closing */
.contactHero, .contactClosing { position: relative; isolation: isolate; overflow: hidden; background: var(--tgs-violet-950, #150A2E); color: #fff; }
.contactHero { display: flex; align-items: flex-end; min-height: 32rem; padding: 4rem 0 2.5rem; }
.contactHeroImage, .contactClosingImage { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.contactHero::after, .contactClosing::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(21, 10, 46, .9), rgba(21, 10, 46, .45) 70%, rgba(21, 10, 46, .6)); }
.contactHeroContent p, .contactClosingContent p { max-width: 38rem; color: rgba(255, 255, 255, .9); font-size: 1.0625rem; }
.contactClosing { padding: 4rem 0; }
.contactClosing h2 { color: #fff; }

/* sections */
.contactBand { padding: 3rem 0; }
.contactSectionHeading { margin-bottom: 1.5rem; }
.contactSectionHeading p { max-width: 38rem; color: var(--tgs-muted, #6B6485); }
.contactChoiceGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.contactChoice { position: relative; display: grid; gap: .5rem; min-height: 9rem; padding: 1.25rem; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-md, 1.25rem); background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .25s var(--tgs-ease, ease), border-color .25s, box-shadow .25s; }
.contactChoice[aria-pressed="true"] { border-color: var(--tgs-violet-600, #7C3AED); box-shadow: 0 0 0 2px var(--tgs-violet-200, #DDD6FE); background: var(--tgs-violet-50, #F6F2FF); }
.contactChoice p { color: var(--tgs-muted, #6B6485); font-size: .9375rem; }
.contactChoiceIndex { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; color: var(--tgs-violet-600, #7C3AED); }
.contactChoiceArrow { position: absolute; top: 1rem; right: 1.25rem; color: var(--tgs-violet-600, #7C3AED); font-size: 1.25rem; }
.contactGeneralLink { display: inline-flex; align-items: center; min-height: var(--tgs-tap, 2.75rem); margin-top: 1rem; padding: 0; border: 0; background: transparent; color: var(--tgs-violet-700, #5B21B6); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }

/* form */
.contactFormBand { background: var(--tgs-violet-50, #F6F2FF); }
.contactFormLayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.contactFormCard { min-width: 0; padding: 1.5rem 1.25rem; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-lg, 1.75rem); background: #fff; box-shadow: var(--tgs-shadow-md, 0 20px 60px rgba(91, 33, 182, .14)); }
.contactFormIntro { margin-bottom: 1.25rem; color: var(--tgs-muted, #6B6485); }
.contactFormGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.contactField { display: grid; gap: .4rem; min-width: 0; }
.contactField label { font-size: .9375rem; font-weight: 600; color: var(--tgs-violet-900, #2A0F5C); }
.contactField input, .contactField select, .contactField textarea { width: 100%; min-width: 0; min-height: var(--tgs-tap, 2.75rem); padding: .75rem .9rem; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-sm, .75rem); background: #fff; color: var(--tgs-ink, #1B1030); font: inherit; font-size: 1rem; }
.contactField textarea { min-height: 9rem; resize: vertical; }
.contactField input:focus-visible, .contactField select:focus-visible, .contactField textarea:focus-visible { border-color: var(--tgs-violet-500, #8B5CF6); outline: 3px solid rgba(139, 92, 246, .35); outline-offset: 0; }
.contactField [aria-invalid="true"] { border-color: var(--tgs-bad, #B3261E); }
.contactFieldError { display: flex; align-items: flex-start; gap: .4rem; color: var(--tgs-bad, #B3261E); font-size: .875rem; line-height: 1.45; }
.contactFieldError[hidden] { display: none; }
.contactFieldErrorIcon { display: grid; place-items: center; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--tgs-bad, #B3261E); color: #fff; font-size: .75rem; font-weight: 800; }
.contactHoneypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contactFormActions { margin-top: 1.25rem; }
.contactFormActions .contactButton { width: 100%; }
.contactStatus { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; font-size: .9375rem; }
.contactStatus:empty { display: none; }
.contactStatus[data-state="error"] { color: var(--tgs-bad, #B3261E); }
.contactStatus[data-state="success"] { padding: .85rem 1rem; border-radius: var(--tgs-r-sm, .75rem); background: #DDF3EA; color: var(--tgs-ok, #1F7A55); }
.contactStatus[data-state="sending"] { color: var(--tgs-violet-700, #5B21B6); }
.contactStatusIcon { font-weight: 800; }

/* seller tips */
.contactSeller { overflow: hidden; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-lg, 1.75rem); background: #fff; }
.contactSellerImage { display: block; width: 100%; height: 12rem; object-fit: cover; }
.contactSellerSummary { display: flex; align-items: center; min-height: var(--tgs-tap, 2.75rem); padding: .75rem 1.25rem; font-family: var(--tgs-font-head, Georgia, serif); font-size: var(--tgs-step-1, 1.5rem); cursor: pointer; }
.contactSellerContent { display: grid; gap: .9rem; padding: 0 1.25rem 1.25rem; }
.contactSellerContent ul { display: grid; gap: .35rem; margin: 0; padding-left: 1.2rem; color: var(--tgs-muted, #6B6485); }
.contactSellerNote { padding: .85rem 1rem; border-radius: var(--tgs-r-sm, .75rem); background: var(--tgs-violet-50, #F6F2FF); font-size: .9375rem; }

/* social, steps, faq */
.contactSocialSection[hidden] { display: none; }
.contactSocialLinks .tgsSocialIcon { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tgs-tap, 2.75rem); padding: .5rem 1rem; border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-pill, 999px); background: #fff; color: inherit; text-decoration: none; }
.contactStepsBand { background: var(--tgs-grad-dark, linear-gradient(160deg, #150A2E, #2A0F5C 60%, #4C1D95)); color: #fff; }
.contactStepsBand h2, .contactStepsBand h3 { color: #fff; }
.contactStepsGrid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-left: 2rem; }
.contactStepRail { position: absolute; top: .5rem; bottom: .5rem; left: .4rem; width: 2px; background: rgba(255, 255, 255, .22); }
.contactStepRailFill { display: block; width: 100%; height: 100%; background: var(--tgs-orchid, #C084FC); transform: scaleY(1); transform-origin: top; transition: transform .9s var(--tgs-ease, ease); }
.contactStepNumber { display: block; margin-bottom: .35rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; color: var(--tgs-orchid, #C084FC); }
.contactStep p { color: rgba(255, 255, 255, .85); }
.contactFaqList { display: grid; gap: .6rem; max-width: 52rem; }
.contactFaqList details { border: 1px solid var(--tgs-line, #E7E0F7); border-radius: var(--tgs-r-md, 1.25rem); background: #fff; }
.contactFaqList summary { display: flex; align-items: center; min-height: 3.25rem; padding: .5rem 1.25rem; font-weight: 600; cursor: pointer; }
.contactFaqList details p { padding: 0 1.25rem 1.1rem; color: var(--tgs-muted, #6B6485); }

/* reveal: the hidden state exists only once JS adds .contactReveal */
.contactReveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--tgs-ease, ease), transform .5s var(--tgs-ease, ease); }
.contactReveal.isIn { opacity: 1; transform: none; }
.contactStepsGrid.contactReveal:not(.isIn) .contactStepRailFill { transform: scaleY(0); }

@media (min-width: 480px) {
  .contactFormCard { padding: 2rem 1.75rem; }
  .contactChoiceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contactFormActions .contactButton { width: auto; }
}
@media (min-width: 768px) {
  .contactBand { padding: 4.5rem 0; }
  .contactHero { min-height: 38rem; padding-bottom: 4rem; }
  .contactFormGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contactFieldFull { grid-column: 1 / -1; }
  .contactStepsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 1.5rem 0 0; }
  .contactStepRail { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 2px; }
  .contactStepRailFill { transform: scaleX(1); transform-origin: left; }
  .contactStepsGrid.contactReveal:not(.isIn) .contactStepRailFill { transform: scaleX(0); }
}
@media (min-width: 1024px) {
  .contactChoiceGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contactFormLayout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; }
  .contactSeller { position: sticky; top: 1.5rem; }
}
@media (hover: hover) {
  .contactChoice:hover { transform: translateY(-3px); border-color: var(--tgs-violet-500, #8B5CF6); box-shadow: var(--tgs-shadow-sm, 0 6px 20px rgba(91, 33, 182, .08)); }
  .contactButton:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--tgs-shadow-sm, 0 6px 20px rgba(91, 33, 182, .08)); }
}
@media (prefers-reduced-motion: reduce) {
  .contactButton, .contactChoice, .contactReveal, .contactStepRailFill { transition: none; }
}