/* ==========================================================
   VED VAIDYA MEDIA
   PREMIUM SERVICES ARCHIVE

   File: assets/css/services-archive.css

   Design:
   - Deep navy hero
   - Turquoise / mint accents
   - 1530px container
   - Premium card filling animation
   - Smooth image zoom
   - Scroll reveal
   - Responsive layout
========================================================== */

/* ==========================================================
   01. GLOBAL DESIGN SYSTEM
========================================================== */

.vvsa-archive {
    --vvsa-navy: #041d30;
    --vvsa-dark: #03293f;
    --vvsa-ink: #08394e;
    --vvsa-teal: #079a99;
    --vvsa-mint: #9af5d8;
    --vvsa-white: #ffffff;
    --vvsa-muted: #557483;
    --vvsa-border: #dcebe7;
    --vvsa-bg: #f3f9f7;

    --vvsa-ease: cubic-bezier(.22, 1, .36, 1);

    width: 100%;
    overflow: clip;

    background: #ffffff;
    color: var(--vvsa-ink);

    font-family: Manrope, Arial, sans-serif;

    -webkit-font-smoothing: antialiased;
}

.vvsa-archive *,
.vvsa-archive *::before,
.vvsa-archive *::after {
    box-sizing: border-box;
}

.vvsa-archive :is(
    h1, h2, h3, p, figure
) {
    margin-top: 0;
}

.vvsa-archive :is(p, li) {
    font-size: 16px;
    line-height: 1.75;
}

.vvsa-archive a {
    text-decoration: none;
}

.vvsa-archive a:focus-visible {
    outline: 3px solid #21ceb6;
    outline-offset: 4px;
}

.vvsa-archive [id] {
    scroll-margin-top: 100px;
}

.vvsa-container {
    width: min(
        1530px,
        calc(100% - 76px)
    );

    margin-inline: auto;
}

/* ==========================================================
   02. HERO
========================================================== */

.vvsa-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: min(
        750px,
        calc(100svh - 90px)
    );

    padding: clamp(55px, 6vw, 90px) 0 25px;

    background: linear-gradient(
        115deg,
        #021725 0%,
        #04354d 55%,
        #086a79 100%
    );

    color: #ffffff;
}

.vvsa-hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;
    pointer-events: none;
}

.vvsa-hero-glow {
    position: absolute;

    border-radius: 50%;
    filter: blur(85px);

    animation:
        vvsa-glow-float
        17s ease-in-out infinite alternate;
}

.vvsa-glow-one {
    top: -230px;
    left: -180px;

    width: 570px;
    height: 570px;

    background: rgba(11, 178, 166, .28);
}

.vvsa-glow-two {
    right: -200px;
    bottom: -260px;

    width: 590px;
    height: 590px;

    background: rgba(123, 241, 209, .20);

    animation-duration: 22s;
}

.vvsa-hero-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.037) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.037) 1px,
            transparent 1px
        );

    background-size: 63px 63px;

    mask-image: radial-gradient(
        ellipse at 64% 42%,
        #000 10%,
        transparent 78%
    );
}

/* ==========================================================
   03. HERO CONTENT GRID
========================================================== */

.vvsa-hero-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .9fr);

    gap: clamp(38px, 5vw, 90px);

    align-items: center;
    flex: 1;
}

.vvsa-hero-copy {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.vvsa-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 27px;

    color: var(--vvsa-mint);

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .16em;
    line-height: 1.5;
}

.vvsa-live-dot {
    display: block;
    flex: none;

    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: var(--vvsa-mint);

    box-shadow:
        0 0 0 6px rgba(154,245,216,.13);

    animation:
        vvsa-pulse
        2.5s ease-in-out infinite;
}

.vvsa-hero h1 {
    max-width: 850px;

    margin: 0 0 27px;

    color: #ffffff !important;

    font-size: clamp(48px, 6.5vw, 105px);
    font-weight: 850;
    line-height: 1.03;
    letter-spacing: -.065em;

    overflow-wrap: anywhere;
    text-wrap: balance;

    animation:
        vvsa-hero-up
        1s var(--vvsa-ease) both;
}

.vvsa-hero-description {
    max-width: 720px;

    color: #c8e3e5;

    animation:
        vvsa-hero-up
        1s var(--vvsa-ease) .12s both;
}

.vvsa-hero-description p {
    margin: 0 0 14px;

    color: inherit;

    font-size: clamp(16px, 1.35vw, 19px);
    font-weight: 500;
    line-height: 1.78;
}

.vvsa-hero-description > :last-child {
    margin-bottom: 0;
}

.vvsa-hero-description strong {
    color: #ffffff;
}

.vvsa-hero-description a {
    color: var(--vvsa-mint);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ==========================================================
   04. PREMIUM HERO BUTTONS
========================================================== */

.vvsa-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;
    margin-top: 35px;
}

