/* Book / Call / Quote card. Tabs are pure CSS: three radios, labels, and panes as siblings inside .card.
   Depends on this DOM order: input*3, .tabs, .panes (see src/Components/form-card.php). */
.card{background:var(--bg-2);border:2px solid var(--charcoal);border-radius:var(--radius);overflow:hidden;box-shadow:0 14px 34px rgba(var(--shadow-rgb),.22);position:relative}
.card > input[type=radio]{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.tabs{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--charcoal)}
.tabs label{display:block;text-align:center;color:var(--action-ink);opacity:.85;padding:15px 14px;font:inherit;font-weight:600;cursor:pointer;border-bottom:4px solid transparent}
.tabs label:hover{opacity:1}
#tab-book:checked ~ .tabs label[for=tab-book],
#tab-call:checked ~ .tabs label[for=tab-call],
#tab-quote:checked ~ .tabs label[for=tab-quote]{color:var(--ink);opacity:1;background:var(--bg-2);border-bottom-color:var(--accent);font-weight:700}
.card > input[type=radio]:focus-visible ~ .tabs{outline:2px solid var(--accent);outline-offset:-2px}
.pane{padding:22px;display:none}
#tab-book:checked ~ .panes [data-p=book],
#tab-call:checked ~ .panes [data-p=call],
#tab-quote:checked ~ .panes [data-p=quote]{display:block}
.pane h3{margin-bottom:14px}
.pane label{display:block;font-size:.8rem;color:var(--ink-2);margin:12px 0 6px;font-weight:500}
.pane input,.pane select,.pane textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--ink);font:inherit}
/* Accent ring (Austin's ask, D-030) plus an ink border so the indicator clears 3:1 (WCAG 1.4.11). */
.pane input:focus-visible,.pane select:focus-visible,.pane textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--ink)}
.pane .two{display:grid;gap:12px;grid-template-columns:1fr}
.pane .btn{width:100%;margin-top:18px}
.pane .note{font-size:.8rem;margin-top:10px}
.pane .tow{margin-top:12px}
.pane .tow b{color:var(--ink)}
.pane .big{font-family:var(--head);font-size:3rem;line-height:1;letter-spacing:.02em;color:var(--ink);margin:6px 0 10px;display:block}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Error state (T-402c, D-043). Ink text with a gold rule: yellow and blue are accents, never text (D-017).
   .form-errors is the same look on the fallback form-error page (Reply.php), kept here so form errors are styled once. */
.field-error,.form-errors li{font-size:.8rem;font-weight:600;color:var(--ink);border-left:3px solid var(--accent-2);padding-left:10px;margin:6px 0 0}
.form-errors{list-style:none;padding:0;margin:14px 0}
.form-errors li{font-size:1rem;margin:10px 0}
.pane [aria-invalid=true]{border-color:var(--ink)}
.form-notice{font-size:.9rem;font-weight:600;color:var(--ink);background:var(--accent-soft);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:12px}

@media(min-width:420px){ /* breakpoint: form two-up; below this a two-column row clips <select> text */
  .pane .two{grid-template-columns:1fr 1fr}
}