/* ==========================================================================
   Psychologist mini-site skin  (loaded after tmy.css so it overrides it)
   Palette: calm teal / sage green.  Structure mirrors the reference layout.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Nunito+Sans:wght@300;400;600;700&display=swap');

:root {
    /* Re-tint the whole theme by overriding the base tmy.css variables */
    --main:        #2C9C8E;   /* primary teal (buttons, links, header, footer accents) */
    --hover_main:  #1F7A6E;   /* darker teal for hover */
    --ligh-col:    #EAF5F2;   /* very light teal (footer / soft backgrounds) */

    /* Psychologist-specific tokens */
    --psy-primary:      #2C9C8E;
    --psy-primary-dark: #1F7A6E;
    --psy-primary-soft: #EAF5F2;
    --psy-accent:       #E7B96B;   /* warm sand accent for highlights */
    --psy-ink:          #2A3B37;   /* readable dark text */
    --psy-muted:        #64756F;   /* secondary text */
    --psy-cream:        #F6FBFA;   /* page section background */
    --psy-heading-font: 'Poppins', sans-serif;
    --psy-body-font:    'Nunito Sans', sans-serif;
}

/* --- Base typography (restore readable body text after --main override) --- */
body {
    color: var(--psy-ink) !important;
    font-family: var(--psy-body-font);
}
/* Contain stray horizontal overflow (e.g. a right-edge strip on small screens).
   `clip` (not `hidden`) does NOT create a scroll container, so it keeps the
   sticky header working. */
#wrapper { overflow-x: clip; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--psy-heading-font);
    color: var(--psy-ink);
}

/* --- Header: sticky nav, full at the top, compact "stuck" bar on scroll ---
   Sticky is applied to the <header> element (its parent #wrapper spans the whole
   page) rather than the nav — the nav's own parent is too short for sticky to hold. */
#wrapper > header {
    position: sticky;
    top: 0;
    z-index: 1030;
}
#header {
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);   /* flat at the very top */
    transition: box-shadow .35s ease, padding .3s ease;
    /* NB: do NOT put transform / will-change:transform here — #header is the
       ancestor of the fixed offcanvas menu, and that would trap the drawer
       inside the header box instead of the viewport. */
}
/* scrolled state: tmy.js adds .tmy_bg_color (+ .shadow-lg) once you scroll past ~10px. */
#header.tmy_bg_color {
    box-shadow: 0 6px 22px rgba(42, 59, 55, .09) !important;
}
/* tame Bootstrap's heavy .shadow-lg that tmy.js also adds */
#header.shadow-lg { box-shadow: 0 6px 22px rgba(42, 59, 55, .09) !important; }
/* smooth logo resize between the two states (tmy.js toggles .smaller on the logo) */
#header .navbar-brand img { transition: height .3s ease-in-out; }

#header .navbar-nav .nav-link { color: var(--psy-ink); font-family: var(--psy-heading-font); font-weight: 500; }
#header .navbar-nav .nav-link:hover,
#header .navbar-nav .current-menu-item > .nav-link { color: var(--psy-primary) !important; }

/* Generic buttons for this theme */
.psy-btn {
    display: inline-block;
    background-color: var(--psy-primary);
    color: #fff !important;
    border: 2px solid var(--psy-primary);
    border-radius: 40px;
    padding: 12px 30px;
    font-family: var(--psy-heading-font);
    font-weight: 500;
    letter-spacing: .3px;
    text-decoration: none;
    transition: all .25s ease-in-out;
}
.psy-btn i { margin-left: 8px; }
/* When .psy-btn is applied to a native <button> (e.g. the offcanvas trigger),
   reset the browser defaults so it matches the anchor version. */