.vvsa-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;

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

    gap: 22px;

    min-height: 61px;
    padding: 7px 7px 7px 24px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;

    transition:
        transform .4s var(--vvsa-ease),
        color .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .4s ease;
}

.vvsa-button::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    border-radius: inherit;

    transform: translateY(102%);

    transition:
        transform .55s var(--vvsa-ease);
}

.vvsa-button:hover::before {
    transform: translateY(0);
}

.vvsa-button-icon {
    display: grid;
    place-items: center;
    flex: none;

    width: 45px;
    height: 45px;

    border-radius: 50%;

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

    transition:
        transform .5s var(--vvsa-ease),
        background .3s ease,
        color .3s ease;
}

.vvsa-button-primary {
    background: var(--vvsa-mint);
    color: #073c50 !important;
}

.vvsa-button-primary::before {
    background: #ffffff;
}

.vvsa-button-primary .vvsa-button-icon {
    background: #073c50;
    color: #ffffff;
}

.vvsa-button-outline {
    background: rgba(255,255,255,.07);

    border-color: rgba(211,255,244,.46);

    color: #ffffff !important;

    backdrop-filter: blur(8px);
}

.vvsa-button-outline::before {
    background: #ffffff;
}

.vvsa-button-outline .vvsa-button-icon {
    background: rgba(255,255,255,.15);
    color: #ffffff;
}

.vvsa-button:hover {
    transform: translateY(-5px);

    box-shadow:
        0 19px 36px rgba(0,16,29,.26);
}

.vvsa-button-outline:hover {
    color: #073c50 !important;
    border-color: #ffffff;
}

.vvsa-button-primary:hover .vvsa-button-icon {
    transform: rotate(45deg);
}

.vvsa-button-outline:hover .vvsa-button-icon {
    background: #073c50;
    transform: rotate(45deg);
}

/* ==========================================================
   05. HERO GEOMETRIC VISUAL
========================================================== */

.vvsa-hero-art {
    min-width: 0;

    display: grid;
    place-items: center;
}

.vvsa-art-stage {
    position: relative;

    width: min(100%, 480px);
    aspect-ratio: 1;

    display: grid;
    place-items: center;
}

.vvsa-art-stage::before {
    content: "";

    position: absolute;
    inset: 8%;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(61,221,189,.19),
        transparent 67%
    );

    filter: blur(35px);
}

.vvsa-art-orbit {
    position: absolute;

    border-radius: 50%;
    pointer-events: none;
}

.vvsa-orbit-outer {
    inset: 4%;

    border: 1px solid rgba(180,255,232,.28);

    animation:
        vvsa-spin
        40s linear infinite;
}

.vvsa-orbit-light {
    position: absolute;

    left: 50%;
    top: -6px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--vvsa-mint);

    box-shadow:
        0 0 20px rgba(154,245,216,.85);
}

.vvsa-orbit-middle {
    inset: 16%;

    border: 1px dashed rgba(180,255,232,.28);

    animation:
        vvsa-spin
        50s linear infinite reverse;
}

.vvsa-orbit-inner {
    inset: 29%;

    border: 1px solid rgba(180,255,232,.22);

    box-shadow:
        0 0 0 26px rgba(180,255,232,.025);
}

.vvsa-art-core {
    position: relative;

    display: grid;
    place-items: center;

    width: 42%;
    aspect-ratio: 1;

    border: 1px solid rgba(202,255,239,.4);
    border-radius: 32px;

    background: linear-gradient(
        135deg,
        rgba(146,250,223,.25),
        rgba(4,89,112,.62)
    );

    backdrop-filter: blur(16px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 30px 60px rgba(0,15,30,.3);

    transform: rotate(-9deg);

    animation:
        vvsa-core-float
        7s ease-in-out infinite;
}

.vvsa-art-core::before {
    content: "";

    position: absolute;
    inset: 13px;

    border-radius: 23px;
    border: 1px solid rgba(255,255,255,.16);
}

.vvsa-core-lines {
    position: relative;

    width: 74px;
    height: 74px;

    transform: rotate(9deg);
}

.vvsa-core-lines::before,
.vvsa-core-lines::after {
    content: "";

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

    width: 90%;
    height: 2px;

    background: rgba(204,255,240,.65);

    transform-origin: center;
}

.vvsa-core-lines::before {
    transform:
        translate(-50%,-50%)
        rotate(45deg);
}

.vvsa-core-lines::after {
    transform:
        translate(-50%,-50%)
        rotate(-45deg);
}

.vvsa-core-lines span {
    position: absolute;
    z-index: 1;

    width: 20px;
    height: 20px;

    border: 3px solid #d8fff3;
    border-radius: 7px;

    background: #099f9e;
}

.vvsa-core-lines span:nth-child(1) {
    top: 0;
    left: 0;
}

.vvsa-core-lines span:nth-child(2) {
    top: 0;
    right: 0;
}

.vvsa-core-lines span:nth-child(3) {
    bottom: 0;
    left: 0;
}

.vvsa-core-lines span:nth-child(4) {
    bottom: 0;
    right: 0;
}

.vvsa-art-chip {
    position: absolute;

    padding: 11px 16px;

    border: 1px solid rgba(216,255,245,.32);
    border-radius: 999px;

    background: rgba(3,49,67,.72);

    backdrop-filter: blur(12px);

    color: #ddfff3;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;

    box-shadow:
        0 15px 27px rgba(0,14,28,.17);
}

.vvsa-chip-one {
    top: 13%;
    left: 1%;
}

.vvsa-chip-two {
    top: 31%;
    right: -1%;
}

.vvsa-chip-three {
    bottom: 14%;
    right: 13%;
}

.vvsa-art-node {
    position: absolute;

    width: 14px;
    height: 14px;

    border: 3px solid #beffe9;
    border-radius: 50%;

    background: #087e8b;

    box-shadow:
        0 0 0 8px rgba(154,245,216,.09);
}

.vvsa-node-one {
    top: 12%;
    right: 19%;
}

.vvsa-node-two {
    bottom: 20%;
    left: 11%;
}

.vvsa-node-three {
    right: 6%;
    top: 53%;
}

/* ==========================================================
   06. HERO LOWER BAR
========================================================== */

.vvsa-hero-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 30px;
    padding-top: 23px;

    border-top:
        1px solid rgba(214,255,244,.2);
}

