/* Registered properties are namespaced so other components keep their own angles. */
@property --hero-glass-angle-1 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -75deg;
}

@property --hero-glass-angle-2 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -45deg;
}

/* Glass frame: a clear image window inside a reflective, illuminated rim. */
@property --hero-frame-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 225deg;
}

.hero-image .hero-carousel,
.about-us .about-us-image figure,
.our-program .program-item {
    --hero-frame-gap: 6px;
    --hero-frame-radius: 26px;
    position: relative;
    isolation: isolate;
    border-radius: var(--hero-frame-radius);
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.48),
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.2) 64%,
        rgba(255, 255, 255, 0.36));
    box-shadow:
        0 28px 65px -26px rgba(0, 0, 0, 0.65),
        0 12px 28px -18px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.hero-image .hero-carousel {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1.27;
}

/* About figures keep their intrinsic image sizing and existing overlap offsets. */
.about-us .about-us-image figure {
    overflow: visible;
}

.about-us .about-us-image figure img {
    border-radius: inherit;
}

.about-us .about-us-image-box-2 .about-us-image figure {
    border-color: transparent;
}

/* Diffused color stays outside the photograph; no image blur or extra motion. */
.hero-carousel::before,
.about-us .about-us-image figure::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -12px;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 6% 8%,
            color-mix(in srgb, var(--white-color) 35%, transparent), transparent 42%),
        radial-gradient(ellipse at 100% 76%,
            color-mix(in srgb, var(--accent-color) 42%, transparent), transparent 48%),
        radial-gradient(ellipse at 12% 92%,
            color-mix(in srgb, var(--primary-color) 75%, transparent), transparent 52%);
    filter: blur(16px);
    opacity: 0.65;
    pointer-events: none;
    transition: opacity 600ms ease;
}

/* Keep the layered edge separate from the slides so fades do not reset the frame. */
.hero-carousel::after,
.about-us .about-us-image figure::after,
.our-program .program-item::after,
.how-it-works .how-work-item::after,
.our-faqs .faq-accordion .accordion-item::after,
#main-content .page-blog .post-item::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.28);
    pointer-events: none;
}

/* Replace image-anime's oversized shine with the same noninteractive glass rim. */
.about-us .about-us-image figure::after {
    width: auto;
    height: auto;
    transform: none;
    background: none;
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .hero-carousel::after,
    .about-us .about-us-image figure::after,
    .our-program .program-item::after,
    .how-it-works .how-work-item::after,
    .our-faqs .faq-accordion .accordion-item::after,
    #main-content .page-blog .post-item::after {
        padding: 2px;
        background: conic-gradient(from var(--hero-frame-angle, 225deg),
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.95) 12%,
            rgba(255, 255, 255, 0.18) 24%,
            transparent 42%,
            var(--accent-color) 59%,
            rgba(255, 255, 255, 0.8) 65%,
            transparent 80%,
            rgba(255, 255, 255, 0.12));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        transition: --hero-frame-angle 900ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    .about-us .about-us-image figure::after {
        padding: var(--hero-frame-gap);
        background-color: rgba(255, 255, 255, 0.16);
    }
}

.hero-carousel__viewport {
    position: absolute;
    z-index: 0;
    inset: var(--hero-frame-gap);
    overflow: hidden;
    border-radius: calc(var(--hero-frame-radius) - var(--hero-frame-gap));
    background-color: var(--primary-color);
    /* JS supplies an already decoded photo; the flip never reveals bare color. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
}

/* A quiet glass reflection and fine corner marks, never across the image center. */
.hero-carousel__viewport::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)) left 12px top 12px / 28px 1px,
        linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)) left 12px top 12px / 1px 12px,
        linear-gradient(rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.48)) right 12px top 12px / 20px 1px,
        linear-gradient(150deg, rgba(255, 255, 255, 0.14), transparent 24%, transparent 78%, rgba(255, 255, 255, 0.04));
    background-repeat: no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
        inset 0 1px 12px rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .hero-carousel:hover::before,
    .hero-carousel:focus-within::before,
    .about-us .about-us-image figure:hover::before {
        opacity: 0.9;
    }

    .hero-carousel:hover::after,
    .hero-carousel:focus-within::after,
    .about-us .about-us-image figure:hover::after,
    .our-program .program-item:hover::after,
    .our-program .program-item:focus-within::after,
    .how-it-works .how-work-item:hover::after,
    .our-faqs .faq-accordion .accordion-item:hover::after,
    #main-content .page-blog .post-item:hover::after {
        --hero-frame-angle: 255deg;
    }
}

