/* =========================================================
   AKEELA DENTAL CARE — SERVICES PAGE
   LIGHT THEME / PREMIUM BENTO
========================================================= */

:root {
    --ak-green: #009DA5;
    --ak-green-dark: #007F86;
    --ak-orange: #F3754B;
    --ak-ink: #173B3D;
    --ak-text: #496466;
    --ak-muted: #789092;
    --ak-line: #DCEBEC;
    --ak-white: #FFFFFF;
    --ak-offwhite: #F7FAFA;
}

* {
    box-sizing: border-box;
}

.ak-svc-page {
    background: var(--ak-white);
    color: var(--ak-ink);
    font-family: "DM Sans", "Manrope", sans-serif;
    overflow-x: hidden;
}

.ak-svc-page img {
    max-width: 100%;
    display: block;
}

.ak-svc-page a {
    text-decoration: none;
    color: inherit;
}

.akp-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.ak-about-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--ak-green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.ak-about-section-label::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--ak-orange);
    flex-shrink: 0;
}


/* =========================================================
   BUTTONS
========================================================= */

.ak-svc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 15px 22px;
    border-radius: 100px;
    background: var(--ak-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .25s ease;
}

.ak-svc-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(243,117,75,.3);
    background: #ff8a62;
}

.ak-svc-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 15px 22px;
    border: 1px solid var(--ak-line);
    border-radius: 100px;
    color: var(--ak-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    transition: .3s ease;
}

.ak-svc-btn-outline:hover {
    background: var(--ak-offwhite);
    border-color: var(--ak-green);
}




/* =========================================================
   BACKGROUND
========================================================= */

.services-hero-image {
    position: absolute;
    inset: 0;
    z-index: -3;

    background-image:
        url("https://images.unsplash.com/photo-1609840114035-3c981b782dfe?auto=format&fit=crop&w=2400&q=90");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1.04);

    animation:
        heroImageReveal 1.2s ease forwards,
        heroImageAmbient 16s ease-in-out 1.2s infinite alternate;

    will-change: transform;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.services-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(233,245,243,.96) 0%,
            rgba(233,245,243,.88) 30%,
            rgba(233,245,243,.35) 57%,
            rgba(233,245,243,.04) 100%
        );

    pointer-events: none;
}


/* =========================================================
   MAIN HERO INNER
========================================================= */

.services-hero-inner {
    width: min(1440px, 92%);
    min-height: calc(100vh - 200px);
    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(400px, .9fr)
        minmax(500px, 1.1fr);

    align-items: center;
    gap: 60px;

    padding: 55px 0 145px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.services-hero-content {
    max-width: 560px;

    animation:
        heroContentReveal 1s
        .2s
        cubic-bezier(.2,.8,.2,1)
        forwards;

    opacity: 0;
}


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

.services-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;

    color: #009DA5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.services-hero-eyebrow span {
    width: 32px;
    height: 2px;
    background: #F3754B;
    border-radius: 20px;
}


/* =========================================================
   HERO TITLE
========================================================= */

.services-hero-content h1 {
    margin: 0;

    color: #183B3D;
    font-family: var(--font-heading);

    font-size: clamp(48px, 5.2vw, 76px);
    font-weight: 700;
    line-height: .94;
    letter-spacing: -3.5px;
}

.services-hero-content h1 em {
    display: block;
    color: #009DA5;
    font-style: normal;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.services-hero-content p {
    max-width: 470px;
    margin: 25px 0 30px;

    color: #53696A;
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.services-hero-actions {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}

.services-hero-content .hero-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 15px 22px;

    background: #F3754B;
    color: #fff;

    border-radius: 100px;

    font-size: 11px;
    font-weight: 800;

    transition: .3s ease;
}

.services-hero-content .hero-btn-primary span {
    font-size: 16px;
}

.services-hero-content .hero-btn-primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(243,117,75,.25);
}

.services-hero-content .hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 21px;

    background: rgba(255,255,255,.78);

    border:
        1px solid rgba(0,157,165,.18);

    color: #009DA5;

    border-radius: 100px;

    font-size: 11px;
    font-weight: 800;

    transition: .3s ease;
}

.services-hero-content .hero-btn-secondary:hover {
    background: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,80,80,.08);
}


/* =========================================================
   MINI TRUST
========================================================= */

.hero-mini-trust {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;

    color: #53696A;
    font-size: 10px;
}

.hero-mini-trust strong {
    color: #183B3D;
}

.trust-check {
    width: 22px;
    height: 22px;

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

    background: #009DA5;
    color: #fff;

    border-radius: 50%;

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.services-hero-visual {
    position: relative;

    width: 100%;
    height: 590px;

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

    animation:
        heroVisualReveal 1.1s
        .15s
        cubic-bezier(.2,.8,.2,1)
        forwards;

    opacity: 0;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.hero-image-frame {
    width: min(650px, 100%);
    height: 520px;

    border-radius: 38px;

    background-image:
        url("https://images.unsplash.com/photo-1609840114035-3c981b782dfe?auto=format&fit=crop&w=1800&q=90");

    background-size: cover;
    background-position: center;

    box-shadow:
        0 35px 80px rgba(0,70,70,.18);

    border:
        8px solid rgba(255,255,255,.85);

    position: relative;
    overflow: hidden;
}


/* =========================================================
   IMAGE GRADIENT
========================================================= */

.hero-image-frame::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0,80,80,.18) 100%
        );
}


/* =========================================================
   FLOATING CARD
========================================================= */

.hero-floating-card {
    position: absolute;

    left: 10px;
    bottom: 55px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 17px 22px;

    background: rgba(255,255,255,.96);

    border:
        1px solid rgba(255,255,255,.9);

    border-radius: 17px;

    box-shadow:
        0 20px 50px rgba(0,70,70,.15);

    backdrop-filter: blur(15px);

    animation:
        floatingCard 1s
        .8s
        ease
        forwards,

        floatingCardFloat 4s
        1.8s
        ease-in-out
        infinite;

    opacity: 0;
}

.floating-icon {
    width: 34px;
    height: 34px;

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

    background: #009DA5;
    color: white;

    border-radius: 50%;

    font-size: 14px;
    font-weight: 800;
}

.hero-floating-card strong {
    display: block;

    color: #183B3D;
    font-size: 13px;
}

.hero-floating-card span {
    display: block;

    margin-top: 3px;

    color: #6A7B7B;
    font-size: 9px;
}


/* =========================================================
   TRUST BAR
========================================================= */

.services-hero-bottom {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    min-height: 105px;

    display: grid;

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

    background: #E9F5F3;

    border-top:
        1px solid rgba(0,157,165,.16);

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

    z-index: 20;
}


/* =========================================================
   TRUST ITEMS
========================================================= */

