/*
Theme Name: PZ
Author: PZ
Version: 1.0
*/
 

/*::::::::::::::::::::::::::::::::::::
    STYLES
::::::::::::::::::::::::::::::::::::*/
 
    /* ----- Measurements, spacers, hiding ----- */ 

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

        html { scroll-behavior: smooth; }

        .layout {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            max-width: 85em;
            margin: 0 auto;
            padding: 4rem 4rem;
        }


        main {
          margin-top: auto;
          margin-bottom: auto;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        header  {
            padding: calc(0.5 + 1.5vw) 0;
        }

        .col-12-intro {
            width: 100%;
            display: flex;
            column-gap: 0.75rem;
        } 

        .col-12 {
            width: 100%;
            display: block;
            column-gap: 2rem;
        }

        .col-12-grid {
            display: grid;
            grid-auto-flow: column;
            justify-content: space-evenly;
        }

        .col-12-contact {
            display: flex;
            justify-content: space-evenly;
            gap:1rem;
        }

        .col-9 {
            width: 75%;
            display: block;
        }

        .col-8 {
            width: 66.666667%;
            display: block;
        }

        .col-7 {
            width: 58.333333%;
            display: block;
        }

        .col-6 {
            width: 50%;
            display: block;
        }

        .col-5 {
            width: 41.666667%;
            display: block;
        } 

        .col-4 {
            width: 33.333333%;
            display: block;
        } 

        .col-3 {
            width: 25%;
            display: block;
        }

        .col-2 {
            width: 16.666667% ;
        }

        .col-1 {
            width: 8.333333% ;
        }

        .spacer {
            height: 1.5rem;
            display: block;
        }

        .spacer2x {
            height: 3rem;
            display: block;
        }
 
        .mobile-hide-break {
            display: inline;
        }
 
        .section-padding {
            padding-top:150px;
            padding-bottom: 150px;
        }
 
        .section-padding-hero {
            padding-top:100px;
            padding-bottom: 100px;
        }

    /* ----- Root ----- */

        :root {
 
            --stem-len:42px; /*Relevant to horizontal timeline*/
            --fade-width: 120px; /*Relevant to logo scroll band*/
            --navbar-height: 80px; /*Relevant to use case sticky step nav*/
            --ease: cubic-bezier(.4,0,.2,1);/*Relevant to use case sticky step nav*/
            --dur: .45s;/*Relevant to use case sticky step nav*/
 
            --cube-light: #FFB27A;
            --cube-mid:   #FF7A2E;
            --cube-dark:  #E85400;
            --cube-shine: #FFDCB8;
 
            /*Swup*/
            --gap: clamp(1rem, 2vw, 2rem);
            --gap-x2: calc(var(--gap) * 2);
            --radius-round: 1000px;
            --radius-0: 0.2em;
            --radius-1: 0.4em;
            scrollbar-gutter: stable;
        }

        .light-gradient {
                background: linear-gradient(176deg, #e6dbce, #f4f4f1);  
                -webkit-animation: AnimationName 12s ease infinite;
                -moz-animation: AnimationName 12s ease infinite;
                animation: AnimationName 12s ease infinite;
                position: relative;
        }

        @-webkit-keyframes AnimationName {
                0%{background-position:63% 0%}
                50%{background-position:38% 100%}
                100%{background-position:63% 0%}
        }
        @-moz-keyframes AnimationName {
                0%{background-position:63% 0%}
                50%{background-position:38% 100%}
                100%{background-position:63% 0%}
        }
        @keyframes AnimationName {
                0%{background-position:63% 0%}
                50%{background-position:38% 100%}
                100%{background-position:63% 0%}
        }

        .light-gradient::after {
                content: "";
                position: absolute;
                inset: 0;
                background: url("assets/images/texture.png") repeat;
                background-size: 8px 8px; /* adjust to your tile size */
                opacity: 0.15;               /* subtle grain — tune to taste */
                mix-blend-mode: multiply;    /* or overlay/soft-light, try each */
                pointer-events: none;
                z-index: -1;
        } 

        .dark-gradient {
                position: relative;
                background: linear-gradient(180deg, #304484, #3B243E);
                background-size: 400% 400%;
                -webkit-animation: AnimationName 8s ease infinite;
                -moz-animation: AnimationName 8s ease infinite;
                animation: 
        }
        @-webkit-keyframes AnimationName {
                0%   { background-position: 50% 0%; }
                50%  { background-position: 50% 100%; }
                100% { background-position: 50% 0%; }
        }
        @-moz-keyframes AnimationName {
                0%   { background-position: 50% 0%; }
                50%  { background-position: 50% 100%; }
                100% { background-position: 50% 0%; }
        }
        @keyframes AnimationName {
                0%   { background-position: 50% 0%; }
                50%  { background-position: 50% 100%; }
                100% { background-position: 50% 0%; }
        }

    /* ----- Typography ----- */
 
            h1 {
                font-family: "Mona Sans", sans-serif; 
                font-weight: 600;
                font-style: normal;
                font-size: 4rem; 
                line-height: 4.5rem;
                margin-bottom: 1rem;
                color: var(--main-font-color);
            }
     
     
            h2 {
                font-family: "Mona Sans", sans-serif;
                font-weight: 500;
                font-style: normal;
                font-size: 2.5rem; 
                line-height: 2.5rem;
                margin-bottom: 1rem;
                /*text-align: center;
                vertical-align: middle;*/
                padding-bottom: 2rem;
                color: var(--main-font-color);
            }

            h1 span,
            h2 span {
              display: block;
            }
     
            h3 {
                font-family: "Mona Sans", sans-serif;
                font-weight: 500;
                font-style: normal;
                font-size: 2rem; 
                line-height: 2.2rem;
                margin-bottom: 1rem;
                color: var(--main-font-color);
            }
     
            h4 {
                font-family: "Mona Sans", sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 1.5rem; 
                line-height:1.95rem;
                margin-bottom: 1rem;
                color: var(--main-font-color); 
            }
     
            h5 {
                font-family: "Mona Sans", sans-serif;
                font-weight:500;
                font-style: normal;
                font-size: 1.375rem;  /*22px*/
                line-height: 2rem; /*32px*/
                margin-bottom: 0rem;
                color: var(--main-font-color);
            }
     
            h6 {
                font-family: "Mona Sans", sans-serif;
                font-weight:600;
                font-style: normal;
                font-size: 1.25rem; /*20px*/
                line-height: 1.875rem; /*30px*/
                margin-bottom: 0rem;
                color: var(--main-font-color);
            }
     
            subtitle {
                font-family: "Mona Sans", sans-serif;
                font-weight:600;
                font-style: normal;
                font-size: 1.2rem; /*18px*/
                line-height: 1.375rem; /*22px*/
                margin: 0;
                color: var(--main-font-color);
            }
     
            body {
                font-family: "Mona Sans", sans-serif;
                font-weight: 400;
                font-style: normal;
                overflow-x: hidden;
                font-size: 1.2rem; /*18px*/
                line-height: 1.8rem; /*28px*/
                margin: 0;
                scrollbar-width: none;
                -ms-overflow-style: -ms-autohiding-scrollbar;
                color: var(--main-font-color);
            }
     
            body .caption {
                font-family: "Mona Sans", sans-serif;
                font-weight: 500;
                font-style: normal;
                font-size: 0.8rem; /*11px*/
                line-height: 1.2rem;
                text-transform: uppercase;
                color: var(--main-font-color);
            }
     
            u {
                text-underline-offset: 0.7rem;
                border-bottom: dotted 2px var(--underline-color);
            }
     
     
            b{
                font-weight: 600;
            }

            a {
                color: var(--main-font-color);
            }


/*::::::::::::::::::::::::::::::::::::
    UI COMPONENTS
::::::::::::::::::::::::::::::::::::*/

    /* ----- Accordion ----*/

            .accordion {
                max-width: 100%;
                margin: 2rem auto;
                border: 1px solid var(--white20);
                border-radius: 0px;
                overflow: hidden;
            }
             
              .accordion-item {
                border-bottom: 1px solid var(--white50);
              }
             
              .accordion-item:last-child {
                border-bottom: none;
              }
             
              .accordion-header {
                all: unset;
                box-sizing: border-box;
                width: 100%;
                cursor: pointer;
                padding: 1rem 1.25rem;
                font-weight: 400;
                color: var(--white);
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: var(--white20);
                transition: background 0.2s ease;
              }
             
              .accordion-header:hover {
                background: var(--white50);
              }
             
              .accordion-header:focus-visible {
                outline: 2px solid #4a90e2;
                outline-offset: -2px;
              }
             
              .accordion-icon {
                font-size: 1.2rem;
                transition: transform 0.25s ease;
                flex-shrink: 0;
                margin-left: 1rem;
              }
             
              .accordion-item.is-open .accordion-icon {
                transform: rotate(180deg);
              }
             
              /* The animation trick: grid-template-rows animates between 0fr and 1fr */
              .accordion-panel {
                display: grid;
                grid-template-rows: 0fr;
                transition: grid-template-rows 0.3s ease;
              }
             
              .accordion-item.is-open .accordion-panel {
                grid-template-rows: 1fr;
              }
             
              .accordion-panel-inner {
                overflow: hidden;
              }
             
              .accordion-content {
                padding: 0 1.25rem 1rem;
                color: var(--white);
                line-height: 1.5;
              }

    /* ----- Images ----- */
        .portrait {
            background: url(assets/images/portrait.png);
            border-radius: 0px;
            max-width: 90%;
            transform: rotate(-3deg);
            transition: 0.3s ease;       
            border: solid 4px var(--border-image);      
        }

        .portrait:hover {
            background: url(assets/images/portrait.png);
            border-radius: 24px;
            max-width: 90%;
            transform: rotate(0deg);
        }

        .portfolio-image-left {
            border-radius: 0px;
            max-width: 90%;
            transform: rotate(0deg);
            transition: 0.3s ease;       
            border: solid 4px var(--border-image);    
        }

        .portfolio-image-left:hover {
            border-radius: 24px;
            max-width: 90%;
            transform: rotate(-3deg);
        }

        .portfolio-image-right {
            border-radius: 0px;
            max-width: 90%;
            transform: rotate(0deg);
            transition: 0.3s ease;       
            border: solid 4px var(--border-image);     
        }

        .portfolio-image-right:hover {
            border-radius: 24px;
            max-width: 90%;
            transform: rotate(-3deg);
        }

        .hadraw-icons {
            max-height: 48px;
        }

    /* ----- Buttons ----- */
 
        /* Base button */
 
            .bu {
                width: max-content;
                display: flex;
                padding: 0.8rem;
                align-items: center;
 
                font-size: 1.2rem;
                font-weight: 500;
                text-transform: uppercase;
                            
                transition: .3s ease;   

                box-shadow: 4px 4px 0px var(--box-shadow-color);
            }   
 
        /* Solid buttons */     
 
            .bu--solidlight {
                color: var(--contrast-font-color);
                background-color: var(--light-color); 
                border: 1px solid var(--light-color);                    
            }
 
            .bu--solidlight a {
                color: var(--contrast-font-color) !important;
                text-decoration: none;
            }
 
            .bu--solidlight:hover {
                border-radius: 16px;
            }
 
            .bu--solidlight a:hover {
                text-decoration:none !important;
            }
 
 
            .bu--soliddark {
                color: var(--main-font-color);
                background-color: var(--accent-color); 
                border: 1px solid var(--accent-color);           
            }
 
            .bu--soliddark a {
                color: var(--main-font-color) !important;
                text-decoration: none;
            }
 
            .bu--soliddark:hover {
                border-radius: 16px;
            }
 
            .bu--soliddark a:hover {
                text-decoration:none !important;
            }
 
            .bu--soliddark i {
                color: var(--main-font-color) !important;
            }
 
        /* Phantom buttons */    
 
            .bu--phantomlight {
                color: var(--light-color);
                background-color: transparent !important;
                border: solid 2px var(--light-color);
            }
 
            .bu--phantomlight i{
                color: var(--light-color);
            }
 
            .bu--phantomlight a{
                color: var(--light-color);
                text-decoration: none;
            }
 
            .bu--phantomlight:hover {
                border-radius: 16px;
            }
 
            .bu--phantomlight a:hover {
                text-decoration:none !important;
            }
 
            .bu--phantomdark {
                color: var(--dark-color);
                background-color: transparent !important;
                border: solid 2px var(--dark-color);
            }
 
            .bu--phantomdark i{
                color: var(--dark-color);
            }
 
            .bu--phantomdark a{
                color: var(--dark-color);
                text-decoration: none;
            }
 
            .bu--phantomdark:hover {
                border-radius: 16px;
            }
 
            .bu--phantomdark a:hover {
                text-decoration:none !important;
            }
 
        /* Button group */
 
            .bu-group {
                display: inline-flex;
                column-gap: 8px;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                justify-content: left;
                width: 100%;
            }        

    /* ----- Chips ----- */
 
        .chip {
            font-size: 1rem;
            border-radius: 12px;
            padding-top: 0.1rem;
            padding-left: 0.8rem;
            padding-right: 0.8rem;
            text-wrap: auto-fit;
            display: inline-block;
            height: 2rem;
            margin-top: 0.5rem;
            background-color: var(--chip-bg-color);
            color: var(--chip-font-color);
            transition: ease 0.5s;
        } 

        .chip a {
            text-decoration: none;
            color: var(--chip-font-color);
        }

        .chip__active {
            border: 1px solid var(--chip-font-color);
        }

        .chip-emphasis {
            font-size: 1rem;
            border-radius: 12px;
            padding-top: 0.1rem;
            padding-left: 0.8rem;
            padding-right: 0.8rem;
            text-wrap: auto-fit;
            display: inline-block;
            height: 2rem;
            margin-top: 0.5rem;
            background-color: var(--chip-emphasis-bg-color);
            color: var(--chip-emphasis-font-color);
        } 

        .chip-group {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-bottom: 2rem;
            position: sticky;
            top: 67px;
            background-color: transparent;
            transition:background-color 200ms ease-in-out;
            padding-block: 0.5rem;
        } 

        /*.chip-group.scrolled {
            display: flex;
            flex-direction: column;
            background: var(--black70);
            backdrop-filter: blur(12px); 
            -webkit-backdrop-filter: blur(12px); /* For Safari support */
            /*z-index: 1000;
            margin: 0 -4rem;      /* should match .layout's padding */
            /*padding: 1rem 4rem;
            width: 70em;
        }*/

        .chip-group__row {
            display: inline-flex;
            align-items: baseline;
            width: 100%;
        }

        .chip-group__title {
            font-size: 1.5rem;
            font-weight: 600;
            display: none;
            overflow: hidden;
            white-space: nowrap;
            transition: max-width 250ms ease-in-out, display 200ms ease-in-out;
        }

        .chip-group.scrolled .chip-group__title {
            max-height: 2rem; /* enough to fit one line of text */
            opacity: 1;
            margin-bottom: 0.5rem;
            display: block;
        }

        .chip-line{
            height:2px;
            background: var(--chip-bg-color);
            flex:1;
            min-width: 24px;
        }        

    /* ----- Portfolio cards (WORK page) ----- */

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));
            grid-gap: calc(0.8em + 1vw);
        }

        .card {
          position: relative;
          padding: 1rem 2rem;
          border-radius: 0px;
          display: flex;
          align-items: center; /*Vertically align*/
          background-color: var(--card-bg-color);
        }


        .card>a {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          user-select: none;
        }

        .card img {
            float: left;
            max-width: 100%;
        }

        .card h2 {
            padding-bottom: 1rem;
            color: var(--main-font-color);
        }

        .card h3 {
            color: var(--main-font-color);
        }
    
    /* ----- Portfolio content ----- */

        .detail__body {
            display: grid;
            grid-template-columns: 1fr 220px;
            gap: 1rem;
            align-items: start;
        }

        .detail__content-wrapper {
            min-width: 0; 
        }

        .detail__header {
            top: 0px;
            z-index: 900;
            background-color: transparent; /* whatever your page background is */
            margin: 0 -4rem;      /* matches .layout's own padding */
            padding: 1rem 4rem;
        }

        .detail__header h1 {
            color: var(--detail-header-font-color);
        } 

        .detail__header h4 {
            color: var(--detail-header-font-color);
        }



        /*.detail__header.scrolled {
            background: var(--black50);
            backdrop-filter: blur(12px); 
            -webkit-backdrop-filter: blur(12px); 
            z-index: 1000;
        }*/


        .detail__content { 
            margin: 2rem 0;      /* no more -4rem breakout — it now overflows the column */
            padding: 2rem 2rem;
            border-radius: 0px;
            scroll-margin-top: 5rem;
            background-color: var(--detail-content-bg-color);
            box-shadow: 4px 4px 0px 0 var(--box-shadow-color);
        }

        .detail__content h4 {
            font-weight: 600;
        }



        @media(min-width: 760px) {
          .detail__content {
            /*margin-left: -10vw;
            margin-right: -10vw;*/
            /*padding-left: 10vw;
            padding-right: 10vw;*/

          }
        }

    /* ----- Feature blocks ----- */
        .feature-block {
            padding: 1rem;
            background-color: var(--feature-block-bg-color);
        }

        .feature-block h4 {
            font-weight: 600;
            color: var(--main-font-color);
        }

        .feature-block .heading {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1rem;
        }

        .feature-block__transp {
            background-color: transparent;
            padding-left: 0rem;
            padding-right: 0rem;
        }

        .feature-block__border {
            background-color: transparent;
            border: 1px solid var(--border-color);
        }

        .feature-block__step {
            position: relative;
            background-color: transparent;
            border: 1px solid var(--border-color);
        }

        .feature-block-group {
            display: grid;
            grid-template-columns: 2fr 50%;
            gap: 1rem;
            align-items: start;
        }

        .feature-block__step:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -1rem;
            width: 1rem;
            height: 0;
            border-top: 3px dotted var(--border-color);
            transform: translateY(-50%);
        }         

    /* ----- Problem cards ----- */

        .problem-card {    
            display: flex;
            flex-direction: column;
        }

        .problem-card-content {
            background: var(--speech-bubble-bg-color);
            border: 1px solid var(--border-color);
            padding: 0.5rem 1rem 0.2rem 1rem;
        }

        .problem-card-foot img{
            border-radius: 50%;
            width:40px;
            height:40px;
            display: inline-block;
        }

        .problem-card-foot {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.5rem;
        }

        .problem-card-group {
            display: grid;
            grid-template-columns: 2fr 50%;
            gap: 1rem;
            align-items: start;
        }

    /* ----- Speech bubble ----- */
        .speech-bubble {
          position: relative;
          background-color: var(--speech-bubble-bg-color);
          width: 100%;
          max-width: 100%;
          padding: 1.5rem 1.5rem;
          border-radius: 0;
          transition: border-radius 0.3s ease;
        }

        .speech-bubble:hover {
          border-radius: 24px;
        }

        .speech-bubble h1 {
          color: var(--main-font-color);
          margin: 0;
        }

        .speech-bubble a {
            color: var(--main-font-color);
            text-decoration: none;
            text-align: left;
        }

        .speech-bubble a:hover {
            text-decoration: underline var(--accent-color);
            text-decoration-thickness: 3px;
            text-underline-offset: 0.5rem;
            transition: text-decoration 0.5s ease;
        }

        /* Tail */
        .speech-bubble::after {
          content: '';
          position: absolute;
          bottom: -20px;
          left: 32px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 20px 0 0 16px;
          border-color: var(--speech-bubble-bg-color) transparent transparent transparent;
          transition: left 0.3s ease;
        }

    /* ----- Table ----- */
        
        .table {
            width: 90%;
            max-width: 100%;
            margin-bottom: 1rem;
            background-color: transparent;
            border-color: var(--border-color);
            table-layout: auto;
            color: var(--main-font-color);
            border-collapse: collapse; /* pick one, not both */
            display: table;
            box-sizing: border-box;
            text-indent: initial;
            unicode-bidi: isolate;
        }

        .table th {
            font-weight: 500;
            border-top: none;
            width: 1%;
            white-space: nowrap;
            border-bottom: 1px solid var(--border-color);
            height: 3rem;
            vertical-align: middle;
            text-align: left;
            padding-right: 1rem;
        }

        .table td {
            font-weight: 400;
            white-space: normal; /* "break-word" isn't a valid white-space value */
            border-bottom: 1px solid var(--border-color);
            height: 3rem;
            vertical-align: middle;
            text-align: left;
            padding-left: 1rem;
        }   

    /* ----- Tabs ----- */
        
        /** To switch to horizontal, change to a column layout*/
        .tabs-wrapper {
            display: grid;
            grid-template-columns: 220px 1fr;
            gap: 32px;
            align-items: start;
        }
         
        /* --- Tab triggers (desktop = vertical list on the left) --- */
          .tabs__list{
            display: flex;
            flex-direction: column;
            gap: 4px;
            border-right: 1px solid var(--border-color);
            padding-right: 0px;
        }
         
        .tabs__tab{
            all: unset;
            cursor: pointer;
            padding: 1rem;
            border-radius: 0px;
            color: var(--white);
            transition: background 0.3s ease, color 0.3s ease;
        }
        .tabs__tab:hover {
            background: var(--white50); 
        }

        .tabs__tab:focus-visible {
            outline: 2px solid var(--border-color); outline-offset: 2px;
        }

        .tabs__tab.is-active {
            background: var(--white20);
            color: var(--main-font-color);
            font-weight: 600;
        }
         
        /* --- Panels (desktop = only the active one is shown) --- */
        .tabs__panels {
            position: relative;
        }
         
        .tabs__panel {
            display: none;
        }
        .tabs__panel.is-active {
            display: block;
            animation: fadeSlideIn 0.3s ease both;
        }
         
        @keyframes fadeSlideIn {
            from{ opacity: 0; transform: translateY(6px); }
            to{ opacity: 1; transform: translateY(0); }
        }
         
        .tabs__panel-inner {
            padding: 0.2rem;
        }

        .tabs__panel h3 {
            margin-top: 0;
        }

    /* ----- Testimonial card ----- */
        
        .testimonial-card {
            background-color: var(--white20);
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 4px 4px 0 var(--box-shadow);
        }  

        .testimonial-card-group {
            display: grid;
            grid-template-columns: 2fr 50%;
            grid-auto-flow: row;
            gap: 1rem;
            align-items: start;
        }   


     
   



