:root {
  --nav-offset: 90px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  transition: all 0.5s ease-in-out;
  scroll-behavior: smooth;
}

/* === CONTAINERS === */
.outer-container {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
::-webkit-scrollbar {
  display: none;
} /* Safari/Chrome */

.slide {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  scroll-snap-align: start;
}

.rotated {
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
}

.container {
  display: flex;
  flex-direction: row;
  width: 500vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  height: 100vh;
}
/* === END CONTAINERS === */

/* === START ARROW BUTTON === */
.slide-arrow {
    all: unset; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #000;
    font-size: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;   
}

#button-blackbg {
    color: #fff;
}

#button-blackbg:hover,
.slide-arrow:hover {
    scale: 1.1;
    color: #D2451D;
}

.prev-slide { left: 20px; }
.next-slide { right: 20px; }

@media screen and (max-width: 1100px) {
    .slide-arrow {
        display: none;
    }
}
/* === END ARROW BUTTON === */


body {
  background-color: black;
}

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 75px;
  background: black;
}

.web-nav {
  pointer-events: auto;
}

.web-nav a {
  font-size: large;
  padding-right: 40px;
  font-family: Space Mono;
  color: white;
  text-decoration: none;
}

.home {
  padding-top: var(--nav-offset);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.talaghay-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.talaghay-card {
  position: relative;
  display: inline-block;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.img-1 {
  width: clamp(380px, 85vw, 750px);
  height: auto;
}

.talaghay-cta {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);

  font-size: clamp(14px, 1.6vw, 20px);
  color: #d2451d;
  font-family: Space Mono;
  text-decoration: none;
}

.talaghay-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: orangered;
  transition: width 0.3s ease;
}

.talaghay-cta:hover::after {
  width: 100%;
}

.entry-page {
  position: relative;
  width: 1500px; /* or 1600px / 1800px */
  height: 100%;
  padding-top: var(--nav-offset);
  overflow: visible;
  background: #000;
}
.polygraph-bg {
  position: absolute;
  top: 6%;
  left: 0;
  width: 1600px;
  max-width: none;
  height: auto;
  z-index: 1;
}

.envelope {
  position: absolute;
  left: 6%;
  top: 19%;
  width: clamp(250px, 37vw, 790px);
  z-index: 3;
}

.envelope-3 {
  width: 80%;
  height: auto;
  display: block;
}

.envelope h1 {
  position: absolute;
  left: 8%;
  bottom: 5%;
  margin: 0;
  font-family: Boldonse;
  font-weight: 700;
  font-size: clamp(15px, 3vw, 50px);
  line-height: 1.5;
  color: #111;
}

.photos {
  position: absolute;
  z-index: 5;
}

.cards {
  position: absolute;
  inset: 0;
  top: 6%;
  z-index: 5;
}

.card {
  position: absolute;
  width: clamp(220px, 23vw, 450px);
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
  transform-origin: center;
}
.c1 {
  left: 20%;
  top: 20%;
  z-index: 6;
}
.c2 {
  left: 45%;
  top: 12%;
  z-index: 5;
}
.c3 {
  left: 70%;
  top: 5%;
  z-index: 7;
}
.c4 {
  left: 45%;
  top: 55%;
  z-index: 6;
}
.c5 {
  left: 75%;
  top: 55%;
  z-index: 5;
}

.c2,
.c5,
.c4 {
  width: 28%;
}

/*===== MEDIA QUERIES =====*/

@media (max-width: 1440px) {
  .polygraph-bg {
    width: 130%;
  }
}
@media (max-width: 1300px) {
  .polygraph-bg {
    width: 120%;
  }
  .envelope {
    top: 14%;
  }
  .card {
    width: clamp(160px, 22vw, 260px);
  }

  .c1 {
    left: 15%;
    top: 20%;
  }
  .c2 {
    left: 40%;
    top: 16%;
  }
  .c3 {
    left: 62%;
    top: 13%;
  }
  .c4 {
    left: 40%;
    top: 50%;
  }
  .c5 {
    left: 65%;
    top: 55%;
  }
}