.trust-bento-item {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 40px;

    border-right:
        1px solid rgba(0,157,165,.15);

    transition:
        background .3s ease,
        transform .3s ease;

    animation:
        trustItemReveal .8s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.trust-bento-item:nth-child(1) {
    animation-delay: .2s;
}

.trust-bento-item:nth-child(2) {
    animation-delay: .35s;
}

.trust-bento-item:nth-child(3) {
    animation-delay: .5s;
}

.trust-bento-item:hover {
    background: rgba(255,255,255,.4);
    transform: translateY(-3px);
}


/* =========================================================
   TRUST NUMBERS
========================================================= */

.trust-bento-item strong {
    color: #009DA5;

    font-size: 31px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -1px;

    animation:
        trustNumberFloat 3.8s
        ease-in-out
        1.2s
        infinite;
}

.trust-bento-item span {
    margin-top: 8px;

    color: #183B3D;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.6px;
}


/* =========================================================
   LOCATION
========================================================= */

.trust-bento-location {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;
    padding: 20px 30px;

    animation:
        trustItemReveal .8s
        .65s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.trust-bento-location strong {
    color: #F3754B;

    font-size: 21px;
    font-weight: 800;
}

.trust-bento-location span {
    padding-left: 13px;

    border-left:
        1px solid rgba(0,157,165,.22);

    color: #183B3D;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* =========================================================
   REMOVE ONLY DUPLICATE TOP-LEFT HERO LINKS
========================================================= */



.services-hero > .services-hero-actions {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.services-hero > a.hero-btn-primary,
.services-hero > a.hero-btn-secondary,
.services-hero > .hero-btn-primary,
.services-hero > .hero-btn-secondary {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
   HERO ANIMATIONS
========================================================= */

@keyframes heroImageReveal {
    from {
        opacity: 0;
        transform: scale(1.08);
    }

    to {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes heroImageAmbient {
    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.075);
    }
}

@keyframes heroContentReveal {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroVisualReveal {
    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floatingCard {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatingCardFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


/* =========================================================
   TRUST ANIMATIONS
========================================================= */

@keyframes trustItemReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes trustNumberFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}


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

@media (max-width: 1000px) {

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

        padding:
            60px 0 160px;

        gap: 40px;
    }

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

    .services-hero-visual {
        height: 450px;
    }

    .hero-image-frame {
        height: 410px;
    }

    .trust-bento-item {
        padding: 18px 24px;
    }
}


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

@media (max-width: 600px) {

    .services-hero {
        min-height: 820px;
    }

    .services-hero-image {
        background-position: 65% center;
    }

    .services-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(233,245,243,.94) 0%,
                rgba(233,245,243,.78) 38%,
                rgba(233,245,243,.20) 75%,
                rgba(233,245,243,.10) 100%
            );
    }

    .services-hero-inner {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 25px;

        padding:
            45px 20px 190px;
    }

    .services-hero-content h1 {
        font-size: 46px;
        letter-spacing: -2.5px;
    }

    .services-hero-content p {
        font-size: 12px;
        max-width: 340px;
    }

    .services-hero-actions {
        gap: 8px;
    }

    .services-hero-content .hero-btn-primary,
    .services-hero-content .hero-btn-secondary {
        padding: 13px 17px;
        font-size: 10px;
    }

    .services-hero-visual {
        height: 300px;
        margin-top: 5px;
    }

    .hero-image-frame {
        width: 100%;
        height: 290px;

        border-radius: 25px;
        border-width: 5px;
    }

    .hero-floating-card {
        left: 8px;
        bottom: 5px;

        padding: 13px 16px;

        border-radius: 14px;
    }

    .floating-icon {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .hero-floating-card strong {
        font-size: 11px;
    }

    .hero-floating-card span {
        font-size: 8px;
    }


    /* =====================================================
       TRUST BAR
    ===================================================== */

    .services-hero-bottom {
        grid-template-columns: 1fr 1fr;
        min-height: 130px;
    }

    .trust-bento-item {
        min-height: 65px;
        padding: 13px 18px;
    }

    .trust-bento-item:nth-child(2) {
        border-right: none;
    }

    .trust-bento-item:nth-child(3),
    .trust-bento-location {
        border-top:
            1px solid rgba(0,157,165,.14);
    }

    .trust-bento-item strong {
        font-size: 22px;
    }

    .trust-bento-item span {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .trust-bento-location {
        justify-content: flex-start;
        padding: 13px 18px;
    }

    .trust-bento-location strong {
        font-size: 16px;
    }

    .trust-bento-location span {
        font-size: 7px;
    }
}


/* =========================================================
   TREATMENTS — INTERACTIVE TREATMENT WALL
========================================================= */

.ak-svc-treatments {
    padding: 110px 0 130px;
    background: var(--ak-offwhite);
}

.ak-svc-treatments-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 55px;
}

.ak-svc-treatments-header h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(34px, 4.5vw, 52px);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -1px;
    color: var(--ak-ink);
}

.ak-svc-treatments-header h2 em {
    color: var(--ak-orange);
    font-style: italic;
}

.ak-svc-treatments-header > p {
    margin: 0;
    color: var(--ak-text);
    font-size: 14px;
    line-height: 1.8;
    max-width: 420px;
}


/* =========================================================
   TREATMENT WALL
========================================================= */

.ak-treatment-wall {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    min-height: 650px;
}


/* =========================================================
   LEFT LIST
========================================================= */

.ak-treatment-list {
    border-top: 1px solid var(--ak-line);
}

.ak-treatment-row {
    position: relative;
    min-height: 80px;
    display: grid;
    grid-template-columns: 55px 1fr 45px;
    align-items: center;
    gap: 18px;
    padding: 17px 18px 17px 0;

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

    transition:
        background-color .35s ease,
        padding-left .35s ease,
        transform .35s ease;
}

.ak-treatment-row:hover,
.ak-treatment-row.active {
    background: #ffffff;
    padding-left: 20px;
}

.ak-treatment-number {
    color: var(--ak-muted);
    font-family: Georgia, serif;
    font-size: 13px;
    transition: color .3s ease;
}

.ak-treatment-row:hover .ak-treatment-number,
.ak-treatment-row.active .ak-treatment-number {
    color: var(--ak-orange);
}


.ak-treatment-name small {
    display: block;
    margin-bottom: 5px;

    color: var(--ak-green);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.ak-treatment-name h3 {
    margin: 0;

    color: var(--ak-ink);
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.3px;

    transition: color .3s ease;
}

.ak-treatment-row:hover .ak-treatment-name h3,
.ak-treatment-row.active .ak-treatment-name h3 {
    color: var(--ak-orange);
}


/* =========================================================
   ARROW
========================================================= */

.ak-treatment-arrow {
    width: 38px;
    height: 38px;

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

    border: 1px solid var(--ak-line);
    border-radius: 50%;

    color: var(--ak-ink);
    font-size: 14px;

    transition:
        transform .35s cubic-bezier(.34,1.56,.64,1),
        background-color .3s ease,
        border-color .3s ease,
        color .3s ease;
}

.ak-treatment-row:hover .ak-treatment-arrow,
.ak-treatment-row.active .ak-treatment-arrow {
    background: var(--ak-orange);
    border-color: var(--ak-orange);
    color: #fff;
    transform: translate(3px,-3px);
}


/* =========================================================
   RIGHT PREVIEW
========================================================= */

.ak-treatment-preview {
    position: relative;
    min-height: 650px;

    overflow: hidden;
    border-radius: 24px;

    background: var(--ak-green-dark);

    box-shadow:
        0 25px 60px rgba(16,43,45,.16);

    isolation: isolate;
}


.ak-treatment-preview-image {
    position: absolute;
    inset: 0;

    background-image:
        url("https://images.unsplash.com/photo-1609840114035-3c981b782dfe?auto=format&fit=crop&w=1400&q=85");

    background-size: cover;
    background-position: center;

    transition:
        opacity .35s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.ak-treatment-preview.is-changing .ak-treatment-preview-image {
    opacity: .25;
    transform: scale(1.04);
}


/* =========================================================
   PREVIEW OVERLAY
========================================================= */

.ak-treatment-preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0,45,48,.08) 0%,
            rgba(0,45,48,.18) 35%,
            rgba(0,45,48,.92) 100%
        );
}


/* =========================================================
   PREVIEW CONTENT
========================================================= */

.ak-treatment-preview-content {
    position: absolute;
    left: 38px;
    right: 38px;
    bottom: 42px;

    z-index: 3;
}

.ak-treatment-preview-content > span {
    display: block;
    margin-bottom: 13px;

    color: #A9E8EC;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ak-treatment-preview-content h3 {
    margin: 0;

    color: #fff;
    font-family: Georgia, serif;
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1px;
}

.ak-treatment-preview-content h3 em {
    display: block;

    color: var(--ak-orange);
    font-style: italic;
}

.ak-treatment-preview-content p {
    max-width: 400px;
    margin: 18px 0 22px;

    color: rgba(255,255,255,.75);
    font-size: 12px;
    line-height: 1.7;
}


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

.ak-treatment-preview-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    padding: 13px 18px;

    border-radius: 100px;

    background: #fff;
    color: var(--ak-ink);

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

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

.ak-treatment-preview-button:hover {
    transform: translateY(-3px);
    background: var(--ak-orange);
    color: #fff;
}


/* =========================================================
   PREVIEW INDEX
========================================================= */

.ak-treatment-preview-index {
    position: absolute;
    top: 25px;
    right: 27px;

    z-index: 3;

    display: flex;
    align-items: baseline;
    gap: 5px;

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

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ak-treatment-preview-index span:first-child {
    color: #fff;
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -1px;
}


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

@media (max-width: 900px) {

    .ak-svc-treatments-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ak-treatment-wall {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ak-treatment-preview {
        min-height: 500px;
        order: -1;
    }

    .ak-treatment-row {
        min-height: 75px;
    }

}


@media (max-width: 600px) {

    .ak-svc-treatments {
        padding: 80px 0 90px;
    }

    .ak-treatment-wall {
        gap: 18px;
    }

    .ak-treatment-preview {
        min-height: 430px;
        border-radius: 20px;
    }

    .ak-treatment-preview-content {
        left: 24px;
        right: 24px;
        bottom: 28px;
    }

    .ak-treatment-preview-content h3 {
        font-size: 30px;
    }

    .ak-treatment-preview-content p {
        font-size: 11px;
        margin: 14px 0 18px;
    }

    .ak-treatment-row {
        grid-template-columns: 38px 1fr 38px;
        gap: 10px;
        padding-right: 5px;
    }

    .ak-treatment-row:hover,
    .ak-treatment-row.active {
        padding-left: 12px;
    }

    .ak-treatment-name h3 {
        font-size: 17px;
    }

    .ak-treatment-arrow {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

}

/* =====================================================
   THE AKEELA DIFFERENCE
===================================================== */

.ak-difference {
    position: relative;
    padding: 125px 0 135px;
    background: #f7faf9;
    overflow: hidden;
}

.ak-difference-container {
    width: min(1380px, 92%);
    margin: auto;
}


/* HEADER */

.ak-difference-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 80px;
}

.ak-difference-label {
    display: block;
    color: #009da5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.5px;
    margin-bottom: 20px;
}

.ak-difference-title h2 {
    margin: 0;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: clamp(48px, 5.4vw, 78px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -3px;
}

.ak-difference-title h2 em {
    color: #f3754b;
    font-style: italic;
}

.ak-difference-title p {
    max-width: 500px;
    margin: 25px 0 0;
    color: #667778;
    font-size: 14px;
    line-height: 1.8;
}

.ak-difference-years {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    padding-bottom: 5px;
}

.ak-difference-years strong {
    color: #009da5;
    font-family: Georgia, serif;
    font-size: 70px;
    line-height: .8;
    font-weight: 400;
    letter-spacing: -4px;
}

.ak-difference-years span {
    color: #536667;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.7px;
    line-height: 1.6;
}


/* TIMELINE */

.ak-difference-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 90px;
}

.ak-timeline-line {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,157,165,.2);
}

.ak-timeline-item {
    position: relative;
    padding-right: 35px;
    cursor: default;
}

.ak-timeline-dot {
    position: relative;
    width: 15px;
    height: 15px;
    margin-bottom: 25px;
    border: 1px solid #009da5;
    border-radius: 50%;
    background: #f7faf9;
    transition: .3s ease;
}

.ak-timeline-item.active .ak-timeline-dot,
.ak-timeline-item:hover .ak-timeline-dot {
    background: #f3754b;
    border-color: #f3754b;
    transform: scale(1.25);
}

.ak-timeline-year {
    margin-bottom: 18px;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: 24px;
}

.ak-timeline-content span {
    display: block;
    margin-bottom: 7px;
    color: #009da5;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.ak-timeline-content strong {
    display: block;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 400;
}

.ak-timeline-content p {
    max-width: 230px;
    margin: 9px 0 0;
    color: #748182;
    font-size: 11px;
    line-height: 1.7;
}


/* MAIN STORY */

.ak-difference-main {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 600px;
    background: #ffffff;
}

.ak-difference-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 65px;
}

.ak-difference-number {
    color: #f3754b;
    font-family: Georgia, serif;
    font-size: 13px;
    margin-bottom: 30px;
}

.ak-difference-small-label {
    color: #009da5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.ak-difference-copy h3 {
    max-width: 500px;
    margin: 0 0 25px;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: clamp(35px, 3.5vw, 52px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -2px;
}

.ak-difference-copy h3 em {
    color: #f3754b;
    font-style: italic;
}

.ak-difference-copy p {
    max-width: 490px;
    margin: 0 0 14px;
    color: #68797a;
    font-size: 12px;
    line-height: 1.85;
}

.ak-difference-copy p strong {
    color: #173b3d;
}

.ak-difference-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 25px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3754b;
    color: #173b3d;
    font-size: 11px;
    font-weight: 700;
}

.ak-difference-link span {
    color: #f3754b;
    font-size: 15px;
    transition: .3s ease;
}

.ak-difference-link:hover span {
    transform: translate(4px,-4px);
}


/* IMAGE */

.ak-difference-image {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}

.ak-difference-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.ak-difference-image:hover img {
    transform: scale(1.04);
}

.ak-difference-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,45,48,.02),
        rgba(0,45,48,.12) 45%,
        rgba(0,45,48,.78)
    );
}

