@charset "utf-8";
/* CSS Document */

/* ===============================
   FONT
   =============================== */
@font-face {
  font-family: "Oxanium";
  src: url("fonts/Oxanium/Oxanium-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   RESET / BASE
   =============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: "Oxanium", sans-serif;
  background: #fff;
  color: #333;
  overflow-x: hidden;
}

section,
.bottom-banner {
  margin: 0;
  border: 0;
}

.content-block,
.under-carousel-text,
.home-snippet-mobile {
  word-spacing: -0.1em;
}

/* ===============================
   VARIABLES
   =============================== */
:root {
  --hero-vh: 100vh;
  --hero-carousel-width: clamp(660px, 62vw, 820px);
  --hero-carousel-offset-top: clamp(-72px, -7vh, -36px);
  --hero-carousel-offset-bottom: clamp(88px, 12vh, 150px);
  --hero-text-width: 500px;
  --text-scale: 1;
}

/* ===============================
   TOP DROP
   =============================== */
.top-drop {
  position: absolute;
  top: -40px;
  right: -5px;
  left: auto;
  width: 520px;
  height: 180px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 525 105'>\
  <path d='M0 0 C173.25 0 346.5 0 525 0 C525 34.32 525 68.64 525 104 C519.15956382 103.35106265 513.66887045 102.63035372 507.98046875 101.36791992 C507.22560275 101.20436382 506.47073675 101.04080772 505.69299603 100.87229538 C504.05363234 100.51649159 502.41471977 100.15860415 500.77622032 99.79884148 C498.11119929 99.21371636 495.44502395 98.63412292 492.77851868 98.05580139 C488.89745726 97.21360623 485.0168772 96.36924095 481.1366272 95.52331543 C470.54655447 93.21613429 459.95114575 90.93362578 449.35546875 88.65234375 C448.25936972 88.41631062 447.16327068 88.18027748 446.03395653 87.93709183 C422.81449205 82.93973918 399.57365837 78.04943363 376.3125 73.25 C375.343694 73.05006187 374.374888 72.85012375 373.37672424 72.64412689 C325.01027678 62.66946193 276.54328187 53.1995445 228.07735634 43.72294044 C207.41429929 39.68185368 186.76472493 35.57588182 166.12255573 31.42952442 C160.53691681 30.30771283 154.95061365 29.18927857 149.36352539 28.07470703 C148.66170954 27.93454288 147.95989368 27.79437874 147.23681068 27.64996719 C131.01822108 24.41737672 114.751345 21.55897175 98.44061279 18.83242798 C79.33857691 15.63460775 60.29221147 12.15827518 41.25 8.625 C40.53295017 8.49195591 39.81590034 8.35891182 39.07712173 8.22183609 C33.03643538 7.10070229 26.99597464 5.9783671 20.95628357 4.85188293 C13.97409011 3.54974411 6.98933467 2.26327015 0 1 C0 0.67 0 0.34 0 0 Z' fill='%23555555'/>\
  <g transform='scale(1,0.88)'>\
    <path d='M0 0 C173.25 0 346.5 0 525 0 C525 34.32 525 68.64 525 104 C519.15956382 103.35106265 513.66887045 102.63035372 507.98046875 101.36791992 C507.22560275 101.20436382 506.47073675 101.04080772 505.69299603 100.87229538 C504.05363234 100.51649159 502.41471977 100.15860415 500.77622032 99.79884148 C498.11119929 99.21371636 495.44502395 98.63412292 492.77851868 98.05580139 C488.89745726 97.21360623 485.0168772 96.36924095 481.1366272 95.52331543 C470.54655447 93.21613429 459.95114575 90.93362578 449.35546875 88.65234375 C448.25936972 88.41631062 447.16327068 88.18027748 446.03395653 87.93709183 C422.81449205 82.93973918 399.57365837 78.04943363 376.3125 73.25 C375.343694 73.05006187 374.374888 72.85012375 373.37672424 72.64412689 C325.01027678 62.66946193 276.54328187 53.1995445 228.07735634 43.72294044 C207.41429929 39.68185368 186.76472493 35.57588182 166.12255573 31.42952442 C160.53691681 30.30771283 154.95061365 29.18927857 149.36352539 28.07470703 C148.66170954 27.93454288 147.95989368 27.79437874 147.23681068 27.64996719 C131.01822108 24.41737672 114.751345 21.55897175 98.44061279 18.83242798 C79.33857691 15.63460775 60.29221147 12.15827518 41.25 8.625 C40.53295017 8.49195591 39.81590034 8.35891182 39.07712173 8.22183609 C33.03643538 7.10070229 26.99597464 5.9783671 20.95628357 4.85188293 C13.97409011 3.54974411 6.98933467 2.26327015 0 1 C0 0.67 0 0.34 0 0 Z' fill='%23f7f7f7'/>\
  </g>\
</svg>");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 10;
}

@media (max-width: 768px) {
  .top-drop {
    top: -1px;
    right: -1px;
    width: 70vw;
    height: auto;
    aspect-ratio: 525 / 105;
    background-size: 100% 100%;
    background-position: right top;
    transform: scale(1.3);
    transform-origin: top right;
  }
}

/* Wrapper */
.main-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===============================
   SECTIONS
   =============================== */
section {
  padding: 60px 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

section:not(#home-section) {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

/* ===============================
   HOME
   =============================== */
#home-section {
  min-height: 100vh;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

#home-section::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:clamp(140px,20vw,220px);
  pointer-events:none;
  z-index:11;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top center;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 220'>\
  <path fill='%23f7f7f7' d='M0,80 C260,40 540,10 860,40 C1160,70 1420,140 1740,150 C2040,160 2320,130 2600,90 L2600,220 L0,220 Z'/>\
  <path fill='%23555555' d='M0,62 \
C260,32 540,10 860,38 \
C1160,66 1420,134 1740,144 \
C2040,152 2320,124 2600,82 \
L2600,98 \
C2320,136 2040,156 1740,150 \
C1420,142 1160,82 860,54 \
C540,26 260,48 0,82 \
Z'/>\
</svg>");
}

.home-logo-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* Keep it big and fluid, but not lost */
  width: clamp(900px, 62vw, 1200px);
  right: clamp(-260px, -14vw, -40px);

  height: auto;
  aspect-ratio: 3 / 1;
  background: url("../logo0.png") center / contain no-repeat;
  z-index: 25;
  pointer-events: none;
  opacity: 0.95;
  mix-blend-mode: normal;
  transition: transform .35s ease, opacity .35s ease;
}

body.home-text-active .home-logo-right {
  opacity: 0;
  transform: translateY(-130%);
}

#logoBox.logo-pushed-up {
  transform: translateY(-200px);
  transition: transform .3s ease;
}