@media (max-width: 1030px) {
  .entry-page {
    width: 1400px;
  }

  .polygraph-bg {
    top: 6%;
    left: 0;
    width: 1400px;
    max-width: none;
  }

  .envelope {
    left: 6%;
    top: 18%;
    width: 360px;
  }

  .envelope h1 {
    font-size: clamp(22px, 2.2vw, 34px);
  }

  .cards {
    top: 6%;
  }

  .card {
    width: clamp(230px, 20vw, 320px);
  }

  .c1 {
    left: 10%;
    top: 18%;
  }

  .c2 {
    left: 27%;
    top: 10%;
  }

  .c3 {
    left: 50%;
    top: 10%;
  }

  .c4 {
    left: 27%;
    top: 48%;
  }

  .c5 {
    left: 55%;
    top: 48%;
  }

  .c2,
  .c4,
  .c5 {
    width: 24%;
    max-width: 340px;
  }
}

@media (max-width: 770px) {
  .polygraph-bg {
    width: 150%;
  }
  .envelope {
    top: 20%;
  }

  .card {
    width: clamp(180px, 23vw, 300px);
  }

  .c1 {
    left: 15%;
    top: 15%;
  }
  .c2 {
    left: 40%;
    top: 20%;
  }
  .c3 {
    left: 65%;
    top: 14%;
  }
  .c4 {
    left: 40%;
    top: 40%;
  }
  .c5 {
    left: 65%;
    top: 45%;
  }
}

@media (max-width: 430px) {
  :root {
    --nav-offset: 72px;
  }

  .main-nav {
    padding: 22px 18px;
  }

  .web-nav {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
  }

  .web-nav a {
    padding-right: 0;
    font-size: 12px;
  }

  .entry-page {
    position: relative;
    width: 1200px;
    height: 100vh;
    padding-top: var(--nav-offset);
    background: #000;
    overflow: visible;
  }

  .polygraph-bg {
    top: 8%;
    left: -8%;
    width: 120%;
  }

  .envelope {
    left: 4%;
    top: 15%;
    width: 35%;
  }

  .envelope h1 {
    font-size: clamp(22px, 5vw, 36px);
    line-height: 1.05;
  }

  .cards {
    top: 10%;
  }

  .card {
    width: 20%;
  }

  .c1 {
    left: 20%;
    top: 5%;
  }

  .c2 {
    left: 45%;
    top: 10%;
  }

  .c3 {
    left: 65%;
    top: 0%;
  }

  .c4 {
    left: 45%;
    top: 45%;
  }

  .c5 {
    left: 70%;
    top: 45%;
  }
}

@media (max-width: 320px) {
  .main-nav {
    padding: 18px 12px;
  }

  .web-nav {
    gap: 10px;
  }

  .web-nav a {
    font-size: 11px;
  }

  .entry-page {
    width: 1000px;
  }

  .polygraph-bg {
    top: 10%;
    left: -10%;
    width: 130%;
  }

  .envelope {
    left: 6%;
    top: 18%;
    width: 28%;
  }

  .envelope h1 {
    font-size: clamp(16px, 4vw, 24px);
  }

  .card {
    width: 18%;
  }

  .c1 {
    left: 22%;
    top: 7%;
  }

  .c2 {
    left: 47%;
    top: 11%;
  }

  .c3 {
    left: 67%;
    top: 3%;
  }

  .c4 {
    left: 47%;
    top: 42%;
  }

  .c5 {
    left: 70%;
    top: 42%;
  }
}

/* === START ABOUT PAGE === */

.testimonials {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  /*padding: 1% 1% 0.25% 1%;*/
}

/* Center the whole section on the screen */
.about-section {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 100vh;
}

/* The Stage - this is the anchor for absolute positioning */
.collage-stage {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  left: 70px;
}

