/* Contact page. A pure conversion page per Decision 0014/docs/website/04
   §B7: short Ink header, then a segmented tab control switching between
   booking a call and sending a message (Decision: Contact Tab Layout,
   chosen over the card-plus-anchor-jump pattern after it read as awkward
   on mobile). Pure CSS radio-input technique, no JS. No sidebar, no
   proof, no diagram. Shared field/eyebrow/cta/section-body primitives
   live in sections.css. */

.ct-hero-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  line-height: 1.1;
  margin: 0 auto var(--space-3);
}

.ct-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

.ct-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ct-tab-labels {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.ct-tab-label {
  flex: 1;
  text-align: center;
  padding: var(--space-3);
  border-radius: 8px;
  background: var(--color-white);
  border: 2px solid rgba(18, 35, 28, 0.12);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

#ct-tab-call:checked ~ .ct-tab-labels label[for="ct-tab-call"],
#ct-tab-message:checked ~ .ct-tab-labels label[for="ct-tab-message"] {
  background: var(--color-dark-green);
  color: var(--color-white);
  border-color: var(--color-dark-green);
}

.ct-tab-input:focus-visible ~ .ct-tab-labels label {
  outline: 2px solid var(--color-dark-green);
  outline-offset: 2px;
}

.ct-panel {
  display: none;
}

#ct-tab-call:checked ~ .ct-panel-call {
  display: block;
}

#ct-tab-message:checked ~ .ct-panel-message {
  display: block;
}

.ct-panel h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-h2);
  margin: 0 0 var(--space-3);
  max-width: none;
}

.ct-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ct-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ct-form-group label {
  font-weight: 700;
  font-size: 0.9rem;
}

.ct-form-group input,
.ct-form-group textarea {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(18, 35, 28, 0.2);
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-ink);
}

.ct-form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.ct-form-submit {
  align-self: flex-start;
  border: none;
  cursor: pointer;
}

.ct-privacy-note {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0;
}

.ct-privacy-note a {
  color: inherit;
}

.form-status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: 8px;
  border-left: 4px solid;
}

.form-status[hidden] {
  display: none;
}

.form-status:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.form-status--success {
  background: rgba(32, 86, 65, 0.1);
  border-left-color: var(--color-dark-green);
}

.form-status--error {
  background: rgba(185, 78, 72, 0.1);
  border-left-color: var(--color-terracotta);
}

.form-status-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 var(--space-1);
}

.form-status--success .form-status-title {
  color: var(--color-dark-green);
}

.form-status--error .form-status-title {
  color: var(--color-terracotta);
}

.form-status-icon {
  font-size: 1.1em;
}

.form-status-detail {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink);
}

.form-status-detail a {
  color: inherit;
  font-weight: 600;
}

@media (max-width: 500px) {
  .ct-tab-label {
    font-size: 0.9rem;
    padding: var(--space-2);
  }
}