/* ─────────────────────────────────────────────────────────────
   Dr. Deep Vaishnani — Portfolio Stylesheet
   Extracted from the inline <style> block in index.html.
   Organized top-to-bottom in the same order it renders:
   variables → reset → reusable classes → layout → sections → responsive.
   ───────────────────────────────────────────────────────────── */

:root {
    --bg-gradient-onyx: linear-gradient(to bottom right,
            hsl(240, 2%, 14%) 3%,
            hsl(0, 0%, 9%) 97%);
    --bg-gradient-jet: linear-gradient(160deg,
            hsl(240, 4%, 11%) 0%,
            hsl(240, 5%, 5%) 100%);
    --bg-gradient-yellow-1: linear-gradient(to bottom right,
            hsl(43, 100%, 64%) 0%,
            hsla(32, 100%, 62%, 0) 50%);
    --bg-gradient-yellow-2: linear-gradient(135deg,
            hsla(43, 100%, 64%, 0.28) 0%,
            hsla(32, 100%, 62%, 0) 59.86%), hsl(240, 4%, 9%);
    --border-gradient-onyx: linear-gradient(135deg,
            hsla(0, 0%, 100%, .4) 0%,
            hsla(0, 0%, 100%, .05) 45%,
            hsla(0, 0%, 100%, .18) 100%);
    --text-gradient-yellow: linear-gradient(to right,
            hsl(43, 100%, 66%),
            hsl(32, 100%, 60%));
    --jet: hsl(0, 0%, 10%);
    --onyx: hsl(240, 3%, 8%);
    --eerie-black-1: hsl(240, 6%, 6%);
    --eerie-black-2: hsl(240, 7%, 5%);
    --smoky-black: hsl(240, 24%, 2%);
    --panel-border: hsla(0, 0%, 100%, .1);
    --white-1: hsl(0, 0%, 100%);
    --white-2: hsl(0, 0%, 98%);
    --orange-yellow-crayola: hsl(43, 100%, 64%);
    --vegas-gold: hsl(45, 54%, 58%);
    --light-gray: hsl(0, 0%, 84%);
    --light-gray-70: hsla(0, 0%, 84%, 0.7);
    --accent-rose: hsl(340, 90%, 62%);
    --accent-azure: hsl(205, 100%, 58%);
    --accent-violet: hsl(265, 85%, 65%);
    --ff-poppins: 'Poppins', sans-serif;
    --fs-1: 24px;
    --fs-2: 18px;
    --fs-3: 17px;
    --fs-4: 16px;
    --fs-5: 15px;
    --fs-6: 14px;
    --fs-7: 13px;
    --fs-8: 11px;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
    --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
    --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
    --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
    --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease-in-out
}

*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

a {
    text-decoration: none
}

li {
    list-style: none
}

a,
button,
img,
span,
time {
    display: block
}

button {
    font: inherit;
    background: 0 0;
    border: none;
    text-align: left;
    cursor: pointer
}

input,
textarea {
    display: block;
    width: 100%;
    background: 0 0;
    font: inherit
}

::selection {
    background: var(--orange-yellow-crayola);
    color: var(--smoky-black)
}

:focus {
    outline-color: var(--orange-yellow-crayola)
}

html {
    font-family: var(--ff-poppins)
}

body {
    background: radial-gradient(ellipse 60% 45% at 12% 8%, hsla(43, 100%, 64%, .28) 0%, hsla(43, 100%, 64%, 0) 100%),
        radial-gradient(ellipse 55% 45% at 90% 12%, hsla(340, 95%, 62%, .2) 0%, hsla(340, 95%, 62%, 0) 100%),
        radial-gradient(ellipse 65% 55% at 88% 92%, hsla(205, 100%, 58%, .26) 0%, hsla(205, 100%, 58%, 0) 100%),
        radial-gradient(ellipse 55% 45% at 8% 88%, hsla(265, 90%, 65%, .18) 0%, hsla(265, 90%, 65%, 0) 100%),
        var(--smoky-black);
    background-attachment: fixed
}

.sidebar {
    position: relative;
    background: var(--eerie-black-2);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    padding: 15px;
    box-shadow: var(--shadow-1);
    z-index: 1
}

/* NOTE: article intentionally has NO backdrop-filter/filter/transform/position here.
   .modal-container lives inside article.about and relies on the real viewport
   as its containing block for position:fixed — any filter/backdrop-filter/transform
   (or a positioned ancestor with a non-auto z-index) would silently re-break the
   modal scroll fix. This exact mistake happened once already — see
   MODAL_SCROLL_BUG_SESSION_LOG.md — via a later CSS section that added
   backdrop-filter to `article` without updating this comment. */
article {
    background: var(--eerie-black-2);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    padding: 15px;
    box-shadow: var(--shadow-1);
    z-index: 1
}

.separator {
    width: 100%;
    height: 1px;
    background: var(--jet);
    margin: 16px 0
}

.icon-box {
    position: relative;
    background: var(--border-gradient-onyx);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: var(--orange-yellow-crayola);
    box-shadow: var(--shadow-1);
    z-index: 1
}

/* Cycle through the vibrant accent palette on repeating icon badges
   instead of a single flat yellow everywhere. */
.contact-item:nth-of-type(4n+2) .icon-box,
.timeline-item:nth-of-type(4n+2) .icon-box {
    color: var(--accent-rose)
}