/* --- THE PAPER --- */
.main-paper {
  position: relative;
  right: 0; /* Pushes the paper to the right side of our stage */
  top: 230px;
  width: 100%; /* Scales down on smaller screens */
  max-width: 780px; /* Stops scaling up past this point */

  /* aspect-ratio ensures the div maintains the shape of your paper image 
     even when the screen shrinks. Adjust this ratio (Width / Height) 
     to match your actual 2 Paper 1.png dimensions */
  aspect-ratio: 1 / 1.1;
  background-image: url("./assets/2\ Paper\ 1.png");
  background-size: 100% 100%;
  /*background-position: center;*/
  background-repeat: no-repeat;
  z-index: 1; /* Keeps paper at the bottom layer */
  padding: 80px; /* Gives the text breathing room from the paper edges */
}

.paper-text {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 35px 0 0 196px;
}

#about h2 {
  font-family: Boldonse;
  font-size: clamp(36px, 3vw, 40px);
  text-align: left;
  width: fit-content;
  align-self: flex-start;
  font-weight: 400;
  padding-bottom: 10px;
}

.divider {
  width: 90%;
  height: 1px;
  background-color: rgb(0, 0, 0);
  margin-bottom: 12px;
}

#about p {
  padding: 0 45px 0 0;
  font-family: "Space Mono";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  transition: max-height 0.3s ease-out 0.5s;
  text-align: left;
  z-index: 2;
}

.next-link {
  font-family: "Space Mono";
  font-size: 16px;
  font-weight: 400;
  color: #d2451d;
  text-decoration: underline;
  align-self: flex-end;
  margin-top: 0; /* Pushes the link to the bottom of the paper */
  padding-top: 10px;
}

/* --- THE PHOTOS --- */
.polaroid {
  position: absolute;
  padding: 10px 10px 40px 10px;
}

.polaroid img {
  height: auto;
  display: block;
}

.photo-top img {
  width: 330px;
}

.photo-bottom img {
  width: 400px;
}

.photo-top {
  left: 280px;
  top: 60px;
  transform: rotate(0deg);
  z-index: 3;
}

.photo-bottom {
  left: 115px;
  bottom: -70px;
  transform: rotate(0deg); /* Tilts the photo */
  z-index: 2;
}

/*===== MEDIA QUERIES =====*/

@media (max-width: 1445px) {
  .photo-top {
    left: 235px;
    top: 60px;
    transform: rotate(0deg);
    z-index: 3;
  }

  .photo-bottom {
    left: 105px;
    bottom: -70px;
    transform: rotate(0deg); /* Tilts the photo */
    z-index: 2;
  }
}

@media (max-width: 1120px) {
  .photo-top img {
    width: 280px;
  }

  .photo-bottom img {
    width: 330px;
  }

  .photo-top {
    left: 65px;
    top: 75px;
    transform: rotate(0deg);
    z-index: 3;
  }

  .photo-bottom {
    left: 5px;
    bottom: -55px;
    transform: rotate(0deg); /* Tilts the photo */
    z-index: 2;
  }
}

@media (max-width: 850px) {
  .collage-stage {
    left: 0;
  }

  .main-paper {
    top: 130px;
    right: 0;
    width: 85%;
    overflow: hidden;
  }

  #about h2 {
    font-size: clamp(30px, 3vw, 40px);
  }

  #about p,
  .next-link {
    font-size: 14px;
  }

  #about p {
    padding: 0 0 0 0;
  }

  .next-link {
    margin-top: 20px;
  }

  .photo-top img {
    width: 265px;
  }

  .photo-bottom img {
    width: 310px;
  }

  .photo-top {
    left: 30px;
    top: 110px;
    transform: rotate(0deg);
    z-index: 3;
  }

  .photo-bottom {
    left: -10px;
    bottom: -50px;
    transform: rotate(0deg); /* Tilts the photo */
    z-index: 2;
  }
}

