/* =========================================================
   RESPONSIVE
   Tablet + Mobile

   Breakpoints:
   1400px — Large tablet
   1140px — Tablet
   1040px — Small tablet
   950px  — Compact tablet / large phone
   767px  — Phone
   690px  — Small phone
   510px  — Very small phone
========================================================= */


/* =========================================================
   1. LARGE TABLET
   max-width: 1400px
========================================================= */

@media (max-width: 1400px) {

    /* --- Projects --- */

    .project-wrapper {
        gap: 56px;
    }

    .content-project {
        width: min(500px, 100%);
        min-height: 400px;
    }

    /* --- Contact --- */

    .decorative-side {
        width: 490px;
        right: -40px;
        bottom: 50px;
    }

    .contact-details > p:first-child {
        font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.45rem);
    }
    
    .contact-layout {
        width: 70%;
    }
}


/* =========================================================
   2. TABLET
   max-width: 1140px
========================================================= */

@media (max-width: 1140px) {

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

    .hero-content  .header-pink {
        display: block;
    }

    /* --- Shared sections --- */

    .content-section {
        position: relative;
        min-height: auto;
        padding: var(--space-xl) 5vw;
        gap: var(--space-lg);
    }


    /* --- Index — Journey --- */

    #journey {
        min-height: 100vh;
    }

    .journey-wrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .journey-content {
        flex: 1;
    }

    .journey-content p {
        font-size: 17px;
    }

    /* --- Journey — Gallery --- */

    .journey-gallery .journey-img {
        border-radius: 0;

        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='white'%3E%3Cellipse cx='50' cy='27' rx='18' ry='27'/%3E%3Cellipse cx='50' cy='27' rx='18' ry='27' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='18' ry='27' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='18' ry='27' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='18' ry='27' transform='rotate(288 50 50)'/%3E%3Ccircle cx='50' cy='50' r='18'/%3E%3C/g%3E%3C/svg%3E");

        /* mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='white'%3E%3Cellipse cx='50' cy='27' rx='18' ry='27'/%3E%3Cellipse cx='50' cy='27' rx='18' cy='27' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='18' cy='27' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='18' cy='27' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='18' cy='27' transform='rotate(288 50 50)'/%3E%3Ccircle cx='50' cy='50' r='18'/%3E%3C/g%3E%3C/svg%3E"); */

        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;

        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;

        -webkit-mask-position: center;
        mask-position: center;

        width: min(80vw, 300px);
        height: min(80vw, 300px);
    }

    .journey-gallery {
        height: 65vh;
        left: 0px;
        top: -15px;
    }

    .journey-img.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        z-index: 2;
    }

    .journey-img.next,
    .journey-img.next-2,
    .journey-img.prev,
    .journey-img.prev-2,
    .journey-img.hidden {
        transform: translate(-50%, -50%) scale(.92);
        opacity: 0;
        z-index: 0;
        filter: none;
    }

    .journey-gallery::before {
        display: none;
    }


    /* --- Journey — Image focal positions --- */

    .journey-img[data-story="one"] {
        object-position: 25% 50%;
    }

    .journey-img[data-story="two"] {
        object-position: 50% 50%;
    }

    .journey-img[data-story="three"] {
        object-position: 33% 50%;
    }

    .journey-img[data-story="four"] {
        object-position: 90% 50%;
    }

    .journey-img[data-story="five"] {
        object-position: 50% -20px;
    }


    /* --- Journey — Navigation --- */

    .journey-nav {
        margin-top: var(--space-md);
    }

    .journey-nav-btn {
        width: 55px;
    }


    /* --- Index — Experiences --- */

    .slicker-card {
        transition:
            transform 0.45s cubic-bezier(0.34, 1.1, 0.64, 1),
            width 0.45s cubic-bezier(0.34, 1.1, 0.64, 1),
            height 0.45s cubic-bezier(0.34, 1.1, 0.64, 1),
            opacity 0.35s ease,
            filter 0.35s ease;
    }

    .slicker-card.is-active:hover {
        transform: none;
        filter: none;
    }

    .experience-content {
        align-items: start;
    }

    .card-image,
    .card-back-image {
        filter: grayscale(100%) brightness(60%);
        transition: none;
    }

    .card-inner,
    .card.is-flipped .card-inner {
        transform: none !important;
        transition: none !important;
    }

    .card-back {
        display: none;
    }


    /* --- Index — Projects --- */

    .project-wrapper {
        width: 100%;
        min-height: 70vh;
        height: auto;

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

        gap: 40px;

        position: relative;
        z-index: 1;
    }

    .content-project {
        width: min(450px, 100%);
    }


    /* --- CV — Skills --- */

    .skills {
        width: 65%;
        margin: 0 auto;

        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 10px;
    }

    .skills > * {
        grid-column: span 2;
        justify-self: center;
    }

    .skills > :nth-child(5) {
        grid-column: 2 / span 2;
    }

    .skills > :nth-child(6) {
        grid-column: 4 / span 2;
    }

    .skills > :nth-child(7) {
        grid-column: 6 / span 2;
    }

    .skills .hex-card {
        flex: 1 1 125px;
        max-width: 125px;
        aspect-ratio: 5 / 6;
        height: auto;
    }

}