button.psy-btn { font: inherit; font-weight: 500; cursor: pointer; }
.psy-btn:hover {
    background-color: var(--psy-primary-dark);
    border-color: var(--psy-primary-dark);
    color: #fff !important;
    transform: translateY(-2px);
}
.psy-btn.psy-btn-outline {
    background-color: transparent;
    color: var(--psy-primary) !important;
    border-color: var(--psy-primary);
}
.psy-btn.psy-btn-outline:hover {
    background-color: var(--psy-primary);
    color: #fff !important;
}
.psy-btn.psy-btn-light {
    background-color: #fff;
    color: var(--psy-primary) !important;
    border-color: #fff;
}

/* Small heart / brand mark that sits above section titles (like the reference) */
.psy-section-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--psy-primary-soft);
    color: var(--psy-primary);
    font-size: 22px;
    margin-bottom: 14px;
}
.psy-section-title {
    font-weight: 700;
    color: var(--psy-primary-dark);
    margin-bottom: 10px;
}
.psy-section-subtitle {
    color: var(--psy-muted);
    max-width: 720px;
    margin: 0 auto 10px;
    font-size: 1.05rem;
}

/* ==========================================================================
   1. HERO  (teal gradient + bottom wave)
   ========================================================================== */
.psy-hero {
    position: relative;
    background: linear-gradient(135deg, #2C9C8E 0%, #1F7A6E 55%, #17604F 100%);
    color: #fff;
    padding: 190px 0 170px;
    overflow: hidden;
    text-align: center;
}
/* Slow-moving light glow — transform-animated so it stays GPU-composited (cheap) */
.psy-hero::after {
    content: "";
    position: absolute;
    top: -40%; left: -25%;
    width: 65%; height: 170%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
    animation: psyHeroGlow 20s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes psyHeroGlow {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(90%, 18%, 0); }
}
.psy-hero::before {
    /* soft decorative blob */
    content: "";
    position: absolute;
    top: -120px; right: -120px;
    width: 380px; height: 380px;
    background: rgba(255, 255, 255, .06);
    border-radius: 50%;
}
.psy-hero .container { position: relative; z-index: 2; }
.psy-hero h1 {
    color: #fff;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.15;
    margin-bottom: 20px;
}
.psy-hero p.lead {
    color: rgba(255, 255, 255, .9);
    font-size: 1.15rem;
    max-width: 720px;
    margin: 0 auto 30px;
}
.psy-hero .psy-hero-icon {
    width: 74px; height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 22px;
}
/* Floating motion shapes in the hero background */
.psy-hero-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.psy-hero-shapes span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    animation: psyFloat 16s ease-in-out infinite;
}
.psy-hero-shapes span:nth-child(1) { width: 220px; height: 220px; top: 8%;  left: 6%;  animation-duration: 19s; }
.psy-hero-shapes span:nth-child(2) { width: 130px; height: 130px; top: 60%; left: 14%; background: rgba(255,255,255,.05); animation-duration: 14s; animation-delay: -3s; }
.psy-hero-shapes span:nth-child(3) { width: 90px;  height: 90px;  top: 24%; left: 82%; animation-duration: 12s; animation-delay: -6s; }
.psy-hero-shapes span:nth-child(4) { width: 300px; height: 300px; top: 45%; left: 68%; background: rgba(255,255,255,.04); animation-duration: 24s; animation-delay: -2s; }
.psy-hero-shapes span:nth-child(5) { width: 60px;  height: 60px;  top: 78%; left: 48%; animation-duration: 11s; animation-delay: -5s; }
@keyframes psyFloat {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(24px, -30px) scale(1.08); }
    66%  { transform: translate(-18px, 20px) scale(.94); }
    100% { transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .psy-hero::after { animation: none; }
    .psy-hero-shapes span { animation: none; }
}

/* bottom wave */
.psy-hero .psy-wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    width: 100%;
    line-height: 0;
    z-index: 2;
}
.psy-hero .psy-wave svg { width: 100%; height: 90px; display: block; }

/* ==========================================================================
   2. DOCTOR / ABOUT INTRO
   ========================================================================== */