/* Tagline aligned to the BIG right logo – desktop & laptop */
.home-tagline {
  position: absolute;

  /* ✅ Use the SAME horizontal box as .home-logo-right */
  right: clamp(-260px, -14vw, -40px);
  width: clamp(900px, 62vw, 1200px);

  /* ✅ Place it under the logo (logo is centered at 50% vertically) */
  top: calc(50% + 210px);

  margin: 0;
  padding: 0 24px;

  text-align: center;

  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: #f7f7f7;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.55);

  z-index: 26; /* above the logo (25) and video (5) */
  pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}

.home-tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-tagline .tagline-top,
.home-tagline .tagline-bottom {
  display: block;
}

/* Divider line */
.home-tagline .tagline-top::after {
  content: "";
  display: block;
  width: 80px;              /* length of the line */
  height: 2px;              /* thickness */
  margin: 14px auto;        /* space above/below line */
  background: rgba(255,255,255,0.7); /* subtle white */
}

/* Move away in sync with the logo when the overlay appears */
body.home-text-active .home-tagline {
  transform: translateY(-200px);
  opacity: 0;
}



@media (max-width: 900px) {
  .home-tagline {
    right: auto;
    left: 50%;

    /* Same base transform as desktop, but mobile-specific top */
    transform: translate(-50%, 0);
    top: calc(50% + 95px); /* closer to the logo than before */

    width: min(90vw, 520px);
    text-align: center;

    font-size: 0.95rem;
    padding: 0 20px;
  }

  body.home-text-active .home-tagline {
    transform: translate(-50%, -200px);
    opacity: 0;
  }
}

/* Hero player */
#home-section .media-player {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  background: #000;
  z-index: 5;
  overflow: hidden;
}

#home-section .carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s;
}

#home-section .carousel-item.active {
  opacity: 1;
  z-index: 1;
}

#home-section .carousel-item .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 1;
  transition: opacity .8s ease;
  pointer-events: none;
}

#home-section .carousel-item iframe,
#home-section .carousel-item video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  min-width: calc(100vh * 16 / 9);
  min-height: calc(100vw * 9 / 16);
  border: 0;
  display: block;
  pointer-events: auto;
  z-index: 1;
  opacity: 0;
  transition: opacity .8s ease;
}

#home-section .carousel-item.video-ready .hero-poster { opacity: 0; }
#home-section .carousel-item.video-ready iframe,
#home-section .carousel-item.video-ready video { opacity: 1; }



/* Arrows */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  font-size: 2rem;
  padding: 0 10px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  z-index: 30;
}

.media-player:hover .arrow {
  opacity: 1;
  pointer-events: auto;
}

#home-section .arrow { display: none !important; }

.arrow.left { left: 10px; }
.arrow.right { right: 10px; }

/* ===============================
   HOME TEXT OVERLAY
   =============================== */
#home-text-section {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 20px 12vh;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  width: 100%;
  min-height: 100vh;
  transition: opacity .3s ease;
}

#home-text-section.home-overlay-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#home-text-section.home-overlay-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.home-text-section { position: relative; }

.home-text-wrapper {
  position: relative;
  width: 100%;
  max-width: 950px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
}

.home-text-wrapper * { cursor: inherit; }

.home-text-shape { display: none; }

