/* =========================================================
   EMDR PAGE
   Everything scoped to .emdr-page
   Section classes:
   emdr-hero
   emdr-stats
   emdr-intro
   emdr-past-present
   emdr-may-help-with
   emdr-book-session
   ========================================================= */

.emdr-page {
    --green: #204B39;
    font-family: 'Poppins', 'Inter', sans-serif;
    color: #1a1a1a;
    overflow: hidden;
    background: linear-gradient(180deg, #fdf8e8, #fffaee);
}

.emdr-page p {
    margin: 0;
}

.emdr-page img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   SHARED STYLES
   Headings, Buttons, Reveal Animation
   ========================================================= */

.emdr-title,
.emdr-heading {
    font: 400 clamp(26px, 3.2vw, 36px) / 1.3 'Young Serif', serif;
    color: var(--green);
    margin: 0;
}

.emdr-heading--sm {
    font-size: clamp(22px, 2.6vw, 28px);
}

.emdr-btn {
    display: inline-block;
    background: var(--green);
    color: #FFF9E8;
    font: 500 18px 'inter', sans-serif;
    padding: 11px 28px;
    border-radius: 5px;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
}

.emdr-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(31, 77, 52, 0.35);
}

.emdr-btn--sm {
    width: 200px;
    padding: 9px 0;
    text-align: center;
    font: 400 18px 'Young Serif', serif;
}

.emdr-page [data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s, transform 0.8s;
    transition-delay: var(--d, 0s);
}

.emdr-page [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}


/* =========================================================
   EMDR HERO
   ========================================================= */
section.emdr-hero {
  background-image: url("/assets/images/Banner Bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
}

section.emdr-hero {
    position: relative;
    padding: 70px 0 40px;
    min-height: 620px;
}
.emdr-hero__title {
    font: 700 clamp(28px, 4.2vw, 52px) / 1.1 'Source Sans Pro', sans-serif;
    color: var(--green);
    margin: 0 0 18px;
}

.emdr-hero__subtitle {
    font: 700 15px 'Young Serif', serif;
    color: var(--green);
    margin-bottom: 28px !important;
}

.emdr-hero__title,
.emdr-hero__subtitle,
.emdr-hero .emdr-btn {
    animation: emdrFade 1s both;
}

.emdr-hero__subtitle {
    animation-delay: 0.2s;
}

.emdr-hero .emdr-btn {
    animation-delay: 0.4s;
}

.emdr-hero__scroll {
    display: block;
    width: max-content;
    margin: clamp(50px, 9vw, 110px) auto 0;
    font-size: 16px;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
}

.emdr-hero__scroll svg {
    display: block;
    margin: 4px auto 0;
    animation: emdrBounce 1.6s infinite;
}


/* =========================================================
   EMDR STATS
   ========================================================= */

.emdr-stats {
    max-width: 920px;
    margin: 0 auto;
    padding: 30px 15px 0;
}

.emdr-stats__box {
    display: flex;
    justify-content: space-between;
    background: #fcf3dc;
    padding: 22px clamp(20px, 6vw, 60px);
    text-align: center;
}

.emdr-stats__box > div {
    transition: transform 0.3s;
}

.emdr-stats__box > div:hover {
    transform: scale(1.08);
}

.emdr-stats strong {
    display: block;
    font: 500 35px 'Young Serif', serif;
    color: var(--green);
}

.emdr-stats span {
    font: 500 16px 'Young Serif', serif;
    color: var(--green);
}

.emdr-divider {
    border: 0;
    border-top: 1px solid #6c8f77;
    opacity: 1;
    margin: 30px 0 0;
}


/* =========================================================
   EMDR INTRO
   ========================================================= */

.emdr-intro {
    padding: 30px 15px 0;
}

.emdr-intro__location {
    font-size: 20px;
    margin: 6px 0 24px;
}

.emdr-intro__illustration {
    width: 250px;
    transition: transform 0.5s;
}

.emdr-intro__illustration:hover {
    transform: translateY(-8px) scale(1.04);
}


/* =========================================================
   EMDR PAST & PRESENT
   ========================================================= */

.emdr-past-present {
    padding: 70px 15px 0;
}

.emdr-past-present__content {
    min-height: clamp(220px, 32vw, 400px);
}
.emdr-past-present__content p{
  margin-bottom: 20px;
  font-size: 18px;
}

/* =========================================================
   EMDR MAY HELP WITH
   ========================================================= */

.emdr-may-help-with {
    padding: 60px 15px 70px;
}

.emdr-pills {
    list-style: none;
    margin: 40px auto 0;
    padding: 0;
    max-width: 800px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px clamp(20px, 9vw, 100px);
}

.emdr-pills li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px;
    border: 1.5px solid #6c8f77;
    border-radius: 9px;
    background: #fffaee;
    color: var(--green);
    font: 600 20px / 1.3 'inter', sans-serif;
    transition:
        background 0.25s,
        color 0.25s,
        transform 0.25s,
        box-shadow 0.25s;
}

.emdr-pills li:hover {
    background: var(--green);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(31, 77, 52, 0.25);
}

.emdr-pills__last {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
}


/* =========================================================
   EMDR BOOK SESSION
   ========================================================= */

.emdr-book-session {
    background: #eef5ec;
    padding: 50px 0;
}

.emdr-book-session__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 6vw, 90px);
    flex-wrap: wrap;
}

.emdr-book-session__illustration {
    width: 200px;
    transition: transform 0.5s;
}

.emdr-book-session__illustration:hover {
    transform: scale(1.06);
}

.emdr-book-session__text {
    max-width: 900px;
    margin: 36px auto 0 !important;
    text-align: center;
    font-size: 20px;
    line-height: 30px;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes emdrFade {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
}

@keyframes emdrSway {
    from {
        transform: rotate(-1.5deg);
    }

    to {
        transform: rotate(2deg);
    }
}

@keyframes emdrBounce {
    50% {
        transform: translateY(5px);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .emdr-page * {
        animation: none !important;
        transition: none !important;
    }

    .emdr-page [data-reveal] {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .emdr-pills {
        grid-template-columns: 1fr;
    }

    .emdr-pills__last {
        width: 100%;
    }

    .emdr-book-session__row {
        flex-direction: column;
    }

    .emdr-book-session__illustration {
        order: -1;
    }
}