.contact-section { padding-top: clamp(7rem, 12vw, 9rem); }

.contact-intro {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}

.contact-intro .section-title { margin-top: 1rem; }
.contact-intro .section-lede { margin: 1.25rem auto 2rem; }

.contact-points {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: left;
  max-width: 32rem;
  margin-inline: auto;
}
.contact-points li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--bone-dim);
  font-size: 0.98rem;
}
.contact-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ember);
}
.contact-points strong { color: var(--bone); }

.contact-direct {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.contact-direct a {
  text-decoration: none;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.contact-direct a:hover { color: var(--ember-bright); }

/* Booking widget */
.contact-booking {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* Liquid glass frame around the Cal.com embed — same corner-dispersion
   technique as the marketing path-panel cards. Cal's iframe is cross-origin
   and can't be restyled internally, so the glass lives in the frame around
   it: a thick inset margin reveals the glass edge on every side. */
.cal-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(0.6rem, 1.5vw, 1rem);
  border-radius: var(--radius-lg);
  background: rgba(30, 28, 30, 0.4);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 30px 70px -30px rgba(0, 0, 0, 0.65),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition:
    opacity 0.7s var(--ease-out-soft),
    filter 0.7s var(--ease-out-soft),
    transform 0.7s var(--ease-out-soft);
}

.cal-frame::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -2;
  background:
    radial-gradient(circle at 22% 25%, rgba(209, 228, 250, 0.5), transparent 50%),
    radial-gradient(circle at 78% 20%, rgba(186, 215, 247, 0.45), transparent 50%),
    radial-gradient(circle at 55% 90%, rgba(157, 167, 186, 0.3), transparent 55%);
  filter: blur(60px);
}

.cal-frame .panel-ring {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background:
    radial-gradient(circle at 6% 8%, rgba(255, 255, 255, 0.85), transparent 45%),
    radial-gradient(circle at 15% 15%, rgba(186, 215, 247, 0.6), transparent 50%),
    radial-gradient(circle at 94% 92%, rgba(209, 228, 250, 0.85), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(157, 167, 186, 0.6), transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.cal-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 55%);
  pointer-events: none;
}

.cal-inline {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 750px;
  background: var(--ink-soft);
  border-radius: calc(var(--radius-lg) - 6px);
  overflow: hidden;
}

.form-note {
  color: var(--bone-dim);
  font-size: 0.82rem;
  text-align: center;
  margin: 1.5rem 0 0;
}

.form-note a { color: var(--bone-dim); }
.form-note a:hover { color: var(--ember-bright); }

@media (max-width: 640px) {
  .cal-inline { min-height: 900px; }
}