/* =========================================================
   3. SMALL TABLET
   max-width: 1040px
========================================================= */

@media (max-width: 1040px) {

    /* --- CV — Skills --- */

    .skills {
        width: 70%;
    }

    /* --- Projects --- */

    .project-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    .content-project {
        width: 85%;
        min-height: 250px;
    }


    /* --- Projects — Honeycomb --- */

    .honeycomb {
        display: grid;
        grid-template-columns: repeat(4, 150px);
        grid-template-rows: repeat(2, 150px);
        margin-bottom: 80px;

        width: max-content;
    }

    .hex-1 {
        grid-column: 1;
        grid-row: 1;
        transform: translate(58px, 17px);
    }

    .hex-2 {
        grid-column: 2;
        grid-row: 1;
        transform: translate(24px, 83px);
    }

    .hex-3 {
        grid-column: 3;
        grid-row: 1;
        transform: translate(-11px, 16px);
    }

    .hex-4 {
        grid-column: 4;
        grid-row: 1;
        transform: translate(-45px, 82px);
    }

    .hex-5 {
        grid-column: 1;
        grid-row: 2;
        transform: translate(58px, 0);
    }

    .hex-6 {
        grid-column: 2;
        grid-row: 2;
        transform: translate(24px, 66px);
    }

    .hex-7 {
        grid-column: 3;
        grid-row: 2;
        transform: translate(-10px, -1px);
    }

    .hex-8 {
        grid-column: 4;
        grid-row: 2;
        transform: translate(-44px, 65px);
    }


    /* --- Projects — Colours --- */

    .hex-1.hex-pink {
        --bg: var(--secondary-dark);
    }

    .hex-5.hex-pink-glow {
        --bg: var(--primary);
    }

    .hex-8.hex-pink-glow {
        --bg: color-mix(
            in srgb,
            var(--primary-bright-pink) 70%,
            var(--primary)
        );
    }


    /* --- Projects — Tools --- */

    .tools .hex-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .tools .hex-wrapper:has(> :nth-child(3):last-child) > :last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }


    /* --- Hero --- */

    .hero-content h1 {
        font-size: 70px;
    }

    .hero-text {
        margin: 15px 0; 
        max-width: 600px;
    }

    .hero-img {
        top: 40%;
        right: 10%;
    }

    .bee {
        display: none;
    }

    .slicker-card.is-back {
        display: none;
    }


    /* --- CV — Timeline --- */

    .journey-grid {
        gap: 2rem;
    }

    .timeline-content {
        width: 100%;
        margin-left: calc(var(--axis-x) + 2.25rem);

        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .timeline-date {
        flex: 0 0 60px;
    }

    .timeline-desc {
        flex: 1;
    }

    .timeline-header {
        flex-shrink: 0;
        margin-left: auto;
    }

    .timeline-content .desc {
        display: none;
    }


    /* --- CV — Job detail --- */

    .content-project.job-detail-panel {
        height: 75vh;
        margin-top: 0;
    }
}


/* =========================================================
   4. LANDSCAPE
   max-width: 950px
========================================================= */

@media (max-width: 950px) and (orientation: landscape) {

    .scroll-indicator {
        display: none;
    }

}


/* =========================================================
   5. COMPACT TABLET / LARGE PHONE
   max-width: 950px
========================================================= */

