/* 1rem = 16px baseline
   I changed only absolute pixel values to rem (px -> rem) and added a root font-size to guarantee parity.
   Nothing else (no clamp(), no vw changes, no functional edits) — visual result at the same base scale is unchanged.
*/

html { font-size: 16px; } /* ensure rem maps to px exactly */

/* ============================================ */
/* FORCE FULL WIDTH FOR FILM SECTION          */
/* ============================================ */

#film .content-inner {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

#film .accordion-content {
  padding: 0 !important;
}

/* ============================================ */
/* FILM SECTION LAYOUT                         */
/* ============================================ */

.film-layout {
  width: 100%;
  background: #e8e8e8;
  padding: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.film-content-wrapper {
  padding: 7.5rem 6.25rem 11.25rem 6.25rem; /* 120px 100px 180px 100px */
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* ============================================ */
/* TOP IMAGE - Blue Line                       */
/* ============================================ */

.film-top-image {
  width: 112%;
  margin: 0 auto 6.25rem auto; /* margin-bottom: 100px */
  position: relative;
  left: -3.75rem; /* -60px */
}

.film-top-image img {
  width: 112%;
  height: auto;
  display: block;
  object-fit: contain;
  position: relative;
  left: -4.6875rem; /* -75px */
  top: -7.375rem;  /* -118px */
}

/* ============================================ */
/* MAIN CONTENT GRID                           */
/* ============================================ */

.film-content-grid {
  display: grid;
  grid-template-columns: 18.75rem 1fr 25rem; /* 300px 1fr 400px */
  gap: 5rem; /* 80px */
  align-items: center;
  justify-content: center;
  max-width: 100rem; /* 1600px */
  margin: 0 auto 9.375rem auto; /* margin-bottom: 150px */
}

/* ============================================ */
/* LEFT TEXT COLUMN - Purpose                  */
/* ============================================ */

.film-left-text {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px */
  position: relative;
  max-width: 15rem; /* 240px */
  top: -12.5rem; /* -200px */
}

.film-purpose-heading {
  background: #000000;
  color: #e8e8e8;
  padding: 0.5px 1.25rem; /* 0.5px 20px */
  display: inline-block;
  width: fit-content;
  font-size: 1.3rem;
  font-weight: normal;
  text-transform: lowercase;
  font-style: italic;
  margin-bottom: 0;
}

.film-left-text p {
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
}

/* ============================================ */
/* CENTER POSTER IMAGE                         */
/* ============================================ */
.film-center-poster {
  width: 100%;                  /* Take full parent width */
  display: flex;
  align-items: center;
  justify-content: center;      /* Center child horizontally */
  position: relative;
  /* REMOVE left and top offsets */
  left: 0;
  top: -10rem;
  margin: 0 auto;
  padding: 0;                   /* Optional: ensure no weird side padding */
}

.film-center-poster img {
  display: block;
  max-width: 28.125rem; /* 450px */
  width: 100%;                  /* Responsive: will shrink if parent is smaller */
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
/* ============================================ */
/* RIGHT TEXT COLUMN                           */
/* ============================================ */

.film-right-text {
  display: flex;
  flex-direction: column;
  gap: 3.125rem; /* 50px */
  position: relative;
  left: 9.375rem; /* 150px */
  max-width: 15rem; /* 240px */
  top: -12.5rem; /* -200px */
}

.film-objective-achievement {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
}

.film-objective-heading,
.film-achievement-heading {
  background: #000000;
  color: #e8e8e8;
  padding: 0.5px 1.25rem; /* 0.5px 20px */
  display: inline-block;
  width: fit-content;
  font-size: 1.3rem;
  font-weight: normal;
  text-transform: lowercase;
  font-style: italic;
  margin: 0;
}

.film-objective-heading {
  align-self: flex-start;
}

.film-achievement-heading {
  align-self: flex-end;
}

.film-right-text-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
}

.film-right-text-content p {
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
}

/* ============================================ */
/* BOTTOM IMAGE - Car - WITH SCROLL ANIMATION  */
/* ============================================ */

.film-bottom-image {
  width: 112%;
  max-width: 87.5rem; /* 1400px */
  margin: 0 auto 15.625rem auto; /* 250px */
  position: relative;
  left: -86.25rem; /* -1380px */
  overflow: visible;
}

.film-bottom-image img {
  width: 112%;
  height: auto;
  display: block;
  object-fit: contain;
  position: relative;
  will-change: transform;
  top: -13rem;
}

/* ============================================ */
/* INTRO SEQUENCE SECTION                      */
/* ============================================ */

.film-intro-section {
  width: 100%;
  max-width: 100rem; /* 1600px */
  margin: -18.75rem auto 0 auto; /* -300px */
  padding: 0 2.5rem; /* 40px */
  position: relative;
  will-change: transform, opacity;
}

.intro-top-row {
  display: grid;
  grid-template-columns: 21.875rem 1fr 1fr; /* 350px 1fr 1fr */
  gap: 3.125rem; /* 50px */
  margin-bottom: 3.75rem; /* 60px */
  align-items: center;
}

.intro-text-block {
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  max-width: 20rem; /* 320px */
}

.intro-image-large {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}

.intro-image-large img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.intro-middle-row,
.intro-bottom-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.125rem; /* 50px */
  margin-bottom: 3.75rem; /* 60px */
}

/* ============================================ */
/* APPROACH HAND IMAGE - SCROLL ANIMATION      */
/* ============================================ */

.approach-hand-container {
  width: 100%;
  max-width: 100rem; /* 1600px */
  margin: 0 auto 3.75rem auto; /* 60px */
  padding: 0 2.5rem; /* 40px */
  position: relative;
  overflow: visible;
}

.approach-hand-image {
  width: 100%;
  max-width: 48.125rem; /* 770px */
  height: auto;
  display: block;
  position: relative;
  will-change: transform;
  left: -31.25rem; /* -500px */
  top: 12.5rem; /* 200px */
}

/* ============================================ */
/* CREDITS SECTION - TEXT ALIGNED TO BOTTOM    */
/* ============================================ */

.film-credits-section {
  width: 100%;
  max-width: 100rem; /* 1600px */
  margin: 6.25rem auto 0 auto; /* 100px */
  padding: 0 2.5rem; /* 40px */
  display: grid;
  grid-template-columns: 18.75rem 18.75rem 1fr; /* 300px 300px 1fr */
  gap: 5rem; /* 80px */
  align-items: end;
  position: relative;
}

.credits-left-text,
.credits-center-text {
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  max-width: 15.625rem; /* 250px */
  align-self: end;
  margin-bottom: 0.3125rem; /* 5px */
}

.credits-left-text p,
.credits-center-text p {
  margin-bottom: 0.3125rem !important; /* 5px */
  margin-top: 0 !important;
}

.credits-left-text p:last-child,
.credits-center-text p:last-child {
  margin-bottom: 0.3125rem !important; /* 5px */
  margin-top: 0 !important;
}

.credits-images {
  display: flex;
  flex-direction: column;
  gap: 3.75rem; /* 60px */
}

.credits-image-item {
  width: 100%;
  aspect-ratio: 16/9;
}

.credits-image-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ============================================ */
/* FILM VIDEO SECTION                          */
/* ============================================ */

.film-video-section {
  width: 100%;
  max-width: 50rem; /* 800px */
  margin: 9.375rem auto 0; /* 150px */
  padding: 0 2.5rem; /* 40px */
  position: relative;
  z-index: 10;
  background: transparent;
}

.film-video-section * {
  pointer-events: auto !important;
  display: block !important;
}

.film-video-embed-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
  margin: 21.875rem 0 1.875rem 0; /* 350px 0 30px 0 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.film-video-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.film-video-caption {
  text-align: center;
}

.film-video-caption p {
  margin: 0.3125rem 0; /* 5px */
  font-size: 1rem;
  color: #000;
}

