/* ==========================================================================
   HAUS OF LESS
   About Page
   Version: 2.0
   ========================================================================== */

/* ==========================================================
   Meet Lara
========================================================== */

.about-grid{

    display:grid;

    grid-template-columns:460px 1fr;

    align-items:center;

    gap:5rem;

}

/* ==========================================================
   About Image
========================================================== */

.about-image{

    position:relative;

    max-width:460px;

}

.about-image img{

    width:100%;

    display:block;

    border-radius:24px;

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.about-image::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    background:rgba(181,150,92,.12);

    top:-35px;

    left:-35px;

    z-index:-1;

}

.about-image::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(27,37,32,.05);

    bottom:-45px;

    right:-45px;

    z-index:-1;

}

.about-content{

    max-width:640px;

}

.about-content h2{

    margin:1rem 0 1.5rem;

}

.about-content p{

    margin-bottom:1.5rem;

}

/* ==========================================================
   Story
========================================================== */

.story-content{

    max-width:760px;

    margin:auto;

}

.story-content p{

    font-size:1.08rem;

    line-height:2;

    margin-bottom:2rem;

}

.story-content blockquote{

    margin:5rem auto;

    padding:0;

    max-width:820px;

    text-align:center;

    font-family:var(--font-heading);

    font-size:clamp(2.4rem,4vw,3.8rem);

    line-height:1.2;

    color:var(--color-forest);

    font-weight:500;

    font-style:normal;

}

/* ==========================================================
   What You Can Expect
========================================================== */

.expect-grid{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.expect-item{

    background:#ffffff;

    padding:2.5rem;

    border:1px solid var(--border-light);

    border-radius:var(--radius-md);

    transition:var(--transition);

}

.expect-item:hover{

    transform:translateY(-8px);

    border-color:rgba(181,150,92,.4);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}
.expect-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    border-radius:50%;

    margin-bottom:1.5rem;

    background:var(--color-forest);

    color:#ffffff;

    font-weight:700;

}

.expect-item h3{

    margin-bottom:1rem;

}

/* ==========================================================
   Service Area
========================================================== */

.service-area-image{

    max-width:900px;

    margin:4rem auto 0;

}

.service-area-image img{

    width:100%;

    display:block;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:992px){

    .about-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .expect-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .story-content blockquote{

        font-size:2rem;

    }

}

/* ==========================================================
   Service Area
========================================================== */

.service-area{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:5rem;

    align-items:center;

}

.service-area__content h2{

    margin:1rem 0 1.5rem;

}

.service-area__content p{

    margin-bottom:2rem;

}

.service-area__image img{

    width:100%;

    border-radius:20px;

    display:block;

    box-shadow:var(--shadow-lg);

}

@media(max-width:992px){

    .service-area{

        grid-template-columns:1fr;

    }

}


/* ==========================================================
Section Spacing
========================================================== */

.about-content .section-label,
.story-content,
.expect-grid,
.service-area-image{

    animation:fadeUp .7s ease both;

}



/* About Page Refinements
   Added after the existing stylesheet so the original comments and
   existing component definitions remain untouched. */

.page-intro.about-page-intro{

    background:var(--color-linen);

    color:var(--color-forest);

    padding-top:110px;

    padding-bottom:110px;

}

.page-intro.about-page-intro .page-intro__content{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.page-intro.about-page-intro h1{

    color:var(--color-forest);

    margin-top:0;

    margin-bottom:24px;

    max-width:900px;

}

.page-intro.about-page-intro p{

    color:var(--color-charcoal);

    margin-top:0;

    margin-bottom:0;

}


/* Standard About-page section rhythm */

#meet-lara,
#my-story,
#why-i-do-this,
#what-you-can-expect,
#service-area,
#promise{

    padding-top:110px;

    padding-bottom:110px;

}

#meet-lara{

    background:var(--color-white);

}

#my-story{

    background:var(--color-linen);

}

#why-i-do-this{

    background:var(--color-white);

}

#what-you-can-expect{

    background:var(--color-linen);

}

#service-area{

    background:var(--color-linen);

}

#promise{

    background:var(--color-forest);

}


