* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family: 'Montserrat', Arial, sans-serif;

    color: #3d3935;

    background: #ffffff;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}


img {

    max-width: 100%;

    display: block;

}


main {

    flex: 1;

}



/* =========================
   Header
========================= */


.site-header {

    background: #ffffff;

    padding: 15px 5%;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

}


.navigation {

    max-width: 1200px;

    margin: auto;

    display: flex;

    align-items: center;

}


.logo img {

    height: 45px;

    width: auto;

    transform: translateY(-2px);

}


/* Menu */

.mobile-menu {

    display: flex;

    align-items: center;

    margin-left: auto;

}


.nav-links {

    list-style: none;

    display: flex;

    gap: 25px;

    margin: 0;

    padding: 0;

}


.nav-links a {

    color: #e25a23;

    text-decoration: none;

    font-weight: 600;

    transition: color 0.3s ease;

}


.nav-links a:hover,
.nav-links a.active {

    color: #be272d;

}


/* Halaxy Buttons */

.header-buttons {

    display: flex;

    gap: 15px;

    align-items: center;

    margin-left: 35px;

}


.header-halaxy-button {

    width: 145px;

    height: 45px;

    background: #0D067A;

    border-radius: 7px;

    padding: 8px 12px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    text-decoration: none;

    color: white;

}


.header-halaxy-button:hover {

    background: #17127f;

    box-shadow: inset 0 0 0 100px rgba(238, 227, 202, 0.08);

}


.header-halaxy-button span {

    font-size: 12px;

    font-weight: 600;

    line-height: 1.2;

}


.header-halaxy-button img {

    width: 30px;

}



/* Hamburger */

.hamburger {

    display: none;

}



/* Mobile Header */


@media (max-width:1000px) {


    .site-header {

        padding: 12px 25px;

    }


    .logo img {

        height: 40px;

    }


    .mobile-menu {

        display: none;

        position: absolute;

        top: 55px;

        left: 0;

        width: 100%;

        background: white;

        padding: 25px;

        box-sizing: border-box;

    }


    .mobile-menu.open {

        display: block;

    }


    .nav-links {

        flex-direction: column;

        gap: 20px;

    }


    .header-buttons {

        flex-direction: column;

        gap: 15px;

        margin: 25px 0 0;

    }


    .header-halaxy-button {

        width: 100%;

    }


    .hamburger {

        display: block;

        background: none;

        border: none;

        padding: 0;

        color: #e25a23;

        font-size: 32px;

        cursor: pointer;

        line-height: 1;

        margin-left: auto;

    }

}










/* =========================
   Homepage
========================= */


.hero {

    position: relative;

    overflow: hidden;

    min-height: 450px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: #eee3ca;

    padding: 60px 20px;

}



.hero-watermark {

    position: absolute;

    width: 1550px;

    height: 1550px;

    object-fit: contain;

    opacity: 0.10;

    top: calc(120% + 19px);

    left: 68%;

    transform: translate(-50%, -50%) scaleX(-1);

    max-width: none;

    pointer-events: none;

}


.hero-content {

    position: relative;

    z-index: 1;

    max-width: 850px;

}



.hero h2 {

    font-size: clamp(24px, 3vw, 34px);

    font-weight: 300;

    line-height: 1.5;

    margin-bottom: 40px;

}



.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

}



.button {

    padding: 14px 35px;

    border: 2px solid #e25a23;

    border-radius: 3px;

    color: #e25a23;

    text-decoration: none;

    font-weight: 600;

    transition: all 0.3s ease;

}



.button:hover {

    color: #be272d;

    border-color: #be272d;

}



.enquire-button {

    background: #e25a23;

    color: #eee3ca;

    width: auto;

    display: inline-block;

}


.enquire-button:hover {

    background: #be272d;

    color: #eee3ca;

    border-color: #be272d;

}



/* Homepage Intro */

.intro {

    max-width: 1200px;

    margin: 65px auto;

    padding: 0 40px;

}


.intro-text p {

    font-size: 17px;

    line-height: 1.9;

    max-width: 1050px;

    margin: 0 0 25px;

}




/* Mobile */


@media (max-width:1000px) {


    .intro {

        padding: 0 25px;

    }



}








/* =========================
   Services Page
========================= */


.services-page {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 40px;

}





/* What To Expect */


.expect-section {

    background: #eee3ca;

    width: 100vw;

    position: relative;

    left: 50%;

    margin-left: -50vw;

    padding: 55px max(calc((100vw - 1200px) / 2 + 40px), 40px);

    margin-bottom: 55px;

}



.expect-section h2 {

    font-size: 26px;

    font-weight: 500;

    margin: 0 0 25px;

}



.expect-section p {

    font-size: 17px;

    line-height: 1.9;

    max-width: 1050px;

    margin: 0 0 25px;

}





/* Services Content */


.services-content {

    padding-bottom: 80px;

}





/* Clients We See */