#home-text-section .content-block {
  position: relative;
  z-index: 3;
  cursor: pointer;
  margin: 0;
  color: white;
  font-size: 1.35rem;
  line-height: 1.6;
  text-align: justify;
  font-style: italic;
  background: rgba(0,0,0,0.35);
  padding: 32px 40px;
  border-radius: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-image: radial-gradient(ellipse at center, black 85%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 85%, transparent 100%);
}

#home-text-section .hint-swipe {
  margin-top: 10px;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(4px);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}

#home-text-section.home-overlay-visible .hint-swipe {
  opacity: 0.75;
  transform: translateY(0);
}

#home-text-section .home-work-cta {
  margin-top: 24px;
  text-align: right;
}

.home-work-link {
  display: inline-block;
  position: relative;
  font: inherit;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: aliceblue;
  text-decoration: none;
  cursor: pointer;
}

.home-work-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}

.home-work-link:hover::after { transform: scaleX(1); }

#home-text-section .content-block p {
  margin-bottom: 16px;
  text-align-last: center;
  -webkit-text-align-last: center;
}

/* ===============================
   SECTION WAVES
   =============================== */
section:not(#home-section) {
  position: relative;
  padding-top: clamp(140px, 20vw, 220px);
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section:not(#home-section)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(100px, 18vw, 180px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  z-index: 0;
  pointer-events: none;
}

section:not(#home-section) > * {
  position: relative;
  z-index: 2;
}

.section-clip {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 3;
}

/* =========================================================
   ✅ FIXED SCROLL-IN SLIDE ANIMATION (player + text)
   - animate ONLY .player-stage (not the whole player UI)
   - animate .under-carousel-inner as intended
   - EXCLUDE .section-scroll-btn from all animations
   ========================================================= */
.media-player { position: relative; }

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

/* Animate BOTH the player box AND the text */
html.js .cinema-player,
html.js .production-player,
html.js .under-carousel-inner {
  will-change: transform, opacity;
  opacity: 0;
  transition: transform 750ms ease, opacity 750ms ease;
}

html.js section.in-view .cinema-player,
html.js section.in-view .production-player,
html.js section.in-view .under-carousel-inner {
  opacity: 1;
  transform: translateX(0);
}

/* ✅ FIX: Keep ONLY scroll buttons visible during animation, not arrows */
html.js .section-scroll-btn {
  opacity: 1 !important;
  transition: opacity .3s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  will-change: auto !important;
  animation: none !important;
}

/* ✅ Arrows: default hidden, show on player hover */
html.js .arrow {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease !important;
  will-change: auto !important;
  animation: none !important;
}

html.js .media-player:hover .arrow {
  opacity: 1;
  pointer-events: auto;
}

/* Direction-specific transforms */
html.js #cinematography-section:not(.in-view) .cinema-player { 
  transform: translateX(-90px); 
}
html.js #cinematography-section:not(.in-view) .under-carousel-inner { 
  transform: translateX(90px); 
}

html.js #production:not(.in-view) .production-player { 
  transform: translateX(90px); 
}
html.js #production:not(.in-view) .under-carousel-inner { 
  transform: translateX(-90px); 
}

html.js #commercial:not(.in-view) .cinema-player { 
  transform: translateX(-90px); 
}
html.js #commercial:not(.in-view) .under-carousel-inner { 
  transform: translateX(90px); 
}

.under-carousel-inner { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html.js .player-stage,
  html.js .under-carousel-inner {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===============================
   ✅ SCROLL CIRCLE ARROWS (FIXED)
   =============================== */
.section-scroll-btn {
  position: fixed !important;
  left: 50%;
  top: 90vh;
  transform: translateX(-50%) !important;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 3px solid #bfbfbf;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999 !important;
  pointer-events: auto;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease !important;
  will-change: auto !important;
  animation: none !important;
  opacity: 1 !important;
}

#cinematography-section .section-scroll-btn { border-color: #bfbfbf; }
#production .section-scroll-btn { border-color: #b0b0b0; }
#commercial .section-scroll-btn { border-color: #a3a3a3; }
#contact-section .section-scroll-btn { border-color: #8c8c8c; }

#cinematography-section .section-scroll-btn:hover,
#production .section-scroll-btn:hover,
#commercial .section-scroll-btn:hover,
#contact-section .section-scroll-btn:hover {
  border-color: #ffffff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.section-scroll-btn:active {
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  opacity: 0.9 !important;
}

/* Desktop only transforms */
@media (min-width: 769px) {
  #cinematography-section .section-scroll-btn:hover,
  #production .section-scroll-btn:hover,
  #commercial .section-scroll-btn:hover,
  #contact-section .section-scroll-btn:hover {
    transform: translateX(-50%) scale(1.04) !important;
  }

  .section-scroll-btn:active {
    transform: translateX(-50%) scale(0.97) !important;
  }
}


.section-scroll-icon { position: relative; width: 18px; height: 18px; }

.section-scroll-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-right: 3px solid #bfbfbf;
  border-bottom: 3px solid #bfbfbf;
  transform: rotate(45deg);
  transform-origin: center;
  transition: border-color .18s ease;
}