/* Standard heading-to-paragraph spacing */

.about-content h2,
.section-intro h2,
.service-area__content h2{

    margin-top:0;

    margin-bottom:24px;

}

.about-content p,
.section-intro p,
.service-area__content p,
.story-content p{

    margin-top:0;

}

.about-content p + p,
.story-content p + p,
.section-intro p + p,
.service-area__content p + p{

    margin-top:24px;

}

.about-content p{

    line-height:1.8;

    margin-bottom:0;

}

.story-content p{

    line-height:1.85;

    margin-bottom:0;

}

.section-intro{

    margin-bottom:64px;

}

.section-intro p,
.section-intro .section-description{

    max-width:760px;

}


/* Meet Lara */

.about-grid{

    gap:5.5rem;

}

.about-content{

    max-width:680px;

}

.about-image{

    max-width:460px;

}

.about-image img{

    border-radius:24px;

}


/* Story */

.story-content{

    max-width:760px;

}

.story-content blockquote{

    margin:64px auto;

}


/* Expectation cards */

.expect-grid{

    gap:24px;

    margin-top:0;

}

.expect-item{

    padding:32px;

    background:var(--color-white);

}

.expect-number{

    width:56px;

    height:56px;

    margin-bottom:24px;

    background:var(--color-brass);

    color:var(--color-white);

}

.expect-item h3{

    margin-top:0;

    margin-bottom:16px;

}

.expect-item p{

    margin:0;

    line-height:1.75;

}


/* Service area */

.service-area{

    gap:5.5rem;

}

.service-area__content h2{

    margin-bottom:24px;

}

.service-area__content p{

    margin-bottom:0;

    line-height:1.8;

}

.service-area__content p + p{

    margin-top:24px;

}


/* Final CTA */

.journey-cta{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:40px;

}

.about-final-cta-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    min-height:64px;

    min-width:320px;

    padding:1.1rem 2.8rem;

    background:var(--color-brass);

    color:var(--color-white);

    border:2px solid var(--color-brass);

    border-radius:999px;

    text-decoration:none;

    font-family:var(--font-body);

    font-size:1.02rem;

    font-weight:600;

    letter-spacing:.02em;

    line-height:1;

    box-shadow:0 12px 30px rgba(176,138,78,.20);

    transition:
        background-color .35s ease,
        border-color .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}

.about-final-cta-button:hover{

    background:var(--color-linen);

    border-color:var(--color-linen);

    color:var(--color-forest);

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.about-final-cta-arrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:var(--color-white);

    line-height:1;

    transition:
        color .35s ease,
        transform .35s ease;

}

.about-final-cta-button:hover .about-final-cta-arrow{

    color:var(--color-forest);

    transform:translateX(5px);

}

.about-final-cta-button:focus-visible{

    outline:3px solid rgba(176,138,78,.35);

    outline-offset:5px;

}


/* Footer rhythm */

.site-footer{

    padding-top:88px;

}

.footer__brand,
.footer__navigation,
.footer__contact-details,
.footer__social{

    padding-top:0;

}

.footer__contact-details .footer-title,
.footer__social .footer-title{

    margin-bottom:24px;

}

.footer__contact-details p{

    margin:0;

    line-height:1.8;

}

.footer__contact-details p + p{

    margin-top:12px;

}

.footer__contact-details a{

    color:inherit;

    text-decoration:none;

    transition:color .25s ease;

}

.footer__contact-details a:hover{

    color:var(--color-brass);

}

.footer__social-links{

    margin-top:0;

}


/* Responsive refinement */

@media(max-width:992px){

    .page-intro.about-page-intro{

        padding-top:90px;

        padding-bottom:90px;

    }

    #meet-lara,
    #my-story,
    #why-i-do-this,
    #what-you-can-expect,
    #service-area,
    #promise{

        padding-top:90px;

        padding-bottom:90px;

    }

    .about-grid{

        gap:3.5rem;

    }

    .service-area{

        gap:3.5rem;

    }

}