@media (max-width: 430px) {
  /* 1. Turns the mobile screen into a scrollable window */
  .about-section {
    min-width: 120vh;
    /* Enables smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
  }

  /* 2. Forces the stage to stay tablet-sized (768px) so content doesn't crush */
  .collage-stage {
    min-width: 768px;
    height: auto; /* Removes the strict 100vh lock */
    min-height: 100vh;
    left: 0;
    justify-content: flex-start;
    align-items: flex-start; /* Anchors content to the top */
    padding-bottom: 100px; /* Gives nice breathing room at the very bottom */
  }

  /* 3. Replicates your nice tablet sizing and spacing */
  .main-paper {
    top: 30px;
    right: 0;
    width: 80%; /* Takes up 80% of our 768px canvas */
    margin-left: 40px; /* Pushes the paper slightly right */
  }

  /* Fixes the text crushing issue by restoring the desktop/tablet padding */
  .paper-text {
    padding: 10px 0px 0 196px; /* 196px left padding makes room for the photos */
    width: 100%;
  }

  #about h2 {
    font-size: 30px;
    padding-bottom: 5px;
  }

  .divider {
    margin-bottom: 6px;
  }

  #about p,
  .next-link {
    font-size: 14px;
  }

  #about p {
    padding: 0;
  }

  .next-link {
    margin-top: 0px;
  }

  /* Keeps the photos at the exact tablet dimensions */
  .photo-top img {
    width: 300px;
  }

  .photo-bottom img {
    width: 330px;
  }

  .photo-top {
    left: -20px;
    top: 15px;
    transform: rotate(0deg);
    z-index: 3;
  }

  .photo-bottom {
    left: -40px;
    bottom: 60px;
    transform: rotate(0deg);
    z-index: 2;
  }
}

/* === END ABOUT PAGE === */

/* === START FREQUENTLY ASKED QUESTIONS  PAGE === */
.slide.faq {
    overflow: visible !important; /* Allows the paper to hang off the edge */
}

.faq{
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    min-height: 100vh;
    padding: 0.9% 1% 0% 1%;
}

.faq .faq-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 90px;
    grid-row-gap: 0px;
    flex: 1;
  
    background-image: url('./assets/4\ Folder.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1;
    padding: 10px 80px 0 70px;
}

.faq-left { grid-area: 1 / 1 / 2 / 2; }
.inner-container { grid-area: 1 / 2 / 2 / 3; }
.faq-bottom-meta { grid-area: 2 / 1 / 3 / 3; }

.faq .faq-left{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: height 0.6s ease, opacity 0.6s ease, transform 0.6s ease; /* add height */
    min-height: 100%; 
}
.faq h2{
    font-family: Boldonse;
    font-size: 29px;
    text-align: left;
    width: fit-content;
    align-self: flex-start;
    font-weight: 400;
    border-bottom: 1px solid rgb(0, 0, 0);
    margin-left: 20px;
    padding-bottom: 10px;
    transition: margin 0.6s ease, transform 0.6s ease;
}

.faq .inner-container{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    width: 100%;
    gap: 10px;
    padding-top: 0; 
    height: 100%;
    z-index: 2; /* Ensures the text is above the paper background */  

    /*
    background-image: url('./assets/4\ Paper.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 1;
    padding: 10px 80px 0 70px;
    overflow: visible;
    */
}

.paper-asset {
    position: absolute;
    width: 135%;
    height: 110%;
    top: 0.5%;
    left: -18%;
    justify-self: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.paper-asset img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Forces the image to cover the wrapper dimensions */
}

#faq-list li {
    cursor: pointer;
    margin-bottom: 8px;
    list-style: none;
    position: relative;
    display: flex;
    justify-content: space-between;

    font-family: Manrope, SemiBold;
    font-size: 20px;
    font-weight: 600;

    padding-bottom: 5px;
    border-bottom: 1px solid rgb(0, 0, 0);
    align-items: center;
    z-index: 5;
    
}


.faq-icon {
    width: 20px;
    height: 20px;
    /*width: 50px;
    height: 50px;
    /*background-image: url('./assets/sun-asset.svg');*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    align-items: flex-end;
} 

.faq-header{
    background-image: linear-gradient(#D2451D);
    background-repeat: no-repeat;
    background-size: 0% 60%;   /* start hidden */
    background-position: 0 90%;
    font-family: Manrope, SemiBold;
    font-weight: 600;
    transition: background-size 0.3s ease;
}