.ak-difference-image-card {
    position: absolute;
    left: 35px;
    bottom: 35px;
    padding: 20px 25px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
}

.ak-difference-image-card span,
.ak-difference-image-card small {
    display: block;
    color: #536667;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.ak-difference-image-card strong {
    display: block;
    margin: 5px 0;
    color: #009da5;
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1;
}

.ak-difference-image-tag {
    position: absolute;
    top: 30px;
    right: 30px;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.4);
    color: white;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.6;
}


/* FOUR POINTS */

.ak-difference-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 1px;
    background: rgba(0,157,165,.16);
}

.ak-difference-point {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 25px;
    padding: 42px;
    background: #ffffff;
    transition: .35s ease;
}

.ak-difference-point:hover {
    background: #edf8f7;
}

.ak-difference-point > span {
    color: #f3754b;
    font-family: Georgia, serif;
    font-size: 13px;
}

.ak-difference-point small {
    display: block;
    margin-bottom: 12px;
    color: #009da5;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.ak-difference-point h4 {
    margin: 0 0 12px;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 400;
}

.ak-difference-point h4 em {
    color: #f3754b;
    font-style: italic;
}

.ak-difference-point p {
    max-width: 430px;
    margin: 0;
    color: #6e7e7f;
    font-size: 11px;
    line-height: 1.75;
}


/* CLOSING */

.ak-difference-closing {
    text-align: center;
    padding-top: 100px;
}

.ak-closing-line {
    width: 45px;
    height: 1px;
    margin: 0 auto 30px;
    background: #f3754b;
}

.ak-difference-closing h3 {
    margin: 0;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: clamp(28px, 3vw, 43px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -1px;
}

.ak-difference-closing h3 em {
    color: #009da5;
    font-style: italic;
}

.ak-difference-closing > span {
    display: block;
    margin-top: 25px;
    color: #809091;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}


/* MOBILE */

@media (max-width: 850px) {

    .ak-difference {
        padding: 85px 0 90px;
    }

    .ak-difference-header {
        display: block;
        margin-bottom: 60px;
    }

    .ak-difference-years {
        margin-top: 40px;
    }

    .ak-difference-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 45px 20px;
    }

    .ak-timeline-line {
        display: none;
    }

    .ak-difference-main {
        grid-template-columns: 1fr;
    }

    .ak-difference-copy {
        padding: 45px 30px;
    }

    .ak-difference-image {
        min-height: 480px;
    }

    .ak-difference-points {
        grid-template-columns: 1fr;
    }

    .ak-difference-point {
        padding: 35px 28px;
    }

    .ak-difference-closing {
        padding-top: 75px;
    }

}

@media (max-width: 500px) {

    .ak-difference-title h2 {
        font-size: 46px;
    }

    .ak-difference-years strong {
        font-size: 58px;
    }

    .ak-difference-timeline {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .ak-difference-image {
        min-height: 400px;
    }

    .ak-difference-copy h3 {
        font-size: 38px;
    }

}
/* =========================================================
   FINAL CTA
   UNCHANGED
========================================================= */

.ak-svc-final {
    position: relative;

    min-height: 460px;

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

    overflow: hidden;

    background:
        var(--ak-green-dark);

    color: #fff;
}

.ak-svc-final-bg {
    position: absolute;
    inset: -20px;

    background-image:
        url("https://images.unsplash.com/photo-1629909613654-28e377c37b09?auto=format&fit=crop&w=2200&q=85");

    background-size: cover;
    background-position: center;

    animation:
        akSvcZoom 18s ease-in-out infinite alternate;
}

@keyframes akSvcZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

.ak-svc-final-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,58,61,.93),
            rgba(0,58,61,.74)
        );
}

.ak-svc-final-content {
    position: relative;
    z-index: 2;

    width: min(760px, calc(100% - 50px));

    text-align: center;
}

.ak-svc-final-content > span {
    display: block;

    margin-bottom: 18px;

    color: var(--ak-orange);

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

    letter-spacing: 3px;
}

.ak-svc-final-content h2 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: clamp(36px, 5.5vw, 56px);

    line-height: .98;

    font-weight: 400;
}

.ak-svc-final-content h2 em {
    color: var(--ak-orange);
    font-style: italic;
}

.ak-svc-final-content > p {
    max-width: 480px;

    margin: 22px auto 30px;

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

    font-size: 13px;
    line-height: 1.8;
}

.ak-svc-final-content > div {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.ak-svc-final-secondary {
    display: inline-flex;
    align-items: center;

    padding: 15px 22px;

    border:
        1px solid rgba(255,255,255,.35);

    border-radius: 100px;

    color: #fff;

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

    letter-spacing: .8px;

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

.ak-svc-final-secondary:hover {
    background: #fff;

    color: var(--ak-green-dark);

    transform:
        translateY(-3px);
}

@media (max-width: 600px) {

    .ak-svc-final-content > div {
        flex-direction: column;
    }
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.ak-bento-tile.ak-armed,
.ak-svc-why-row.ak-armed,
.ak-svc-hero-copy.ak-armed,
.ak-svc-final-content.ak-armed {
    opacity: 0;

    transform:
        translateY(26px);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.16,1,.3,1);
}

.ak-bento-tile.ak-armed.is-visible,
.ak-svc-why-row.ak-armed.is-visible,
.ak-svc-hero-copy.ak-armed.is-visible,
.ak-svc-final-content.ak-armed.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}

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

    .ak-bento-tile.ak-armed,
    .ak-svc-why-row.ak-armed,
    .ak-svc-hero-copy.ak-armed,
    .ak-svc-final-content.ak-armed {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ak-svc-final-bg,
    .services-hero-image,
    .hero-floating-card,
    .trust-bento-item strong {
        animation: none;
    }
}


/* =========================================================
   APPOINTMENT POPUP
========================================================= */

.ak-svc-popup {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 9999;

    width: 350px;
    max-width:
        calc(100vw - 32px);

    padding:
        25px 25px 23px;

    background:
        rgba(255,255,255,.97);

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

    border-radius: 22px;

    box-shadow:
        0 25px 70px rgba(16,43,45,.2),
        0 5px 20px rgba(16,43,45,.08);

    backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(30px)
        scale(.96);

    transition:
        opacity .45s ease,
        visibility .45s ease,
        transform .45s cubic-bezier(.2,.8,.2,1);
}

.ak-svc-popup.ak-svc-popup-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

.ak-svc-popup-accent {
    position: absolute;

    top: 0;
    left: 24px;

    width: 42px;
    height: 3px;

    background:
        var(--ak-orange);

    border-radius:
        0 0 5px 5px;
}

.ak-svc-popup-close {
    position: absolute;

    top: 13px;
    right: 14px;

    width: 28px;
    height: 28px;

    border: 0;
    border-radius: 50%;

    background:
        var(--ak-offwhite);

    color:
        var(--ak-ink);

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

    cursor: pointer;

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

.ak-svc-popup-close:hover {
    transform:
        rotate(90deg);

    background:
        var(--ak-green);

    color:
        #fff;
}

.ak-svc-popup-kicker {
    display: block;

    margin-bottom: 10px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .17em;

    color:
        var(--ak-green);
}

.ak-svc-popup h3 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: 27px;
    font-weight: 400;

    line-height: 1.05;
    letter-spacing: -.5px;

    color:
        var(--ak-ink);
}

.ak-svc-popup h3 em {
    font-style: italic;

    color:
        var(--ak-orange);
}

.ak-svc-popup > p {
    margin:
        11px 0 17px;

    font-size: 12px;
    line-height: 1.5;

    color:
        var(--ak-muted);
}

.ak-svc-popup-actions {
    display: flex;
    gap: 8px;
}

.ak-svc-popup-call,
.ak-svc-popup-wa {
    min-height: 40px;

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

    border-radius: 9px;

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

    letter-spacing: .04em;

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

.ak-svc-popup-call {
    flex: 1;
    gap: 8px;

    background:
        var(--ak-green-dark);

    color:
        #fff;
}

.ak-svc-popup-call:hover {
    transform:
        translateY(-2px);

    background:
        var(--ak-green);
}

.ak-svc-popup-wa {
    padding: 0 15px;

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

    color:
        var(--ak-ink);
}

.ak-svc-popup-wa:hover {
    transform:
        translateY(-2px);

    background:
        var(--ak-offwhite);
}

@media (max-width: 600px) {

    .ak-svc-popup {
        right: 12px;
        bottom: 12px;

        width:
            calc(100vw - 24px);

        padding: 21px;

        border-radius: 18px;
    }

    .ak-svc-popup h3 {
        font-size: 24px;
    }
}/* =========================================================
   REMOVE ONLY DUPLICATE HERO LINKS
   KEEP MAIN HERO BUTTONS INSIDE CONTENT
========================================================= */

/* Hide hero buttons/links that are outside the main hero content */
.services-hero > .hero-btn-primary,
.services-hero > .hero-btn-secondary,
.services-hero > a.hero-btn-primary,
.services-hero > a.hero-btn-secondary,
.services-hero > .services-hero-actions {
    display: none !important;
}

/* Hide duplicate action wrapper if it is rendered
   before the main hero inner content */
.services-hero > .services-hero-actions,
.services-hero-inner > .services-hero-actions {
    display: none !important;
}

/* IMPORTANT:
   Keep the real buttons inside .services-hero-content */
.services-hero-content .services-hero-actions {
    display: flex !important;
}

.services-hero-content .hero-btn-primary,
.services-hero-content .hero-btn-secondary {
    display: inline-flex !important;
}/* =========================================================
   ONLY: TRUST BAR + GAP BEFORE OUR TREATMENTS
========================================================= */

/* TRUST BAR */
.services-hero-bottom {
    min-height: 118px !important;

    background: rgba(255,255,255,.98) !important;

    border-top: 1px solid rgba(0,157,165,.14) !important;

    box-shadow:
        0 -8px 28px rgba(0,70,70,.07) !important;

    z-index: 50 !important;
}


/* BIGGER NUMBERS */
.trust-bento-item strong {
    color: #009DA5 !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -2px !important;
}


/* SMALL LABELS */
.trust-bento-item span {
    margin-top: 8px !important;
    color: #183B3D !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1.7px !important;
}


/* CHENNAI */
.trust-bento-location strong {
    color: #F3754B !important;
    font-size: 27px !important;
    font-weight: 800 !important;
}


/* =========================================================
   GAP BETWEEN TRUST BAR & OUR TREATMENTS
========================================================= */

.services-hero + #treatments {
    padding-top: 65px !important;
}


/* Fallback if treatments section is not direct sibling */
#treatments {
    padding-top: 65px !important;
}


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