.film-video-caption p:first-child {
  font-style: italic;
}

/* ============================================ */
/* VISUAL TREATMENT PANEL                      */
/* ============================================ */

.visual-treatment-panel {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 12.5rem; /* 200px */
  margin-bottom: 6.25rem; /* 100px */
  padding: 0;
  z-index: 5;
}





.visual-treatment-content {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 2.5rem 6.25rem; /* 40px 100px */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
  border: none;
  border-radius: 0;
  position: relative;
   backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: grid;
  grid-template-columns: 28.125rem 25rem 21.875rem; /* 450px 400px 350px */
  gap: 9.375rem; /* 150px */
  align-items: start;
  justify-content: center;
}

/* ============================================ */
/* LEFT SECTION - Text                         */
/* ============================================ */

.visual-treatment-left {
  display: flex;
  flex-direction: column;
  gap: 2.1875rem; /* 35px */
  position: relative;
  z-index: 1;
  width: 18.75rem; /* 300px */
  left: 5rem; /* 80px */
}

.visual-treatment-title-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.visual-label {

  background: #000000;
  color: #e8e8e8;
  padding: 2px 1.25rem; /* 2px 20px */
  display: inline-block;
  width: fit-content;
  font-size: 1.3rem;
  font-weight: normal;
  text-transform: lowercase;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
  margin-left: 1.875rem; /* 30px */

}

