* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Questrial", sans-serif;
}

*::selection {
    background-color: #f3c77c4f;
}

@font-face {
    font-family: "a";
    src: url("./res/aa.ttf");
}

@font-face {
    font-family: "hl";
    src: url("./res/helveticaneue.woff2");
}

@font-face {
    font-family: "ivy";
    src: url("./res/ivy.ttf");
}

html,
body {
    height: 100%;
    overflow: hidden;
}

#main {
    background-color: #151414;
}

#loader {
    width: 100%;
    height: 100vh;
    background-color: #f3c77c;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loader img {
    height: 17.3vw;
}

#nav {
    z-index: 9999;
    height: 6.9vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2vw 2.7vw;
}

#nav #nav-svg {
    height: 100%;
    width: auto;
    margin-left: -1.5vw;
}

#nav #nav-links {
    display: flex;
    align-items: center;
    gap: 5.69vw;
    cursor: pointer;
}

#nav #nav-links h4 {
    font-size: 1.28vw;
    z-index: 999;
    transition: all linear 0.2s;
    font-weight: 300;
    color: #e7cfb1;
} 

#nav #nav-links h4:hover {
    color: #e5813e;
}

/* Hamburger button — hidden on desktop */
#hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    position: relative;
    z-index: 10000;
    flex-shrink: 0;
}

/* ─── Mobile Full-Screen Menu Overlay ─── */
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #151414;
    z-index: 9998;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1),
                visibility 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    overflow-y: auto;
}

#mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
}

#mobile-menu-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    padding: 110px 28px 40px;
    gap: 5rem;
}

/* Large nav links — exact match to original clamp(20px, 12.5vw, 50px) */
#mobile-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

#mobile-nav-links li {
    overflow: hidden;
    border-bottom: 1px solid rgba(231, 207, 177, 0.1);
}

#mobile-nav-links li span {
    display: block;
    font-size: clamp(28px, 12.5vw, 52px);
    font-weight: 500;
    font-family: "hl", "Helvetica", sans-serif;
    color: #e7cfb1;
    text-transform: uppercase;
    padding: 14px 0;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: color 0.2s linear;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1),
                color 0.2s linear;
}

#mobile-menu.is-open #mobile-nav-links li:nth-child(1) span { transform: translateY(0); transition-delay: 0.05s; }
#mobile-menu.is-open #mobile-nav-links li:nth-child(2) span { transform: translateY(0); transition-delay: 0.1s; }
#mobile-menu.is-open #mobile-nav-links li:nth-child(3) span { transform: translateY(0); transition-delay: 0.15s; }
#mobile-menu.is-open #mobile-nav-links li:nth-child(4) span { transform: translateY(0); transition-delay: 0.2s; }

#mobile-nav-links li span:hover {
    color: #e5813e;
}

/* Mobile menu footer info */
#mobile-menu-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#mobile-menu-footer p {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(231, 207, 177, 0.5);
    letter-spacing: 0.08em;
}

/* X close button inside hamburger — transforms bars to X when open */
#hamburger-btn svg rect {
    transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1),
                opacity 0.2s linear;
    transform-origin: center;
}

#hamburger-btn.is-open svg rect:first-child {
    transform: translateY(5px) rotate(45deg);
}

#hamburger-btn.is-open svg rect:last-child {
    transform: translateY(-5px) rotate(-45deg);
}

#page-1{
    min-height: 95vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

#page-1 h1 {
  /* background-color: brown; */
  /* to make the heading come upwards */
  margin-top: -4vw;
  color: #f3c77c;
  display: flex;
  font-weight: 900;
  /* for the come up effect */
  overflow: hidden;
  line-height: -1;
}

/* this is when we segregate each of the letters of the heading into h1 */
#page-1 h1 h1 {
  font-family: a;
  font-weight: 900;
  line-height: 1.3;
  color: #f3c77c;
  font-size: 29.5vw;
}

#page-1 #page-1-bottom-text {
  margin-top: -2.56vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#page-1 #page-1-bottom-text .page-1-h2-text {
  /* background-color: darkorange; */
  height: fit-content;
  /* for the come up effect */
  overflow: hidden;
}

#page-1 #page-1-bottom-text .page-1-h2-text h2 {
  /* background-color: darkorange; */
  text-align: center;
  font-size: 2.37vw;
  font-weight: 300;
  color: #f3c77c;
}

#page2 {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page2 video {
    height: 100vh;
    object-fit: cover;
    width: 30%;
}

#page3 {
    width: 100%;
}

#page3 #page3-content {
    padding: 8.3vw 2.7vw;
    width: 100%;
}

#page3 #page3-content h1 {
    font-size: 13.5vw;
    line-height: 12vw;
    letter-spacing: -0.3vw;
    font-family: hl;
    color: #e7cfb1;
}

