/* ============================================================
   CIRCONIS — Contact Page Styles
   css/contact.css
   ============================================================ */


/* ============================================================
   CONTACT HERO
   ============================================================ */
.contact-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-bg-dark);
  padding-top: var(--nav-height);
}

.contact-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.contact-hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(14, 12, 8, 1.0)  0%,
      rgba(14, 12, 8, 0.65) 40%,
      rgba(14, 12, 8, 0.2)  100%
    );
}

.contact-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(var(--sp-12), 6vw, var(--sp-20));
}

.contact-hero__content .section-header__eyebrow {
  margin-bottom: var(--sp-4);
}

.contact-hero__title {
  font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl));
  color: var(--color-bg);
  line-height: 1.0;
  margin-bottom: var(--sp-5);
}

.contact-hero__desc {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
  color: rgba(231, 219, 199, 0.65);
  line-height: 1.7;
  max-width: 48ch;
}


/* ============================================================
   CONTACT MAIN — two columns
   ============================================================ */
.contact-main {
  background: var(--color-bg-dark);
}

.contact-main__inner {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 680px;
}


/* --- Contact details --- */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.contact-details__title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  color: var(--color-bg);
  margin-bottom: var(--sp-2);
}

.contact-item {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  padding: var(--sp-5) var(--sp-6);
  background: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-mid) var(--ease-out);
}

.contact-item:hover {
  border-color: rgba(220, 169, 80, 0.3);
}

.contact-item__icon {
  width: 44px;
  height: 44px;
  background: rgba(220, 169, 80, 0.08);
  border: 1px solid rgba(220, 169, 80, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.contact-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: 2px;
}

.contact-item__label {
  color: var(--color-primary);
  display: block;
  font-size: 10px;
}

.contact-item__value {
  font-size: var(--text-base);
  color: var(--color-bg);
  line-height: 1.65;
  font-style: normal; /* for <address> */
}

.contact-item__link {
  transition: color var(--dur-fast) var(--ease-out);
}

.contact-item__link:hover {
  color: var(--color-primary);
}

/* Response time */
.contact-response-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(220, 169, 80, 0.04);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
}

.contact-response-note svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* B2B note */
.contact-b2b-note {
  padding: var(--sp-6);
  background: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
}

.contact-b2b-note__title {
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--sp-3);
}

.contact-b2b-note p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.7;
}


/* --- Image column --- removed — hero image serves this purpose */


/* ============================================================
   WHAT TO EXPECT
   ============================================================ */
.contact-expect {
  background: var(--color-bg-mid);
  border-top: 1px solid var(--color-border-dark);
}

.expect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}

.expect-card {
  background: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-8) var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: border-color var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}

.expect-card:hover {
  border-color: rgba(220, 169, 80, 0.3);
  transform: translateY(-2px);
}

.expect-card__icon {
  width: 44px;
  height: 44px;
  background: rgba(220, 169, 80, 0.08);
  border: 1px solid rgba(220, 169, 80, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.expect-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  letter-spacing: var(--ls-heading);
  color: var(--color-bg);
  line-height: 1.1;
}

.expect-card__desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.7;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .expect-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .contact-hero {
    min-height: 45vh;
  }

  .expect-grid {
    grid-template-columns: 1fr;
  }

  .contact-item {
    flex-direction: column;
    gap: var(--sp-3);
  }
}