#faq-list li:hover .faq-header,
#faq-list li.active .faq-header {
  background-size: 100% 60%;
}

#faq-answer h3 {
    padding: 10px 0px 10px 15px;
    cursor: pointer;
    font-family: Manrope, SemiBold;
    font-size: 26px;
    font-weight: 600;
    transition: max-height 0.3s ease-out 0.5s;
}
#faq-answer p {
    padding: 0px 0px 15px 15px;
    font-family: "Space Mono", regular;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;
    transition: max-height 0.3s ease-out 0.5s;
    text-align: left;
}

#faq-answer {
    overflow: hidden;
    transition: max-height 0.6s ease, opacity 0.6s ease;
}

#faq-answer.fade-out {
  opacity: 0;
}

/*FAQ bottom footer*/
.faq-bottom-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    width: 100%;
    align-self: end;

}

.faq-folio-copy {
    margin: 0;
    padding: 0;
    font-family: "Averia Serif Libre", serif;
    font-size: 18px;
    line-height: 1.35;
    color: #1b1a19;
    white-space: nowrap; 
}

.faq-meta-line {
    flex: 1;
    height: 1px;
    background: #1b1a19;
    opacity: 0.6;
}

.accordion-container {
    display: none;
}

@media screen and (max-width: 1100px) {
    .faq-container .faq-bottom-meta {
        display: none !important; 
    }

    .faq {
        padding: 1.4% 1% 0% 1%
    }

    .faq .faq-container {
        grid-column-gap: 70px;
    }

    .paper-asset {
        position: absolute;
        width: 186%;
        height: 111%;
        top: -4%;
        left: -24%;
        justify-self: center;
        background-repeat: no-repeat;
        background-size: contain;
        transform: rotate(0deg);
        z-index: 1;
        pointer-events: none;
    }

    .faq h2 {
        font-size: 20px;
        margin-left: 0px;
        margin-right: 15px;
    }

    .faq .inner-container{
      padding-top: 70px; 
    }

    #faq-answer h3 {
        font-size: 21px;
        padding: 7px 10px 7px 0px;
    }

    #faq-answer p {
        font-size: 15px;
        line-height: 1.2;
        padding: 0px 10px 15px 0px;
    }

    #faq-list li {
        font-size: 17px;
        margin-right: 0px;
    }
}
@media screen and (max-width: 770px) {
    .slide.faq {
        overflow: visible !important;
        padding: 70px 0 0 0;
    }
  
    .faq-container {
        display: none !important; 
    }
    
    .faq {
        padding: 12% 1% 0% 1%
    }

    .accordion-container {
        display: flex !important;
        flex-direction: column;
        align-items: center;

        height: 100vh;
        width: 95%;

        background-image: url('./assets/4\ Folder\ MOBILE.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 1;
        /*padding: 10px 80px 0 70px;*/
        padding: 0px;
        overflow: hidden;
    }

    .faqs-header-wrapper {
        /*
        margin: 0 auto;
        max-width: 1200px;
        */
        width: 100%;
        flex-shrink: 0; /* Prevent the header from being squashed */
        padding-top: 30px;
        padding-bottom: 40px;
        z-index: 10;
    }

    .faqs-header-wrapper h2 {
        font-family: Boldonse;
        font-size: 29px;
        text-align: left;
        width: fit-content;
        align-self: flex-start;
        font-weight: 400;
        border-bottom: 0px solid rgb(0, 0, 0);
        margin-left: 40px;
        margin-right: 40px;
        margin-bottom: 20px;
        padding-top: 0px;
        padding-bottom: 30px;
        padding-left: 70px;
        transition: margin 0.6s ease, transform 0.6s ease;
    }
    
    .paper-asset-mobile {
        position: absolute;
        width: 98%;
        height: 100%;
        top: 210px;
        left: 2.5%;
        justify-self: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 1;
        pointer-events: none;
    }

    .paper-asset-mobile img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Forces the image to cover the wrapper dimensions */
    }

    .faq .accordion-inner-container{
        /*
        width: 100%;
        max-width: 600px;
        padding: 0 20px 50px 20px;
        */
        width: 100%;
        max-width: 600px;
        padding: 0px 20px 40px 32px;
        flex: 1; /* Occupy all remaining vertical space */
        overflow-y: auto; /* Enable scrolling only for this div */
        scrollbar-width: thin; /* Optional: Make scrollbar less intrusive */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
        z-index: 5;
      }

    .faq .accordion-item{
        border-radius: 5px;
        margin-bottom: 10px;
        overflow: visible;
    }
    
    .faq .accordion-item-header {
        position: relative;
        overflow: visible; /*allow pseudo to show*/
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        margin: 0 20px;
        cursor: pointer;
        font-family: Manrope, SemiBold;
        font-size: 21px;
        background: none;    
        text-decoration: none;          
        -webkit-tap-highlight-color: transparent;
        will-change: transform;
        transform: translateZ(0);       
    }

    .faq .accordion-item-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 40%;              
        height: 50%;           
        width: 0;              
        z-index: -1;           
        background: linear-gradient(#D2451D);
        transition: width 360ms cubic-bezier(.2,.9,.2,1);
        pointer-events: none;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        box-shadow: none;
    }

    .faq .accordion-item-header > * {
        position: relative;
        z-index: 3;
    }

    .faq .accordion-item-header:hover::before,
    .faq .accordion-item-header:focus::before,
    .faq .accordion-item-header.active::before,
    .faq .accordion-item-header.touched::before {
        width: 88%; /*final fill width*/
    }

    .faq .accordion-item-header.active,
    .faq .accordion-item-header.touched {
        color: #1b1a19;
    }

    .faq .accordion-item-body{
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        border-top: 1px solid rgb(0, 0, 0);
        margin: 0 20px;
    }

    .faq .accordion-item-header.active{
        transition: max-height 0.3s ease-out 0.5s;
        border-bottom: none;
        background-size: 85% 50%;
        will-change: background-size;
        transform: translateZ(0);
    }

    .faq .accordion-item-header::after {
        /*content: url("./assets/sun-asset.svg");*/
        display: inline-block;
        width: 45px;
        height: auto;
        flex-shrink: 0;
        transition: transform 0.6s ease;
        position: relative;
        z-index: 2;
    }

    .faq .accordion-item-header:hover,
    .faq .accordion-item-header:focus,
    .faq .accordion-item-header.active,
    .faq .accordion-item-header.touched {
      background-size: 85% 50%;
    }

    .faq .accordion-item-body{
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        border-top: 1px solid rgb(0, 0, 0);
        margin: 0 20px;
    }
    .faq .accordion-item-body-content{
        padding: 15px 0;
        font-family: "Space Mono", regular;
        font-size: 16px;
        line-height: 1.5;
        text-align: left;
        border-bottom: 1px solid rgb(0, 0, 0);
        margin-bottom: 5px;
    }
}
@media screen and (max-width: 435px) {
   .slide.faq {
        overflow: visible !important;
        padding: 70px 0 0 0;
    }  

    .faq .accordion-item-header:hover::before,
    .faq .accordion-item-header:focus::before,
    .faq .accordion-item-header.active::before,
    .faq .accordion-item-header.touched::before {
        width: 86%; /*final fill width*/
    }

    .accordion-container {
        width: 70vh;
    }

    .faqs-header-wrapper h2 {
        font-size: 24px;
        padding-left: 20px;
    }

    .paper-asset-mobile {
        width: 100vh;
        height: 100%;
        top: 170px;
        left: -6.5%;
    }

    .faq .accordion-inner-container {
        width: 100%;
        max-width: 600px;
        padding: 0px 120px 40px 40px;
    }

    .faq .accordion-item-header {
        font-size: 18px;       
    }

    .faq .accordion-item-body-content{
        padding: 15px 0;
        font-family: "Space Mono", regular;
        font-size: 16px;
        line-height: 1.5;
        text-align: left;
        border-bottom: 1px solid rgb(0, 0, 0);
        margin-bottom: 5px;
    }

}