.services-section {

    margin-bottom: 55px;

}



.clients-section h2 {

    font-size: 26px;

    font-weight: 500;

    margin: 0 0 30px;

}



.clients-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px 50px;

}



.clients-grid p {

    margin: 0;

    font-size: 17px;

    line-height: 1.7;

}





/* Services Provided */


.services-section {

    width: 100%;

}


.services-section h2 {

    font-size: 26px;

    font-weight: 500;

    margin-bottom: 25px;

}



.services-note {

    margin: 0 0 35px;

    font-size: 17px;

    line-height: 1.7;

}



.services-footer-text {

    margin-top: 40px;

    font-size: 17px;

    line-height: 1.7;

}



.services-grid {

    display: grid;

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

    gap: 25px 50px;

}


.no-break {
    white-space: nowrap;
}


.services-grid p {

    margin: 0;

    font-size: 17px;

    line-height: 1.7;

}



.team-header {

    background: #eee3ca;

    text-align: center;

    padding: 70px 40px;

}




/* Check marks */

.clients-grid p,
.services-grid p {

    position: relative;

    padding-left: 28px;

}


.clients-grid p::before,
.services-grid p::before {

    content: "✓";

    position: absolute;

    left: 0;

    color: #e25a23;

    font-weight: 600;

}




/* =========================
   Our Team Page
========================= */


.team-page {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 40px 100px;

}



/* Team Sections */


.team-section {

    width: 100vw;

    position: relative;

    left: 50%;

    margin-left: -50vw;

    padding: 55px max(calc((100vw - 1200px) / 2 + 40px), 40px);

}


.management-section {

    background: #eee3ca;

}


.physio-section {

    background: white;

}


.team-section-intro {

    margin-bottom: 45px;

}


.team-section-intro h2 {

    font-size: 26px;

    font-weight: 500;

    margin: 0;

}



/* Team Grid */


.team-grid {

    display: grid;

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

    gap: 60px 40px;

}


.team-member {

    text-align: left;

}


.team-toggle {

    display: none;

}



/* Images */


.team-image {

    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 3px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);

}


.team-image label {

    display: block;

    width: 100%;

    height: 100%;

    cursor: pointer;

}


.team-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: opacity 0.4s ease;

    border-radius: 3px;

    position: relative;
  /*  z-index: 0; */

}



/* Bio Overlay */


.team-bio {

    position: absolute;

    inset: 0;

    padding: 30px;

    background: rgba(255,255,255,1);

    opacity: 0;

    pointer-events: none;

    overflow-y: auto;

    transition: opacity 0.4s ease;

    border-radius: 3px;

    z-index: 1;

}




.management-section .team-bio {

    background: #eee3ca;

}


.team-bio p {

    margin: 0;

    font-size: 16px;

    line-height: 1.8;

}



/* Names */


.team-member h2 {

    margin: 25px 0 8px;

    font-size: 22px;

    font-weight: 600;

}


.team-member h3 {

    margin: 0;

    font-size: 16px;

    font-weight: 500;

    color: #3d3935;

}



/* Desktop Hover */


@media (hover: hover) and (pointer: fine) {


    .team-image:hover img {

        opacity: 0.12;

    }


    .team-image:hover .team-bio {

        opacity: 1;

        pointer-events: auto;

    }


}



/* Mobile Tap */


@media (max-width:700px) {


    .team-page {

        padding: 0 25px 100px;

    }


    .team-section {

        padding: 45px 25px;

    }


    .team-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .team-toggle:checked + .team-image img {

        opacity: 0.12;

    }


    .team-toggle:checked + .team-image .team-bio {

        opacity: 1;

        pointer-events: auto;

    }


    .team-bio {

        padding: 25px;


    }


    .team-bio p {

        font-size: 16px;

        line-height: 1.7;

    }


    .team-member h2 {

        margin-top: 20px;

        font-size: 21px;

    }


    .team-member h3 {

        font-size: 15px;

    }




.team-image.tap-hint::after {

    content: "";

    position: absolute;

    z-index: 10;

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background: rgba(235,235,235,0.3);

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.8);

    opacity: 0;

    animation: tapHint 2.5s ease 0s 1 forwards;

    pointer-events: none;

}




.tap-ripple {

    position: absolute;

    width: 90px;

    height: 90px;

    border-radius: 50%;

   background: rgba(235,235,235,0.67);

    transform: translate(-50%, -50%) scale(0.8);

    opacity: 1;

    pointer-events: none;

    animation: tapRipple 0.8s ease forwards;

    z-index: 10;

}


}



/* Bio Hint */



.team-bio.bio-hint {

    animation: bioHint 1.8s ease 0.3s 1;

}





@keyframes bioHint {

    0% {

        opacity: 0;

    }


    22% {

        opacity: 1;

    }


    78% {

        opacity: 1;

    }


    100% {

        opacity: 0;

    }


}