.treatment-label {
  background: #000000;
  color: #e8e8e8;
  padding: 2px 1.25rem; /* 2px 20px */
  display: inline-block;
  width: fit-content;
  font-size: 1.3rem;
  font-weight: normal;
  text-transform: lowercase;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
  margin-left: 3.75rem; /* 60px */
}

.visual-treatment-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
}

.visual-treatment-text p {
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
  color: #000;
}

/* ============================================ */
/* CENTER SECTION - Colors                     */
/* ============================================ */

.visual-treatment-center {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
  position: relative;
  z-index: 1;
}

.colours-label {
  font-size: 1rem;
  font-weight: normal;
  text-transform: lowercase;
  color: #000;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem; /* 10px */

}

.color-item {
  width: 100%;
  max-width: 5rem; /* 80px */

}

.color-image {
  width: 100%;
  height: auto; /* ✅ CHANGED from 100% to maintain aspect ratio */
  display: block;
  object-fit: contain;
}

/* ============================================ */
/* RIGHT SECTION - Typeface & Texture          */
/* ============================================ */

.visual-treatment-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
  position: relative;
  z-index: 1;
}

.typeface-label,
.texture-label {
  font-size: 1rem;
  font-weight: normal;
  text-transform: lowercase;
  margin: 0;
  color: #000;
}

.typeface-image-container {
  width: 100%;
  margin-bottom: 0.9375rem; /* 15px */
}

.typeface-image {
  width: 70%;
  height: auto;
  display: block;
  object-fit: contain;
}

.texture-container {
  width: 100%;
  height: auto; /* ✅ CHANGED from fixed 150px */
}

.texture-image {
  width: 30%;
  height: 30%; /* ✅ CHANGED to maintain aspect ratio */
  display: block;
  object-fit: contain; /* ✅ CHANGED from cover to contain */
}

/* ============================================ */
/* RESPONSIVE                                  */
/* ============================================ */

@media (max-width: 1400px) {
  .visual-treatment-content {
    grid-template-columns: 1fr;
    gap: 3.125rem; /* 50px */
    padding: 2.5rem 3.75rem; /* 40px 60px */
  }
  
  .visual-treatment-center,
  .visual-treatment-right {
    max-width: 37.5rem; /* 600px */
    margin: 0 auto;
  }
  
  .color-item {
    max-width: 9.375rem; /* 150px */
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .visual-treatment-panel {
    margin-top: 9.375rem; /* 150px */
    margin-bottom: 5rem; /* 80px */
  }
  
  .visual-treatment-content {
    padding: 1.875rem 1.875rem; /* 30px 30px */
    gap: 2.5rem; /* 40px */
  }
  
  .color-grid {
    gap: 1.25rem; /* 20px */
  }
  
  .texture-container {
    height: 7.5rem; /* 120px */
  }
}

@media (max-width: 600px) {
  .visual-treatment-content {
    padding: 1.875rem 1.25rem; /* 30px 20px */
  }
  
  .color-item {
    max-width: 6.25rem; /* 100px */
  }
}

/* ============================================ */
/* FILM STILLS CAROUSEL SECTION                */
/* ============================================ */

.film-stills-section {
  width: 100%;
  max-width: 75rem; /* 1200px */
  margin: 9.375rem auto 6.25rem auto; /* 150px 100px */
  padding: 0 2.5rem; /* 40px */
  position: relative;
  z-index: 5;
}

.film-stills-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem; /* 40px */
  margin-bottom: 1.875rem; /* 30px */
}

/* ============================================ */
/* SINGLE IMAGE DISPLAY                        */
/* ============================================ */

