/* ==========================================================================
   ABOUT — Bilingual nav (EN / DE) using Owl's built-in nav
   Requirements:
     - JS: init #about-carousel with:
         nav: true,
         navText: ['EN','DE'],
         navContainer: '.owl-nav-custom-about',
         dots: false
     - HTML: keep <div class="owl-nav owl-nav-custom-about"></div> in the left column
   ========================================================================== */

/* 1) Unhide Owl nav for About (template hides it elsewhere) */
/* Unhide About nav */
#about #about-carousel .owl-nav { display: block !important; }
#about #about-carousel .owl-dots { display: none !important; }

/* Place nav in the left column bottom-left */
#about .post-block { position: relative; }
.owl-nav-custom-about{
  position: absolute;
  left: 20px;         /* nudge as you like (16–24px) */
  bottom: 18px;       /* align with baseline in the box */
  display: flex;
  align-items: center;
  justify-content: center;      /* centers EN + DE within this container */
  gap: 14px;
}

/* neutralize global Owl “boxed arrows” ONLY here */
.owl-nav-custom-about .owl-prev,
.owl-nav-custom-about .owl-next{
  position: static !important;  /* cancel absolute L/R from theme */
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .08em;
  color: #bdda0f !important;    /* orange */
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}
.owl-nav-custom-about .owl-prev:hover,
.owl-nav-custom-about .owl-next:hover{
  color: #cc5200 !important;    /* hover orange */
  transform: translateY(-1px);
}


/* Space so the absolute nav doesn’t overlap text in the right column */
#about .post-content.post-content-correction-about { padding-bottom: 48px; }
@media (max-width: 767px) {
  .owl-nav-custom-about { bottom: 14px; gap: 10px; }
  #about .post-content.post-content-correction-about { padding-bottom: 40px; }
}

/* Anchor the left column so the nav sits inside it */
#about .post-block { position: relative; }

/* Put EN/DE bottom-left INSIDE that column */
.owl-nav-custom-about{
  position: absolute;
  left: 0;            /* nudge if needed: 10–16px */
  bottom: 22px;       /* match original arrows’ baseline */
  display: inline-flex;
  gap: 12px;
  z-index: 5;
}

/* Make sure labels actually show and look right */
#about #about-carousel .owl-nav { display: block !important; }
#about #about-carousel .owl-dots { display: none !important; }
.owl-nav-custom-about .owl-prev,
.owl-nav-custom-about .owl-next{
  background: transparent; border: 0; padding: 4px 8px; margin: 0;
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: .08em; color: #bdda0f; cursor: pointer;
}
.owl-nav-custom-about .owl-prev:hover,
.owl-nav-custom-about .owl-next:hover{ color:#111; transform: translateY(-1px); }

/* ABOUT: neutralize global Owl arrow box styles just for our custom nav */
.owl-nav-custom-about .owl-prev,
.owl-nav-custom-about .owl-next {
  position: static;         /* cancel absolute positioning from template */
  width: auto;              /* remove 56x56 square */
  height: auto;
  line-height: 1;
  padding: 4px 8px;         /* small tap target */
  border: none;
}

/* === ABOUT: EN / DE nav — strip boxes & center === */

/* place the group bottom-left INSIDE the left column box */
#about .post-block { position: relative; }
.owl-nav-custom-about{
  position: absolute;
  left: 0;
  bottom: 18px;                 /* tweak to your taste */
  display: flex;
  justify-content: center;      /* center the pair within the container */
  align-items: center;
  gap: 16px;
  width: 120px;                 /* <- optional: set a fixed area to center within */
}

/* kill the global Owl button boxes here only */
.owl-nav-custom-about .owl-prev,
.owl-nav-custom-about .owl-next,
.owl-nav-custom-about .owl-prev span,
.owl-nav-custom-about .owl-next span{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  border-radius: 0 !important;
}

/* type styles (IBM Plex Sans + orange) */
.owl-nav-custom-about .owl-prev,
.owl-nav-custom-about .owl-next{
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .08em;
  color: #bdda0f;               /* orange */
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}
.owl-nav-custom-about .owl-prev:hover,
.owl-nav-custom-about .owl-next:hover{
  color: #cc5200;
  transform: translateY(-1px);
}
/* === About Section Language Nav Fix === */
.owl-nav-custom-about {
  position: absolute;
  bottom: 20px;      /* pull up inside the box */
  left: 20px;        /* align with box padding */
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  align-items: center;
  font-family: 'IBM Plex Sans', sans-serif !important;
}

.owl-nav-custom-about button {
  background: none !important;
  border: none !important;
  font-size: 18px;
  font-weight: 600;
  color: #ff6600 !important; /* orange */
  cursor: pointer;
  padding: 0;
  line-height: 1;
  text-transform: uppercase;
}

.owl-nav-custom-about button:hover {
  color: #ffa366 !important; /* lighter orange on hover */
}

/* remove any default Owl arrow space */
.owl-nav-custom-about .owl-prev,
.owl-nav-custom-about .owl-next {
  margin: 0 !important;
}

/* === FINAL ABOUT LANG NAV FIX (wins over base theme) === */

/* place EN/DE bottom-left INSIDE the left column */
#about .owl-nav-custom-about{
  position: absolute !important;
  left: 20px !important;
  bottom: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: auto !important;
  height: auto !important;
  z-index: 5;
}

/* kill the theme's arrow “boxes” drawn with :before */
#about .owl-nav-custom-about .owl-prev:before,
#about .owl-nav-custom-about .owl-next:before{
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* make the actual labels look right (IBM Plex Sans + orange) */
#about .owl-nav-custom-about .owl-prev,
#about .owl-nav-custom-about .owl-next{
  position: static !important;       /* cancel absolute buttons */
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  letter-spacing: .08em !important;
  color: #ff5a20 !important;         /* orange */
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}
#about .owl-nav-custom-about .owl-prev:hover,
#about .owl-nav-custom-about .owl-next:hover{
  color: #cc5200 !important;
  transform: translateY(-1px);
}