/* === END FREQUENTLY ASKED QUESTIONS  PAGE === */


/*Submission Form*/
/* 1. Container Adjustment: Ensures centering within the rotated slide */
.submission-form .inner-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh; /* Controlled by your rotation logic */
  justify-content: center;
  align-items: center;
  padding: 2vmin;
  box-sizing: border-box;
  font-family: "Space Mono", monospace;
  font-style: normal;
  font-weight: 400;
  background-color: #000;
}

/* 2. The Paper: Fixed aspect ratio to keep its shape during scaling */
.form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #43658c;

  /* Scale based on the smaller screen dimension */
  width: 90vmin;
  max-width: 950px;
  aspect-ratio: 1 / 1.1; /* Matches your high-fi paper proportions */

  background-image: url("./assets/5\ Paper.webp");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  /* Percentage padding keeps margins consistent as the paper shrinks */
  padding: 25% 8% 0% 14.5%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* 3. Typography & Inputs: Fluid font sizing */
.form-group {
  margin-bottom: 0.5%;
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0;
}

.form-group label {
  font-size: clamp(12px, 1.2vmin, 18px);
  font-weight: 600;
  margin-bottom: 2px;
}

input[type="text"],
input[type="number"],
input[type="url"],
input[type="email"] {
  width: 100%;
  height: 30px;
  font-size: clamp(12px, 1.5vmin, 16px);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid #43658c;
  background: transparent;
  outline: none;
  margin-bottom: 5px;
}