.vvsa-hero-count {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vvsa-hero-count strong {
    color: #ffffff;

    font-size: 38px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.05em;
}

.vvsa-hero-count > span {
    padding-left: 13px;

    border-left:
        1px solid rgba(214,255,244,.3);

    color: #9fbfc6;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.5;
}

.vvsa-scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    color: #daf4ed !important;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .14em;
}

.vvsa-scroll-arrow {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(214,255,244,.42);
    border-radius: 50%;

    font-size: 22px;

    transition:
        transform .4s var(--vvsa-ease),
        background .3s ease,
        color .3s ease;
}

.vvsa-scroll-cue:hover .vvsa-scroll-arrow {
    transform: translateY(5px);

    background: var(--vvsa-mint);
    color: #06394d;
}

/* ==========================================================
   07. SERVICES SECTION
========================================================== */

.vvsa-services {
    padding: clamp(75px, 8vw, 120px) 0;

    background:
        radial-gradient(
            circle at 95% 0,
            rgba(11,180,157,.08),
            transparent 38%
        ),
        linear-gradient(
            #f5faf9,
            #ffffff 560px
        );
}

.vvsa-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: clamp(35px, 4vw, 60px);
}

.vvsa-section-copy {
    min-width: 0;
}

.vvsa-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;

    color: #087c89;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .15em;
}

.vvsa-section-kicker span {
    display: block;

    width: 43px;
    height: 2px;

    background: #079c9b;
}

.vvsa-section-heading h2 {
    margin: 0;

    color: #07364b;

    font-size: clamp(40px, 5vw, 75px);
    line-height: 1.08;
    letter-spacing: -.06em;
    font-weight: 850;

    text-wrap: balance;
}

.vvsa-section-heading h2 em {
    color: #088d92;
    font-style: normal;
}

.vvsa-section-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vvsa-section-count {
    color: #07364b;

    font-size: clamp(40px, 4.6vw, 67px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.06em;
}

.vvsa-section-count-label {
    padding-left: 13px;

    border-left: 1px solid #bad4ce;

    color: #708994;

    font-size: 10px;
    font-weight: 850;
    line-height: 1.6;
    letter-spacing: .08em;
}

/* ==========================================================
   08. THREE-COLUMN GRID
========================================================== */

.vvsa-grid {
    display: grid;

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

    gap: clamp(18px, 2vw, 28px);
    align-items: stretch;
}

/* ==========================================================
   09. CARD STRUCTURE
========================================================== */

.vvsa-service-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-width: 0;
    min-height: 515px;

    border: 1px solid var(--vvsa-border);
    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 16px 40px rgba(7,55,71,.065);

    transition:
        transform .55s var(--vvsa-ease),
        border-color .35s ease,
        box-shadow .5s var(--vvsa-ease);
}

/* ==========================================
   10. FULL CARD FILL ANIMATION

   The gradient rises from bottom to top.
========================================== */

.vvsa-service-card::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    background: linear-gradient(
        145deg,
        #07677a 0%,
        #065267 45%,
        #03263f 100%
    );

    transform: translateY(101%);

    transition:
        transform .78s var(--vvsa-ease);

    pointer-events: none;
}

.vvsa-service-card::after {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    background: radial-gradient(
        420px circle at
        var(--vvsa-mouse-x, 50%)
        var(--vvsa-mouse-y, 60%),
        rgba(158,255,225,.17),
        transparent 65%
    );

    opacity: 0;

    transition: opacity .35s ease;

    pointer-events: none;
}