@media (max-width: 767px) {
    .hero-image .hero-carousel,
    .about-us .about-us-image figure,
    .our-program .program-item {
        --hero-frame-gap: 4px;
        --hero-frame-radius: 22px;
    }
}

/* Program cards share the reflective frame while keeping their native image reveal. */
.our-program .program-item {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.14),
        rgba(255, 255, 255, 0.03) 42%,
        rgba(255, 255, 255, 0.08)),
        var(--primary-color);
    transition: box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

@supports (background: color-mix(in srgb, white 50%, transparent)) {
    .our-program .program-item {
        background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.03) 42%,
            rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, var(--primary-color) 48%, transparent);
    }
}

.our-program .program-item::before,
.our-program .program-item-image {
    border-radius: inherit;
}

.our-program .program-item-image {
    overflow: hidden;
}

/* Match the mouse treatment when a card's existing link receives keyboard focus. */
.our-program .program-item:focus-within {
    box-shadow:
        0 28px 65px -26px rgba(0, 0, 0, 0.65),
        0 12px 28px -18px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.our-program .program-item:focus-within::after {
    --hero-frame-angle: 255deg;
}

.our-program .program-item a:focus-visible {
    outline: 2px solid var(--white-color);
    outline-offset: 4px;
    border-radius: 3px;
}

.our-program .program-item-list .program-item-body {
    position: static;
}

.our-program .program-item-list .fqp-program-card-link {
    text-decoration: none;
}

.our-program .program-item-list .fqp-program-card-link::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    border-radius: inherit;
}

.our-program .program-item-list .program-item:focus-within::before {
    transform: scale(0);
    opacity: 1;
}

.our-program .program-item-list .program-item:focus-within .program-item-image {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .our-program .program-item:hover {
        box-shadow:
            0 28px 65px -26px rgba(0, 0, 0, 0.65),
            0 12px 28px -18px rgba(0, 0, 0, 0.5),
            0 0 24px color-mix(in srgb, var(--accent-color) 12%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }
}

/* Light glass process cards retain the template's pill shape and responsive corners. */
.how-it-works .how-work-item {
    position: relative;
    isolation: isolate;
    /* The template's light variant sets its background with !important. */
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.86),
        rgba(255, 255, 255, 0.22) 45%,
        rgba(255, 255, 255, 0.56)),
        rgba(220, 238, 249, 0.62) !important;
    border-color: rgba(11, 47, 88, 0.13);
    box-shadow:
        0 24px 50px -26px rgba(11, 47, 88, 0.4),
        0 10px 24px -16px rgba(11, 47, 88, 0.24),
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -1px 1px rgba(255, 255, 255, 0.5);
    transition: box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) and (pointer: fine) {
    .how-it-works .how-work-item:hover {
        box-shadow:
            0 26px 54px -26px rgba(11, 47, 88, 0.46),
            0 10px 24px -16px rgba(11, 47, 88, 0.28),
            0 0 22px rgba(238, 127, 30, 0.08),
            inset 0 1px 1px rgba(255, 255, 255, 0.95);
    }
}

/* Full-surface FAQ glass; reflections never blur or cover the content. */
.our-faqs .faq-accordion .accordion-item {
    isolation: isolate;
    border-radius: 18px;
    border-color: rgba(255, 255, 255, 0.24);
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0.24),
        rgba(255, 255, 255, 0.055) 30%,
        rgba(255, 255, 255, 0.02) 48%,
        rgba(255, 255, 255, 0.09) 78%,
        rgba(255, 255, 255, 0.035)),
        var(--primary-color);
    box-shadow:
        0 20px 44px -26px rgba(0, 0, 0, 0.5),
        0 8px 20px -14px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    transition: box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

@supports (background: color-mix(in srgb, white 50%, transparent)) {
    .our-faqs .faq-accordion .accordion-item {
        background-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
    }
}