@keyframes tapHint {

    /* First flash */
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    35% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.1);
    }


    /* Pause */
    35%,
    58% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.1);
    }


    /* Reset instantly while invisible */
    58.01% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }


    /* Second flash */
    73% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    93% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.1);
    }

}





@keyframes tapRipple {

    0% {

        opacity: 0.35;

        transform: translate(-50%, -50%) scale(0.8);

    }


    100% {

        opacity: 0;

        transform: translate(-50%, -50%) scale(1.15);

    }

}





/* =========================
   Contact Page
========================= */


.contact-page {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 40px;

}



/* Contact Intro */


.contact-intro {

    background: #eee3ca;

    width: 100vw;

    position: relative;

    left: 50%;

    margin-left: -50vw;

    padding: 55px max(calc((100vw - 1200px) / 2 + 40px), 40px);

    margin-bottom: 55px;

}



.contact-intro h2 {

    font-size: 26px;

    font-weight: 500;

    margin: 0 0 25px;

}



.contact-intro p {

    font-size: 17px;

    line-height: 1.9;

    max-width: 1050px;

    margin: 0 0 25px;

}





/* Contact Details */


.contact-details {

    display: grid;

    grid-template-columns: repeat(3, auto);

    gap: 70px;

    margin-top: 35px;

    justify-content: start;

}



.contact-item {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}



.contact-item i {

    color: #e25a23;

    font-size: 32px;

    width: 35px;

    margin-top: 4px;

}



.contact-item p {

    margin: 3px 0 0;

    font-size: 19px;

    line-height: 1.7;

}





/* Referrals */


.referrals-section {

    padding-bottom: 100px;

}



.referrals-section h2 {

    font-size: 26px;

    font-weight: 500;

    margin: 0 0 25px;

}



.referrals-section p {

    font-size: 17px;

    line-height: 1.7;

    margin: 0 0 35px;

}



.referral-buttons {

    display: flex;

    gap: 25px;

    flex-wrap: wrap;

}





/* Halaxy Buttons */


.halaxy-button {

    width: 380px;

    height: 85px;

    background: #0D067A;

    border-radius: 10px;

    padding: 20px 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    text-decoration: none;

    color: white;

    transition: none;

}



.halaxy-button:hover {

    background: #17127f;

    box-shadow: inset 0 0 0 100px rgba(238, 227, 202, 0.08);

}



.halaxy-text {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 100%;

}



.halaxy-text span {

    font-size: 17px;

    font-weight: 600;

    line-height: 1.3;

}



.halaxy-text small {

    font-size: 13px;

    font-weight: 400;

    opacity: 0.9;

}



.halaxy-button img {

    width: 60px;

    height: auto;

}





/* Mobile */


@media(max-width:700px) {


    .contact-page {

        padding: 0 25px;

    }



    .contact-intro {

        padding: 55px 25px;

        margin-bottom: 45px;

    }



    .contact-details {

        grid-template-columns: 1fr;

        gap: 25px;

    }



    .referrals-section {

        padding-bottom: 60px;

    }



    .referral-buttons {

        flex-direction: column;

        align-items: flex-start;

    }



    .halaxy-button {

        width: 100%;

    }


}











/* =========================
   Footer
========================= */


.footer {

    background: #eee3ca;

    padding: 25px 5%;

}



.footer-content {

    max-width: 1200px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.footer-logo img {

    width: 120px;

}



.footer p {

    margin: 0;

}


.footer-nowrap {

    white-space: nowrap;

}




/* =========================
   Tablet
========================= */


@media(max-width:900px) {


    .team-page {

        padding: 70px 30px 100px;

    }


    .team-grid {

        grid-template-columns: repeat(2, 1fr);

    }


}





/* =========================
   Mobile
========================= */


@media(max-width:700px) {




    .services-page {

        padding: 0 25px;

    }



    .expect-section {

        padding: 55px 25px;

        margin-bottom: 40px;

    }



    .services-content {

        padding-bottom: 60px;

    }



    .services-section {

        margin-bottom: 45px;

    }



    .clients-grid,

    .services-grid {

        grid-template-columns: 1fr;

        gap: 25px;

    }



    .team-page {

        padding: 55px 25px 100px;

    }



    .team-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }



    .team-toggle:checked + .team-image img {

        opacity: 0.12;

    }



    .team-toggle:checked + .team-image .team-bio {

    opacity: 1;

    pointer-events: auto;

}



    .team-bio {

        padding: 25px;

    }



    .team-bio p {

        font-size: 16px;

        line-height: 1.7;

    }



    .team-member h2 {

        font-size: 21px;

        margin-top: 20px;

    }



    .team-member h3 {

        font-size: 15px;

    }



    .footer-content {

        flex-direction: column;

        gap: 20px;

        text-align: center;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: center;

        width: 100%;

        gap: 15px;

    }


    .hero-buttons .button {

        width: 100%;

        max-width: 280px;

        text-align: center;

    }


.halaxy-text span {

    font-size: 15px;

}


}