/* ═══════════════════════════════════════════════════════════════
   EXPERIENCES TEASER — the band on index.html that points at the
   four specialty experience pages.

   Deliberately a separate file from css/experiences.css: that one
   carries its own base, nav, button and footer rules, and loading
   it alongside index.html's inline <style> would put two sets of
   those rules in a cascade fight. This file styles the teaser and
   nothing else, so it is safe to drop into index.html.

   index.html supplies the palette variables (--gold, --off-blk …)
   from its own :root block.
═══════════════════════════════════════════════════════════════ */

.inv-teaser { background: var(--off-blk); padding: 96px 40px; }
.inv-teaser-inner { max-width: 1180px; margin: 0 auto; }
.inv-teaser-head { max-width: 620px; margin-bottom: 44px; }
.inv-teaser-head h2 {
  font-family: 'Playfair Display', serif; color: #fff;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.22; margin-bottom: 18px;
}
.inv-teaser-head h2 em { font-style: italic; color: var(--gold); }
.inv-teaser-head p { color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1.8; }
.inv-teaser-head .section-eyebrow { color: var(--gold); }
.teaser-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 40px; }
.teaser-card {
  position: relative; min-height: 260px; display: flex; align-items: flex-end;
  padding: 26px 22px; overflow: hidden; background: #111;
}
.teaser-card-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .52; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .4s;
}
.teaser-card:hover .teaser-card-bg { transform: scale(1.07); opacity: .7; }
.teaser-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,12,10,.9), rgba(12,12,10,.1));
}
.teaser-txt { position: relative; z-index: 2; }
.teaser-txt .num {
  display: block; font-family: 'Playfair Display', serif;
  color: var(--gold); font-size: .85rem; margin-bottom: 10px; letter-spacing: .1em;
}
.teaser-txt h3 {
  font-family: 'Playfair Display', serif; color: #fff;
  font-size: 1.14rem; line-height: 1.28; margin-bottom: 6px;
}
.teaser-txt p { color: rgba(255,255,255,.6); font-size: .8rem; line-height: 1.6; }

@media (max-width: 1000px) {
  .teaser-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .inv-teaser { padding-left: 22px; padding-right: 22px; }
  .teaser-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .teaser-card-bg { transition: none; transform: none; }
}