.vvsa-service-card:hover,
.vvsa-service-card:focus-within {
    transform: translateY(-10px);

    border-color: #0a9ba1;

    box-shadow:
        0 33px 65px rgba(4,46,68,.22);
}

.vvsa-service-card:hover::before,
.vvsa-service-card:focus-within::before {
    transform: translateY(0);
}

.vvsa-service-card:hover::after,
.vvsa-service-card:focus-within::after {
    opacity: 1;
}

.vvsa-service-link {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    min-height: inherit;

    color: inherit;
}

/* ==========================================================
   11. SERVICE CARD IMAGE
========================================================== */

.vvsa-card-image-wrap {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 16 / 10;

    background: #d0e6df;
}

.vvsa-card-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .95s var(--vvsa-ease),
        filter .65s ease;
}

.vvsa-image-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(2,29,45,.52),
        transparent 58%
    );

    pointer-events: none;

    transition:
        background .45s ease;
}

.vvsa-service-card:hover .vvsa-card-image,
.vvsa-service-card:focus-within .vvsa-card-image {
    transform: scale(1.09);

    filter: saturate(1.12);
}

.vvsa-service-card:hover .vvsa-image-overlay {
    background: linear-gradient(
        to top,
        rgba(2,39,56,.7),
        rgba(2,39,56,.04) 70%
    );
}

.vvsa-image-index {
    position: absolute;
    z-index: 2;

    bottom: 18px;
    left: 20px;

    padding: 9px 14px;

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

    background: rgba(3,33,49,.55);

    backdrop-filter: blur(8px);

    color: #ffffff;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

/* ==========================================================
   12. FEATURED IMAGE FALLBACK
========================================================== */

.vvsa-image-fallback {
    position: relative;

    display: grid;
    place-items: center;
    overflow: hidden;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        135deg,
        #06445d,
        #079e9e
    );
}

.vvsa-fallback-ring {
    position: absolute;

    width: 200px;
    height: 200px;

    border: 1px solid rgba(209,255,240,.31);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(209,255,240,.055),
        0 0 0 70px rgba(209,255,240,.025);

    transition:
        transform .7s var(--vvsa-ease);
}

.vvsa-fallback-initial {
    position: relative;
    z-index: 1;

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

    font-size: 92px;
    font-weight: 850;
    line-height: 1;
}

.vvsa-service-card:hover .vvsa-fallback-ring {
    transform: scale(1.18) rotate(25deg);
}

/* ==========================================================
   13. CARD CONTENT
========================================================== */

.vvsa-card-body {
    position: relative;

    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;

    padding: clamp(23px, 2.3vw, 33px);
}

.vvsa-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 19px;
}

.vvsa-card-kicker {
    color: #078996;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;

    transition: color .45s ease;
}

.vvsa-card-index {
    color: #9bb4bc;

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

    transition: color .45s ease;
}

.vvsa-card-title {
    margin: 0 0 15px;

    color: #08384d;

    font-size: clamp(22px, 2vw, 29px);
    font-weight: 850;
    line-height: 1.26;
    letter-spacing: -.04em;

    text-wrap: balance;

    transition:
        color .45s ease,
        transform .5s var(--vvsa-ease);
}

.vvsa-card-excerpt {
    margin: 0 0 27px;

    color: #56727f;

    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.78 !important;

    transition: color .45s ease;
}

/* ==========================================================
   14. CARD BOTTOM ARROW
========================================================== */

.vvsa-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: auto;
    padding-top: 20px;

    border-top: 1px solid #dcebe8;

    transition:
        border-color .45s ease;
}

.vvsa-card-cta-label {
    color: #087181;

    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;

    transition:
        color .45s ease,
        transform .45s var(--vvsa-ease);
}