@media(max-width:767px){

    .page-intro.about-page-intro{

        padding-top:72px;

        padding-bottom:72px;

    }

    #meet-lara,
    #my-story,
    #why-i-do-this,
    #what-you-can-expect,
    #service-area,
    #promise{

        padding-top:72px;

        padding-bottom:72px;

    }

    .section-intro{

        margin-bottom:48px;

    }

    .about-content h2,
    .section-intro h2,
    .service-area__content h2{

        margin-bottom:20px;

    }

    .about-content p + p,
    .story-content p + p,
    .section-intro p + p,
    .service-area__content p + p{

        margin-top:20px;

    }

    .story-content blockquote{

        margin:48px auto;

        font-size:2rem;

    }

    .expect-item{

        padding:24px;

    }

    .journey-cta{

        margin-top:32px;

    }

    .about-final-cta-button{

        width:100%;

        min-width:0;

    }

}

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

    .about-final-cta-button,
    .about-final-cta-arrow{

        transition:none;

    }

}




/* ==========================================================
   ABOUT PAGE FINAL CTA
   Strong page-specific override
========================================================== */

#promise .journey-cta{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin-top:42px;
}

#promise .about-final-cta-button{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:12px;

    width:auto;
    min-width:250px;
    height:58px;

    padding:0 28px;

    background:var(--color-brass) !important;
    color:#ffffff !important;

    border:1px solid var(--color-brass) !important;
    border-radius:999px !important;

    text-decoration:none !important;

    font-family:var(--font-body);
    font-size:15px;
    font-weight:600;
    line-height:1;

    box-sizing:border-box;

    box-shadow:0 10px 28px rgba(176,138,78,.20);

    cursor:pointer;

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

#promise .about-final-cta-button:hover{
    background:var(--color-linen) !important;
    border-color:var(--color-linen) !important;
    color:var(--color-forest) !important;

    transform:translateY(-3px);

    box-shadow:0 16px 35px rgba(0,0,0,.18);
}

#promise .about-final-cta-text{
    display:inline-flex;
    align-items:center;
    color:inherit !important;
    white-space:nowrap;
}

#promise .about-final-cta-arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    color:inherit !important;

    font-size:18px;
    line-height:1;

    transform:translateX(0);

    transition:transform .3s ease;
}

#promise .about-final-cta-button:hover
.about-final-cta-arrow{
    transform:translateX(5px);
}


/* Keyboard accessibility */

#promise .about-final-cta-button:focus-visible{
    outline:3px solid rgba(176,138,78,.45);
    outline-offset:5px;
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){

    #promise .journey-cta{
        margin-top:34px;
    }

    #promise .about-final-cta-button{
        width:min(100%, 320px);
        min-width:0;
        height:56px;
        padding:0 24px;
    }

}

/* Lara Meet Lara update */
#what-i-bring .expect-grid,#getting-started .expect-grid{margin-top:2.5rem;}
#responsibility h3{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:500;margin-top:.75rem;}

/* ==========================================================
   ABOUT ME — CONTENT REFINEMENT
========================================================== */

.about-role{
    margin-top:-.65rem;
    color:var(--color-forest);
}

.about-role strong{
    font-weight:600;
}

.about-perspective__content{
    max-width:920px;
    margin:0 auto;
    text-align:center;
}

.about-perspective__content h2{
    margin:0;
    font-family:var(--font-heading);
    font-size:clamp(2.35rem,4.4vw,4rem);
    line-height:1.08;
    font-weight:500;
    color:var(--color-forest);
}

.about-perspective__content h2 + h2{
    margin-top:.35rem;
}

.about-perspective__content p{
    max-width:760px;
    margin:2.4rem auto 0;
    font-size:1.08rem;
    line-height:1.85;
}

.about-perspective__content .about-emphasis{
    margin-top:1.15rem;
    color:var(--color-forest);
    font-weight:600;
}

.about-brings-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
    margin-top:3.5rem;
}

.about-bring-card{
    min-height:250px;
    padding:2.25rem 2rem;
    background:var(--color-linen);
    border:1px solid rgba(31,58,46,.10);
    border-radius:22px;
    display:flex;
    flex-direction:column;
}

.about-bring-card__number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    margin-bottom:1.6rem;
    border-radius:50%;
    background:var(--color-forest);
    color:#fff;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.08em;
}