@media (max-width: 600px) {

    .services-hero-bottom {
        min-height: 135px !important;
    }

    .trust-bento-item strong {
        font-size: 29px !important;
    }

    #treatments {
        padding-top: 40px !important;
    }
}/* TRUST BAR → TREATMENTS WHITE GAP */
.services-hero-bottom {
    bottom: 0 !important;
}

#treatments {
    margin-top: 70px !important;
    background: var(--ak-offwhite) !important;
}

.services-hero {
    margin-bottom: 70px !important;
}

/* Keep the gap completely white */
.services-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -70px;
    height: 70px;
    background: #ffffff;
    z-index: 1;
}

.services-hero-bottom {
    z-index: 5 !important;
}/* =====================================================
   WHY AKEELA — SCROLL ANIMATION
===================================================== */

.ak-difference-title,
.ak-difference-years,
.ak-timeline-item,
.ak-difference-copy,
.ak-difference-image,
.ak-difference-point,
.ak-difference-closing {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
}

.ak-difference-title.is-visible,
.ak-difference-years.is-visible,
.ak-timeline-item.is-visible,
.ak-difference-copy.is-visible,
.ak-difference-image.is-visible,
.ak-difference-point.is-visible,
.ak-difference-closing.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* stagger */

.ak-timeline-item:nth-child(2) {
    transition-delay: .05s;
}

.ak-timeline-item:nth-child(3) {
    transition-delay: .15s;
}

.ak-timeline-item:nth-child(4) {
    transition-delay: .25s;
}

.ak-timeline-item:nth-child(5) {
    transition-delay: .35s;
}

.ak-difference-point:nth-child(2) {
    transition-delay: .1s;
}

.ak-difference-point:nth-child(3) {
    transition-delay: .2s;
}

.ak-difference-point:nth-child(4) {
    transition-delay: .3s;
}


/* image reveal */

.ak-difference-image {
    clip-path: inset(0 0 0 12%);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1),
        clip-path 1s cubic-bezier(.22,1,.36,1);
}

.ak-difference-image.is-visible {
    clip-path: inset(0 0 0 0);
}


/* image subtle movement */

.ak-difference-image img {
    transform: scale(1.08);
    transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}

.ak-difference-image.is-visible img {
    transform: scale(1);
}


/* timeline dot animation */

.ak-timeline-item.is-visible .ak-timeline-dot {
    animation: akTimelinePulse 1.2s ease forwards;
}

@keyframes akTimelinePulse {

    0% {
        box-shadow: 0 0 0 0 rgba(243,117,75,0);
    }

    45% {
        box-shadow: 0 0 0 8px rgba(243,117,75,.12);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243,117,75,0);
    }

}


/* closing line */

.ak-closing-line {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .8s ease .2s;
}

.ak-difference-closing.is-visible .ak-closing-line {
    transform: scaleX(1);
}/* =====================================================
   TREATMENT WALL — HOVER FIX
===================================================== */

.ak-treatment-row {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}

.ak-treatment-row::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    background: rgba(0,157,165,.055);
    transition: width .45s cubic-bezier(.22,1,.36,1);
    z-index: -1;
}

.ak-treatment-row:hover::before,
.ak-treatment-row.active::before {
    width: 100%;
}

.ak-treatment-row:hover,
.ak-treatment-row.active {
    background: #ffffff;
}

.ak-treatment-row > * {
    position: relative;
    z-index: 2;
}

.ak-treatment-row:hover .ak-treatment-number,
.ak-treatment-row.active .ak-treatment-number {
    color: #F3754B;
}

.ak-treatment-row:hover .ak-treatment-name h3,
.ak-treatment-row.active .ak-treatment-name h3 {
    color: #F3754B;
}

.ak-treatment-row:hover .ak-treatment-arrow,
.ak-treatment-row.active .ak-treatment-arrow {
    background: #F3754B;
    border-color: #F3754B;
    color: #ffffff;
    transform: translate(4px, -4px);
}

.ak-treatment-preview {
    isolation: isolate;
}

.ak-treatment-preview-image {
    transition:
        opacity .35s ease,
        transform .9s cubic-bezier(.22,1,.36,1);
}

.ak-treatment-preview.is-changing
.ak-treatment-preview-image {
    opacity: .15;
    transform: scale(1.05);
}

/* =========================================================
   FINAL FIX — LEFT SERVICE LIST / RIGHT IMAGE PREVIEW
   ========================================================= */

.ak-svc-treatments .ak-treatment-wall {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    gap: 32px;
    align-items: start;
    min-height: 0;
}

.ak-svc-treatments .ak-treatment-list {
    min-width: 0;
    border-top: 1px solid var(--ak-line);
}

.ak-svc-treatments .ak-treatment-row {
    width: 100%;
    min-height: 88px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 16px;
    padding: 16px 8px 16px 0;
    border: 0;
    border-bottom: 1px solid var(--ak-line);
    background: transparent;
    text-decoration: none;
}

.ak-svc-treatments .ak-treatment-row:hover,
.ak-svc-treatments .ak-treatment-row.active {
    padding-left: 16px;
    background: #ffffff;
}

.ak-svc-treatments .ak-treatment-name {
    min-width: 0;
}

.ak-svc-treatments .ak-treatment-name h3 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 400;
    color: var(--ak-ink);
}

.ak-svc-treatments .ak-treatment-row:hover .ak-treatment-name h3,
.ak-svc-treatments .ak-treatment-row.active .ak-treatment-name h3 {
    color: var(--ak-orange);
}

.ak-svc-treatments .ak-treatment-preview {
    position: sticky;
    top: 105px;
    min-height: 0;
    height: 625px;
    overflow: hidden;
    border-radius: 24px;
}

.ak-svc-treatments .ak-treatment-preview-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity .35s ease, transform .7s ease;
}

.ak-svc-treatments .ak-treatment-preview.is-changing .ak-treatment-preview-image {
    opacity: .25;
    transform: scale(1.035);
}

.ak-svc-treatments .ak-treatment-preview-content {
    left: 34px;
    right: 34px;
    bottom: 34px;
}

.ak-svc-treatments .ak-treatment-preview-content h3 {
    font-size: clamp(30px, 3.2vw, 42px);
}

@media (max-width: 900px) {
    .ak-svc-treatments .ak-treatment-wall {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ak-svc-treatments .ak-treatment-preview {
        position: relative;
        top: auto;
        height: 500px;
        order: -1;
    }
}

@media (max-width: 600px) {
    .ak-svc-treatments .ak-treatment-wall {
        gap: 16px;
    }

    .ak-svc-treatments .ak-treatment-row {
        grid-template-columns: 36px minmax(0, 1fr) 34px;
        min-height: 72px;
        gap: 10px;
        padding: 14px 4px 14px 0;
    }

    .ak-svc-treatments .ak-treatment-name h3 {
        font-size: 16px;
    }

    .ak-svc-treatments .ak-treatment-preview {
        height: 430px;
        border-radius: 20px;
    }

    .ak-svc-treatments .ak-treatment-preview-content {
        left: 22px;
        right: 22px;
        bottom: 24px;
    }

    .ak-svc-treatments .ak-treatment-preview-content h3 {
        font-size: 29px;
    }
}

/* =========================================================
   SERVICE WALL — FINAL STRUCTURE FIX
   LEFT = SERVICE LIST
   RIGHT = IMAGE PREVIEW
   ========================================================= */

.ak-svc-treatments .ak-treatment-wall {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr) !important;
    align-items: start !important;
    gap: 32px !important;
    min-height: 0 !important;
}

.ak-svc-treatments .ak-treatment-list {
    display: block !important;
    width: 100% !important;
}

.ak-svc-treatments .ak-treatment-preview {
    display: block !important;
    width: 100% !important;
    height: 625px !important;
    min-height: 0 !important;
    position: sticky !important;
    top: 105px !important;
}

@media (max-width: 900px) {
    .ak-svc-treatments .ak-treatment-wall {
        grid-template-columns: 1fr !important;
    }

    .ak-svc-treatments .ak-treatment-preview {
        position: relative !important;
        top: auto !important;
        height: 500px !important;
    }
}

@media (max-width: 600px) {
    .ak-svc-treatments .ak-treatment-preview {
        height: 430px !important;
    }
}

/* =========================================================
   AKEELA DENTAL CARE — SERVICES PAGE
   LIGHT THEME / PREMIUM BENTO
========================================================= */

:root {
    --ak-green: #009DA5;
    --ak-green-dark: #007F86;
    --ak-orange: #F3754B;
    --ak-ink: #173B3D;
    --ak-text: #496466;
    --ak-muted: #789092;
    --ak-line: #DCEBEC;
    --ak-white: #FFFFFF;
    --ak-offwhite: #F7FAFA;
}

* {
    box-sizing: border-box;
}

.ak-svc-page {
    background: var(--ak-white);
    color: var(--ak-ink);
    font-family: "DM Sans", "Manrope", sans-serif;
    overflow-x: hidden;
}

.ak-svc-page img {
    max-width: 100%;
    display: block;
}

.ak-svc-page a {
    text-decoration: none;
    color: inherit;
}

.akp-container {
    width: min(1240px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.ak-about-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--ak-green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.ak-about-section-label::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--ak-orange);
    flex-shrink: 0;
}


/* =========================================================
   BUTTONS
========================================================= */

.ak-svc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 15px 22px;
    border-radius: 100px;
    background: var(--ak-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .25s ease;
}

.ak-svc-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(243,117,75,.3);
    background: #ff8a62;
}

.ak-svc-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 15px 22px;
    border: 1px solid var(--ak-line);
    border-radius: 100px;
    color: var(--ak-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    transition: .3s ease;
}

.ak-svc-btn-outline:hover {
    background: var(--ak-offwhite);
    border-color: var(--ak-green);
}




/* =========================================================
   BACKGROUND
========================================================= */

