/* Kill the white flash between full page loads (e.g. DE<->EN language switch)
   and give same-origin navigations a smooth cross-document crossfade where the
   browser supports it (Chrome). Older browsers just navigate normally. */
html{background:#000!important}
@view-transition{navigation:auto}

/* One navigation bar for home, subpages, desktop and touch devices. */
.nav-links{
  align-items:stretch!important;
  gap:0!important;
  border:1px solid #262626;
  background:rgba(3,3,3,.94);
}

/* The soft router keeps the first page's navigation DOM alive. Therefore the
   mobile grid must follow the persistent nav itself, not the changing body page
   class. This final override keeps every button in the same slot on all routes. */
@media(max-width:720px){
  nav.iantiai-main-nav .nav-inner{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:8px 14px 10px!important;
  }
  nav.iantiai-main-nav .nav-links{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr) auto!important;
    align-items:center!important;
    width:100%!important;
    gap:8px!important;
    box-sizing:border-box!important;
    border:0!important;
    background:transparent!important;
  }
  nav.iantiai-main-nav .nav-burger{
    grid-column:1!important;
    grid-row:1!important;
  }
  nav.iantiai-main-nav .language,
  nav.iantiai-main-nav .language-switch{
    grid-column:3!important;
    grid-row:1!important;
    position:static!important;
    display:grid!important;
    width:auto!important;
    min-width:0!important;
    justify-self:end!important;
    margin:0!important;
    z-index:1000!important;
    pointer-events:auto!important;
  }
  nav.iantiai-main-nav .language a,
  nav.iantiai-main-nav .language-switch a{pointer-events:auto!important}
  nav.iantiai-main-nav .nav-home,
  nav.iantiai-main-nav .nav-dropdown,
  nav.iantiai-main-nav .nav-dropdown:hover,
  nav.iantiai-main-nav .nav-dropdown:focus-within,
  nav.iantiai-main-nav .nav-dropdown.is-open{
    grid-column:1/-1!important;
    width:100%!important;
    box-sizing:border-box!important;
    display:none!important;
    border-right:0!important;
  }
  nav.iantiai-main-nav .nav-home{grid-row:2!important}
  nav.iantiai-main-nav .nav-dropdown.trading{grid-row:3!important}
  nav.iantiai-main-nav .nav-dropdown.ai{grid-row:4!important}
  nav.iantiai-main-nav.nav-open .nav-home{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    margin-top:0!important;
  }
  nav.iantiai-main-nav.nav-open .nav-dropdown{
    display:block!important;
    margin-top:0!important;
  }
  nav.iantiai-main-nav .nav-home,
  nav.iantiai-main-nav .nav-trigger{
    width:100%!important;
    box-sizing:border-box!important;
    min-height:50px!important;
    text-align:left!important;
    padding:0 18px!important;
    font-size:10.5px!important;
    letter-spacing:.7px!important;
    border:1px solid #232323!important;
    background:#0a0a0a!important;
  }
  nav.iantiai-main-nav .nav-trigger{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  nav.iantiai-main-nav .nav-mega,
  nav.iantiai-main-nav .nav-menu{
    position:static!important;
    top:auto!important;
    left:auto!important;
    width:100%!important;
    max-height:none!important;
    margin:0!important;
    grid-template-columns:1fr!important;
    box-shadow:none!important;
    transform:none!important;
    display:none!important;
  }
  nav.iantiai-main-nav .nav-dropdown.is-open .nav-mega,
  nav.iantiai-main-nav .nav-dropdown.is-open .nav-menu{
    display:grid!important;
  }
}

/* Desktop/tablet language controls stay above the navigation hit areas too. */
@media(min-width:721px){
  html body nav.iantiai-main-nav .nav-links > .language,
  html body nav.iantiai-main-nav .nav-links > .language-switch{
    position:relative!important;
    z-index:2147483646!important;
    pointer-events:auto!important;
  }
  html body nav.iantiai-main-nav .nav-links > .language a,
  html body nav.iantiai-main-nav .nav-links > .language-switch a{
    position:relative!important;
    z-index:2147483647!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
}
.nav-home,.nav-trigger{
  border:0!important;
  border-right:1px solid #262626!important;
}
.language,.language-switch{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(30px,1fr));
  flex:0 0 auto;
  align-self:stretch;
  margin:0!important;
  padding:3px!important;
  border:0!important;
  background:#050505!important;
}
.language a,.language-switch a{
  display:grid!important;
  min-width:30px!important;
  height:auto!important;
  place-items:center;
}

/* subpages.css positions .language absolute (right:0) on desktop, which floats
   it over the AI button. Force it to flow inline as the 4th item of the bar at
   every width, so the switch sits in the row on desktop and mobile alike. */
body.palms-page .site-nav .language{
  position:static!important;
  right:auto!important;
  align-self:stretch!important;
}

@media(max-width:720px){
  body.home nav,
  body.palms-page .site-nav{
    position:relative!important;
    top:auto!important;
    z-index:100!important;
    background:rgba(0,0,0,.88)!important;
    border:0!important;
    backdrop-filter:none!important;
  }

  body.home nav .nav-inner,
  body.palms-page .site-nav .nav-inner{
    display:block!important;
    min-height:0!important;
    padding:9px 0 12px!important;
  }

  body.home nav .nav-links,
  body.palms-page .site-nav .nav-links{
    position:relative!important;
    display:grid!important;
    width:100%!important;
    grid-template-columns:minmax(0,.62fr) minmax(0,1.42fr) minmax(0,1.08fr) 58px!important;
    gap:0!important;
    align-items:stretch!important;
    padding:0!important;
    overflow:visible!important;
  }

  body.home nav .nav-home,
  body.home nav .nav-trigger,
  body.palms-page .site-nav .nav-home,
  body.palms-page .site-nav .nav-trigger{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    justify-content:center!important;
    padding:0 6px!important;
    font-size:9.5px!important;
    line-height:1.2!important;
    letter-spacing:.55px!important;
    text-align:center!important;
    white-space:normal!important;
    touch-action:manipulation;
  }

  body.home nav .nav-trigger::after,
  body.palms-page .site-nav .nav-trigger::after{
    margin-left:7px!important;
  }

  body.home nav .nav-dropdown,
  body.palms-page .site-nav .nav-dropdown,
  body.home nav .nav-dropdown:hover,
  body.palms-page .site-nav .nav-dropdown:hover,
  body.home nav .nav-dropdown:focus-within,
  body.palms-page .site-nav .nav-dropdown:focus-within,
  body.home nav .nav-dropdown.is-open,
  body.palms-page .site-nav .nav-dropdown.is-open{
    position:static!important;
    min-width:0!important;
    grid-column:auto!important;
  }

  body.home nav .language-switch,
  body.palms-page .site-nav .language{
    position:static!important;
    display:grid!important;
    grid-column:auto!important;
    justify-self:stretch!important;
    margin:0!important;
    min-width:0!important;
    padding:3px!important;
  }

  body.home nav .language-switch a,
  body.palms-page .site-nav .language a{
    min-width:0!important;
    height:auto!important;
    padding:0!important;
    font-size:9px!important;
  }

  body.home nav .nav-mega,
  body.palms-page .site-nav .nav-menu,
  body.home nav .nav-dropdown.trading .nav-mega,
  body.home nav .nav-dropdown.ai .nav-mega,
  body.palms-page .site-nav .nav-dropdown.trading .nav-menu,
  body.palms-page .site-nav .nav-dropdown.ai .nav-menu{
    position:absolute!important;
    /* Menu overlays below the single fixed navigation row. */
    top:44px!important;
    left:0!important;
    z-index:240!important;
    width:100%!important;
    min-width:0!important;
    max-height:62vh!important;
    margin:0!important;
    overflow:auto!important;
    grid-template-columns:1fr!important;
    transform:none!important;
    background:#030303!important;
    box-shadow:0 18px 45px rgba(0,0,0,.96)!important;
  }

  body.home nav .nav-mega a,
  body.palms-page .site-nav .nav-menu a{
    min-height:52px!important;
    padding:10px 14px!important;
  }

  body.home nav .nav-dropdown:hover .nav-mega,
  body.home nav .nav-dropdown:focus-within .nav-mega,
  body.palms-page .site-nav .nav-dropdown:hover .nav-menu,
  body.palms-page .site-nav .nav-dropdown:focus-within .nav-menu{
    display:none!important;
  }

  body.home nav .nav-dropdown.is-open .nav-mega,
  body.palms-page .site-nav .nav-dropdown.is-open .nav-menu{
    display:grid!important;
  }

  /* Keep the same living background on mobile, rendered at a lower frame rate. */
  #iantiai-palms{
    height:100%!important;
    opacity:.42!important;
  }
}

