/* ==========================================================
   AVSTUDIO
   SERVICES PAGE ONLY

   The main site still supplies shared variables, theme styles,
   the shared header, buttons, footer styling and the
   page-transition animation. This file owns the content
   of the Services page.
========================================================== */



/* ==========================================================
   PAGE
========================================================== */

.services-page {
    width: 100%;

    background:
        var(--background);

    color:
        var(--text);

    /* clip (not hidden) so the sticky service titles still work */
    overflow:
        clip;
}


.services-page-width {
    width:
        min(
            1400px,
            90%
        );

    margin:
        0 auto;
}



/* ==========================================================
   SERVICES HERO
========================================================== */

.services-page-hero {
    position: relative;

    background:
        var(--background);

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

    overflow:
        hidden;
}


.services-page-hero
.services-page-width {
    padding:
        185px
        0
        80px;
}



/* ==========================================================
   MAIN GRID
========================================================== */

.services-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(280px, 0.45fr);

    gap:
        80px;

    align-items:
        stretch;
}



/* ==========================================================
   LEFT SIDE
========================================================== */

.services-hero-main {
    position: relative;

    padding-right:
        20px;
}


.services-hero-title {
    max-width:
        1000px;

    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(
            3.7rem,
            7vw,
            7.2rem
        );

    line-height:
        0.96;

    letter-spacing:
        -0.06em;

    font-weight:
        650;
}


.services-hero-title span {
    display:
        block;

    color:
        var(--gold);
}



/* ==========================================================
   GOLD LINE
========================================================== */

.services-hero-line {
    width:
        min(
            520px,
            72%
        );

    height:
        2px;

    margin:
        48px
        0
        28px;

    background:
        var(--gold);

    transform-origin:
        left center;

    animation:
        servicesHeroLine
        0.9s
        cubic-bezier(
            0.76,
            0,
            0.24,
            1
        )
        0.15s
        both;
}


@keyframes servicesHeroLine {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}



/* ==========================================================
   SHORT STATEMENT
========================================================== */

.services-hero-statement {
    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.8rem
        );

    line-height:
        1.3;

    letter-spacing:
        -0.025em;

    font-weight:
        650;
}



/* ==========================================================
   RIGHT SIDE
========================================================== */

.services-hero-side {
    position:
        relative;

    min-height:
        440px;

    padding:
        28px
        0
        0
        45px;

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

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;
}



/* NUMBER */

.services-hero-number {
    display:
        block;

    color:
        var(--gold);

    font-size:
        clamp(
            5rem,
            8vw,
            8.5rem
        );

    line-height:
        0.8;

    letter-spacing:
        -0.08em;

    font-weight:
        650;

    opacity:
        0.15;

    user-select:
        none;
}



/* TEXT */

.services-hero-side-content {
    max-width:
        300px;
}


.services-hero-side-label {
    display:
        block;

    margin-bottom:
        18px;

    color:
        var(--gold);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.services-hero-side-content p {
    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        1rem;

    line-height:
        1.75;
}



/* ==========================================================
   HERO BOTTOM
========================================================== */

.services-hero-bottom {
    margin-top:
        85px;

    padding-top:
        22px;

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    color:
        var(--text-secondary);

    font-size:
        0.82rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}



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

.services-hero-scroll {
    width:
        48px;

    height:
        48px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    color:
        var(--gold);

    text-decoration:
        none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.services-hero-scroll span {
    display:
        block;

    font-size:
        1.15rem;

    transition:
        transform 0.25s ease;
}


.services-hero-scroll:hover {
    background:
        var(--gold);

    border-color:
        var(--gold);

    color:
        #ffffff;

    transform:
        translateY(2px);
}


.services-hero-scroll:hover span {
    transform:
        translateY(3px);
}



/* ==========================================================
   DARK MODE DETAIL
========================================================== */

html[data-theme="dark"]
.services-hero-number {
    opacity:
        0.18;
}



/* ==========================================================
   TABLET
========================================================== */

@media (
    max-width: 950px
) {

    .services-hero-grid {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }


    .services-hero-side {
        min-height:
            auto;

        padding:
            35px
            0
            0;

        border-left:
            none;

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

        display:
            grid;

        grid-template-columns:
            auto
            1fr;

        gap:
            45px;

        align-items:
            end;
    }


    .services-hero-number {
        font-size:
            5rem;
    }


    .services-hero-side-content {
        max-width:
            420px;
    }

}



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

@media (
    max-width: 650px
) {

    .services-page-hero
    .services-page-width {
        padding:
            140px
            0
            55px;
    }


    .services-hero-title {
        font-size:
            clamp(
                2.8rem,
                13.5vw,
                4.4rem
            );

        line-height:
            0.99;
    }


    .services-hero-line {
        width:
            75%;

        margin:
            35px
            0
            22px;
    }


    .services-hero-statement {
        font-size:
            1.2rem;
    }


    .services-hero-grid {
        gap:
            45px;
    }


    .services-hero-side {
        padding-top:
            28px;

        grid-template-columns:
            1fr;

        gap:
            24px;
    }


    .services-hero-number {
        font-size:
            4.5rem;
    }


    .services-hero-bottom {
        margin-top:
            55px;

        font-size:
            0.7rem;

        letter-spacing:
            0.10em;
    }


    .services-hero-scroll {
        width:
            44px;

        height:
            44px;
    }

}



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

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

    .services-hero-line {
        animation:
            none;

        transform:
            none;
    }

}




/* ==========================================================
   HERO: QUICK JUMP LINKS
========================================================== */

.services-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 34px;
}

