/* =============================================================
   EXPERIENCE.CSS — The Ozasco Experience (Compacted CTA Section)
   The Ozasco | Premium space-saving transition banner
   ============================================================= */

#experience {
  position: relative;
  background-color: rgba(142, 140, 130, 0.04);
  color: var(--clr-espresso);
  padding-block: clamp(4rem, 6vw, 6rem); /* Reduced padding to save vertical space */
  overflow: hidden;
  text-align: center;
  border-top: 1px solid rgba(142, 140, 130, 0.1);
}

/* Warm glow center effect */
#experience::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(17, 17, 17, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse at 10% 80%, rgba(142, 140, 130, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

#experience::after {
  display: none;
}

/* ── Inner container ── */
.experience__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

/* ── Decorative flourish ── */
.experience__flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
  color: var(--clr-gold);
  opacity: 0.6;
}

.experience__flourish-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--clr-gold);
}

.experience__flourish-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-gold);
}

.experience__flourish-icon svg {
  stroke: var(--clr-gold);
}

/* ── Main quote ── */
.experience__quote {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: 1.4;
  color: var(--clr-espresso);
  font-style: italic;
  margin-bottom: var(--sp-8);
  position: relative;
  max-width: 50ch;
  margin-inline: auto;
}

.experience__quote::before {
  content: '\201C';
  position: absolute;
  top: -0.3em;
  left: -0.25em;
  font-size: 4em;
  color: var(--clr-gold);
  opacity: 0.15;
  font-family: var(--font-serif);
  line-height: 1;
  pointer-events: none;
}

.experience__quote em {
  font-style: normal;
  color: var(--clr-espresso);
}

/* ── CTA buttons ── */
.experience__cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ── Tagline below CTA ── */
.experience__tagline {
  margin-top: var(--sp-8);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  opacity: 0.7;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  #experience {
    padding-block: var(--sp-10) var(--sp-6);
  }

  .experience__flourish {
    margin-bottom: var(--sp-4);
  }

  .experience__quote {
    font-size: var(--text-xl);
    margin-bottom: var(--sp-6);
  }

  .experience__tagline {
    margin-top: var(--sp-6);
  }
}