#page3 #page3-content h1 span {
    font-family: ivy;
    color: #e7cfb1;
}

#page3 #page3-content h1:nth-child(3) {
    margin-left: 28.4vw;
}

#page3 #page3-content #page3-bottom-text {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

#page3 #page3-content #page3-bottom-text h3 {
    margin-top: 4.8vw;
    font-size: 1.3vw;
    font-weight: 400;
    margin-right: 3.47vw;
    color: #e7cfb1;
}

#page4 {
    padding: 4.16vw;
    width: 100%;
}

#page4 #page4-circle-svg {
    position: relative;
    margin-top: 6.9vw;
    margin-left: 80vw;
}

#page4 #svg-circle {
    animation: svgAnime 5.5s linear infinite;
}

#page4-circle-svg #svg-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

#page4-top-media-container {
    position: relative;
    margin-top: -9vw;
}

#page4-top-media-container .media-container {
    overflow: hidden;
    cursor: pointer;
}

#page4-top-media-container .hover-effect {
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
}

#page4-top-media-container #vid-container1 {
    overflow: hidden;
    width: 51.38vw;
    height: 48.26vw;
}

#page4 #vid-container1 video {
    height: 41.31vw;
    margin-top: 6.9vw;
    object-fit: cover;
    width: 51.38vw;
    object-position: center;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
}

#page4-top-media-container h3 {
    font-size: 1.38vw;
    margin-top: 0.69vw;
    font-weight: 400;
    color: white;
}

#page4-top-media-container h3 span {
    font-size: 1.52vw;
    margin-top: 0.69vw;
    color: white;
    font-weight: 400;
}

#page4-top-media-container #img-container1 {
    overflow: hidden;
    height: 34.79vw;
    width: 35vw;
    margin-left: 57vw;
    margin-top: -9vw;
}

#page4-top-media-container #img-container1 img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
}

#page4-top-media-container #img-container1-text {
    margin-left: 57vw;
}

#page4-top-media-container #img-container2 {
    height: 34.3vw;
    width: 37.15vw;
    margin-top: -9vw;
}

#page4-top-media-container #img-container2 img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.2s;
}

#page4-top-media-container #img-container3 {
    height: 41.66vw;
    width: 47.22vw;
    margin-top: -12vw;
    margin-left: 44vw;
}

#page4-top-media-container #img-container3 img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

#page4-top-media-container #img-container3-text {
    margin-left: 44vw;
}

.hover-effect:hover {
    scale: 0.98;
    object-fit: cover;
}

#page4-bottom-media-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 2vw;
}

#page4-bottom-media-container h3 span {
    font-weight: 400;
    font-size: 1.52vw;
    color: white;
    margin-bottom: 0.2vw;
}

#page4-bottom-media-container h3 {
    padding: 0 3.9vw;
    width: 100%;
    text-align: left;
    font-weight: 400;
    font-size: 1.38vw;
    color: white;
    margin-bottom: 9vw;
}

#page4-bottom-video-container {
    height: 50.1vw;
    width: 11.29%;
    margin-top: 4vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
}

#page4-bottom-video-container video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#page4-bottom-video-container:hover {
    scale: 0.98;
}

#page4-bottom-button {
    padding: 10.4vw 0;
    width: 100%;
    height: 30vh;
    color: #e7cfb1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#page4-bottom-button h1 {
    position: absolute;
    text-transform: uppercase;
    line-height: 1.66vw;
    font-size: 1.73vw;
    font-weight: 400;
    text-align: center;
}

#page4-bottom-button #page4-bottom-button-border {
    width: 22.35vw;
    height: 7.66vw;
    padding: 3vw 2vw;
    transform-origin: center;
    border: 0.069vw solid #e7cfb1;
    border-radius: 50%;
    position: absolute;
    z-index: 9999;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
}

#page4-bottom-button-border:hover {
    rotate: -15deg;
    transform: scale(1.1);
    height: 100%;
}

#page5{
    height: 100vh;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #9ac1cb;
}

#page5 #page5-text-scroll h1{
    color: #151414;
    font-family: hl;
    font-weight: 600;
    font-size: 45vw;
}

#page5 #page5-text-scroll img{
    height: 18.75vw;
    position: absolute;
}

#page5 #page5-text-scroll #page5-svg1{
    top: 62.3%;
    left: 17.8%;
    rotate: 9deg;
}

#page5 #page5-text-scroll #page5-svg2{
    top: 5%;
    height: 16.6vw;
    left: 48.5%;
    rotate: 13deg;
}

#page5 #page5-text-scroll #page5-svg3{
    top: 65%;
    left: 75%;
}

