/* ====== Large screen: Lock aspect ratio, replicate PDF ====== */
.pdf-page{
  position:relative;
  width:100%;
  aspect-ratio: 2048 / 1149; /* Only for large screen */
  overflow:hidden;
}

/* Background always covers container */
.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.overlay{
  position:absolute;
  inset:0;
  z-index:1;
}

/* ABOUT main title */
.title{
  position:absolute;
  left:50%;
  top:clamp(60px, 10vh, 110px); /* Adjusted to same height as Home title */
  transform:translateX(-50%);
  font-size:clamp(32px, 5vw, 70px);
  color:white;
  letter-spacing:0.08em;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
  font-weight:300;
  white-space:nowrap;
  z-index:2;
}

/* Gray lines (visible on large screen) */
.dash{
  position:absolute;
  width:2.2%;
  height:0.35%;
  background:#777;
  opacity:.9;
}

/* Three text sections (large screen horizontal, absolute positioning) */
.cols{
  position:absolute;
  top:33%;
  left:50%;
  transform:translateX(-50%);
  width:85%;
  display:flex;
  justify-content:space-between;
  text-align:center;
  color:#2a2a2a;
  line-height:1.6;
  z-index:2;
}

.col{
  width:22%;
  font-size:clamp(13px, 1.25vw, 20px);
}

/* Bottom disclaimer */
.footnote{
  position:absolute;
  right:6%;
  bottom:6%;
  width:38%;
  font-size:clamp(8px, 0.8vw, 12px);
  color:white;
  opacity:.65;
  text-align:right;
  line-height:1.4;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}

/* ====== Small screen: Unlock aspect ratio, let height grow with text ====== */
@media (max-width: 900px){

  /* Container uses 100vh layout on small screen, prevent scrollbar */
  .pdf-page{
    aspect-ratio: auto;
    height: 100%; /* Fill 100% of main's height */
    padding: 0;
  }

  /* Make overlay a vertical layout container */
  .overlay{
    position:relative;
    height:100%; /* Fill pdf-page height */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: flex-start; /* Content starts from top */
    overflow-y: auto; /* If content is too much, allow internal scroll (hide scrollbar) */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
  }

  /* Hide overlay internal scrollbar but maintain scroll function */
  .overlay::-webkit-scrollbar {
    display: none;
  }
  .overlay {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  /* Title enters normal flow on small screen, no longer absolute positioning */
  .title{
    position:relative;
    left:auto; top:auto; transform:none;
    margin-top: 6vh; /* Restore original distance from top */
    margin-bottom: 6vh; /* Restore original distance from content */
    text-align:center;
    font-size:clamp(28px, 7vw, 56px);
    white-space:nowrap;
    flex-shrink: 0;
  }

  /* Gray lines hidden */
  .dash{ display:none; }

  /* Three sections vertical: enter normal flow */
  .cols{
    position:relative;
    top:auto; left:auto; transform:none;
    width:90%;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px; /* Restore original spacing */
    text-align:center;
    flex-shrink: 0; /* Don't shrink, maintain natural height */
  }

  .col{
    width:90%;
    font-size:clamp(14px, 3vw, 18px);
  }

  /* Bottom note also enters flow layout */
  .footnote{
    position:relative;
    width:90%;
    margin:5vh auto 4vh; /* Restore original spacing */
    right:auto; bottom:auto; left:auto;
    text-align:center;
    flex-shrink: 0;
  }
}