.contact-item:nth-of-type(4n+3) .icon-box,
.timeline-item:nth-of-type(4n+3) .icon-box {
    color: var(--accent-azure)
}

.contact-item:nth-of-type(4n+4) .icon-box,
.timeline-item:nth-of-type(4n+4) .icon-box {
    color: var(--accent-violet)
}

.icon-box::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--eerie-black-1);
    border-radius: inherit;
    z-index: -1
}

article {
    display: none
}

article.active {
    display: block;
    animation: fade .5s ease backwards
}

@keyframes fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.h2,
.h3,
.h4,
.h5 {
    color: var(--white-2);
    text-transform: capitalize
}

.h2 {
    font-size: var(--fs-1)
}

.h3 {
    font-size: var(--fs-2)
}

.h4 {
    font-size: var(--fs-4)
}

.h5 {
    font-size: var(--fs-7);
    font-weight: var(--fw-500)
}

.article-title {
    position: relative;
    padding-bottom: 7px
}

.article-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 3px;
    background: var(--text-gradient-yellow);
    border-radius: 3px
}

.has-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

.has-scrollbar::-webkit-scrollbar-track {
    background: var(--onyx);
    border-radius: 5px
}

.has-scrollbar::-webkit-scrollbar-thumb {
    background: var(--orange-yellow-crayola);
    border-radius: 5px
}

.has-scrollbar::-webkit-scrollbar-button {
    width: 20px
}

.content-card {
    position: relative;
    background: var(--border-gradient-onyx);
    padding: 15px;
    padding-top: 45px;
    border-radius: 18px;
    box-shadow: var(--shadow-2);
    cursor: pointer;
    z-index: 1
}

.content-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--bg-gradient-jet);
    border-radius: inherit;
    z-index: -1
}

main {
    margin: 15px 12px;
    margin-bottom: 75px;
    min-width: 259px
}

.sidebar {
    margin-bottom: 15px;
    max-height: 112px;
    overflow: hidden;
    transition: var(--transition-2)
}

.sidebar.active {
    max-height: 405px
}

.sidebar-info {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px
}

.avatar-box {
    background: var(--bg-gradient-onyx);
    border-radius: 20px
}

.info-content .name {
    color: var(--white-2);
    font-size: var(--fs-3);
    font-weight: var(--fw-500);
    letter-spacing: -.25px;
    margin-bottom: 10px
}

.info-content .title {
    color: var(--white-1);
    background: var(--eerie-black-2);
    border: 1px solid var(--panel-border);
    font-size: var(--fs-8);
    font-weight: var(--fw-300);
    width: max-content;
    padding: 3px 12px;
    border-radius: 8px
}

.info_more-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    border-radius: 0 15px;
    font-size: 13px;
    color: var(--orange-yellow-crayola);
    background: var(--border-gradient-onyx);
    padding: 10px;
    box-shadow: var(--shadow-2);
    transition: var(--transition-1);
    z-index: 1
}

.info_more-btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: var(--bg-gradient-jet);
    transition: var(--transition-1);
    z-index: -1
}

.info_more-btn:focus,
.info_more-btn:hover {
    background: var(--bg-gradient-yellow-1)
}

.info_more-btn:focus::before,
.info_more-btn:hover::before {
    background: var(--bg-gradient-yellow-2)
}

.info_more-btn span {
    display: none
}

.sidebar-info_more {
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-2)
}

.sidebar.active .sidebar-info_more {
    opacity: 1;
    visibility: visible
}

.contacts-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

.contact-item {
    min-width: 100%;
    display: flex;
    align-items: center;
    gap: 16px
}

.contact-info {
    max-width: calc(100% - 46px);
    width: calc(100% - 46px)
}

.contact-title {
    color: var(--light-gray-70);
    font-size: var(--fs-8);
    text-transform: uppercase;
    margin-bottom: 2px
}

.contact-info :is(.contact-link, time, address) {
    color: var(--white-2);
    font-size: var(--fs-7)
}

.contact-info address {
    font-style: normal
}

.social-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    padding-bottom: 4px;
    padding-left: 7px
}

.social-item .social-link {
    color: var(--light-gray-70);
    font-size: 18px
}

.social-item .social-link:hover {
    color: var(--light-gray)
}

.navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: hsl(240, 3%, 10%);
    border: 1px solid var(--panel-border);
    border-top: 1px solid var(--panel-border);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-2);
    z-index: 5
}

.navbar-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0 10px
}

.navbar-link {
    color: var(--light-gray);
    font-size: var(--fs-8);
    padding: 20px 7px;
    transition: color var(--transition-1)
}

.navbar-link:focus,
.navbar-link:hover {
    color: var(--light-gray-70)
}

.navbar-link.active {
    color: var(--orange-yellow-crayola)
}

.about .article-title {
    margin-bottom: 15px
}

.about-text {
    color: var(--light-gray);
    font-size: var(--fs-6);
    font-weight: var(--fw-300);
    line-height: 1.6
}

.about-text p {
    margin-bottom: 15px
}

.service {
    margin-bottom: 35px
}

.service-title {
    margin-bottom: 20px
}

.service-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px
}

.service-item {
    position: relative;
    background: var(--border-gradient-onyx);
    padding: 20px;
    border-radius: 18px;
    box-shadow: var(--shadow-2);
    z-index: 1
}

