/* =================== contact-intent-grid.css =================== */
/* Compact intent cards for /contacts and the small audience chips on /about. */

.contact-intent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(18px, 2vw, 24px);
}

.premium-surface > .contact-intent-grid {
  grid-template-columns: 1fr;
}

.contact-intent-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 92px;
  padding: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--hc-ink, #1a1714);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(252, 248, 240, 0.78));
  border: 0.5px solid rgba(141, 109, 71, 0.20);
  border-radius: 16px;
  box-shadow: 0 16px 34px -28px rgba(40, 30, 15, 0.28);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.contact-intent-card::before {
  content: "";
  width: 42px;
  height: 42px;
  grid-row: 1 / span 2;
  border-radius: 12px;
  background-color: rgba(212, 184, 150, 0.22);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  border: 0.5px solid rgba(141, 109, 71, 0.22);
  transition: transform 0.22s ease, background-color 0.22s ease;
}

.contact-intent-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(212, 184, 150, 0.22) 50%, transparent 70%);
  transform: translateX(-115%);
  transition: transform 0.62s cubic-bezier(0.2, 0.84, 0.3, 1);
}

.contact-intent-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 184, 150, 0.58);
  box-shadow:
    0 2px 4px rgba(40, 30, 15, 0.04),
    0 24px 46px -24px rgba(184, 154, 111, 0.32);
}

.contact-intent-card:hover::before {
  background-color: rgba(212, 184, 150, 0.34);
  transform: rotate(-5deg) scale(1.04);
}

.contact-intent-card:hover::after {
  transform: translateX(115%);
}

.contact-intent-card--project::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1'/><path d='m9 12 2 2 4-4'/></svg>");
}

.contact-intent-card--b2b::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V7l8-4v18'/><path d='M19 21V11l-6-4'/><path d='M9 9h1M9 13h1M9 17h1M15 13h1M15 17h1'/></svg>");
}

.contact-intent-card--delivery::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='3' width='15' height='13' rx='2'/><path d='M16 8h4l3 3v5h-7z'/><circle cx='5.5' cy='18.5' r='2.2'/><circle cx='18.5' cy='18.5' r='2.2'/></svg>");
}

.contact-intent-card strong {
  min-width: 0;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--hc-ink, #1a1714);
}

.contact-intent-card span {
  min-width: 0;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 13px;
  line-height: 1.42;
  color: rgba(26, 23, 20, 0.62);
  overflow-wrap: anywhere;
}

.premium-surface > .contact-intent-grid .intent-chip {
  min-height: 112px;
  justify-content: flex-start;
}

.contact-response-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(18px, 2vw, 26px);
}

.contact-response-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  min-height: 132px;
  padding: clamp(18px, 2vw, 24px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 248, 240, 0.76));
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: 16px;
  box-shadow: 0 18px 42px -30px rgba(40, 30, 15, 0.26);
}

.contact-response-card::before {
  content: "";
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background-color: rgba(212, 184, 150, 0.20);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  border: 0.5px solid rgba(141, 109, 71, 0.22);
}

.contact-response-card--selection::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11 12 14 22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>");
}

.contact-response-card--b2b::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M8 13h8M8 17h5'/></svg>");
}

.contact-response-card strong {
  min-width: 0;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--hc-ink, #1a1714);
}

.contact-response-card p {
  min-width: 0;
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  color: rgba(26, 23, 20, 0.62);
}

@media (max-width: 1120px) {
  .contact-intent-grid {
    grid-template-columns: 1fr;
  }

  .contact-response-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .contact-intent-card {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: auto;
    padding: 16px;
  }

  .contact-intent-card::before {
    width: 38px;
    height: 38px;
    background-size: 20px 20px;
  }
}