.vvsa-card-arrow {
    display: grid;
    place-items: center;
    flex: none;

    width: 49px;
    height: 49px;

    border: 1px solid #d0e8e2;
    border-radius: 50%;

    background: #eaf7f2;
    color: #067384;

    font-size: 26px;

    transition:
        transform .6s var(--vvsa-ease),
        background .4s ease,
        color .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

/* ==========================================================
   15. HOVER COLOUR TRANSITIONS
========================================================== */

.vvsa-service-card:hover .vvsa-card-kicker,
.vvsa-service-card:focus-within .vvsa-card-kicker {
    color: #a9f6df;
}

.vvsa-service-card:hover .vvsa-card-index,
.vvsa-service-card:focus-within .vvsa-card-index {
    color: #b7e2e1;
}

.vvsa-service-card:hover .vvsa-card-title,
.vvsa-service-card:focus-within .vvsa-card-title {
    color: #ffffff;
    transform: translateY(-2px);
}

.vvsa-service-card:hover .vvsa-card-excerpt,
.vvsa-service-card:focus-within .vvsa-card-excerpt {
    color: #d0edef;
}

.vvsa-service-card:hover .vvsa-card-bottom,
.vvsa-service-card:focus-within .vvsa-card-bottom {
    border-color: rgba(220,255,245,.24);
}

.vvsa-service-card:hover .vvsa-card-cta-label,
.vvsa-service-card:focus-within .vvsa-card-cta-label {
    color: #ffffff;

    transform: translateX(4px);
}

.vvsa-service-card:hover .vvsa-card-arrow,
.vvsa-service-card:focus-within .vvsa-card-arrow {
    transform: rotate(45deg);

    background: var(--vvsa-mint);
    border-color: var(--vvsa-mint);

    color: #063b4d;

    box-shadow:
        0 13px 25px rgba(0,22,35,.19);
}

/* ==========================================================
   16. EMPTY STATE
========================================================== */

.vvsa-empty {
    padding: 70px 30px;

    border: 1px dashed #b4d8cf;
    border-radius: 22px;

    background: #f6faf9;

    text-align: center;
}

.vvsa-empty h3 {
    margin-bottom: 10px;

    color: #073b50;
    font-size: 27px;
}

.vvsa-empty p {
    color: #567684;
}

/* ==========================================================
   17. FINAL CTA
========================================================== */

.vvsa-final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: clamp(75px, 7vw, 115px) 0;

    background: linear-gradient(
        125deg,
        #a2f5dd,
        #70e7d0 60%,
        #4ccbc0
    );
}

.vvsa-final-cta::before {
    content: "";

    position: absolute;
    z-index: -1;

    right: -160px;
    bottom: -290px;

    width: 620px;
    height: 620px;

    border: 1px solid rgba(5,61,78,.18);
    border-radius: 50%;

    box-shadow:
        0 0 0 60px rgba(255,255,255,.1),
        0 0 0 120px rgba(255,255,255,.05);
}

.vvsa-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 55px;
}

.vvsa-final-content {
    min-width: 0;
}

.vvsa-final-label {
    display: block;

    margin-bottom: 19px;

    color: #075d6e;

    font-size: 12px;
    font-weight: 850;
    letter-spacing: .14em;
}

.vvsa-final-cta h2 {
    margin: 0;

    color: #05374c;

    font-size: clamp(40px, 5vw, 76px);
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -.06em;

    text-wrap: balance;
}

.vvsa-final-cta h2 em {
    color: #087c84;
    font-style: normal;
}

.vvsa-final-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex: none;

    gap: 27px;

    min-height: 67px;
    padding: 8px 8px 8px 25px;

    border-radius: 999px;

    background: #053449;
    color: #ffffff !important;

    font-size: 15px;
    font-weight: 850;

    box-shadow:
        0 14px 30px rgba(5,52,73,.18);

    transition:
        transform .4s var(--vvsa-ease),
        background .35s ease,
        box-shadow .4s ease;
}

.vvsa-final-button-icon {
    display: grid;
    place-items: center;
    flex: none;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: var(--vvsa-mint);
    color: #05374c;

    font-size: 25px;

    transition:
        transform .5s var(--vvsa-ease),
        background .3s ease;
}

.vvsa-final-button:hover {
    transform: translateY(-5px);

    background: #087e8b;

    box-shadow:
        0 22px 40px rgba(5,52,73,.24);
}

.vvsa-final-button:hover .vvsa-final-button-icon {
    transform: rotate(45deg);
    background: #ffffff;
}

/* ==========================================================
   18. SCROLL ENTRANCE ANIMATION
========================================================== */

.vvsa-archive.vvsa-motion .vvsa-service-card {
    opacity: 0;
    translate: 0 34px;

    transition:
        opacity .8s var(--vvsa-ease),
        translate .85s var(--vvsa-ease),
        transform .55s var(--vvsa-ease),
        border-color .35s ease,
        box-shadow .5s var(--vvsa-ease);
}

.vvsa-archive.vvsa-motion
.vvsa-service-card.vvsa-visible {
    opacity: 1;
    translate: 0 0;
}

/* ==========================================================
   19. KEYFRAMES
========================================================== */

@keyframes vvsa-hero-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes vvsa-glow-float {
    to {
        transform:
            translate(55px, 35px)
            scale(1.12);
    }
}

@keyframes vvsa-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes vvsa-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 6px rgba(154,245,216,.13);
    }

    50% {
        box-shadow:
            0 0 0 12px rgba(154,245,216,.035);
    }
}

@keyframes vvsa-core-float {
    0%, 100% {
        transform:
            translateY(-7px)
            rotate(-9deg);
    }

    50% {
        transform:
            translateY(8px)
            rotate(-4deg);
    }
}

/* ==========================================================
   20. LAPTOP
========================================================== */

@media (max-width: 1280px) {

    .vvsa-container {
        width: calc(100% - 56px);
    }

    .vvsa-hero-inner {
        gap: 42px;
    }

    .vvsa-hero h1 {
        font-size: clamp(48px, 6vw, 80px);
    }

    .vvsa-card-body {
        padding: 25px;
    }

    .vvsa-card-title {
        font-size: 25px;
    }
}