.service-item::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--bg-gradient-jet);
    border-radius: inherit;
    z-index: -1
}

.service-icon-box {
    margin-bottom: 10px
}

.service-icon-box img {
    margin: auto
}

.service-content-box {
    text-align: center
}

.service-item-title {
    margin-bottom: 7px
}

.service-item-text {
    color: var(--light-gray);
    font-size: var(--fs-6);
    font-weight: var(--fw-3);
    line-height: 1.6
}

.testimonials {
    margin-bottom: 30px
}

.testimonials-title {
    margin-bottom: 20px
}

.testimonials-list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    margin: 0 -15px;
    padding: 25px 15px;
    padding-bottom: 35px;
    overflow-x: auto;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory
}

.testimonials-item {
    min-width: 100%;
    scroll-snap-align: center
}

.testimonials-avatar-box {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(15px, -25px);
    background: var(--bg-gradient-onyx);
    border-radius: 14px;
    box-shadow: var(--shadow-1)
}

.testimonials-item-title {
    margin-bottom: 7px
}

.testimonials-text {
    color: var(--light-gray);
    font-size: var(--fs-6);
    font-weight: var(--fw-300);
    line-height: 1.6;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: safe center;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 20;
    pointer-events: none;
    visibility: hidden
}

.modal-container::-webkit-scrollbar {
    display: none
}

.modal-container.active {
    pointer-events: all;
    visibility: visible
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: hsla(240, 20%, 2%, .6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    transition: var(--transition-1)
}

.overlay.active {
    opacity: .8;
    visibility: visible;
    pointer-events: all
}

.testimonials-modal {
    background: var(--eerie-black-2);
    position: relative;
    padding: 15px;
    margin: 15px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    box-shadow: var(--shadow-5);
    transform: scale(1.2);
    opacity: 0;
    transition: var(--transition-1);
    z-index: 2
}

.modal-container.active .testimonials-modal {
    transform: scale(1);
    opacity: 1
}

.main-content:has(.modal-container.active) .navbar {
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-1)
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--eerie-black-2);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-2);
    font-size: 18px;
    opacity: .7
}

.modal-close-btn:focus,
.modal-close-btn:hover {
    opacity: 1
}

.modal-avatar-box {
    background: var(--bg-gradient-onyx);
    width: max-content;
    border-radius: 14px;
    margin-bottom: 15px;
    box-shadow: var(--shadow-2)
}

.modal-img-wrapper>img {
    display: none
}

.modal-title {
    margin-bottom: 4px
}

.modal-content time {
    font-size: var(--fs-6);
    color: var(--light-gray-70);
    font-weight: var(--fw-300);
    margin-bottom: 10px
}

.modal-content p {
    color: var(--light-gray);
    font-size: var(--fs-6);
    font-weight: var(--fw-300);
    line-height: 1.6
}

.clients {
    margin-bottom: 15px
}

.clients-list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    margin: 0 -15px;
    padding: 25px;
    padding-bottom: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 25px
}

.clients-item {
    min-width: 50%;
    scroll-snap-align: start
}

.clients-item img {
    width: 100%;
    filter: grayscale(1);
    transition: var(--transition-1)
}

.clients-item img {
    filter: grayscale(1);
    transition: filter .3s ease
}

.clients-item:hover img {
    filter: grayscale(0)
}

.clients-item:active img {
    filter: grayscale(0)
}

.article-title {
    margin-bottom: 30px
}

.timeline {
    margin-bottom: 30px
}

.timeline .title-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px
}

.timeline-list {
    font-size: var(--fs-6);
    margin-left: 45px
}

.timeline-item {
    position: relative
}

.timeline-item:not(:last-child) {
    margin-bottom: 20px
}

.timeline-item-title {
    font-size: var(--fs-6);
    line-height: 1.3;
    margin-bottom: 7px
}

.timeline-list span {
    color: var(--vegas-gold);
    font-weight: var(--fw-400);
    line-height: 1.6
}

.timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: -25px;
    left: -30px;
    width: 1px;
    height: calc(100% + 50px);
    background: var(--jet)
}

.timeline-item::after {
    content: "";
    position: absolute;
    top: 5px;
    left: -33px;
    height: 6px;
    width: 6px;
    background: var(--text-gradient-yellow);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--jet)
}

.timeline-text {
    color: var(--light-gray);
    font-weight: var(--fw-300);
    line-height: 1.6
}

.skills-title {
    margin-bottom: 20px
}

.skills-list {
    padding: 20px
}

.skills-item:not(:last-child) {
    margin-bottom: 15px
}

.skill .title-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px
}

.skill .title-wrapper data {
    color: var(--light-gray);
    font-size: var(--fs-7);
    font-weight: var(--fw-300)
}

.skill-progress-bg {
    background: hsla(0, 0%, 100%, .08);
    width: 100%;
    height: 8px;
    border-radius: 10px
}

.skill-progress-fill {
    background: var(--text-gradient-yellow);
    height: 100%;
    border-radius: inherit
}

.filter-list {
    display: none
}

.filter-select-box {
    position: relative;
    margin-bottom: 25px
}

