/* ── Color Palette from screenshot ─────────────────────────── */
    :root {
      --navy:      #3b5068;   /* nav / dark text blocks          */
      --steel:     #4a6278;   /* slightly lighter nav shade       */
      --slate:     #6b8399;   /* secondary text / accents         */
      --dusty:     #7a97aa;   /* light accent / icon fills        */
      --sky-light: #cdd9e1;   /* background tints                 */
      --cream:     #f5f6f4;   /* page background                  */
      --white:     #ffffff;
      --heading:   #3b5068;   /* matches screenshot h1 color      */
      --body-text: #3d3d3d;
      --btn-bg:    #3b5068;
      --btn-hover: #2d3e4f;
    }
/* ── Section base ────────────────────────────────────────────── */
    section { padding: 72px 0; }
    .section-title {
      font-weight: 400;
      color: var(--heading);
      margin-bottom: 8px;
      line-height: 1.2;
    }
    .section-eyebrow {
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--slate);
      margin-bottom: 12px;
      display: block;
    }
    .section-divider {
      width: 44px;
      height: 2px;
      background: var(--dusty);
      margin: 18px 0 28px;
    }
    .section-divider.center { margin: 18px auto 28px; }

    /* ── What is Barre ───────────────────────────────────────────── */
    .what-section { background: var(--white); }
    .feature-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--sky-light);
      color: var(--navy);
      border-radius: 0;
      padding: 10px 18px;
      font-size: 0.85rem;
      font-weight: 500;
      margin: 5px 5px 5px 0;
      letter-spacing: 0.04em;
    }
    .feature-pill i { color: var(--slate); font-size: 1rem; }

    /* ── Who is it for ───────────────────────────────────────────── */
    .who-section { background: var(--cream); }
    .check-list { list-style: none; padding: 0; margin: 0; }
    .check-list li {
      padding: 10px 0;
      border-bottom: 1px solid #dde6ec;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      font-size: 0.95rem;
      color: var(--body-text);
    }
    .check-list li:last-child { border-bottom: none; }
    .check-list li i { color: var(--slate); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }

    /* ── Benefits ────────────────────────────────────────────────── */
    .benefits-section { background: var(--navy); }
    .benefits-section .section-title { color: #e8f0f5; }
    .benefits-section .section-eyebrow { color: #90b4c8; }
    .benefits-section .section-divider { background: var(--dusty); }
    .benefit-card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 28px 26px;
      height: 100%;
      transition: background .25s, transform .25s;
    }
    .benefit-card:hover {
      background: rgba(255,255,255,0.11);
      transform: translateY(-4px);
    }
    .benefit-card .icon-wrap {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }
    .benefit-card i { color: #a8cfe0; font-size: 1.3rem; }
    .benefit-card h6 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      font-weight: 400;
      color: #fff;
      margin-bottom: 8px;
    }
    .benefit-card p { color: #a8c3d4; margin: 0; }

    /* ── Class Details ───────────────────────────────────────────── */
    .details-section { background: var(--white); }
    .detail-row {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      padding: 18px 0;
      border-bottom: 1px solid #dde6ec;
    }
    .detail-row:last-child { border-bottom: none; }
    .detail-icon {
      width: 42px;
      height: 42px;
      background: var(--sky-light);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .detail-icon i { color: var(--navy); font-size: 1.1rem; }
    .detail-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: 2px; }
    .detail-value { font-size: 1rem; color: var(--navy); font-weight: 500; }
    .detail-note {
      background: var(--sky-light);
      border-left: 3px solid var(--dusty);
      padding: 16px 20px;
      font-size: 0.9rem;
      color: var(--navy);
      margin-top: 28px;
    }
    .detail-note i { margin-right: 8px; color: var(--slate); }

    /* ── Booking ─────────────────────────────────────────────────── */
    .booking-section { background: var(--sky-light); }
    .booking-card {
      background: var(--white);
      border-top: 4px solid var(--navy);
      padding: 48px 44px;
      box-shadow: 0 6px 30px rgba(59,80,104,.1);
    }
    .btn-cta {
      background: var(--navy);
      color: #fff;
      border: none;
      border-radius: 0;
      padding: 14px 40px;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-decoration: none;
      display: inline-block;
      transition: background .2s, transform .2s;
    }
    .btn-cta:hover { background: var(--btn-hover); color: #fff; transform: translateY(-2px); }
    .btn-outline-cta {
      background: transparent;
      color: var(--navy);
      border: 2px solid var(--navy);
      border-radius: 0;
      padding: 12px 38px;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-decoration: none;
      display: inline-block;
      transition: background .2s, color .2s;
    }
    .btn-outline-cta:hover { background: var(--navy); color: #fff; }

    /* ── Why Choose ──────────────────────────────────────────────── */
    .why-section { background: var(--cream); }
    .why-card {
      background: var(--white);
      padding: 32px 28px;
      height: 100%;
      border-top: 3px solid var(--dusty);
      box-shadow: 0 2px 16px rgba(59,80,104,.07);
      transition: box-shadow .25s, transform .25s;
    }
    .why-card:hover { box-shadow: 0 8px 28px rgba(59,80,104,.14); transform: translateY(-3px); }
    .why-card i { font-size: 1.8rem; color: var(--slate); margin-bottom: 16px; display: block; }
    .why-card h6 {
      font-size: 1.25rem;
      color: var(--heading);
      margin-bottom: 10px;
    }
    .why-card p {color: #5a6a74; margin: 0; }

    /* ── Footer ──────────────────────────────────────────────────── */
    @media (min-width: 1920px) { 
    .feature-pill {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 5px 5px 5px 0;
    letter-spacing: 0.04em;
}
.check-list li {
    font-size: 1.4rem;
}
.check-list li i {
    font-size: 1.5rem;
}
.benefit-card .icon-wrap {
    width: 60px;
    height: 60px;
}
.benefit-card i
 {
    font-size: 1.8rem;
}
.benefit-card h6 {
    font-size: 1.8rem;
}
.detail-note {
    font-size: 1.4rem;
}
.detail-icon {
    width: 50px;
    height: 50px;
}
.detail-icon i {
    font-size: 1.5rem;
}
.detail-label {
    font-size: 1.2rem;
}
.detail-value {
    font-size: 1.5rem;
}
.why-card i { font-size: 2.2rem; }
    .why-card h6 {
      font-size: 1.75rem;
    }
}
 @media (min-width: 2500px) { 
    .feature-pill {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 5px 5px 5px 0;
    letter-spacing: 0.04em;
}
.check-list li {
    font-size: 1.8rem;
}
.check-list li i {
    font-size: 1.8rem;
}
.benefit-card .icon-wrap {
    width: 70px;
    height: 70px;
}
.benefit-card i
 {
    font-size: 2.2rem;
}
.benefit-card h6 {
    font-size: 2.2rem;
}
.detail-note {
    font-size: 1.8rem;
}
.detail-icon {
    width: 60px;
    height: 60px;
}
.detail-icon i {
    font-size: 1.8rem;
}
.detail-label {
    font-size: 1.6rem;
}
.detail-value {
    font-size: 1.8rem;
}
.why-card i { font-size: 2.8rem; }
    .why-card h6 {
      font-size: 2.2rem;
    }
}