/* =========================================================================
   SOLAR ENERGY — page: contact
   Contact-first: four large direct-contact cards above the form, and a
   dark FAQ to close, which no other page does.
   ========================================================================= */

.direct { background: var(--paper); padding-block: clamp(3rem, 6vw, 5rem); }
.direct__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  perspective: 1000px;
}

.direct-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: .3rem;
  padding: 1.9rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: box-shadow .4s var(--ease-out), border-color .4s;
}
.direct-card:hover { box-shadow: var(--sh-lg); border-color: var(--brand-300); }

.direct-card__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 1rem;
  border-radius: 16px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand);
  stroke-width: 1.9;
  transition: transform .5s var(--ease-spring);
}
.direct-card__icon .icon { width: 1.5rem; height: 1.5rem; }
.direct-card:hover .direct-card__icon { transform: translateZ(30px) rotate(-6deg); }

.direct-card__label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.direct-card__name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--text);
}
.direct-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--brand);
  word-break: break-word;
}
.direct-card__note {
  margin-top: .55rem;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* the phone card is the one we want pressed */
.direct-card--primary {
  background: var(--grad-dark);
  border-color: transparent;
  box-shadow: var(--sh-lg);
}
.direct-card--primary::before {
  content: "";
  position: absolute;
  top: -110px; right: -90px;
  width: 300px; height: 300px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,32,.34), transparent 66%);
  filter: blur(46px);
}
.direct-card--primary .direct-card__icon {
  background: var(--grad-sun);
  border-color: transparent;
  color: #2A1803;
}
.direct-card--primary .direct-card__label { color: rgba(255,255,255,.58); }
.direct-card--primary .direct-card__name  { color: #fff; }
.direct-card--primary .direct-card__value { color: var(--sun-300); }
.direct-card--primary .direct-card__note  { color: rgba(255,255,255,.62); }

.direct-card--wa .direct-card__icon {
  background: #075E54;
  border-color: transparent;
  color: #fff;
}
.direct-card--wa .direct-card__icon .icon { fill: currentColor; }
.direct-card--wa:hover { border-color: #075E54; }

/* ---------------- form column ---------------- */
.contact { background: var(--paper-2); }
.contact__form-wrap { background: var(--paper); }

/* ---------------- dark FAQ ---------------- */
.faq--dark .acc {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.faq--dark .acc.is-open {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,176,32,.34);
  box-shadow: none;
}
.faq--dark .acc__btn { color: #fff; }
.faq--dark .acc__btn:hover,
.faq--dark .acc.is-open .acc__btn { color: var(--sun-300); }
.faq--dark .acc__inner p { color: var(--text-light); }

@media (max-width: 1150px) { .direct__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .direct__grid { grid-template-columns: 1fr; } }

/* a second office line sits directly under the first */
.direct-card__value--alt { margin-top: -.1rem; }

/* a long address should shrink rather than split across the domain */
.direct-card[href^="mailto:"] .direct-card__value {
  font-size: clamp(.92rem, 1.1vw, 1.02rem);
  overflow-wrap: anywhere;
}