/* ==========================================================
   21. TABLET
========================================================== */

@media (max-width: 1024px) {

    .vvsa-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, .65fr);

        gap: 27px;
    }

    .vvsa-art-stage {
        max-width: 360px;
    }

    .vvsa-art-chip {
        padding: 9px 12px;
        font-size: 9px;
    }

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

    .vvsa-service-card {
        min-height: 495px;
    }

    .vvsa-card-title {
        font-size: 26px;
    }
}

/* ==========================================================
   22. MOBILE
========================================================== */

@media (max-width: 767px) {

    .vvsa-container {
        width: calc(100% - 36px);
    }

    .vvsa-hero {
        min-height: 0;
        padding: 64px 0 26px;
    }

    .vvsa-hero-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vvsa-hero h1 {
        font-size: clamp(44px, 9vw, 67px);
        margin-bottom: 21px;
    }

    .vvsa-hero-description p {
        font-size: 16px;
    }

    .vvsa-hero-art {
        display: none;
    }

    .vvsa-hero-actions {
        margin-top: 27px;
    }

    .vvsa-hero-bottom {
        margin-top: 42px;
        padding-top: 20px;
    }

    .vvsa-services {
        padding: 70px 0;
    }

    .vvsa-section-heading h2 {
        font-size: clamp(37px, 7vw, 54px);
    }

    .vvsa-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vvsa-service-card {
        min-height: 0;
    }

    .vvsa-card-image-wrap {
        aspect-ratio: 16 / 9;
    }

    .vvsa-card-body {
        padding: 26px;
    }

    .vvsa-card-title {
        font-size: 27px;
    }

    .vvsa-final-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================
   23. SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    .vvsa-container {
        width: calc(100% - 28px);
    }

    .vvsa-hero h1 {
        font-size: 43px;
    }

    .vvsa-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vvsa-button {
        width: 100%;
    }

    .vvsa-section-heading {
        align-items: flex-start;
        gap: 15px;
    }

    .vvsa-section-heading h2 {
        font-size: 35px;
    }

    .vvsa-section-count {
        font-size: 35px;
    }

    .vvsa-section-count-label {
        padding-left: 9px;
        font-size: 9px;
    }

    .vvsa-card-body {
        padding: 23px;
    }

    .vvsa-card-title {
        font-size: 24px;
    }

    .vvsa-final-button {
        width: 100%;
        justify-content: space-between;
    }
}

/* ==========================================================
   24. TOUCH DEVICES
========================================================== */

@media (hover: none) {

    .vvsa-service-card:hover,
    .vvsa-button:hover,
    .vvsa-final-button:hover {
        transform: none;
    }

    .vvsa-service-card::after {
        display: none;
    }
}

/* ==========================================================
   25. ACCESSIBILITY
========================================================== */

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

    .vvsa-archive *,
    .vvsa-archive *::before,
    .vvsa-archive *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .vvsa-archive .vvsa-service-card {
        opacity: 1 !important;
        translate: none !important;
    }
}

/* ==========================================================
   VED VAIDYA MEDIA
   PREMIUM SERVICES ARCHIVE - COMPACT CARD UPDATE

   CHANGES:
   - Reduced card height
   - Shorter featured image
   - Better title and description spacing
   - Maximum 2-line description
   - Smaller premium arrow
   - Preserved full-card filling hover animation
   - Removed large mint final CTA
   - Responsive desktop/tablet/mobile

   ADD AT BOTTOM OF services-archive.css
========================================================== */


/* ==========================================================
   01. REMOVE LAST CTA SECTION
========================================================== */

.vvsa-archive .vvsa-final-cta {
    display: none !important;
}


/* ==========================================================
   02. SERVICES SECTION SPACING
========================================================== */

.vvsa-archive .vvsa-services {
    padding: clamp(60px, 6vw, 95px) 0;
}

.vvsa-archive .vvsa-section-heading {
    margin-bottom: clamp(30px, 3vw, 46px);
}


/* ==========================================================
   03. COMPACT THREE-COLUMN GRID
========================================================== */

.vvsa-archive .vvsa-grid {
    display: grid;

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

    align-items: stretch;

    gap: clamp(17px, 1.8vw, 25px);
}


/* ==========================================================
   04. NEW CARD DIMENSIONS
========================================================== */

.vvsa-archive .vvsa-service-card {
    position: relative;

    min-height: 0;
    height: auto;

    overflow: hidden;
    isolation: isolate;

    border: 1px solid #dcebe7;
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 8px 26px rgba(5, 45, 65, .055);

    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease,
        box-shadow .5s ease;
}

.vvsa-archive .vvsa-service-link {
    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 0;
}


/* ==========================================================
   05. COMPACT FEATURED IMAGE

   Wider aspect ratio reduces card height.
   Images will crop, never stretch.
========================================================== */