.psy-intro {
    position: relative;
    background: #fff;
    padding: 10px 0 120px;   /* extra bottom room for the wave */
}
/* Doctor cutout photo that overlaps up into the hero (like the reference) */
.psy-intro .psy-intro-photo {
    display: block;
    width: 100%;
    max-width: 470px;
    height: auto;
    margin: -190px auto 0;    /* pull the figure up over the hero wave */
    position: relative;
    z-index: 4;
    filter: drop-shadow(0 26px 34px rgba(31, 122, 110, .22));
}
.psy-intro .psy-intro-body { padding: 10px 6px; }
.psy-intro .psy-intro-name {
    font-weight: 600;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    color: var(--psy-ink);
    margin-bottom: 14px;
}
.psy-intro .psy-name-underline {
    display: block;
    width: 70px; height: 4px;
    border-radius: 4px;
    background: var(--psy-primary);
    margin-bottom: 22px;
}
.psy-intro .psy-intro-role {
    display: block;
    font-family: var(--psy-heading-font);
    font-weight: 700;
    color: var(--psy-ink);
    font-size: 1.06rem;
    margin-bottom: 18px;
}
.psy-intro .psy-intro-body p { color: var(--psy-muted); margin-bottom: 16px; line-height: 1.75; }
.psy-intro .psy-intro-body .psy-btn { margin-top: 8px; }
/* bottom wave transitioning into the (cream) services section */
.psy-intro .psy-wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    z-index: 1;
    line-height: 0;
}
.psy-intro .psy-wave svg { width: 100%; height: 80px; display: block; }

/* Extended-bio right offcanvas (opened by the About button) */
.psy-about-offcanvas { width: min(460px, 90vw); }
.psy-about-offcanvas .offcanvas-header {
    border-bottom: 1px solid #e3eeeb;
    padding: 20px 24px;
}
.psy-about-offcanvas .offcanvas-title {
    font-family: var(--psy-heading-font);
    color: var(--psy-primary-dark);
    margin: 0;
}
.psy-about-offcanvas .offcanvas-body { padding: 24px; }
.psy-about-offcanvas .offcanvas-body { color: var(--psy-muted); line-height: 1.75; }
.psy-about-offcanvas .offcanvas-body p { margin-bottom: 16px; }
.psy-about-offcanvas .offcanvas-body h1,
.psy-about-offcanvas .offcanvas-body h2,
.psy-about-offcanvas .offcanvas-body h3,
.psy-about-offcanvas .offcanvas-body h4 {
    font-family: var(--psy-heading-font);
    color: var(--psy-ink);
    margin: 22px 0 10px;
}
.psy-about-offcanvas .offcanvas-body a { color: var(--psy-primary); }
.psy-about-offcanvas .offcanvas-body a:hover { color: var(--psy-primary-dark); }

/* ==========================================================================
   3. SERVICES GRID
   ========================================================================== */
.psy-services { background: var(--psy-cream); padding: 80px 0; }
.psy-service-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 10px 30px rgba(42, 59, 55, .06);
    transition: transform .28s ease, box-shadow .28s ease;
}
.psy-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(31, 122, 110, .16);
}
.psy-service-card .psy-service-img {
    height: 210px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.psy-service-card .psy-service-content { padding: 24px 26px 28px; }
.psy-service-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--psy-primary-dark);
    margin-bottom: 10px;
}
.psy-service-card p { color: var(--psy-muted); font-size: .96rem; margin: 0; }

/* ==========================================================================
   4. APPOINTMENT CTA BAND
   ========================================================================== */