.film-stills-display {
  flex: 0 0 auto;
  width: 43.75rem; /* 700px */
  max-width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}

.film-still-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ============================================ */
/* CAROUSEL ARROWS                             */
/* ============================================ */

.film-carousel-arrow {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.625rem; /* 10px */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
  z-index: 10;
  position: relative;
}

.film-carousel-arrow:hover {
  opacity: 0.6;
}

.film-carousel-arrow svg {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  pointer-events: none;
}

.film-carousel-arrow:active {
  opacity: 0.4;
}

/* ============================================ */
/* FOOTER - CAPTION & YOUTUBE BUTTON           */
/* ============================================ */

.film-stills-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.25rem; /* 20px */
}

.film-stills-caption {
  font-size: 1rem;
  font-style: italic;
  color: #000;
  margin-left: 11.875rem; /* 190px */
}

.youtube-button {
  display: inline-block;
  transition: filter 0.3s ease;
}

.youtube-image {
  height: 3.125rem; /* 50px */
  width: auto;
  display: block;
  transition: filter 0.3s ease;
  margin-right: 11.875rem; /* 190px */
}

.youtube-button:hover .youtube-image {
  filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.3)); /* 0 4px 12px */
}

/* --- STUDIO BRANDING SECTION INSPO LAYOUT --- */
.studio-branding-section {
  display: flex;
  width: 100vw;          /* full viewport width */
  min-height: 36.25rem; /* 580px */
  margin: 5rem 0 5.625rem 0; /* top/bottom margins only */
  /* Remove any margin-left! */
  padding: 0;            /* Remove internal gap */
}

/* Offscreen by default */
.studio-branding-panel-left {
  opacity: 0;
  transform: translateX(-8.75rem); /* -140px */
  transition: 
    opacity 0.8s cubic-bezier(.19,.77,.43,1.04),
    transform 0.83s cubic-bezier(.19,.77,.43,1.04);
  will-change: opacity, transform;
}

/* Animate to normal position when in-view */
.studio-branding-panel-left.in-view {
  opacity: 1;
  transform: translateX(0);
}





.studio-branding-panel-left {
  width: 28.125rem; /* 450px */
  height: 48.75rem; /* 780px */
  min-width: 18.75rem; /* 300px */
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* For left padding on content */
  justify-content: flex-start;
  box-sizing: border-box;
  border-radius: 0;
  text-align: left;
  padding: 3.5rem 2.5rem 2.5rem 2.75rem; /* left-side padding for your visual breathing room */
  position: relative;
  left: -6.25rem; /* -100px */
}





.studio-branding-title-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0px;
  margin-left: 6.25rem;

}


.studio-label {
  background: #000;
  color: #fff;
  font-size: 1.3rem;
  font-style: italic;
  text-transform: lowercase;
  padding: 1.7px 1.0625rem;
  line-height: 1.25;
  width: fit-content;
  border-radius: 0;
  font-family: inherit;
  margin-left: -1.25rem;
      margin-top: 1.875rem;

}

.branding-label {
  background: #000;
  color: #fff;
  font-size: 1.3rem;
  font-style: italic;
  text-transform: lowercase;
  padding: 1.7px 1.0625rem;
  line-height: 1.25;
  width: fit-content;
  border-radius: 0;
  font-family: inherit;
  margin-left: 1.25rem;
  margin-top: 0px;

}



.studio-branding-description {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-left: 2.5rem;
  margin-top: 6.25rem;
}



/* Constrain paragraph width and give it a left margin */
.studio-branding-description p, .studio-branding-description em {
  color: #191919;
  font-family: inherit;
  font-size: 0.75rem;
  margin-top: 1.25rem;
  line-height: 1.46;
  text-align: justify;
  max-width: 15rem;       /* Narrower for magazine-style blocks */
  width: 100%;            /* Full within max-width */
}



.studio-insta-png-img {
  display: block;
  width: 13.75rem;
  height: auto;
  object-fit: contain;
  transition: filter 0.2s;
  margin-top: -5.625rem;
  margin-left: 3.4375rem;
  
}




/* --- Right Section --- */
.studio-branding-panel-right {
  flex: 1 1 auto;
  background: transparent;
  padding: 3.5rem 2.875rem 2.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 20rem;
  padding-left: 0;
}

