/* === Deutrino mobile.css (<=768px) — clean patch === */
:root{ --bg:#0b0d10; --fg:#e6e8eb; --accent:#4aa3ff; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
/* Remove the dark base colour from the root so the page background doesn't show a dark overlay. */
html,body{ margin:0; padding:0; background:transparent; color:var(--fg) }
body{ min-height:100dvh; min-height:100svh; font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial }

/* --- Stage background --- */
.stage{ position:fixed; inset:0; z-index:-1; opacity:1 }
.stage img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  /* Dim the page background slightly (10% darker) without affecting bubbles or other panels */
  filter: brightness(0.9);
}

/* --- Top banner: transparent, 3 lines visible, rest scroll --- */
.top-center-banner{
  position:fixed; top:calc(env(safe-area-inset-top,0) + 0px); left:50%; transform:translateX(-50%);
  width:min(96vw,800px); padding:8px 12px; background:transparent; border:none; z-index:300;
  text-align:center; max-height:calc(1.2em*15 + 20px); overflow:auto;
}
.top-center-banner .first-line{
  display:block; font-weight:900; color:#fff;
  text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 6px rgba(0,0,0,.6);
  font-size:clamp(18px,5.2vw,26px); line-height:1.2;
}
.top-center-banner .sub-text{
  display:block; margin-top:3px; font-weight:800; color:#fff;
  text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px rgba(0,0,0,.5);
  font-size:clamp(11px,3.5vw,14px); line-height:1.2;
}

/* Hide desktop big bubbles */
.bubble.zui--big{ display:none !important }

/* --- Always-clickable UI --- */
.zui--utility{
  position:fixed; z-index:580; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); pointer-events:auto;
}
.zui--utility.home-btn{
  /* Position the home button along the bottom row as the fourth icon */
  bottom:calc(env(safe-area-inset-bottom,0) + 12px);
  left:180px;
  background:url('https://deutrino.eu/assets/img/home.jpg') center/cover no-repeat;
}
.zui--utility.contact-btn{
  /* Place contact button third from left on the bottom row */
  bottom:calc(env(safe-area-inset-bottom,0) + 12px);
  left:124px;
  background:url('https://deutrino.eu/assets/img/contact.jpg') center/cover no-repeat;
}
.zui--utility.pdf-btn{
  /* Position PDF button second from left on the bottom row */
  bottom:calc(env(safe-area-inset-bottom,0) + 12px);
  left:68px;
  background:url('https://deutrino.eu/assets/img/pdf.jpg') center/cover no-repeat;
}

/* --- Hamburger (top-left) --- */
.mobile-menu-bubble{
  position:fixed;
  bottom:calc(env(safe-area-inset-bottom,0) + 12px);
  left:12px;
  width:44px;
  height:44px;
  border-radius:50%;
  /* Semi-transparent dark background for hamburger to stand out on varied backdrops */
  background:rgba(0,0,0,.6);
  color:#fff;
  z-index:600;
  pointer-events:auto;
  /* Stack the icon and label vertically so both appear within the bubble */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Style the icon and label inside the menu bubble */
.mobile-menu-bubble .icon{
  font-size:22px;
  line-height:1;
}
.mobile-menu-bubble .label{
  margin-top:2px;
  font-size:11px;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}

/* Add labels under the remaining mobile controls */
.zui--utility.pdf-btn::after{
  content:'PDF';
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, 2px);
  font-size:11px;
  color:#fff;
  white-space:nowrap;
}
.zui--utility.contact-btn::after{
  content:'Contact';
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, 2px);
  font-size:11px;
  color:#fff;
  white-space:nowrap;
}
.zui--utility.home-btn::after{
  content:'Home';
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, 2px);
  font-size:11px;
  color:#fff;
  white-space:nowrap;
}
.mobile-dropdown{
  position:fixed;
  top:72px;
  left:12px;
  right:12px;
  min-width:240px;
  max-height:60vh;
  overflow:auto;
  display:none;
  /* Restore a slightly translucent dark panel behind the dropdown list to aid legibility. */
  background:rgba(10,14,22,.96);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  z-index:590;
}
.mobile-dropdown.show{ display:block }
.mobile-dropdown a{
  display:block; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08);
  color:#dbe9ff; text-decoration:none;
}
.mobile-dropdown a:last-child{ border-bottom:0 }

/* --- Video bubble (50% smaller, ignore inline pos/size) --- */
.bubble.js-video-bubble{
  position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  display:block; margin:calc(3.8em + 14px) auto 10px auto !important;
  /* Enlarge the video bubble by roughly 30% */
  width:min(45vw,156px) !important;
  height:min(45vw,156px) !important;
  border-radius:50% !important; overflow:hidden !important;
  /* Remove the dark tint from the video bubble so the underlying GIF is fully visible.  We
     explicitly set background-position/size/repeat and leave the color transparent. */
  /* Restore the dark base colour so the play icon remains visible over various
     backgrounds; the inline style continues to provide the GIF image. */
  background: #111 center/cover no-repeat;
  z-index: 110;
}
.bubble.js-video-bubble .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:28px }

/* --- Bottom text panel: transparent, bold white, 5 lines visible --- */
#videoDescription{
  position:fixed; left:50%; transform:translateX(-50%);
  /* Move the description panel higher on the screen (~2 cm up). 80 px better approximates 2 cm on most devices. */
  bottom:calc(env(safe-area-inset-bottom, 0) + 80px);
  width:min(94vw,700px);
  background:transparent;
  border:none;
  color:#fff;
  font-weight:800;
  line-height:1.4;
  padding:8px 10px;
  z-index:200;
  max-height:calc(1.4em * 5 + 16px);
  overflow:auto;
  /* Center the text within the panel */
  text-align:center;
}

/* --- Contact form (mobile sizing) --- */
#contact, .contact, .contact-wrap, .contact-container{
  position:relative; z-index:350; margin:calc(3.8em + 16px) auto 14px auto; padding:12px;
  width:min(96vw,720px);
  /* Remove dark panel behind the contact form.  Only a subtle border remains so the
     underlying page background is unobstructed. */
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
}
#contact h1, .contact h1{
  margin:0 0 8px 0;
  /* Reduce the contact page heading size by half to make the text less dominant on mobile */
  font-size:9px;
  line-height:1.2;
}
form, .contact form{ display:block; width:100% }
label{ display:block; margin:10px 0 6px 2px; font-size:12px; opacity:.9 }
input[type="text"], input[type="email"], input[type="tel"], textarea, select{
  width:100%; min-height:44px; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  /* Lighten input backgrounds and allow the page to show through with very low opacity. */
  background:rgba(0,0,0,.15);
  color:#fff;
  font:14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
textarea{ min-height:120px; resize:vertical }
button, input[type="submit"]{
  display:inline-block; min-height:44px; padding:10px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  /* Maintain a hint of color for call-to-action buttons while keeping them lightweight. */
  background:rgba(80,140,220,.25);
  color:#fff; font-weight:800; font-size:14px; cursor:pointer; margin-top:10px;
}
button:active, input[type="submit"]:active{ transform:scale(.98) }

/* --- Video overlay: transparent and no close button on mobile --- */
.video-overlay{ position:fixed; inset:0; background:transparent !important; display:none; z-index:700 }
.video-overlay.active{ display:block }
.video-overlay__player{ position:absolute; inset:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0) 0 }
.video-overlay__player iframe{ width:100%; height:100%; border:0; display:block }
.video-overlay__close{ display:none !important }
.video-overlay__caption{ display:none }