:root {
      --bg: #fffdf8;
      --fg: #26231f;
      --muted: #746f67;
      --panel: #f7f1e7;
      --panel-light: #fffaf1;
      --ring: #e7ddce;
      --accent: #80623f;
      --accent-dark: #5f472d;
      --white: #ffffff;
    }

    body {
      background: var(--bg);
      color: var(--fg);
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.7;
    }

    a {
      color: var(--accent-dark);
    }

    a:hover {
      color: var(--fg);
    }

    .navbar,
    .footer {
      background: var(--bg);
    }

    .navbar {
      border-bottom: 1px solid var(--ring);
    }

    .navbar-brand {
      color: var(--fg);
      font-weight: 700;
      letter-spacing: -.02em;
    }

    .nav-link {
      color: var(--muted);
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--fg);
    }

    .section {
      padding-top: 5rem;
      padding-bottom: 5rem;
    }

    .section-sm {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .hero {
      padding-top: 7rem;
      padding-bottom: 7rem;
      background:
        linear-gradient(
          rgba(255, 253, 248, .88),
          rgba(255, 253, 248, .94)
        ),
        url("/images/soul-speak-sessions-hero.jpg") center/cover no-repeat;
      border-bottom: 1px solid var(--ring);
    }

    .kicker {
      color: var(--accent);
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .display-title {
      max-width: 900px;
      font-size: clamp(2.8rem, 7vw, 5.75rem);
      font-weight: 700;
      letter-spacing: -.055em;
      line-height: .98;
    }

    .lead-copy {
      max-width: 760px;
      color: var(--muted);
      font-size: 1.2rem;
    }

    .panel {
      height: 100%;
      padding: 2rem;
      background: var(--panel-light);
      border: 1px solid var(--ring);
      border-radius: 1rem;
    }

    .icon-box {
      display: inline-flex;
      width: 3rem;
      height: 3rem;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
      color: var(--accent-dark);
      background: var(--panel);
      border: 1px solid var(--ring);
      border-radius: 50%;
    }

    .quote-panel {
      padding: 3rem;
      background: var(--fg);
      color: var(--white);
      border-radius: 1.25rem;
    }

    .quote-panel p {
      max-width: 900px;
      margin-bottom: 0;
      font-size: clamp(1.5rem, 3vw, 2.4rem);
      line-height: 1.35;
    }

    .text-muted-custom {
      color: var(--muted);
    }

    .btn-primary-custom {
      padding: .85rem 1.4rem;
      color: var(--white);
      background: var(--fg);
      border: 1px solid var(--fg);
    }

    .btn-primary-custom:hover {
      color: var(--white);
      background: var(--accent-dark);
      border-color: var(--accent-dark);
    }

    .btn-outline-custom {
      padding: .85rem 1.4rem;
      color: var(--fg);
      background: transparent;
      border: 1px solid var(--fg);
    }

    .btn-outline-custom:hover {
      color: var(--white);
      background: var(--fg);
    }

    .media-placeholder {
      position: relative;
      min-height: 420px;
      overflow: hidden;
      background:
        linear-gradient(rgba(38, 35, 31, .15), rgba(38, 35, 31, .4)),
        url("/images/soul-speak-piano.jpg") center/cover no-repeat;
      border: 1px solid var(--ring);
      border-radius: 1.25rem;
    }

    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-flex;
      width: 5rem;
      height: 5rem;
      align-items: center;
      justify-content: center;
      color: var(--fg);
      background: rgba(255, 253, 248, .92);
      border: 0;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: transform .2s ease, background .2s ease;
    }

    .play-button:hover {
      background: var(--white);
      transform: translate(-50%, -50%) scale(1.06);
    }

    .session-card {
      height: 100%;
      overflow: hidden;
      background: var(--white);
      border: 1px solid var(--ring);
      border-radius: 1rem;
    }

    .session-thumb {
      min-height: 220px;
      background: var(--panel);
      background-position: center;
      background-size: cover;
    }

    .session-body {
      padding: 1.5rem;
    }

    .number {
      color: var(--accent);
      font-size: .85rem;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .cta {
      padding: 3rem;
      background: var(--panel);
      border: 1px solid var(--ring);
      border-radius: 1.25rem;
    }

    .footer {
      color: var(--muted);
      border-top: 1px solid var(--ring);
    }

    @media (max-width: 767.98px) {
      .hero {
        padding-top: 5rem;
        padding-bottom: 5rem;
      }

      .section {
        padding-top: 4rem;
        padding-bottom: 4rem;
      }

      .quote-panel,
      .cta {
        padding: 2rem;
      }
    }