.ap-main-title {
  width: 100%;
  margin-bottom: 0.875rem;
  text-align: left;
}


.ap-text-main {
  max-width: 33.125rem;
  width: 100%;
  height: auto;
  display: block;
}



/* Main grid for typeface, colours, logo variations */
.branding-info-grid {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 5rem 1fr;
  /* Responsive tweaks below */
}


.branding-info-labels {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8.125rem;
  margin-top: 1.25rem;
}




.branding-info-label {
  font-size: 0.75rem;
  font-family: inherit;
  color: #111;
  text-transform: lowercase;
  text-align: center;
  letter-spacing: .01em;
  font-weight: 400;
  line-height: 1.7;
  min-width: 7.1875rem;
  margin-bottom: 0.6875rem;
  margin-left: -3.125rem;

}







.branding-info-content {
  display: flex;
  flex-direction: column;
  gap: 3.125rem;
  margin-left: 1.25rem;
}


.branding-typeface-row {
margin-top: 0.9375rem;
}


.damsterdam-type-new {
  height: 2.8125rem;
  width: auto;
  min-width: 6.875rem;
  margin-left: 6.25rem;
}


.branding-colours-row {
  display: flex;
  gap: 0.0625rem;
  margin-top: 1.25rem;
}


.branding-color-sample-big {
  display: flex;
  flex-direction: column;
  width: 8.125rem;
  align-items: center;

}


.branding-color-sample-big img {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: contain;
  margin-bottom: 0.25rem;
  margin-left: 9.375rem;

}


.branding-logos-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}


.branding-logos-2x2 {
  display: grid;
  grid-template-columns: 6.25rem 6.25rem;
  grid-template-rows: 6.25rem 6.25rem;
  gap: 1.875rem 6.25rem;
}


.branding-logos-2x2 img {
  width: 6.25rem;
  height: 6.25rem;
  object-fit: contain;
  border-radius: 0;
}


.branding-logos-2x2 img[alt="Armadillo Ball Logo"] {
  width: 6.25rem;
  height: 6.25rem;
  margin-left: 5.625rem;

}



.branding-logos-2x2 img[alt="AP Ball Logo"] {
  width: 6.25rem;
  height: 6.25rem;
  margin-left: 5.625rem;

}

.branding-logos-2x2 img[alt="Armadillo Figure"] {
  width: 11.25rem;
  height: 11.25rem;
  margin-left: 3.125rem;

}


.branding-logos-2x2 img[alt="AP+Text Logo"] {
  width: 12.5rem;
  height: 12.5rem;
  margin-left: 3.4375rem;

}



/* --- RESPONSIVE STYLES --- */
@media (max-width: 1100px) {
  .studio-branding-section {
    flex-direction: column;
  }
  .studio-branding-panel-left, .studio-branding-panel-right {
    width: 100%;
    max-width: unset;
    min-width: unset;
    padding-left: 8vw;
    padding-right: 8vw;
  }
  .branding-info-grid {
    grid-template-columns: 1fr;
    gap: 0.9375rem; /* 15px */
  }
}
@media (max-width: 700px) {
  .studio-branding-panel-left, .studio-branding-panel-right {
    padding-left: 4vw;
    padding-right: 4vw;
    padding-top: 2.125rem; /* 34px */
    padding-bottom: 1.375rem; /* 22px */
  }
  .branding-logos-2x2 {
    grid-template-columns: 3.5625rem 3.5625rem;
    grid-template-rows: 3.5625rem 3.5625rem;
    gap: 0.5rem 0.625rem;
  }
  .branding-color-sample-big img {
    width: 2.125rem;
    height: 2.125rem;
  }
  .branding-info-labels {
    gap: 0.6875rem; /* 11px */
  }
}




/* ============================================ */
/* RESPONSIVE                                  */
/* ============================================ */

@media (max-width: 1400px) {
  .film-stills-display {
    width: 37.5rem; /* 600px */
  }
  
  .film-carousel-arrow svg {
    width: 2.1875rem; /* 35px */
    height: 2.1875rem;
  }
}

@media (max-width: 900px) {
  .film-stills-section {
    padding: 0 1.25rem;
    margin: 6.25rem auto 5rem auto;
  }
  
  .film-stills-display {
    width: 31.25rem; /* 500px */
  }
  
  .film-stills-container {
    gap: 1.25rem; /* 20px */
  }
  
  .film-carousel-arrow svg {
    width: 1.875rem; /* 30px */
    height: 1.875rem;
  }
  
  .youtube-image {
    height: 2.5rem; /* 40px */
  }
}

