/* =========================================================
   APEX AGED CARE SERVICES — ABOUT US
   Logo-Matched Navy + Gold
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap");


/* =========================================
   BRAND SYSTEM
========================================= */

.apex-about-page {

    --apex-navy: #073461;
    --apex-navy-dark: #05294d;
    --apex-navy-soft: #edf2f6;

    --apex-gold: #b99252;
    --apex-gold-dark: #98733f;
    --apex-gold-light: #d8bf91;

    --apex-white: #ffffff;

    --apex-cream: #f8f4ec;
    --apex-cream-light: #fcfaf6;

    --apex-text: #253746;
    --apex-text-light: #64717a;

    --apex-border: #e8e2d8;

    --apex-container: 1120px;
}


/* =========================================
   WORDPRESS / ELEMENTOR CLEANUP
========================================= */

body {
    margin: 0;
}

.entry-title,
.page-header,
.site-main > header,
.elementor-page-title,
h1.entry-title {
    display: none !important;
}

.elementor,
.elementor-section,
.elementor-container,
.elementor-widget-wrap,
.elementor-widget,
.elementor-widget-container,
.e-con,
.e-con-inner {
    max-width: none;
}


/* =========================================
   GLOBAL
========================================= */

.apex-about-page,
.apex-about-page * {
    box-sizing: border-box;
}

.apex-about-page {

    position: relative;

    left: 50%;

    width: 100vw;
    max-width: 100vw;

    margin-left: -50vw;

    overflow: hidden;

    background: var(--apex-white);

    color: var(--apex-text);

    font-family: "DM Sans", sans-serif;

    font-size: 17px;
    line-height: 1.7;
}

.apex-about-page a {
    color: inherit;
    text-decoration: none;
}

.apex-about-page img {
    display: block;

    width: 100%;
    max-width: 100%;
}

.aap-container {

    width: min(
        var(--apex-container),
        calc(100% - 64px)
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================
   BUTTON
========================================= */

.aap-btn {

    min-height: 43px;

    padding: 0 23px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border: 1px solid transparent;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.aap-btn:hover {
    transform: translateY(-2px);
}

.aap-btn-gold {

    color: #ffffff !important;

    background: var(--apex-gold);

    border-color: var(--apex-gold);
}

.aap-btn-gold:hover {

    color: #ffffff !important;

    background: var(--apex-gold-dark);

    border-color: var(--apex-gold-dark);

    box-shadow:
        0 8px 22px rgba(185,146,82,.25);
}


/* =========================================
   BANNER
========================================= */

.aap-banner {

    position: relative;

    min-height: 320px;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--apex-navy-dark);
}

.aap-banner-bg {

    position: absolute;

    inset: 0;
}

.aap-banner-bg img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: 35% 38%;
}

.aap-banner-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(5,41,77,.88) 0%,
            rgba(7,52,97,.76) 50%,
            rgba(7,52,97,.60) 100%
        );
}

.aap-banner-content {

    position: relative;

    z-index: 2;

    padding: 55px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    color: var(--apex-white);

    text-align: center;
}