.about-bring-card h3{
    margin:0 0 .75rem;
    font-family:var(--font-heading);
    font-size:2rem;
    line-height:1.05;
    color:var(--color-forest);
    font-weight:500;
}

.about-bring-card p{
    margin:0;
    line-height:1.75;
}

.getting-started-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
    margin-top:3.5rem;
}

.getting-started-item{
    padding:2.5rem 2.25rem;
    background:#fff;
    border:1px solid rgba(31,58,46,.10);
    border-radius:22px;
}

.getting-started-number{
    display:block;
    margin-bottom:1.5rem;
    color:var(--color-brass);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.18em;
}

.getting-started-item h3{
    margin:0 0 .85rem;
    font-family:var(--font-heading);
    font-size:2rem;
    line-height:1.05;
    color:var(--color-forest);
    font-weight:500;
}

.getting-started-item p{
    margin:0;
    line-height:1.8;
}

.about-final-section .section-intro{
    max-width:850px;
    margin-left:auto;
    margin-right:auto;
}

.about-final-section .section-intro h2,
.about-final-section .section-description{
    color:#fff;
}

.about-final-section .section-description{
    opacity:.9;
}

.about-final-section .journey-cta{
    display:flex;
    justify-content:center;
    margin-top:2.5rem;
}

.about-final-cta-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:56px;
    padding:.9rem 1.8rem;
    border-radius:999px;
    background:var(--color-brass);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    letter-spacing:.01em;
    transition:var(--transition);
}

.about-final-cta-button:hover{
    background:var(--color-linen);
    color:var(--color-forest);
    transform:translateY(-2px);
}

@media(max-width:1100px){
    .about-brings-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .about-brings-grid,
    .getting-started-grid{
        grid-template-columns:1fr;
    }

    .about-bring-card,
    .getting-started-item{
        min-height:0;
    }

    .about-perspective__content h2{
        font-size:2.35rem;
    }
}


/* ==========================================================
   About Me — Premium Scroll Reveal
========================================================== */

#what-i-bring .about-brings-grid .fade-up,
#getting-started .getting-started-grid .fade-up{
    transition-duration:.85s;
    transition-timing-function:cubic-bezier(.22,1,.36,1);
}

#what-i-bring .about-brings-grid .fade-up:nth-child(1),
#getting-started .getting-started-grid .fade-up:nth-child(1){
    transition-delay:0s;
}

#what-i-bring .about-brings-grid .fade-up:nth-child(2),
#getting-started .getting-started-grid .fade-up:nth-child(2){
    transition-delay:.12s;
}

#what-i-bring .about-brings-grid .fade-up:nth-child(3),
#getting-started .getting-started-grid .fade-up:nth-child(3){
    transition-delay:.24s;
}

#what-i-bring .about-brings-grid .fade-up:nth-child(4){
    transition-delay:.36s;
}

#what-i-bring .about-bring-card,
#getting-started .getting-started-item{
    transition-property:opacity,transform,box-shadow,border-color;
}

#what-i-bring .about-bring-card:hover,
#getting-started .getting-started-item:hover{
    transform:translateY(-7px);
    box-shadow:0 18px 38px rgba(31,58,46,.10);
    border-color:rgba(176,138,78,.28);
}

#what-i-bring .about-bring-card__number{
    transition:transform .5s cubic-bezier(.22,1,.36,1),
               background-color .35s ease;
}

#what-i-bring .about-bring-card:hover .about-bring-card__number{
    transform:scale(1.08);
    background-color:var(--color-brass);
}

#getting-started .getting-started-number{
    transition:letter-spacing .4s ease, transform .4s ease;
}

#getting-started .getting-started-item:hover .getting-started-number{
    letter-spacing:.24em;
    transform:translateX(2px);
}

@media (prefers-reduced-motion:reduce){
    #what-i-bring .about-brings-grid .fade-up,
    #getting-started .getting-started-grid .fade-up{
        opacity:1;
        transform:none;
        transition:none;
    }

    #what-i-bring .about-bring-card:hover,
    #getting-started .getting-started-item:hover{
        transform:none;
        box-shadow:none;
    }
}