select {
  width: 100%;
  height: 30px;
  font-size: clamp(12px, 1.5vmin, 16px);
  font-family: "Manrope", sans-serif;
  border: none;
  border-bottom: 2px solid #43658c;
  background: #bcc2c3;
  outline: none;
  margin-bottom: 5px;
}

/* 4. Group Layouts: Keeping them inline but proportional */
.group1,
.group2,
.group3,
.group4 {
  display: flex;
  flex-direction: row;
  gap: 3%;
  width: 100%;
  align-items: flex-end;
}

.group1 .form-group {
  flex: 100%;
}

.group1 .form-group.middleInitial {
  flex: 40%;
}

.group3 .form-group.benilde-email {
  width: 35%;
}

.group3 .form-group.contact-number{
  width: 20%;
}

.group3 .enrollment-status {
  flex: 1;
}

.group4 .form-group {
  flex: 1;
}

.group4 .form-group.penName {
  flex: 0.5;
}

.entryPublication {
  display: flex;
  flex-direction: column;
}

.entryPublication .publish {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(9px, 1.1vmin, 13px);
}

.radio-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(9px, 1.1vmin, 13px);
}

.error {
  color: red;
  font-size: clamp(9px, 1.1vmin, 13px);
  margin-top: 5px;
}

/* 5. The Caption Box: Matching your high-fi design */
#caption {
  width: 100%;
  max-height: clamp(60px, 5vmin, 100px);
  border: 1px solid #777;
  background: rgba(255, 255, 255, 0.3); /* Slight visibility */
  padding: 10px;
  margin-top: 5px;
}

/* 6. The Submit Button */
.button-wrapper {
  display: flex;
  padding-bottom: 2%;
  width: 100%;
  justify-content: flex-end;
}

button.pressSubmit,
.button-wrapper p,
.cancel {
  background-color: #d35400; /* Matching the orange in your high-fi */
  padding: 10px 25px;
  font-size: clamp(14px, 1.5vmin, 20px);
  font-family: "Space Mono Regular", monospace;
  font-weight: 600;
  color: #fff;
  border: none;
  transition: all 0.3s ease-in-out;
  width: fit-content;
  cursor: pointer;
}

.pressSubmit:hover,
.button-wrapper p:hover,
.cancel:hover {
  background-color: #ff7d26;
  transform: scale(1.05);
}

.buttons {
  display: flex;
  gap: 10px;
}