/* ensure the nav actually renders (the base CSS hid it earlier) */
#about #about-carousel .owl-nav{ display:block !important; }
#about #about-carousel .owl-dots{ display:none !important; }

@font-face{
  font-family: 'IBM Plex Sans';
  src:
    url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'),
    url('../fonts/IBMPlexSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'IBM Plex Sans';
  src:
    url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
    url('../fonts/IBMPlexSans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Apply to EN/DE */
#about .owl-nav-custom-about .owl-prev,
#about .owl-nav-custom-about .owl-next{
  font-family: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
}

/* ABOUT: stop inner scrolling that triggers parallax */
#about .post-block-second {
  overflow: visible !important;     /* was overflow-y:auto */
  max-height: none !important;      /* remove the 255px cap */
}

/* if any child forced scrolling, neutralize it too */
#about .post-content.post-content-correction-about,
#about .post-inner {
  overflow: visible !important;
  max-height: none !important;
}

/* give the right column some breathing room if you removed the cap */
#about .post-content.post-content-correction-about {
  padding-bottom: 48px;             /* space for EN/DE row etc. */
}

/* ===== CONTACT (services middle column) overrides ===== */

/* Scope everything to the services section form so nothing else breaks */
#services #contact-form {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kill any extra spacing block in the template */
#services #contact-form .make-space {
  margin-top: 10px !important;   /* was large; keep a little breathing room */
}

/* Inputs & textarea: black text, black bottom border */
#services #contact-form input[type="text"],
#services #contact-form input[type="email"],
#services #contact-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 2px solid #000 !important;
  color: #000 !important;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

/* Focus state: keep it crisp and black */
#services #contact-form input:focus,
#services #contact-form textarea:focus {
  border-bottom-color: #000 !important;
  box-shadow: none !important;
}

/* Placeholder: neutral gray across browsers */
#services #contact-form input::placeholder,
#services #contact-form textarea::placeholder { color: #9aa0a6; opacity: 1; }
#services #contact-form input::-webkit-input-placeholder,
#services #contact-form textarea::-webkit-input-placeholder { color: #9aa0a6; }
#services #contact-form input:-ms-input-placeholder,
#services #contact-form textarea:-ms-input-placeholder { color: #9aa0a6; }
#services #contact-form input::-ms-input-placeholder,
#services #contact-form textarea::-ms-input-placeholder { color: #9aa0a6; }

/* Make the “Submit” button smaller + modern (override template’s .fullwidth) */
#services #contact-form .c-btn.fullwidth {
  width: auto !important;                 /* undo full-width */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 10px 16px !important;          /* smaller */
  font-size: 20px;
  letter-spacing: .02em;
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #222 !important;
  border-radius: 9999px;                  /* pill */
  line-height: 1.1;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

#services #contact-form .c-btn.fullwidth:hover {
  background: #000 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

#services #contact-form .c-btn.fullwidth:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Optional: tighten column gutters a touch on small screens so it fits without scrolling */
@media (max-width: 991px) {
  #services #contact-form .col-sm-4,
  #services #contact-form .col-md-4,
  #services #contact-form .col-lg-4 {
    margin-bottom: 12px;
  }
}

/* === Contact form polish (overrides) === */

/* 1) Darker gray placeholders */
#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: rgba(180, 180, 180, 0.95) !important; /* a bit darker */
}
/* cross-browser fallbacks */
#contact-form input::-webkit-input-placeholder,
#contact-form textarea::-webkit-input-placeholder { color: rgba(180,180,180,.95) !important; }
#contact-form input:-ms-input-placeholder,
#contact-form textarea:-ms-input-placeholder { color: rgba(180,180,180,.95) !important; }
#contact-form input::-ms-input-placeholder,
#contact-form textarea::-ms-input-placeholder { color: rgba(180,180,180,.95) !important; }

/* 2) Input underline: switch to black */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="subject"],
#contact-form textarea {
  border: none !important;
  border-bottom: 2px solid #000 !important;
  background: transparent !important;
  color: #eee; /* keep typed text readable on dark */
  outline: none;
}
#contact-form textarea { resize: vertical; }

/* 4) Trim top spacing so the form doesn't cause an extra scroll */
.post-content-correction-services,
#contact-form {
  margin-top: 0 !important;
  padding-top: 10px !important;
}
.post-content-correction-services .make-space { height: 0 !important; } /* template uses this spacer */

/* ===== CONTACT form (services middle column) ===== */

/* 1) Placeholders: a bit darker */
#contact-form input::placeholder,
#contact-form textarea::placeholder { color:#666 !important; opacity:1; }
#contact-form input::-webkit-input-placeholder,
#contact-form textarea::-webkit-input-placeholder { color:#666 !important; }
#contact-form input::-ms-input-placeholder,
#contact-form textarea::-ms-input-placeholder { color:#666 !important; }
#contact-form input:-ms-input-placeholder,
#contact-form textarea:-ms-input-placeholder { color:#666 !important; }

/* 2) Inputs: black underline + readable text */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="subject"],
#contact-form textarea{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #000 !important;
  color: #111 !important;
  outline: none !important;
  box-shadow: none !important;
}
#contact-form textarea{ resize: vertical; min-height: 120px; }

/* 3) FIX: message field vanished because a spacer wrapper was collapsed.
      The textarea lives inside .make-space in your HTML. Restore it. */
#contact-form .make-space{
  height: 60% !important;
  margin-top: 12px !important;
}


/* 5) Kill the extra vertical padding/margins in the SERVICES columns
      (this is what keeps forcing the page to scroll). */