/* A soft reflected light moves across the glass only during interaction. */
.our-faqs .faq-accordion .accordion-item::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 14% 0%, rgba(255, 255, 255, 0.24), transparent 60%),
        linear-gradient(110deg,
            transparent 22%,
            rgba(255, 255, 255, 0.15) 37%,
            rgba(255, 255, 255, 0.035) 48%,
            transparent 62%);
    background-size: 100% 100%, 220% 100%;
    background-position: center, 0% 50%;
    background-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
    transition:
        background-position 900ms cubic-bezier(0.25, 1, 0.5, 1),
        opacity 450ms ease;
}

.our-faqs .faq-accordion .accordion-header,
.our-faqs .faq-accordion .accordion-collapse {
    position: relative;
    z-index: 1;
}

.our-faqs .faq-accordion .accordion-header .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.our-faqs .faq-accordion .accordion-item:focus-within {
    box-shadow:
        0 20px 44px -26px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.our-faqs .faq-accordion .accordion-item:focus-within::before {
    background-position: center, 100% 50%;
    opacity: 0.9;
}

.our-faqs .faq-accordion .accordion-item:focus-within::after {
    --hero-frame-angle: 255deg;
}

/* Inset focus stays visible inside the item's existing overflow clipping. */
.our-faqs .faq-accordion .accordion-header .accordion-button:focus-visible {
    outline: 2px solid var(--white-color);
    outline-offset: -5px;
}

@media (hover: hover) and (pointer: fine) {
    .our-faqs .faq-accordion .accordion-item:hover {
        box-shadow:
            0 22px 48px -26px rgba(0, 0, 0, 0.55),
            0 0 22px rgba(238, 127, 30, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .our-faqs .faq-accordion .accordion-item:hover::before {
        background-position: center, 100% 50%;
        opacity: 0.9;
    }
}

@media (max-width: 767px) {
    .our-faqs .faq-accordion .accordion-item {
        border-radius: 16px;
    }
}

/* Homepage blog: a thicker glass frame with a frosted text panel. */
#main-content .page-blog .post-item {
    isolation: isolate;
    border-radius: 32px;
    box-shadow:
        0 24px 52px -26px rgba(11, 47, 88, 0.44),
        0 10px 24px -18px rgba(11, 47, 88, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    #main-content .page-blog .post-item::after {
        padding: 4px;
    }
}

/* Keep the original image and dark readability gradient beneath the glass. */
#main-content .page-blog .post-featured-image {
    position: relative;
    z-index: 0;
}

#main-content .page-blog .post-item::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(255, 255, 255, 0.2), transparent 58%),
        linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.14) 37%, transparent 62%);
    background-size: 100% 100%, 220% 100%;
    background-position: center, 0% 50%;
    background-repeat: no-repeat;
    opacity: 0.6;
    pointer-events: none;
    transition:
        background-position 900ms cubic-bezier(0.25, 1, 0.5, 1),
        opacity 450ms ease;
}

#main-content .page-blog .post-item-body {
    z-index: 2;
    isolation: isolate;
}

/* Extending the visual panel leaves the existing text positions unchanged. */
#main-content .page-blog .post-item-body::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -16px;
    border-radius: 22px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0.035) 55%),
        var(--primary-color);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 8px 20px -14px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    pointer-events: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #main-content .page-blog .post-item-body::before {
        background-color: color-mix(in srgb, var(--primary-color) 46%, transparent);
    }
}

#main-content .page-blog .post-item:focus-within {
    box-shadow:
        0 24px 52px -26px rgba(11, 47, 88, 0.44),
        0 0 0 2px var(--primary-color),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#main-content .page-blog .post-item:focus-within::before {
    background-position: center, 100% 50%;
    opacity: 0.9;
}

#main-content .page-blog .post-item:focus-within::after {
    --hero-frame-angle: 255deg;
}

#main-content .page-blog .post-item a:focus-visible {
    outline: 2px solid var(--white-color);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
    #main-content .page-blog .post-item:hover {
        box-shadow:
            0 26px 58px -26px rgba(11, 47, 88, 0.48),
            0 0 22px rgba(238, 127, 30, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    #main-content .page-blog .post-item:hover::before {
        background-position: center, 100% 50%;
        opacity: 0.9;
    }
}

@media (max-width: 767px) {
    #main-content .page-blog .post-item {
        border-radius: 28px;
    }

    #main-content .page-blog .post-item-body::before {
        inset: -10px;
        border-radius: 18px;
    }

    @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
        #main-content .page-blog .post-item::after {
            padding: 3px;
        }
    }
}