.vvsa-archive .vvsa-card-image-wrap {
    position: relative;

    flex: none;

    width: 100%;
    height: auto;

    aspect-ratio: 2.25 / 1;

    overflow: hidden;

    background: #d6e8e3;
}

.vvsa-archive .vvsa-card-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .9s cubic-bezier(.22, 1, .36, 1),
        filter .6s ease;
}

/* Smaller image badge */

.vvsa-archive .vvsa-image-index {
    bottom: 13px;
    left: 15px;

    padding: 7px 11px;

    font-size: 10px;

    border-radius: 999px;
}


/* ==========================================================
   06. CARD CONTENT
========================================================== */

.vvsa-archive .vvsa-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;

    min-width: 0;

    padding: 20px 23px 21px;
}


/* ==========================================================
   07. TOP LABEL
========================================================== */

.vvsa-archive .vvsa-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin: 0 0 11px;
}

.vvsa-archive .vvsa-card-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
}

.vvsa-archive .vvsa-card-index {
    font-size: 12px;
}


/* ==========================================================
   08. SERVICE TITLE
========================================================== */

.vvsa-archive .vvsa-card-title {
    margin: 0 0 9px;

    color: #08384d;

    font-size: clamp(20px, 1.5vw, 25px);
    font-weight: 800;

    line-height: 1.29;
    letter-spacing: -.035em;

    text-wrap: balance;

    transition:
        color .45s ease,
        transform .45s ease;
}


/* ==========================================================
   09. SHORT DESCRIPTION

   Keep descriptions visually consistent.
   Full text remains in the HTML.
========================================================== */

.vvsa-archive .vvsa-card-excerpt {
    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    overflow: hidden;

    margin: 0 0 17px;

    color: #587481;

    font-size: 16px !important;
    font-weight: 400;

    line-height: 1.65 !important;
}


/* ==========================================================
   10. COMPACT CARD FOOTER
========================================================== */

.vvsa-archive .vvsa-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: auto;

    padding-top: 13px;

    border-top: 1px solid #dcebe8;

    transition:
        border-color .4s ease;
}

.vvsa-archive .vvsa-card-cta-label {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.vvsa-archive .vvsa-card-arrow {
    display: grid;
    place-items: center;

    flex: none;

    width: 41px;
    height: 41px;

    border: 1px solid #cfe8e0;
    border-radius: 50%;

    background: #eaf7f2;
    color: #067384;

    font-size: 22px;

    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}


/* ==========================================================
   11. PREMIUM FULL-CARD FILL ANIMATION

   Existing effect retained.
   Smooth bottom-to-top gradient fill.
========================================================== */

.vvsa-archive .vvsa-service-card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(
        145deg,
        #08738a 0%,
        #065469 45%,
        #03283f 100%
    );

    transform: translateY(101%);

    transition:
        transform .75s cubic-bezier(.22, 1, .36, 1);

    pointer-events: none;
}

.vvsa-archive .vvsa-service-card:hover,
.vvsa-archive .vvsa-service-card:focus-within {
    transform: translateY(-7px);

    border-color: #089e9b;

    box-shadow:
        0 24px 48px rgba(4, 46, 68, .17);
}

.vvsa-archive .vvsa-service-card:hover::before,
.vvsa-archive .vvsa-service-card:focus-within::before {
    transform: translateY(0);
}


/* ==========================================================
   12. IMAGE HOVER
========================================================== */

.vvsa-archive .vvsa-service-card:hover .vvsa-card-image,
.vvsa-archive .vvsa-service-card:focus-within .vvsa-card-image {
    transform: scale(1.065);

    filter: saturate(1.1);
}


/* ==========================================================
   13. TEXT COLOUR CHANGE ON HOVER
========================================================== */

.vvsa-archive .vvsa-service-card:hover .vvsa-card-title,
.vvsa-archive .vvsa-service-card:focus-within .vvsa-card-title {
    color: #ffffff;
}

.vvsa-archive .vvsa-service-card:hover .vvsa-card-excerpt,
.vvsa-archive .vvsa-service-card:focus-within .vvsa-card-excerpt {
    color: #d0edef;
}

.vvsa-archive .vvsa-service-card:hover .vvsa-card-kicker,
.vvsa-archive .vvsa-service-card:focus-within .vvsa-card-kicker {
    color: #a9f6df;
}

.vvsa-archive .vvsa-service-card:hover .vvsa-card-index,
.vvsa-archive .vvsa-service-card:focus-within .vvsa-card-index {
    color: #b7e2e1;
}

.vvsa-archive .vvsa-service-card:hover .vvsa-card-bottom,
.vvsa-archive .vvsa-service-card:focus-within .vvsa-card-bottom {
    border-color: rgba(220, 255, 245, .25);
}

.vvsa-archive .vvsa-service-card:hover .vvsa-card-cta-label,
.vvsa-archive .vvsa-service-card:focus-within .vvsa-card-cta-label {
    color: #ffffff;
}