#services .post-content-correction-services{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin-bottom: 0 !important;
}
#services .post-inner{ margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* ===== Services → Contact form: 2-column layout, no extra scroll ===== */

/* A) Remove the 3rd column (the “Brand Identity” text block) from Services */
#services-lifting .owl-item .post-block-second > .col-md-6.col-lg-6.post-block-correction:last-child {
  display: none !important; /* hides the right-hand content column */
}
/* Let the remaining column use the full width inside the slide */
#services-lifting .owl-item .post-block-second > .col-md-6.col-lg-6.post-block-correction:first-child {
  width: 100% !important;
  float: none !important;
}

/* B) Make the form a clean 2-column grid on tablet/desktop */
#services #contact-form #form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  align-items: start;
}

/* Kill Bootstrap column widths/floats inside the form so grid can take over */
#services #contact-form #form > div {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Left column = Name, Email, Subject (the first three DIV children) */
#services #contact-form #form > div:nth-of-type(1),
#services #contact-form #form > div:nth-of-type(2),
#services #contact-form #form > div:nth-of-type(3) {
  grid-column: 1;
}

/* Right column = Message (make-space) and Submit (the last div) */
#services #contact-form #form > .make-space,
#services #contact-form #form > div:last-child {
  grid-column: 2;
}

/* Input & textarea styling (black underline, darker placeholders) */
#services #contact-form input[type="text"],
#services #contact-form input[type="email"],
#services #contact-form input[type="subject"],
#services #contact-form textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #000 !important;
  color: #111 !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
}
#services #contact-form textarea { min-height: 180px; resize: vertical; }
#services #contact-form input::placeholder,
#services #contact-form textarea::placeholder { color:#666 !important; opacity:1; }
#services #contact-form input::-webkit-input-placeholder,
#services #contact-form textarea::-webkit-input-placeholder { color:#666 !important; }
#services #contact-form input::-ms-input-placeholder,
#services #contact-form textarea::-ms-input-placeholder { color:#666 !important; }



/* Tighten the service slide’s padding/margins so the section doesn’t force a scroll */
#services .post-content-correction-services { padding: 6px 0 !important; margin: 0 !important; }
#services .post-inner { margin: 0 !important; padding: 0 !important; }

/* Make Owl’s container auto-size to the new (shorter) content */
#services #services-carousel .owl-stage-outer { height: auto !important; }

/* Mobile: stack to one column */
@media (max-width: 767.98px) {
  #services #contact-form #form { grid-template-columns: 1fr; }
  #services #contact-form #form > * { grid-column: 1 !important; }
}

/* === Services → Contact form: fix gap + stop scroll === */

/* 0) Ensure we're styling the contact form inside Services */
#services #contact-form #form{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 14px 24px;
  align-items: start;
}

/* 1) Remove the spacer margin that created the large gap */
#services #contact-form .make-space{
  margin-top: 0 !important;
  height: auto !important;
}

/* 2) Explicit grid placement so fields don’t “flow” into later rows */
#services #contact-form #form > div:nth-of-type(1){ grid-column:1; grid-row:1; } /* Name */
#services #contact-form #form > div:nth-of-type(2){ grid-column:1; grid-row:2; } /* Email */
#services #contact-form #form > div:nth-of-type(3){ grid-column:1; grid-row:3; } /* Subject */

#services #contact-form #form > .make-space{       /* Message wrapper */
  grid-column:2; 
  grid-row:1 / span 3;                             /* start at top, span down */
}
#services #contact-form #form > div:last-child{    /* Submit button wrapper */
  grid-column:2; 
  grid-row:4; 
}

/* 3) Input/textarea visuals (unchanged intent) */
#services #contact-form input[type="text"],
#services #contact-form input[type="email"],
#services #contact-form input[type="subject"],
#services #contact-form textarea{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #000 !important;
  color: #111 !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
}
#services #contact-form textarea{ min-height: 180px; resize: vertical; }
#services #contact-form input::placeholder,
#services #contact-form textarea::placeholder{ color:#666 !important; opacity:1; }

/* 5) Trim the slide’s padding/margins and let Owl auto-size */
#services .post-content-correction-services{ padding: 6px 0 !important; margin: 0 !important; }
#services .post-inner{ margin: 0 !important; padding: 0 !important; }
#services #services-carousel .owl-stage-outer{ height: auto !important; overflow: visible !important; }

/* Mobile: stack to one column */
@media (max-width: 767.98px){
  #services #contact-form #form{ grid-template-columns: 1fr; }
  #services #contact-form #form > *{ grid-column: 1 !important; grid-row: auto !important; }
}

/* ===== SERVICES → CONTACT (final tidy) ===== */



/* --- Contact form: breathing room + tidy grid --- */
#services .contact-form-wrapper {
  padding: 16px 0 8px !important;
  margin: 0 !important;
}

#services #contact-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;            /* looser gap so fields aren't pressed */
  align-items: start;
}

#services #contact-form .form-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Inputs & textarea */
#services #contact-form input,
#services #contact-form textarea {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #000 !important;
  padding: 8px 4px !important;
  color: #111 !important;
  outline: none !important;
  box-shadow: none !important;
}
#services #contact-form textarea { min-height: 180px; resize: vertical; }

/* Darker placeholders */
#services #contact-form input::placeholder,
#services #contact-form textarea::placeholder { color: #666 !important; opacity: 1; }


/* Section spacing so the form isn't glued to the title */
#services .post-content-correction-services,
#services .post-inner { padding-top: 10px !important; }

/* Mobile: stack */
@media (max-width: 767.98px){
  #services #contact-form { grid-template-columns: 1fr; }
}

/* QUICK FIX: hide the leftover Brand Identity column that’s breaking layout */
#services .post-block-services { display: none !important; }