.services-jump a {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;

    color: var(--text-secondary);
    text-decoration: none;

    transition: color 0.2s ease;
}

.services-jump a span {
    color: var(--gold);
}

.services-jump a em {
    font-style: normal;
}

.services-jump a:hover {
    color: var(--text);
}



/* ==========================================================
   SERVICE DETAIL SECTIONS
========================================================== */

.service-detail {
    background: var(--background);
    border-top: 1px solid var(--border);

    scroll-margin-top: 70px;
}

.service-detail-alt {
    background: var(--background-secondary);
}

.service-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 90px;
    align-items: start;

    padding: 105px 0;
}


/* LEFT: NUMBER + TITLE */

.service-detail-head {
    position: sticky;
    top: 125px;
}

.service-detail-number {
    display: block;

    margin-bottom: 26px;

    color: var(--gold);

    font-size: clamp(4rem, 7vw, 6.5rem);
    font-weight: 650;
    line-height: 0.8;
    letter-spacing: -0.08em;

    opacity: 0.2;
    user-select: none;
}

.service-detail-head h2 {
    margin: 0;

    font-size: clamp(2.5rem, 4.4vw, 4.4rem);
    font-weight: 650;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.service-detail-lead {
    max-width: 430px;

    margin-top: 22px;

    color: var(--gold);

    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -0.015em;
}


/* RIGHT: DESCRIPTION + LISTS */

.service-detail-body > p {
    max-width: 640px;

    color: var(--text-secondary);

    font-size: 1.05rem;
    line-height: 1.8;
}

.service-detail-label {
    margin: 44px 0 16px;

    color: var(--gold);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.service-detail-list {
    list-style: none;

    border-top: 1px solid var(--border);
}

.service-detail-list li {
    position: relative;

    padding: 16px 0 16px 34px;

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

    font-weight: 600;
    line-height: 1.5;
}

.service-detail-list li::before {
    content: "";

    position: absolute;
    left: 2px;
    top: 50%;

    width: 16px;
    height: 2px;

    background: var(--gold);
}

.service-detail-tags {
    list-style: none;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.service-detail-tags li {
    padding: 8px 15px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface);
    color: var(--text-secondary);

    font-size: 0.84rem;
    font-weight: 650;
}



/* ==========================================================
   HOW WE WORK
========================================================== */

.services-process {
    background: var(--background);
    border-top: 1px solid var(--border);
}

.services-process .services-page-width {
    padding: 115px 0 105px;
}

.services-process-header {
    margin-bottom: 60px;
}

.services-process-header h2 {
    max-width: 900px;

    margin: 0;

    font-size: clamp(2.5rem, 4.6vw, 4.6rem);
    font-weight: 650;
    line-height: 1.03;
    letter-spacing: -0.05em;
}

.process-steps {
    list-style: none;

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

    border-top: 1px solid var(--border);
}

.process-step {
    position: relative;

    padding: 36px 30px 10px;
}

.process-step:first-child {
    padding-left: 0;
}

.process-step + .process-step {
    border-left: 1px solid var(--border);
}

.process-step::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 30px;

    width: 44px;
    height: 2px;

    background: var(--gold);
}

.process-step:first-child::before {
    left: 0;
}

.process-step-number {
    color: var(--gold);

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.process-step h3 {
    margin: 22px 0 12px;

    font-size: 1.45rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.process-step p {
    color: var(--text-secondary);

    font-size: 0.95rem;
    line-height: 1.7;
}



/* ==========================================================
   FREQUENTLY ASKED QUESTIONS
   Always visible (not folded), so every answer is readable
   for visitors and search engines alike.
========================================================== */

.services-faq {
    background: var(--background-secondary);
    border-top: 1px solid var(--border);

    scroll-margin-top: 70px;
}

.services-faq .services-page-width {
    padding: 110px 0;
}

.services-faq-header {
    margin-bottom: 55px;
}

.services-faq-header h2 {
    max-width: 900px;

    margin: 0;

    font-size: clamp(2.5rem, 4.6vw, 4.6rem);
    font-weight: 650;
    line-height: 1.03;
    letter-spacing: -0.05em;
}

.faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--border);
}

.faq-item {
    position: relative;

    padding: 34px 40px 34px 0;

    border-bottom: 1px solid var(--border);
}

.faq-item:nth-child(even) {
    padding-left: 40px;
    padding-right: 0;

    border-left: 1px solid var(--border);
}

.faq-item::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 0;
    height: 2px;

    background: var(--gold);

    transition: width 0.35s ease;
}