.sub-modal {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 1005;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  overflow: auto;
  transform: translateX(400vw);
  background-color: rgba(0, 0, 0, 0.75);
}
.sub-modal-content {
  background-color: #e1ddda;
  margin: 10% auto;
  padding: 60px 20px;
  border: 2px solid #888;
  width: 80%;
}
.sub-modal-content h2 {
  font-size: 36px;
  transform: translateY(-10px);
}
.sub-modal-content p {
  font-size: 16px;
  margin: 20px 0;
}
.cancel {
  margin-right: 10px;
}

/* --- TABLET SCALING (769px to 1024px) --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .form {
    width: 85vh;
    max-width: 90vw;
    padding: 25% 6% 10% 14.5%;
  }
  .form-group {
    padding: 0px 0;
  }
}
.form-group.caption-group {
  display: flex;
  flex-direction: column-reverse; /* Puts label below the box like your high-fi */
}

#caption {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #000;
  height: 80px;
  margin-bottom: 5px;
  resize: none; /* Keeps the paper look from breaking */
}

@media (max-width: 768px) {
  .slide {
    width: 100%;
    height: auto;
    padding: 40px 0;
    z-index: 3;
  }

  .form {
    width: 100%;
    aspect-ratio: auto;
    padding: 7rem 10% 10% 6rem;
    background-size: cover;
    background-image: url("./assets/5\ Paperm.webp");
    background-position: left top;
    background-repeat: no-repeat;
    height: 100vh;
    background-attachment: local;
    --webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }
  .form-group {
    padding: 7px 0;
    width: 100%;
  }
  .group1,
  .group2,
  .group3,
  .group4 {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
  }
  .group3 .form-group.benilde-email, .group3 .form-group.contact-number{
    width: 100%;
  }
  footer .footer-container {
    margin-top: 50px;
  }
}

/*Recent Folios*/
.recent-folios {
  display: flex;
  color: #fff;
  font-family: "Space Mono", monospace;
}
.recent-folios .inner-container {
  display: flex;
  flex-direction: column;
  width: calc(100% - 500px);
  height: 100%;
  margin-left: 5%;
  margin-top: 100px;
}
.recent-folios h2 {
  font-size: 48px;
  font-weight: lighter;
}
.folios-container {
  display: flex;
  gap: 40px;
  margin-top: 30px;
  margin-right: 100px;
  padding-bottom: 10px;
  justify-content: space-between;
  max-width: 1050px;
}
.folios-container img {
  height: 350px;
  width: auto;
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 1540px) {
  .folios-container img {
    height: 300px;
    width: auto;
  }
}
.folios-container img:hover {
  transform: scale(1.05);
}
.folios-container p {
  font-size: 18px;
  margin-top: 10px;
  text-align: center;
}

footer {
  background-color: rgba(0, 0, 0, 1);
  display: flex;
  width: 100%;
  color: white;
  min-height: 100vh; /* allow footer to fill viewport height but remain responsive */
  font-family: Arial, sans-serif;
}
footer .footer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* push .bottom to the bottom */
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  margin-top: 50px;
}
footer .footer-container img {
  width: 350px;
  height: auto;
  margin-bottom: 20px;
}
footer .footer-container hr {
  width: auto;
  margin: 50px 0;
  color: white;
}
footer .footer-container .information,
footer .footer-container .web {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
footer .footer-container .web {
  margin-top: -40px;
}
footer .footer-container .socials img {
  width: 30px;
  height: auto;
}
footer .footer-container .information img,
footer .footer-container .socials .web img {
  width: 30px;
  height: auto;
  margin-right: 20px;
  transform: translateY(10px);
}
footer .footer-container p,
footer .footer-container h6 {
  font-size: 16px;
}
footer .footer-container h6 {
  margin-bottom: 10px;
}
footer .footer-container .information p,
footer .footer-container .web p {
  align-self: center;
}
footer .footer-container .bottom {
  margin-top: auto;
  width: 100%;
  display: block;
}
@media (max-width: 768px) {
  footer .footer-container {
    margin-top: 0px;
  }
}