.hero-carousel__slide {
    position: absolute;
    z-index: 0;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.hero-carousel__slide.is-active {
    z-index: 2;
    visibility: visible;
    opacity: 1;
}

/* Keep the outgoing image opaque beneath the incoming fade to avoid a blank midpoint. */
.hero-carousel__slide.is-leaving {
    z-index: 1;
    visibility: visible;
    opacity: 1;
}

.hero-carousel .hero-carousel__image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
}

.hero-carousel__controls {
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 16px;
    left: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.hero-carousel__controls[hidden] {
    display: none;
}

/* Narrow phones: keep Previous / Pause / Next on one row inside the image
   (labels and 44px tap height unchanged). */
@media (max-width: 400px) {
    .hero-carousel__controls {
        right: 10px;
        bottom: 10px;
        left: 10px;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .hero-carousel .hero-carousel__controls .hero-carousel__control {
        padding: 8px 10px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* Glass controls keep their native button semantics and inherited typography. */
.hero-carousel .hero-carousel__control {
    position: relative;
    isolation: isolate;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    background: linear-gradient(-75deg,
        rgba(255, 255, 255, 0.07),
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.07)),
        var(--primary-color);
    color: var(--white-color);
    font: inherit;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 1px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 200ms cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* The opaque base above remains readable when backdrop filtering is unavailable. */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .hero-carousel .hero-carousel__control {
        background: linear-gradient(-75deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.07)),
            color-mix(in srgb, var(--primary-color) 68%, transparent);
        -webkit-backdrop-filter: blur(8px) saturate(145%);
        backdrop-filter: blur(8px) saturate(145%);
    }
}

.hero-carousel .hero-carousel__control::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        var(--hero-glass-angle-2, -45deg),
        transparent 30%,
        rgba(255, 255, 255, 0.2) 45%,
        transparent 58%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    pointer-events: none;
    transition:
        background-position 500ms cubic-bezier(0.25, 1, 0.5, 1),
        --hero-glass-angle-2 500ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Mask only the rim, leaving button text and the translucent center unobscured. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .hero-carousel .hero-carousel__control::after {
        content: "";
        position: absolute;
        inset: -1px;
        padding: 1px;
        border-radius: inherit;
        background:
            conic-gradient(from var(--hero-glass-angle-1, -75deg),
                rgba(255, 255, 255, 0.7),
                transparent 5% 40%,
                rgba(255, 255, 255, 0.55) 50%,
                transparent 60% 95%,
                rgba(255, 255, 255, 0.7)),
            linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        transition: --hero-glass-angle-1 500ms cubic-bezier(0.25, 1, 0.5, 1);
    }
}

@media (hover: hover) and (pointer: fine) {
    .hero-carousel .hero-carousel__control:enabled:hover {
        transform: translateY(-1px);
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, 0.7),
            inset 0 -1px 1px rgba(255, 255, 255, 0.25),
            inset 0 0 0 1px rgba(255, 255, 255, 0.2),
            0 6px 16px rgba(0, 0, 0, 0.25);
    }

    .hero-carousel .hero-carousel__control:enabled:hover::before {
        background-position: 25% 50%;
    }

    .hero-carousel .hero-carousel__control:enabled:hover::after {
        --hero-glass-angle-1: -125deg;
    }
}

.hero-carousel .hero-carousel__control:enabled:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.2),
        inset 0 -1px 1px rgba(255, 255, 255, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.2);
}

.hero-carousel .hero-carousel__control:enabled:active::before {
    --hero-glass-angle-2: -15deg;
    background-position: 50% 15%;
}

.hero-carousel .hero-carousel__control:focus-visible {
    outline: 3px solid var(--white-color);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--primary-color);
}

.hero-carousel .hero-carousel__control:disabled {
    opacity: 0.8;
    cursor: default;
}

