/*
 * Final visual layer matched to the approved homepage mockup.
 * The base file keeps shared utilities; this file controls the final composition.
 */

:root {
    --psy-shell: min(1180px, calc(100% - 48px));
    --psy-navy: #072f61;
    --psy-blue: #0873c9;
    --psy-blue-dark: #075aa3;
    --psy-sky: #dcefff;
    --psy-ice: #f5faff;
    --psy-line: #d3e6f6;
    --psy-muted: #687f98;
    --psy-gold: #dfbd4e;
    --psy-radius-sm: 13px;
    --psy-radius-md: 20px;
    --psy-radius-lg: 28px;
    --psy-shadow-sm: 0 10px 30px rgba(25, 80, 126, 0.08);
    --psy-shadow-md: 0 20px 55px rgba(25, 80, 126, 0.12);
}

body.psy-body {
    color: #102f53;
    background: #ffffff;
    font-size: 15px;
}

.psy-shell {
    width: var(--psy-shell);
}

.psy-header {
    position: relative;
    z-index: 1000;
    top: auto;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #d9e7f2;
    box-shadow: none;
}

.psy-header-inner {
    display: flex;
    min-height: 104px;
    direction: ltr;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.psy-brand {
    position: relative;
    display: block;
    width: 145px;
    height: 96px;
    flex: 0 0 145px;
}

.psy-brand .psy-brand-calligraphy {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.psy-desktop-nav {
    display: flex;
    margin-right: 0;
    margin-left: auto;
    direction: rtl;
    align-items: center;
    gap: 35px;
}

.psy-desktop-nav a {
    position: relative;
    padding: 27px 0 24px;
    color: #183858;
    font-size: 0.87rem;
    font-weight: 700;
}

.psy-desktop-nav a:first-child {
    color: var(--psy-blue);
}

.psy-desktop-nav a:first-child::after,
.psy-desktop-nav a:hover::after {
    position: absolute;
    right: 0;
    bottom: 15px;
    width: 22px;
    height: 2px;
    content: "";
    background: var(--psy-blue);
}

.psy-header-social {
    display: none;
}

/* Approved hero: wide office photograph, copy at left, portrait at right. */
.psy-hero {
    position: relative;
    min-height: 355px;
    overflow: hidden;
    background-color: #f5faff;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0) 70%),
        url("../images/hero-office-v2.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.psy-hero::before,
.psy-hero::after {
    position: absolute;
    content: "";
    pointer-events: none;
    border-radius: 50%;
}

.psy-hero::before {
    top: -64px;
    left: -50px;
    width: 145px;
    height: 145px;
    background: rgba(187, 224, 249, 0.42);
}

.psy-hero::after {
    bottom: -85px;
    left: -68px;
    width: 190px;
    height: 190px;
    border: 26px solid rgba(208, 234, 250, 0.42);
}

.psy-hero-grid {
    position: relative;
    min-height: 355px;
    display: grid;
    direction: ltr;
    grid-template-columns: minmax(430px, 0.92fr) 1.08fr;
    align-items: center;
}

.psy-hero-content {
    position: relative;
    z-index: 3;
    max-width: 530px;
    padding: 42px 0 38px;
    direction: rtl;
    text-align: right;
}

.psy-hero-content .psy-kicker {
    display: none;
}

.psy-hero-content h1 {
    max-width: 530px;
    margin: 0 0 16px;
    color: var(--psy-navy);
    font-size: clamp(2.15rem, 3vw, 3.15rem);
    font-weight: 900;
    line-height: 1.55;
    letter-spacing: -1.4px;
}

.psy-hero-content h1 span {
    display: block;
    color: var(--psy-navy);
}

.psy-hero-content > p {
    max-width: 510px;
    margin: 0 0 22px;
    color: #476682;
    font-size: 0.94rem;
    line-height: 2;
}

.psy-hero-actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
}

.psy-button {
    min-height: 45px;
    padding: 0 25px;
    border-radius: 999px;
    font-size: 0.87rem;
    font-weight: 800;
}

.psy-button-primary {
    color: #fff;
    background: linear-gradient(90deg, #075da6, #0782d5);
    border: 1px solid transparent;
    box-shadow: 0 10px 22px rgba(8, 113, 195, 0.18);
}

.psy-button-outline {
    color: var(--psy-navy);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--psy-blue);
}

.psy-hero-content > blockquote {
    display: none;
}

.psy-hero-wall-quote {
    position: absolute;
    z-index: 4;
    right: max(-96px, calc((100vw - 1180px) / -2 + 16px));
    top: 50%;
    width: 158px;
    min-height: 222px;
    padding: 36px 18px 24px;
    direction: rtl;
    color: #2b4a67;
    background: rgba(255, 255, 255, 0.78);
    border: 2px solid rgba(88, 130, 163, 0.4);
    box-shadow: 0 8px 24px rgba(19, 58, 91, 0.05);
    text-align: center;
    backdrop-filter: blur(4px);
    transform: translateY(-50%);
}

.psy-hero-wall-quote span,
.psy-hero-wall-quote strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 2.05;
}

.psy-hero-wall-quote::after {
    display: block;
    width: 28px;
    height: 2px;
    margin: 12px auto 0;
    content: "";
    background: #7998af;
}

.psy-hero-portrait {
    display: none;
}

/* Trust/social strip */
.psy-trust-strip {
    position: relative;
    z-index: 10;
    background: #fff;
    border-top: 1px solid #e3eef7;
    border-bottom: 1px solid #dbe9f4;
}

.psy-trust-grid {
    display: grid;
    min-height: 76px;
    grid-template-columns: 0.82fr 0.82fr 1.36fr;
    align-items: stretch;
    direction: ltr;
}

.psy-trust-grid > div {
    display: flex;
    padding: 13px 24px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 0;
    border-left: 1px solid #d9e7f2;
    direction: rtl;
}

.psy-trust-grid > div:first-child {
    border-right: 1px solid #d9e7f2;
}

.psy-trust-grid strong {
    color: var(--psy-blue-dark);
    font-size: 0.84rem;
}

.psy-trust-grid small {
    margin-top: 2px;
    color: #7890a7;
    font-size: 0.68rem;
}

.psy-icon-box {
    width: 38px;
    height: 38px;
    color: var(--psy-blue);
    background: transparent;
    border: 0;
}

.psy-social-choice {
    flex-direction: row-reverse;
}

.psy-social-choice nav {
    display: flex;
    gap: 8px;
}

.psy-social-choice nav a {
    min-width: auto;
    height: 38px;
    padding: 0 10px;
    color: var(--psy-blue);
    background: #fff;
    border: 1px solid #d3e5f3;
    border-radius: 11px;
    gap: 6px;
}

.psy-social-choice nav b {
    font-size: 0.67rem;
}

.psy-social-choice nav svg {
    color: currentColor;
    fill: none;
    stroke: currentColor;
}

/* Shared section rhythm */
.psy-section {
    padding-block: 70px;
}

.psy-section-heading {
    margin-bottom: 28px;
}

.psy-section-heading > div > span,
.psy-kicker {
    margin-bottom: 5px;
    color: var(--psy-blue);
    font-size: 0.74rem;
}

.psy-section-heading h2,
.psy-book-content h2,
.psy-about-title h2 {
    color: var(--psy-navy);
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
    font-weight: 900;
    line-height: 1.45;
}

.psy-section-heading p {
    max-width: 680px;
    margin-top: 6px;
    color: var(--psy-muted);
    font-size: 0.88rem;
}

.psy-text-link {
    color: #086dbe;
    font-size: 0.78rem;
    font-weight: 800;
}

/* Course cards: photographic horizontal cards, three visible on desktop. */
.psy-courses {
    background: #fff;
}

.psy-courses .psy-section-heading {
    display: block;
    text-align: center;
}

.psy-courses .psy-section-heading > div > span {
    justify-content: center;
}

.psy-courses .psy-section-heading p {
    margin-inline: auto;
}

.psy-courses .psy-section-heading > .psy-text-link {
    position: absolute;
    left: 0;
    margin-top: -35px;
}

.psy-slider-shell {
    padding-inline: 18px;
}

.psy-slider-track {
    padding: 3px 2px 20px;
    gap: 15px;
    touch-action: pan-x pan-y;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    user-select: none;
}

.psy-slider-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

@media (hover: hover) and (pointer: fine) {
    .psy-slider-track {
        cursor: grab;
    }
}

.psy-course-card {
    display: flex;
    min-width: calc((100% - 30px) / 3);
    width: calc((100% - 30px) / 3);
    min-height: 205px;
    overflow: hidden;
    direction: ltr;
    background: #fff;
    border: 1px solid #cfe4f4;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(28, 88, 132, 0.07);
}

.psy-course-image {
    position: relative;
    width: 47%;
    min-width: 47%;
    height: auto;
    overflow: hidden;
    background: #eaf5fc;
}

.psy-course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.psy-course-image span {
    top: 12px;
    left: 12px;
    right: auto;
    padding: 5px 9px;
    color: #0874c7;
    background: rgba(255, 255, 255, 0.91);
    border-radius: 999px;
    font-size: 0.63rem;
}

.psy-course-body {
    display: flex;
    width: 53%;
    padding: 20px 18px 15px;
    direction: rtl;
    flex-direction: column;
    text-align: right;
}

.psy-course-body h3 {
    min-height: 48px;
    margin: 0 0 8px;
    color: var(--psy-navy);
    font-size: 1rem;
    line-height: 1.65;
}

.psy-course-body > p {
    display: -webkit-box;
    margin: 0 0 14px;
    overflow: hidden;
    color: #627d96;
    font-size: 0.73rem;
    line-height: 1.85;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.psy-course-meta {
    display: flex;
    margin-top: auto;
    padding: 11px 0;
    color: #526f8b;
    border-top: 1px solid #dceaf4;
    font-size: 0.66rem;
    justify-content: space-between;
    gap: 8px;
}

.psy-course-meta svg {
    width: 15px;
    height: 15px;
}

.psy-card-button {
    min-height: 37px;
    color: #fff;
    background: linear-gradient(90deg, #0961a8, #0784d7);
    border-radius: 9px;
    font-size: 0.72rem;
}

.psy-slider-arrow {
    top: 47%;
    width: 39px;
    height: 39px;
    color: #075ca6;
    border-color: #cfe3f3;
    box-shadow: 0 8px 24px rgba(20, 69, 108, 0.1);
    font-size: 1.45rem;
}

.psy-slider-prev {
    right: -2px;
}

.psy-slider-next {
    left: -2px;
}

.psy-slider-dots button {
    width: 7px;
    height: 7px;
    background: #d9e8f4;
}

.psy-slider-dots button.active {
    width: 9px;
    background: var(--psy-blue);
}

/* Videos: copy at left, three cards at right. */
.psy-videos {
    background: linear-gradient(90deg, #f4faff, #eaf6ff);
}

.psy-video-layout {
    display: grid;
    direction: ltr;
    grid-template-columns: 0.29fr 0.71fr;
    align-items: center;
    gap: 36px;
}

.psy-video-heading {
    display: block;
    margin: 0;
    direction: rtl;
    text-align: right;
}

.psy-video-heading h2 {
    font-size: 2rem;
}

.psy-video-heading .psy-button {
    margin-top: 20px;
}

.psy-video-slider {
    min-width: 0;
    direction: rtl;
}

.psy-video-card {
    min-width: calc((100% - 24px) / 3);
    width: calc((100% - 24px) / 3);
}

.psy-video-track {
    gap: 12px;
}

.psy-video-card > a {
    height: 190px;
    border-radius: 14px;
}

.psy-video-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.psy-video-card h3 {
    min-height: 46px;
    margin: 9px 3px 0;
    color: var(--psy-navy);
    font-size: 0.76rem;
    line-height: 1.8;
}

.psy-play-button {
    width: 45px;
    height: 45px;
    color: #fff;
    background: rgba(3, 25, 45, 0.72);
    border: 2px solid rgba(255, 255, 255, 0.75);
}

/* Book: cover left, description center, quote right. */
.psy-book {
    background: #fff;
}

.psy-book-grid {
    display: grid;
    direction: ltr;
    grid-template-columns: 0.8fr 1.45fr 0.9fr;
    align-items: center;
    gap: 62px;
}

.psy-book-cover {
    width: min(100%, 255px);
    margin: 0 auto;
}

.psy-book-cover::before {
    right: auto;
    left: -60px;
    background: radial-gradient(circle at 45% 45%, rgba(173, 217, 247, 0.5), transparent 68%);
}

.psy-book-cover img {
    width: 200px;
    max-height: 295px;
    margin-inline: auto;
    object-fit: cover;
    border: 7px solid #fff;
    border-radius: 9px;
    box-shadow: 14px 18px 30px rgba(18, 59, 91, 0.18);
    transform: rotate(-2deg);
}

.psy-book-content {
    direction: rtl;
    text-align: right;
}

.psy-book-content h2 {
    margin-bottom: 2px;
}

.psy-book-content > strong {
    color: #0872c2;
    font-size: 0.76rem;
}

.psy-book-content > p {
    margin: 20px 0 13px;
    color: #597590;
    font-size: 0.83rem;
    line-height: 2;
}

.psy-book-content ul {
    margin: 0 0 20px;
    padding: 0 18px 0 0;
    color: #42617d;
    font-size: 0.76rem;
}

.psy-book-content li {
    margin-bottom: 7px;
}

.psy-book-content li::marker {
    color: var(--psy-gold);
}

.psy-book-quote {
    margin: 0;
    padding: 48px 28px 26px;
    direction: rtl;
    color: var(--psy-navy);
    background: #edf7ff;
    border: 1px solid #cce3f4;
    border-radius: 20px;
    box-shadow: none;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 2;
    text-align: right;
}

.psy-book-quote::before {
    top: 12px;
    right: 20px;
    color: #9fcce9;
    font-size: 3rem;
}

/* Articles: title at left, compact 2x2 list at right. */
.psy-articles {
    background: linear-gradient(90deg, #f6fbff, #eef8ff);
}

.psy-articles > .psy-shell {
    display: grid;
    direction: ltr;
    grid-template-columns: 0.32fr 0.68fr;
    align-items: center;
    gap: 46px;
}

.psy-articles .psy-section-heading {
    display: block;
    margin: 0;
    direction: rtl;
    text-align: right;
}

.psy-articles .psy-section-heading > .psy-text-link {
    display: inline-flex;
    margin-top: 20px;
    padding: 9px 17px;
    border: 1px solid #8fc1e5;
    border-radius: 999px;
}

.psy-article-grid {
    display: grid;
    direction: rtl;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 34px;
}

/*
 * The base stylesheet had a featured card spanning two rows and forced the
 * fourth item across two columns. The approved layout is always a clean 2x2
 * list, so every article explicitly returns to its own grid cell.
 */
.psy-article-grid > article,
.psy-article-grid > article:nth-child(4),
.psy-article-grid > .psy-article-featured {
    grid-column: auto !important;
    grid-row: auto !important;
}

.psy-article-card,
.psy-article-card.psy-article-featured {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 116px;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    overflow: visible;
    direction: ltr;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d4e5f2;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.psy-article-card:hover {
    box-shadow: none;
    transform: none;
}

.psy-article-image {
    display: block;
    width: 112px;
    height: 82px;
    margin: 11px 0 11px 16px;
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    aspect-ratio: auto !important;
    background: #e7f3fb;
    border-radius: 11px;
}

.psy-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.psy-article-card > div {
    min-width: 0;
    padding: 13px 28px 11px 0;
    grid-column: 2;
    grid-row: 1;
    direction: rtl;
    text-align: right;
}

.psy-article-card::after {
    position: absolute;
    top: 50%;
    left: 132px;
    width: 7px;
    height: 7px;
    content: "";
    border-bottom: 2px solid #1683d0;
    border-left: 2px solid #1683d0;
    transform: translateY(-50%) rotate(45deg);
}

.psy-article-card > div > span {
    display: inline-flex;
    padding: 3px 9px;
    color: #557694;
    background: #e5f2fc;
    border-radius: 999px;
    font-size: 0.62rem;
}

.psy-article-card h3 {
    margin: 6px 0 2px;
    color: var(--psy-navy);
    font-size: 0.82rem;
    line-height: 1.65;
}

.psy-article-card h3 a {
    display: block;
    color: inherit;
}

.psy-article-card p,
.psy-article-card .psy-text-link {
    display: none;
}

/* About */
.psy-about {
    padding-block: 42px;
    background: #fff;
}

.psy-about-grid {
    display: grid;
    grid-template-columns: 0.52fr 1.48fr 0.72fr;
    align-items: center;
    gap: 34px;
}

.psy-about-title h2 {
    margin-bottom: 2px;
    font-size: 1.55rem;
}

.psy-about-title strong {
    color: var(--psy-muted);
    font-size: 0.76rem;
}

.psy-about-copy {
    padding-left: 30px;
    border-left: 1px solid #d9e7f2;
}

.psy-about-copy p {
    margin: 0 0 7px;
    color: #58728b;
    font-size: 0.78rem;
    line-height: 2.05;
}

.psy-ethics-note {
    padding: 18px 20px;
    background: #edf7ff;
    border: 0;
    border-radius: 14px;
}

.psy-ethics-note strong {
    color: var(--psy-blue);
    font-size: 0.73rem;
}

.psy-ethics-note p {
    margin: 5px 0 0;
    color: #5c7690;
    font-size: 0.67rem;
    line-height: 1.9;
}

/* Final CTA */
.psy-start-section {
    padding: 0;
    background: #fff;
}

.psy-start-card {
    width: 100%;
    max-width: none;
    min-height: 130px;
    padding: 24px max(24px, calc((100vw - 1180px) / 2));
    color: var(--psy-navy);
    background:
        linear-gradient(90deg, rgba(230, 245, 255, 0.88), rgba(255, 255, 255, 0.72), rgba(230, 245, 255, 0.88)),
        url("../images/start-lake.webp") center 53% / cover no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}

.psy-start-card > div:first-child {
    margin-inline: auto;
}

.psy-start-card > div > span {
    display: none;
}

.psy-start-card h2 {
    margin: 0 0 3px;
    color: var(--psy-navy);
    font-size: 1.45rem;
}

.psy-start-card p {
    margin: 0;
    color: #55738e;
    font-size: 0.76rem;
}

.psy-start-actions {
    margin-top: 15px;
    justify-content: center;
}

/* Footer */
.psy-footer {
    color: #466581;
    background: #fff;
    border-top: 1px solid #d9e7f2;
}

.psy-footer-main {
    display: grid;
    min-height: 100px;
    padding-block: 13px;
    direction: ltr;
    grid-template-columns: 0.72fr 1.4fr 0.72fr;
    align-items: center;
    gap: 30px;
}

.psy-footer .psy-brand {
    width: 165px;
    height: 61px;
    flex-basis: 165px;
}

.psy-footer .psy-brand .psy-brand-calligraphy {
    top: -18px;
    width: 165px;
}

.psy-footer-brand p {
    display: none;
}

.psy-footer-links {
    display: flex;
    direction: rtl;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-direction: row;
}

.psy-footer-links strong {
    display: none;
}

.psy-footer-links a {
    color: #42617d;
    font-size: 0.72rem;
}

.psy-footer-socials {
    direction: rtl;
}

.psy-footer-socials > strong {
    display: none;
}

.psy-footer-socials > div {
    justify-content: flex-start;
}

.psy-footer-socials a {
    width: 44px;
    height: 44px;
    color: #168bd2;
    background: #edf8ff;
    border: 1px solid #bcdff5;
    border-radius: 14px;
    box-shadow: 0 7px 18px rgba(18, 117, 183, 0.1);
}

.psy-footer-socials a:nth-child(2) {
    color: #8a5cc7;
    background: #f6f1ff;
    border-color: #dacaf1;
}

.psy-footer-socials a:nth-child(3) {
    color: #0d79c8;
    background: #edf6ff;
    border-color: #c2dcf4;
}

.psy-footer-socials a svg {
    width: 20px;
    height: 20px;
    color: currentColor;
}

.psy-footer-socials a:hover {
    color: #ffffff;
    background: #0878c7;
    border-color: #0878c7;
    box-shadow: 0 10px 24px rgba(8, 120, 199, 0.23);
    transform: translateY(-3px);
}

.psy-footer-socials a:nth-child(2):hover {
    background: linear-gradient(135deg, #7656cf, #d04f9f);
    border-color: transparent;
}

.psy-footer-socials a:nth-child(3):hover {
    background: linear-gradient(135deg, #0a69b1, #19a2d8);
    border-color: transparent;
}

.psy-footer-bottom {
    padding-block: 9px;
    color: #7890a5;
    background: #f7fbff;
    border-top: 1px solid #e1edf6;
    font-size: 0.65rem;
}

.psy-back-to-top {
    left: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    background: var(--psy-blue);
}

/* No-JS safety and subtle reveal */
.js .psy-reveal {
    transform: translateY(12px);
}

.js .psy-reveal.is-visible {
    transform: translateY(0);
}

@media (max-width: 1100px) {
    :root {
        --psy-shell: min(100% - 36px, 980px);
    }

    .psy-desktop-nav {
        gap: 22px;
    }

    .psy-hero-grid {
        grid-template-columns: minmax(390px, 0.9fr) 1.1fr;
    }

    .psy-hero-wall-quote {
        right: -4px;
        width: 140px;
        min-height: 205px;
        padding-inline: 14px;
    }

    .psy-course-card {
        min-width: calc((100% - 15px) / 2);
        width: calc((100% - 15px) / 2);
    }

    .psy-book-grid {
        gap: 35px;
    }
}

@media (max-width: 820px) {
    :root {
        --psy-shell: min(100% - 28px, 680px);
    }

    .psy-header-inner {
        min-height: 78px;
        direction: rtl;
    }

    .psy-header .psy-brand {
        width: 106px;
        height: 72px;
        flex-basis: 106px;
    }

    .psy-header .psy-brand .psy-brand-calligraphy {
        width: 100%;
    }

    .psy-menu-button {
        display: grid;
        margin-right: auto;
        margin-left: 0;
        color: #0874bd;
        background: #eaf6ff;
        border: 1px solid #bcdff5;
        box-shadow: 0 6px 16px rgba(8, 116, 189, 0.1);
    }

    .psy-menu-button svg {
        display: block;
        width: 23px;
        height: 23px;
        color: inherit;
    }

    .psy-menu-button svg path {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .psy-menu-button:hover,
    .psy-menu-button:focus-visible {
        color: #ffffff;
        background: #0874bd;
        border-color: #0874bd;
    }

    .psy-desktop-nav,
    .psy-header-social {
        display: none !important;
    }

    .psy-mobile-menu {
        width: min(88vw, 355px);
        padding: 18px;
        background:
            radial-gradient(circle at 100% 0, rgba(213, 239, 255, 0.78), transparent 34%),
            #ffffff;
        border-left: 1px solid #d2e6f5;
    }

    .psy-mobile-menu-head {
        min-height: 78px;
        padding-bottom: 12px;
    }

    .psy-mobile-menu > nav {
        padding-block: 18px;
        gap: 7px;
    }

    .psy-mobile-menu > nav a {
        position: relative;
        padding: 12px 42px 12px 14px;
        color: #173f65;
        background: #f7fbff;
        border: 1px solid #e2eef7;
        border-radius: 13px;
    }

    .psy-mobile-menu > nav a::before {
        position: absolute;
        top: 50%;
        right: 18px;
        width: 8px;
        height: 8px;
        content: "";
        background: #0a80cf;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #e6f4fd;
        transform: translateY(-50%);
    }

    .psy-mobile-socials {
        padding-top: 15px;
        border-top: 1px solid #dbe9f4;
    }

    .psy-mobile-socials a {
        color: #0872c3;
        background: #edf8ff;
        border: 1px solid #d2e9f8;
    }

    .psy-mobile-menu .psy-brand {
        width: 112px;
        height: 76px;
        flex: 0 0 112px;
    }

    .psy-mobile-menu .psy-brand .psy-brand-calligraphy {
        width: 100%;
    }

    .psy-hero {
        min-height: 675px;
        background-color: #f6fbff;
        background-image: url("../images/hero-office-v2.webp");
        background-position: 66% top;
        background-size: auto 350px;
    }

    .psy-hero::before,
    .psy-hero::after {
        display: none;
    }

    .psy-hero-grid {
        min-height: 675px;
        display: block;
        padding-top: 350px;
    }

    .psy-hero-content {
        max-width: 610px;
        padding: 30px 0 36px;
        margin-inline: auto;
        text-align: center;
    }

    .psy-hero-content h1 {
        margin-inline: auto;
        font-size: clamp(1.7rem, 7vw, 2.45rem);
        line-height: 1.5;
    }

    .psy-hero-content > p {
        margin-inline: auto;
        font-size: 0.82rem;
    }

    .psy-hero-actions {
        justify-content: center;
    }

    .psy-hero-wall-quote {
        display: none;
    }

    .psy-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        direction: ltr;
    }

    .psy-trust-grid > div {
        padding: 13px 8px;
        border-bottom: 1px solid #dce9f3;
    }

    .psy-trust-grid > div:nth-child(3) {
        grid-column: 1 / -1;
    }

    .psy-social-choice {
        flex-direction: column;
        direction: rtl;
    }

    .psy-section {
        padding-block: 54px;
    }

    .psy-courses .psy-section-heading > .psy-text-link {
        position: static;
        display: inline-flex;
        margin-top: 12px;
    }

    .psy-course-card {
        min-width: min(89vw, 560px);
        width: min(89vw, 560px);
    }

    .psy-video-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .psy-video-heading {
        text-align: center;
    }

    .psy-video-heading p {
        margin-inline: auto;
    }

    .psy-video-card {
        min-width: calc((100% - 12px) / 2);
        width: calc((100% - 12px) / 2);
    }

    .psy-slider-arrow {
        z-index: 9;
        display: grid;
    }

    .psy-book-grid {
        grid-template-columns: 0.75fr 1.25fr;
        gap: 28px;
    }

    .psy-book-quote {
        grid-column: 1 / -1;
    }

    .psy-articles > .psy-shell {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .psy-articles .psy-section-heading {
        text-align: center;
    }

    .psy-articles .psy-section-heading p {
        margin-inline: auto;
    }

    .psy-article-grid {
        gap: 0 26px;
    }

    .psy-about-grid {
        grid-template-columns: 0.6fr 1.4fr;
    }

    .psy-ethics-note {
        grid-column: 1 / -1;
    }

    .psy-footer-main {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 8px;
    }

    .psy-footer-links {
        flex-wrap: wrap;
        gap: 10px 22px;
    }

    .psy-footer-socials > div {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    :root {
        --psy-shell: calc(100% - 24px);
    }

    .psy-header .psy-brand {
        width: 96px;
        flex-basis: 96px;
    }

    .psy-header .psy-brand .psy-brand-calligraphy {
        width: 100%;
    }

    .psy-hero {
        min-height: 650px;
        background-position: 67% top;
        background-size: auto 300px;
    }

    .psy-hero-grid {
        min-height: 650px;
        padding-top: 300px;
    }

    .psy-hero-content {
        padding-top: 20px;
    }

    .psy-hero-content h1 {
        font-size: 1.65rem;
        letter-spacing: -0.7px;
    }

    .psy-hero-content > p {
        font-size: 0.76rem;
        line-height: 1.95;
    }

    .psy-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .psy-button {
        min-height: 43px;
        padding-inline: 14px;
        font-size: 0.76rem;
    }

    .psy-trust-grid strong {
        font-size: 0.72rem;
    }

    .psy-trust-grid small {
        font-size: 0.6rem;
    }

    .psy-section-heading h2,
    .psy-book-content h2,
    .psy-about-title h2 {
        font-size: 1.45rem;
    }

    .psy-slider-shell {
        width: 100%;
        padding-inline: 17px;
    }

    .psy-slider-arrow {
        display: grid !important;
        top: 48%;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.96);
    }

    .psy-course-card {
        display: grid !important;
        min-width: calc(100% - 10px);
        width: calc(100% - 10px);
        min-height: 236px;
        grid-template-columns: 43% 57%;
        direction: ltr;
    }

    .psy-course-image {
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 236px;
        aspect-ratio: auto;
    }

    .psy-course-body {
        width: 100%;
        min-width: 0;
        padding: 16px 13px 13px;
    }

    .psy-course-body h3 {
        min-height: 0;
        margin-bottom: 5px;
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .psy-course-body > p {
        margin-bottom: 7px;
        font-size: 0.67rem;
        line-height: 1.75;
        -webkit-line-clamp: 3;
    }

    .psy-course-meta {
        display: grid;
        padding: 7px 0;
        gap: 4px;
    }

    .psy-video-card {
        min-width: calc(100% - 10px);
        width: calc(100% - 10px);
    }

    .psy-video-card > a {
        height: 205px;
    }

    .psy-book-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .psy-book-content {
        text-align: center;
    }

    .psy-book-content ul {
        display: inline-block;
        text-align: right;
    }

    .psy-book-quote {
        grid-column: auto;
        text-align: center;
    }

    .psy-article-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .psy-article-card,
    .psy-article-card.psy-article-featured {
        min-height: 106px;
        grid-template-columns: 108px minmax(0, 1fr);
    }

    .psy-article-image,
    .psy-article-featured .psy-article-image {
        width: 94px;
        height: 76px;
        margin: 10px 0 10px 14px;
        aspect-ratio: auto !important;
    }

    .psy-article-card > div {
        padding: 11px 22px 10px 0;
    }

    .psy-article-card::after {
        left: 109px;
    }

    .psy-article-card h3,
    .psy-article-featured h3 {
        margin-top: 5px;
        font-size: 0.78rem;
        line-height: 1.7;
    }

    .psy-article-card > div > span {
        padding: 3px 8px;
        font-size: 0.59rem;
    }

    .psy-about-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .psy-about-copy {
        padding-left: 0;
        border-left: 0;
    }

    .psy-start-card {
        min-height: 310px;
        padding: 35px 18px;
        background:
            linear-gradient(180deg, rgba(244, 251, 255, 0.68), rgba(229, 245, 255, 0.9)),
            url("../images/start-lake.webp") center / cover no-repeat;
    }

    .psy-start-actions {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
    }

    .psy-footer-links {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 9px 16px;
        flex-wrap: wrap;
    }

    .psy-footer-bottom .psy-shell {
        display: block;
        text-align: center;
    }

    .psy-footer-bottom span {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psy-slider-track {
        scroll-behavior: auto;
    }
}