#page6{
    margin-top: -1vw;
    background-color: #9ac1cb;
    width: 100%;
    display: flex;
    gap: 0.69vw;
}

#page6 .page6-content-box{
    width: 33.33%;
    display: flex;
    flex-direction: column;
    padding: 4.8vw;
    justify-content: flex-start;
    gap: 1.38vw;
    height: fit-content;
}

#page6 .page6-content-box h2{
    font-weight: 500;
    font-size: 1.8vw;
    color: #151414;
}

#page6 .page6-content-box .page6-content-box-list{
    display: flex;
    flex-direction: column;
    gap: 0.3vw;
}

#page6 .page6-content-box .page6-content-box-list h4{
    font-size: 1.68vw;
    font-weight: 400;
    color: #394346;
}

#page7{
    min-height: 100vh;
    width: 100%;
    background-color: #151414;
    padding: 12.5vw 10vw;
}

#page7 #page7-brand-container{
    display: flex;
    flex-direction: column;
    gap: 11.11vw;
}

#page7 .page7-company-row{
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#page8{
    width: 100%;
    background-color: #e7cfb1;
    padding-top: 9vw;
}

#page8 #page8-content .page8-text-box{
    overflow: hidden;
}

#page8 #page8-content .page8-text-box h1{
    font-size: 5.3vw;
    font-weight: 400;
    color: #151414;
    text-align: center;
}

#page8 #page8-content .page8-text-box h1 span{
    color: #151414;
    text-decoration: underline 0.23vw;
}

#page8 #page8-bottom-img-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vw;
}

#page8 #page8-bottom-img-container img{
    height: 20.8vw;
    width: 22.22vw;
    object-position: bottom;
    object-fit: cover;
    margin: 2.77vw;
}

#page9{
    width: 100%;
    padding: 3.47vw 1.38vw;
    padding-bottom: 1.38vw;
}

#page9 h1{
    font-size: 7.5vw;
    font-weight: 400;
    color: #695f53;
    cursor: pointer;
}

#page9 h1 span{
    color: #e7cfb1;
    text-decoration: underline;
}

#page9 #page9-bottom-nav{
    display: flex;
    align-items: center;
    height: 4.16vw;
    margin-top: 3.47vw;
    justify-content: space-between;
}

#page9 #page9-bottom-nav h4{
    font-weight: 500;
    transition: all linear 0.2s;
    font-size: 0.83vw;
    cursor: pointer;
    color: #fff;
}

#page9 #page9-bottom-nav h4:hover{
    color: #f8ac75;
}

@keyframes svgAnime {
    0%{
        rotate: 0deg;
        margin-left: 0px;
    }

    100%{
        rotate: 360deg;
    }
}

/* ============================================= */
/* RESPONSIVE — Tablet (max-width: 1024px)       */
/* ============================================= */
@media screen and (max-width: 1024px) {

    /* Footer links reorder on tablet */
    #page9 #page9-bottom-nav {
        flex-wrap: wrap;
        gap: 10px;
        height: auto;
    }
    #page9 #page9-bottom-nav h4 {
        font-size: 12px;
    }

    /* Slightly reduce page3 typography */
    #page3 #page3-content h1 {
        font-size: 12vw;
        line-height: 11vw;
    }

    /* Slightly reduce page6 text */
    #page6 .page6-content-box h2 {
        font-size: 1.6vw;
    }
    #page6 .page6-content-box .page6-content-box-list h4 {
        font-size: 1.5vw;
    }
}