#production .section-scroll-icon::before { border-right-color: #b0b0b0; border-bottom-color: #b0b0b0; }
#commercial .section-scroll-icon::before { border-right-color: #a3a3a3; border-bottom-color: #a3a3a3; }

#contact-section .section-scroll-icon::before { border-right-color: #8c8c8c; border-bottom-color: #8c8c8c; }

.section-scroll-icon-down::before { transform: rotate(45deg); }
.section-scroll-icon-up::before { transform: rotate(-135deg); }

#cinematography-section .section-scroll-btn:hover .section-scroll-icon::before,
#production .section-scroll-btn:hover .section-scroll-icon::before,
#commercial .section-scroll-btn:hover .section-scroll-icon::before,
#contact-section .section-scroll-btn:hover .section-scroll-icon::before {
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

/* ===============================
   SECTION COLORS + WAVES
   =============================== */
#cinematography-section {
  background: #f2f2f2;
  position: relative;
  overflow: visible;
  cursor: pointer;
  padding-bottom: clamp(160px, 24vh, 260px);
  z-index: 0;
}

#cinematography-section::before{
  content:"";
  position:absolute;
  left:0;
  top:-140px;
  width:100%;
  height:clamp(140px,20vw,220px);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:bottom center;
  pointer-events:none;
  z-index:20;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 220'>\
  <g transform='translate(0,220) scale(1,-1)'>\
    <path fill='%23f7f7f7' d='M0,80 C260,40 540,10 860,40 C1160,70 1420,140 1740,150 C2040,160 2320,130 2600,90 L2600,220 L0,220 Z'/>\
    <path fill='%23cac8c8' d='M0,62 \
C260,32 540,10 860,38 \
C1160,66 1420,134 1740,144 \
C2040,152 2320,124 2600,82 \
L2600,98 \
C2320,136 2040,156 1740,150 \
C1420,142 1160,82 860,54 \
C540,26 260,48 0,82 \
Z'/>\
  </g>\
</svg>");
}

#production {
  background: #e0e0e0;
  position: relative;
  overflow: visible;
  cursor: pointer;
  padding-bottom: clamp(160px, 24vh, 260px);
}

#production::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 220'>\
  <path fill='%23cac8c8' d='M0,18 C320,68 680,138 1020,118 C1350,92 1700,136 2060,96 C2400,54 2560,64 2600,84 L2600,18 Z'/>\
  <path fill='%23f2f2f2' d='M0,0 C320,50 680,120 1020,100 C1350,80 1700,130 2060,90 C2400,50 2560,60 2600,80 L2600,0 Z'/>\
</svg>");
}

#commercial {
  background: #cccccc;
  position: relative;
  overflow: visible;
  cursor: pointer;
  z-index: 2;
}

#commercial::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(100px, 18vw, 180px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 200'>\
  <path fill='%23a3a3a3' d='\
    M0,10 \
    C300,52 800,86 1200,94 \
    C1600,104 2000,110 2400,122 \
    L2400,10 Z'/>\
  <path fill='%23e0e0e0' d='\
    M0,0 \
    C300,44 800,80 1200,88 \
    C1600,96 2000,84 2400,110 \
    L2400,0 Z'/>\
</svg>");
  z-index: 0;
}

#contact-section {
  background: #c4c4c4;
  position: relative;
  overflow: visible;
  cursor: default;
  display: none;
  padding-bottom: clamp(160px, 24vh, 260px);
  z-index: 1;
}

#contact-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: -40px;
  width: 100%;
  height: calc(clamp(100px, 18vw, 180px) + 80px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 220'>\
  <path fill='%23e0e0e0' d='M0,18 C320,78 720,148 1120,128 C1480,100 1880,130 2200,100 C2440,82 2540,92 2600,94 L2600,18 Z'/>\
  <path fill='%23cccccc' d='M0,0 C320,60 720,130 1120,110 C1480,90 1880,120 2200,90 C2440,70 2540,80 2600,90 L2600,0 Z'/>\
</svg>");
  z-index: -1;
}

#contact-section.is-expanded { display: flex; }

#contact-section .contact-icons a[aria-label="WhatsApp"] img {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.95;
}

#contact-section .contact-icons a[aria-label="WhatsApp"]:hover img {
  filter: grayscale(1) brightness(1.7);
}

/* ===============================
   LAYOUTS
   =============================== */
.cinema-layout,
.production-layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  width: min(92vw, 1200px);
  margin-inline: auto;
}

.production-layout { flex-direction: row-reverse; }

.contact-layout {
  position: relative;
  z-index: 2;
  width: min(92vw, 1200px);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.cinema-player,
.production-player {
  width: clamp(500px, 56vw, 630px);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 2;
}

.production-player { width: clamp(540px, 56vw, 630px); }

.cinema-item,
.production-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s linear;
}

.cinema-item.active,
.production-item.active {
  opacity: 1;
  z-index: 1;
}

.cinema-item video,
.production-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  border-radius: inherit;
}

