/* Contact: shinesalonsugarland.shop — info bar and compact phone callback */

.shi10c-band {
  padding: clamp(1.6rem, 4vw, 3.2rem) 0 clamp(2.6rem, 6vw, 4.4rem);
}

.shi10c-intro {
  display: grid;
  justify-items: start;
  gap: 0.65rem;
  max-width: 40rem;
  margin: 0 0 1.45rem;
  text-align: left;
}

.shi10c-intro > *,
.shi10c-fact > *,
.shi10c-book-copy > *,
.shi10c-form > * {
  margin: 0;
}

.shi10c-eyebrow,
.shi10c-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dna-accent, #5c56c9) 78%, var(--dna-ink, #1c1830));
}

.shi10c-kicker .dna-ic {
  width: 1em;
  height: 1em;
}

.shi10c-intro h1 {
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  max-width: 16em;
}

.shi10c-intro p,
.shi10c-fact p,
.shi10c-book-copy p {
  max-width: 42rem;
  text-wrap: pretty;
}

.shi10c-intro a,
.shi10c-fact a {
  font-weight: 700;
  color: var(--dna-ink, #1c1830);
  text-decoration: none;
  overflow-wrap: break-word;
}

.shi10c-intro a:hover,
.shi10c-fact a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.shi10c-band [data-contact-root] {
  display: grid;
  gap: 1.35rem;
  align-items: start;
}

.shi10c-band [data-contact-info] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

.shi10c-band [data-contact-info] h3 {
  grid-column: auto;
  margin: 0;
}

.shi10c-fact {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  justify-items: start;
  gap: 0.4rem;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0.95rem 1rem;
  text-align: left;
  background: var(--dna-surface, #fff);
  border: 1px solid var(--dna-line, #e4e0ee);
  border-radius: var(--radius, 16px);
}

.shi10c-fact h3 {
  font-size: 1.08rem;
  line-height: 1.25;
  text-wrap: balance;
}

.shi10c-book {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1rem 1.5rem;
  align-items: start;
  padding: 1.15rem 1.2rem;
  background: var(--dna-surface-2, #f3f1fa);
  border-radius: var(--radius, 16px);
}

.shi10c-book-copy {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  min-width: 0;
  text-align: left;
}

.shi10c-book-copy h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  max-width: 16em;
}

.shi10c-form {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.95rem;
  background: var(--dna-surface, #fff);
  border: 1px solid var(--dna-line, #e4e0ee);
  border-radius: calc(var(--radius, 16px) - 4px);
}

.shi10c-label {
  justify-self: start;
  font-weight: 700;
  color: var(--dna-ink, #1c1830);
}

.shi10c-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  align-items: stretch;
  justify-items: stretch;
}

.shi10c-form input {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--dna-line, #ddd8ea);
  border-radius: var(--btn-radius, 999px);
  background: var(--dna-bg, #f6f5fb);
  color: var(--dna-ink, #1c1830);
  font: inherit;
}

.shi10c-form input[aria-invalid="true"] {
  border-color: #8c2f2f;
}

.shi10c-error,
.shi10c-success {
  text-wrap: pretty;
}

.shi10c-error {
  color: #8c2f2f;
  font-weight: 700;
}

.shi10c-success {
  color: var(--dna-ink, #1c1830);
  font-weight: 700;
}

.shi10c-form [hidden] {
  display: none !important;
}

@media (max-width: 860px) {
  .shi10c-band [data-contact-info] {
    grid-template-columns: 1fr 1fr;
  }

  .shi10c-book {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .shi10c-band [data-contact-info] {
    grid-template-columns: 1fr;
  }

  .shi10c-row .shi10-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shi10c-form input,
  .shi10c-form .shi10-btn {
    transition: none;
  }
}