/*::::::::::::::::::::::::::::::::::::
    ORGANISMS
::::::::::::::::::::::::::::::::::::*/            

    /* ---------- Nav Bar ---------- */

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 85em;      /* match .layout */
            margin: 0 auto;       /* match .layout centering */
            width: 100%;
            box-sizing: border-box;
            padding: 1rem 4rem;   /* match .layout horizontal padding */
            position: sticky;
            top: 0;
            background: transparent;
            transition: 0.4s ease;
        }

        .navbar.scrolled {
            background: var(--black70);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 1000;
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 2rem;
            margin: 0;
            padding: 0;
            align-items: center;
        }

        .nav-links a {
            text-decoration: underline transparent;
            text-decoration-thickness: 3px;
            text-underline-offset: 0.5rem;
            color: var(--nav-links-color);
            transition: text-decoration 0.5s ease;
        }

        .nav-links a:hover {
            text-decoration: underline var(--accent-color);
            text-decoration-thickness: 3px;
            text-underline-offset: 0.5rem;
        }

        .nav-links a.active {
            font-weight: 600;
            text-decoration: underline var(--accent-color);
            text-decoration-thickness: 3px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-weight: 600;
            font-size: 1.2rem;
            color: var(--nav-links-color);
        }

        /* Hamburger button — hidden on desktop */
        .nav-toggle {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 32px;
            height: 32px;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 1100;
        }

        .nav-toggle span {
            display: block;
            height: 2px;
            width: 100%;
            background: var(--nav-links-color);
            transition: 0.3s ease;
        }

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

    /* ---------- Footer ---------- */

      .footer-area {
            padding: 0.5rem 2rem;
            display: flex;
            border-top: 1px solid var(--border-color);
            text-align: center;
            justify-content: space-around;
            color: var(--footer-font-color);
        }

        .footer-area .copyright {
            display: flex;
            align-items: center;
        }

        .footer-links {
            list-style: none;
            display: flex;
            gap: 1rem;
            margin: 0;
            align-items: center;
        }

     
        .footer-area a {
            text-decoration: underline transparent;
            text-decoration-thickness: 3px;
            text-underline-offset: 0.5rem;
            transition: text-decoration 0.5s ease;
            color: var(--footer-font-color);
        }
     
        .footer-area a:hover {
            text-decoration: underline var(--orange);
            text-decoration-thickness: 3px;
            text-underline-offset: 0.5rem;
            transition: 0.5s ease;
        }

    /* ----- Image Gallery ----- */
        /* Layout replacements for the Bootstrap classes used in the HTML */
            .image-gallery .container {
              max-width: 1140px;
              margin: 0 auto;
              padding: 0 15px;
            }

            .image-gallery .mt-5 { margin-top: 3rem; }
            .image-gallery .mb-3 { margin-bottom: 1rem; }
            .image-gallery .rounded { border-radius: 0.375rem; }

            .image-gallery .row {
              display: flex;
              flex-wrap: wrap;
            }

            .image-gallery .row.g-2 {
              justify-content: center;
              gap: 8px;
            }

            .image-gallery .col-3 {
              flex: 0 0 auto;
              width: auto;
              padding: 0;
            }

            /* Gallery-specific styles (unchanged from what you had) */
            .main-image {
              width: 100%;
              object-fit: cover;
              transition: opacity 0.4s ease-in-out;
            }

            .thumbnail {
              width: 80px;
              height: 80px;
              margin-right: 1rem;
              object-fit: cover;
              cursor: pointer;
              opacity: 0.7;
              transition: opacity 0.3s;
              border: 2px solid var(--border-image);
            }

            .thumbnail:hover {
              opacity: 1;
            }

            .active-thumb {
              border: 2px solid var(--border-thumb);
              opacity: 1;
            }  

    /* ----- Table of Contents (TOC) (Portfolio content) ----- */

        .toc {

              position: sticky;
              top: 5rem;
              padding-top: 2rem;
            }
                      
            .toc ul {
              list-style: none;
              margin: 0;
              padding: 0;
              border-left: 2px solid var(--border-color);
            }
             
            .toc__item--h3 .toc__link {
              padding-left: 1.7em;
            }
             
            .toc__link {
              display: block;
              padding: 0.35em 1em;
              margin-left: -2px;
              border-left: 2px solid transparent;
              font-size: 0.85em;
              font-weight: normal;
              color: var(--nav-links-color);
              text-decoration: none;
              background-image: none;
              transition: color 150ms, border-color 150ms;
            }
             
            .toc__link:hover {
              text-decoration: underline;
            }
             
            .toc__link.is-active {
              color: var(--nav-links-color);
              border-left-color: var(--nav-links-color);
              font-weight: 600;
            }
             
            /* Smooth native scrolling + room so headings don't land flush at the top */
            html {
              scroll-behavior: smooth;
            }
             
            .detail__content h1,
            .detail__content h2,
            .detail__content h3 {
              scroll-margin-top: 2rem;
            }

    /* ----- Timeline ----- */     
    
        /* Sección contenedora */
            .timeline-section {
                background: var(--page-background);
                padding: 5rem 0 4rem;
                position: relative;
                overflow: hidden;
            }
     
            .timeline-heading {
                font-family: "Mona Sans", sans-serif;
                font-weight: 600;
                color: var(--orange);
                margin-bottom: .25rem;
            }
     
            .timeline-subheading{
                font-family: "Mona Sans", sans-serif;
                color: var(--grape);
                font-size: .95rem;
                letter-spacing: .04em;
                margin-bottom: 2.5rem;
            }
     
      /* ===== Riel horizontal con scroll ===== */
        /* Altura fija: es la clave para que el centro (50%) sea el mismo
         punto para TODOS los hitos, sin importar cuánto texto tenga cada tarjeta. */
            .timeline-scroll{
                display: flex;
                height: 500px;
                overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x proximity;
                padding: 0 4vw;
                position: relative;
                scrollbar-width: thin;
                scrollbar-color: var(--border-color) transparent;
             
                /* el riel central que une a todas las tarjetas */
                background-image: linear-gradient(var(--border-color), var(--border-color));
                background-size: 100% 2px;
                background-repeat: repeat-x;
                background-position: center;
                background-attachment: local;
            }
     
            .timeline-scroll::-webkit-scrollbar{ height: 6px; }
            .timeline-scroll::-webkit-scrollbar-track{ background: transparent; }
            .timeline-scroll::-webkit-scrollbar-thumb{ background: var(--grape); border-radius: 4px; }
     
            .milestone{
                flex: 0 0 auto;
                width: min(78vw, 300px);
                height: 100%;
                padding: 0 1.25rem;
                position: relative;
                scroll-snap-align: center;
                z-index: 1;
            }
     
            /* marca en la regla (año) — siempre en el centro exacto del carril */
            .milestone-year{
                font-family: "Mona Sans", sans-serif;
                font-size: .78rem;
                font-weight: 500;
                color: var(--grape);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background: var(--light-color);
                padding: .15rem .55rem;
                border: 1px solid var(--border-color);
                border-radius: 999px;
                white-space: nowrap;
                z-index: 3;
            }
     
            /* vástago fijo que conecta la tarjeta con el riel */
            .milestone-stem{
                position: absolute;
                left: 50%;
                width: 2px;
                height: var(--stem-len);
                background: var(--border-color);
                transform: translateX(-50%);
            }
            .milestone--up .milestone-stem  { top: calc(50% - var(--stem-len)); }
            .milestone--down .milestone-stem{ top: 50%; }
     
            .milestone-dot{
                position: absolute;
                left: 50%;
                top: 50%;
                width: 9px; height: 9px;
                background: var(--ink);
                border: 2px solid var(--white);
                border-radius: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
            }
     
            /* la tarjeta se ancla a una distancia FIJA del centro, nunca al 50% de su propia altura */
            .milestone-card{
                position: absolute;
                left: 1.25rem;
                right: 1.25rem;
                max-height: calc(50% - var(--stem-len) - .75rem);
                overflow: hidden;
                background: var(--white);
                border: 1px solid rgba(27,42,74,.1);
                border-radius: 10px;
                padding: 1.1rem 1.25rem;
                box-shadow: 0 8px 20px -12px rgba(20,24,31,.25);
                display:flex;
                flex-direction:column
            }
            .milestone--up .milestone-card  { bottom: calc(50% + var(--stem-len)); }
            .milestone--down .milestone-card{ top: calc(50% + var(--stem-len)); }
     
            .milestone-role{
                font-family: "Mona Sans", serif;
                font-weight: 600;
                font-size: 1.031rem; /*16.5px*/
                line-height: 1.1rem;
                color: var(--orange);
                margin-bottom: .15rem;
            }
     
            .milestone-org{
                font-family: "Mona Sans", sans-serif;
                font-size: 0.813rem; /*13px*/
                line-height: 1rem;
                color: var(--blueberry);
                font-weight: 500;
                margin-bottom: .5rem;
            }
     
            .milestone-desc{
                font-family: "Mona Sans", sans-serif;
                font-size: .813rem;
                line-height: 1rem;
                color: var(--grape);
                margin: 0;
                overflow-y: auto;
                min-height:0;
                padding-right: .35rem; /* separa el texto del scrollbar */
            }
     
            .timeline-hint{
                font-family: "Mona Sans", sans-serif;
                font-size: .78rem;
                color: var(--teal);
                text-align: center;
                margin-top: .5rem;
                letter-spacing: .03em;
            }
     
            @media (max-width: 576px){
                .milestone{ width: 82vw; }
                .timeline-scroll{ height: 420px; --stem-len: 32px; }
            }
     
            @media (prefers-reduced-motion: reduce){
                .timeline-scroll{ scroll-behavior: auto; }
            }   