.psy-cta {
    position: relative;
    padding: 130px 0;   /* extra room so text clears the top/bottom waves */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.psy-cta::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(31, 122, 110, .92), rgba(23, 96, 79, .88));
    z-index: 1;
}
.psy-cta .container { position: relative; z-index: 2; }
.psy-cta h2 { color: #fff; font-weight: 700; margin-bottom: 16px; }
.psy-cta p { color: rgba(255, 255, 255, .9); max-width: 640px; margin: 0 auto 28px; }
/* top + bottom waves cutting into the CTA image band */
.psy-cta .psy-wave {
    position: absolute;
    left: 0; right: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}
.psy-cta .psy-wave svg { width: 100%; height: 75px; display: block; }
.psy-cta .psy-wave-top    { top: -1px; transform: rotate(180deg); }
.psy-cta .psy-wave-bottom { bottom: -1px; }

/* ==========================================================================
   4b. GALLERY (Swiper + Fancybox)
   ========================================================================== */
.psy-gallery { background: #fff; padding: 80px 0; }
.psy-gallery-swiper { padding: 8px 12px 46px; }   /* bottom room for pagination */
.psy-gallery-swiper .swiper-slide { height: auto; }
.psy-gallery-img {
    display: block;
    height: 260px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 12px 30px rgba(42, 59, 55, .10);
    transition: transform .3s ease, box-shadow .3s ease;
}
.psy-gallery-swiper a { display: block; position: relative; }
.psy-gallery-swiper a::after {
    /* zoom hint on hover */
    content: "\f00e"; /* fa magnifying-glass-plus */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    background: rgba(31, 122, 110, .45);
    border-radius: 16px;
    opacity: 0;
    transition: opacity .3s ease;
}
.psy-gallery-swiper a:hover::after { opacity: 1; }
.psy-gallery-swiper a:hover .psy-gallery-img { transform: translateY(-4px); }
.psy-gallery-swiper .swiper-button-next,
.psy-gallery-swiper .swiper-button-prev {
    color: var(--psy-primary) !important;
    background: #fff;
    width: 44px; height: 44px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(42, 59, 55, .14);
    /* re-center on the images (the 46px bottom padding shifts the swiper's center down) */
    top: calc(50% - 19px);
}
.psy-gallery-swiper .swiper-button-next::after,
.psy-gallery-swiper .swiper-button-prev::after { font-size: 18px; font-weight: 700; }
.psy-gallery-swiper .swiper-pagination { bottom: 6px; }
.psy-gallery-swiper .swiper-pagination-bullet-active { background: var(--psy-primary) !important; }
@media (max-width: 767px) {
    .psy-gallery { padding: 60px 0; }
    .psy-gallery-img { height: 220px; }
}

/* ==========================================================================
   5. ARTICLES
   ========================================================================== */
.psy-articles { background: #fff; padding: 80px 0; }
.psy-article-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    border: 1px solid #edf3f1;
    transition: box-shadow .28s ease, transform .28s ease;
}
.psy-article-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(31, 122, 110, .14);
}
.psy-article-card .psy-article-img {
    height: 200px;
    background-size: cover;
    background-position: center;
}
.psy-article-card .psy-article-content { padding: 22px 24px 26px; }
.psy-article-card .psy-article-cat {
    color: var(--psy-primary);
    font-family: var(--psy-heading-font);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.psy-article-card h3 {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--psy-ink);
    margin: 8px 0 10px;
}
.psy-article-card p { color: var(--psy-muted); font-size: .94rem; margin-bottom: 14px; }
.psy-article-card a.psy-read-more {
    color: var(--psy-primary);
    font-weight: 600;
    text-decoration: none;
}
.psy-article-card a.psy-read-more:hover { color: var(--psy-primary-dark); }

/* ==========================================================================
   6. CONTACT
   ========================================================================== */
.psy-contact { position: relative; background: var(--psy-primary-soft); padding: 95px 0 80px; }
.psy-contact .container { position: relative; z-index: 2; }

/* Quote slider — sits in the footer, under the scroll-up arrow, above the logo */
.psy-quotes { max-width: 780px; margin: 24px auto 40px; }
.psy-quotes-swiper { padding-bottom: 40px; }   /* room for pagination dots */
.psy-quotes-swiper .swiper-slide { height: auto; }
.psy-quote {
    margin: 0;
    text-align: center;
    padding: 0 16px;
}
.psy-quote-mark {
    display: inline-block;
    font-size: 26px;
    color: var(--psy-primary);
    opacity: .55;
    margin-bottom: 14px;
}
.psy-quote-text {
    font-family: var(--psy-heading-font);
    font-size: 1.4rem;
    line-height: 1.55;
    font-weight: 500;
    font-style: italic;
    color: var(--psy-primary-dark);
    margin: 0 0 16px;
}
.psy-quote-author {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: .95rem;
    color: var(--psy-muted);
}
.psy-quote-author::before { content: "— "; }
.psy-quotes-swiper .swiper-pagination { bottom: 6px; }
.psy-quotes-swiper .swiper-pagination-bullet-active { background: var(--psy-primary) !important; }
@media (max-width: 575.98px) {
    .psy-quote-text { font-size: 1.15rem; }
}
/* top wave: white (articles) waves down into the light-teal contact bg */
.psy-contact .psy-wave-top {
    position: absolute;
    top: -1px; left: 0; right: 0;
    z-index: 1;
    line-height: 0;
    pointer-events: none;
    transform: rotate(180deg);
}
.psy-contact .psy-wave-top svg { width: 100%; height: 75px; display: block; }
.psy-contact iframe { width: 100%; min-height: 340px; border: 0; border-radius: 14px; }
.psy-contact .psy-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}
.psy-contact .psy-contact-icon {
    flex: 0 0 48px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #fff;   /* white circle so it stands out on the light-teal section */
    color: var(--psy-primary);
    box-shadow: 0 6px 16px rgba(31, 122, 110, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.psy-contact .psy-contact-item h4 { font-size: 1.05rem; margin-bottom: 2px; }
.psy-contact .psy-contact-item p,
.psy-contact .psy-contact-item a { color: var(--psy-muted); margin: 0; text-decoration: none; }
.psy-contact .psy-contact-item a:hover { color: var(--psy-primary); }

/* ==========================================================================
   Footer newsletter tweaks
   ========================================================================== */
/* Footer: cream bg so the light-teal wave (from the contact section) reads */
#footer { position: relative; padding-top: 70px; background-color: var(--psy-cream); }
#footer .container { position: relative; z-index: 2; }
#footer .psy-wave-top {
    position: absolute;
    top: -1px; left: 0; right: 0;
    z-index: 1;
    line-height: 0;
    pointer-events: none;
    transform: rotate(180deg);
}
#footer .psy-wave-top svg { width: 100%; height: 70px; display: block; }

/* Simple centered footer */
#footer .psy-foot-logo { height: 90px; width: auto; }
#footer .psy-foot-social-title {
    font-family: var(--psy-heading-font);
    font-weight: 700;
    color: var(--psy-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.1rem;
    margin-bottom: 18px;
}
#footer .psy-foot-social a {
    color: var(--psy-primary);
    font-size: 2rem;
    margin: 0 12px;
    display: inline-block;
    transition: transform .25s ease, color .25s ease;
}
#footer .psy-foot-social a:hover {
    color: var(--psy-primary-dark);
    transform: translateY(-3px);
}
#footer .psy-foot-tagline {
    color: var(--psy-muted);
    font-weight: 500;
    letter-spacing: .3px;
    margin: 22px auto;
    max-width: 640px;
}
/* soften the divider rules on the cream footer */
#footer .row.divider { border-color: #d5e7e2; }