/* CONTACT BOX */
.contact-box {
  position: relative;
  max-width: 520px;
  padding: 40px 34px 60px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 1rem;
  line-height: 1.7;
  color: #111827;
  text-align: right;
  font-style: italic;
  z-index: 1;
}

.contact-box::before {
  content: "";
  position: absolute;
  transform: scale(1.3);
  inset: -40px -60px -54px -60px;
  background: url("../shape4.png") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.18));
  z-index: -1;
}

.contact-box h2 {
  margin-bottom: 18px;
  margin-right: 50px;
  font-size: 1.35rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
  color: darkgrey;
}

.contact-box p { margin-bottom: 16px; }

.contact-box a {
  color: #111827;
  text-decoration: none;
  font-weight: 550;
  position: relative;
}

.contact-box a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.08em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}

.contact-box a:hover { color: #ff5a1f; }
.contact-box a:hover::after { transform: scaleX(1); }

/* CONTACT ICON LINKS */
.contact-icons {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 48px;
  margin-bottom: 16px;
  margin-right: 50px;
}

.contact-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-icons a::after { display: none; }

.contact-icons img {
  width: 46px;
  height: 46px;
  display: block;
  filter: grayscale(1) brightness(1.3) contrast(0.9);
  opacity: 0.85;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

.contact-icons a:hover img {
  transform: scale(1.12);
  opacity: 1;
  filter: grayscale(1) brightness(1.5) contrast(1);
}

/* SHAPE PANELS */
.shape-panel {
  position: absolute;
  top: 80%;
  transform: translateY(-50%);
  width: 100vw;
  max-width: 100vw;
  min-height: 75vh;
  padding: 100px 120px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

#cinematography-section .shape-panel {
  background-image: url("../shape1.png");
  top: 20vh;
  transform: translate(30vw, -50%);
}

#production .shape-panel {
  background-image: url("../shape2.png");
  left: 0;
  right: auto;
  top: 28vh;
  transform: translate(-30vw, -50%);
  z-index: 1;
}

#commercial .shape-panel {
  background-image: url("../shape3.png");
  right: 0;
  top: 20vh;
  transform: translate(30vw, -50%);
  z-index: 0;
}

/* TEXT UNDER CAROUSELS */
.under-carousel-text {
  max-width: calc(var(--text-base, 500px) * var(--text-scale));
  margin-top: clamp(48px, 8vh, 120px);
  padding: 30px;
  position: relative;
  z-index: 3;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: normal;
  font-style: normal;
  color: #111827;
  text-align: justify;
  transform: translate(var(--nudge-x, 0px), var(--nudge-y, 0px));
}

.under-carousel-text p {
  margin-bottom: 16px;
  text-align-last: left;
  -webkit-text-align-last: left;
}

#cinematography-section .under-carousel-text,
#production .under-carousel-text,
#commercial .under-carousel-text { --text-base: 520px; }

#commercial .under-carousel-text { margin-top: -40px; }

@media (min-width: 901px) {
  .cinema-layout .under-carousel-text {
    transform: translateX(clamp(32px, -6vw, -2px));
  }
  .production-layout .under-carousel-text {
    transform: translateX(clamp(2px, 6vw, -72px));
  }
}

.italic-right { font-style: oblique 10deg; font-variation-settings: "slnt" -6; }
.italic-left { font-style: oblique 10deg; font-variation-settings: "slnt" -10; }

/* READ MORE / SHOW LESS */
.more-toggle,
.read-more-link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-left: .35em;
  font: inherit;
  font-style: italic;
  font-weight: 550;
  color: #111827;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}

.more-toggle::after,
.read-more-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.08em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}

.more-toggle.home-less::after,
.more-toggle.section-less::after { transform-origin: right center; }