@media (max-width: 950px) {

    .desktop-break {
        display: none;
    }

    .hero-img {
        width: 170px;
        top: 48%;
        right: 7%;
    }

    .hero-text {
        max-width: 460px;
    }

    .hero-btn-wrapper {
       gap: 2rem;
    }

    /* --- Shared --- */

    .content-section {
        padding: var(--space-lg) 5vw;
        gap: var(--space-lg);
    }

    .skills {
        width: 75%;
    }


    /* --- CV — General --- */

    .cv-right-col {
        display: none;
    }

    .cv-left-col {
        width: 100%;
        max-width: 100%;
        margin-top: 30px;
        z-index: 1;
    }

    .cv-left-col .me-description {
        max-width: 640px;
        margin-bottom: 20px;
    }

    .cv-left-col h2 {
        font-size: clamp(3rem, 5vw, 5.4rem);
    }


    /* --- CV — References --- */

    .reference-toggle {
        flex-wrap: wrap;
        gap: 4px 24px;
    }

    .reference-full p {
        padding-left: 0;
        padding-right: 0;
        font-size: 12px;
    }

    .reference-item.is-open .reference-excerpt {
        text-align: end;
    }

    .reference-item:not(.is-open):hover .reference-line {
        transform: scaleX(0);
    }


    /* --- CV — Interests --- */

    .hobbies-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }


    /* --- CV — Experience timeline --- */

    .journey-grid {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        width: 100%;
    }

    .vertical-timeline {
        width: 100%;
        flex: none;
        position: relative;
        padding: 2rem 0;
    }

    .timeline-progress {
        display: none;
    }

    .timeline-dot,
    .timeline-dot.hidden {
        opacity: 1;
    }

    .timeline-content .date.active {
        color: var(--text-subtle);
        transform: none;
        font-weight: 400;
    }

    .timeline-content {
        margin-left: calc(var(--axis-x) + 2rem);
    }

    .timeline-content .company {
        font-size: .95rem;
    }

    .timeline-content .role {
        font-size: .85rem;
    }

    .timeline-content .desc {
        max-width: 55ch;
        font-size: .9rem;
        line-height: 1.5;
    }

    .job-detail-panel {
        position: static;
        max-height: none;
    }


    /* --- Project pages --- */

    .flowers-divider {
        display: none;
    }

    .hero-content h1 {
        font-size: 50px;
    }

    .projects-page .hero-text {
        margin: 0 auto;
        font-size: 18px;
    }

    .project-about-body {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px;
    }

    .project-about-description,
    .project-about-quote {
        width: 100%;
    }

    .project-about-quote {
        text-align: left;
    }

    .text-nav {
        display: none;
    }

    .projects-slider-wrapper {
        justify-content: space-between;
        gap: inherit;
    }

    .project-nav {
        position: relative;
        bottom: 10px;
    }

    .colaborations {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .gallery-projects .colab-info {
        width: 100%;
        margin-bottom: 40px;
    }

    .colaborations .hex-card {
        width: 180px;
        text-align: center;
    }

    .colaborations .hex-content h4 {
        font-size: 1.1rem;
        line-height: 25px;
    }

    .journey-sticky {
        padding: var(--space-md) 5vw;
        padding-top: 0;
        gap: 20px
    }

    /* --- Contact --- */

    .decorative-side {
        width: 440px;
        right: -20px;
    }
}

@media (min-width: 768px) and (max-width: 850px) and (orientation: landscape) {
   .scroll-bee {
    right: 10px;
   }
}

/* =========================================================
   6. PHONE
   max-width: 767px
========================================================= */

