@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* =========================
   RESET
========================= */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #f7f7f5;
    color: #171717;
    font-family: "DM Sans", sans-serif;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================
   NAVBAR
========================= */

.navbar {
    width: 100%;
    min-height: 80px;
    padding: 0 7%;

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

    background: #f7f7f5;
    border-bottom: 1px solid #deded9;

    position: relative;
    z-index: 1000;
}

.logo {
    font-family: "Space Grotesk", sans-serif;
    font-size: 25px;
    font-weight: 700;
}

.logo span {
    color: #ff5c35;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-menu a {
    position: relative;
    padding: 10px 0;

    color: #555;
    font-size: 14px;
    font-weight: 500;

    transition: .2s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: #ff5c35;
}

.nav-menu a.active::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 2px;

    width: 100%;
    height: 2px;

    background: #ff5c35;
}

.nav-button {
    padding: 12px 20px;

    background: #171717;
    color: white;

    border-radius: 6px;

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

    transition: .2s ease;
}

.nav-button:hover {
    background: #ff5c35;
}


/* =========================
   GENERAL
========================= */

.section-label {
    display: block;

    margin-bottom: 18px;

    color: #ff5c35;

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

    letter-spacing: 2px;
}

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

    gap: 30px;
}

.section-heading h2 {
    font-family: "Space Grotesk", sans-serif;

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

    letter-spacing: -3px;
}


/* =========================
   HOME / HERO
========================= */

.hero {
    min-height: calc(100vh - 80px);

    padding: 80px 7%;

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

    align-items: center;
    gap: 60px;
}

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

.availability {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 13px;

    border: 1px solid #d8d8d2;
    border-radius: 30px;

    color: #555;

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

.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #45b36b;
}

.hero h1 {
    margin-top: 28px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(55px, 7vw, 95px);
    line-height: .9;

    letter-spacing: -5px;
}

.hero h1 strong {
    color: #ff5c35;
}

.hero-description {
    max-width: 550px;

    margin-top: 30px;

    color: #666;

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

.hero-buttons {
    display: flex;
    gap: 12px;

    margin-top: 35px;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 20px;

    border-radius: 6px;

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

    transition: .2s ease;
}

.primary-button {
    background: #ff5c35;
    color: white;
}

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

.secondary-button {
    border: 1px solid #ccc;
    background: transparent;
}

.secondary-button:hover {
    border-color: #171717;
}


/* =========================
   HERO VISUAL
========================= */

.hero-visual {
    position: relative;

    min-height: 500px;

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

.profile-photo {
    position: relative;

    width: 360px;
    height: 360px;

    padding: 5px;

    background: white;

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

    overflow: hidden;

    z-index: 2;
}

.profile-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: 50%;
}


/* =========================
   CODE CARD
========================= */

.code-card {
    width: 100%;
    max-width: 520px;

    overflow: hidden;

    background: #191919;

    border-radius: 10px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);
}

.code-header {
    min-height: 45px;

    padding: 0 18px;

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

    background: #242424;

    color: #aaa;

    font-family: monospace;
    font-size: 12px;
}

.dots {
    display: flex;
    gap: 5px;
}

.dots span {
    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #666;
}

.code-content {
    padding: 25px;

    color: #ddd;

    font-family: monospace;
    font-size: 13px;

    line-height: 2;
}

.number {
    display: inline-block;
    width: 30px;
    color: #666;
}

.code-purple {
    color: #c792ea;
}

.code-yellow {
    color: #ecc48d;
}

.code-green {
    color: #89ca78;
}

.indent {
    padding-left: 30px;
}

.indent-2 {
    padding-left: 60px;
}

.success {
    margin-top: 15px;
    padding: 9px 12px;

    background: #26352a;
    color: #8dd59a;

    border-radius: 4px;

    font-size: 11px;
}


/* =========================
   FLOATING CARDS
========================= */

.floating-card {
    position: absolute;

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

    padding: 14px 17px;

    background: white;

    border: 1px solid #ddd;
    border-radius: 8px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
}

.floating-card small {
    display: block;

    color: #999;

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

.floating-card strong {
    display: block;

    margin-top: 3px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 17px;
}

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

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

    background: #f1f1ed;

    border-radius: 6px;

    color: #ff5c35;

    font-family: monospace;
    font-size: 10px;
}

.orange-card {
    left: 0;
    top: 40px;
}

.sauce-card {
    right: 0;
    bottom: 40px;
}


/* =========================
   STATS
========================= */

.stats {
    margin: 0 7% 80px;

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

    border-top: 1px solid #d8d8d2;
    border-bottom: 1px solid #d8d8d2;
}

.stat-item {
    padding: 25px;

    text-align: center;

    border-right: 1px solid #d8d8d2;
}

.stat-item:last-child {
    border-right: none;
}

.stat-item strong {
    display: block;

    font-family: "Space Grotesk", sans-serif;

    font-size: 30px;
}

.stat-item span {
    display: block;

    margin-top: 5px;

    color: #777;

    font-size: 12px;
}


/* =========================
   HOME INTRODUCTION
========================= */

.home-introduction {
    padding: 100px 7%;

    display: grid;
    grid-template-columns: .35fr 1fr;

    gap: 60px;

    border-top: 1px solid #deded9;
}

.introduction-content h2 {
    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(40px, 5vw, 65px);
    line-height: 1;

    letter-spacing: -3px;
}

.introduction-content h2 span {
    color: #ff5c35;
}