.services-hero-image {
    position: absolute;
    inset: 0;
    z-index: -3;

    background-image:
        url("https://images.unsplash.com/photo-1609840114035-3c981b782dfe?auto=format&fit=crop&w=2400&q=90");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1.04);

    animation:
        heroImageReveal 1.2s ease forwards,
        heroImageAmbient 16s ease-in-out 1.2s infinite alternate;

    will-change: transform;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.services-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(233,245,243,.96) 0%,
            rgba(233,245,243,.88) 30%,
            rgba(233,245,243,.35) 57%,
            rgba(233,245,243,.04) 100%
        );

    pointer-events: none;
}


/* =========================================================
   MAIN HERO INNER
========================================================= */

.services-hero-inner {
    width: min(1440px, 92%);
    min-height: calc(100vh - 200px);
    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(400px, .9fr)
        minmax(500px, 1.1fr);

    align-items: center;
    gap: 60px;

    padding: 55px 0 145px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.services-hero-content {
    max-width: 560px;

    animation:
        heroContentReveal 1s
        .2s
        cubic-bezier(.2,.8,.2,1)
        forwards;

    opacity: 0;
}


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

.services-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;

    color: #009DA5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.services-hero-eyebrow span {
    width: 32px;
    height: 2px;
    background: #F3754B;
    border-radius: 20px;
}


/* =========================================================
   HERO TITLE
========================================================= */

.services-hero-content h1 {
    margin: 0;

    color: #183B3D;
    font-family: var(--font-heading);

    font-size: clamp(48px, 5.2vw, 76px);
    font-weight: 700;
    line-height: .94;
    letter-spacing: -3.5px;
}

.services-hero-content h1 em {
    display: block;
    color: #009DA5;
    font-style: normal;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.services-hero-content p {
    max-width: 470px;
    margin: 25px 0 30px;

    color: #53696A;
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.services-hero-actions {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}

.services-hero-content .hero-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 15px 22px;

    background: #F3754B;
    color: #fff;

    border-radius: 100px;

    font-size: 11px;
    font-weight: 800;

    transition: .3s ease;
}

.services-hero-content .hero-btn-primary span {
    font-size: 16px;
}

.services-hero-content .hero-btn-primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(243,117,75,.25);
}

.services-hero-content .hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 21px;

    background: rgba(255,255,255,.78);

    border:
        1px solid rgba(0,157,165,.18);

    color: #009DA5;

    border-radius: 100px;

    font-size: 11px;
    font-weight: 800;

    transition: .3s ease;
}

.services-hero-content .hero-btn-secondary:hover {
    background: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,80,80,.08);
}


/* =========================================================
   MINI TRUST
========================================================= */

.hero-mini-trust {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;

    color: #53696A;
    font-size: 10px;
}

.hero-mini-trust strong {
    color: #183B3D;
}

.trust-check {
    width: 22px;
    height: 22px;

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

    background: #009DA5;
    color: #fff;

    border-radius: 50%;

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.services-hero-visual {
    position: relative;

    width: 100%;
    height: 590px;

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

    animation:
        heroVisualReveal 1.1s
        .15s
        cubic-bezier(.2,.8,.2,1)
        forwards;

    opacity: 0;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.hero-image-frame {
    width: min(650px, 100%);
    height: 520px;

    border-radius: 38px;

    background-image:
        url("https://images.unsplash.com/photo-1609840114035-3c981b782dfe?auto=format&fit=crop&w=1800&q=90");

    background-size: cover;
    background-position: center;

    box-shadow:
        0 35px 80px rgba(0,70,70,.18);

    border:
        8px solid rgba(255,255,255,.85);

    position: relative;
    overflow: hidden;
}


/* =========================================================
   IMAGE GRADIENT
========================================================= */

.hero-image-frame::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0,80,80,.18) 100%
        );
}


/* =========================================================
   FLOATING CARD
========================================================= */

.hero-floating-card {
    position: absolute;

    left: 10px;
    bottom: 55px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 17px 22px;

    background: rgba(255,255,255,.96);

    border:
        1px solid rgba(255,255,255,.9);

    border-radius: 17px;

    box-shadow:
        0 20px 50px rgba(0,70,70,.15);

    backdrop-filter: blur(15px);

    animation:
        floatingCard 1s
        .8s
        ease
        forwards,

        floatingCardFloat 4s
        1.8s
        ease-in-out
        infinite;

    opacity: 0;
}

.floating-icon {
    width: 34px;
    height: 34px;

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

    background: #009DA5;
    color: white;

    border-radius: 50%;

    font-size: 14px;
    font-weight: 800;
}

.hero-floating-card strong {
    display: block;

    color: #183B3D;
    font-size: 13px;
}

.hero-floating-card span {
    display: block;

    margin-top: 3px;

    color: #6A7B7B;
    font-size: 9px;
}


/* =========================================================
   TRUST BAR
========================================================= */

.services-hero-bottom {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    min-height: 105px;

    display: grid;

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

    background: #E9F5F3;

    border-top:
        1px solid rgba(0,157,165,.16);

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

    z-index: 20;
}


/* =========================================================
   TRUST ITEMS
========================================================= */