.more-toggle:hover,
.read-more-link:hover,
.home-work-link:hover { color: #ff5a1f; }

.more-toggle:hover::after,
.read-more-link:hover::after { transform: scaleX(1); }

.under-carousel-text.is-collapsed p:not(:first-child) { display: none; }

.section-more-wrap {
  display: flex;
  justify-content: flex-end;
}

/* HOME MOBILE SNIPPET */
.home-snippet-mobile {
  width: 100%;
  max-width: var(--hero-carousel-width);
  margin: 16px auto 32px;
  font-size: 1rem;
  line-height: 1.6;
  color: #111827;
  text-align: justify;
}

.home-snippet-mobile .home-snippet-text {
  text-align: justify;
  text-align-last: left;
  -webkit-text-align-last: left;
}

.home-snippet-mobile .home-more {
  display: block;
  width: fit-content;
  margin: 22px auto 0;
}

/* MENU */
.menu-banner {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #f3f3f3;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px 34px 70px;
  transform: translateX(110%);
  transition: transform .36s cubic-bezier(.2,.9,.2,1);
  box-shadow: -6px 0 30px rgba(0,0,0,0.06);
  contain: layout paint;
}

.menu-banner.active { transform: translateX(0); }

.menu-section {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.menu-section a {
  text-decoration: none;
  color: #000;
  padding: 8px 0;
  font-size: 1.06rem;
  font-weight: 600;
  text-transform: uppercase;
}

.menu-section a:hover { color: #ff5a1f; }

.menu-langs {
  margin-top: 50px;
  margin-bottom: 24px;
  font-weight: 600;
  font-size: .95rem;
}

.lang-title {
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  color: #555;
  margin-bottom: 12px;
  cursor: pointer;
  transition: color .25s ease;
  pointer-events: auto;
  position: relative;
  z-index: 101;
}

.lang-title:hover { color: #ff5a1f; }

.lang-wrapper.open .lang-title { color: #ff5a1f; }

.lang-wrapper {
  position: relative;
  z-index: 100;
  pointer-events: auto;
  margin-bottom: 20px;
}

.lang-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  pointer-events: auto;
  position: relative;
  z-index: 101;
}

.lang-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: auto;
  padding: 0;
  font-size: .8rem;
  letter-spacing: .08em;
  text-decoration: none;
  color: #111827;
  pointer-events: auto;
  cursor: pointer;
}

.lang-bubble::before { content: none !important; }
.lang-bubble:hover { color: #ff5a1f; }
.lang-bubble.active { font-weight: 700; }

/* CONTACT BLOCK IN MENU */
.menu-contact {
  font-weight: bold;
  font-size: .95rem;
  color: #111;
  line-height: 1.45;
  width: 100%;
  padding-bottom: 30px;
  padding-top: 30px;
  transform: translateY(-50px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform .25s ease;
  pointer-events: auto;
  position: relative;
  z-index: 50;
}

.menu-banner:not(.lang-bubbles-open) .menu-contact { transform: translateY(-50px); }
.menu-banner.lang-bubbles-open .menu-contact { transform: translateY(0); margin-top: 20px; }

.menu-contact .email a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

.menu-contact .whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.menu-contact a,
.menu-contact .whatsapp {
  pointer-events: auto;
  position: relative;
  z-index: 51;
}

.menu-contact img {
  width: 60px;
  height: 60px;
  display: block;
  filter: grayscale(1) brightness(0.5);
  opacity: 0.85;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

.menu-contact .whatsapp:hover img {
  transform: scale(1.08);
  opacity: 1;
  filter: grayscale(1) brightness(2.2);
}


/* Burger */
.burger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 3100;
  background: none;
  border: 0;
  cursor: pointer;
  contain: paint;
}

.burger .bar {
  width: 24px;
  height: 4px;
  border-radius: 3px;
  transition: transform .28s ease, opacity .28s ease;
  background: #ff5a1f;
}

.burger.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open .bar:nth-child(2) { opacity: 0; }
.burger.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.burger.open .bar { background: #ff5a1f; }

.burger.hidden { opacity: 0; pointer-events: none; }

/* CINEMA ITEM IMAGES */
.cinema-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  border-radius: inherit;
  display: block;
}

.cinema-item { opacity: 0; transition: opacity 1s ease-in-out; }
.cinema-item.active { opacity: 1; z-index: 1; }
.cinema-player .cinema-item { cursor: pointer; }
.cinema-player .cinema-item img { pointer-events: auto; }

/* OVERLAY */
.video-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.95);
  justify-content: center;
  align-items: center;
  z-index: 5000;
  opacity: 0;
  transition: opacity .22s ease-out;
}

.video-overlay.active { display: flex; opacity: 1; }

.video-overlay iframe,
.video-overlay video,
.video-overlay img {
  width: 85vw;
  height: 85vh;
  max-width: 85vw;
  max-height: 85vh;
  object-fit: contain;
  background: #000;
}

.video-overlay .arrow {
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease-out;
}

.video-overlay:hover .arrow,
.video-overlay:has(iframe:hover) .arrow,
.video-overlay:has(img:hover) .arrow,
.video-overlay .arrow:hover,
.video-overlay .arrow:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none), (pointer: coarse) {
  .video-overlay .arrow {
    opacity: 1;
    pointer-events: auto;
  }
}

.close-video {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 32px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

body.overlay-open { overflow: hidden; }

body.overlay-open #home-section,
body.overlay-open #cinematography-section,
body.overlay-open #production,
body.overlay-open #commercial,
body.overlay-open .menu-banner,
body.overlay-open .burger { pointer-events: none; }

body.overlay-open #overlay,
body.overlay-open #overlay * { pointer-events: auto; }

#closeVideo { background: transparent; border: none; padding: 0; box-shadow: none; }
#closeVideo:focus { outline: none; }
#closeVideo:focus-visible {
  outline: 2px solid #ff5a1f;
  outline-offset: 3px;
  border-radius: 999px;
}

/* CONTACT BUBBLE */
.contact-bubble {
  position: absolute;
  bottom: -6px;
  right: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 35;
}

.contact-bubble.is-visible { opacity: 1; pointer-events: auto; }

.contact-bubble-btn {
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transform-origin: bottom right;
  opacity: 0;
  text-decoration: none;
  width: 72px;
  height: 56px;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, opacity 120ms ease-out;
}

.contact-bubble-btn:hover { transform: translateY(-1px) scale(1.02); }
.contact-bubble-btn:active { transform: translateY(1px) scale(0.97); opacity: 0.9; }

.contact-bubble-icon {
  width: 32px;
  height: 32px;
  display: block;
  pointer-events: none;
  filter: grayscale(1) brightness(2.2);
  opacity: 0.95;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

.contact-bubble-btn:hover .contact-bubble-icon {
  transform: scale(1.08);
  opacity: 1;
  filter: grayscale(1) brightness(0.5);
}

.contact-bubble-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
  background: url("../shape2.png") center / contain no-repeat;
  opacity: 0.98;
  z-index: -1;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}

.contact-bubble.is-visible .contact-bubble-btn {
  animation: contactBubbleEnter .55s cubic-bezier(.21, .9, .24, 1.1) forwards,
             contactBubbleFloat 3.6s ease-in-out .55s infinite alternate;
}

@keyframes contactBubbleEnter {
  from { opacity: 0; transform: translate(40px, 28px) scale(.82); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes contactBubbleFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6px, -10px) scale(1.03); }
}

/* BOTTOM BANNER */
.bottom-banner {
  width: 100%;
  background: #ffb964;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  padding: 40px 20px 32px;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
}

.banner-block { max-width: 30%; text-align: center; }

.bottom-banner .copyright {
  display: block;
  width: 100%;
  margin-top: 32px;
  text-align: center;
  font-size: .85rem;
  letter-spacing: .08em;
  opacity: .8;
}

.bottom-banner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 4px;
  background: rgba(255,100,50,.9);
  pointer-events: none;
  z-index: -1;
}