.introduction-content p {
    max-width: 700px;

    margin-top: 25px;

    color: #666;

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


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

.qa-services {
    padding: 100px 7%;

    border-top: 1px solid #deded9;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 45px;
}

.service-card {
    min-height: 300px;

    padding: 32px;

    background: white;

    border: 1px solid #deded9;
    border-radius: 10px;

    transition: .2s ease;
}

.service-card:hover {
    transform: translateY(-4px);

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

.service-number {
    color: #ff5c35;

    font-family: monospace;
    font-size: 12px;
}

.service-card h3 {
    margin-top: 30px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 26px;
}

.service-card p {
    margin-top: 14px;

    color: #777;

    font-size: 14px;
    line-height: 1.7;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 22px;
}

.service-tags span,
.project-tags span,
.skill-list span {
    padding: 7px 10px;

    background: #f1f1ed;

    border-radius: 4px;

    color: #555;

    font-size: 10px;
    font-weight: 600;
}


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

.page-header {
    padding: 90px 7% 65px;

    border-bottom: 1px solid #deded9;
}

.page-header h1 {
    margin-top: 15px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(42px, 6vw, 68px);

    line-height: .9;

    letter-spacing: -5px;
}

.page-header h1 span {
    color: #ff5c35;
}

.page-header p {
    max-width: 650px;

    margin-top: 25px;

    color: #666;

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


/* =========================
   ABOUT
========================= */

.about-section {
    padding: 90px 7%;
}

.about-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;

    gap: 70px;

    align-items: start;
}

.about-image {
    max-width: 400px;
}

.about-image img {
    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border: 1px solid #ddd;
    border-radius: 10px;
}

.about-content h2 {
    font-family: "Space Grotesk", sans-serif;

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

    letter-spacing: -2px;
}

.about-content h2 span {
    color: #ff5c35;
}

.about-content p {
    margin-top: 20px;

    color: #666;

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

.about-info {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 30px;
}

.about-info-item {
    padding: 18px;

    background: white;

    border: 1px solid #ddd;
    border-radius: 7px;
}

.about-info-item small {
    display: block;

    color: #999;

    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.about-info-item strong {
    display: block;

    margin-top: 6px;

    font-family: "Space Grotesk", sans-serif;
}


/* =========================
   SKILLS
========================= */

.skills-section {
    padding: 90px 7%;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-top: 45px;
}

.skill-card {
    padding: 32px;

    background: white;

    border: 1px solid #ddd;
    border-radius: 10px;

    transition: .2s ease;
}

.skill-card:hover {
    transform: translateY(-4px);

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

.skill-card h3 {
    margin-top: 15px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 27px;
}

.skill-card p {
    margin-top: 12px;

    color: #777;

    font-size: 14px;
    line-height: 1.7;
}

.skill-list {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 22px;
}


/* =========================
   PROJECTS
========================= */

.projects-section {
    padding: 90px 7%;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

    margin-top: 45px;
}

.project-item {
    padding: 35px;

    background: white;

    border: 1px solid #ddd;
    border-radius: 10px;

    transition: .2s ease;
}

.project-item:hover {
    transform: translateY(-4px);

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

.project-item-number {
    color: #ff5c35;

    font-family: monospace;
    font-size: 12px;
}

.project-item h2 {
    margin-top: 40px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 38px;

    letter-spacing: -2px;
}

.project-item p {
    margin-top: 15px;

    color: #777;

    font-size: 14px;
    line-height: 1.7;
}

.project-item-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 22px;
}

.project-item-tags span {
    padding: 7px 10px;

    background: #f1f1ed;

    border-radius: 4px;

    color: #555;

    font-size: 10px;
    font-weight: 600;
}


/* =========================
   PROJECT CARD HOME
========================= */

.project-preview {
    padding: 100px 7%;

    border-top: 1px solid #deded9;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

    margin-top: 45px;
}

.project-card {
    padding: 35px;

    background: white;

    border: 1px solid #ddd;
    border-radius: 10px;

    transition: .2s ease;
}

.project-card:hover {
    transform: translateY(-4px);

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

.project-top {
    display: flex;
    justify-content: space-between;
}

.project-number {
    color: #ff5c35;

    font-family: monospace;
    font-size: 12px;
}

.project-arrow {
    font-size: 22px;
}

.project-card h3 {
    margin-top: 45px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 36px;
}

.project-card p {
    margin-top: 14px;

    color: #777;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================
   CONTACT
========================= */

.contact-section {
    padding: 90px 7%;
}

.contact-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;

    gap: 70px;

    align-items: start;
}

.contact-info h2 {
    font-family: "Space Grotesk", sans-serif;

    font-size: 52px;

    line-height: 1;

    letter-spacing: -3px;
}

.contact-info h2 span {
    color: #ff5c35;
}

.contact-info p {
    margin-top: 22px;

    color: #666;

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

.contact-details {
    margin-top: 30px;
}

.contact-detail {
    padding: 17px 0;

    border-bottom: 1px solid #ddd;
}

.contact-detail small {
    display: block;

    color: #999;

    font-size: 9px;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-detail strong {
    display: block;

    margin-top: 5px;
}

.contact-form {
    padding: 35px;

    background: white;

    border: 1px solid #ddd;
    border-radius: 10px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;
    font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;

    padding: 13px 14px;

    background: #f7f7f5;

    border: 1px solid #d5d5cf;
    border-radius: 5px;

    color: #171717;

    font-size: 14px;

    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #ff5c35;
}

.form-group textarea {
    min-height: 140px;

    resize: vertical;
}

.contact-form button {
    border: 0;
    cursor: pointer;
}


/* =========================
   CTA
========================= */

.home-cta {
    padding: 110px 7%;

    text-align: center;

    border-top: 1px solid #deded9;
}

.home-cta h2 {
    max-width: 850px;

    margin: auto;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(45px, 7vw, 85px);

    line-height: .95;

    letter-spacing: -4px;
}

.home-cta h2 span {
    color: #ff5c35;
}

.home-cta .primary-button {
    margin-top: 35px;
}


/* =========================
   FOOTER
========================= */

footer {
    min-height: 85px;

    padding: 25px 7%;

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

    border-top: 1px solid #deded9;

    color: #777;

    font-size: 12px;
}


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

@media (max-width: 1000px) {

    .navbar {
        padding-left: 5%;
        padding-right: 5%;
    }

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

    .hero-visual {
        max-width: 650px;
        margin: auto;
    }

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

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .about-image {
        max-width: 400px;
    }
}


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

@media (max-width: 700px) {

    .navbar {
        min-height: auto;

        padding: 18px 5%;

        flex-wrap: wrap;
    }

    .nav-menu {
        width: 100%;

        order: 3;

        justify-content: flex-start;

        gap: 20px;

        overflow-x: auto;
    }

    .nav-menu a {
        padding: 5px 0;

        white-space: nowrap;

        font-size: 12px;
    }

    .nav-button {
        display: none;
    }

    .hero {
        min-height: auto;

        padding: 60px 5%;

        gap: 50px;
    }

    .hero h1 {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: flex-start;
    }

    .hero-visual {
        min-height: 380px;
    }

    .code-card {
        transform: scale(.8);
    }

    .profile-photo {
        width: 105px;
        height: 105px;
    }

    .floating-card {
        transform: scale(.75);
    }

    .stats {
        grid-template-columns: 1fr 1fr;

        margin-left: 5%;
        margin-right: 5%;
    }

    .stat-item {
        padding: 20px 10px;

        border-bottom: 1px solid #d8d8d2;
    }

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

    .home-introduction,
    .qa-services,
    .project-preview,
    .home-cta,
    .about-section,
    .skills-section,
    .projects-section,
    .contact-section {
        padding-left: 5%;
        padding-right: 5%;
    }

    .home-introduction {
        grid-template-columns: 1fr;
    }

    .section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .service-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        padding: 65px 5% 50px;
    }

    .page-header h1 {
        font-size: 52px;

        letter-spacing: -3px;
    }

    .about-section,
    .skills-section,
    .projects-section,
    .contact-section {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-content h2,
    .contact-info h2 {
        font-size: 40px;
    }

    .about-info {
        grid-template-columns: 1fr;
    }

    .skills-grid {
        grid-template-columns: 1fr;
    }

    .projects-grid,
    .project-grid {
        grid-template-columns: 1fr;
    }

    .project-item h2 {
        font-size: 32px;
    }

    .project-card h3 {
        font-size: 32px;
    }

    .contact-form {
        padding: 25px;
    }

    footer {
        padding: 25px 5%;

        flex-direction: column;

        text-align: center;

        gap: 10px;
    }
}


/* ==================================================
   NAVBAR FIX
================================================== */

#navbar {
    display: block;
    width: 100%;
}

.navbar {
    position: relative;
    z-index: 9999;
}

.nav-menu a.active {
    color: #ff5c35;
}

.nav-menu a.active::after {
    width: 100%;
}

/* Mobile navbar */
.nav-toggle {
    display: none;
}

@media (max-width: 700px) {
    .navbar {
        flex-wrap: wrap;
        min-height: 72px;
        padding: 15px 5%;
    }

    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 8px;
        margin-left: auto;
        border: 1px solid #d8d8d2;
        border-radius: 6px;
        background: transparent;
        cursor: pointer;
    }

    .nav-toggle span {
        width: 100%;
        height: 2px;
        margin: 3px 0;
        background: #171717;
    }

    .nav-menu {
        width: 100%;
        order: 3;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 12px 0 0;
    }

    .navbar.menu-open .nav-menu {
        display: flex;
    }

    .nav-menu a {
        width: 100%;
        padding: 12px 0;
    }

    .nav-button {
        display: none;
    }
}


/* NAVBAR RESPONSIVE FIX */
#navbar{width:100%;}
.navbar{position:relative;z-index:9999;}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;background:#ff5c35;transition:width .2s ease;}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%;}
.nav-toggle{display:none;border:1px solid #d8d8d2;background:transparent;border-radius:6px;width:42px;height:42px;padding:8px;cursor:pointer;}
.nav-toggle span{display:block;width:100%;height:2px;margin:4px 0;background:#171717;transition:.2s;}
@media (max-width:700px){.nav-toggle{display:flex;flex-direction:column;justify-content:center;margin-left:auto;}.nav-menu{width:100%;order:3;display:none;flex-direction:column;align-items:stretch;gap:0;margin:12px 0 0;overflow:visible;}.navbar.menu-open .nav-menu{display:flex;}.nav-menu a{width:100%;padding:12px 0;white-space:nowrap;}.nav-button{display:none;}.navbar.menu-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}.navbar.menu-open .nav-toggle span:nth-child(2){opacity:0;}.navbar.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}}


/* =========================
   SUB-PAGES / PROJECT DETAILS
========================= */
.skills-grid-page,
.projects-page,
.content-section,
.detail-section,
.detail-grid,
.contact-page,
.project-detail-header {
    width: 100%;
}

.content-section {
    padding: 90px 7%;
}

.content-text {
    max-width: 800px;
}

.content-text h2,
.detail-section h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 45px;
    line-height: 1;
    letter-spacing: -2px;
}

.content-text p,
.detail-section p,
.detail-grid p {
    margin-top: 18px;
    color: #666;
    font-size: 15px;
    line-height: 1.8;
}

.about-box {
    padding: 30px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.about-box > span,
.skill-box > span {
    color: #ff5c35;
    font-family: monospace;
    font-size: 12px;
}

.about-box h3,
.skill-box h2,
.detail-grid h3 {
    margin-top: 18px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 27px;
}

.about-box p,
.skill-box p {
    margin-top: 12px;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}

.skills-grid-page {
    padding: 90px 7%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.skill-box {
    padding: 32px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: .2s ease;
}

.skill-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

.project-detail-header {
    padding: 90px 7% 65px;
    border-bottom: 1px solid #deded9;
}

.project-detail-header h1 {
    margin-top: 15px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(55px, 8vw, 95px);
    line-height: .9;
    letter-spacing: -5px;
}

.project-detail-header p {
    max-width: 650px;
    margin-top: 25px;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 25px;
}

.project-tags span {
    padding: 7px 10px;
    background: #f1f1ed;
    border-radius: 4px;
    color: #555;
    font-size: 10px;
    font-weight: 600;
}

.detail-section {
    padding: 75px 7%;
}

.detail-grid {
    padding: 0 7% 75px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
}

.document-list {
    margin-top: 30px;
    border-top: 1px solid #ddd;
}

.document-item {
    display: flex;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
}

.document-item:hover {
    color: #ff5c35;
}

.contact-page {
    padding: 100px 7%;
}

.contact-page h1 {
    margin-top: 15px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(55px, 8vw, 95px);
    line-height: .9;
    letter-spacing: -5px;
}

.contact-page h1 span {
    color: #ff5c35;
}

.contact-page > p {
    max-width: 650px;
    margin-top: 25px;
    color: #666;
    font-size: 16px;
}

.contact-list {
    max-width: 700px;
    margin-top: 45px;
    border-top: 1px solid #ddd;
}

.contact-list a {
    display: flex;
    justify-content: space-between;
    padding: 22px 0;
    border-bottom: 1px solid #ddd;
    font-family: "Space Grotesk", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.contact-list a:hover {
    color: #ff5c35;
}

/* Mobile navbar + sub-pages */
.nav-toggle { display: none; }

@media (max-width: 700px) {
    .navbar {
        min-height: auto;
        padding: 18px 5%;
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: block;
        width: 42px;
        height: 42px;
        padding: 8px;
        border: 1px solid #d5d5cf;
        border-radius: 6px;
        background: transparent;
        cursor: pointer;
    }

    .nav-toggle span {
        display: block;
        height: 2px;
        margin: 5px 0;
        background: #171717;
        transition: .2s;
    }

    .nav-menu {
        width: 100%;
        order: 3;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 15px;
        border-top: 1px solid #deded9;
    }

    .navbar.menu-open .nav-menu { display: flex; }

    .nav-menu a {
        padding: 13px 0;
        border-bottom: 1px solid #deded9;
    }

    .navbar.menu-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .navbar.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
    .navbar.menu-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .skills-grid-page,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .skills-grid-page,
    .content-section,
    .detail-section,
    .contact-page {
        padding: 60px 5%;
    }

    .detail-grid {
        padding: 0 5% 60px;
        gap: 40px;
    }

    .project-detail-header {
        padding: 65px 5% 50px;
    }

    .project-detail-header h1,
    .contact-page h1 {
        font-size: 52px;
        letter-spacing: -3px;
    }
}


/* ==================================================
   GITHUB PROJECT LINK
================================================== */

.projects-page .project-github {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}

.projects-page .project-github svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.projects-page .project-github .project-arrow {
    font-size: 18px;
    margin-left: 2px;
}

.projects-page .project-card:hover .project-github {
    color: #ff5c35;
}


/* =========================================================
   FINAL FIX - PROJECTS PAGE
   Scoped only to projects.html
========================================================= */

body:has(.projects-page) .projects-page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 42px 30px 60px;
}

body:has(.projects-page) .projects-page #project-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

body:has(.projects-page) .projects-page .project-card {
    width: 100%;
    min-width: 0;
    min-height: 340px;
    box-sizing: border-box;
    padding: 36px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body:has(.projects-page) .projects-page .project-card:hover {
    transform: translateY(-4px);
    border-color: #ff5c35;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

body:has(.projects-page) .projects-page .project-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body:has(.projects-page) .projects-page .project-number {
    color: #ff5c35;
    font-family: monospace;
    font-size: 12px;
}

body:has(.projects-page) .projects-page .project-github {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #555;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

body:has(.projects-page) .projects-page .project-github svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: currentColor;
}

body:has(.projects-page) .projects-page .project-github .project-arrow {
    margin-left: 1px;
    font-size: 18px;
    line-height: 1;
}

body:has(.projects-page) .projects-page .project-card:hover .project-github {
    color: #ff5c35;
}

body:has(.projects-page) .projects-page .project-card h3 {
    margin: 30px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

body:has(.projects-page) .projects-page .project-card p {
    max-width: 560px;
    margin: 14px 0 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}

body:has(.projects-page) .projects-page .project-tags {
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body:has(.projects-page) .projects-page .project-tags span {
    padding: 7px 10px;
    background: #f1f1ed;
    border-radius: 4px;
    color: #555;
    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   FINAL FIX - ABOUT PAGE
   Scoped only to about.html
========================================================= */

body:has(.content-section) .content-section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 30px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

body:has(.content-section) .content-text {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 800px;
    margin: 0 0 16px;
}

body:has(.content-section) .content-text h2 {
    margin: 0 0 25px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -2px;
}

body:has(.content-section) .content-text p {
    margin: 0 0 18px;
    color: #666;
    font-size: 15px;
    line-height: 1.8;
}

body:has(.content-section) .about-box {
    width: 100%;
    min-height: 250px;
    box-sizing: border-box;
    padding: 35px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body:has(.content-section) .about-box:hover {
    transform: translateY(-4px);
    border-color: #ff5c35;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

body:has(.content-section) .about-box > span {
    color: #ff5c35;
    font-family: monospace;
    font-size: 12px;
}

body:has(.content-section) .about-box h3 {
    margin: 30px 0 0;
    font-family: "Space Grotesk", sans-serif;
    font-size: 27px;
    line-height: 1.1;
}

body:has(.content-section) .about-box p {
    margin: 14px 0 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


/* Mobile */
@media (max-width: 700px) {

    body:has(.projects-page) .projects-page {
        padding: 50px 5%;
    }

    body:has(.projects-page) .projects-page #project-container {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    body:has(.projects-page) .projects-page .project-card {
        min-height: 310px;
        padding: 30px;
    }

    body:has(.projects-page) .projects-page .project-card h3 {
        margin-top: 40px;
        font-size: 32px;
    }

    body:has(.content-section) .content-section {
        grid-template-columns: 1fr;
        padding: 50px 5%;
        gap: 18px;
    }

    body:has(.content-section) .content-text {
        grid-column: auto;
        margin-bottom: 10px;
    }

    body:has(.content-section) .content-text h2 {
        font-size: 34px;
    }

    body:has(.content-section) .about-box {
        min-height: auto;
        padding: 30px;
    }
}


/* =========================
   CERTIFICATIONS & BOOTCAMPS
========================= */
.certifications-page {
    padding: 80px 7% 100px;
    display: grid;
    gap: 90px;
}

.certifications-section {
    width: 100%;
}

.certifications-heading {
    margin-bottom: 30px;
}

.certifications-heading h2 {
    margin-top: 12px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1;
    letter-spacing: -3px;
}

.certification-list {
    display: grid;
    gap: 16px;
}

.certification-card,
.certification-empty-card {
    padding: 30px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: .2s ease;
}

.certification-card {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 22px;
    align-items: start;
}

.certification-card:hover,
.certification-empty-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

.certification-number {
    color: #ff5c35;
    font-family: monospace;
    font-size: 12px;
    padding-top: 5px;
}

.certification-card h3,
.certification-empty-card h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 25px;
    line-height: 1.2;
}

.certification-card p,
.certification-empty-card p {
    margin-top: 10px;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}

.certification-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.certification-preview-card {
    padding: 32px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: .2s ease;
}

.certification-preview-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

.certification-preview-card h3 {
    margin-top: 18px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 25px;
    line-height: 1.2;
}

.certification-preview-card p {
    margin-top: 12px;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 700px) {
    .certification-preview-grid {
        grid-template-columns: 1fr;
    }

    .certifications-page {
        padding: 60px 5%;
        gap: 60px;
    }

    .certification-card {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}


/* ==================================================
   HOME - FULL PAGE SCROLL
   Scoped only to index.html (.home-page)
================================================== */

html:has(body.home-page) {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body.home-page {
    overflow-y: auto;
}

body.home-page main > section {
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Keep the Home navbar visible while moving between sections */
body.home-page #navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* Sections with naturally larger content may scroll internally instead of breaking layout */
@media (min-width: 769px) {
    /* Keep the original layout of each Home section.
       In particular, .hero must remain a CSS grid. */
    body.home-page .hero {
        min-height: calc(100vh - 80px);
        min-height: calc(100svh - 80px);
    }
}

@media (max-width: 768px) {
    body.home-page main > section {
        min-height: 100svh;
        padding-top: 100px;
        padding-bottom: 60px;
    }

    body.home-page .hero {
        min-height: 100svh;
    }
}


/* =========================
   HOME - STATS AT BOTTOM OF PAGE 2
   ========================= */
body.home-page .home-introduction {
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    align-content: space-between;
    row-gap: 24px;
}

body.home-page .home-stats {
    grid-column: 1 / -1;
    width: 100%;
    margin: 20px 0 0;
}

@media (max-width: 700px) {
    body.home-page .home-stats {
        margin-top: 10px;
    }
}

/* ==========================================
   HOME PAGE 2 - POLISHED INTRODUCTION
   Only affects the second Home section.
========================================== */
@media (min-width: 769px) {
    body.home-page .home-introduction {
        min-height: calc(100vh - 80px);
        min-height: calc(100svh - 80px);
        padding: 72px 7% 46px;
        grid-template-columns: 150px minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        column-gap: 55px;
        row-gap: 34px;
        align-items: center;
        align-content: center;
        position: relative;
        overflow: hidden;
    }


    body.home-page .home-introduction .section-label {
        align-self: start;
        padding-top: 10px;
        font-size: 13px;
        letter-spacing: 2px;
        line-height: 1.3;
    }

    body.home-page .introduction-content {
        max-width: 920px;
        position: relative;
        z-index: 1;
    }

    body.home-page .introduction-content h2 {
        max-width: 900px;
        margin: 0;
        font-size: clamp(38px, 4.2vw, 56px);
        line-height: 1.05;
        letter-spacing: -3px;
    }

    body.home-page .introduction-content p {
        max-width: 650px;
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.7;
    }

    body.home-page .home-stats {
        grid-column: 1 / -1;
        margin: 0;
        width: 100%;
        position: relative;
        z-index: 2;
        background: rgba(255,255,255,.55);
        border-top: 1px solid #d8d8d2;
        border-bottom: 1px solid #d8d8d2;
    }

    body.home-page .home-stats .stat-item {
        padding: 18px 20px;
        transition: transform .25s ease, background-color .25s ease;
    }

    body.home-page .home-stats .stat-item:hover {
        transform: translateY(-3px);
        background: rgba(255,255,255,.8);
    }

    body.home-page .home-stats .stat-item strong {
        font-size: 27px;
    }
}

@media (max-width: 768px) {
    body.home-page .home-introduction {
        min-height: 100svh;
        padding-top: 76px;
        padding-bottom: 34px;
        gap: 24px;
        align-content: center;
    }

    body.home-page .introduction-content h2 {
        font-size: clamp(34px, 9vw, 46px);
        letter-spacing: -1.5px;
    }

    body.home-page .introduction-content p {
        margin-top: 18px;
        font-size: 14px;
    }

    body.home-page .home-stats {
        margin: 0;
        width: 100%;
    }
}


/* ==================================================
   QA DOCUMENTATION - GITHUB LINKS
   Scoped to project detail pages only
================================================== */

.project-detail-header ~ main .document-item .github-icon,
body:has(.detail-section) .document-item .github-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex: 0 0 auto;
}

body:has(.detail-section) .document-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

body:has(.detail-section) .document-item span:nth-of-type(2) {
    margin-left: auto;
}

/* =========================================================
   PROJECTS - COMPACT SPACING
   Scoped only to projects.html
========================================================= */
body:has(.projects-page) .page-header {
    padding-bottom: 38px;
}

body:has(.projects-page) .page-header p {
    margin-top: 18px;
}

/* =========================================================
   HOME - KEEP COPYRIGHT INSIDE FINAL PAGE
========================================================= */
body.home-page .home-cta {
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    position: relative;
    padding-bottom: 115px;
}

body.home-page .home-cta #footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

body.home-page .home-cta footer {
    min-height: 65px;
    padding-top: 18px;
    padding-bottom: 18px;
}

/* ==================================================
   HOME - LEARNING & GROWTH
   Scoped only to the Home page
================================================== */
body.home-page .certification-preview {
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    padding: 90px 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.home-page .certification-preview .section-heading {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 42px;
}

body.home-page .certification-preview .section-heading h2 {
    margin-top: 14px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5.5vw, 72px);
    line-height: .95;
    letter-spacing: -3px;
}

body.home-page .certification-preview .view-all {
    flex-shrink: 0;
    margin-bottom: 5px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.home-page .certification-preview-grid {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

body.home-page .certification-preview-card {
    min-height: 250px;
    box-sizing: border-box;
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.home-page .certification-preview-card h3 {
    max-width: 500px;
    margin-top: 20px;
    font-size: clamp(24px, 2.5vw, 34px);
}

body.home-page .certification-preview-card p {
    max-width: 500px;
    margin-top: 18px;
    font-size: 15px;
}

@media (max-width: 700px) {
    body.home-page .certification-preview {
        min-height: 100svh;
        padding: 75px 5%;
    }

    body.home-page .certification-preview .section-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 30px;
    }

    body.home-page .certification-preview .section-heading h2 {
        letter-spacing: -2px;
    }

    body.home-page .certification-preview-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    body.home-page .certification-preview-card {
        min-height: 190px;
        padding: 28px;
    }
}

/* ==================================================
   HOME - TECHNICAL SKILLS / QA TOOLKIT
   Scoped only to the Home page
================================================== */
body.home-page .home-skills {
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    padding: 88px 7% 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.home-page .home-skills-heading {
    max-width: 850px;
    margin-bottom: 42px;
}

body.home-page .home-skills-heading .section-label {
    font-size: 12px;
    letter-spacing: 2px;
}

body.home-page .home-skills-heading h2 {
    margin-top: 12px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(38px, 5vw, 64px);
    line-height: .98;
    letter-spacing: -3px;
}

body.home-page .home-skills-heading p {
    max-width: 650px;
    margin-top: 18px;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}

body.home-page .home-skills-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.home-page .home-skill-card {
    min-height: 265px;
    padding: 28px 30px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 20px;
    border: 1px solid #d8d8d2;
    background: rgba(255,255,255,.35);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

body.home-page .home-skill-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.75);
    box-shadow: 0 18px 38px rgba(0,0,0,.07);
}

body.home-page .home-skill-number {
    font-family: monospace;
    font-size: 12px;
    color: #ff5c35;
    letter-spacing: 1px;
    padding-top: 3px;
}

body.home-page .home-skill-category {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #777;
}

body.home-page .home-skill-card h3 {
    margin-top: 9px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(23px, 2.1vw, 30px);
    line-height: 1.05;
    letter-spacing: -1px;
}

body.home-page .home-skill-card p {
    max-width: 520px;
    margin-top: 12px;
    color: #777;
    font-size: 13px;
    line-height: 1.65;
}

body.home-page .home-skill-tags {
    margin-top: 17px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body.home-page .home-skill-tags span {
    padding: 6px 9px;
    border: 1px solid #d8d8d2;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    background: #fff;
}

@media (max-width: 900px) {
    body.home-page .home-skills {
        padding: 80px 5% 65px;
    }

    body.home-page .home-skills-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    body.home-page .home-skills {
        padding: 75px 5% 55px;
        justify-content: flex-start;
    }

    body.home-page .home-skills-heading {
        margin-bottom: 28px;
    }

    body.home-page .home-skills-heading h2 {
        letter-spacing: -2px;
    }

    body.home-page .home-skill-card {
        min-height: 0;
        padding: 23px;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 14px;
    }
}

/* ==================================================
   HOME - SKILLS COMPACT 3 x 2 LAYOUT
================================================== */
body.home-page .home-skills {
    padding: 58px 5.5% 52px;
    justify-content: center;
}

body.home-page .home-skills-heading {
    max-width: 760px;
    margin-bottom: 24px;
}

body.home-page .home-skills-heading .section-label {
    font-size: 10px;
    letter-spacing: 1.8px;
}

body.home-page .home-skills-heading h2 {
    margin-top: 7px;
    font-size: clamp(30px, 3.5vw, 46px);
    letter-spacing: -2px;
}

body.home-page .home-skills-heading p {
    max-width: 620px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
}

body.home-page .home-skills-grid {
    max-width: 1180px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.home-page .home-skill-card {
    min-height: 0;
    height: 185px;
    padding: 19px 20px;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 12px;
}

body.home-page .home-skill-number {
    font-size: 10px;
    letter-spacing: .7px;
}

body.home-page .home-skill-category {
    font-size: 9px;
    letter-spacing: 1.1px;
}

body.home-page .home-skill-card h3 {
    margin-top: 6px;
    font-size: 20px;
    letter-spacing: -.7px;
}

body.home-page .home-skill-card p {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.45;
}

body.home-page .home-skill-tags {
    margin-top: 10px;
    gap: 5px;
}

body.home-page .home-skill-tags span {
    padding: 5px 7px;
    font-size: 9px;
}

@media (max-width: 900px) {
    body.home-page .home-skills {
        padding: 65px 5% 55px;
    }

    body.home-page .home-skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.home-page .home-skill-card {
        height: auto;
        min-height: 175px;
    }
}

@media (max-width: 600px) {
    body.home-page .home-skills {
        padding: 70px 5% 50px;
        justify-content: flex-start;
    }

    body.home-page .home-skills-grid {
        grid-template-columns: 1fr;
    }

    body.home-page .home-skill-card {
        min-height: 0;
        height: auto;
    }
}


/* ==================================================
   HOME - FINAL SKILLS FIT & MOBILE HERO FIX
   Scoped only to index.html (.home-page)
================================================== */
body.home-page .home-skills {
    min-height: calc(100svh - 0px);
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    padding: 42px 5% 38px;
}

body.home-page .home-skills-heading {
    margin-bottom: 18px;
}

body.home-page .home-skills-heading h2 {
    font-size: clamp(28px, 3.1vw, 42px);
}

body.home-page .home-skills-heading p {
    font-size: 11px;
    margin-top: 7px;
}

body.home-page .home-skills-grid {
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.home-page .home-skill-card {
    height: 176px;
    min-height: 0;
    padding: 17px 18px;
}

@media (max-width: 1100px) and (min-width: 901px) {
    body.home-page .home-skills {
        padding-top: 38px;
        padding-bottom: 32px;
    }
    body.home-page .home-skill-card {
        height: 165px;
        padding: 15px 16px;
    }
}

@media (max-width: 900px) {
    body.home-page .home-skills {
        height: auto;
        max-height: none;
        min-height: 100svh;
        overflow: visible;
        padding: 58px 5% 45px;
    }
}

@media (max-width: 768px) {
    body.home-page .hero {
        min-height: 100svh;
        height: 100svh;
        box-sizing: border-box;
        padding: 76px 5% 30px;
        gap: 14px;
        grid-template-columns: minmax(0, 1fr) 150px;
        grid-template-rows: 1fr;
        align-items: center;
    }

    body.home-page .hero-content {
        align-self: center;
        min-width: 0;
    }

    body.home-page .hero-visual {
        min-height: 0;
        height: auto;
        align-self: center;
    }

    body.home-page .profile-photo {
        width: 140px;
        height: 140px;
    }

    body.home-page .hero h1 {
        font-size: clamp(38px, 9vw, 56px);
        letter-spacing: -3px;
        line-height: .92;
    }

    body.home-page .hero-description {
        font-size: 13px;
        line-height: 1.55;
        margin-top: 18px;
    }

    body.home-page .hero-buttons {
        margin-top: 22px;
        flex-wrap: wrap;
    }

    body.home-page .home-skills {
        padding-top: 72px;
        padding-bottom: 42px;
    }

    body.home-page .home-skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }
}

@media (max-width: 600px) {
    body.home-page .hero {
        grid-template-columns: minmax(0, 1fr) 112px;
        padding-top: 70px;
        gap: 8px;
    }

    body.home-page .profile-photo {
        width: 104px;
        height: 104px;
    }

    body.home-page .hero h1 {
        font-size: clamp(31px, 10vw, 44px);
        letter-spacing: -2px;
    }

    body.home-page .home-skills {
        height: auto;
        min-height: 100svh;
    }

    body.home-page .home-skills-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================
   FINAL RESPONSIVE POLISH
   Home skills stays 3 x 2 and fits one viewport
================================================== */
body.home-page .home-skills {
    box-sizing: border-box;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    padding: clamp(28px, 4vh, 44px) 5% clamp(24px, 3vh, 36px);
}

body.home-page .home-skills-heading {
    max-width: 700px;
    margin-bottom: clamp(12px, 2vh, 20px);
}

body.home-page .home-skills-heading .section-label {
    font-size: 9px;
    letter-spacing: 1.5px;
}

body.home-page .home-skills-heading h2 {
    font-size: clamp(25px, 2.8vw, 38px);
    line-height: .95;
    letter-spacing: -1.7px;
}

body.home-page .home-skills-heading p {
    max-width: 570px;
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.4;
}

body.home-page .home-skills-grid {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 9px;
    flex: 1;
    min-height: 0;
}

body.home-page .home-skill-card {
    height: auto;
    min-height: 0;
    padding: 14px 15px;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
}

body.home-page .home-skill-number {
    font-size: 9px;
    letter-spacing: .5px;
}

body.home-page .home-skill-category {
    font-size: 8px;
    letter-spacing: .9px;
}

body.home-page .home-skill-card h3 {
    margin-top: 4px;
    font-size: clamp(15px, 1.5vw, 19px);
    letter-spacing: -.45px;
    line-height: 1;
}

body.home-page .home-skill-card p {
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.35;
}

body.home-page .home-skill-tags {
    margin-top: 7px;
    gap: 3px;
}

body.home-page .home-skill-tags span {
    padding: 3px 5px;
    font-size: 7px;
    line-height: 1.1;
    white-space: nowrap;
}

/* Keep the 3 x 2 composition when the viewport is reduced. */
@media (max-width: 900px) {
    body.home-page .home-skills {
        padding: 30px 4% 26px;
    }

    body.home-page .home-skills-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body.home-page .home-skill-card {
        padding: 11px 10px;
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 6px;
    }

    body.home-page .home-skill-card h3 {
        font-size: 14px;
    }

    body.home-page .home-skill-card p {
        font-size: 8px;
    }

    body.home-page .home-skill-tags span {
        font-size: 6.5px;
        padding: 3px 4px;
    }
}

@media (max-width: 600px) {
    body.home-page .home-skills {
        padding: 25px 3.5% 22px;
    }

    body.home-page .home-skills-heading {
        margin-bottom: 10px;
    }

    body.home-page .home-skills-heading h2 {
        font-size: 24px;
        letter-spacing: -1px;
    }

    body.home-page .home-skills-heading p {
        font-size: 8px;
        max-width: 95%;
    }

    body.home-page .home-skills-grid {
        gap: 6px;
    }

    body.home-page .home-skill-card {
        padding: 9px 8px;
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 4px;
        border-radius: 5px;
    }

    body.home-page .home-skill-number,
    body.home-page .home-skill-category {
        font-size: 6px;
    }

    body.home-page .home-skill-card h3 {
        margin-top: 3px;
        font-size: 11px;
    }

    body.home-page .home-skill-card p {
        margin-top: 3px;
        font-size: 6.5px;
        line-height: 1.25;
    }

    body.home-page .home-skill-tags {
        margin-top: 5px;
        gap: 2px;
    }

    body.home-page .home-skill-tags span {
        padding: 2px 3px;
        font-size: 5px;
    }
}

/* ==================================================
   INNER PAGE HEADERS - SMALLER & CLEANER
   About / Skills / Projects / Certifications / Contact
================================================== */
body:not(.home-page) .page-header {
    padding: 62px 7% 42px;
}

body:not(.home-page) .page-header .section-label {
    font-size: 9px;
    letter-spacing: 1.6px;
}

body:not(.home-page) .page-header h1 {
    margin-top: 10px;
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: .95;
    letter-spacing: -3px;
}

body:not(.home-page) .page-header p {
    max-width: 590px;
    margin-top: 15px;
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    body:not(.home-page) .page-header {
        padding: 48px 5% 34px;
    }

    body:not(.home-page) .page-header h1 {
        font-size: 38px;
        letter-spacing: -2px;
    }

    body:not(.home-page) .page-header p {
        margin-top: 11px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    body:not(.home-page) .page-header {
        padding: 40px 5% 28px;
    }

    body:not(.home-page) .page-header h1 {
        font-size: 31px;
        letter-spacing: -1.5px;
    }

    body:not(.home-page) .page-header p {
        font-size: 10px;
        line-height: 1.5;
    }
}

/* ==================================================
   RESPONSIVE POLISH - HOME TECHNICAL SKILLS
   Cards may reflow on smaller screens so text stays
   inside each card instead of being forced into 3 columns.
================================================== */
body.home-page .home-skill-card,
body.home-page .home-skill-card > div {
    min-width: 0;
    box-sizing: border-box;
}

body.home-page .home-skill-card p {
    overflow-wrap: anywhere;
    word-break: normal;
}

body.home-page .home-skill-tags {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

body.home-page .home-skill-tags span {
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    body.home-page .home-skills {
        height: auto;
        min-height: 100svh;
        max-height: none;
        overflow: visible;
    }

    body.home-page .home-skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        flex: 0 0 auto;
    }

    body.home-page .home-skill-card {
        height: auto;
        min-height: 170px;
    }

    body.home-page .home-skill-card p {
        font-size: 9px;
    }

    body.home-page .home-skill-tags span {
        font-size: 7px;
    }
}

@media (max-width: 560px) {
    body.home-page .home-skills {
        padding: 34px 5% 38px;
    }

    body.home-page .home-skills-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    body.home-page .home-skill-card {
        min-height: 0;
        padding: 14px 15px;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 8px;
    }

    body.home-page .home-skill-card h3 {
        font-size: 17px;
        line-height: 1.1;
    }

    body.home-page .home-skill-card p {
        font-size: 9px;
        line-height: 1.4;
    }

    body.home-page .home-skill-tags span {
        font-size: 7px;
        padding: 3px 5px;
    }
}

/* ==================================================
   INNER PAGE HEADERS - CLEANER TYPOGRAPHY
   About / Skills / Projects / Certifications / Contact
================================================== */
body:not(.home-page) .page-header {
    position: relative;
    padding: 72px 7% 46px;
    max-width: 980px;
}

body:not(.home-page) .page-header .section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
}

body:not(.home-page) .page-header .section-label::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .7;
}

body:not(.home-page) .page-header h1 {
    margin: 13px 0 0;
    max-width: 820px;
    font-size: clamp(38px, 5vw, 58px);
    line-height: .98;
    letter-spacing: -2.8px;
    text-wrap: balance;
}

body:not(.home-page) .page-header h1 span {
    display: inline-block;
}

body:not(.home-page) .page-header p {
    max-width: 620px;
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.65;
    opacity: .78;
}

@media (max-width: 768px) {
    body:not(.home-page) .page-header {
        padding: 54px 6% 36px;
    }

    body:not(.home-page) .page-header h1 {
        max-width: 620px;
        font-size: clamp(34px, 7vw, 46px);
        letter-spacing: -2px;
    }

    body:not(.home-page) .page-header p {
        margin-top: 13px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    body:not(.home-page) .page-header {
        padding: 44px 6% 30px;
    }

    body:not(.home-page) .page-header .section-label {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    body:not(.home-page) .page-header .section-label::before {
        width: 20px;
    }

    body:not(.home-page) .page-header h1 {
        margin-top: 11px;
        font-size: 32px;
        line-height: 1;
        letter-spacing: -1.4px;
    }

    body:not(.home-page) .page-header p {
        font-size: 10px;
        line-height: 1.55;
    }
}


/* ==================================================
   FINAL PAGE HEADING + HOME SKILLS RESPONSIVE FIX
================================================== */
body:not(.home-page) .page-header .section-label {
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 700;
    letter-spacing: 2.6px;
    line-height: 1;
    gap: 12px;
}

body:not(.home-page) .page-header .section-label::before {
    width: 34px;
    height: 2px;
    opacity: .8;
}

body:not(.home-page) .page-header h1 {
    font-size: clamp(42px, 5.4vw, 64px);
    line-height: .96;
    letter-spacing: -3px;
    margin-top: 15px;
}

body:not(.home-page) .page-header p {
    font-size: 13px;
    line-height: 1.65;
    max-width: 650px;
}

/* Home Technical Skills: readable on every screen size */
body.home-page .home-skills {
    height: 100svh;
    min-height: 620px;
    max-height: none;
    overflow: hidden;
    box-sizing: border-box;
    padding: clamp(42px, 6vh, 70px) 5% clamp(34px, 5vh, 56px);
}

body.home-page .home-skills-heading {
    margin-bottom: clamp(22px, 3vh, 32px);
}

body.home-page .home-skills-heading .section-label {
    font-size: 11px;
    letter-spacing: 2px;
}

body.home-page .home-skills-heading h2 {
    font-size: clamp(30px, 3.3vw, 44px);
    line-height: 1;
    letter-spacing: -2px;
}

body.home-page .home-skills-heading p {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.55;
    max-width: 620px;
}

body.home-page .home-skills-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    min-height: 0;
}

body.home-page .home-skill-card {
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 20px 21px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

body.home-page .home-skill-number {
    font-size: 11px;
}

body.home-page .home-skill-category {
    font-size: 10px;
    letter-spacing: 1.1px;
}

body.home-page .home-skill-card h3 {
    font-size: clamp(18px, 1.7vw, 23px);
    line-height: 1.05;
    margin-top: 5px;
    overflow-wrap: anywhere;
}

body.home-page .home-skill-card p {
    font-size: 11px;
    line-height: 1.45;
    margin-top: 8px;
    overflow-wrap: anywhere;
}

body.home-page .home-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    min-width: 0;
}

body.home-page .home-skill-tags span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    padding: 5px 7px;
    font-size: 8px;
    line-height: 1.2;
}

@media (max-width: 900px) {
    body.home-page .home-skills {
        min-height: 0;
        padding: 38px 4% 34px;
    }

    body.home-page .home-skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        gap: 12px;
    }

    body.home-page .home-skill-card {
        padding: 17px 16px;
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 9px;
    }

    body.home-page .home-skill-card h3 { font-size: 19px; }
    body.home-page .home-skill-card p { font-size: 10px; }
}

@media (max-width: 600px) {
    body.home-page .home-skills {
        height: auto;
        min-height: 100svh;
        max-height: none;
        overflow-y: auto;
        padding: 34px 6% 42px;
    }

    body.home-page .home-skills-heading {
        margin-bottom: 22px;
    }

    body.home-page .home-skills-heading .section-label { font-size: 10px; }
    body.home-page .home-skills-heading h2 {
        font-size: 30px;
        letter-spacing: -1.5px;
    }
    body.home-page .home-skills-heading p { font-size: 11px; }

    body.home-page .home-skills-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 12px;
    }

    body.home-page .home-skill-card {
        min-height: 145px;
        padding: 18px;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
    }

    body.home-page .home-skill-card h3 { font-size: 20px; }
    body.home-page .home-skill-card p {
        font-size: 11px;
        line-height: 1.5;
    }
    body.home-page .home-skill-tags span { font-size: 8px; }

    body:not(.home-page) .page-header {
        padding: 50px 7% 34px;
    }
    body:not(.home-page) .page-header .section-label {
        font-size: 11px;
        letter-spacing: 2px;
    }
    body:not(.home-page) .page-header .section-label::before { width: 27px; }
    body:not(.home-page) .page-header h1 {
        font-size: 38px;
        letter-spacing: -2px;
    }
}

@media (max-width: 400px) {
    body.home-page .home-skill-card { min-height: 150px; }
    body:not(.home-page) .page-header h1 { font-size: 34px; }
}

/* Final fix: Home Technical Skills readability and overflow */
body.home-page .home-skills {
    height: auto;
    min-height: 100svh;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
}

body.home-page .home-skills-grid {
    align-items: stretch;
    grid-auto-rows: minmax(0, auto);
}

body.home-page .home-skill-card {
    height: 100%;
    min-height: 0;
    overflow: visible;
}

body.home-page .home-skill-card p,
body.home-page .home-skill-card h3,
body.home-page .home-skill-tags {
    min-width: 0;
    max-width: 100%;
}

body.home-page .home-skill-tags span {
    font-size: 11px;
    line-height: 1.25;
    padding: 6px 9px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    body.home-page .home-skill-tags span {
        font-size: 10.5px;
        padding: 5px 8px;
    }
}

@media (max-width: 600px) {
    body.home-page .home-skills {
        height: auto;
        min-height: 100svh;
        overflow: visible;
    }

    body.home-page .home-skill-card {
        min-height: 150px;
        height: auto;
    }

    body.home-page .home-skill-tags span {
        font-size: 11px;
        padding: 6px 8px;
    }
}


/* ==================================================
   FINAL FIX - HOME TECHNICAL SKILL FULL PAGE
   Content must never be clipped by viewport height.
================================================== */
body.home-page .home-skills {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box;
    padding: 88px 7% 72px !important;
    justify-content: flex-start !important;
}

body.home-page .home-skills-heading {
    flex: 0 0 auto;
    margin-bottom: 32px !important;
    overflow: visible !important;
}

body.home-page .home-skills-heading h2 {
    margin: 0 !important;
    line-height: 1.05 !important;
}

body.home-page .home-skills-heading p {
    display: none !important;
}

body.home-page .home-skills-grid {
    flex: 0 0 auto;
    min-height: 0 !important;
    height: auto !important;
    grid-auto-rows: auto !important;
    align-items: stretch;
}

body.home-page .home-skill-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-self: stretch;
}

@media (max-width: 900px) {
    body.home-page .home-skills {
        min-height: 100svh !important;
        padding: 72px 5% 56px !important;
    }
}

@media (max-width: 600px) {
    body.home-page .home-skills {
        min-height: 100svh !important;
        padding: 70px 6% 48px !important;
    }

    body.home-page .home-skills-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }
}

/* ==================================================
   HOME - FEATURED PROJECTS REDESIGN
================================================== */
.project-preview .project-grid {
    gap: 28px;
    margin-top: 42px;
}

.project-preview .project-card {
    position: relative;
    display: block;
    min-height: 330px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #e2e2dc;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 20, 20, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.project-preview .project-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: #ff5c35;
}

.project-preview .project-card:nth-child(2)::before {
    background: #222;
}

.project-preview .project-card:nth-child(1) {
    background: linear-gradient(145deg, #fff 0%, #fff7f3 100%);
}

.project-preview .project-card:nth-child(2) {
    background: linear-gradient(145deg, #fff 0%, #f5f5f5 100%);
}

.project-preview .project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(20, 20, 20, .12);
}

.project-preview .project-top {
    align-items: center;
}

.project-preview .project-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff0ea;
    color: #e84f2b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.project-preview .project-card:nth-child(2) .project-number {
    background: #222;
    color: #fff;
}

.project-preview .project-arrow {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #ff5c35;
    background: #fff;
    color: #ff5c35;
    font-size: 22px;
    font-weight: 700;
    box-shadow: 0 7px 18px rgba(255, 92, 53, .15);
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.project-preview .project-card:nth-child(2) .project-arrow {
    border-color: #222;
    background: #222;
    color: #fff;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
}

.project-preview .project-card:hover .project-arrow {
    transform: rotate(8deg) scale(1.08);
}

.project-preview .project-card h3 {
    margin-top: 42px;
    font-size: clamp(30px, 3vw, 42px);
    letter-spacing: -1.5px;
}

.project-preview .project-card p {
    max-width: 560px;
    margin-top: 15px;
    color: #666;
}

.project-preview .project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.project-preview .project-tags span {
    padding: 8px 12px;
    border: 1px solid #deded9;
    border-radius: 999px;
    background: rgba(255,255,255,.8);
    color: #555;
    font-size: 10px;
    font-weight: 700;
}

.project-preview .project-card:nth-child(2) .project-tags span {
    background: #fff;
}

@media (max-width: 700px) {
    .project-preview .project-grid {
        grid-template-columns: 1fr;
    }

    .project-preview .project-card {
        min-height: 300px;
        padding: 25px;
        border-radius: 18px;
    }
}

/* =========================================================
   PAGE HEADINGS - COMPACT & HIGHER
   Applies to inner pages without changing Home hero.
========================================================= */
body:not(.home-page) .page-header {
    padding: 52px 7% 42px;
}

body:not(.home-page) .page-header .section-label,
body:not(.home-page) .project-detail-header .section-label,
body:not(.home-page) .contact-page .section-label {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: 1.8px;
}

body:not(.home-page) .page-header h1 {
    margin-top: 8px;
    font-size: clamp(38px, 4.8vw, 56px);
    line-height: .95;
    letter-spacing: -3px;
}

body:not(.home-page) .page-header p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.65;
}

body:not(.home-page) .project-detail-header {
    padding: 52px 7% 42px;
}

body:not(.home-page) .project-detail-header h1 {
    margin-top: 8px;
    font-size: clamp(42px, 5.5vw, 64px);
    line-height: .95;
    letter-spacing: -3.5px;
}

body:not(.home-page) .project-detail-header p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.65;
}

body:not(.home-page) .contact-page {
    padding: 52px 7% 50px;
}

body:not(.home-page) .contact-page h1 {
    margin-top: 8px;
    font-size: clamp(42px, 5.5vw, 64px);
    line-height: .95;
    letter-spacing: -3.5px;
}

body:not(.home-page) .contact-page > p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 700px) {
    body:not(.home-page) .page-header,
    body:not(.home-page) .project-detail-header {
        padding: 38px 6% 32px;
    }

    body:not(.home-page) .page-header h1,
    body:not(.home-page) .project-detail-header h1,
    body:not(.home-page) .contact-page h1 {
        font-size: clamp(34px, 10vw, 48px);
        letter-spacing: -2px;
    }

    body:not(.home-page) .contact-page {
        padding: 38px 6% 40px;
    }
}


/* ==================================================
   PROJECT CARDS - CONSISTENT ORANGE STYLE
   Home Featured Projects + Projects page
================================================== */
.project-preview .project-card {
    border: 1px solid #ead7cf;
    background: linear-gradient(145deg, #ffffff 0%, #fff7f3 100%);
}

.project-preview .project-card::before,
.project-preview .project-card:nth-child(2)::before {
    background: #ff5c35;
}

.project-preview .project-card:nth-child(1),
.project-preview .project-card:nth-child(2) {
    background: linear-gradient(145deg, #ffffff 0%, #fff7f3 100%);
}

.project-preview .project-number,
.project-preview .project-card:nth-child(2) .project-number {
    background: #fff0ea;
    color: #e84f2b;
}

.project-preview .project-arrow,
.project-preview .project-card:nth-child(2) .project-arrow {
    border: 1px solid #ff5c35;
    background: #ff5c35;
    color: #fff;
    box-shadow: 0 7px 18px rgba(255, 92, 53, .20);
}

.project-preview .project-card:hover {
    border-color: #ff5c35;
}

/* Projects page: same orange card language */
body:has(.projects-page) .projects-page .project-card {
    border: 1px solid #ead7cf;
    border-top: 7px solid #ff5c35;
    border-radius: 22px;
    background: linear-gradient(145deg, #ffffff 0%, #fff7f3 100%);
    box-shadow: 0 10px 30px rgba(20, 20, 20, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body:has(.projects-page) .projects-page .project-card:hover {
    border-color: #ff5c35;
    box-shadow: 0 22px 50px rgba(20, 20, 20, .12);
}

body:has(.projects-page) .projects-page .project-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff0ea;
    color: #e84f2b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

body:has(.projects-page) .projects-page .project-top::after {
    content: "→";
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ff5c35;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    box-shadow: 0 7px 18px rgba(255, 92, 53, .20);
}

body:has(.projects-page) .projects-page .project-github {
    display: none;
}

@media (max-width: 700px) {
    body:has(.projects-page) .projects-page .project-card {
        border-radius: 18px;
    }
}


/* HOME HERO - NAME & AVAILABILITY */
body.home-page .hero-greeting {
    margin: 18px 0 12px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.5px;
}
body.home-page .availability {
    text-transform: none;
}
body.home-page .availability .status-dot {
    flex: 0 0 auto;
}
@media (max-width: 700px) {
    body.home-page .hero-greeting {
        margin-top: 14px;
        font-size: 18px;
    }
}


/* FINAL HOME + SKILLS POLISH */
body.home-page .availability-role { text-transform: none; }
body.home-page .availability-opportunity {
    margin-top: 18px;
    border: 1px solid #ff5c35;
    background: #fff7f3;
    color: #ff5c35;
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 8px 24px rgba(255,92,53,.10);
}
body.home-page .availability-opportunity .status-dot { background:#ff5c35; }
body.home-page .hero-visual { flex-direction: column; }

.skills-intro {
    padding: 60px 7% 25px;
    display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:end;
}
.skills-kicker, .skill-category { color:#ff5c35; font-size:11px; font-weight:800; letter-spacing:1.8px; }
.skills-intro h2 { margin-top:14px; font-family:"Space Grotesk",sans-serif; font-size:clamp(42px,6vw,76px); line-height:.9; letter-spacing:-4px; }
.skills-intro h2 span { color:#ff5c35; }
.skills-intro p { max-width:480px; color:#666; font-size:14px; line-height:1.8; }
.skills-grid-page { padding:35px 7% 90px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.skill-box { position:relative; padding:30px; min-height:290px; border:1px solid #ddd; border-radius:18px; background:linear-gradient(145deg,#fff,#faf9f6); overflow:hidden; }
.skill-box::after { content:""; position:absolute; width:120px; height:120px; right:-45px; bottom:-45px; border-radius:50%; background:#fff0ea; z-index:0; }
.skill-box > * { position:relative; z-index:1; }
.skill-box.skill-featured { background:#ff5c35; border-color:#ff5c35; color:#fff; }
.skill-box.skill-featured::after { background:rgba(255,255,255,.13); }
.skill-box.skill-featured .skill-category, .skill-box.skill-featured p, .skill-box.skill-featured .skill-tags span { color:#fff; }
.skill-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; color:#ff5c35; font-family:monospace; font-size:13px; }
.skill-featured .skill-top { color:#fff; }
.skill-arrow { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:1px solid currentColor; font-family:"Space Grotesk",sans-serif; font-size:18px; }
.skill-box h2 { margin-top:10px; font-size:30px; letter-spacing:-1.5px; }
.skill-box p { margin-top:12px; max-width:520px; color:#777; font-size:14px; line-height:1.7; }
.skill-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.skill-tags span { padding:7px 10px; border:1px solid #e0e0db; border-radius:999px; color:#555; background:#fff; font-size:10px; font-weight:700; }
.skill-featured .skill-tags span { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); }
@media(max-width:700px){ .skills-intro{grid-template-columns:1fr; padding-top:40px;} .skills-intro h2{letter-spacing:-2.5px;} .skills-grid-page{grid-template-columns:1fr; padding-top:20px;} .skill-box{min-height:0;} body.home-page .availability-opportunity{margin-top:14px;} }


/* NATURAL SKILLS CARD POLISH */
.skill-box {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.skill-box:hover {
    transform: translateY(-4px);
    border-color: #ff5c35;
    box-shadow: 0 14px 32px rgba(0,0,0,.08);
}
.skill-top {
    justify-content: flex-start;
    margin-bottom: 28px;
}
.skill-arrow { display:none !important; }
.skill-box.skill-featured { box-shadow: 0 12px 30px rgba(255,92,53,.14); }
.skill-box h2 { line-height: 1.05; }


/* Skills: keep all cards visually consistent */
.technical-skill-page .technical-skill-card:first-child, .skills-page .technical-skill-card:first-child { background: #fff !important; color: inherit !important; }
.technical-skill-page .technical-skill-card:first-child .technical-skill-number, .skills-page .technical-skill-card:first-child .technical-skill-number { color: #ff5c35 !important; }
.technical-skill-page .technical-skill-card:first-child .technical-skill-category, .skills-page .technical-skill-card:first-child .technical-skill-category { color: #ff5c35 !important; }
.technical-skill-page .technical-skill-card:first-child .technical-skill-tags span, .skills-page .technical-skill-card:first-child .technical-skill-tags span { background: #fff3ee !important; color: #222 !important; border-color: rgba(255,92,53,.22) !important; }


/* Skills page: keep all skill cards visually consistent */
.skills-page .skill-box.skill-featured,
.skills-page .skill-box:first-of-type {
  background: #fff !important;
  color: inherit !important;
  border-color: rgba(0,0,0,.12) !important;
  box-shadow: none !important;
}
.skills-page .skill-box.skill-featured::after,
.skills-page .skill-box:first-of-type::after { background: transparent !important; }
.skills-page .skill-box.skill-featured .skill-category,
.skills-page .skill-box.skill-featured p,
.skills-page .skill-box.skill-featured .skill-tags span,
.skills-page .skill-box.skill-featured .skill-top { color: inherit !important; }
.skills-page .skill-box.skill-featured .skill-tags span {
  border-color: rgba(255,92,53,.22) !important;
  background: #fff3ee !important;
}


/* ==================================================
   HOME - TECHNICAL SKILL TOOLTIP
   Shows how each testing technique is applied.
================================================== */

body.home-page .home-skill-tags span.home-skill-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

body.home-page .home-skill-tags span.home-skill-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(5px);
    width: 270px;
    max-width: min(270px, 70vw);
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid #d8d8d2;
    border-radius: 8px;
    background: #fff;
    color: #555;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

body.home-page .home-skill-tags span.home-skill-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    width: 8px;
    height: 8px;
    border-right: 1px solid #d8d8d2;
    border-bottom: 1px solid #d8d8d2;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0;
    visibility: hidden;
    z-index: 101;
}

body.home-page .home-skill-tags span.home-skill-tooltip:hover,
body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible {
    background: #f8f8f4;
    border-color: #ff5c35;
    transform: translateY(-1px);
    outline: none;
}

body.home-page .home-skill-tags span.home-skill-tooltip:hover::after,
body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible::after,
body.home-page .home-skill-tags span.home-skill-tooltip:hover::before,
body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

body.home-page .home-skill-tags span.home-skill-tooltip:hover::after,
body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}

/* Prevent the tooltip from being too wide on small screens. */
@media (max-width: 600px) {
    body.home-page .home-skill-tags span.home-skill-tooltip::after {
        width: 230px;
        max-width: 230px;
        left: 0;
        transform: translateX(0) translateY(5px);
    }

    body.home-page .home-skill-tags span.home-skill-tooltip:hover::after,
    body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible::after {
        transform: translateX(0) translateY(0);
    }

    body.home-page .home-skill-tags span.home-skill-tooltip::before {
        left: 18px;
    }
}




/* ==================================================
   TECHNICAL SKILLS — INTERACTIVE LIGHT TOOLTIP
================================================== */

body.home-page .home-skill-tags span.home-skill-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
    transition: transform .22s ease, box-shadow .22s ease,
                background-color .22s ease, border-color .22s ease;
    z-index: 1;
}

body.home-page .home-skill-tags span.home-skill-tooltip:hover,
body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible {
    transform: translateY(-3px);
    background: #fff;
    border-color: #ff6b45;
    box-shadow: 0 8px 22px rgba(255, 107, 69, .14);
    outline: none;
    z-index: 20;
}

/* Tooltip card */
body.home-page .home-skill-tags span.home-skill-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 13px);
    width: 270px;
    max-width: min(270px, calc(100vw - 32px));
    padding: 15px 17px;
    box-sizing: border-box;
    border: 1px solid #e8e2dc;
    border-radius: 14px;
    background: #fff;
    color: #4b4b4b;
    font-family: "DM Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .05px;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    box-shadow: 0 14px 35px rgba(52, 42, 35, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 7px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 100;
}

/* Small orange accent line */
body.home-page .home-skill-tags span.home-skill-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    width: 32px;
    height: 3px;
    border-radius: 99px;
    background: #ff6b45;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 7px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 101;
}

body.home-page .home-skill-tags span.home-skill-tooltip:hover::after,
body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible::after,
body.home-page .home-skill-tags span.home-skill-tooltip:hover::before,
body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Keep the tooltip inside the viewport on smaller screens */
@media (max-width: 600px) {
    body.home-page .home-skill-tags span.home-skill-tooltip::after {
        left: 0;
        width: min(270px, calc(100vw - 32px));
        transform: translate(0, 7px);
    }

    body.home-page .home-skill-tags span.home-skill-tooltip::before {
        left: 20px;
        transform: translate(0, 7px);
    }

    body.home-page .home-skill-tags span.home-skill-tooltip:hover::after,
    body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible::after {
        transform: translate(0, 0);
    }

    body.home-page .home-skill-tags span.home-skill-tooltip:hover::before,
    body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible::before {
        transform: translate(0, 0);
    }
}



/* Projects page uses one arrow only: the orange CSS arrow. */
body:has(.projects-page) .projects-page .project-arrow {
    display: none !important;
}


/* ==================================================
   SKILLS PAGE — INTERACTIVE SKILL EXPLANATIONS
================================================== */

.skills-grid-page {
    overflow: visible;
}

.skills-grid-page .skill-box {
    overflow: visible;
}

.skills-grid-page .skill-tags {
    position: relative;
    overflow: visible;
}

.skills-grid-page .skill-tags .skill-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
    z-index: 1;
    transition: transform .2s ease, background .2s ease,
                border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.skills-grid-page .skill-tags .skill-tooltip:hover,
.skills-grid-page .skill-tags .skill-tooltip:focus-visible {
    transform: translateY(-2px);
    background: #fff8f5;
    border-color: #ff6b45;
    color: #333;
    outline: none;
    box-shadow: 0 6px 16px rgba(255,107,69,.12);
    z-index: 1000;
}

.skills-grid-page .skill-tags .skill-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 13px);
    width: 275px;
    max-width: min(275px, calc(100vw - 32px));
    padding: 15px 17px;
    box-sizing: border-box;
    border: 1px solid #e5ddd7;
    border-radius: 14px;
    background: #ffffff;
    color: #555;
    font-family: "DM Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    box-shadow: 0 16px 38px rgba(45,35,28,.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 9999;
}

.skills-grid-page .skill-tags .skill-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    width: 28px;
    height: 3px;
    border-radius: 99px;
    background: #ff6b45;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 10000;
}

.skills-grid-page .skill-tags .skill-tooltip:hover::after,
.skills-grid-page .skill-tags .skill-tooltip:focus-visible::after,
.skills-grid-page .skill-tags .skill-tooltip:hover::before,
.skills-grid-page .skill-tags .skill-tooltip:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 600px) {
    .skills-grid-page .skill-tags .skill-tooltip::after {
        left: 0;
        width: min(275px, calc(100vw - 32px));
        transform: translate(0, 8px);
    }
    .skills-grid-page .skill-tags .skill-tooltip::before {
        left: 18px;
        transform: translate(0, 8px);
    }
    .skills-grid-page .skill-tags .skill-tooltip:hover::after,
    .skills-grid-page .skill-tags .skill-tooltip:focus-visible::after {
        transform: translate(0, 0);
    }
    .skills-grid-page .skill-tags .skill-tooltip:hover::before,
    .skills-grid-page .skill-tags .skill-tooltip:focus-visible::before {
        transform: translate(0, 0);
    }
}


/* =========================================================
   SKILLS PAGE — REMOVE DECORATIVE CIRCLE
   Keeps the cards clean and prevents the shape from colliding
   with the tooltip.
========================================================= */
.skills-grid-page .skill-box::after {
    display: none !important;
}
.skills-grid-page .skill-box {
    overflow: visible !important;
    background: #ffffff !important;
    border-color: #e2dfda;
}
.skills-grid-page .skill-box:hover {
    border-color: #ff6b45;
    box-shadow: 0 16px 36px rgba(40, 32, 27, .08);
}

/* =========================================================
   ABOUT PAGE — COLORFUL EDITORIAL LAYOUT
   No images added; the existing content gets more visual depth.
========================================================= */
body:has(.about-content) {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 107, 69, .10) 0 90px, transparent 91px),
        radial-gradient(circle at 7% 78%, rgba(245, 180, 90, .09) 0 75px, transparent 76px),
        #f7f7f5;
}

body:has(.about-content) .page-header {
    position: relative;
    overflow: hidden;
    border-bottom: 0;
    padding-bottom: 78px;
}

body:has(.about-content) .page-header h1 {
    max-width: 920px;
    font-size: clamp(46px, 7vw, 82px);
    line-height: .94;
}

body:has(.about-content) .page-header h1 span {
    display: block;
    background: linear-gradient(90deg, #ff5c35, #e85b8a, #7b67d9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body:has(.about-content) .about-content {
    position: relative;
    max-width: 1120px;
    margin: 0 auto 80px;
    padding: 0 7% 90px;
    box-sizing: border-box;
}

body:has(.about-content) .about-content::before {
    content: "01";
    position: absolute;
    left: 7%;
    top: 0;
    color: #ff5c35;
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 2px;
}

body:has(.about-content) .content-text {
    max-width: 900px;
    margin-left: auto;
    padding: 42px 48px 46px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #fff 0%, #fffaf7 55%, #f7f2ff 100%);
    border: 1px solid #e7dfd8;
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(49, 38, 31, .07);
    position: relative;
    overflow: hidden;
}

body:has(.about-content) .content-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 100%;
    background: linear-gradient(180deg, #ff5c35, #e85b8a, #7b67d9);
}

body:has(.about-content) .content-text::after {
    content: "QUALITY • TESTING • RELIABILITY";
    position: absolute;
    right: 32px;
    top: 24px;
    color: rgba(123, 103, 217, .38);
    font-family: monospace;
    font-size: 8px;
    letter-spacing: 1.4px;
}

body:has(.about-content) .content-text h2 {
    margin-bottom: 30px;
    font-size: clamp(38px, 5vw, 54px);
    letter-spacing: -2.5px;
    color: #171717;
}

body:has(.about-content) .content-text h2::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin-top: 15px;
    border-radius: 20px;
    background: linear-gradient(90deg, #ff5c35, #e85b8a);
}

body:has(.about-content) .content-text p {
    max-width: 780px;
    margin: 0 0 21px;
    padding-left: 18px;
    border-left: 2px solid rgba(255, 92, 53, .12);
    color: #5f5c59;
    font-size: 15px;
    line-height: 1.9;
}

body:has(.about-content) .content-text p:last-child {
    margin-bottom: 0;
    padding: 20px 22px;
    border: 1px solid rgba(123, 103, 217, .16);
    border-radius: 13px;
    background: rgba(255,255,255,.72);
    color: #444;
}

@media (max-width: 700px) {
    body:has(.about-content) .page-header::after {
        right: 5%;
        bottom: 18px;
    }
    body:has(.about-content) .about-content {
        padding: 0 5% 60px;
    }
    body:has(.about-content) .about-content::before {
        left: 5%;
    }
    body:has(.about-content) .content-text {
        padding: 34px 25px 30px;
        border-radius: 16px;
    }
    body:has(.about-content) .content-text::after {
        display: none;
    }
    body:has(.about-content) .content-text h2 {
        font-size: 38px;
    }
}

/* ==================================================
   ORANGEHRM PROJECT DETAIL — SIMPLE REFINEMENT
================================================== */
body:has(.project-overview-section) {
    background: #f8f8f5;
}

body:has(.project-overview-section) .project-detail-header {
    background: #fff;
    border-bottom: 1px solid #e3e3de;
}

body:has(.project-overview-section) .project-detail-header h1 {
    max-width: 900px;
}

body:has(.project-overview-section) .project-tags span {
    background: #f4f4ef;
    border: 1px solid #e1e1db;
}


body:has(.project-overview-section) .project-overview-section {
    padding-top: 78px;
    padding-bottom: 82px;
}

body:has(.project-overview-section) .project-section-heading {
    margin-bottom: 28px;
}

body:has(.project-overview-section) .project-section-heading h2 {
    margin-top: 9px;
}

body:has(.project-overview-section) .project-section-heading .section-label {
    color: #ff5c35;
}

body:has(.project-overview-section) .project-overview-content {
    max-width: 900px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px;
    padding-left: 22px;
    border-left: 2px solid #ff6b45;
}

body:has(.project-overview-section) .project-overview-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: #62625f;
}

body:has(.project-overview-section) .detail-grid {
    padding-top: 70px;
    padding-bottom: 75px;
    border-top: 1px solid #e2e2dc;
    border-bottom: 1px solid #e2e2dc;
    background: #fff;
}

body:has(.project-overview-section) .detail-grid > div {
    position: relative;
    padding: 0 35px 0 0;
    background: transparent !important;
    border: 0;
    box-shadow: none !important;
}

body:has(.project-overview-section) .detail-grid > div::before,
body:has(.project-overview-section) .detail-grid > div::after {
    display: none !important;
}

body:has(.project-overview-section) .detail-grid > div + div {
    border-left: 1px solid #e0e0da;
    padding-left: 55px;
}

body:has(.project-overview-section) .detail-grid h3 {
    margin-top: 13px;
}

body:has(.project-overview-section) .qa-documentation-section {
    padding-top: 78px;
    padding-bottom: 90px;
}

body:has(.project-overview-section) .document-list {
    max-width: 920px;
    margin-top: 32px;
    border-top: 1px solid #dcdcd6;
}

body:has(.project-overview-section) .document-item {
    min-height: 78px;
    padding: 18px 8px 18px 0;
    align-items: center;
    gap: 24px;
    color: #242424;
    border-bottom: 1px solid #dcdcd6;
    transition: padding-left .2s ease, color .2s ease, background .2s ease;
}

body:has(.project-overview-section) .document-item:hover {
    padding-left: 10px;
    color: #ff5c35;
    background: rgba(255, 255, 255, .55);
}

body:has(.project-overview-section) .document-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body:has(.project-overview-section) .document-main > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

body:has(.project-overview-section) .document-main strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 16px;
    line-height: 1.2;
}

body:has(.project-overview-section) .document-main small {
    max-width: 650px;
    color: #777;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
}

body:has(.project-overview-section) .document-item:hover small {
    color: #777;
}

body:has(.project-overview-section) .document-item .github-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex: 0 0 auto;
}

body:has(.project-overview-section) .document-arrow {
    margin-left: auto;
    font-size: 20px;
    line-height: 1;
    color: #777;
    transition: transform .2s ease, color .2s ease;
}

body:has(.project-overview-section) .document-item:hover .document-arrow {
    color: #ff5c35;
    transform: translate(2px, -2px);
}

@media (max-width: 700px) {
    body:has(.project-overview-section) .project-overview-section,
    body:has(.project-overview-section) .qa-documentation-section {
        padding-top: 58px;
        padding-bottom: 62px;
    }

    body:has(.project-overview-section) .project-overview-content {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-left: 17px;
    }

    body:has(.project-overview-section) .detail-grid > div + div {
        border-left: 0;
        border-top: 1px solid #e0e0da;
        padding-left: 0;
        padding-top: 35px;
    }

    body:has(.project-overview-section) .detail-grid > div {
        padding-right: 0;
    }

    body:has(.project-overview-section) .document-main {
        align-items: flex-start;
    }

    body:has(.project-overview-section) .document-main small {
        max-width: 90%;
    }
}

body:has(.project-overview-section) .detail-grid {
    background: #fff !important;
}

body:has(.project-overview-section) .detail-grid .section-label {
    color: #ff5c35;
}

/* OrangeHRM: neutral project tags, no accent frame */
body:has(.project-overview-section) .project-tags span {
    border: 1px solid #e1e1db;
    background: #f4f4ef;
}


/* ==================================================
   ORANGEHRM — CONTENT SEPARATORS & TYPE REFINEMENT
================================================== */

/* A clear boundary above the documentation section */
body:has(.project-overview-section) .qa-documentation-section {
    border-top: 1px solid #deded9;
}

/* Keep the overview clean, with a vertical divider between the two texts */
body:has(.project-overview-section) .project-overview-content {
    border-left: 0;
    padding-left: 0;
    gap: 0;
}

body:has(.project-overview-section) .project-overview-content p {
    padding-right: 42px;
}

body:has(.project-overview-section) .project-overview-content p + p {
    padding-left: 42px;
    padding-right: 0;
    border-left: 1px solid #deded9;
}

/* Documentation descriptions use the same readable size as Project Overview */
body:has(.project-overview-section) .document-main small {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
}

/* Keep the documentation title/section visually balanced with the overview */
body:has(.project-overview-section) .qa-documentation-section .project-section-heading {
    margin-bottom: 28px;
}

@media (max-width: 700px) {
    body:has(.project-overview-section) .project-overview-content {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body:has(.project-overview-section) .project-overview-content p,
    body:has(.project-overview-section) .project-overview-content p + p {
        padding-left: 0;
        padding-right: 0;
        border-left: 0;
    }

    /* On mobile, the separator becomes horizontal */
    body:has(.project-overview-section) .project-overview-content p + p {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #deded9;
    }

    body:has(.project-overview-section) .document-main small {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* ==================================================
   SAUCEDEMO — MATCH ORANGEHRM PROJECT LAYOUT
================================================== */

body.saucedemo-project-overview .qa-documentation-section {
    border-top: 1px solid #deded9;
}

body.saucedemo-project-overview .project-overview-content {
    border-left: 0;
    padding-left: 0;
    gap: 0;
}

body.saucedemo-project-overview .project-overview-content p {
    padding-right: 42px;
}

body.saucedemo-project-overview .project-overview-content p + p {
    padding-left: 42px;
    padding-right: 0;
    border-left: 1px solid #deded9;
}

body.saucedemo-project-overview .document-main small {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
}

body.saucedemo-project-overview .qa-documentation-section .project-section-heading {
    margin-bottom: 28px;
}

@media (max-width: 700px) {
    body.saucedemo-project-overview .project-overview-content {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.saucedemo-project-overview .project-overview-content p,
    body.saucedemo-project-overview .project-overview-content p + p {
        padding-left: 0;
        padding-right: 0;
        border-left: 0;
    }

    body.saucedemo-project-overview .project-overview-content p + p {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #deded9;
    }

    body.saucedemo-project-overview .document-main small {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* ==================================================
   SAUCEDEMO — COMPLETE PROJECT DETAIL REFINEMENT
================================================== */
body.saucedemo-project-overview {
    background: #f8f8f5;
}

body.saucedemo-project-overview .project-detail-header {
    background: #fff;
    border-bottom: 1px solid #e3e3de;
}

body.saucedemo-project-overview .project-tags span {
    background: #f4f4ef;
    border: 1px solid #e1e1db;
}

body.saucedemo-project-overview .project-overview-section {
    padding-top: 78px;
    padding-bottom: 82px;
}

body.saucedemo-project-overview .project-section-heading {
    margin-bottom: 28px;
}

body.saucedemo-project-overview .project-section-heading h2 {
    margin-top: 9px;
}

body.saucedemo-project-overview .project-section-heading .section-label {
    color: #ff5c35;
}

body.saucedemo-project-overview .project-overview-content {
    max-width: 900px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-left: 0;
    border-left: 0;
}

body.saucedemo-project-overview .project-overview-content p {
    margin: 0;
    padding-right: 42px;
    font-size: 15px;
    line-height: 1.9;
    color: #62625f;
}

body.saucedemo-project-overview .project-overview-content p + p {
    padding-left: 42px;
    padding-right: 0;
    border-left: 1px solid #deded9;
}

body.saucedemo-project-overview .qa-documentation-section {
    padding-top: 78px;
    padding-bottom: 90px;
    border-top: 1px solid #deded9;
}

body.saucedemo-project-overview .document-list {
    max-width: 920px;
    margin-top: 32px;
    border-top: 1px solid #dcdcd6;
}

body.saucedemo-project-overview .document-item {
    min-height: 78px;
    padding: 18px 8px 18px 0;
    align-items: center;
    gap: 24px;
    color: #242424;
    border-bottom: 1px solid #dcdcd6;
}

body.saucedemo-project-overview .document-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body.saucedemo-project-overview .document-main > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

body.saucedemo-project-overview .document-main strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 16px;
    line-height: 1.2;
}

body.saucedemo-project-overview .document-main small {
    max-width: 650px;
    color: #666;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 400;
}

body.saucedemo-project-overview .document-item .github-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex: 0 0 auto;
}

body.saucedemo-project-overview .document-arrow {
    margin-left: auto;
    font-size: 20px;
    line-height: 1;
    color: #777;
}

@media (max-width: 700px) {
    body.saucedemo-project-overview .project-overview-section,
    body.saucedemo-project-overview .qa-documentation-section {
        padding-top: 58px;
        padding-bottom: 62px;
    }

    body.saucedemo-project-overview .project-overview-content {
        grid-template-columns: 1fr;
    }

    body.saucedemo-project-overview .project-overview-content p,
    body.saucedemo-project-overview .project-overview-content p + p {
        padding-left: 0;
        padding-right: 0;
        border-left: 0;
    }

    body.saucedemo-project-overview .project-overview-content p + p {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #deded9;
    }

    body.saucedemo-project-overview .document-main {
        align-items: flex-start;
    }

    body.saucedemo-project-overview .document-main small {
        max-width: 90%;
        font-size: 14px;
        line-height: 1.7;
    }
}

/* HOME TECHNICAL SKILLS - FRAME REFINEMENT */
body.home-page .home-skill-card {
    border: 1px solid #d7d7d2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(20,20,20,.045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.home-page .home-skill-card::before {
    display: none !important;
    content: none !important;
}
body.home-page .home-skill-card:hover {
    transform: translateY(-4px);
    border-color: #c9c9c3;
    box-shadow: 0 12px 28px rgba(20,20,20,.08);
    background: #ffffff;
}

/* ==================================================
   HOME - RESPONSIVE SKILL TOOLTIP FIX
   Keep the explanation readable and inside the viewport.
================================================== */
@media (max-width: 1100px) {
    body.home-page .home-skills {
        overflow: visible;
    }

    body.home-page .home-skill-tags span.home-skill-tooltip::after {
        width: min(240px, calc(100vw - 40px));
        max-width: calc(100vw - 40px);
        padding: 11px 13px;
        font-size: 10.5px;
        line-height: 1.5;
    }
}

@media (max-width: 900px) and (min-width: 601px) {
    /* Left-column cards open toward the left edge */
    body.home-page .home-skill-card:nth-child(odd) .home-skill-tooltip::after {
        left: 0;
        transform: translate(0, 7px);
    }

    body.home-page .home-skill-card:nth-child(odd) .home-skill-tooltip::before {
        left: 18px;
        transform: translate(0, 7px);
    }

    body.home-page .home-skill-card:nth-child(odd) .home-skill-tooltip:hover::after,
    body.home-page .home-skill-card:nth-child(odd) .home-skill-tooltip:focus-visible::after,
    body.home-page .home-skill-card:nth-child(odd) .home-skill-tooltip:hover::before,
    body.home-page .home-skill-card:nth-child(odd) .home-skill-tooltip:focus-visible::before {
        transform: translate(0, 0);
    }

    /* Right-column cards open toward the right edge */
    body.home-page .home-skill-card:nth-child(even) .home-skill-tooltip::after {
        left: auto;
        right: 0;
        transform: translate(0, 7px);
    }

    body.home-page .home-skill-card:nth-child(even) .home-skill-tooltip::before {
        left: auto;
        right: 18px;
        transform: translate(0, 7px);
    }

    body.home-page .home-skill-card:nth-child(even) .home-skill-tooltip:hover::after,
    body.home-page .home-skill-card:nth-child(even) .home-skill-tooltip:focus-visible::after,
    body.home-page .home-skill-card:nth-child(even) .home-skill-tooltip:hover::before,
    body.home-page .home-skill-card:nth-child(even) .home-skill-tooltip:focus-visible::before {
        transform: translate(0, 0);
    }
}

@media (max-width: 600px) {
    body.home-page .home-skill-tags span.home-skill-tooltip::after {
        width: min(230px, calc(100vw - 30px));
        max-width: calc(100vw - 30px);
        padding: 10px 12px;
        font-size: 10px;
        line-height: 1.5;
    }
}


/* ==================================================
   FINAL RESPONSIVE TOOLTIP FIX — HOME + SKILLS
   On compact screens the tooltip is positioned against
   the viewport instead of the tag, so it can never be
   clipped by the card or the right edge of the screen.
================================================== */
@media (max-width: 900px) {
    body.home-page .home-skill-tags span.home-skill-tooltip::after,
    .skills-grid-page .skill-tags .skill-tooltip::after {
        position: fixed !important;
        left: var(--tooltip-left, 50vw) !important;
        top: var(--tooltip-top, 120px) !important;
        bottom: auto !important;
        width: min(320px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 !important;
        transform: translate(-50%, -100%) translateY(-10px) !important;
        box-sizing: border-box !important;
        z-index: 99999 !important;
    }

    body.home-page .home-skill-tags span.home-skill-tooltip::before,
    .skills-grid-page .skill-tags .skill-tooltip::before {
        display: none !important;
    }

    body.home-page .home-skill-tags span.home-skill-tooltip:hover::after,
    body.home-page .home-skill-tags span.home-skill-tooltip:focus-visible::after,
    .skills-grid-page .skill-tags .skill-tooltip:hover::after,
    .skills-grid-page .skill-tags .skill-tooltip:focus-visible::after {
        transform: translate(-50%, -100%) translateY(-10px) !important;
    }
}

@media (max-width: 600px) {
    body.home-page .home-skill-tags span.home-skill-tooltip::after,
    .skills-grid-page .skill-tags .skill-tooltip::after {
        width: min(300px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 11px 13px !important;
        font-size: 10.5px !important;
        line-height: 1.55 !important;
    }
}

/* ==================================================
   MOBILE TOOLTIP OVERLAY — HOME + SKILLS
   Use a viewport-level overlay on compact screens so
   descriptions can never be clipped by cards/sections.
================================================== */
@media (max-width: 900px) {
    body.home-page .home-skill-tags span.home-skill-tooltip::after,
    body.home-page .home-skill-tags span.home-skill-tooltip::before,
    .skills-grid-page .skill-tags .skill-tooltip::after,
    .skills-grid-page .skill-tags .skill-tooltip::before {
        display: none !important;
        content: none !important;
    }

    body.home-page .home-skill-tags span.home-skill-tooltip,
    .skills-grid-page .skill-tags .skill-tooltip {
        position: relative;
        z-index: 2;
    }
}

.skill-tooltip-overlay {
    position: fixed;
    z-index: 2147483647;
    box-sizing: border-box;
    width: min(320px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    padding: 12px 14px;
    border: 1px solid #e5ddd7;
    border-radius: 14px;
    background: #fff;
    color: #555;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    box-shadow: 0 14px 32px rgba(45,35,28,.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.skill-tooltip-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 600px) {
    .skill-tooltip-overlay {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        padding: 11px 13px;
        font-size: 10.5px;
        line-height: 1.55;
        border-radius: 13px;
    }
}

/* ==================================================
   MOBILE - MANUAL SCROLL ONLY
   Disable Home section snapping on touch/mobile screens.
   Desktop section snapping remains unchanged.
================================================== */
@media (max-width: 768px) {
    html:has(body.home-page) {
        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
    }

    body.home-page main,
    body.home-page {
        scroll-snap-type: none !important;
    }

    body.home-page main > section {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }
}

/* ==================================================
   MOBILE TOOLTIP — RESTORE ORANGE ACCENT LINE
   Keep the small orange marker below the explanation.
================================================== */
@media (max-width: 900px) {
    .skill-tooltip-overlay {
        position: fixed;
        padding-bottom: 28px;
    }

    .skill-tooltip-overlay::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 10px;
        width: 34px;
        height: 4px;
        border-radius: 999px;
        background: #ff6b45;
        transform: translateX(-50%);
    }
}

/* ==================================================
   FINAL MOBILE HERO CLEANUP
   Keeps the Home hero readable and unclipped on phones.
================================================== */
@media (max-width: 700px) {
    body.home-page .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        min-height: auto;
        height: auto;
        box-sizing: border-box;
        padding: 42px 6% 64px;
        gap: 34px;
        align-items: start;
    }

    body.home-page .hero-content {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    body.home-page .availability-role {
        font-size: 11px;
        padding: 7px 11px;
    }

    body.home-page .hero-greeting {
        margin: 18px 0 12px;
        font-size: 18px;
        line-height: 1.35;
    }

    body.home-page .hero h1 {
        margin-top: 18px;
        font-size: clamp(40px, 12vw, 58px);
        line-height: .94;
        letter-spacing: -2.8px;
        overflow-wrap: normal;
    }

    body.home-page .hero-description {
        max-width: 100%;
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.7;
    }

    body.home-page .hero-buttons {
        display: flex;
        width: 100%;
        margin-top: 24px;
        gap: 10px;
        flex-wrap: wrap;
    }

    body.home-page .primary-button,
    body.home-page .secondary-button {
        min-height: 44px;
        box-sizing: border-box;
    }

    body.home-page .hero-visual {
        width: 100%;
        min-height: 0;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.home-page .profile-photo {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 420px) {
    body.home-page .hero {
        padding: 34px 6% 56px;
        gap: 28px;
    }

    body.home-page .hero-greeting {
        font-size: 17px;
    }

    body.home-page .hero h1 {
        font-size: clamp(36px, 11.5vw, 48px);
        letter-spacing: -2.2px;
    }

    body.home-page .hero-description {
        font-size: 13.5px;
        line-height: 1.65;
    }

    body.home-page .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    body.home-page .primary-button,
    body.home-page .secondary-button {
        width: 100%;
    }

    body.home-page .profile-photo {
        width: 132px;
        height: 132px;
    }
}

/* ==================================================
   MOBILE HERO — PROFILE BESIDE QA ENGINEER TITLE
   Keeps the profile photo compact and aligned with
   the main heading on small screens.
================================================== */
@media (max-width: 700px) {
    body.home-page .hero {
        grid-template-columns: minmax(0, 1fr) 92px;
        grid-template-rows: auto auto auto auto auto;
        column-gap: 16px;
        row-gap: 22px;
        align-items: center;
    }

    body.home-page .hero-content,
    body.home-page .hero-visual {
        display: contents;
    }

    body.home-page .availability-role {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: start;
    }

    body.home-page .hero-greeting {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    body.home-page .hero h1 {
        grid-column: 1;
        grid-row: 3;
        margin: 0;
        align-self: center;
        min-width: 0;
    }

    body.home-page .profile-photo {
        grid-column: 2;
        grid-row: 3;
        width: 88px;
        height: 88px;
        margin: 0;
        justify-self: center;
        align-self: center;
    }

    body.home-page .hero-description {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 0;
    }

    body.home-page .hero-buttons {
        grid-column: 1 / -1;
        grid-row: 5;
        margin-top: 0;
    }
}

@media (max-width: 420px) {
    body.home-page .hero {
        grid-template-columns: minmax(0, 1fr) 76px;
        column-gap: 12px;
        row-gap: 20px;
    }

    body.home-page .profile-photo {
        width: 72px;
        height: 72px;
    }

    body.home-page .hero h1 {
        font-size: clamp(34px, 10.8vw, 46px);
        letter-spacing: -2px;
    }
}


/* DIRECT CONTACT FORM */
.contact-form-layout { margin-top:45px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); gap:55px; align-items:start; }
.direct-contact-form { padding:32px; background:#fff; border:1px solid #ddd; border-radius:10px; }
.direct-contact-form .form-group { margin-bottom:18px; }
.direct-contact-form label { display:block; margin-bottom:7px; font-size:12px; font-weight:600; }
.direct-contact-form input, .direct-contact-form textarea { width:100%; padding:13px 14px; border:1px solid #d5d5cf; border-radius:6px; background:#fff; color:#171717; font:inherit; font-size:14px; outline:none; }
.direct-contact-form textarea { min-height:150px; resize:vertical; }
.direct-contact-form input:focus, .direct-contact-form textarea:focus { border-color:#ff5c35; }
.direct-contact-form button { border:0; cursor:pointer; margin-top:4px; }
.direct-contact-form button span { margin-left:8px; }
.contact-list-side { margin-top:0; }
@media (max-width:700px) { .contact-form-layout { grid-template-columns:1fr; gap:35px; margin-top:35px; } .direct-contact-form { padding:22px; } .direct-contact-form textarea { min-height:130px; } }

/* Contact form backend status */
.contact-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

.form-status {
    min-height: 22px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.form-status.is-sending { color: #666; }
.form-status.is-success { color: #247a45; }
.form-status.is-error { color: #b33a2f; }

#sendMessageButton:disabled {
    opacity: .65;
    cursor: wait;
}

/* Mobile: disable section snap so scrolling is fully manual */
@media (max-width: 768px){html,body{scroll-snap-type:none!important;scroll-behavior:auto!important}.section,.page-section,section{scroll-snap-align:none!important;scroll-snap-stop:normal!important}}


/* ==================================================
   FINAL MOBILE NAVBAR OVERRIDE
   Keep the hamburger visible and above all content.
================================================== */
#navbar,
#navbar .navbar {
    position: relative;
    z-index: 10000;
}

#navbar .nav-toggle {
    position: relative;
    z-index: 10001;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid #d5d5cf;
    border-radius: 8px;
    background: #f7f7f5;
    color: #171717;
    appearance: none;
    -webkit-appearance: none;
}

#navbar .nav-toggle-icon {
    display: block;
    width: 24px;
    height: 24px;
    overflow: visible;
}

#navbar .nav-toggle-icon .line {
    fill: none;
    stroke: #171717;
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    transition: transform .2s ease, opacity .2s ease;
    transform-origin: 12px 12px;
}

#navbar .nav-menu {
    z-index: 10000;
}

@media (max-width: 900px) {
    #navbar .navbar {
        display: flex !important;
        flex-wrap: wrap;
        min-height: 72px;
        padding: 15px 5%;
    }

    #navbar .nav-toggle {
        display: flex !important;
    }

    #navbar .nav-menu {
        display: none !important;
        width: 100%;
        flex: 0 0 100%;
        order: 3;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 12px 0 0;
        padding-top: 8px;
        border-top: 1px solid #deded9;
        background: #f7f7f5;
    }

    #navbar .navbar.menu-open .nav-menu {
        display: flex !important;
    }

    #navbar .nav-menu a {
        display: block;
        width: 100%;
        padding: 13px 0;
        border-bottom: 1px solid #deded9;
        white-space: nowrap;
    }

    #navbar .nav-button {
        display: none !important;
    }

    #navbar .navbar.menu-open .nav-toggle-icon .line-1 {
        transform: rotate(45deg);
    }

    #navbar .navbar.menu-open .nav-toggle-icon .line-2 {
        opacity: 0;
    }

    #navbar .navbar.menu-open .nav-toggle-icon .line-3 {
        transform: rotate(-45deg);
    }
}

@media (min-width: 901px) {
    #navbar .nav-toggle {
        display: none !important;
    }
}