/* ===== Panel Video Play Overlay ===== */
/* removed per revert */
.credits-video-wrapper { position: relative; }
/* Limit video-specific styling to wrappers marked as .video-box */
.credits-video-wrapper.video-box,
.credits-video-wrapper.video-box video { border: 0 !important; outline: none !important; }
.credits-video-wrapper.video-box.poster-active { background-color:#000; background-position:center center; background-repeat:no-repeat; background-size: contain; }
.credits-video-wrapper.video-box.poster-active video{ opacity: 0 !important; }
.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* avoid faint edges over rounded container */
  transition: opacity .18s ease;
  cursor: pointer;
  z-index: 3;
  opacity: 0;               /* hidden by default */
  pointer-events: none;      /* only interactive on hover */
}
.video-overlay { border:0; outline: none; -webkit-appearance:none; appearance:none; }
.video-overlay:focus { outline: none; }
.credits-video-wrapper:hover .video-overlay { opacity: 1; pointer-events: auto; }
.video-overlay.is-hidden { opacity: 0 !important; pointer-events: none !important; }
.video-overlay__icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px var(--neon);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.video-overlay__icon { position: relative; }
.video-overlay__icon::before {
  content: ""; display: block; width: 0; height: 0;
  border-left: 20px solid var(--neon);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}
/* Pause icon when playing */
.video-overlay.is-playing .video-overlay__icon::before,
.video-overlay.is-playing .video-overlay__icon::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 8px; height: 24px; background: var(--neon); border: 0;
}
.video-overlay.is-playing .video-overlay__icon::before { left: 22px; }
.video-overlay.is-playing .video-overlay__icon::after  { left: 38px; }
.video-overlay:hover .video-overlay__icon {
  background: rgba(0,0,0,0.7);
  transform: scale(1.06);
  box-shadow: 0 0 16px var(--neon), 0 0 26px rgba(189,218,15,.35);
}