.trust-bento-item {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 40px;

    border-right:
        1px solid rgba(0,157,165,.15);

    transition:
        background .3s ease,
        transform .3s ease;

    animation:
        trustItemReveal .8s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.trust-bento-item:nth-child(1) {
    animation-delay: .2s;
}

.trust-bento-item:nth-child(2) {
    animation-delay: .35s;
}

.trust-bento-item:nth-child(3) {
    animation-delay: .5s;
}

.trust-bento-item:hover {
    background: rgba(255,255,255,.4);
    transform: translateY(-3px);
}


/* =========================================================
   TRUST NUMBERS
========================================================= */

.trust-bento-item strong {
    color: #009DA5;

    font-size: 31px;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -1px;

    animation:
        trustNumberFloat 3.8s
        ease-in-out
        1.2s
        infinite;
}

.trust-bento-item span {
    margin-top: 8px;

    color: #183B3D;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.6px;
}


/* =========================================================
   LOCATION
========================================================= */

.trust-bento-location {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;
    padding: 20px 30px;

    animation:
        trustItemReveal .8s
        .65s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.trust-bento-location strong {
    color: #F3754B;

    font-size: 21px;
    font-weight: 800;
}

.trust-bento-location span {
    padding-left: 13px;

    border-left:
        1px solid rgba(0,157,165,.22);

    color: #183B3D;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* =========================================================
   REMOVE ONLY DUPLICATE TOP-LEFT HERO LINKS
========================================================= */



.services-hero > .services-hero-actions {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.services-hero > a.hero-btn-primary,
.services-hero > a.hero-btn-secondary,
.services-hero > .hero-btn-primary,
.services-hero > .hero-btn-secondary {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
   HERO ANIMATIONS
========================================================= */

@keyframes heroImageReveal {
    from {
        opacity: 0;
        transform: scale(1.08);
    }

    to {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes heroImageAmbient {
    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.075);
    }
}

@keyframes heroContentReveal {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroVisualReveal {
    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floatingCard {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatingCardFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


/* =========================================================
   TRUST ANIMATIONS
========================================================= */

@keyframes trustItemReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes trustNumberFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}


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

@media (max-width: 1000px) {

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

        padding:
            60px 0 160px;

        gap: 40px;
    }

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

    .services-hero-visual {
        height: 450px;
    }

    .hero-image-frame {
        height: 410px;
    }

    .trust-bento-item {
        padding: 18px 24px;
    }
}


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

@media (max-width: 600px) {

    .services-hero {
        min-height: 820px;
    }

    .services-hero-image {
        background-position: 65% center;
    }

    .services-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(233,245,243,.94) 0%,
                rgba(233,245,243,.78) 38%,
                rgba(233,245,243,.20) 75%,
                rgba(233,245,243,.10) 100%
            );
    }

    .services-hero-inner {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 25px;

        padding:
            45px 20px 190px;
    }

    .services-hero-content h1 {
        font-size: 46px;
        letter-spacing: -2.5px;
    }

    .services-hero-content p {
        font-size: 12px;
        max-width: 340px;
    }

    .services-hero-actions {
        gap: 8px;
    }

    .services-hero-content .hero-btn-primary,
    .services-hero-content .hero-btn-secondary {
        padding: 13px 17px;
        font-size: 10px;
    }

    .services-hero-visual {
        height: 300px;
        margin-top: 5px;
    }

    .hero-image-frame {
        width: 100%;
        height: 290px;

        border-radius: 25px;
        border-width: 5px;
    }

    .hero-floating-card {
        left: 8px;
        bottom: 5px;

        padding: 13px 16px;

        border-radius: 14px;
    }

    .floating-icon {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .hero-floating-card strong {
        font-size: 11px;
    }

    .hero-floating-card span {
        font-size: 8px;
    }


    /* =====================================================
       TRUST BAR
    ===================================================== */

    .services-hero-bottom {
        grid-template-columns: 1fr 1fr;
        min-height: 130px;
    }

    .trust-bento-item {
        min-height: 65px;
        padding: 13px 18px;
    }

    .trust-bento-item:nth-child(2) {
        border-right: none;
    }

    .trust-bento-item:nth-child(3),
    .trust-bento-location {
        border-top:
            1px solid rgba(0,157,165,.14);
    }

    .trust-bento-item strong {
        font-size: 22px;
    }

    .trust-bento-item span {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .trust-bento-location {
        justify-content: flex-start;
        padding: 13px 18px;
    }

    .trust-bento-location strong {
        font-size: 16px;
    }

    .trust-bento-location span {
        font-size: 7px;
    }
}


/* =========================================================
   TREATMENTS — INTERACTIVE TREATMENT WALL
========================================================= */

.ak-svc-treatments {
    padding: 110px 0 130px;
    background: var(--ak-offwhite);
}

.ak-svc-treatments-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 55px;
}

.ak-svc-treatments-header h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(34px, 4.5vw, 52px);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -1px;
    color: var(--ak-ink);
}

.ak-svc-treatments-header h2 em {
    color: var(--ak-orange);
    font-style: italic;
}

.ak-svc-treatments-header > p {
    margin: 0;
    color: var(--ak-text);
    font-size: 14px;
    line-height: 1.8;
    max-width: 420px;
}


/* =========================================================
   TREATMENT WALL
========================================================= */

.ak-treatment-wall {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    min-height: 650px;
}


/* =========================================================
   LEFT LIST
========================================================= */

.ak-treatment-list {
    border-top: 1px solid var(--ak-line);
}

.ak-treatment-row {
    position: relative;
    min-height: 80px;
    display: grid;
    grid-template-columns: 55px 1fr 45px;
    align-items: center;
    gap: 18px;
    padding: 17px 18px 17px 0;

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

    transition:
        background-color .35s ease,
        padding-left .35s ease,
        transform .35s ease;
}

.ak-treatment-row:hover,
.ak-treatment-row.active {
    background: #ffffff;
    padding-left: 20px;
}

.ak-treatment-number {
    color: var(--ak-muted);
    font-family: Georgia, serif;
    font-size: 13px;
    transition: color .3s ease;
}

.ak-treatment-row:hover .ak-treatment-number,
.ak-treatment-row.active .ak-treatment-number {
    color: var(--ak-orange);
}


.ak-treatment-name small {
    display: block;
    margin-bottom: 5px;

    color: var(--ak-green);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.ak-treatment-name h3 {
    margin: 0;

    color: var(--ak-ink);
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.3px;

    transition: color .3s ease;
}

.ak-treatment-row:hover .ak-treatment-name h3,
.ak-treatment-row.active .ak-treatment-name h3 {
    color: var(--ak-orange);
}


/* =========================================================
   ARROW
========================================================= */

.ak-treatment-arrow {
    width: 38px;
    height: 38px;

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

    border: 1px solid var(--ak-line);
    border-radius: 50%;

    color: var(--ak-ink);
    font-size: 14px;

    transition:
        transform .35s cubic-bezier(.34,1.56,.64,1),
        background-color .3s ease,
        border-color .3s ease,
        color .3s ease;
}

.ak-treatment-row:hover .ak-treatment-arrow,
.ak-treatment-row.active .ak-treatment-arrow {
    background: var(--ak-orange);
    border-color: var(--ak-orange);
    color: #fff;
    transform: translate(3px,-3px);
}


/* =========================================================
   RIGHT PREVIEW
========================================================= */

.ak-treatment-preview {
    position: relative;
    min-height: 650px;

    overflow: hidden;
    border-radius: 24px;

    background: var(--ak-green-dark);

    box-shadow:
        0 25px 60px rgba(16,43,45,.16);

    isolation: isolate;
}


.ak-treatment-preview-image {
    position: absolute;
    inset: 0;

    background-image:
        url("https://images.unsplash.com/photo-1609840114035-3c981b782dfe?auto=format&fit=crop&w=1400&q=85");

    background-size: cover;
    background-position: center;

    transition:
        opacity .35s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.ak-treatment-preview.is-changing .ak-treatment-preview-image {
    opacity: .25;
    transform: scale(1.04);
}


/* =========================================================
   PREVIEW OVERLAY
========================================================= */

.ak-treatment-preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0,45,48,.08) 0%,
            rgba(0,45,48,.18) 35%,
            rgba(0,45,48,.92) 100%
        );
}


/* =========================================================
   PREVIEW CONTENT
========================================================= */

.ak-treatment-preview-content {
    position: absolute;
    left: 38px;
    right: 38px;
    bottom: 42px;

    z-index: 3;
}

.ak-treatment-preview-content > span {
    display: block;
    margin-bottom: 13px;

    color: #A9E8EC;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ak-treatment-preview-content h3 {
    margin: 0;

    color: #fff;
    font-family: Georgia, serif;
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1px;
}

.ak-treatment-preview-content h3 em {
    display: block;

    color: var(--ak-orange);
    font-style: italic;
}

.ak-treatment-preview-content p {
    max-width: 400px;
    margin: 18px 0 22px;

    color: rgba(255,255,255,.75);
    font-size: 12px;
    line-height: 1.7;
}


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

.ak-treatment-preview-button {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    padding: 13px 18px;

    border-radius: 100px;

    background: #fff;
    color: var(--ak-ink);

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

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

.ak-treatment-preview-button:hover {
    transform: translateY(-3px);
    background: var(--ak-orange);
    color: #fff;
}


/* =========================================================
   PREVIEW INDEX
========================================================= */

.ak-treatment-preview-index {
    position: absolute;
    top: 25px;
    right: 27px;

    z-index: 3;

    display: flex;
    align-items: baseline;
    gap: 5px;

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

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ak-treatment-preview-index span:first-child {
    color: #fff;
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -1px;
}


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

@media (max-width: 900px) {

    .ak-svc-treatments-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ak-treatment-wall {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ak-treatment-preview {
        min-height: 500px;
        order: -1;
    }

    .ak-treatment-row {
        min-height: 75px;
    }

}


@media (max-width: 600px) {

    .ak-svc-treatments {
        padding: 80px 0 90px;
    }

    .ak-treatment-wall {
        gap: 18px;
    }

    .ak-treatment-preview {
        min-height: 430px;
        border-radius: 20px;
    }

    .ak-treatment-preview-content {
        left: 24px;
        right: 24px;
        bottom: 28px;
    }

    .ak-treatment-preview-content h3 {
        font-size: 30px;
    }

    .ak-treatment-preview-content p {
        font-size: 11px;
        margin: 14px 0 18px;
    }

    .ak-treatment-row {
        grid-template-columns: 38px 1fr 38px;
        gap: 10px;
        padding-right: 5px;
    }

    .ak-treatment-row:hover,
    .ak-treatment-row.active {
        padding-left: 12px;
    }

    .ak-treatment-name h3 {
        font-size: 17px;
    }

    .ak-treatment-arrow {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

}

/* =====================================================
   THE AKEELA DIFFERENCE
===================================================== */

.ak-difference {
    position: relative;
    padding: 125px 0 135px;
    background: #f7faf9;
    overflow: hidden;
}

.ak-difference-container {
    width: min(1380px, 92%);
    margin: auto;
}


/* HEADER */

.ak-difference-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 80px;
}

.ak-difference-label {
    display: block;
    color: #009da5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.5px;
    margin-bottom: 20px;
}

.ak-difference-title h2 {
    margin: 0;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: clamp(48px, 5.4vw, 78px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -3px;
}

.ak-difference-title h2 em {
    color: #f3754b;
    font-style: italic;
}

.ak-difference-title p {
    max-width: 500px;
    margin: 25px 0 0;
    color: #667778;
    font-size: 14px;
    line-height: 1.8;
}

.ak-difference-years {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    padding-bottom: 5px;
}

.ak-difference-years strong {
    color: #009da5;
    font-family: Georgia, serif;
    font-size: 70px;
    line-height: .8;
    font-weight: 400;
    letter-spacing: -4px;
}

.ak-difference-years span {
    color: #536667;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.7px;
    line-height: 1.6;
}


/* TIMELINE */

.ak-difference-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 90px;
}

.ak-timeline-line {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,157,165,.2);
}

.ak-timeline-item {
    position: relative;
    padding-right: 35px;
    cursor: default;
}

.ak-timeline-dot {
    position: relative;
    width: 15px;
    height: 15px;
    margin-bottom: 25px;
    border: 1px solid #009da5;
    border-radius: 50%;
    background: #f7faf9;
    transition: .3s ease;
}

.ak-timeline-item.active .ak-timeline-dot,
.ak-timeline-item:hover .ak-timeline-dot {
    background: #f3754b;
    border-color: #f3754b;
    transform: scale(1.25);
}

.ak-timeline-year {
    margin-bottom: 18px;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: 24px;
}

.ak-timeline-content span {
    display: block;
    margin-bottom: 7px;
    color: #009da5;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.ak-timeline-content strong {
    display: block;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 400;
}

.ak-timeline-content p {
    max-width: 230px;
    margin: 9px 0 0;
    color: #748182;
    font-size: 11px;
    line-height: 1.7;
}


/* MAIN STORY */

.ak-difference-main {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 600px;
    background: #ffffff;
}

.ak-difference-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 65px;
}

.ak-difference-number {
    color: #f3754b;
    font-family: Georgia, serif;
    font-size: 13px;
    margin-bottom: 30px;
}

.ak-difference-small-label {
    color: #009da5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.ak-difference-copy h3 {
    max-width: 500px;
    margin: 0 0 25px;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: clamp(35px, 3.5vw, 52px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -2px;
}

.ak-difference-copy h3 em {
    color: #f3754b;
    font-style: italic;
}

.ak-difference-copy p {
    max-width: 490px;
    margin: 0 0 14px;
    color: #68797a;
    font-size: 12px;
    line-height: 1.85;
}

.ak-difference-copy p strong {
    color: #173b3d;
}

.ak-difference-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 25px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3754b;
    color: #173b3d;
    font-size: 11px;
    font-weight: 700;
}

.ak-difference-link span {
    color: #f3754b;
    font-size: 15px;
    transition: .3s ease;
}

.ak-difference-link:hover span {
    transform: translate(4px,-4px);
}


/* IMAGE */

.ak-difference-image {
    position: relative;
    min-height: 600px;
    overflow: hidden;
}

.ak-difference-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

.ak-difference-image:hover img {
    transform: scale(1.04);
}

.ak-difference-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,45,48,.02),
        rgba(0,45,48,.12) 45%,
        rgba(0,45,48,.78)
    );
}

.ak-difference-image-card {
    position: absolute;
    left: 35px;
    bottom: 35px;
    padding: 20px 25px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
}

.ak-difference-image-card span,
.ak-difference-image-card small {
    display: block;
    color: #536667;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.ak-difference-image-card strong {
    display: block;
    margin: 5px 0;
    color: #009da5;
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1;
}

.ak-difference-image-tag {
    position: absolute;
    top: 30px;
    right: 30px;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.4);
    color: white;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.6;
}


/* FOUR POINTS */

.ak-difference-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 1px;
    background: rgba(0,157,165,.16);
}

.ak-difference-point {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 25px;
    padding: 42px;
    background: #ffffff;
    transition: .35s ease;
}

.ak-difference-point:hover {
    background: #edf8f7;
}

.ak-difference-point > span {
    color: #f3754b;
    font-family: Georgia, serif;
    font-size: 13px;
}

.ak-difference-point small {
    display: block;
    margin-bottom: 12px;
    color: #009da5;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.ak-difference-point h4 {
    margin: 0 0 12px;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 400;
}

.ak-difference-point h4 em {
    color: #f3754b;
    font-style: italic;
}

.ak-difference-point p {
    max-width: 430px;
    margin: 0;
    color: #6e7e7f;
    font-size: 11px;
    line-height: 1.75;
}