@media(max-width:390px){
  body.home nav .nav-links,
  body.palms-page .site-nav .nav-links{
    grid-template-columns:minmax(0,.58fr) minmax(0,1.47fr) minmax(0,1.07fr) 54px!important;
    gap:0!important;
  }
  body.home nav .nav-home,
  body.home nav .nav-trigger,
  body.palms-page .site-nav .nav-home,
  body.palms-page .site-nav .nav-trigger{
    padding-inline:3px!important;
    font-size:8.7px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #iantiai-palms{opacity:.55!important}
}

/* Stable subpage header: no layout shift, no hover-open dropdowns. */
body.palms-page .top-logo{
  display:flex!important;
  min-height:150px!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 20px!important;
  overflow:visible!important;
  background:transparent!important;
}

body.palms-page .top-logo::before,
body.palms-page .top-logo::after{
  display:none!important;
  content:none!important;
}

body.palms-page .top-logo>a{
  display:block!important;
  width:min(620px,86vw)!important;
  margin:0 auto!important;
}

body.palms-page .top-logo .brand-lockup{
  width:100%!important;
  min-height:150px!important;
  padding:20px 0 16px!important;
}

body.palms-page .top-logo .brand-name span,
body.palms-page .top-logo .brand-tagline span,
body.palms-page .top-logo .brand-rule{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  will-change:auto!important;
}

body.palms-page .site-nav{
  position:relative!important;
  top:auto!important;
  z-index:100!important;
  min-height:60px!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
}

body.palms-page .site-nav .nav-inner{
  display:flex!important;
  min-height:60px!important;
  align-items:center!important;
  justify-content:center!important;
  padding:6px 12px 10px!important;
}

body.palms-page .site-nav .nav-links{
  position:relative!important;
  display:flex!important;
  width:auto!important;
  max-width:100%!important;
  margin:0 auto!important;
  gap:0!important;
}

body.palms-page .site-nav .nav-dropdown{position:relative!important}
body.palms-page .site-nav .nav-menu{display:none!important}
body.palms-page .site-nav .nav-dropdown:hover .nav-menu,
body.palms-page .site-nav .nav-dropdown:focus-within .nav-menu{display:none!important}
body.palms-page .site-nav .nav-dropdown.is-open .nav-menu{display:grid!important}

body.palms-page .page-hero{
  position:relative!important;
  z-index:1!important;
  padding-top:26px!important;
}

body[data-page="ianvideoai"] .page-hero h1{
  max-width:760px!important;
  margin:10px auto 14px!important;
  font-size:clamp(32px,4vw,52px)!important;
  line-height:1.02!important;
  letter-spacing:-1px!important;
  overflow-wrap:anywhere;
}

@media(max-width:720px){
  body.palms-page .top-logo{
    min-height:132px!important;
    padding:0 15px!important;
  }
  body.palms-page .top-logo>a{width:min(520px,90vw)!important}
  body.palms-page .top-logo .brand-lockup{
    min-height:132px!important;
    padding:16px 0 12px!important;
  }
  body.palms-page .site-nav{min-height:58px!important}
  body.palms-page .site-nav .nav-inner{
    display:flex!important;
    min-height:58px!important;
    padding:6px 10px 10px!important;
  }
  body.palms-page .site-nav .nav-links{
    display:grid!important;
    width:100%!important;
    grid-template-columns:minmax(0,.72fr) minmax(0,1.35fr) minmax(0,1.08fr) 58px!important;
  }
  body.palms-page .site-nav .nav-dropdown{position:static!important}
  body.palms-page .site-nav .nav-menu{
    position:absolute!important;
    top:calc(100% + 6px)!important;
    left:0!important;
    width:100%!important;
  }
  body.palms-page .page-hero{padding-top:22px!important}
  body[data-page="ianvideoai"] .page-hero h1{
    max-width:100%!important;
    font-size:clamp(28px,7.4vw,40px)!important;
    letter-spacing:-.8px!important;
  }
}

@media(max-width:580px){
  body[data-page="ianvideoai"] .page-hero h1{
    font-size:clamp(27px,8vw,34px)!important;
  }
}

/* ============================================================
   MOBILE HAMBURGER MENU  (phones + small tablets, <=720px)
   Closed: bar shows only [ DE/EN ] [ ☰ ] on the right.
   Open:   HOME / TRADING / AI stack vertically below; the
   TRADING and AI items expand as tap accordions.
   Desktop (>720px) is untouched — the ☰ button stays hidden.
   ============================================================ */
.nav-burger{display:none}

@media(max-width:720px){
  body.home nav .nav-inner,
  body.palms-page .site-nav .nav-inner{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:8px 14px 10px!important;
  }

  body.home nav .nav-links,
  body.palms-page .site-nav .nav-links{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr) auto!important;
    align-items:center!important;
    width:100%!important;
    gap:8px!important;
    box-sizing:border-box!important;
    border:0!important;
    background:transparent!important;
  }

  /* ---- ☰ button: permanently first/left, also while open or switching language ---- */
  .nav-burger{
    display:flex!important;
    grid-column:1!important;
    grid-row:1!important;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:46px;height:40px;
    padding:0 10px;
    box-sizing:border-box;
    border:1px solid #2c2c2c;
    background:#080808;
    cursor:pointer;
    touch-action:manipulation;
  }
  .nav-burger span{display:block;width:100%;height:2px;background:var(--green);transition:transform .2s,opacity .2s}
  nav.nav-open .nav-burger span:nth-child(1),.site-nav.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.nav-open .nav-burger span:nth-child(2),.site-nav.nav-open .nav-burger span:nth-child(2){opacity:0}
  nav.nav-open .nav-burger span:nth-child(3),.site-nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ---- DE/EN stays inline to the right of the ☰ ---- */
  body.home nav .language-switch,
  body.palms-page .site-nav .language{
    grid-column:3!important;
    grid-row:1!important;
    position:static!important;
    display:grid!important;
    width:auto!important;
    min-width:0!important;
    justify-self:end!important;
    margin:0!important;
  }

  /* ---- HOME / TRADING / AI: hidden until the menu opens ---- */
  body.home nav .nav-home,
  body.home nav .nav-dropdown,
  body.home nav .nav-dropdown:hover,
  body.home nav .nav-dropdown:focus-within,
  body.home nav .nav-dropdown.is-open,
  body.palms-page .site-nav .nav-home,
  body.palms-page .site-nav .nav-dropdown,
  body.palms-page .site-nav .nav-dropdown:hover,
  body.palms-page .site-nav .nav-dropdown:focus-within,
  body.palms-page .site-nav .nav-dropdown.is-open{
    grid-column:1/-1!important;
    width:100%!important;
    box-sizing:border-box!important;
    display:none!important;
    border-right:0!important;
  }
  body.home nav .nav-home,
  body.palms-page .site-nav .nav-home{grid-row:2!important}
  body.home nav .nav-dropdown.trading,
  body.palms-page .site-nav .nav-dropdown.trading{grid-row:3!important}
  body.home nav .nav-dropdown.ai,
  body.palms-page .site-nav .nav-dropdown.ai{grid-row:4!important}
  /* Open: dropdowns become full-width stacked rows */
  body.home nav.nav-open .nav-dropdown,
  body.palms-page .site-nav.nav-open .nav-dropdown{
    display:block!important;
    margin-top:0!important;
  }
  /* Open: HOME appears (display:none while closed) and is left-aligned */
  body.home nav.nav-open .nav-home,
  body.palms-page .site-nav.nav-open .nav-home{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    margin-top:0!important;
  }

  /* Shared look of the stacked rows. NO display here on purpose, so HOME stays
     hidden while the menu is closed (the hide rule above wins). */
  body.home nav .nav-home,
  body.home nav .nav-trigger,
  body.palms-page .site-nav .nav-home,
  body.palms-page .site-nav .nav-trigger{
    width:100%!important;
    box-sizing:border-box!important;
    min-height:50px!important;
    text-align:left!important;
    padding:0 18px!important;
    font-size:10.5px!important;
    letter-spacing:.7px!important;
    border:1px solid #232323!important;
    background:#0a0a0a!important;
  }
  /* Triggers are flex (label + "+"); their parent .nav-dropdown is display:none
     while closed, so they never leak into the closed bar. */
  body.home nav .nav-trigger,
  body.palms-page .site-nav .nav-trigger{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }

  /* ---- Accordions: menus flow in below the trigger when open ---- */
  body.home nav .nav-mega,
  body.home nav .nav-dropdown.trading .nav-mega,
  body.home nav .nav-dropdown.ai .nav-mega,
  body.palms-page .site-nav .nav-menu,
  body.palms-page .site-nav .nav-dropdown.trading .nav-menu,
  body.palms-page .site-nav .nav-dropdown.ai .nav-menu{
    position:static!important;
    top:auto!important;left:auto!important;
    width:100%!important;
    max-height:none!important;
    margin:0!important;
    grid-template-columns:1fr!important;
    box-shadow:none!important;
    transform:none!important;
    display:none!important;
  }
  body.home nav .nav-dropdown.is-open .nav-mega,
  body.palms-page .site-nav .nav-dropdown.is-open .nav-menu{
    display:grid!important;
  }
}

/* Final mobile language hit-area: physically separate from every menu row. */
@media(max-width:720px){
  html body nav.iantiai-main-nav .nav-links{
    position:relative!important;
    isolation:isolate!important;
  }
  html body nav.iantiai-main-nav .nav-links > .language,
  html body nav.iantiai-main-nav .nav-links > .language-switch{
    position:absolute!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    display:grid!important;
    grid-template-columns:34px 34px!important;
    width:68px!important;
    height:40px!important;
    min-width:68px!important;
    margin:0!important;
    padding:3px!important;
    z-index:2147483646!important;
    pointer-events:auto!important;
  }
  html body nav.iantiai-main-nav .nav-links > .language a,
  html body nav.iantiai-main-nav .nav-links > .language-switch a{
    position:relative!important;
    z-index:2147483647!important;
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
}