.filter-select {
    background: var(--eerie-black-2);
    position: relative;
    color: var(--light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    font-size: var(--fs-6);
    font-weight: var(--fw-300)
}

.filter-select.active .select-icon {
    transform: rotate(.5turn)
}

.select-list {
    background: var(--eerie-black-2);
    position: absolute;
    top: calc(100% + 6px);
    width: 100%;
    padding: 6px;
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    box-shadow: var(--shadow-3);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .15s ease-in-out
}

.filter-select.active+.select-list {
    opacity: 1;
    visibility: visible;
    pointer-events: all
}

.select-item button {
    background: var(--eerie-black-2);
    color: var(--light-gray);
    font-size: var(--fs-6);
    font-weight: var(--fw-300);
    text-transform: capitalize;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px
}

.select-item button:hover {
    --eerie-black-2: hsla(240, 2%, 24%, .6)
}

.project-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 10px
}

.project-item {
    display: none
}

.project-item.active {
    display: block;
    animation: scaleUp .25s ease forwards
}

@keyframes scaleUp {
    0% {
        transform: scale(.5)
    }

    100% {
        transform: scale(1)
    }
}

.project-item>a {
    width: 100%
}

.project-img {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 15px
}

.project-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 0 0;
    z-index: 1;
    transition: var(--transition-1)
}

.project-item>a:hover .project-img::before {
    background: hsla(0, 0%, 0%, .5)
}

.project-item-icon-box {
    --scale: 0.8;
    background: var(--jet);
    color: var(--orange-yellow-crayola);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--scale));
    font-size: 20px;
    padding: 18px;
    border-radius: 12px;
    opacity: 0;
    z-index: 1;
    transition: var(--transition-1)
}

.project-item>a:hover .project-item-icon-box {
    --scale: 1;
    opacity: 1
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-1)
}

.project-item>a:hover img {
    transform: scale(1.1)
}

.project-category,
.project-title {
    margin-left: 10px
}

.project-title {
    color: var(--white-2);
    font-size: var(--fs-5);
    font-weight: var(--fw-400);
    text-transform: capitalize;
    line-height: 1.3
}

.project-category {
    color: var(--light-gray-70);
    font-size: var(--fs-6);
    font-weight: var(--fw-300)
}

.publications {
    margin-bottom: 10px
}

.publications-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px
}

.publication-item>a {
    position: relative;
    background: var(--border-gradient-onyx);
    height: 100%;
    box-shadow: var(--shadow-4);
    border-radius: 16px;
    z-index: 1
}

.publication-item>a::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: var(--eerie-black-1);
    z-index: -1
}

.publication-banner-box {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden
}

.publication-banner-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-1)
}

.publication-item>a:hover .publication-banner-box img {
    transform: scale(1.1)
}

.publication-content {
    padding: 15px
}

.publication-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px
}

.publication-meta :is(.publication-category, time) {
    color: var(--light-gray-70);
    font-size: var(--fs-6);
    font-weight: var(--fw-300)
}

.publication-meta .dot {
    background: var(--light-gray-70);
    width: 4px;
    height: 4px;
    border-radius: 4px
}

.publication-title {
    margin-bottom: 10px;
    line-height: 1.3;
    transition: var(--transition-1)
}

.publication-item>a:hover .publication-title {
    color: var(--orange-yellow-crayola)
}

.publication-text {
    color: var(--light-gray);
    font-size: var(--fs-6);
    font-weight: var(--fw-300);
    line-height: 1.6
}

.mapbox {
    position: relative;
    height: 300px;
    width: 100%;
    border-radius: 16px;
    margin-top: 60px;
    border: 1px solid var(--jet);
    overflow: hidden
}

.mapbox figure {
    height: 100%
}

.mapbox iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(1) invert(1)
}

.contact-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin: 0 auto;
    align-items: center
}

.form-btn {
    position: relative;
    background: var(--border-gradient-onyx);
    color: var(--orange-yellow-crayola);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 18px;
    font-size: var(--fs-6);
    text-transform: capitalize;
    box-shadow: var(--shadow-3);
    z-index: 1;
    transition: var(--transition-1);
    width: auto
}

.form-btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--bg-gradient-jet);
    border-radius: inherit;
    z-index: -1;
    transition: var(--transition-1)
}

.form-btn:hover {
    background: var(--bg-gradient-yellow-1)
}

.form-btn:hover::before {
    background: var(--bg-gradient-yellow-2)
}

.form-btn:disabled {
    opacity: .7;
    cursor: not-allowed
}

.form-btn:disabled:hover {
    background: var(--border-gradient-onyx)
}

.form-btn:disabled:hover::before {
    background: var(--bg-gradient-jet)
}

@media (min-width:450px) {
    .clients-item {
        min-width: calc(33.33% - 10px)
    }

    .publication-banner-box,
    .project-img {
        height: auto
    }
}