/*:::::::::::::::-:::::::::::::::::::::
    ANIMATIONS & EFFECTS
::::::::::::::::::::::::::::::::::::*/  

    /* ----- Cubes surrounding image ----- */
 
        /* Reusable heading block */
            .cube-heading{
                position: relative;
                display: inline-block;
                padding: 0.7em 0;
            }
         
            .cube-heading h1{
                position: relative;
                z-index: 2;
                margin: 0;
            }
         
        /* Individual cubes hidden until in view */

            /*Portrait*/
            .cubeimg {
                position: absolute;
                width: 2em;
                height: 2em;
                border-radius: 24%;
                z-index: 1;
                opacity: 0;
                pointer-events: none;
                transform: scale(0) rotate(var(--rot-from));
                transition: opacity 0.7s cubic-bezier(.25,1.3,.4,1),
                            transform 0.7s cubic-bezier(.25,1.3,.4,1);
                transition-delay: var(--delay, 0s);
            }
         
            .cubeimg::before{
                content:"";
                position:absolute;
                inset:0;
                border-radius: inherit;
                background: linear-gradient(135deg, var(--tone, var(--cube-mid)) 0%, var(--cube-dark) 100%);
            }
         
            .cubeimg.left{
                left: 3.5em;
                bottom: -0.45em;
                --tone: var(--cube-light);
                --rot-from: 0deg;
                --rot-to: 0deg;
                --delay: 0.1s;
            }
         
            .cubeimg.right{
                right: 3.5em;
                top: -0.65em;
                --tone: var(--cube-mid);
                --rot-from: 0deg;
                --rot-to: 0deg;
                --delay: 0.4s;
            }

            /*Speech bubble*/
            .cubesb {
                position: absolute;
                width: 2em;
                height: 2em;
                border-radius: 24%;
                z-index: 1;
                opacity: 0;
                pointer-events: none;
                transform: scale(0) rotate(var(--rot-from));
                transition: opacity 0.7s cubic-bezier(.25,1.3,.4,1),
                            transform 0.7s cubic-bezier(.25,1.3,.4,1);
                transition-delay: var(--delay, 0s);
            }
         
            .cubesb::before{
                content:"";
                position:absolute;
                inset:0;
                border-radius: inherit;
                background: linear-gradient(135deg, var(--tone, var(--cube-mid)) 0%, var(--cube-dark) 100%);
            }
         
            .cubesb.left{
                left: -1em;
                bottom: -0.65em;
                --tone: var(--cube-light);
                --rot-from: 0deg;
                --rot-to: 0deg;
                --delay: 0.1s;
            }
         
            .cubesb.right{
                right: -1em;
                top: -0.85em;
                --tone: var(--cube-mid);
                --rot-from: 0deg;
                --rot-to: 0deg;
                --delay: 0.4s;
            }
         
        /* Triggered by IntersectionObserver when the heading is centered in view */
            .cube-heading.in-view .cubeimg{
                opacity: 0.45;
                transform: scale(1) rotate(var(--rot-to));
            }
         
            @media (prefers-reduced-motion: reduce){
                .cube-heading {
                    transition: none;
                    opacity: 0.45;
                    transform: scale(1) rotate(var(--rot-to));
                }
            }

            .cube-heading.in-view .cubesb{
                opacity: 0.45;
                transform: scale(1) rotate(var(--rot-to));
            }
         

    /* ----- Scrolling logo band ----- */  

        .logo-band {
            position: relative;
            overflow: hidden;
            padding: 1rem 0;
        }
         
        /* Fade edges so logos don't pop in/out abruptly */
        .logo-band::before,
        .logo-band::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: var(--fade-width);
            z-index: 2;
            pointer-events: none;
        }
         
        .logo-band::before {
            left: 0;
            background: linear-gradient(to right, var(--page-background), rgba(255,255,255,0));
        }
         
        .logo-band::after {
            right: 0;
            background: linear-gradient(to left, var(--page-background), rgba(255,255,255,0));
        }
         
        .logo-track {
            display: flex;
            width: max-content;
            animation: scroll-left 40s linear infinite;
        }
         
        /* Pause the animation on hover of the whole band */
          .logo-band:hover .logo-track {
            animation-play-state: paused;
        }
         
        .logo-set {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }
         
        .logo-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 48px;
            white-space: nowrap;
        }
         
        .logo-item svg,
        .logo-item img {
            height: 100px;
            width: auto;
            display: block;
            filter: grayscale(100%);
            opacity: 0.55;
            transition: opacity 0.25s ease, filter 0.25s ease;
            filter: grayscale(5) brightness(2) contrast(1);
        }
         
        .logo-item:hover svg,
        .logo-item:hover img {
            filter: grayscale(0%);
            opacity: 1;
            filter: grayscale(5) brightness(2) contrast(1);
        }
         
        /* Fallback text-logo styling, in case someone swaps in plain text */
        .logo-item span {
            font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
            font-weight: 600;
            font-size: 1.1rem;
            letter-spacing: 0.02em;
            color: var(--logo-color);
            transition: color 0.25s ease;
        }
         
        .logo-item:hover span {
            color: var(--logo-hover);
        }
         
        @keyframes scroll-left {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
        }
         
        /* Respect reduced-motion preference */
        @media (prefers-reduced-motion: reduce) {
            .logo-track {
              animation: none;
            }
        } 