/* CLOSING */

.ak-difference-closing {
    text-align: center;
    padding-top: 100px;
}

.ak-closing-line {
    width: 45px;
    height: 1px;
    margin: 0 auto 30px;
    background: #f3754b;
}

.ak-difference-closing h3 {
    margin: 0;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: clamp(28px, 3vw, 43px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -1px;
}

.ak-difference-closing h3 em {
    color: #009da5;
    font-style: italic;
}

.ak-difference-closing > span {
    display: block;
    margin-top: 25px;
    color: #809091;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}


/* MOBILE */

@media (max-width: 850px) {

    .ak-difference {
        padding: 85px 0 90px;
    }

    .ak-difference-header {
        display: block;
        margin-bottom: 60px;
    }

    .ak-difference-years {
        margin-top: 40px;
    }

    .ak-difference-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 45px 20px;
    }

    .ak-timeline-line {
        display: none;
    }

    .ak-difference-main {
        grid-template-columns: 1fr;
    }

    .ak-difference-copy {
        padding: 45px 30px;
    }

    .ak-difference-image {
        min-height: 480px;
    }

    .ak-difference-points {
        grid-template-columns: 1fr;
    }

    .ak-difference-point {
        padding: 35px 28px;
    }

    .ak-difference-closing {
        padding-top: 75px;
    }

}

@media (max-width: 500px) {

    .ak-difference-title h2 {
        font-size: 46px;
    }

    .ak-difference-years strong {
        font-size: 58px;
    }

    .ak-difference-timeline {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .ak-difference-image {
        min-height: 400px;
    }

    .ak-difference-copy h3 {
        font-size: 38px;
    }

}
/* =========================================================
   FINAL CTA
   UNCHANGED
========================================================= */

.ak-svc-final {
    position: relative;

    min-height: 460px;

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

    overflow: hidden;

    background:
        var(--ak-green-dark);

    color: #fff;
}

.ak-svc-final-bg {
    position: absolute;
    inset: -20px;

    background-image:
        url("https://images.unsplash.com/photo-1629909613654-28e377c37b09?auto=format&fit=crop&w=2200&q=85");

    background-size: cover;
    background-position: center;

    animation:
        akSvcZoom 18s ease-in-out infinite alternate;
}

@keyframes akSvcZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

.ak-svc-final-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,58,61,.93),
            rgba(0,58,61,.74)
        );
}

.ak-svc-final-content {
    position: relative;
    z-index: 2;

    width: min(760px, calc(100% - 50px));

    text-align: center;
}

.ak-svc-final-content > span {
    display: block;

    margin-bottom: 18px;

    color: var(--ak-orange);

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

    letter-spacing: 3px;
}

.ak-svc-final-content h2 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: clamp(36px, 5.5vw, 56px);

    line-height: .98;

    font-weight: 400;
}

.ak-svc-final-content h2 em {
    color: var(--ak-orange);
    font-style: italic;
}

.ak-svc-final-content > p {
    max-width: 480px;

    margin: 22px auto 30px;

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

    font-size: 13px;
    line-height: 1.8;
}

.ak-svc-final-content > div {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.ak-svc-final-secondary {
    display: inline-flex;
    align-items: center;

    padding: 15px 22px;

    border:
        1px solid rgba(255,255,255,.35);

    border-radius: 100px;

    color: #fff;

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

    letter-spacing: .8px;

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

.ak-svc-final-secondary:hover {
    background: #fff;

    color: var(--ak-green-dark);

    transform:
        translateY(-3px);
}

@media (max-width: 600px) {

    .ak-svc-final-content > div {
        flex-direction: column;
    }
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.ak-bento-tile.ak-armed,
.ak-svc-why-row.ak-armed,
.ak-svc-hero-copy.ak-armed,
.ak-svc-final-content.ak-armed {
    opacity: 0;

    transform:
        translateY(26px);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.16,1,.3,1);
}

.ak-bento-tile.ak-armed.is-visible,
.ak-svc-why-row.ak-armed.is-visible,
.ak-svc-hero-copy.ak-armed.is-visible,
.ak-svc-final-content.ak-armed.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}

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

    .ak-bento-tile.ak-armed,
    .ak-svc-why-row.ak-armed,
    .ak-svc-hero-copy.ak-armed,
    .ak-svc-final-content.ak-armed {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ak-svc-final-bg,
    .services-hero-image,
    .hero-floating-card,
    .trust-bento-item strong {
        animation: none;
    }
}


/* =========================================================
   APPOINTMENT POPUP
========================================================= */

.ak-svc-popup {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 9999;

    width: 350px;
    max-width:
        calc(100vw - 32px);

    padding:
        25px 25px 23px;

    background:
        rgba(255,255,255,.97);

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

    border-radius: 22px;

    box-shadow:
        0 25px 70px rgba(16,43,45,.2),
        0 5px 20px rgba(16,43,45,.08);

    backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(30px)
        scale(.96);

    transition:
        opacity .45s ease,
        visibility .45s ease,
        transform .45s cubic-bezier(.2,.8,.2,1);
}

.ak-svc-popup.ak-svc-popup-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

.ak-svc-popup-accent {
    position: absolute;

    top: 0;
    left: 24px;

    width: 42px;
    height: 3px;

    background:
        var(--ak-orange);

    border-radius:
        0 0 5px 5px;
}

.ak-svc-popup-close {
    position: absolute;

    top: 13px;
    right: 14px;

    width: 28px;
    height: 28px;

    border: 0;
    border-radius: 50%;

    background:
        var(--ak-offwhite);

    color:
        var(--ak-ink);

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

    cursor: pointer;

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

.ak-svc-popup-close:hover {
    transform:
        rotate(90deg);

    background:
        var(--ak-green);

    color:
        #fff;
}

.ak-svc-popup-kicker {
    display: block;

    margin-bottom: 10px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .17em;

    color:
        var(--ak-green);
}

.ak-svc-popup h3 {
    margin: 0;

    font-family: Georgia, serif;

    font-size: 27px;
    font-weight: 400;

    line-height: 1.05;
    letter-spacing: -.5px;

    color:
        var(--ak-ink);
}

.ak-svc-popup h3 em {
    font-style: italic;

    color:
        var(--ak-orange);
}

.ak-svc-popup > p {
    margin:
        11px 0 17px;

    font-size: 12px;
    line-height: 1.5;

    color:
        var(--ak-muted);
}

.ak-svc-popup-actions {
    display: flex;
    gap: 8px;
}

.ak-svc-popup-call,
.ak-svc-popup-wa {
    min-height: 40px;

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

    border-radius: 9px;

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

    letter-spacing: .04em;

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

.ak-svc-popup-call {
    flex: 1;
    gap: 8px;

    background:
        var(--ak-green-dark);

    color:
        #fff;
}

.ak-svc-popup-call:hover {
    transform:
        translateY(-2px);

    background:
        var(--ak-green);
}

.ak-svc-popup-wa {
    padding: 0 15px;

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

    color:
        var(--ak-ink);
}

.ak-svc-popup-wa:hover {
    transform:
        translateY(-2px);

    background:
        var(--ak-offwhite);
}

@media (max-width: 600px) {

    .ak-svc-popup {
        right: 12px;
        bottom: 12px;

        width:
            calc(100vw - 24px);

        padding: 21px;

        border-radius: 18px;
    }

    .ak-svc-popup h3 {
        font-size: 24px;
    }
}/* =========================================================
   REMOVE ONLY DUPLICATE HERO LINKS
   KEEP MAIN HERO BUTTONS INSIDE CONTENT
========================================================= */

/* Hide hero buttons/links that are outside the main hero content */
.services-hero > .hero-btn-primary,
.services-hero > .hero-btn-secondary,
.services-hero > a.hero-btn-primary,
.services-hero > a.hero-btn-secondary,
.services-hero > .services-hero-actions {
    display: none !important;
}

/* Hide duplicate action wrapper if it is rendered
   before the main hero inner content */
.services-hero > .services-hero-actions,
.services-hero-inner > .services-hero-actions {
    display: none !important;
}

/* IMPORTANT:
   Keep the real buttons inside .services-hero-content */
.services-hero-content .services-hero-actions {
    display: flex !important;
}

.services-hero-content .hero-btn-primary,
.services-hero-content .hero-btn-secondary {
    display: inline-flex !important;
}/* =========================================================
   ONLY: TRUST BAR + GAP BEFORE OUR TREATMENTS
========================================================= */

/* TRUST BAR */
.services-hero-bottom {
    min-height: 118px !important;

    background: rgba(255,255,255,.98) !important;

    border-top: 1px solid rgba(0,157,165,.14) !important;

    box-shadow:
        0 -8px 28px rgba(0,70,70,.07) !important;

    z-index: 50 !important;
}


/* BIGGER NUMBERS */
.trust-bento-item strong {
    color: #009DA5 !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -2px !important;
}


/* SMALL LABELS */
.trust-bento-item span {
    margin-top: 8px !important;
    color: #183B3D !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1.7px !important;
}


/* CHENNAI */
.trust-bento-location strong {
    color: #F3754B !important;
    font-size: 27px !important;
    font-weight: 800 !important;
}


/* =========================================================
   GAP BETWEEN TRUST BAR & OUR TREATMENTS
========================================================= */

.services-hero + #treatments {
    padding-top: 65px !important;
}


/* Fallback if treatments section is not direct sibling */
#treatments {
    padding-top: 65px !important;
}


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

@media (max-width: 600px) {

    .services-hero-bottom {
        min-height: 135px !important;
    }

    .trust-bento-item strong {
        font-size: 29px !important;
    }

    #treatments {
        padding-top: 40px !important;
    }
}/* TRUST BAR → TREATMENTS WHITE GAP */
.services-hero-bottom {
    bottom: 0 !important;
}

#treatments {
    margin-top: 70px !important;
    background: var(--ak-offwhite) !important;
}

.services-hero {
    margin-bottom: 70px !important;
}

/* Keep the gap completely white */
.services-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -70px;
    height: 70px;
    background: #ffffff;
    z-index: 1;
}

.services-hero-bottom {
    z-index: 5 !important;
}/* =====================================================
   WHY AKEELA — SCROLL ANIMATION
===================================================== */

.ak-difference-title,
.ak-difference-years,
.ak-timeline-item,
.ak-difference-copy,
.ak-difference-image,
.ak-difference-point,
.ak-difference-closing {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);
}