@media (min-width:580px) {
    :root {
        --fs-1: 32px;
        --fs-2: 24px;
        --fs-3: 26px;
        --fs-4: 18px;
        --fs-6: 15px;
        --fs-7: 15px;
        --fs-8: 12px
    }

    .sidebar,
    article {
        width: 520px;
        margin-inline: auto;
        padding: 30px
    }

    .article-title {
        font-weight: var(--fw-600);
        padding-bottom: 15px
    }

    .article-title::after {
        width: 40px;
        height: 5px
    }

    .icon-box {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: 18px
    }

    main {
        margin-top: 60px;
        margin-bottom: 100px
    }

    .sidebar {
        max-height: 180px;
        margin-bottom: 30px
    }

    .sidebar.active {
        max-height: 584px
    }

    .sidebar-info {
        gap: 25px
    }

    .avatar-box {
        border-radius: 30px
    }

    .avatar-box img {
        width: 120px
    }

    .info-content .name {
        margin-bottom: 15px
    }

    .info-content .title {
        padding: 5px 18px
    }

    .info_more-btn {
        top: -30px;
        right: -30px;
        padding: 10px 15px
    }

    .info_more-btn span {
        display: block;
        font-size: var(--fs-8)
    }

    .separator {
        margin: 32px 0
    }

    .contacts-list {
        gap: 20px
    }

    .contact-info {
        max-width: calc(100% - 64px);
        width: calc(100% - 64px)
    }

    .navbar {
        border-radius: 20px 20px 0 0
    }

    .navbar-list {
        gap: 20px
    }

    .navbar-link {
        --fs-8: 14px
    }

    .about .article-title {
        margin-bottom: 20px
    }

    .about-text {
        margin-bottom: 40px
    }

    .service-item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 18px;
        padding: 30px
    }

    .service-icon-box {
        margin-bottom: 0;
        margin-top: 5px
    }

    .service-content-box {
        text-align: left
    }

    .testimonials-title {
        margin-bottom: 25px
    }

    .testimonials-list {
        gap: 30px;
        margin: 0 -30px;
        padding: 30px;
        padding-bottom: 35px
    }

    .content-card {
        padding: 30px;
        padding-top: 25px
    }

    .testimonials-avatar-box {
        transform: translate(30px, -30px);
        border-radius: 20px
    }

    .testimonials-avatar-box img {
        width: 80px
    }

    .testimonials-item-title {
        margin-bottom: 10px;
        margin-left: 95px
    }

    .testimonials-text {
        line-clamp: 2;
        -webkit-line-clamp: 2
    }

    .modal-container {
        padding: 20px
    }

    .testimonials-modal {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        gap: 25px;
        padding: 30px;
        border-radius: 20px
    }

    .modal-img-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .modal-avatar-box {
        border-radius: 18px;
        margin-bottom: 0
    }

    .modal-avatar-box img {
        width: 65px
    }

    .modal-img-wrapper>img {
        display: block;
        flex-grow: 1;
        width: 35px
    }

    .clients-list {
        gap: 50px;
        margin: 0 -30px;
        padding: 45px;
        scroll-padding-inline: 45px
    }

    .clients-item {
        min-width: calc(33.33% - 35px)
    }

    .timeline-list {
        margin-left: 65px
    }

    .timeline-item:not(:last-child)::before {
        left: -40px
    }

    .timeline-item::after {
        height: 8px;
        width: 8px;
        left: -43px
    }

    .skills-item:not(:last-child) {
        margin-bottom: 25px
    }

    .publication-banner-box,
    .project-img {
        border-radius: 16px
    }

    .publications-list {
        gap: 30px
    }

    .publication-content {
        padding: 25px
    }

    .mapbox {
        height: 380px;
        border-radius: 18px
    }

    .form-btn {
        --fs-6: 16px;
        padding: 16px 20px
    }
}

@media (min-width:768px) {

    .sidebar,
    article {
        width: 700px
    }

    .has-scrollbar::-webkit-scrollbar-button {
        width: 100px
    }

    .contacts-list {
        grid-template-columns: 1fr 1fr;
        gap: 30px 15px
    }

    .navbar-link {
        --fs-8: 15px
    }

    .testimonials-modal {
        gap: 35px;
        max-width: 680px
    }

    .modal-avatar-box img {
        width: 80px
    }

    .article-title {
        padding-bottom: 20px
    }

    .filter-select-box {
        display: none
    }

    .filter-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 25px;
        padding-left: 5px;
        margin-bottom: 30px
    }

    .filter-item button {
        color: var(--light-gray);
        font-size: var(--fs-5);
        transition: var(--transition-1)
    }

    .filter-item button:hover {
        color: var(--light-gray-70)
    }

    .filter-item button.active {
        color: var(--orange-yellow-crayola)
    }

    .publications-list,
    .project-list {
        grid-template-columns: 1fr 1fr
    }

    .form-btn {
        width: max-content;
        margin-left: auto
    }
}

@media (min-width:1024px) {
    :root {
        --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
        --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
        --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125)
    }

    .sidebar,
    article {
        width: 950px;
        box-shadow: var(--shadow-5)
    }

    main {
        margin-bottom: 60px
    }

    .main-content {
        position: relative;
        width: max-content;
        margin: auto
    }

    .navbar {
        position: absolute;
        bottom: auto;
        top: 0;
        left: auto;
        right: 0;
        width: max-content;
        border-radius: 20px;
        padding: 0 20px;
        box-shadow: none
    }

    /* Corner tab now sits at the top, so the extended blur layer needs
       to reach *downward* into the content below it instead of upward. */
    .navbar::before {
        inset: 0 0 auto 0;
        -webkit-mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);
        mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%)
    }

    .navbar::after {
        top: auto;
        bottom: 0;
        transform: translateY(100%);
        border-radius: 0 0 6px 6px
    }

    .navbar-list {
        gap: 30px;
        padding: 0 20px
    }

    .navbar-link {
        font-weight: var(--fw-500)
    }

    .service-list {
        grid-template-columns: 1fr 1fr;
        gap: 20px 25px
    }

    .testimonials-item {
        min-width: calc(50% - 15px)
    }

    .clients-item {
        min-width: calc(25% - 38px)
    }

    .project-list {
        grid-template-columns: repeat(3, 1fr)
    }

    .publication-banner-box {
        height: 230px
    }
}