.vvsa-archive .vvsa-service-card:hover .vvsa-card-arrow,
.vvsa-archive .vvsa-service-card:focus-within .vvsa-card-arrow {
    transform: rotate(45deg);

    background: #9af5d8;
    border-color: #9af5d8;

    color: #063b4d;
}


/* ==========================================================
   14. TABLET
========================================================== */

@media (max-width: 1024px) {

    .vvsa-archive .vvsa-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    .vvsa-archive .vvsa-service-card {
        min-height: 0;
    }

    .vvsa-archive .vvsa-card-image-wrap {
        aspect-ratio: 2.1 / 1;
    }

    .vvsa-archive .vvsa-card-body {
        padding: 22px;
    }

    .vvsa-archive .vvsa-card-title {
        font-size: 23px;
    }
}


/* ==========================================================
   15. MOBILE
========================================================== */

@media (max-width: 767px) {

    .vvsa-archive .vvsa-services {
        padding: 55px 0 65px;
    }

    .vvsa-archive .vvsa-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .vvsa-archive .vvsa-service-card {
        min-height: 0;
        border-radius: 18px;
    }

    .vvsa-archive .vvsa-card-image-wrap {
        aspect-ratio: 2 / 1;
    }

    .vvsa-archive .vvsa-card-body {
        padding: 19px 20px 20px;
    }

    .vvsa-archive .vvsa-card-topline {
        margin-bottom: 10px;
    }

    .vvsa-archive .vvsa-card-title {
        font-size: 23px;
        margin-bottom: 9px;
    }

    .vvsa-archive .vvsa-card-excerpt {
        font-size: 16px !important;
        line-height: 1.65 !important;

        margin-bottom: 16px;
    }

    .vvsa-archive .vvsa-card-bottom {
        padding-top: 12px;
    }

    .vvsa-archive .vvsa-card-arrow {
        width: 40px;
        height: 40px;
    }
}


/* ==========================================================
   16. SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    .vvsa-archive .vvsa-card-image-wrap {
        aspect-ratio: 1.9 / 1;
    }

    .vvsa-archive .vvsa-card-body {
        padding: 18px;
    }

    .vvsa-archive .vvsa-card-title {
        font-size: 22px;
    }

    .vvsa-archive .vvsa-card-excerpt {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}


/* ==========================================================
   17. TOUCH AND ACCESSIBILITY
========================================================== */

@media (hover: none) {

    .vvsa-archive .vvsa-service-card:hover {
        transform: none;
    }
}

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

    .vvsa-archive .vvsa-service-card,
    .vvsa-archive .vvsa-service-card::before,
    .vvsa-archive .vvsa-card-image,
    .vvsa-archive .vvsa-card-arrow {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================
   SERVICES ARCHIVE
   REMOVE FADED / BLURRY IMAGE BOTTOM
   CLEAN IMAGE-TO-CARD TRANSITION
===================================================== */

/* 01. Remove image overlays completely */

.vvsa-archive .vvsa-image-overlay {
    display: none !important;
}

.vvsa-archive .vvsa-service-card::after {
    display: none !important;
}

/* 02. Create a clean image crop area */

.vvsa-archive .vvsa-card-image-wrap {
    position: relative !important;

    width: 100% !important;
    height: 205px !important;

    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    background: #073b50 !important;
}

/* 03. Enlarge the actual image vertically
   to crop away its faded bottom */

.vvsa-archive .vvsa-card-image {
    display: block !important;

    width: 100% !important;
    height: 145% !important;

    max-width: none !important;

    object-fit: cover !important;
    object-position: center top !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    opacity: 1 !important;

    filter: none !important;

    transform: translateZ(0);
    transform-origin: center top;

    transition: transform .65s ease !important;
}

/* 04. Smooth zoom, without exposing bottom fade */

.vvsa-archive .vvsa-service-card:hover
.vvsa-card-image,

.vvsa-archive .vvsa-service-card:focus-within
.vvsa-card-image {
    transform: scale(1.045) translateZ(0);
    filter: none !important;
}

/* 05. Sharp join between image and content */

.vvsa-archive .vvsa-card-body {
    position: relative;

    margin: 0 !important;
    padding-top: 20px;

    border-top: none !important;
    box-shadow: none !important;

    background: transparent !important;
}

/* 06. Keep gradient filling hover */

.vvsa-archive .vvsa-service-card::before {
    background: linear-gradient(
        145deg,
        #08738a 0%,
        #065469 45%,
        #03283f 100%
    );
}

/* 07. Tablet */

@media (max-width: 1024px) {
    .vvsa-archive .vvsa-card-image-wrap {
        height: 195px !important;
    }
}

/* 08. Mobile */

@media (max-width: 767px) {
    .vvsa-archive .vvsa-card-image-wrap {
        height: 185px !important;
    }
}