.ak-difference-title.is-visible,
.ak-difference-years.is-visible,
.ak-timeline-item.is-visible,
.ak-difference-copy.is-visible,
.ak-difference-image.is-visible,
.ak-difference-point.is-visible,
.ak-difference-closing.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* stagger */

.ak-timeline-item:nth-child(2) {
    transition-delay: .05s;
}

.ak-timeline-item:nth-child(3) {
    transition-delay: .15s;
}

.ak-timeline-item:nth-child(4) {
    transition-delay: .25s;
}

.ak-timeline-item:nth-child(5) {
    transition-delay: .35s;
}

.ak-difference-point:nth-child(2) {
    transition-delay: .1s;
}

.ak-difference-point:nth-child(3) {
    transition-delay: .2s;
}

.ak-difference-point:nth-child(4) {
    transition-delay: .3s;
}


/* image reveal */

.ak-difference-image {
    clip-path: inset(0 0 0 12%);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1),
        clip-path 1s cubic-bezier(.22,1,.36,1);
}

.ak-difference-image.is-visible {
    clip-path: inset(0 0 0 0);
}


/* image subtle movement */

.ak-difference-image img {
    transform: scale(1.08);
    transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}

.ak-difference-image.is-visible img {
    transform: scale(1);
}


/* timeline dot animation */

.ak-timeline-item.is-visible .ak-timeline-dot {
    animation: akTimelinePulse 1.2s ease forwards;
}

@keyframes akTimelinePulse {

    0% {
        box-shadow: 0 0 0 0 rgba(243,117,75,0);
    }

    45% {
        box-shadow: 0 0 0 8px rgba(243,117,75,.12);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243,117,75,0);
    }

}


/* closing line */

.ak-closing-line {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .8s ease .2s;
}

.ak-difference-closing.is-visible .ak-closing-line {
    transform: scaleX(1);
}/* =====================================================
   TREATMENT WALL — HOVER FIX
===================================================== */

.ak-treatment-row {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}

.ak-treatment-row::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    background: rgba(0,157,165,.055);
    transition: width .45s cubic-bezier(.22,1,.36,1);
    z-index: -1;
}

.ak-treatment-row:hover::before,
.ak-treatment-row.active::before {
    width: 100%;
}

.ak-treatment-row:hover,
.ak-treatment-row.active {
    background: #ffffff;
}

.ak-treatment-row > * {
    position: relative;
    z-index: 2;
}

.ak-treatment-row:hover .ak-treatment-number,
.ak-treatment-row.active .ak-treatment-number {
    color: #F3754B;
}

.ak-treatment-row:hover .ak-treatment-name h3,
.ak-treatment-row.active .ak-treatment-name h3 {
    color: #F3754B;
}

.ak-treatment-row:hover .ak-treatment-arrow,
.ak-treatment-row.active .ak-treatment-arrow {
    background: #F3754B;
    border-color: #F3754B;
    color: #ffffff;
    transform: translate(4px, -4px);
}

.ak-treatment-preview {
    isolation: isolate;
}

.ak-treatment-preview-image {
    transition:
        opacity .35s ease,
        transform .9s cubic-bezier(.22,1,.36,1);
}

.ak-treatment-preview.is-changing
.ak-treatment-preview-image {
    opacity: .15;
    transform: scale(1.05);
}

/* =========================================================
   FINAL FIX — LEFT SERVICE LIST / RIGHT IMAGE PREVIEW
   ========================================================= */

.ak-svc-treatments .ak-treatment-wall {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    gap: 32px;
    align-items: start;
    min-height: 0;
}

.ak-svc-treatments .ak-treatment-list {
    min-width: 0;
    border-top: 1px solid var(--ak-line);
}

.ak-svc-treatments .ak-treatment-row {
    width: 100%;
    min-height: 88px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 16px;
    padding: 16px 8px 16px 0;
    border: 0;
    border-bottom: 1px solid var(--ak-line);
    background: transparent;
    text-decoration: none;
}

.ak-svc-treatments .ak-treatment-row:hover,
.ak-svc-treatments .ak-treatment-row.active {
    padding-left: 16px;
    background: #ffffff;
}

.ak-svc-treatments .ak-treatment-name {
    min-width: 0;
}

.ak-svc-treatments .ak-treatment-name h3 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 400;
    color: var(--ak-ink);
}

.ak-svc-treatments .ak-treatment-row:hover .ak-treatment-name h3,
.ak-svc-treatments .ak-treatment-row.active .ak-treatment-name h3 {
    color: var(--ak-orange);
}

.ak-svc-treatments .ak-treatment-preview {
    position: sticky;
    top: 105px;
    min-height: 0;
    height: 625px;
    overflow: hidden;
    border-radius: 24px;
}

.ak-svc-treatments .ak-treatment-preview-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity .35s ease, transform .7s ease;
}

.ak-svc-treatments .ak-treatment-preview.is-changing .ak-treatment-preview-image {
    opacity: .25;
    transform: scale(1.035);
}

.ak-svc-treatments .ak-treatment-preview-content {
    left: 34px;
    right: 34px;
    bottom: 34px;
}

.ak-svc-treatments .ak-treatment-preview-content h3 {
    font-size: clamp(30px, 3.2vw, 42px);
}

@media (max-width: 900px) {
    .ak-svc-treatments .ak-treatment-wall {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ak-svc-treatments .ak-treatment-preview {
        position: relative;
        top: auto;
        height: 500px;
        order: -1;
    }
}

@media (max-width: 600px) {
    .ak-svc-treatments .ak-treatment-wall {
        gap: 16px;
    }

    .ak-svc-treatments .ak-treatment-row {
        grid-template-columns: 36px minmax(0, 1fr) 34px;
        min-height: 72px;
        gap: 10px;
        padding: 14px 4px 14px 0;
    }

    .ak-svc-treatments .ak-treatment-name h3 {
        font-size: 16px;
    }

    .ak-svc-treatments .ak-treatment-preview {
        height: 430px;
        border-radius: 20px;
    }

    .ak-svc-treatments .ak-treatment-preview-content {
        left: 22px;
        right: 22px;
        bottom: 24px;
    }

    .ak-svc-treatments .ak-treatment-preview-content h3 {
        font-size: 29px;
    }
}

/* =========================================================
   SERVICE WALL — FINAL STRUCTURE FIX
   LEFT = SERVICE LIST
   RIGHT = IMAGE PREVIEW
   ========================================================= */

.ak-svc-treatments .ak-treatment-wall {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr) !important;
    align-items: start !important;
    gap: 32px !important;
    min-height: 0 !important;
}

.ak-svc-treatments .ak-treatment-list {
    display: block !important;
    width: 100% !important;
}

.ak-svc-treatments .ak-treatment-preview {
    display: block !important;
    width: 100% !important;
    height: 625px !important;
    min-height: 0 !important;
    position: sticky !important;
    top: 105px !important;
}

@media (max-width: 900px) {
    .ak-svc-treatments .ak-treatment-wall {
        grid-template-columns: 1fr !important;
    }

    .ak-svc-treatments .ak-treatment-preview {
        position: relative !important;
        top: auto !important;
        height: 500px !important;
    }
}

@media (max-width: 600px) {
    .ak-svc-treatments .ak-treatment-preview {
        height: 430px !important;
    }
}
/* =========================================================
   SERVICES LIST + SYNCED IMAGE — side-by-side layout
========================================================= */

.svc-list-section {
    padding: 130px 7% 100px;
    background: #F9FBFB;
}

.svc-list-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto 60px;
}
.svc-list-head h2 {
    margin: 0;
    color: #17282A;
    font-family: Georgia, serif;
    font-size: clamp(38px, 4.5vw, 58px);
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 1;
}
.svc-list-head h2 em {
    color: #F3754B;
    font-style: italic;
}
.svc-list-head p {
    max-width: 380px;
    margin: 0;
    color: #6C7D7F;
    font-size: 14px;
    line-height: 1.7;
}

/* KEY FIX: two-column grid — list on left, image on right */
.svc-list-wrap {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: start;
}

.svc-list {
    display: flex;
    flex-direction: column;
}

.svc-list-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 10px;
    border-top: 1px solid rgba(0,157,165,.12);
    text-decoration: none;
    transition: background-color .3s ease, padding-left .3s ease;
}
.svc-list:last-child .svc-list-item:last-child,
.svc-list-item:last-of-type {
    border-bottom: 1px solid rgba(0,157,165,.12);
}

.svc-list-item:hover,
.svc-list-item.active {
    background: rgba(0,157,165,.05);
    padding-left: 20px;
}

.svc-list-num {
    flex-shrink: 0;
    width: 30px;
    color: #99A9AA;
    font-size: 13px;
    font-weight: 600;
}
.svc-list-item.active .svc-list-num,
.svc-list-item:hover .svc-list-num {
    color: #F3754B;
}

.svc-list-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.svc-list-cat {
    color: #009DA5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.svc-list-text h3 {
    margin: 0;
    color: #17282A;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    transition: color .3s ease;
}
.svc-list-item.active .svc-list-text h3,
.svc-list-item:hover .svc-list-text h3 {
    color: #F3754B;
}

.svc-list-arrow {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0,157,165,.2);
    color: #17282A;
    font-size: 15px;
    transition: background-color .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}
.svc-list-item.active .svc-list-arrow,
.svc-list-item:hover .svc-list-arrow {
    background: #F3754B;
    border-color: #F3754B;
    color: #fff;
    transform: translate(2px, -2px);
}

/* RIGHT: sticky image */
.svc-list-visual {
    position: sticky;
    top: 110px;
}
.svc-list-visual-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 65px rgba(16,43,45,.16);
}
.svc-list-visual-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .4s ease;
}
.svc-list-counter {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.svc-list-counter span:last-child {
    font-size: 12px;
    font-weight: 400;
    opacity: .8;
}

/* Responsive: stack on smaller screens (image moves below, full width) */
@media (max-width: 980px) {
    .svc-list-wrap {
        grid-template-columns: 1fr;
    }
    .svc-list-visual {
        position: static;
        order: -1;
        margin-bottom: 30px;
    }
    .svc-list-visual-inner {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 600px) {
    .svc-list-section { padding: 100px 20px 70px; }
    .svc-list-item { gap: 14px; padding: 20px 4px; }
    .svc-list-text h3 { font-size: 17px; }
    .svc-list-arrow { width: 34px; height: 34px; font-size: 12px; }
}