.faq-item:nth-child(even)::before {
    left: 40px;
}

.faq-item:hover::before {
    width: 44px;
}

.faq-number {
    display: block;

    margin-bottom: 14px;

    color: var(--gold);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.faq-item h3 {
    margin-bottom: 12px;

    font-size: 1.3rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.faq-item p {
    max-width: 560px;

    color: var(--text-secondary);

    font-size: 0.97rem;
    line-height: 1.75;
}

.services-package {
    padding-top: 110px;
}

@media (max-width: 950px) {

    .faq-list {
        grid-template-columns: 1fr;
    }

    .faq-item,
    .faq-item:nth-child(even) {
        padding: 30px 0;

        border-left: none;
    }

    .faq-item:nth-child(even)::before {
        left: 0;
    }

}

@media (max-width: 650px) {

    .services-faq .services-page-width {
        padding: 75px 0;
    }

    .services-faq-header {
        margin-bottom: 36px;
    }

    .services-faq-header h2 {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }

    .services-package {
        padding-top: 75px;
    }

}



/* ==========================================================
   COMPLETE PACKAGE
========================================================== */

.services-package .services-page-width {
    padding: 0 0 120px;
}

.package-card {
    position: relative;

    min-height: 340px;

    padding: 56px;

    overflow: hidden;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;

    background: var(--gold);
    color: #ffffff;
}

.package-card::before,
.package-card::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.package-card::before {
    width: 520px;
    height: 520px;

    top: -250px;
    right: -120px;

    border: 1px solid rgba(255, 255, 255, 0.24);
}

.package-card::after {
    width: 290px;
    height: 290px;

    top: -130px;
    right: -5px;

    border: 1px solid rgba(255, 255, 255, 0.12);
}

.package-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}

.package-label {
    display: inline-block;

    margin-bottom: 24px;

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.package-card h2 {
    margin: 0 0 18px;

    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.05em;
}

.package-card p {
    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, 0.90);

    font-size: 1rem;
    line-height: 1.7;
}

.package-button {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

    min-width: 245px;

    padding: 17px 23px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    background: #ffffff;
    color: #111111;

    text-decoration: none;
    font-weight: 750;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.package-button:hover {
    transform: translateY(-2px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.package-button-arrow {
    color: var(--gold);

    font-size: 1.25rem;

    transition: transform 0.25s ease;
}

.package-button:hover .package-button-arrow {
    transform: translateX(4px);
}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 950px) {

    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;

        padding: 85px 0;
    }

    .service-detail-head {
        position: static;
    }

    .service-detail-number {
        margin-bottom: 18px;

        font-size: 4rem;
    }

    .process-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-step,
    .process-step:first-child {
        padding: 34px 28px 34px 0;
    }

    .process-step + .process-step {
        border-left: none;
    }

    .process-step:nth-child(even) {
        padding-left: 28px;
        border-left: 1px solid var(--border);
    }

    .process-step:nth-child(n + 3) {
        border-top: 1px solid var(--border);
    }

    .process-step::before,
    .process-step:first-child::before {
        left: 0;
    }

    .process-step:nth-child(even)::before {
        left: 28px;
    }

    .package-card {
        flex-direction: column;
        align-items: flex-start;
    }

}



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

@media (max-width: 650px) {

    .services-page-width {
        width: 92%;
    }

    .services-hero-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .services-jump {
        flex-direction: column;
        gap: 12px;
    }

    .services-hero-scroll {
        display: none;
    }

    .service-detail-grid {
        gap: 30px;

        padding: 70px 0;
    }

    .service-detail-number {
        font-size: 3.4rem;
    }

    .service-detail-head h2 {
        font-size: clamp(2.2rem, 11vw, 3rem);
    }

    .service-detail-body > p {
        font-size: 1rem;
    }

    .services-process .services-page-width {
        padding: 80px 0 70px;
    }

    .services-process-header {
        margin-bottom: 40px;
    }

    .services-process-header h2 {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    .process-step,
    .process-step:first-child,
    .process-step:nth-child(even) {
        padding: 30px 0;
        border-left: none;
    }

    .process-step + .process-step {
        border-top: 1px solid var(--border);
    }

    .process-step::before,
    .process-step:nth-child(even)::before {
        left: 0;
    }

    .services-package .services-page-width {
        padding-bottom: 85px;
    }

    .package-card {
        min-height: 0;

        padding: 34px 28px;

        gap: 34px;
    }

    .package-card::before {
        width: 350px;
        height: 350px;

        top: -180px;
        right: -140px;
    }

    .package-card::after {
        display: none;
    }

    .package-card h2 {
        font-size: clamp(2.4rem, 12vw, 3.6rem);
    }

    .package-button {
        width: 100%;
        min-width: 0;
    }

}