@media (min-width:1250px) {
    body::-webkit-scrollbar {
        width: 20px
    }

    body::-webkit-scrollbar-track {
        background: var(--smoky-black)
    }

    body::-webkit-scrollbar-thumb {
        border: 5px solid var(--smoky-black);
        background: hsla(0, 0%, 100%, .1);
        border-radius: 20px;
        box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, .11), inset -1px -1px 0 hsla(0, 0%, 100%, .11)
    }

    body::-webkit-scrollbar-thumb:hover {
        background: hsla(0, 0%, 100%, .15)
    }

    body::-webkit-scrollbar-button {
        height: 60px
    }

    .sidebar,
    article {
        width: auto
    }

    article {
        min-height: 100%
    }

    main {
        max-width: 1200px;
        margin-inline: auto;
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 25px
    }

    .main-content {
        min-width: 75%;
        width: 75%;
        margin: 0
    }

    .sidebar {
        position: sticky;
        top: 60px;
        max-height: max-content;
        height: 100%;
        margin-bottom: 0;
        padding-top: 60px;
        z-index: 1
    }

    .sidebar-info {
        flex-direction: column
    }

    .avatar-box img {
        width: 150px
    }

    .info-content .name {
        white-space: nowrap;
        text-align: center
    }

    .info-content .title {
        margin: auto
    }

    .info_more-btn {
        display: none
    }

    .sidebar-info_more {
        opacity: 1;
        visibility: visible
    }

    .contacts-list {
        grid-template-columns: 1fr
    }

    .contact-info :is(.contact-link) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .contact-info :is(.contact-link, time, address) {
        --fs-7: 14px;
        font-weight: var(--fw-300)
    }

    .separator:last-of-type {
        margin: 15px 0;
        opacity: 0
    }

    .social-list {
        justify-content: center
    }

    .timeline-text {
        max-width: 700px
    }
}


/* ==========================================================================
   ANIMATION ENHANCEMENTS — PHASE 1 (reconciled, additive only)

   IMPORTANT DISCOVERY: assets/js/script.js already injects its own
   <style> block at runtime (cursor, magnetic buttons, scroll-reveal,
   ripple, page/modal transitions, and hover lifts on .service-item,
   .testimonials-item's child .content-card, .form-btn, .navbar-link,
   .service-icon-box). That injected block lands in <head> AFTER this
   stylesheet, so on any property the two of us both set, the JS
   version silently wins — nothing breaks, but duplicating it here was
   dead weight. This revised block removes every rule that only
   duplicated script.js, and keeps only what's genuinely new:
     - contact-item icon-box hover (script.js only covers service/timeline)
     - avatar image hover scale (separate from its rotation/fade)
     - clients-item IMAGE scale (script.js only lifts the whole <li>)
   Still never touches `article`, and never adds transform to an
   ancestor of .testimonials-avatar-box's containing block (.content-card
   already has its own position:relative, so this is safe regardless).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    .icon-box {
        transition: transform var(--transition-1);
    }

    .contact-item:hover .icon-box {
        transform: scale(1.08);
    }

    .avatar-box img {
        transition: transform var(--transition-2);
    }

    .avatar-box:hover img {
        transform: scale(1.05);
    }

    .clients-item img {
        transition: filter .3s ease, transform var(--transition-1);
    }

    .clients-item:hover img {
        transform: scale(1.06);
    }
}



/* ==========================================================================
   ANIMATION ENHANCEMENTS — FINAL POLISH (additive only)
   New premium touches not already covered by script.js's injected styles.
   Every rule below uses a pseudo-element or property that is NOT used
   anywhere else in this file, verified against both style.css and the
   <style> block script.js injects — so nothing here can be overridden
   by, or override, existing behaviour. Still never touches `article`,
   `body`'s own position/transform, or anything upstream of
   .modal-container's position:fixed containing block.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    /* --- Glass shimmer sweep: a soft diagonal light pass on hover.
       .service-item only — .content-card was deliberately excluded:
       its testimonials variant has an avatar image that intentionally
       pokes above the card edge (translateY(-25px) in the original
       CSS), so overflow:hidden there would clip it. Uses ::after
       (unused on .service-item), pointer-events:none so it never
       blocks clicks or hover detection. --- */
    .service-item {
        overflow: hidden;
    }

    .service-item::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(115deg, transparent 35%, hsla(0, 0%, 100%, .16) 50%, transparent 65%);
        background-size: 250% 250%;
        background-position: -40% -40%;
        border-radius: inherit;
        transition: background-position .7s ease;
    }

    .service-item:hover::after {
        background-position: 140% 140%;
    }

    /* --- Name: a slow, subtle gold shimmer sweep across the text.
       Kept understated (long duration, low contrast) to stay premium
       rather than flashy — this is a medical/research portfolio. --- */
    .info-content .name {
        background: linear-gradient(100deg,
            var(--white-2) 40%,
            var(--orange-yellow-crayola) 50%,
            var(--white-2) 60%);
        background-size: 250% 100%;
        background-position: 100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: dv-name-shimmer 6s ease-in-out infinite;
    }

    @keyframes dv-name-shimmer {
        0%, 100% { background-position: 100% 0; }
        50%      { background-position: 0 0; }
    }

    /* --- Avatar: pulsing ring, synchronized to the actual avatar swap.
       Previously this ran on its own independent 2.8s infinite loop,
       completely disconnected from the 4s JS rotation interval — visually
       the two drifted in and out of sync. Now the ring is idle by default
       and only plays once, exactly when changeAvatar() adds the
       `.dv-avatar-sync` class (see script.js) right as the new image
       appears — whether that's from the auto-rotation or a manual click. --- */
    .avatar-box {
        position: relative;
    }

    .avatar-box::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 24px;
        border: 1.5px solid hsla(43, 100%, 64%, .5);
        opacity: 0;
        pointer-events: none;
    }

    .avatar-box.dv-avatar-sync::after {
        animation: dv-avatar-pulse .9s ease-out;
    }

    @keyframes dv-avatar-pulse {
        0%   { transform: scale(1); opacity: .7; }
        100% { transform: scale(1.14); opacity: 0; }
    }

    /* --- Avatar rotation crossfade: script.js already toggles a
       `.fade-out` class on #avatar every 4s, but no CSS ever defined
       what that class does — so the swap was an instant, jarring cut.
       This gives it an actual smooth crossfade (opacity only). --- */
    #avatar {
        transition: opacity .3s ease;
    }

    #avatar.fade-out {
        opacity: 0;
    }

    /* --- Ambient background: a slow-drifting extra glow layer behind
       everything. Lives on body::before (a NEW pseudo-element — body's
       own position/transform/filter are untouched), so this cannot
       affect .modal-container's fixed positioning. --- */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: radial-gradient(ellipse 50% 40% at 50% 50%, hsla(205, 100%, 58%, .12) 0%, hsla(205, 100%, 58%, 0) 100%);
        animation: dv-ambient-drift 18s ease-in-out infinite;
    }

    @keyframes dv-ambient-drift {
        0%, 100% { transform: translate(-8%, -6%) scale(1); }
        50%      { transform: translate(8%, 6%) scale(1.15); }
    }
}