/* GLOBAL PAUSE */
html.paused *,
html.paused *::before,
html.paused *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .cinema-layout,
  .production-layout,
  .contact-layout { flex-direction: column; align-items: center; }

  .cinema-player,
  .production-player { width: 100%; max-width: 640px; }

  .under-carousel-text { transform: none; margin-inline: auto; }

  .contact-box { width: 100%; max-width: 640px; }
}

@media (max-width: 768px) {
  section:not(#home-section)::before {
    top: -2px;
    height: calc(clamp(100px, 18vw, 180px) + 4px);
  }

  section:not(#home-section) { padding-top: 120px; }

  :root {
    --hero-carousel-width: 100%;
    --hero-carousel-offset-top: 0px;
    --hero-carousel-offset-bottom: 24px;
  }

  #home-section { overflow-x: hidden; }

  body.home-text-active,
  html.home-text-active {
    overflow: hidden;
    height: 100%;
  }

  #home-text-section {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    padding: 8vh 16px 10vh;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
    background: transparent;
  }

  #home-text-section .content-block { font-size: 1.05rem; line-height: 1.5; }

  #logoBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(72vw, 360px);
    height: min(26vh, 180px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 30;
    opacity: 1;
    transition: opacity .3s ease;
  }

  #cineText p:first-child,
  #prodText p:first-child,
  #commText p:first-child {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: justify;
    text-align-last: left;
    -webkit-text-align-last: left;
  }

  #cineText.is-collapsed p:first-child { transform: translateY(-50px); }
  #prodText.is-collapsed p:first-child { transform: translateY(-100px); }
  #commText.is-collapsed p:first-child { transform: translateY(-10px); }

  #cineText.is-collapsed .section-more-wrap { transform: translateY(-40px); }
  #prodText.is-collapsed .section-more-wrap { transform: translateY(-80px); }
  #commText.is-collapsed .section-more-wrap { transform: translateY(-20px); }

  .section-more-wrap { display: flex; justify-content: flex-end; }

  #cineText:not(.is-collapsed) p:first-child,
  #prodText:not(.is-collapsed) p:first-child { transform: none; }

  #cineText:not(.is-collapsed) { transform: translateY(50px); }
  #prodText:not(.is-collapsed) { transform: translateY(50px); }

  .close-video {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10001;
    pointer-events: auto;
  }

  .bottom-banner { justify-content: center; text-align: center; }

  .bottom-banner .banner-block:nth-child(2),
  .bottom-banner .banner-block:nth-child(3) { display: none; }

  .bottom-banner .banner-block { max-width: 100%; }

  .contact-bubble { bottom: 12px; right: 10px; }
  .contact-bubble-btn::before { width: 140px; }

  #cinematography-section .shape-panel { top: 70vh; transform: translate(30vw, -50%); }
  #production .shape-panel { top: 70vh; left: 0; right: auto; transform: translate(-30vw, -50%); }
  #commercial .shape-panel { top: 50vh; right: 0; transform: translate(30vw, -50%); }

  .home-logo-right { display: none; }

  .menu-banner {
    width: 100%;
    left: 0;
    right: 0;
    max-width: none;
    padding: 80px 24px 40px;
  }

  .menu-section { align-items: center; text-align: center; }
  .menu-langs { text-align: center; }
  .menu-contact { transform: none !important; text-align: center; }
  .menu-banner.lang-bubbles-open .menu-contact { transform: none !important; margin-top: 24px; }

  .home-work-link { padding-bottom: 12px; }
  .home-work-link::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid currentColor;
    opacity: 0.85;
  }

  .lang-bubbles { justify-content: center; }

  /* ✅ MOBILE CIRCLE BUTTONS - FIXED POSITIONING */
  .section-clip {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cinema-layout,
  .production-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .cinema-player,
  .production-player {
    order: 1;
  }

  .under-carousel-text {
    order: 2;
  }

  .section-scroll-btn {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 16px auto 0 !important;
    z-index: 999;
    display: none;
    order: 3;
  }

  section.text-collapsed .section-scroll-btn {
    display: flex;
  }

  #cinematography-section .section-scroll-btn,
  #production .section-scroll-btn,
  #commercial .section-scroll-btn {
    bottom: auto !important;
    position: relative !important;
  }

  #contact-section .section-scroll-btn {
    display: flex !important;
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: clamp(48px, 10vh, 96px) auto 0 !important;
    order: initial;
  }

  .section-scroll-btn:hover {
    transform: none !important;
    border-color: #ffffff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  }

  .section-scroll-btn:active {
    transform: none !important;
    opacity: 0.9 !important;
  }
}