@media (max-width: 600px) {
  .film-stills-display {
    width: 100%;
  }
  
  .film-stills-container {
    gap: 0.9375rem; /* 15px */
  }
  
  .film-stills-footer {
    flex-direction: column;
    gap: 1.25rem; /* 20px */
    align-items: center;
  }
  
  .youtube-image {
    height: 2.1875rem; /* 35px */
  }
  
  .film-carousel-arrow svg {
    width: 1.5625rem; /* 25px */
    height: 1.5625rem;
  }
}

/* ============================================ */
/* RESPONSIVE                                  */
/* ============================================ */

@media (max-width: 1400px) {
  .visual-treatment-content {
    grid-template-columns: 1fr;
    gap: 3.125rem; /* 50px */
    padding: 3.125rem 3.75rem; /* 50px 60px */
  }
  
  .visual-treatment-center,
  .visual-treatment-right {
    max-width: 37.5rem;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .visual-treatment-panel {
    margin-top: 9.375rem; /* 150px */
    margin-bottom: 5rem; /* 80px */
  }
  
  .visual-treatment-content {
    padding: 2.5rem 1.875rem; /* 40px 30px */
    gap: 2.5rem; /* 40px */
  }
  
  .color-grid {
    gap: 1.25rem; /* 20px */
  }
  
  .texture-container {
    height: 7.5rem; /* 120px */
  }
}

@media (max-width: 600px) {
  .visual-treatment-content {
    padding: 1.875rem 1.25rem; /* 30px 20px */
  }
}

/* REPLACE only the existing @media (min-width: 2560px) block with this proportionally‑scaled version.
   Scale factor: 1.15 applied to spacing/sizes from the previous 2560 block so the layout
   scales up and spaces out smoothly for 2560×1440 while preserving the same visual relationships.
   All units remain rem (1rem = 16px).
*/

@media (min-width: 2560px) {
  .film-content-wrapper {
    padding: 21.562rem 25.875rem 25.156rem 25.875rem; /* ~18.75,22.5,21.875,22.5 * 1.15 */
    max-width: 230rem; /* 200rem * 1.15 */
    font-size: 1.633rem; /* 1.42 * 1.15 */
    box-sizing: border-box;
  }

  .film-top-image {
    width: 195%; /* keep large but restrained */
    left: -10.781rem; /* -9.375 * 1.15 */
    margin-bottom: 16.531rem; /* 14.375 * 1.15 */
  }
  .film-top-image img {
    width: 195%;
    left: -15.813rem; /* -13.75 * 1.15 */
    top: -23.000rem;  /* -20 * 1.15 */
  }

  .film-content-grid {
    grid-template-columns: 61.094rem 1fr 64.688rem; /* 53.125, 56.25 *1.15 */
    gap: 21.563rem; /* 18.75 * 1.15 */
    max-width: 215.625rem; /* 187.5 * 1.15 */
  }

  .film-left-text,
  .film-right-text {
    max-width: 46.000rem; /* 40 * 1.15 */
    top: -39.531rem; /* -34.375 * 1.15 */
    font-size: 1.863rem; /* 1.62 * 1.15 */
  }

  .film-purpose-heading,
  .film-objective-heading,
  .film-achievement-heading {
    font-size: 3.335rem; /* 2.9 * 1.15 */
    padding: 4px 4.025rem; /* 3.5rem * 1.15 */
  }

  .film-left-text p,
  .film-right-text-content p {
    font-size: 1.990rem; /* 1.73 * 1.15 */
  }

  .film-center-poster {
    width: 586.5%; /* 510% * 1.15 */
    left: -45.281rem; /* -39.375 * 1.15 */
    top: -44.563rem;  /* -38.75 * 1.15 */
  }
  .film-center-poster img {
    max-width: 94.875rem; /* 82.5 * 1.15 */
  }

  .film-bottom-image {
    width: 253%; /* 220% * 1.15 */
    left: -158.125rem; /* -137.5 * 1.15 */
    margin-bottom: 51.750rem; /* 45 * 1.15 */
  }
  .film-bottom-image img {
    width: 253%;
    top: -49.781rem; /* -43.125 * 1.15 */
  }

  .film-intro-section,
  .approach-hand-container {
    max-width: 230rem; /* 200 * 1.15 */
    padding: 0 18.656rem; /* 14.375 * 1.15 */
  }
  .film-intro-section { margin: -56.062rem auto 0 auto; } /* -48.75 * 1.15 */
  .intro-top-row {
    grid-template-columns: 79.062rem 1fr 1fr; /* 68.75 * 1.15 */
    gap: 14.375rem; /* 12.5 * 1.15 */
    margin-bottom: 13.656rem; /* 11.875 * 1.15 */
  }
  .intro-text-block {
    font-size: 1.874rem; /* 1.63 * 1.15 */
    max-width: 89.125rem; /* 77.5 * 1.15 */
  }
  .intro-middle-row,
  .intro-bottom-row {
    gap: 15.094rem; /* 13.125 * 1.15 */
    margin-bottom: 15.094rem;
  }

  .approach-hand-image {
    max-width: 172.500rem; /* 150 * 1.15 */
    left: -97.031rem; /* -84.375 * 1.15 */
    top: 43.844rem; /* 38.125 * 1.15 */
  }

  .film-credits-section {
    max-width: 251.563rem; /* 218.75 * 1.15 */
    grid-template-columns: 72.594rem 72.594rem 1fr; /* 63.125 * 1.15 */
    gap: 19.406rem; /* 16.875 * 1.15 */
    margin: 24.438rem auto 0 auto; /* 21.25 * 1.15 */
    font-size: 1.622rem; /* 1.41 * 1.15 */
  }
  .credits-left-text,
  .credits-center-text {
    max-width: 64.969rem; /* 55.625 * 1.15 */
    font-size: 1.622rem;
  }
  .credits-images {
    gap: 18.688rem; /* 16.25 * 1.15 */
    max-width: 150.938rem; /* 131.25 * 1.15 */
  }

  .film-video-section {
    max-width: 172.500rem; /* 150 * 1.15 */
    margin: 33.781rem auto 0; /* 29.375 * 1.15 */
    padding: 0 18.688rem; /* 16.25 * 1.15 */
  }
  .film-video-caption p {
    font-size: 1.851rem; /* 1.61 * 1.15 */
  }

  .visual-treatment-panel {
    margin-top: 37.375rem; /* 32.5 * 1.15 */
    margin-bottom: 20.844rem; /* 18.125 * 1.15 */
  }
  .visual-treatment-content {
    padding: 7.906rem 25.875rem; /* 6.875 *1.15 ; 22.5 *1.15 */
    grid-template-columns: 93.438rem 86.250rem 79.062rem; /* 81.25,75,68.75 *1.15 */
    gap: 23.000rem; /* 20 * 1.15 */
    font-size: 1.828rem; /* 1.59 * 1.15 */
  }
  .visual-treatment-left { width: 61.813rem; left: 24.844rem; } /* 53.75, 21.562 *1.15 */
  .visual-label, .treatment-label { font-size: 3.22rem; padding: 5px 6.038rem; } /* 2.8*1.15, 5.25*1.15 */
  .visual-treatment-text p { font-size: 1.955rem; } /* 1.7*1.15 */
  .color-grid { gap: 6.613rem; } /* 5.75*1.15 */
  .color-item { max-width: 21.563rem; } /* 18.75 * 1.15 */
  .typeface-label, .texture-label { font-size: 2.984rem; } /* 2.59*1.15 ~2.9785 */
  .typeface-image { width: 202.4%; } /* 176% * 1.15 = 202.4% */
  .texture-image { width: 100%; height: 100%; }
}




/* Load this LAST (after your other film CSS). 
   Purpose: make the #film accordion/content look IDENTICAL at viewport widths >= 2560px
   to how it looks at 2559px by freezing the key layout, type and image sizes to the
   baseline values used below (these match the original rules at <=2559).
   This is intentionally a defensive, high-specificity override that restores the
   pre-2560 appearance without editing your existing file.
*/

/* Scope to the film area and only apply at 2560px and up */
@media (min-width: 2560px) {

  /* 1) Center & cap the main film containers so percent/large rules cannot expand layout */
  #film .film-layout,
  #film .film-content-wrapper,
  #film .film-content-grid,
  #film .film-intro-section,
  #film .approach-hand-container,
  #film .film-credits-section,
  #film .visual-treatment-content {
    width: 2559px !important;
    max-width: 2559px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 2) Lock paddings used at baseline (copy of original values in rems) */
  #film .film-content-wrapper {
    padding: 7.5rem 6.25rem 11.25rem 6.25rem !important; /* 120px 100px 180px 100px */
  }
  #film .visual-treatment-content {
    padding: 2.5rem 6.25rem !important; /* 40px 100px */
    grid-template-columns: 28.125rem 25rem 21.875rem !important; /* 450,400,350px */
    gap: 9.375rem !important; /* 150px */
  }

  /* 3) Prevent font inflation — restore paragraph and small text to baseline */
  #film .film-left-text p,
  #film .film-right-text-content p,
  #film .intro-text-block,
  #film .credits-left-text,
  #film .credits-center-text,
  #film .visual-treatment-text p,
  #film .film-video-caption p {
    font-size: 0.75rem !important; /* baseline from original file */
    line-height: 1.7 !important;
  }

  /* Headings / small label sizes restore */
  #film .film-purpose-heading,
  #film .film-objective-heading,
  #film .film-achievement-heading,
  #film .visual-label,
  #film .treatment-label {
    font-size: 1.3rem !important;
    padding: 0.5px 1.25rem !important;
  }

  /* 4) Cap poster, approach and decorative images to baseline sizes and positions */
  #film .film-center-poster {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-10rem) !important; /* keep same vertical lift */
  }
  #film .film-center-poster img {
    max-width: 28.125rem !important; /* 450px baseline */
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #film .approach-hand-image {
    max-width: 48.125rem !important; /* 770px baseline */
    left: -31.25rem !important;
    top: 12.5rem !important;
    width: 100% !important;
  }

  /* Bottom car image baseline */
  #film .film-bottom-image {
    width: 112% !important;
    max-width: 87.5rem !important; /* 1400px baseline */
    left: -86.25rem !important;
    margin: 0 auto 15.625rem auto !important;
  }
  #film .film-bottom-image img {
    width: 112% !important;
    transform: translateY(-13rem) !important;
  }

  /* 5) Ensure credits images remain in the right column and are visible (baseline: single column stack) */
  #film .film-credits-section {
    grid-template-columns: 18.75rem 18.75rem 1fr !important; /* enforce baseline columns */
    gap: 5rem !important;
    max-width: 2559px !important;
  }
  /* Put credits-images explicitly into column 3 but using original stacked layout */
  #film .film-credits-section .credits-images {
    grid-column: 3 / 4 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3.75rem !important;
    max-width: 100% !important;
    justify-self: end !important;
    align-self: end !important;
  }
  #film .film-credits-section .credits-image-item {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16/9 !important;
  }
  #film .film-credits-section .credits-image-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 6) Reset any ultra-wide font/inflation applied by other 2560+ rules */
  /* target common selectors that other rules increased earlier */
  #film .film-left-text,
  #film .film-right-text,
  #film .visual-treatment-left,
  #film .film-credits-section,
  #film .approach-hand-container {
    font-size: initial !important;
  }

  /* 7) Block any enormous gridTemplate or gap increases inside film area */
  #film .film-content-grid,
  #film .visual-treatment-content,
  #film .film-credits-section {
    gap: 5rem !important; /* fallback to original-ish gap */
  }

  /* 8) Prevent overflow/scrollbar differences causing 1px shifts */
  html, body, #film {
    overflow-x: hidden !important;
  }

  /* 9) Highest priority safety: explicitly unset any known problematic ultra-wide properties on elements */
  #film [style*="left: -"] { left: auto !important; } /* neutralize inline lefts if present inside #film */
  #film [style*="width: 170%"] { width: 100% !important; } /* neutralize extreme inline widths */
  #film [style*="transform: translate"] { transform: none !important; } /* avoid inline transforms shifting layout */

  /* 10) If other rules still override, increase specificity for the most likely offenders */
  /* Example extra-specific selectors (won't do anything if not present) */
  #film .film-content-wrapper.film-content-wrapper,
  #film .visual-treatment-content.visual-treatment-content {
    width: 2559px !important;
    max-width: 2559px !important;
  }
}