/* ═══════════════════════════════════════════════════════════════
   Burke Williams — Amenities Page
   Phase 1 Figma node: 2179:98087
   Sections: Hero | Impact | Timeline
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. HERO ────────────────────────────────────────────────── */
.bw-amen-hero {
  position: relative; height: 700px; overflow: hidden;
  background: #000; display: flex; align-items: flex-end;
}
.bw-amen-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.bw-amen-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.08) 100%);
}
.bw-amen-hero-panel {
  position: relative; z-index: 2;
  padding: 0 120px 80px; max-width: 740px;
  display: flex; flex-direction: column; gap: 20px;
}
.bw-amen-hero-heading { margin: 0; }
.bw-amen-h-display {
  display: block;
  font-family: var(--font-display); font-size: 60px; font-weight: 350; line-height: 72px; color: #fffdf8;
}
.bw-amen-h-script {
  display: block;
  font-family: var(--font-script); font-size: 60px; font-weight: 400; line-height: 72px; color: #fffdf8; font-style: normal;
}
.bw-amen-hero-wordmark {
  width: 303px; max-height: 86px; object-fit: contain; object-position: left;
  filter: brightness(0) invert(1); opacity: 0.85;
}
.bw-amen-hero-desc {
  font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 24px;
  color: #fffdf8; max-width: 500px; margin: 0;
}
.bw-amen-hero-btns { display: flex; gap: 14px; }
/* radius:100px */
.bw-amen-hero-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 24px;
  border-radius: 100px; border: 1px solid rgba(255,253,248,0.75); background: transparent;
  color: #fffdf8; font-family: var(--font-body); font-size: 16px; font-weight: 600;
  letter-spacing: 0.32px; text-decoration: none; text-transform: uppercase;
  transition: background 0.25s;
}
.bw-amen-hero-cta--filled { background: #335d88; border-color: #335d88; }
.bw-amen-hero-cta:hover { background: rgba(255,253,248,0.15); }
.bw-amen-hero-cta--filled:hover { background: #0b2e56; border-color: #0b2e56; }

/* ── 2. IMPACT ──────────────────────────────────────────────── */
/* Figma: Impact [1920×520] fill:#fffdf8 pad=80/240/80/120 */
.bw-amen-impact {
  background: #fffdf8;
  padding: 80px 120px 80px 120px;
  display: flex; gap: 354px; align-items: flex-start;
}
.bw-amen-impact-left { flex-shrink: 0; max-width: 620px; }
.bw-amen-impact-text { display: flex; flex-direction: column; gap: 32px; }
.bw-amen-impact-heading-wrap { display: flex; flex-direction: column; gap: 10px; }
/* "Where the Experience" Teodor 60px + "Expands" La Belle Aurore 60px */
.bw-amen-h2-display {
  display: block;
  font-family: var(--font-display); font-size: 60px; font-weight: 350; line-height: 72px; color: #335d88;
}
.bw-amen-h2-script {
  display: block;
  font-family: var(--font-script); font-size: 60px; font-weight: 400; line-height: 72px; color: #335d88; font-style: normal;
}
.bw-amen-impact-title { margin: 0; }
.bw-amen-impact-desc {
  font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 24px;
  color: #676767; margin: 0;
}
.bw-amen-impact-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.bw-amen-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 24px;
  border-radius: 100px; border: 1px solid #335d88; background: transparent;
  color: #335d88; font-family: var(--font-body); font-size: 16px; font-weight: 600;
  letter-spacing: 0.32px; text-decoration: none; text-transform: uppercase;
  transition: background 0.25s, color 0.25s;
}
.bw-amen-cta--filled { background: #335d88; color: #fffdf8; }
.bw-amen-cta:hover { background: #335d88; color: #fffdf8; }
.bw-amen-cta--filled:hover { background: #0b2e56; border-color: #0b2e56; }

/* Right 2×2 feature grid [850×354] */
.bw-amen-impact-right { flex: 1; }
.bw-amen-features-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.bw-amen-feature {
  display: flex; flex-direction: column; gap: 16px; padding: 0;
}
.bw-amen-feature-icon { flex-shrink: 0; }
.bw-amen-feature-text { display: flex; flex-direction: column; gap: 8px; }
.bw-amen-feature-title {
  font-family: var(--font-body); font-size: 18px; font-weight: 600; color: #1a1712; margin: 0;
}
.bw-amen-feature-desc {
  font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.55;
  color: #676767; margin: 0;
}

/* ── 3. TIMELINE ────────────────────────────────────────────── */
/* Figma: Container [1202×3344] */
.bw-amen-timeline {
  background: #fffdf8;
  padding: 80px 0 100px;
}
.bw-amen-timeline-inner {
  position: relative;
  max-width: 1202px; margin-inline: auto;
  padding-inline: 40px;
  display: flex; flex-direction: column; gap: 19px;
}
/* Vertical connector line [2px fill:#b3b3b3] */
.bw-amen-timeline-track {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 2px; background: #b3b3b3;
  pointer-events: none;
}
/* TimelineItem [1202×340] HORIZONTAL gap=48 */
.bw-amen-timeline-item {
  display: flex; align-items: center; gap: 48px;
  position: relative;
}
.bw-amen-timeline-item--left { flex-direction: row-reverse; }
/* Image [544×340] radius:10px */
.bw-amen-timeline-img-wrap {
  flex-shrink: 0; width: 544px; height: 340px; border-radius: 10px; overflow: hidden;
}
.bw-amen-timeline-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.bw-amen-timeline-item:hover .bw-amen-timeline-img { transform: scale(1.04); }
/* Green dot: fill:#085a12 [16×16] in bg fill:#ece8dd [40×40] */
.bw-amen-timeline-dot {
  flex-shrink: 0; position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #ece8dd;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.bw-amen-timeline-dot-inner {
  width: 16px; height: 16px; border-radius: 50%; background: #085a12;
}
/* Content [610×199] */
.bw-amen-timeline-text {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
}
/* Teodor 40px wt=350 lh=48px #335d88 */
.bw-amen-timeline-title {
  font-family: var(--font-display); font-size: 40px; font-weight: 350; line-height: 48px;
  color: #335d88; margin: 0;
}
/* Barlow 16px wt=400 lh=19.2px ls=0.16px #676767 */
.bw-amen-timeline-desc {
  font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 19.2px;
  letter-spacing: 0.16px; color: #676767; margin: 0; max-width: 500px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .bw-amen-hero-panel { padding: 0 64px 72px; }
  .bw-amen-impact { padding: 64px; gap: 60px; }
}
@media (max-width: 1100px) {
  .bw-amen-impact { flex-direction: column; gap: 48px; }
  .bw-amen-impact-left { max-width: none; }
  .bw-amen-timeline-img-wrap { width: 40%; height: 260px; }
}
@media (max-width: 768px) {
  .bw-amen-hero { height: auto; min-height: 500px; }
  .bw-amen-hero-panel { padding: 120px 24px 60px; }
  .bw-amen-h-display, .bw-amen-h-script { font-size: clamp(36px, 8vw, 60px); line-height: 1.1; }
  .bw-amen-impact { padding: 48px 24px; }
  .bw-amen-h2-display, .bw-amen-h2-script { font-size: clamp(32px, 7vw, 60px); line-height: 1.1; }
  .bw-amen-features-grid { grid-template-columns: 1fr; }
  .bw-amen-timeline-item,
  .bw-amen-timeline-item--left { flex-direction: column; align-items: flex-start; gap: 20px; }
  .bw-amen-timeline-img-wrap { width: 100%; height: 220px; }
  .bw-amen-timeline-track { display: none; }
  .bw-amen-timeline-dot { position: static; transform: none; }
  .bw-amen-timeline-title { font-size: clamp(24px, 5vw, 40px); line-height: 1.2; }
}