/* ==========================================================================
   SINGLE POST (featured image hero + content)
   ========================================================================== */
.psy-single-hero {
    position: relative;
    /* fallback when there is no featured image */
    background: linear-gradient(135deg, #2C9C8E 0%, #1F7A6E 55%, #17604F 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 150px 0 130px;
    text-align: center;
    overflow: hidden;
}
.psy-single-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(23, 96, 79, .55), rgba(23, 96, 79, .82));
    z-index: 1;
}
.psy-single-hero .container { position: relative; z-index: 2; }
.psy-single-hero-inner { max-width: 860px; margin: 0 auto; }
.psy-single-hero h1 {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 1.2;
    margin: 16px auto 16px;
}
.psy-single-cat {
    display: inline-block;
    background: rgba(255, 255, 255, .18);
    color: #fff !important;
    padding: 6px 18px;
    border-radius: 40px;
    font-family: var(--psy-heading-font);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background .25s ease;
}
.psy-single-cat:hover { background: rgba(255, 255, 255, .3); }
.psy-single-meta { color: rgba(255, 255, 255, .88); font-size: .95rem; }
.psy-single-meta i { margin-right: 7px; }
.psy-single-meta .psy-meta-sep { margin: 0 10px; opacity: .6; }
.psy-single-hero .psy-wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    z-index: 2;
    line-height: 0;
}
.psy-single-hero .psy-wave svg { width: 100%; height: 80px; display: block; }