/* Poster background for video wrappers */
.credits-video-wrapper.video-box.poster-active {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

/* ===== Works-4 Flow Gallery ===== */
.flow-gallery-container{ height:100%; display:flex; align-items:center; justify-content:center; padding: 24px 16px; }
.panel-right-credits .flow-gallery{ width:100%; max-width: 980px; height: 70vh; }
.flow-gallery .swiper-wrapper{ align-items: center; }
.flow-gallery .swiper-slide{ width: 74% !important; max-width: 980px; height: 100%; display:flex; align-items:center; justify-content:center; }
@media (max-width: 1199.98px){ .flow-gallery .swiper-slide{ width: 80% !important; } }
@media (max-width: 767.98px){ .flow-gallery .swiper-slide{ width: 92% !important; } }
/* Make partial neighbors de-emphasized but clickable */
.panel-right-credits .flow-gallery .swiper-slide{ opacity: .5 !important; transition: opacity .2s ease; cursor: pointer; }
.panel-right-credits .flow-gallery .swiper-slide.swiper-slide-active{ opacity: 1 !important; cursor: default; }
/* Let side partials receive clicks (active often overlays neighbors);
   disable pointer events on the active slide so underlying partials are clickable. */
.panel-right-credits .flow-gallery .swiper-slide.swiper-slide-active{ pointer-events: none; }
.panel-right-credits .flow-gallery .swiper-slide:not(.swiper-slide-active){ pointer-events: auto; }
.flow-gallery .swiper-slide img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.flow-gallery .swiper-slide video{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; border-radius:6px; display:block; background:#000; }
.flow-gallery .swiper-slide picture{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.flow-gallery .swiper-button-prev,
.flow-gallery .swiper-button-next{ color:#fff; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 22px; background-color: rgba(0,0,0,.35); transition: background-color .2s ease, transform .2s ease; }
.flow-gallery .swiper-button-prev:hover,
.flow-gallery .swiper-button-next:hover{ background-color: rgba(0,0,0,.55); transform: scale(1.06); }
.flow-gallery .swiper-button-prev:after,
.flow-gallery .swiper-button-next:after{ font-size: 18px; }
.flow-gallery .swiper-pagination{ bottom: 14px !important; }
.flow-gallery .swiper-pagination-bullet{ background:#fff; opacity:.4; }
.flow-gallery .swiper-pagination-bullet-active{ opacity:1; }

/* Desktop: show arrows; Mobile: hide arrows to keep UI clean */
@media (max-width: 991.98px){
  .flow-gallery .swiper-button-prev,
  .flow-gallery .swiper-button-next{ display:none; }
  /* Force-hide built-in arrows on mobile even if globally forced visible */
  .panel-right-credits .flow-gallery .swiper-button-prev,
  .panel-right-credits .flow-gallery .swiper-button-next{ display:none !important; }
}
/* Force arrows visible on desktop regardless of theme defaults */
.panel-right-credits .flow-gallery .swiper-button-prev,
.panel-right-credits .flow-gallery .swiper-button-next{ display:block !important; }

/* Custom nav buttons: always visible on desktop */
.flow-gallery-container .flow-nav{ position:absolute; top:50%; transform: translateY(-50%); z-index:5; width:44px; height:44px; border-radius:22px; border:0; background: rgba(0,0,0,.35); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition: background-color .2s ease, transform .2s ease; }
.flow-gallery-container .flow-prev{ left: 12px; }
.flow-gallery-container .flow-next{ right: 12px; }
.flow-gallery-container .flow-nav:hover{ background: rgba(0,0,0,.55); transform: translateY(-50%) scale(1.06); }
@media (max-width: 991.98px){ .flow-gallery-container .flow-nav{ display:none; } }

/* Make partial slides clickable: ensure active slide doesn't block pointer */
.panel-right-credits .flow-gallery .swiper-slide.swiper-slide-active{ pointer-events: none !important; }
.panel-right-credits .flow-gallery .swiper-slide:not(.swiper-slide-active){ pointer-events: auto !important; }

/* Flow gallery per-slide loader overlay */
.flow-gallery .swiper-slide{ position: relative; }
.flow-gallery .flow-loader{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.15);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  border-radius: 6px; /* match slide media radius */
  z-index: 2;
}
.flow-gallery .swiper-slide.is-loading .flow-loader{ opacity: 1; visibility: visible; }
.flow-gallery .swiper-slide.is-loaded .flow-loader{ opacity: 0; visibility: hidden; }

/* ===== Preloader: Dots Loader ===== */
.dots-loader{ display:inline-flex; gap:10px; }
.dots-loader:before,
.dots-loader:after{
  content:""; height:20px; aspect-ratio:1; border-radius:50%;
  background:
    linear-gradient(#222 0 0) top/100% 40% no-repeat,
    radial-gradient(farthest-side,#000 95%,#0000) 50%/8px 8px no-repeat #fff;
  animation: dots-pulse 1.5s infinite alternate ease-in;
}

/* ===== Overlay Card for Left Panels ===== */
.panel-left-credits{ position: absolute; }
.overlay-card{
  position: absolute;
  left: 18px; bottom: 145px;
  max-width: min(68%, 520px);
  padding: 12px 14px 12px 14px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45)) padding-box,
    radial-gradient(120% 140% at 0% 0%, rgba(189,218,15,.9), rgba(34,34,34,.2)) border-box;
  border: 1px solid transparent;
  border-radius: 5px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform: translateY(12px);
  opacity: 1;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
  z-index: 3;
}
.overlay-card:hover{ transform: translateY(8px); }
.overlay-eyebrow{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.85;
  color:#bdda0f; margin-bottom:6px;
}
.overlay-card h5{ margin:0; font: 400 15px/1.3 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.panel-left-credits.open .overlay-card{ transform: translateY(0); }
@media (max-width: 991.98px){
  .overlay-card{ max-width: 86%; left: 14px; right: 14px; }
}
@keyframes dots-pulse{
  0%,70%{ background-size:100% 40%,8px 8px }
  85%   { background-size:100% 120%,8px 8px }
  100%  { background-size:100% 40%,8px 8px }
}

/* ===== Right Panel Text Reveal (wipe) ===== */
.panel-right-credits .text-title,
.panel-right-credits .text-txt{
  position: relative;
  overflow: hidden;           /* hide the wipe overlay as it exits */
  opacity: 0;                 /* fade in in sync with wipe */
  transition: opacity .6s ease;
}
.panel-right-credits .text-title::before,
.panel-right-credits .text-txt::before{
  content: "";
  position: absolute;
  inset: 0;                   /* cover full element */
  background: #000;           /* same as right panel background */
  transform-origin: left center;
  transform: scaleX(1);       /* start fully covered */
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
  z-index: 1;                 /* sit above text to hide it */
}
.panel-right-credits.open .text-title{ opacity: 1; transition-delay: .15s; }
.panel-right-credits.open .text-txt{   opacity: 1; transition-delay: .45s; }
.panel-right-credits.open .text-title::before{ transform: scaleX(0); transition-delay: .05s; }
.panel-right-credits.open .text-txt::before{   transform: scaleX(0); transition-delay: .35s; }

/* ===== Works Right Panels — Center Bottom Badge with Sheen ===== */
.panel-right-credits .work-badge{
  position:absolute; left:50%; transform:translateX(-50%);
  /* Lift above the bottom nav bar */
  bottom: 164px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.85);
  border: 1px solid rgba(255,255,255,.25);
  color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.5);
  font: 600 13px/1.2 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px;
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events:none;  /* do not block galleries/videos */
  z-index: 9999;
}
.panel-right-credits .work-badge::before{
  content:""; position:absolute; inset:-2px; border-radius:999px;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  transform: translateX(-140%);
  animation: badge-shine 3.2s linear infinite;
  opacity:.55;
}
@keyframes badge-shine{
  0%{ transform: translateX(-140%); }
  100%{ transform: translateX(140%); }
}
@media (max-width: 991.98px){ .panel-right-credits .work-badge{ bottom: 156px; padding: 7px 14px; font-size:12px; } }
/* Demo placement for reveal text on right panels */
/* remove reveal-demo placeholder styles */

/* Contact form grid alignment */
#services #contact-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px; /* horizontal gap wider for breathing space */
  align-items: start; /* don't stretch weirdly */
}

/* Inputs column */
#services #contact-form .form-col:first-child input {
  min-height: 48px; /* ensure consistent field height */
}

/* Textarea column */
#services #contact-form textarea {
  min-height: 168px;            /* enough height for message */
  flex-grow: 1;                 /* stretch to align with left column */
  display: block;
  margin-bottom: 5px;          /* leave space before button */
}

/* Submit button: always visible */
#services #contact-form #submit.c-btn {
  align-self: flex-start;        /* keeps it below textarea */
  margin-top: 0px;              /* pushes it down neatly */
  padding: 0px 0px !important;

  
  background: transparent !important;
  color: #000 !important;
  font-size: 14px;
  font-weight: 500 !important;
  visibility: visible !important;
  border: 0 !important;
  border-bottom: 2px solid #ff8a00 !important;
  opacity: 1 !important;
}
#services #contact-form #submit.c-btn:hover {
  background: transparent !important;
  border-bottom: 4px solid #ff8a00 !important;
  color: #ff8a00 !important;
}

/* Force the two columns to balance height */
#services #contact-form .form-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Works section eye icon */
.icon-works .eye-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;               /* icon color */
  background: transparent;     /* no fill */
  border: 2px #fff;     /* white outline */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.icon-works .eye-icon:hover {
  background: transparent; 
  border-color: #bdda0f;       /* orange outline on hover */
  color: #bdda0f;              /* match icon color on hover */
}