.aap-banner h1 {

    margin: 0 0 15px;

    color: #ffffff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(42px, 4vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


/* Breadcrumb */

.aap-breadcrumb {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    color:
        rgba(255,255,255,.94);

    font-size: 14px;

    font-weight: 600;
}

.aap-breadcrumb a {

    transition:
        color .2s ease;
}

.aap-breadcrumb a:hover {

    color:
        var(--apex-gold-light);
}

.aap-breadcrumb > span[aria-hidden="true"] {

    color:
        var(--apex-gold);

    font-size: 24px;

    line-height: 1;
}


/* =========================================
   SHARED EYEBROW
========================================= */

.aap-eyebrow {

    margin-bottom: 14px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        var(--apex-gold-dark);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 1.6px;
}

.aap-eyebrow::before {

    content: "";

    width: 40px;
    height: 2px;

    display: block;

    background:
        var(--apex-gold);
}


/* =========================================
   SECTION HEADING
========================================= */

.aap-section-heading {

    max-width: 820px;

    margin:
        0 auto 44px;

    text-align: center;
}

.aap-section-heading .aap-eyebrow {

    justify-content: center;
}

.aap-section-heading h2 {

    margin:
        0 0 14px;

    color:
        var(--apex-navy);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(30px,3vw,42px);

    line-height: 1.14;
}

.aap-section-heading p {

    max-width: 700px;

    margin:
        0 auto;

    color:
        var(--apex-text-light);

    font-size: 17px;

    line-height: 1.75;
}


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

.aap-intro {

    padding:
        95px 0;

    background:
        var(--apex-cream-light);
}

.aap-intro-grid {

    display: grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap: 60px;

    align-items: center;
}


/* Image */

.aap-intro-image {

    position: relative;

    min-height: 470px;

    overflow: hidden;

    border-radius: 22px;

    box-shadow:
        0 25px 60px
        rgba(7,52,97,.13);
}

.aap-intro-image > img {

    width: 100%;
    height: 100%;

    min-height: 470px;

    object-fit: cover;
}


/* Image Note */

.aap-image-note {

    position: absolute;

    right: 24px;
    bottom: 24px;

    max-width: 310px;

    padding:
        18px 20px;

    border:
        1px solid
        rgba(216,191,145,.30);

    border-radius: 14px;

    color:
        #ffffff;

    background:
        rgba(5,41,77,.95);

    box-shadow:
        0 15px 35px
        rgba(5,41,77,.18);
}

.aap-image-note strong {

    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-size: 14px;
}

.aap-image-note span {

    color:
        var(--apex-gold-light);

    font-size: 14px;

    line-height: 1.5;
}


/* Intro Text */

.aap-intro-content h2,
.aap-why-content h2 {

    margin:
        0 0 22px;

    color:
        var(--apex-navy);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(30px,3vw,42px);

    line-height: 1.12;

    letter-spacing: -1px;
}

.aap-intro-content p,
.aap-why-content > p {

    margin:
        0 0 18px;

    color:
        var(--apex-text-light);

    font-size: 17px;

    line-height: 1.8;
}

.aap-intro-content .aap-lead {

    color:
        var(--apex-text);

    font-size: 19px;

    font-weight: 500;
}


/* Check Grid */

.aap-check-grid {
    max-width: 560px;
    margin: 22px 0 24px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: 28px;
    row-gap: 12px;
}

.aap-check-grid div {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--apex-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.aap-check-grid span {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--apex-navy);
    color: #ffffff;

    font-size: 10px;
    font-weight: 700;

    box-shadow: 0 3px 8px rgba(7, 52, 97, .10);
}


/* Intro CTA button slightly more compact */
.aap-intro-content .aap-btn {
    min-height: 40px;
    padding: 0 20px;
    font-size: 12px;
}

/* =========================================
   PURPOSE
========================================= */

.aap-purpose {

    padding:
        90px 0;

    background:
        var(--apex-white);
}

.aap-purpose-grid {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 20px;
}

.aap-purpose-card {

    padding:
        28px 24px;

    border:
        1px solid
        rgba(7,52,97,.11);

    border-radius: 18px;

    background:
        var(--apex-white);

    box-shadow:
        0 12px 30px
        rgba(7,52,97,.06);

    text-align: center;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.aap-purpose-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(185,146,82,.45);

    box-shadow:
        0 20px 42px
        rgba(7,52,97,.11);
}

.aap-purpose-icon {

    width: 68px;
    height: 68px;

    margin:
        0 auto 18px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        var(--apex-navy);
}

.aap-purpose-icon svg {

    width: 32px;
    height: 32px;

    fill: none;

    stroke:
        var(--apex-gold-light);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.aap-purpose-card h3 {

    margin:
        0 0 10px;

    color:
        var(--apex-navy);

    font-family:
        "Playfair Display",
        serif;

    font-size: 19px;
}

.aap-purpose-card p {

    margin: 0;

    color:
        var(--apex-text-light);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   VALUES
========================================= */

.aap-values {

    padding:
        90px 0;

    background:
        var(--apex-navy-soft);
}

.aap-values-grid {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 22px;
}

.aap-value-card {

    position: relative;

    min-height: 190px;

    padding:
        24px 22px;

    overflow: hidden;

    border:
        1px solid
        rgba(7,52,97,.07);

    border-radius: 16px;

    background:
        var(--apex-white);

    box-shadow:
        0 10px 28px
        rgba(7,52,97,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.aap-value-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 16px 36px
        rgba(7,52,97,.10);
}

.aap-value-number {

    position: absolute;

    top: 18px;
    right: 22px;

    color:
        rgba(185,146,82,.38);

    font-family:
        "Playfair Display",
        serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}

.aap-value-card h3 {

    margin:
        30px 0 10px;

    color:
        var(--apex-navy);

    font-family:
        "Playfair Display",
        serif;

    font-size: 19px;
}

.aap-value-card p {

    max-width: 310px;

    margin: 0;

    color:
        var(--apex-text-light);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   WHY CHOOSE APEX
========================================= */

.aap-why {

    padding:
        95px 0;

    background:
        var(--apex-cream-light);
}

.aap-why-grid {

    display: grid;

    grid-template-columns:
        1fr .95fr;

    gap: 60px;

    align-items: center;
}

.aap-why-list {

    margin-top: 32px;

    display: grid;

    gap: 20px;
}

.aap-why-item {

    display: grid;

    grid-template-columns:
        42px minmax(0,1fr);

    gap: 14px;

    align-items: start;
}

.aap-why-item > span {

    width: 40px;
    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        #ffffff;

    background:
        var(--apex-navy);

    font-weight: 700;
}

.aap-why-item h3 {

    margin:
        0 0 3px;

    color:
        var(--apex-navy);

    font-size: 19px;
}

.aap-why-item p {

    margin: 0;

    color:
        var(--apex-text-light);

    font-size: 15px;

    line-height: 1.65;
}


/* Why Image */

.aap-why-image {

    min-height: 430px;

    overflow: hidden;

    border-radius: 22px;

    box-shadow:
        0 25px 60px
        rgba(7,52,97,.13);
}

.aap-why-image img {

    width: 100%;
    height: 100%;

    min-height: 430px;

    object-fit: cover;
}


/* =========================================
   FINAL CTA
========================================= */

.aap-care {

    padding:
        70px 0;

    color:
        #ffffff;

    background:
        var(--apex-navy-dark);
}

.aap-care-inner {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 50px;
}

.aap-care-content {

    max-width: 700px;
}

.aap-care-eyebrow {

    color:
        var(--apex-gold-light);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.aap-care h2 {

    margin:
        8px 0 10px;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(30px,3vw,42px);

    line-height: 1.13;
}

.aap-care p {

    max-width: 760px;

    margin: 0;

    color:
        rgba(255,255,255,.80);

    font-size: 17px;

    line-height: 1.7;
}

.aap-care-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}

.aap-care-btn {

    min-height: 46px;

    padding:
        12px 24px;

    border:
        2px solid transparent;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease;
}

.aap-care-btn:hover {

    transform:
        translateY(-3px);
}

.aap-care-btn-gold {

    color:
        #ffffff !important;

    background:
        var(--apex-gold);

    border-color:
        var(--apex-gold);
}

.aap-care-btn-gold:hover {

    background:
        var(--apex-gold-dark);

    border-color:
        var(--apex-gold-dark);
}

.aap-care-btn-outline {

    color:
        #ffffff !important;

    background:
        transparent;

    border-color:
        rgba(255,255,255,.70);
}

.aap-care-btn-outline:hover {

    color:
        var(--apex-navy-dark) !important;

    background:
        #ffffff;
}


/* =========================================
   ACCESSIBILITY
========================================= */

.apex-about-page a:focus-visible {

    outline:
        3px solid
        var(--apex-gold);

    outline-offset: 3px;
}


/* =========================================
   RESPONSIVE — LAPTOP
========================================= */

@media (max-width: 1180px) {

    .aap-container {

        width:
            calc(100% - 40px);
    }

    .aap-intro-grid,
    .aap-why-grid {

        gap: 50px;
    }

}


/* =========================================
   RESPONSIVE — TABLET
========================================= */

@media (max-width: 920px) {
 .aap-banner {
  min-height: 300px;
 }

 .aap-banner-bg img {
  object-position: 42% 38%;
 }


    .aap-container {

        width:
            min(100% - 32px,780px);
    }

    .aap-intro-grid,
    .aap-why-grid {

        grid-template-columns:
            1fr;
    }

    .aap-intro-content,
    .aap-why-content {

        text-align: center;
    }

    .aap-intro-content .aap-eyebrow,
    .aap-why-content .aap-eyebrow {

        justify-content: center;
    }

    .aap-check-grid {

        max-width: 620px;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    .aap-intro-image,
    .aap-intro-image > img,
    .aap-why-image,
    .aap-why-image img {

        min-height: 400px;
    }

    .aap-purpose-grid,
    .aap-values-grid {

        grid-template-columns:
            1fr 1fr;
    }

    .aap-why-list {

        max-width: 680px;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    .aap-care-inner {

        flex-direction: column;

        text-align: center;
    }

    .aap-care-actions {

        justify-content: center;
    }

}


/* =========================================
   RESPONSIVE — MOBILE
========================================= */

@media (max-width: 650px) {
 .aap-banner-bg img {
  object-position: 50% 38%;
 }


    .aap-container {

        width:
            calc(100% - 28px);
    }


    /* Banner */

    .aap-banner {

        min-height: 240px;
    }

    .aap-banner-content {

        padding:
            55px 15px;
    }

    .aap-banner h1 {

        font-size: 38px;
    }


    /* Sections */

    .aap-intro,
    .aap-purpose,
    .aap-values,
    .aap-why {

        padding:
            58px 0;
    }


    /* Typography */

    .aap-intro-content h2,
    .aap-why-content h2,
    .aap-section-heading h2 {

        font-size: 28px;

        letter-spacing: -.5px;
    }


    /* Grids */

    .aap-check-grid,
    .aap-purpose-grid,
    .aap-values-grid {

        grid-template-columns:
            1fr;
    }


    /* Images */

    .aap-intro-image,
    .aap-intro-image > img,
    .aap-why-image,
    .aap-why-image img {

        min-height: 320px;
    }

    .aap-image-note {

        right: 14px;
        bottom: 14px;
        left: 14px;

        max-width: none;
    }


    /* Cards */

    .aap-purpose-card,
    .aap-value-card {

        padding:
            24px 20px;
    }


    /* CTA */

    .aap-care {

        padding:
            55px 0;
    }

    .aap-care h2 {

        font-size: 28px;
    }

    .aap-care-actions {

        width: 100%;

        flex-direction: column;
    }

    .aap-care-btn {

        width: 100%;
    }

}


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

@media (prefers-reduced-motion: reduce) {

    .apex-about-page *,
    .apex-about-page *::before,
    .apex-about-page *::after {

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;
    }

}