/* ==========================================================================
   ANIMATION ENHANCEMENTS — MOBILE FROZEN HEADER (additive only)
   Requested: on phone, freeze the identity card (avatar/name/title) at
   the top and let page content scroll underneath it — like a frozen row
   in a spreadsheet.

   .sidebar already has position:relative and a solid opaque background
   (line ~140) — only `position` and `z-index` change here, and only below
   580px (the same breakpoint the codebase already uses elsewhere for
   phone-only behavior, e.g. the "Show Contacts" eye-icon button).
   Desktop/tablet are completely untouched. Scoped to .sidebar only — not
   an ancestor of .modal-container (that lives inside article.about, a
   sibling branch), so this cannot affect the modal's fixed-position
   viewport fix.
   ========================================================================== */

@media (max-width: 580px) {
    .sidebar {
        position: sticky;
        top: 0;
        /* Above page content (article/.main-content sit at z-index:1 and,
           being later in the DOM, would otherwise paint over a same-z-index
           sticky sidebar as it scrolls beneath). Stays comfortably under
           the testimonials modal (z-index:20) and its overlay, so a modal
           opened while scrolled still displays correctly on top. */
        z-index: 8;
    }
}

/* ==========================================================================
   LIQUID GLASS — PREMIUM FROSTED-GLASS REDESIGN (additive only)
   v2 — PERFORMANCE PASS: the original version chained an SVG
   feTurbulence/feDisplacementMap filter onto backdrop-filter on the two
   biggest panels on the page (sidebar + article) and ran a continuous
   background-position animation on top of that. Custom SVG filters inside
   backdrop-filter are extremely expensive to composite (often fall back to
   software rendering), and on tall panels that's a per-frame cost — that
   combo was the main source of the lag/jank. Fixed here by:
     1. Dropping the SVG displacement filter entirely — plain blur+saturate
        only. Still reads as glass, costs a fraction as much to composite.
     2. Cutting blur radii roughly in half (26px→12px, 16px→9px) — blur
        cost scales with radius, so this is a large, direct saving.
     3. Removing backdrop-filter from tiny elements (icon chips, the modal
        close button, dropdown-item buttons) where a whole extra compositing
        layer bought almost no visible blur — solid translucent color there
        instead.
     4. Slowing the sidebar sheen sweep from 9s to 48s (near-static; still
        technically "liquid" motion without repainting every second) and
        lowering its opacity further.
     5. Lowering every alpha value substantially for a noticeably more
        see-through, "liquid" glass — especially .sidebar/article per
        request, which are now much closer to fully transparent.
   Same constraints as before still apply: BACKDROP-filter only, never
   `filter`/`transform`/`position` on `article` itself (see the note above
   the `article` rule near the top of this file — it's the containing block
   for .modal-container's fixed positioning).
   ========================================================================== */

:root {
    --eerie-black-1: hsla(240, 14%, 9%, .32);
    --eerie-black-2: hsla(240, 16%, 12%, .28);
    --bg-gradient-onyx: linear-gradient(to bottom right,
            hsla(240, 4%, 30%, .32) 3%,
            hsla(0, 0%, 20%, .28) 97%);
    --bg-gradient-jet: linear-gradient(160deg,
            hsla(240, 10%, 24%, .28) 0%,
            hsla(240, 14%, 11%, .32) 100%);

    /* Cheap, GPU-friendly blur — no SVG filter chained on anymore. */
    --liquid-blur: blur(12px) saturate(150%);
    --liquid-blur-soft: blur(9px) saturate(135%);
    --liquid-highlight:
        inset 0 1px 1px hsla(0, 0%, 100%, .3),
        inset 0 0 0 1px hsla(0, 0%, 100%, .06),
        inset 0 -14px 24px -18px hsla(0, 0%, 100%, .12);
}

