/* Absolute Baits v15 contact page. All type, width, spacing and motion tokens are shared. */
.contact-main { padding-top: var(--header-height); }
.contact-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.contact-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / 35%), transparent); }
.contact-hero-inner { position: relative; padding-top: var(--space-5); padding-bottom: var(--section-space); }
.contact-breadcrumb { color: var(--muted); font-size: var(--text-small); }
.contact-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.contact-breadcrumb li + li { display: flex; align-items: center; gap: var(--space-3); }
.contact-breadcrumb li + li::before { content: '/'; opacity: .5; }
.contact-breadcrumb a { text-underline-offset: 4px; text-decoration: none; }
.contact-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.contact-hero-copy { position: relative; z-index: 1; width: 57%; max-width: 46rem; margin-top: var(--space-7); }
.contact-hero-copy .eyebrow { color: var(--accent); margin-bottom: var(--space-5); }
.contact-hero-copy h1 { text-wrap: balance; }
.contact-hero-copy .lead { max-width: 44ch; margin-top: var(--space-5); color: #dae5e7; }
.contact-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.contact-text-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; color: var(--white); font: 800 var(--text-button)/1.5 var(--font-body); text-decoration: none; }
.contact-text-link:hover { color: var(--accent); }
.contact-icon { flex: 0 0 auto; width: 24px; height: 24px; }
.contact-hero-visual { display: block; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 60%; }
.contact-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 75%; }
.contact-hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink), rgb(6 16 21 / 95%) 9%, rgb(6 16 21 / 60%) 27%, rgb(6 16 21 / 5%) 58%), linear-gradient(180deg, rgb(6 16 21 / 25%), transparent 45%, rgb(6 16 21 / 80%)); }
.contact-photo-caption { position: absolute; right: 0; bottom: var(--space-5); color: #e6eff0; font: 800 var(--text-eyebrow)/1.5 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.contact-photo-caption::before { content: ''; display: inline-block; width: 32px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--accent); }

/* One light workspace, rather than many differently sized inset panels. */
.contact-workspace { background: var(--surface); color: var(--text-on-light); }
.contact-workspace h2 em, .contact-faq-section h2 em { color: var(--heading-accent-on-light); }
.contact-section-heading { margin-bottom: var(--space-6); }
.contact-section-heading .eyebrow, .contact-sidebar-heading .eyebrow, .contact-faq-heading .eyebrow { color: var(--accent-on-light); margin-bottom: var(--space-5); }
.contact-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.contact-topic-card { display: flex; align-items: flex-start; gap: var(--space-5); min-width: 0; padding: var(--card-padding); border: 1px solid var(--border-light); border-radius: var(--radius-card); background: #fff; }
.contact-topic-card > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; height: 100%; }
.contact-icon-tile { display: inline-grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border: 1px solid rgb(var(--accent-on-light-rgb) / 15%); border-radius: var(--radius-control); background: rgb(var(--accent-rgb) / 13%); color: var(--accent-on-light); }
.contact-icon-tile .contact-icon { width: 26px; height: 26px; }
.contact-topic-card h3 { line-height: 1.25; }
.contact-topic-card p { margin-block: var(--space-3) var(--space-4); font-size: var(--text-body); color: var(--text-muted-on-light); }
.contact-topic-link, .contact-inline-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; color: var(--accent-on-light); font: 800 var(--text-button)/1.5 var(--font-body); text-decoration: none; text-align: left; }
.contact-topic-link { margin-top: auto; }
.contact-topic-link .contact-icon, .contact-inline-link .contact-icon { width: 20px; height: 20px; }
.contact-topic-link:hover, .contact-inline-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-topic-card.is-selected { border-color: rgb(var(--accent-on-light-rgb) / 55%); background: #f5fbfc; }
.contact-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-7); align-items: start; margin-top: var(--space-8); scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
.contact-sidebar { display: grid; gap: var(--space-6); min-width: 0; }
.contact-sidebar-heading p:last-child { margin-top: var(--space-5); max-width: 43ch; color: var(--text-muted-on-light); }
.contact-info-card { padding: var(--card-padding); background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); }
.contact-info-row { padding-block: var(--space-5); }
.contact-info-row:first-child { padding-top: 0; }
.contact-info-row + .contact-info-row { border-top: 1px solid var(--border-light); }
.contact-info-row dt { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); font-size: var(--text-small); color: var(--text-muted-on-light); }
.contact-info-row dt .contact-icon { color: var(--accent-on-light); }
.contact-info-row dd { margin: 0 0 0 40px; font-size: var(--text-body); font-weight: 800; overflow-wrap: anywhere; }
.contact-info-row dd a { text-decoration: none; }
.contact-info-row dd a:hover { color: var(--accent-on-light); text-decoration: underline; text-underline-offset: 4px; }
.contact-info-card dl { margin: 0; }
.contact-pending-value { color: #637273; font-weight: 500; }
.contact-config-note { padding-top: var(--space-4); border-top: 1px solid var(--border-light); color: var(--text-muted-on-light); font-size: var(--text-small); line-height: 1.5; }
.contact-help-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--card-padding); border-left: 2px solid rgb(var(--accent-on-light-rgb) / 55%); background: rgb(var(--accent-rgb) / 6%); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.contact-icon-tile--plain { width: 32px; height: 32px; border: 0; background: none; }
.contact-help-card p { color: var(--text-muted-on-light); margin-top: var(--space-3); }
.contact-help-card .contact-inline-link { margin-top: var(--space-3); }
.contact-socials { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact-socials a { min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-light); border-radius: 999px; color: var(--accent-on-light); font-weight: 800; text-decoration: none; }