@media (hover: none) and (pointer: coarse) {
    .hero-carousel .hero-carousel__control::before,
    .hero-carousel .hero-carousel__control:enabled:active::before {
        --hero-glass-angle-2: -45deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-carousel::before,
    .hero-carousel::after,
    .about-us .about-us-image figure::before,
    .about-us .about-us-image figure::after,
    .our-program .program-item,
    .our-program .program-item::after,
    .our-program .program-item a,
    .how-it-works .how-work-item,
    .how-it-works .how-work-item::before,
    .how-it-works .how-work-item::after,
    .how-it-works .how-work-step-no::before,
    .how-it-works .how-work-item-image figure img,
    .our-faqs .faq-accordion .accordion-item,
    .our-faqs .faq-accordion .accordion-item::before,
    .our-faqs .faq-accordion .accordion-item::after,
    .our-faqs .faq-accordion .accordion-header .accordion-button,
    .our-faqs .faq-accordion .accordion-item .accordion-button::after,
    #main-content .page-blog .post-item,
    #main-content .page-blog .post-item::before,
    #main-content .page-blog .post-item::after,
    #main-content .page-blog .post-item a,
    #main-content .page-blog .post-featured-image img {
        transition: none;
    }

    .hero-carousel .hero-carousel__control,
    .hero-carousel .hero-carousel__control::before,
    .hero-carousel .hero-carousel__control::after {
        transition: none;
    }

    .hero-carousel .hero-carousel__control:enabled:hover,
    .hero-carousel .hero-carousel__control:enabled:active {
        transform: none;
    }

    .how-it-works .how-work-item:hover .how-work-item-image figure img {
        transform: none;
    }

    .our-faqs .faq-accordion .accordion-item:focus-within::before,
    .our-faqs .faq-accordion .accordion-item:hover::before {
        background-position: center, 0% 50%;
    }

    #main-content .page-blog .post-item:focus-within::before,
    #main-content .page-blog .post-item:hover::before {
        background-position: center, 0% 50%;
    }

    #main-content .page-blog .post-item:hover .post-featured-image img {
        transform: none;
    }

    /* WOW assigns animation names inline; suppress only this component's entrance. */
    .hero-image--carousel {
        animation: none !important;
    }
}

/* Book-style page turn, contained entirely inside the existing glass image window. */
.hero-carousel__page-turn {
    position: absolute;
    /* Explicit layers stay stable when the active slide wraps to the first DOM child. */
    /* Outgoing: 1; active: 2; page turn: 3; fixed glass highlights: 4. */
    z-index: 3;
    inset: 0;
    perspective: 2400px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.hero-carousel__page-turn[hidden] {
    display: none;
}

.hero-carousel__page-still,
.hero-carousel__page-leaf {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
}

.hero-carousel__page-still {
    left: 0;
    overflow: hidden;
}

.hero-carousel__page-leaf {
    left: 50%;
    z-index: 2;
    transform-origin: 0% 50%;
    transform-style: preserve-3d;
    will-change: transform;
}

.hero-carousel__page-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero-carousel__page-back {
    transform: rotateY(180deg);
}

.hero-carousel .hero-carousel__page-image {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 200%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    pointer-events: none;
}

.hero-carousel__page-front .hero-carousel__page-image {
    left: -100%;
}

.hero-carousel__page-shade {
    position: absolute;
    inset: 0;
    opacity: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent 35%, rgba(255, 255, 255, 0.25));
    pointer-events: none;
}

.hero-carousel__page-back .hero-carousel__page-shade {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent 35%, rgba(0, 0, 0, 0.55));
}

.hero-carousel__page-shadow {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0;
    background: linear-gradient(90deg, transparent 25%, rgba(0, 0, 0, 0.55) 50%, transparent 75%);
    pointer-events: none;
}

/* Previous lifts the left page and reveals the next photograph's right half. */
.hero-carousel__page-turn[data-direction="previous"] .hero-carousel__page-still {
    left: 50%;
}

.hero-carousel__page-turn[data-direction="previous"] .hero-carousel__page-leaf {
    left: 0;
    transform-origin: 100% 50%;
}

.hero-carousel__page-turn[data-direction="previous"] .hero-carousel__page-front .hero-carousel__page-image {
    left: 0;
}

.hero-carousel__page-turn[data-direction="previous"] .hero-carousel__page-still .hero-carousel__page-image,
.hero-carousel__page-turn[data-direction="previous"] .hero-carousel__page-back .hero-carousel__page-image {
    left: -100%;
}

@media (prefers-reduced-motion: reduce) {
    .hero-carousel__page-turn {
        display: none;
    }
}