/* --- The hero panels: very transparent, light blur only. ---
   will-change:backdrop-filter promotes each panel onto its own stable
   compositor layer, so the browser caches the blurred result instead of
   re-blending it on every paint above it (e.g. the custom cursor moving
   on every mousemove frame).
   IMPORTANT: `article` is deliberately EXCLUDED from this selector.
   backdrop-filter (like transform/filter/perspective) creates a new
   containing block for position:fixed descendants — and .modal-container
   (position:fixed) is a descendant of article.about. Applying
   backdrop-filter to article breaks the modal's fixed positioning against
   the real viewport (this happened before; see MODAL_SCROLL_BUG_SESSION_LOG.md).
   article gets a tint-only background further down (no blur) instead. */
.sidebar,
.testimonials-modal {
    background-color: hsla(240, 16%, 12%, .2);
    backdrop-filter: var(--liquid-blur);
    -webkit-backdrop-filter: var(--liquid-blur);
    will-change: backdrop-filter;
    border-radius: 30px;
    box-shadow: var(--shadow-1), var(--liquid-highlight);
}

article {
    background-color: hsla(240, 16%, 12%, .2);
    border-radius: 30px;
    box-shadow: var(--shadow-1), var(--liquid-highlight);
}

/* --- Mid-size surfaces: light blur. --- */
.content-card::before,
.service-item::before,
.info_more-btn::before,
.form-btn::before,
.publication-item>a::before,
.navbar,
.filter-select,
.select-list,
.info-content .title,
.project-item-icon-box {
    backdrop-filter: var(--liquid-blur-soft);
    -webkit-backdrop-filter: var(--liquid-blur-soft);
    will-change: backdrop-filter;
}

.project-item-icon-box {
    background: hsla(240, 16%, 12%, .34);
    border: 1px solid var(--panel-border);
    box-shadow: var(--liquid-highlight);
}

/* --- Tiny chips (icon badges, dropdown rows, modal close button): a
   translucent color only, no backdrop-filter — an extra compositing layer
   here costs more than the blur is worth at this size. --- */
.icon-box::before,
.select-item button,
.modal-close-btn {
    background: hsla(240, 16%, 12%, .34);
}

.content-card,
.service-item {
    border-radius: 26px;
    box-shadow: var(--shadow-2), var(--liquid-highlight);
}

.navbar {
    background: hsla(240, 18%, 10%, .3);
    box-shadow: var(--shadow-2), var(--liquid-highlight);
}

.filter-select,
.select-list {
    border-radius: 20px;
    background: hsla(240, 16%, 12%, .28);
}

.select-item button {
    border-radius: 12px;
}

.info-content .title {
    border-radius: 12px;
    background: hsla(240, 16%, 12%, .3);
}

.modal-close-btn {
    border-radius: 12px;
}

.info_more-btn {
    border-radius: 0 20px;
}

.icon-box {
    border-radius: 12px;
}

/* --- Avatars / round-cornered image frames ---
   .avatar-box is deliberately excluded from overflow:hidden here — its
   ::after pulsing sync-ring (see the `dv-avatar-sync` block above) sits
   4px *outside* the box via inset:-4px, and overflow:hidden would clip
   that ring to nothing. Its img already gets border-radius:inherit below,
   so it stays visually rounded without needing the clip. */
.testimonials-avatar-box,
.modal-avatar-box {
    overflow: hidden;
    border-radius: 26px;
    box-shadow: var(--liquid-highlight);
}

.avatar-box {
    border-radius: 26px;
    box-shadow: var(--liquid-highlight);
}

.avatar-box img,
.testimonials-avatar-box img,
.modal-avatar-box img {
    border-radius: inherit;
}

/* --- Cards, images, buttons: rounder corners for the liquid look --- */
.publication-item>a {
    border-radius: 22px;
}

.publication-banner-box {
    border-radius: 16px;
}

.project-img {
    border-radius: 22px;
}

.mapbox {
    border-radius: 22px;
}

.form-btn {
    border-radius: 22px;
    box-shadow: var(--shadow-3), var(--liquid-highlight);
}

.skill-progress-bg {
    border-radius: 12px;
}

/* --- Subtle top-edge sheen on the sidebar — slowed way down (9s → 48s)
   and dimmed further so it reads as a near-static gloss rather than a
   moving animation, per request. .sidebar only (position:relative is
   already set on it) — article is deliberately excluded, see note above. --- */
@media (prefers-reduced-motion: no-preference) {
    .sidebar::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient(120deg, transparent 35%, hsla(0, 0%, 100%, .06) 50%, transparent 65%);
        background-size: 260% 260%;
        background-position: -60% -60%;
        animation: dv-liquid-sheen 48s ease-in-out infinite;
    }

    @keyframes dv-liquid-sheen {
        0%, 100% { background-position: -60% -60%; }
        50%      { background-position: 120% 120%; }
    }
}