@media (max-width: 767px) {

    /* --- Shared --- */

    h2 {
        margin: var(--space-lg) 0 var(--space-md) 0;
    }

    .landing::after {
        height: 170px;
    }
    
    .content-section {
        gap: var(--space-sm);
        padding: var(--space-md) 5vw;
        padding-top: 0;
    }

    .skills {
        width: 100%;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        gap: 20px;
        padding: var(--space-sm) 0;
    }

    .skills-section,
    .hobbies {
        border: none;
    }

    .hobbies-list {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }

    .hobby-item {
        flex: 1 1 33.333%;
        border-left: none;
        padding: 1rem 0.5rem;
    }

    .contact-wrapper {
        padding-top: 0;
        margin-top: 20px;
    }

    .contact-layout {
        padding: 0;
    }

    .contact-intro {
        text-align: left;
        font-size: 18px;
        margin-bottom: 0;
    }

    .mobile-break {
        display: block;
    }

    .contact-footer p {
        white-space: normal;
    }

    .scroll-bee {
        display: none;
    }

    /* --- CV --- */

    .education {
        padding-bottom: 0;
        padding-top: 10px;
    }

    .reference-full p {
        padding: 0;
    }

    .reference-name {
        flex-basis: 100%;
    }

    .reference-item.is-open .reference-excerpt {
        text-align: start;
    }

    .reference-excerpt {
        font-size: 16px;
    }


    /* --- CV — Education --- */

    .education-list {
        gap: 1rem;
    }

    .education-card {
        flex: 1 1 45%;
        padding: 1.5rem 1rem;
    }


    /* --- CV — Highlights --- */

    .highlight-item {
        flex: 1 1 45%;
    }

    .view-more-link {
        margin-top: var(--space-lg, 1.5rem);
    }

   .highlights {
        padding-bottom: 0;
   } 

    /* --- Journey --- */

    .journey-wrapper {
        flex-direction: column;
        gap: var(--space-md);
    }

    .journey-nav-btn {
        display: none;
    }

    .journey-nav {
        margin: 0;
    }

    .journey-gallery-wrapper {
        width: 100%;
        height: 50vw;
        min-height: 350px;
        max-height: 500px;

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

        gap: 10px;
    }

    .journey-gallery {
        position: relative;
        left: 10px;
        top: 10px;

        flex: 1;
        width: auto;
        height: 100%;

        perspective: none;
        transform-style: flat;
        overflow: visible;
    }

    .journey-gallery .journey-img {
        mask-image: none;
        -webkit-mask-image: none;

        border-radius: 50%;

        width: min(80vw, 260px);
        height: min(80vw, 260px);

        object-fit: cover;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%) scale(1);
    }

    .journey-gallery .journey-img.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        z-index: 2;
        filter: none;
    }

    .journey-gallery .journey-img.next,
    .journey-gallery .journey-img.next-2,
    .journey-gallery .journey-img.prev,
    .journey-gallery .journey-img.prev-2,
    .journey-gallery .journey-img.hidden {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        z-index: 0;
        filter: none;
    }

    .journey-gallery-wrapper .journey-mobile-prev,
    .journey-gallery-wrapper .journey-mobile-next {
        display: flex;
        flex-shrink: 0;
    }

    .journey-content {
        width: 100%;
        max-width: none;
        order: 2;
    }

    /* --- Experience --- */

    .slicker-card {
        transition:
            transform 0.38s cubic-bezier(0.34, 1.05, 0.64, 1),
            width 0.38s cubic-bezier(0.34, 1.05, 0.64, 1),
            height 0.38s cubic-bezier(0.34, 1.05, 0.64, 1),
            opacity 0.3s ease,
            filter 0.3s ease;
    }

    .experience-wrapper {
        gap: var(--space-md);
    }

    .experience-description p {
        font-size: 17px;
    }

    .slicker-cards-wrapper .cards-group {
        min-height: 325px;

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

    .slicker-card.is-middle {
        display: none;
    }

    .slicker-card.is-active,
    .slicker-card.is-middle,
    .slicker-card.is-back {
        transform: none !important;
    }

    .slicker-card.is-middle,
    .slicker-card.is-back {
        filter: none !important;
    }

    .slicker-card.is-active {
        filter:
            drop-shadow(0 0 7px rgba(217, 123, 155, 0.12)) !important;
    }

    .experience-content {
        width: 100%;
        height: auto;

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

        row-gap: 1.5rem;
    }

    .exp-col-left {
        grid-column: 1;
        grid-row: 1;
    }

    .exp-col-right {
        grid-column: 1;
        grid-row: 2;
    }

    .experience-link {
        grid-column: 1;
        grid-row: 3;
        align-self: start;
        margin-bottom: 0;
    }


    /* --- Projects --- */

    .project .flexbox-wrapper {
        gap: 20px;
    }

    .project-wrapper {
        gap: 20px;
    }

    .content-project {
        width: 95%;
    }

    .honeycomb {
        grid-template-columns: repeat(4, 130px);
        grid-template-rows: repeat(4, 100px);
        margin-bottom: 0;
    }


    /* --- Contact --- */

    .contact-layout {
        width: 100%;
    }

    .decorative-side {
        left: 50%;
        right: auto;
        opacity: .09;
        width: 570px;
        transform: translateX(-50%) scaleX(1);
    }


    /* --- Hero --- */

    .scroll-indicator,
    .hero-img {
        display: none;
    }

    /* --- Navigation --- */

    .site-header {
        position: absolute;

        top: 0;
        left: 0;
        width: 100%;

        min-height: auto;
        padding: 20px;

        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        border-bottom: none;
        z-index: 100;
    }

    .site-header.scrolled {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
    }

    .nav-left {
        display: flex;
        align-items: center;
    }

    .beehive-icon {
        width: 38px;
        height: 38px;
    }

    .beehive-icon svg {
        width: 100%;
        height: 100%;
    }

    .header-nav {
        position: relative;
        width: auto;
    }


    /* --- Mobile menu --- */

    .header-nav ul {
        position: absolute;

        top: 54px;
        right: 0;

        width: 180px;

        display: flex;
        flex-direction: column;

        gap: 0;
        padding: 15px 0;

        background: rgba(23, 16, 21, .82);

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        border: 1px solid rgba(217, 123, 155, .25);
        border-radius: 18px;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, .35),
            0 0 25px rgba(217, 123, 155, .08);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-8px) scale(.96);
        transform-origin: top right;

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;

        z-index: 200;
    }

    .header-nav.open ul {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .header-nav ul li {
        width: 100%;
    }

    .header-nav ul li a {
        display: block;
        width: 100%;

        padding: 12px 20px;

        color: var(--text-nav);
        font-size: 15px;
        text-align: right;

        transition:
            color .2s ease,
            background-color .2s ease,
            padding-right .2s ease;
    }

    .header-nav ul li a:hover {
        color: var(--primary-light);
        background: rgba(217, 123, 155, .08);
        padding-right: 25px;
        transform: none;
    }


    /* --- Menu button --- */

    .mobile-menu-btn {
        width: 44px;
        height: 44px;

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

        gap: 5px;
        padding: 0;

        border: 1px solid rgba(217, 123, 155, .35);
        border-radius: 50%;

        background: rgba(23, 16, 21, .55);

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        cursor: pointer;

        box-shadow:
            0 0 18px rgba(217, 123, 155, .10);

        transition:
            background .3s ease,
            border-color .3s ease,
            box-shadow .3s ease;
    }

    .mobile-menu-btn:hover {
        background: rgba(23, 16, 21, .75);
        border-color: rgba(217, 123, 155, .6);

        box-shadow:
            0 0 22px rgba(217, 123, 155, .2);
    }

    .mobile-menu-btn span {
        display: block;

        width: 18px;
        height: 1.5px;

        background: var(--primary-light);
        border-radius: 2px;

        transition:
            transform .3s ease,
            opacity .2s ease;
    }

    .header-nav.open .mobile-menu-btn span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }

    .header-nav.open .mobile-menu-btn span:nth-child(2) {
        opacity: 0;
    }

    .header-nav.open .mobile-menu-btn span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }


    /* --- Phone — Tools --- */

    .tools .hex-card {
        width: 170px;
        height: 170px;
    }

    .tools .hex-icon svg {
        width: 45px;
        height: 45px;
    }

    .hex-content h4 {
        font-size: 1.1rem;
    }


    /* --- Phone — Projects grid --- */

    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: 16px;
    }


    /* --- Phone — CV timeline --- */

    .journey-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;
    }

    .vertical-timeline {
        --axis-x: 0;
        --dot-size: 9px;
        --bee-size: 28px;

        width: 100%;
        flex: none;

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

        position: relative;

        padding: 2.5rem 0 1rem;
    }

    .timeline-line,
    .timeline-progress {
        left: 0;
        top: 2.5rem;

        width: 100%;
        height: 2px;

        transform: none;
    }

    .timeline-line {
        bottom: auto;
        background: var(--bee-trail);
    }

    .timeline-progress {
        height: 2px;
        width: 0;
        transition: width .3s ease;
    }

    .timeline-item {
        position: relative;

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

        width: auto;
        margin: 0 !important;

        z-index: 3;
    }

    .timeline-dot {
        position: relative;

        left: auto;
        top: -4px;

        transform: none;

        width: var(--dot-size);
        height: var(--dot-size);

        margin-bottom: .8rem;
        flex-shrink: 0;
    }

    .timeline-content {
        width: auto;
        margin-left: 0;

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

        text-align: center;

        gap: 10px;
    }

    .timeline-date {
        flex: 0;
    }

    .timeline-content .date {
        padding-right: 0;
    }

    .timeline-desc .company,
    .timeline-desc .role,
    .timeline-desc .desc,
    .bee {
        display: none;
    }

    .timeline-header {
        margin: .7rem 0 0;

        display: flex;
        justify-content: center;
    }

    .view-details {
        font-size: .7rem;
        letter-spacing: .12em;
    }

    .content-project.job-detail-panel {
        width: 100%;
        min-height: 280px;

        position: relative;
        top: auto;

        height: auto;
        max-height: none;

        overflow: visible;
        flex: none;

        padding: 30px 25px;
    }

    .job-panel-empty {
        font-size: .85rem;
        line-height: 1.5;
    }

    .job-panel-role,
    .job-panel-year {
        font-size: .8rem;
    }

    .job-panel-label {
        font-size: .7rem;
        margin-top: 1.3rem;
    }

    .job-panel-list {
        gap: .75rem;
    }

    .job-panel-list li {
        font-size: .82rem;
        line-height: 1.5;
    }

    /* Whole contact area */
  .contact-layout {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .contact-main {
    width: 100%;
    align-items: center;
  }


  /* Intro centered */
  .contact-intro {
    width: 100%;
    max-width: 550px;
    margin-inline: auto;
    text-align: center;
  }


  /* Contact details */
  .contact-details {
    width: 100%;
    align-items: center;
    padding-bottom: 20px;
  }


  /* Email centered */
  .contact-details > p:first-child {
    width: 100%;
    align-items: center;
    text-align: center;
  }


  /* =========================================
     PHONE + LOCATION

     Whole block = centered
     Content inside = left aligned
  ========================================= */

  .contact-details-wrapper {
    width: 280px;
    margin-inline: auto;

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

    gap: 12px;
    text-align: left;
  }

  .contact-details-wrapper p {
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;

    gap: 10px;
    text-align: left;
  }


  /* =========================================
     EXPLORE + ELSEWHERE

     Same 280px width so EXPLORE lines up
     with PHONE + LOCATION.
  ========================================= */

  .contact-side {
    width: 280px;
    margin-inline: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 45px;

    text-align: left;
  }

  .contact-links,
  .contact-socials {
    align-items: flex-start;
    text-align: left;
  }


  /* =========================================
     BOTTOM COPYRIGHT
  ========================================= */

  .contact-footer {
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 8px;
    text-align: center;
  }
}


