/* Brand: junkdepotma.help — CONTACT only (jun14) info-bar + tabs phone */

.jun14-ct-page {
  flex: 1 1 auto;
}

.jun14-ct-kicker {
  margin: 0;
  color: var(--dna-accent-2, var(--jun14-accent-2));
  font: 700 0.72rem/1.2 var(--jun14-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.jun14-ct-root {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  padding: clamp(2.25rem, 5vw, 3.75rem) 0;
  text-align: left;
}

.jun14-ct-info {
  display: grid;
  gap: 1rem;
  justify-items: stretch;
}

/* Override DNA info-bar auto-fit columns: header + bar must stack full-width on narrow viewports */
.dna-contact-info-bar [data-contact-info].jun14-ct-info {
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
}

.jun14-ct-info-head {
  display: grid;
  gap: 0.55rem;
  max-width: 40rem;
}

.jun14-ct-info-head h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  line-height: 1.12;
  text-wrap: balance;
}

.jun14-ct-info-head > p {
  margin: 0;
  color: var(--dna-ink-soft, var(--jun14-muted));
  text-wrap: pretty;
}

.jun14-ct-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

.jun14-ct-bar .contact-block {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--dna-line, var(--jun14-line));
  background: var(--dna-surface, var(--jun14-surface));
  text-align: left;
}

.jun14-ct-bar .contact-block dt,
.jun14-ct-bar .contact-block .jun14-ct-label {
  margin: 0;
  color: var(--dna-ink-soft, var(--jun14-muted));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jun14-ct-bar .contact-block dd {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  align-content: start;
}

.jun14-ct-bar .contact-block dd b,
.jun14-ct-bar .contact-block dd a {
  color: var(--dna-ink, var(--jun14-ink));
  font: 650 1rem/1.3 var(--jun14-display);
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-decoration: none;
}

.jun14-ct-bar .contact-block dd a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jun14-ct-bar .contact-block small {
  margin: 0;
  color: var(--dna-ink-soft, var(--jun14-muted));
  font: 500 0.9rem/1.45 var(--jun14-body);
  text-wrap: pretty;
}

.jun14-ct-book {
  display: grid;
  gap: 1rem;
  max-width: 36rem;
  justify-items: start;
}

.jun14-ct-book-intro {
  display: grid;
  gap: 0.55rem;
}

.jun14-ct-book-intro h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  text-wrap: balance;
}

.jun14-ct-book-intro > p {
  margin: 0;
  color: var(--dna-ink-soft, var(--jun14-muted));
  text-wrap: pretty;
}

.jun14-ct-box {
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--dna-line, var(--jun14-line));
  background: var(--dna-surface, var(--jun14-surface));
  justify-items: start;
}

.jun14-ct-tabs {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.jun14-ct-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.jun14-ct-tab {
  min-height: 42px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--dna-line, var(--jun14-line));
  background: transparent;
  color: var(--dna-ink-soft, var(--jun14-muted));
  font: 700 0.8rem/1 var(--jun14-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.jun14-ct-tab.is-active,
.jun14-ct-tab[aria-selected="true"] {
  background: var(--dna-accent, var(--jun14-accent));
  border-color: transparent;
  color: var(--dna-accent-ink, var(--jun14-accent-ink));
}

.jun14-ct-panel {
  display: none;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  justify-items: start;
  width: 100%;
}

.jun14-ct-panel.is-active,
.jun14-ct-panel:not([hidden]) {
  display: grid;
}

.jun14-ct-panel[hidden] {
  display: none !important;
}

.jun14-ct-panel > p {
  margin: 0;
  color: var(--dna-ink-soft, var(--jun14-muted));
  text-wrap: pretty;
}

.jun14-ct-form {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  justify-items: start;
}

.jun14-ct-form.is-done label,
.jun14-ct-form.is-done input,
.jun14-ct-form.is-done button[type="submit"] {
  display: none;
}

.jun14-ct-form label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dna-ink-soft, var(--jun14-muted));
}

.jun14-ct-form input[type="tel"] {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--dna-line, var(--jun14-line));
  background: var(--dna-bg, var(--jun14-bg));
  color: var(--dna-ink, var(--jun14-ink));
  font: 500 1rem/1.3 var(--jun14-body);
}

.jun14-ct-form input[type="tel"]:focus {
  outline: 2px solid var(--dna-accent-2, var(--jun14-accent-2));
  outline-offset: 2px;
}

.jun14-ct-form input.is-invalid {
  border-color: #c45c4a;
}

.jun14-ct-err {
  margin: 0;
  color: #e08a7a;
  font-size: 0.9rem;
}

.jun14-ct-ok {
  margin: 0;
  color: var(--dna-ink, var(--jun14-ink));
  font-weight: 650;
}

.jun14-ct-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--dna-ink, var(--jun14-ink)) 32%, transparent);
  background: transparent;
  color: var(--dna-ink, var(--jun14-ink));
  font: 700 0.84rem/1 var(--jun14-display);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.jun14-ct-ghost:hover {
  border-color: var(--dna-ink, var(--jun14-ink));
}

.jun14-ct-mail {
  color: var(--dna-accent-2, var(--jun14-accent-2));
  font-weight: 650;
  text-decoration: none;
  text-underline-offset: 3px;
}

.jun14-ct-mail:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .jun14-ct-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .jun14-ct-bar {
    grid-template-columns: 1fr;
  }

  .jun14-ct-tab {
    flex: 1 1 auto;
  }

  .jun14-ct-form .jun14-cta,
  .jun14-ct-panel .jun14-cta,
  .jun14-ct-panel .jun14-ct-ghost {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jun14-ct-page * {
    transition: none !important;
  }
}