/* The form is a genuine client-side draft until a real receiving endpoint is configured. */
.contact-form-panel { min-width: 0; padding: var(--space-6); border: 1px solid var(--border-light); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.contact-form-heading { display: flex; align-items: center; gap: var(--space-4); }
.contact-form-heading p { margin-top: var(--space-3); color: var(--text-muted-on-light); font-size: var(--text-small); }
.contact-mode-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); margin-top: var(--space-5); border: 1px solid #e3dac5; border-radius: var(--radius-control); background: #fcf8ed; color: #625025; font-size: var(--text-small); }
.contact-mode-note > .contact-icon { width: 20px; height: 20px; margin-top: 1px; }
.contact-mode-note strong { font-weight: 800; }
.contact-mode-note--live { border-color: var(--border-light); background: #f5fafa; color: var(--text-muted-on-light); }
.contact-form { margin-top: var(--space-5); }
.contact-form fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.contact-field { min-width: 0; }
.contact-field--full { grid-column: 1 / -1; }
.contact-field label { display: block; font-size: var(--text-small); font-weight: 800; margin-bottom: var(--space-2); }
.contact-field label > span:not([aria-hidden]) { font-weight: 500; color: var(--text-muted-on-light); }
.contact-field label > [aria-hidden] { color: var(--accent-on-light); }
.contact-field input, .contact-field select, .contact-field textarea { display: block; width: 100%; min-width: 0; min-height: var(--button-height); padding: 12px 16px; border: 1px solid #b5c6c8; border-radius: var(--radius-control); background: #fafcfc; color: var(--text-on-light); font: 500 var(--text-body)/1.5 var(--font-body); color-scheme: light; }
.contact-field input::placeholder, .contact-field textarea::placeholder { opacity: 1; color: #68797b; }
.contact-field textarea { min-height: 156px; resize: vertical; }
.contact-field input:focus-visible, .contact-field select:focus-visible, .contact-field textarea:focus-visible { outline: 2px solid var(--accent-on-light); outline-offset: 2px; background: #fff; }
.contact-select-wrap { position: relative; }
.contact-select-wrap > select { appearance: none; padding-right: 40px; }
.contact-select-wrap > .contact-icon { position: absolute; top: 50%; right: 12px; width: 18px; height: 18px; pointer-events: none; transform: translateY(-50%); color: var(--accent-on-light); }
.contact-message-meta { display: flex; justify-content: space-between; align-items: start; gap: var(--space-4); color: var(--text-muted-on-light); font-size: var(--text-small); margin-top: var(--space-2); }
.contact-message-meta output { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.contact-field [aria-invalid="true"] { border-color: #a63030; }
.contact-error { margin-top: var(--space-2); color: #a12727; font-size: var(--text-small); }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-privacy { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-5); font-size: var(--text-small); color: var(--text-muted-on-light); }
.contact-privacy input { width: 20px; height: 20px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--accent-on-light); }
.contact-privacy a { color: var(--accent-on-light); text-underline-offset: 3px; }
.contact-submit-row { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-5); }
.contact-submit { flex: 0 0 auto; box-shadow: none; }
.contact-submit .contact-icon { width: 20px; height: 20px; }
.contact-submit-row p { max-width: 28ch; font-size: var(--text-small); color: var(--text-muted-on-light); }
.contact-submit:disabled { opacity: .6; cursor: wait; }
.contact-form-status { margin-top: var(--space-5); padding: var(--space-4); border: 1px solid #d8aaa3; border-radius: var(--radius-control); color: #862c20; background: #fff9f8; font-size: var(--text-small); }
.contact-form-status[data-status="success"] { border-color: #aacacd; background: #f5fbfc; color: var(--accent-on-light); }
.contact-product-context { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border: 1px solid #adcacd; border-radius: var(--radius-control); background: #f2f9fa; }
.contact-product-context > .contact-icon { color: var(--accent-on-light); }
.contact-product-context div { flex: 1; min-width: 0; }
.contact-product-context span { display: block; font-size: var(--text-small); color: var(--text-muted-on-light); }
.contact-product-context a { color: var(--accent-on-light); font-weight: 800; text-underline-offset: 3px; }
.contact-product-context button { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; background: none; border: 0; color: var(--text-muted-on-light); }
.contact-nojs { margin-top: var(--space-5); color: var(--text-muted-on-light); }

.contact-faq-section { background: #edf2f3; border-top: 1px solid var(--border-light); color: var(--text-on-light); }
.contact-faq-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-7); }
.contact-faq-heading > p:last-child { max-width: 32ch; margin-top: var(--space-5); color: var(--text-muted-on-light); }
.contact-faq-list { border-top: 1px solid #bacbcd; }
.contact-faq-list details { border-bottom: 1px solid #bacbcd; }
.contact-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); font-size: var(--text-body); font-weight: 800; cursor: pointer; list-style: none; }
.contact-faq-list summary::-webkit-details-marker { display: none; }
.contact-faq-list summary > span { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #dbebec; color: var(--accent-on-light); }
.contact-faq-list details[open] summary > span { transform: rotate(45deg); }
.contact-faq-answer { padding: 0 var(--space-7) var(--space-5) 0; color: var(--text-muted-on-light); }
.contact-faq-answer .contact-inline-link { margin-top: var(--space-3); }
.contact-workspace :focus-visible, .contact-faq-section :focus-visible { outline-color: var(--accent-on-light); }

.contact-draft-dialog { width: min(640px, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--space-5)); margin: auto; padding: var(--space-6); border: 1px solid rgb(var(--accent-rgb) / 35%); border-radius: var(--radius-card); color: var(--text-on-light); background: var(--surface); overscroll-behavior: contain; }
.contact-draft-dialog:not([open]) { display: none; }
.contact-draft-dialog::backdrop { background: rgb(1 10 13 / 75%); }
.contact-draft-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); }
.contact-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text-on-light); border: 1px solid #bccccd; border-radius: 50%; background: none; }
.contact-draft-dialog > p { color: var(--text-muted-on-light); font-size: var(--text-small); margin-block: var(--space-4); }
.contact-draft-dialog > textarea { display: block; width: 100%; padding: var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-control); background: #fff; color: var(--text-on-light); font: 500 var(--text-body)/1.6 var(--font-body); resize: vertical; }
.contact-draft-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.contact-draft-actions .contact-inline-link { border: 0; background: none; }

@media (max-width: 1279px) {
  .contact-topic-card { flex-direction: column; gap: var(--space-4); }
  .contact-layout, .contact-faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-6); }
  .contact-form-panel { padding: var(--card-padding); }
  .contact-submit-row { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .contact-submit-row p { max-width: none; }
}
@media (max-width: 1099px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--grid-gap); }
  .contact-sidebar-heading { grid-column: 1 / -1; }
  .contact-sidebar .contact-socials { grid-column: 1 / -1; }
  .contact-submit-row { align-items: center; flex-direction: row; gap: var(--space-5); }
  .contact-form-panel { padding: var(--space-6); }
  .contact-faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}
@media (max-width: 899px) {
  .contact-hero-copy { width: 100%; max-width: 600px; margin-top: var(--space-6); }
  .contact-hero-inner { padding-bottom: 290px; }
  .contact-hero-visual { width: 100%; height: 380px; top: auto; }
  .contact-hero-visual img { object-position: 65% 83%; }
  .contact-hero-visual::after { background: linear-gradient(180deg, var(--ink), rgb(6 16 21 / 60%) 22%, transparent 50%, rgb(6 16 21 / 45%) 86%, var(--ink)); }
  .contact-photo-caption { bottom: var(--space-4); }
  .contact-faq-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 767px) {
  .contact-hero-inner { padding-top: var(--space-4); padding-bottom: 250px; }
  .contact-hero-visual { height: 320px; }
  .contact-hero-actions { gap: var(--space-4); }
  .contact-hero-copy h1 { text-wrap: auto; }
  .contact-topics { grid-template-columns: minmax(0, 1fr); }
  .contact-topic-card { flex-direction: row; gap: var(--space-4); }
  .contact-sidebar { grid-template-columns: minmax(0, 1fr); }
  .contact-layout { margin-top: var(--space-7); }
  .contact-form-panel { padding: var(--card-padding); }
  .contact-form-heading { gap: var(--space-3); }
  .contact-form-heading > .contact-icon-tile { width: 44px; height: 44px; }
  .contact-form-grid { gap: var(--space-5) var(--space-4); }
  .contact-submit-row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .contact-submit-row p { text-align: center; }
  .contact-draft-dialog { padding: var(--card-padding); }
}
@media (max-width: 599px) {
  .contact-form-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-form-heading { align-items: flex-start; }
  .contact-message-meta { flex-wrap: wrap; gap: var(--space-2); }
  .contact-message-meta output { margin-left: auto; }
  .contact-faq-answer { padding-right: 0; }
  .contact-draft-actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 374px) {
  .contact-topic-card { flex-direction: column; }
  .contact-form-heading > .contact-icon-tile { display: none; }
  .contact-photo-caption { letter-spacing: .1em; }
}
@media print {
  .contact-main { padding-top: 0; }
  .contact-hero-visual, .contact-photo-caption, .contact-draft-dialog { display: none!important; }
  .contact-hero, .contact-workspace, .contact-faq-section { color: #000; background: #fff; }
  .contact-hero-copy { width: 100%; }
  .contact-hero-inner { padding-bottom: var(--space-6); }
  .contact-layout { display: block; }
}