/* =========================================================
   7. SMALL PHONE
   max-width: 690px
========================================================= */

@media (max-width: 690px) {

    /* --- Projects — Honeycomb --- */

    .honeycomb {
        grid-template-columns: repeat(4, 125px);
        grid-template-rows: repeat(3, 125px);
        margin-bottom: 0;
        margin-top: 10px;
    }

    .mini-hex {
        width: 140px;
        height: 140px;
    }

    .hex-1 { transform: translate(15px, 20px); }
    .hex-2 { transform: translate(-2px, 82px); }
    .hex-3 { transform: translate(-19px, 20px); }
    .hex-4 { transform: translate(-36px, 82px); }
    .hex-5 { transform: translate(15px, 20px); }
    .hex-6 { transform: translate(-2px, 82px); }
    .hex-7 { transform: translate(-19px, 20px); }
    .hex-8 { transform: translate(-36px, 82px); }


    /* --- CV — Timeline --- */

    .content-project.job-detail-panel {
        height: 70vh;
        justify-content: space-evenly;
    }

    .cv-sm-arrow {
        display: none;
    }

    .vertical-timeline {
        padding-top: 1rem;
    }

    .timeline-line {
        top: 1rem;
    }


    /* --- Contact --- */

    .decorative-side {
        display: none;
    }

    .contact-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        align-items: center;
    }
}