/* ============================================= */
/* RESPONSIVE — Mobile (max-width: 768px)        */
/* Based on wethinkelastic.com production CSS    */
/* ============================================= */
@media screen and (max-width: 768px) {

    /* 1. Scroll Restoration — restore native scroll on mobile */
    html,
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
    }
    body.no-scroll {
        overflow-y: hidden !important;
        height: 100vh !important;
    }
    #main {
        overflow: visible !important;
        height: auto !important;
    }

    /* 2. Navigation Bar */
    #nav {
        height: 70px;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #nav #nav-svg {
        width: 48px;
        height: 48px;
        margin-left: 0;
    }
    #nav #nav-links {
        display: none;
    }
    #hamburger-btn {
        display: block;
    }

    /* 3. Hero Section — Original uses font-size: 45vw on mobile */
    #page-1 {
        min-height: 60vh;
        justify-content: center;
    }
    #page-1 h1 {
        margin-top: 0;
    }
    #page-1 h1 h1 {
        font-size: 45vw;
        line-height: 1;
    }
    #page-1 #page-1-bottom-text {
        margin-top: 20px;
    }
    #page-1 #page-1-bottom-text .page-1-h2-text h2 {
        font-size: 18px;
        line-height: 1.4;
    }

    /* 4. Starting Video — Original uses transform: scale(1) on mobile */
    #page2 {
        height: 80vh;
    }
    #page2 video {
        height: 80vh;
        width: 100%;
        object-fit: cover;
    }

    /* 5. Big Typographic Message */
    #page3 #page3-content {
        padding: 40px 20px;
    }
    #page3 #page3-content h1 {
        font-size: 11vw;
        line-height: 11vw;
    }
    #page3 #page3-content h1:nth-child(3) {
        margin-left: 5vw;
    }
    #page3 #page3-content #page3-bottom-text {
        flex-direction: column;
        align-items: flex-start;
    }
    #page3 #page3-content #page3-bottom-text h3 {
        margin-top: 25px;
        font-size: 16px;
        line-height: 1.5;
        margin-right: 0;
    }

    /* 6. Projects Grid — Original uses flex-column on mobile */
    #page4 {
        padding: 20px;
    }
    #page4 #page4-circle-svg {
        margin-top: 20px;
        margin-left: 0;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    #page4-top-media-container {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 50px;
    }
    #page4-top-media-container #vid-container1,
    #page4-top-media-container #img-container1,
    #page4-top-media-container #img-container2,
    #page4-top-media-container #img-container3 {
        width: 100%;
        height: 60vw;
        margin-left: 0;
        margin-top: 0;
    }
    #page4 #vid-container1 video {
        height: 100%;
        width: 100%;
        margin-top: 0;
    }
    #page4-top-media-container #img-container1-text,
    #page4-top-media-container #img-container3-text {
        margin-left: 0;
    }
    #page4-top-media-container h3,
    #page4-top-media-container h3 span {
        font-size: 16px;
    }
    #page4-bottom-media-container h3 {
        padding: 0;
        font-size: 16px;
        margin-bottom: 20px;
    }
    #page4-bottom-media-container h3 span {
        font-size: 16px;
    }
    #page4-bottom-video-container {
        height: 50vh;
        width: 40%;
    }
    #page4-bottom-button {
        height: 180px;
        padding: 30px 0;
    }
    #page4-bottom-button h1 {
        font-size: 15px;
        line-height: 1.3;
    }
    #page4-bottom-button #page4-bottom-button-border {
        width: 160px;
        height: 65px;
    }

    /* 7. Horizontal Scroll Text — Original uses font-size: 84vw on mobile */
    #page5 #page5-text-scroll h1 {
        font-size: 84vw;
    }
    #page5 #page5-text-scroll img {
        height: 20vh;
    }

    /* 8. Expertise Columns — Stack vertically on mobile */
    #page6 {
        flex-direction: column;
        gap: 0;
    }
    #page6 .page6-content-box {
        width: 100%;
        padding: 30px 20px;
        gap: 10px;
    }
    #page6 .page6-content-box h2 {
        font-size: 20px;
    }
    #page6 .page6-content-box .page6-content-box-list h4 {
        font-size: 16px;
    }

    /* 9. Brand Logos — Original shifts from repeat(4) to repeat(2) on mobile */
    #page7 {
        padding: 60px 20px;
    }
    #page7 #page7-brand-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    #page7 .page7-company-row {
        display: contents;
    }
    #page7 #page7-brand-container img {
        width: 90px;
        height: auto;
        justify-self: center;
    }

    /* 10. Contact Coffee Section — Original uses clamp for gif sizing */
    #page8 {
        padding-top: 30px;
    }
    #page8 #page8-content .page8-text-box h1 {
        font-size: 8vw;
    }
    #page8 #page8-bottom-img-container {
        flex-direction: column;
    }
    #page8 #page8-bottom-img-container img {
        width: clamp(180px, 60vw, 300px);
        height: auto;
        margin: 20px;
    }

    /* 11. Footer */
    #page9 {
        padding: 40px 20px 20px 20px;
    }
    #page9 h1 {
        font-size: 10vw;
    }
    #page9 #page9-bottom-nav {
        flex-direction: column;
        gap: 12px;
        height: auto;
        margin-top: 25px;
    }
    #page9 #page9-bottom-nav h4 {
        font-size: 13px;
    }
}

/* ============================================= */
/* RESPONSIVE — Small Mobile (max-width: 480px)  */
/* ============================================= */
@media screen and (max-width: 480px) {

    /* Nav links stack or hide on very small screens */
    #nav #nav-links {
        gap: 10px;
    }
    #nav #nav-links h4 {
        font-size: 12px;
    }

    /* Even smaller hero text */
    #page-1 h1 h1 {
        font-size: 40vw;
    }

    /* Tighter page3 text */
    #page3 #page3-content h1 {
        font-size: 10vw;
        line-height: 10vw;
    }

    /* Footer full width stacking */
    #page9 #page9-bottom-nav {
        align-items: flex-start;
    }
}