/* bottom social icons aligned with bottom navigation */
.bottom-social-icons {
  position: absolute;
  right: 30px;              /* stick to the right edge */
  bottom: 0;                /* align with nav bar bottom */
  height: 40px;             /* same height as your nav bar (adjust if needed) */
  display: flex;
  align-items: center;      /* vertical centering inside that height */
}

.bottom-social-icons .social-icons {
  display: flex;
  gap: 14px;                /* space between icons */
  margin: 0;
  padding: 0;
  list-style: none;
}

.bottom-social-icons .social-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.bottom-social-icons svg {
  color: #fff;
  width: 22px;
  height: 22px;
  transition: color 0.3s ease;
}

.bottom-social-icons svg:hover {
  color: #ff5a20;           /* your brand hover colour */
}

/* --- Top bar: set to 60px --- */
.border-top { height: 60px !important; } /* was 50px in base CSS */

/* Consistent top bar height */
.border-top { height: 60px !important; }

/* Container: collapsed shows only active, expands on hover */
.languages{
  position:absolute; top:0; right:26px;
  height:60px !important;
  width:36px;                    /* width of one code */
  overflow:hidden;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 !important;
  transition: width .25s ease;
}
.languages:hover{ width:86px; }  /* enough to reveal the other code */

/* Stack the two items on the same baseline without reflow */
.languages ul{
  position:relative;
  height:60px; width:86px;       /* max width when expanded */
  margin:0; padding:0; list-style:none;
}
.languages li{
  position:absolute; top:0;
  height:60px; width:36px;       /* fixed box for each code */
  display:flex; align-items:center; justify-content:center;
  margin:0; padding:0;
  transition: opacity .2s ease;
}

/* Active stays parked at x = 0 (never moves) */
.languages li.active{ left:0; opacity:1; }

/* Inactive waits to the right; hidden until hover */
.languages li:not(.active){ left:50px; opacity:0; }
.languages:hover li:not(.active){ opacity:1; }

/* Link styling */
.languages li a{
  display:flex; align-items:center; justify-content:center;
  height:60px; line-height:1;
  font-family:'Oswald', sans-serif;
  font-size:12px; letter-spacing:1px; color:#fff; text-decoration:none;
}



.panel-left-custom1 { background-image: url('../img/works/works-1.jpg'); }
.panel-left-custom2 { background-image: url('../img/works/works-2.jpg'); }
.panel-left-custom3 { background-image: url('../img/works/works-3.jpg'); }
.panel-left-custom4 { background-image: url('../img/works/works-4.jpg'); }


/* Video layout styles reverted; keeping only overlay and poster helper */

/* Center the video box dead center of the right panel */
.panel-right-credits {
  display: flex !important;
  align-items: center !important;      /* vertical center */
  justify-content: center !important;  /* horizontal center */
  padding: 0 !important;               /* kill theme padding pushing it off-center */
}

/* The portrait box */
.panel-right-credits .credits-video-wrapper.video-box {
  height: 70% !important;
  width: auto !important;               /* override generic width:100% */
  aspect-ratio: 316 / 612;              /* match your 316x612 file */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto !important;            /* belt-and-suspenders centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make the <video> behave like content, not bg */
.panel-right-credits .credits-video-wrapper.video-box video {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;      /* no crop */
  object-position: center center !important;
  display: block;
  background: #000;
}

.news-panel-content {
  max-height: 100vh;
  overflow: auto;
}

.post-box-photo-news-1 {
  background-image: url(../img/news/news-1.avif);
}
.post-box-photo-news-2 {
  background-image: url(../img/news/news-2.avif);
}
.post-box-photo-news-3 {
  background-image: url(../img/news/news-3.avif);
}
.post-box-photo-news-4 {
  background-image: url(../img/news/news-4.avif);
}

/* All project right panels */
[id^="news"][id$="-right"] .credits-content p {
  font-size: 15px;
  line-height: 1.6;
}

.fake-link {
  cursor: pointer;
  color: #d1ff00; /* match your menu link color */
}

/* Projects/News text alignment tweaks */
#news .post-content-correction-news .post-text { margin-top: 10px; }
#news .post-content-correction-news .post-text p { margin: 0 0 20px 0; line-height: inherit; }

/* === Overlay: architecture block (transparent background) === */
.panel-left-credits .overlay-card{ display:flex; flex-direction:column; gap:10px; }
.panel-left-credits .overlay-card h5{ margin:0 0 6px; }
.panel-left-credits .overlay-card .arch-wrap{
  position:relative;
  padding:0;
  background:transparent; border:0; box-shadow:none;
  max-height:32vh; overflow:auto; /* fits inside the card, scroll if long */
}
.panel-left-credits .overlay-card .arch-wrap .copy-btn{
  position:absolute; top:6px; right:6px;
  padding:4px 10px; font-size:12px; line-height:1; color:#fff;
  background: rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.25);
  border-radius:12px; cursor:pointer; backdrop-filter: blur(3px);
}
.panel-left-credits .overlay-card .arch-wrap pre{
  margin:0; background:transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; line-height:1.35; color:#e9edf2;
  white-space: pre-wrap; word-break: break-word;
}
.panel-left-credits .overlay-card .arch-wrap code{ color:inherit; }
/* === Overlays: hidden by default; toggle with .overlays-on on panel === */
.panel-left-credits .overlay-card{
  position: absolute; right:26px; top:66px; /* back near the INFO button (top-right) */
  max-width: min(68%, 520px);
  padding: 12px 14px;
  border-radius: 10px;
  color:#fff;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity:0; transition: opacity .35s ease;
}
.panel-left-credits.overlays-on .overlay-card{ opacity:1; }
.panel-left-credits .overlay-card::after{ content: none !important; }