/*:::::::::::::::::::::::::::::::::::
    THEMES
:::::::::::::::::::::::::::::::::::*/
 
    /* ----- ResearchGate Mobile ----- */
 
        .theme-rg{
            background-color: var(--rg-light-grey);
        }
     
        .theme-rg h2 {
            color: var(--rg-primary);
        }
     
        .theme-rg h4 {
            color: var(--rg-primary-dark);
        }
     
        .theme-rg .chip {
            background-color: var(--rg-primary-light);
        }
     
        .theme-rg .tab {
            color: var(--rg-primary);
            border: var(--rg-primary);
            border-radius: 12px;
            margin-right:1rem;
     
        }
     
        .theme-rg .tab-active {
            background-color: var(--rg-light-grey);
            color: var(--rg-primary-dark);
            margin-right:1rem;
            font-weight: 500;
            border: var(--rg-primary);
        }
     
        .theme-rg  a {
            color: var(--rg-secondary);
        }
     
        .theme-rg .footer-area a{
            color:var(--page-background);
        }
     
        .theme-rg mark {
            background: linear-gradient(-150deg, #00A39E02, #00A39E10, #00A39E15);
            color: var(--rg-primary);
        }
 
 



                .theme-ecol .chip:hover {
                    background-color: var(--white50);
                    transition: ease 0.5s;
                    cursor: pointer;
                }  
     
        




 
    /* ----- Ephemories ----- */
 
        .theme-eph {
        background-color: var(--eph-bg);
        }
     
        .theme-eph .page-title h2 {
            color: var(--white);
        }
     
        .theme-eph .page-title h4 {
            color: var(--white);
        }
     
        .theme-eph h2 {
            color: var(--eph-primary);
        }
     
        .theme-eph h4 {
            color: var(--eph-primary-dark);
        }
     
        .theme-eph .chip {
            background-color: var(--eph-primary);
            color: var(--white);
        }
     
        .theme-eph a {
            color: #A230A6;
        }
     
        .theme-eph .footer-area a{
            color:var(--page-background);
        }
 
    /* ----- Labfolder ELN ----- */
 
        .theme-eln {
        background-color: var(--eln-bg);
        }
     
        .theme-eln .page-title h2 {
            color: var(--white);
        }
     
        .theme-eln .page-title h4 {
            color: var(--white);
        }
     
        .theme-eln h1 {
            color: var(--eln-secondary-dark);
        }
     
        .theme-eln h2 {
            color: var(--eln-primary);
        }
     
        .theme-eln h4 {
            color: var(--eln-primary-dark);
        }
     
        .theme-eln p {
            color: var(--eln-secondary-dark);
        }
     
        .theme-eln .chip {
            background-color: var(--eln-primary);
            color: var(--white);
        }
     
        .theme-eln .footer-area a{
            color:var(--page-background);
        }
 
    /* ----- Labregister LIMS ----- */
 
        .theme-lims {
        background-color: var(--lims-bg);
        }
     
        .theme-lims .page-title h2 {
            color: var(--white);
        }
     
        .theme-lims .page-title h4 {
            color: var(--white);
        }
     
        .theme-lims h1 {
            color: var(--lims-secondary-dark);
        }
     
        .theme-lims h2 {
            color: var(--lims-primary-light);
        }
     
        .theme-lims h4 {
            color: var(--lims-primary);
        }
     
        .theme-lims p {
            color: var(--lims-secondary-dark);
        }
     
        .theme-lims .chip {
            background-color: var(--lims-primary);
            color: var(--white);
        }    
     
        .theme-lims .footer-area a{
            color:var(--page-background);
        }