@media (max-width: 767px) and (min-width: 691px) {

    /* --- Projects — Honeycomb --- */

    .honeycomb {
        grid-template-columns: repeat(4, 115px);
        grid-template-rows: repeat(3, 115px);
        margin-top: 5px;
        margin-bottom: 0;
    }

    .mini-hex {
        width: 130px;
        height: 130px;
    }

    .hex-1 { transform: translate(10px, 18px); }
    .hex-2 { transform: translate(-5px, 75px); }
    .hex-3 { transform: translate(-20px, 18px); }
    .hex-4 { transform: translate(-34px, 75px); }

    .hex-5 { transform: translate(10px, 18px); }
    .hex-6 { transform: translate(-5px, 75px); }
    .hex-7 { transform: translate(-20px, 18px); }
    .hex-8 { transform: translate(-34px, 75px); }
}

/* =========================================================
   8. VERY SMALL PHONE
   max-width: 510px
========================================================= */

@media (max-width: 510px) {

    /* --- CV — Education --- */

    .education-card {
        flex: 1 1 100%;
    }


    /* --- CV — Interests --- */

    .hobby-item {
        flex: 1 1 50%;
    }


    /* --- CV — Highlights --- */

    .highlight-item {
        flex: 1 1 100%;
    }


    /* --- Shared --- */

    /* --- Hero — Index + CV --- */

    .hero-content-wrapper {
        min-height: 100vh;
        height: 100vh;

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

    .hero-content,
    .cv-left-col {
        width: 100%;

        min-height: 85vh;
        height: auto;

        display: flex;
        flex-direction: column;

        justify-content: space-evenly;
        align-items: center;

        text-align: center;
        z-index: 1;
    }

    .hero-content {
        padding: clamp(40px, 10vw, 130px)
                 clamp(16px, 5vw, 48px);
    }

    .hero-content h1,
    .cv-left-col h2 {
        margin: 0;

        font-size: 40px;
        line-height: 1;
        text-align: center;
    }

    .cv-left-col {
        margin-top: 0;
    }

    .cv-left-col .profession {
        margin: 0;

        font-family: var(--font-body);
        text-transform: uppercase;

        letter-spacing: .20em;
        font-size: 14px;

        font-style: normal;
        color: var(--primary-light);

        text-align: center;
    }

    .hero-text {
        margin: 0;
        font-size: 16px;
        text-align: center;
    }


    /* --- Hero — Buttons --- */

    .hero-btn-wrapper {
        width: 100%;
        margin: 0;

        display: flex;
        flex-direction: column;

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

        text-align: center;
    }

    .hero-btn {
        width: 90%;
        padding: 1rem 2rem;
    }

    .cv-hex-btn {
        display: none;
    }

    .cv.hero-btn {
        display: flex;
    }

    /* --- Experience --- */

    .slicker-cards-wrapper .cards-group,
     .journey-gallery-wrapper {
        min-height: 250px;
        max-height: 280px;
    }


    /* --- Project pages --- */

    .projects-page .hero-content {
        justify-content: center;
        gap: 20px;
        min-height: 100vh;
    }

    .tools .hex-wrapper {
        gap: 20px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 16px;
    }

    .project-hex {
        width: 230px;
    }

    .project-nav {
        bottom: 20px;
    }

    .lightbox.active .lightbox-img {
        transform: scale(.75);
    }


    /* --- Projects — Honeycomb --- */

    .honeycomb {
        position: relative;
        top: -20px;

        grid-template-columns: repeat(4, 100px);
        grid-template-rows: repeat(3, 100px);
        margin-bottom: 0;
    }

    .mini-hex {
        width: 115px;
        height: 115px;
    }

    .hex-1 { transform: translate(10px, 21px); }
    .hex-2 { transform: translate(0, 72px); }
    .hex-3 { transform: translate(-10px, 21px); }
    .hex-4 { transform: translate(-20px, 72px); }
    .hex-5 { transform: translate(10px, 24px); }
    .hex-6 { transform: translate(0, 76px); }
    .hex-7 { transform: translate(-10px, 24px); }
    .hex-8 { transform: translate(-20px, 76px); }


    /* --- Mobile galleries --- */

    .slicker-cards-wrapper,
    .journey-gallery-wrapper {
        width: 100%;

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

        gap: 12px;
    }

    .cards-group,
    .journey-gallery {
        flex: 1;
        min-height: auto;
        max-height: 250px;
    }

    .journey-gallery .journey-img {
        width: min(60vw, 215px);
        height: min(60vw, 215px);
    }

    .slicker-card.is-active {
        width: 230px;
        height: 230px;
    }
}