.panel-right-credits .work-badge{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:144px; padding:8px 16px; border-radius:999px;
  background: rgba(0,0,0,.85); border:1px solid rgba(255,255,255,.25);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5);
  font:400 11px/1.2 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  pointer-events:none; z-index:9999;
  opacity:0; transform: translate(-50%, 10px) scale(.98);
  transition: opacity .35s ease, transform .35s ease;
}
.panel-right-credits .work-badge::before{
  content:""; position:absolute; inset:-2px; border-radius:999px; opacity:.55;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  transform: translateX(-140%);
  animation: badge-shine 3.2s linear infinite;
}
@keyframes badge-shine{ 0%{ transform: translateX(-140%);} 100%{ transform: translateX(140%);} }
@keyframes badge-pulse{ 0%{ box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(189,218,15,.35);} 70%{ box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 16px rgba(189,218,15,0);} 100%{ box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(189,218,15,0);} }
.panel-right-credits.overlays-on .work-badge{ opacity:1; transform: translate(-50%, 0) scale(1); animation: badge-pulse 2.8s ease-out infinite; }
@media (max-width: 991.98px){ .panel-right-credits .work-badge{ bottom:136px; padding:7px 14px; font-size:12px; } }

/* Hide badge completely per request */
.panel-right-credits .work-badge{ display:none !important; }

/* Toggle button */
.overlay-toggle{
  position: fixed; top: 66px; right: 26px;   /* under EN link */
  width:40px; height:40px; border-radius:20px;
  border:2px solid rgba(189,218,15,.7);      /* neon 70% */
  background: rgba(0,0,0,.65); color:#fff;
  font:600 12px/1 'Oswald', sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing:.12em;
  text-transform: uppercase;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10000; backdrop-filter: blur(4px);
  box-shadow: 0 0 12px rgba(189,218,15,.45), 0 0 24px rgba(189,218,15,.25);
  animation: neon-pulse 2.4s ease-out infinite;
}
.overlay-toggle:hover{ border-color: rgba(189,218,15,1); box-shadow: 0 0 14px rgba(189,218,15,.75), 0 0 26px rgba(189,218,15,.45); }
@keyframes neon-pulse{ 0%{ box-shadow: 0 0 10px rgba(189,218,15,.25), 0 0 20px rgba(189,218,15,.15);} 70%{ box-shadow: 0 0 18px rgba(189,218,15,.6), 0 0 32px rgba(189,218,15,.35);} 100%{ box-shadow: 0 0 10px rgba(189,218,15,.25), 0 0 20px rgba(189,218,15,.15);} }

/* (Reverted: Mistify text uses template's original animation. No forced overrides here.) */

/* Final failsafe: hide non-active slide text, show active */
#mistify .mistify__slide:not(.mistify__slide--active) .mistify__slide-content{ opacity:0 !important; }
#mistify .mistify__slide.mistify__slide--active .mistify__slide-content{ opacity:1 !important; }


    .arch-wrap{
      max-width: 920px; margin: 2rem auto; padding: 1rem;
      background:#0f1115; border:1px solid #222; border-radius:12px;
      color:#e6e6e6; font: 14px/1.4 "JetBrains Mono","Fira Code","SFMono-Regular",Consolas,monospace;
      position: relative;
    }
    .arch-wrap pre{
      margin:0; white-space:pre; overflow:auto; padding:1rem;
    }
.copy-btn{
  position:absolute; top:.75rem; right:.75rem; cursor:pointer;
  background:#ff5a20; color:#111; border:0; border-radius:8px; padding:.5rem .75rem;
  font: 12px/1 "Inter",system-ui,sans-serif;
}

/* Project 2 overlay (left): Mermaid diagram wrapper */
#news2-left .mermaid-wrap{
  margin-top: 16px;
  padding: 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  max-height: calc(100vh - 200px);
  overflow: auto; /* allow wide/tall diagrams to scroll */
}
#news2-left .mermaid{
  margin: 0 auto;
}
#news2-left .mermaid svg{
  height: auto;
  max-width: none; /* allow wider than container; rely on scroll */
  background: transparent !important; /* ensure canvas is transparent */
}

/* Link to open full-size diagram */
#news2-left a.mermaid-open{
  display: inline-block;
  margin-top: 8px;
  color: #cadb26; /* match credits link color */
  text-decoration: underline;
}

/* Project 3 left overlay: TL;DR styles */
#news3-left .overlay-card{
  max-height: calc(100vh - 120px);
  overflow: auto;
}
#news3-left .overlay-card .tldr-block{
  margin-top: 10px;
  color: #fff;
}
#news3-left .overlay-card .tldr-title{
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .04em;
  margin: 6px 0 8px;
}
#news3-left .overlay-card .tldr-list{
  list-style: disc;
  margin: 0 0 0 18px;
  padding: 0;
  font: 14px/1.5 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
#news3-left .overlay-card .tldr-list li{ margin: 6px 0; }
#news3-left .overlay-card .tldr-list strong{ color:#cadb26; font-weight:600; }

/* Project 4 left overlay: TL;DR styles */
#news4-left .overlay-card{ max-height: calc(100vh - 120px); overflow:auto; }
#news4-left .overlay-card .tldr-block{ margin-top:10px; color:#fff; }
#news4-left .overlay-card .tldr-title{
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .04em;
  margin: 10px 0 8px;
}
#news4-left .overlay-card .tldr-list{
  list-style: disc;
  margin: 0 0 0 18px;
  padding: 0;
  font: 14px/1.5 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
#news4-left .overlay-card .tldr-sublist{
  list-style: circle;
  margin: 6px 0 6px 18px;
}
#news4-left .overlay-card .tldr-steps{
  margin: 6px 0 6px 18px;
  padding: 0 0 0 2px;
  font: 14px/1.5 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