@media (min-width: 769px) {
  #commText .contact-bubble { bottom: -42px; z-index: 999; }

  #home-text-section .content-block p {
    opacity: 0;
    transform: translateX(0);
    transition: opacity .6s ease, transform .6s ease;
  }

  #home-text-section .content-block p:nth-child(1),
  #home-text-section .content-block p:nth-child(3) { transform: translateX(-60px); }

  #home-text-section .content-block p:nth-child(2),
  #home-text-section .content-block p:nth-child(4) { transform: translateX(60px); }

  #home-text-section .content-block p:nth-child(1) { transition-delay: 0s; }
  #home-text-section .content-block p:nth-child(2) { transition-delay: .08s; }
  #home-text-section .content-block p:nth-child(3) { transition-delay: .16s; }
  #home-text-section .content-block p:nth-child(4) { transition-delay: .24s; }

  #home-text-section.home-overlay-visible .content-block p {
    opacity: 1;
    transform: translateX(0);
  }

  /* ✅ DESKTOP CONTACT SECTION - RESTORE FIXED POSITIONING */
  #contact-section .section-scroll-btn {
    position: fixed !important;
    left: 50%;
    top: 90vh;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  #contact-section .section-scroll-btn:hover {
    transform: translateX(-50%) scale(1.04) !important;
  }

  #contact-section .section-scroll-btn:active {
    transform: translateX(-50%) scale(0.97) !important;
  }

  #commText .contact-bubble.is-visible {
    bottom: -42px;
  }
}

/* ACCESSIBLE FOCUS STATES */
.contact-bubble-btn:focus-visible,
.section-scroll-btn:focus-visible,
.home-work-link:focus-visible,
.burger:focus-visible,
.menu-section a:focus-visible,
.lang-bubble:focus-visible {
  outline: 2px solid rgba(255,100,50,0.9);
  outline-offset: 3px;
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* PROPORTIONAL SCALING */
@media (min-width: 1280px) and (max-width: 1440px) {
  .section-scroll-btn { width: 50px; height: 50px; }
  .section-scroll-icon { width: 16px; height: 16px; }
  .menu-banner { padding: 54px 26px 60px; }
  .menu-langs { margin-top: 40px; margin-bottom: 18px; }
  .menu-contact { padding-top: 24px; margin-top: 8px; }
  .lang-wrapper { margin-bottom: 18px; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .section-scroll-btn { width: 48px; height: 48px; }
  .section-scroll-icon { width: 15px; height: 15px; }
  .menu-banner { width: 280px; padding: 50px 24px 56px; }
  .menu-section a { font-size: 0.98rem; }
  .menu-langs { margin-top: 36px; margin-bottom: 16px; }
  .lang-wrapper { margin-bottom: 16px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .section-scroll-btn { width: 52px; height: 52px; }
  .menu-banner { width: 300px; }
}

@media (min-width: 1921px) {
  .section-scroll-btn { width: 66px; height: 66px; }
  .section-scroll-icon { width: 20px; height: 20px; }
  .menu-banner { width: 340px; padding: 68px 36px 74px; }
  .menu-section a { font-size: 1.16rem; }
}

@media (min-width: 2561px) {
  .section-scroll-btn { width: 72px; height: 72px; }
  .section-scroll-icon { width: 22px; height: 22px; }
  .menu-banner { width: 380px; }
  .under-carousel-text { font-size: 1.1rem; }
  .contact-box { font-size: 1.1rem; }
}

/* separator line */
@media (min-width: 320px) {
  .menu-langs {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .menu-contact { padding-top: 24px; }
}

@media (min-width: 1024px) and (max-width: 1440px) {
  .menu-langs { margin-bottom: 28px; }
  .menu-contact { padding-top: 28px; }
}