/* 404: same hero, with the code set large above the heading */
.psy-404-code {
    display: block;
    font-family: var(--psy-heading-font);
    font-weight: 700;
    line-height: 1;
    font-size: clamp(4.5rem, 12vw, 8rem);
    color: rgba(255, 255, 255, .22);
    letter-spacing: 4px;
}
.psy-404-body .psy-section-mark { margin-bottom: 22px; }
.psy-404-lead {
    font-family: var(--psy-heading-font);
    font-weight: 500;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.55;
    color: var(--psy-primary-dark);
    margin-bottom: 14px;
}
.psy-404-text {
    color: var(--psy-muted);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto 32px;
}
.psy-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* content */
.psy-single-body { background: #fff; padding: 70px 0 80px; }
.psy-single-content {
    font-size: 1.07rem;
    line-height: 1.8;
    color: #3d4b47;
}
.psy-single-content > *:first-child { margin-top: 0; }
.psy-single-content p { margin-bottom: 1.3em; }
.psy-single-content h2,
.psy-single-content h3,
.psy-single-content h4 {
    font-family: var(--psy-heading-font);
    color: var(--psy-primary-dark);
    margin: 1.7em 0 .6em;
    line-height: 1.3;
}
.psy-single-content h2 { font-size: 1.6rem; }
.psy-single-content h3 { font-size: 1.3rem; }
.psy-single-content a { color: var(--psy-primary); text-decoration: underline; text-underline-offset: 2px; }
.psy-single-content a:hover { color: var(--psy-primary-dark); }
.psy-single-content ul, .psy-single-content ol { margin: 0 0 1.3em 1.2em; }
.psy-single-content li { margin-bottom: .5em; }
.psy-single-content img,
.psy-single-content iframe { max-width: 100%; height: auto; border-radius: 14px; margin: 1em 0; }
.psy-single-content blockquote {
    border-left: 4px solid var(--psy-primary);
    background: var(--psy-primary-soft);
    padding: 16px 22px;
    border-radius: 0 12px 12px 0;
    margin: 1.6em 0;
    color: var(--psy-muted);
    font-style: italic;
}
.psy-single-content figure { margin: 1.4em 0; }
.psy-single-content figcaption { color: var(--psy-muted); font-size: .9rem; text-align: center; margin-top: 8px; }
.psy-single-tags { margin-top: 30px; }
.psy-single-tags a {
    display: inline-block;
    background: var(--psy-primary-soft);
    color: var(--psy-primary-dark);
    padding: 5px 14px;
    border-radius: 40px;
    font-size: .82rem;
    text-decoration: none;
    margin: 0 6px 6px 0;
}
.psy-single-tags a:hover { background: var(--psy-primary); color: #fff; }
.psy-single-back { margin-top: 40px; }

/* ==========================================================================
   ARCHIVE / BLOG LISTING (+ pagination)
   ========================================================================== */
.psy-archive { background: #fff; padding: 70px 0 90px; }
/* archive hero: same as home hero but without the CTA button, slightly shorter */
.psy-archive-hero { padding: 130px 0 120px; }
/* card image + title become links in the listing */
.psy-article-card a.psy-article-img { display: block; }
.psy-article-card h3 a { color: var(--psy-ink); text-decoration: none; }
.psy-article-card h3 a:hover { color: var(--psy-primary); }

/* pagination */
.psy-pagination { margin-top: 54px; }
.psy-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.psy-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid #d7e7e2;
    color: var(--psy-primary);
    font-family: var(--psy-heading-font);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.psy-pagination .page-numbers:hover { background: var(--psy-primary-soft); transform: translateY(-2px); }
.psy-pagination .page-numbers.current {
    background: var(--psy-primary);
    border-color: var(--psy-primary);
    color: #fff;
}
.psy-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* ==========================================================================
   CONTACT MODAL + FORM
   ========================================================================== */
.psy-contact-modal .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(31, 122, 110, .22);
}
.psy-contact-modal .modal-header {
    border-bottom: 1px solid #eef4f2;
    padding: 20px 26px;
}
.psy-contact-modal .modal-title {
    font-family: var(--psy-heading-font);
    font-weight: 700;
    color: var(--psy-primary-dark);
}
.psy-contact-modal .modal-body { padding: 24px 26px 28px; }

.psy-contact-form .form-label {
    font-family: var(--psy-heading-font);
    font-weight: 600;
    font-size: .88rem;
    color: var(--psy-ink);
    margin-bottom: 5px;
}
.psy-contact-form .form-control {
    border: 1px solid #d7e7e2;
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--psy-ink);
}
.psy-contact-form .form-control:focus {
    border-color: var(--psy-primary);
    box-shadow: 0 0 0 .2rem rgba(44, 156, 142, .15);
}
.psy-contact-form textarea.form-control { resize: vertical; min-height: 110px; }
.psy-contact-form .form-check-input { border-color: #c3ddd6; margin-top: .2em; }
.psy-contact-form .form-check-input:checked {
    background-color: var(--psy-primary);
    border-color: var(--psy-primary);
}
.psy-contact-form .form-check-input:focus {
    border-color: var(--psy-primary);
    box-shadow: 0 0 0 .2rem rgba(44, 156, 142, .15);
}
.psy-contact-form .form-check-label { font-size: .92rem; color: var(--psy-muted); }
.psy-contact-form .form-check-label a { color: var(--psy-primary); }
.psy-contact-form .psy-btn { margin-top: 6px; }
.psy-form-status {
    min-height: 22px;
    margin-bottom: 12px;
    font-size: .92rem;
    line-height: 1.4;
}
.psy-form-status.ok { color: var(--psy-primary-dark); font-weight: 600; }
.psy-form-status.err { color: #c0392b; }

/* ==========================================================================
   On-scroll reveal animations (progressive enhancement — see js/psych.js)
   ========================================================================== */
.psy-js .reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
                transform .7s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}
.psy-js .reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* directional variants */
.psy-js .reveal.reveal-left  { transform: translateX(-40px); }
.psy-js .reveal.reveal-right { transform: translateX(40px); }
.psy-js .reveal.reveal-left.is-visible,
.psy-js .reveal.reveal-right.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .psy-js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
    .psy-hero { padding: 150px 0 130px; }
    /* Static hero on tablets & phones: no sweeping glow, orbs, or corner blob —
       on narrow viewports the motion read as a rectangle sliding sideways. */
    .psy-hero::after { display: none; }    /* sweeping glow */
    .psy-hero::before { display: none; }   /* static top-right blob */
    .psy-hero-shapes { display: none; }    /* floating orbs */
    .psy-intro { padding: 10px 0 90px; }
    .psy-intro .psy-intro-photo { margin-top: -130px; max-width: 380px; }
    .psy-intro .psy-intro-body { text-align: center; padding-top: 24px; }
    .psy-intro .psy-name-underline { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
    .psy-hero { padding: 130px 0 110px; }   /* hero motion already disabled at <=991 */
    .psy-intro .psy-intro-photo { margin-top: -90px; max-width: 300px; }
    .psy-service-card .psy-service-img { height: 190px; }
    .psy-cta { padding: 100px 0; background-attachment: scroll; }
}