#news4-left .overlay-card .tldr-list li{ margin: 6px 0; }
#news4-left .overlay-card .tldr-list strong{ color:#cadb26; font-weight:600; }


/* Mobile Menu Styles - Working with your HTML structure */

/* Force hamburger icon to be visible */
.menu-mobile .menu-trigger {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer;
    font-size: 36px; /* bigger hamburger */
    color: #000000 !important; /* black icon */
    text-decoration: none;
    z-index: 10001;
    position: relative;
    padding: 10px;
    background: transparent;
    border: none;
    outline: none;
}

.menu-mobile .menu-trigger:hover { color: #000000 !important; }

/* Show hamburger icon by default */
.menu-mobile .menu-trigger .ion-android-menu,
.menu-mobile .menu-trigger:before {
    display: inline-block;
    font-size: 36px; /* match bigger trigger */
}

/* Hide hamburger and show X when active */
/* Keep hamburger visible even when active */
.menu-mobile.active .menu-trigger .ion-android-menu { display: inline-block; }

/* Remove active close icon */
.menu-mobile.active .menu-trigger:after { content: none; }

/* Mobile menu behavior */
@media (max-width: 768px) {
    
    /* Initial state - menu hidden */
    .menu-mobile .menu ul li ul {
        position: fixed;
        top: 0;
        left: -100vw; /* fully off-screen by default */
        right: 0;     /* ensure full stretch when opened */
        width: 100vw; /* fill viewport width */
        height: 100vh;
        /* 35% black backdrop with blur for menu overlay */
        background: rgba(0, 0, 0, 0.35);
        z-index: 9998;
        transition: left 0.3s ease-in-out;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        margin: 0;
        padding: 0;
        list-style: none;
        
        /* Center the menu content */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    /* Create the glassmorphism container */
    .menu-mobile.active .menu ul li ul {
        left: 0;  /* slide in */
        right: 0; /* pin to right edge */
        width: 100vw;
    }
    
    .menu-mobile.active .menu ul li ul:before { content: none; display: none; }
    
    /* Style menu items */
    .menu-mobile.active .menu ul li ul li {
        position: relative;
        z-index: 1;
        margin-bottom: 15px;
        width: 280px;
        max-width: 90%;
    }
    
    .menu-mobile.active .menu ul li ul li:last-child {
        margin-bottom: 0;
    }
    
    .menu-mobile.active .menu ul li ul li a {
        color: #ffffff !important;
        text-decoration: none;
        font-size: 18px;
        display: block;
        padding: 12px 20px;
        border-radius: 10px;
        transition: color .2s ease;
        text-align: center;
        font-weight: 300;
        letter-spacing: 0.5px;
        background: transparent; /* no background */
        border: none; /* no border */
        box-shadow: none; /* no glow by default */
    }
    
    /* Hover/active in neon color without shifting layout */
    .menu-mobile.active .menu ul li ul li a:hover,
    .menu-mobile.active .menu ul li ul li a:focus,
    .menu-mobile.active .menu ul li ul li a:active,
    .menu-mobile.active .menu ul li ul li a.active,
    .menu-mobile.active .menu ul li ul li a.is-active,
    .menu-mobile.active .menu ul li ul li a[aria-current="page"] {
        background: transparent; /* remove background on states */
        color: #cadb26 !important; /* neon color only */
        border: none; /* remove border */
        box-shadow: none; /* remove glow */
        text-decoration: none;
        outline: none;
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }
    
    /* Hide menu items initially */
    .menu-mobile:not(.active) .menu ul li ul li {
        display: none;
    }
}

/* Desktop - hide mobile menu completely */
@media (min-width: 769px) {
    .menu-mobile {
        display: none !important;
    }
}

/* Mobile optimized banner styles */
#mobile-optimized-banner{ display:none; position:fixed; top:0; left:0; right:0; z-index:10002; }
@media (max-width: 768px){
  #mobile-optimized-banner{ display:none; }
  #mobile-optimized-banner.is-visible{ display:block; }
  #mobile-optimized-banner .mob-banner__inner{
    margin: 10px auto 0; max-width: 92%;
    border-radius: 10px; padding: 10px 14px; display:flex; align-items:center; justify-content: space-between;
    background: rgba(0,0,0,0.72);
    color: #cadb26; /* neon font colour */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    font: 500 14px/1.4 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }
  #mobile-optimized-banner .mob-banner__text{ margin-right: 10px; }
  #mobile-optimized-banner .mob-banner__close{
    appearance: none; -webkit-appearance: none; border:0; background: transparent; color:#cadb26; font-size: 22px; line-height:1; cursor:pointer; padding:6px 8px; border-radius:6px;
  }
  #mobile-optimized-banner .mob-banner__close:focus{ outline: 2px solid rgba(202,219,38,0.6); outline-offset: 2px; }
}

/* === Custom Loader (two bouncing dots) === */
/* HTML: <div class="loader"></div> */
.loader {
  /* override base theme's rotating ring */
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  border: 0 !important;
  animation: none !important;

  display: inline-flex;
  gap: 10px;
}
.loader:before,
.loader:after {
  content: "";
  height: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    linear-gradient(#222 0 0) top/100% 40% no-repeat,
    radial-gradient(farthest-side,#000 95%,#0000) 50%/8px 8px no-repeat
    #fff;
  animation: 2.5s infinite;
  animation-name: l8-1, l8-2;
}
@keyframes l8-1 {
  0%, 40%, 100% { background-size:100% 40%,8px 8px }
  50%, 80%      { background-size:100% 0% ,8px 8px }
}
@keyframes l8-2 {
  0%, 50%   { background-position:top,50% 50% }
  60%, 65%  { background-position:top,70% 50% }
  70%, 75%  { background-position:top,30% 50% }
  90%, 100% { background-position:top,50% 50% }
}