/* XAN Office v1.3.10.3 — device-specific hero/media contract
   Desktop: horizontal, full-bleed hero + floating quick cards.
   Tablet: controlled horizontal hero + normal-flow cards.
   Mobile/PWA: vertical/full-screen hero + cards below the fold. */
:root{
  --xan-v13103-corporate:#055970;
  --xan-v13103-corporate-dark:#194552;
  --xan-v13103-ink:#041F40;
}

/* Undo v1.3.10.2's global contain behavior. The real hero must fill its own device canvas. */
body.xan-home .xan-hero-v124,
body.xan-home .xan-hero-v113{
  width:100%!important;
  max-width:none!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:var(--xan-v13103-ink)!important;
}
body.xan-home .xan-hero-v124 .xan-hero-video,
body.xan-home .xan-hero-v113 .xan-hero-video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  filter:contrast(1.015) saturate(1.01)!important;
  background:var(--xan-v13103-ink)!important;
}
body.xan-home .xan-hero-v124 .xan-hero-video-backdrop,
body.xan-home .xan-hero-v113 .xan-hero-video-backdrop{
  opacity:.12!important;
  filter:none!important;
  transform:none!important;
}

/* Secondary/showcase media: desktop remains horizontal. Never inherit a portrait canvas globally. */
body.xan-home .xan-secondary-video,
body.xan-home .xan-video-showcase-media{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  filter:contrast(1.01) saturate(1.005)!important;
  background:var(--xan-v13103-ink)!important;
}

/* DESKTOP WEB — full-bleed horizontal video, quick cards attached to the lower edge. */
@media (min-width:1025px){
  body.xan-home .xan-hero-v124,
  body.xan-home .xan-hero-v113{
    height:100svh!important;
    min-height:680px!important;
    max-height:none!important;
  }
  body.xan-home .xan-hero-nav-strip{
    position:relative!important;
    z-index:20!important;
    width:100%!important;
    margin-top:-84px!important;
    padding:0 28px 18px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  body.xan-home .xan-hero-nav-inner{
    width:min(1320px,calc(100% - 8px))!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.20)!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,#055970 0%,#0a6d84 52%,#194552 100%)!important;
    box-shadow:0 20px 48px rgba(4,31,64,.22)!important;
  }
  body.xan-home .xan-hero-nav-inner a{
    min-height:82px!important;
    color:#fff!important;
    background:transparent!important;
    border-color:rgba(255,255,255,.14)!important;
    font-size:14px!important;
    font-weight:600!important;
    text-shadow:none!important;
  }
  body.xan-home .xan-hero-nav-inner a :where(span,strong,small),
  body.xan-home .xan-hero-nav-inner .xan-icon{color:#fff!important;stroke:#fff!important}
  body.xan-home .xan-hero-nav-inner a:hover{background:rgba(255,255,255,.08)!important}

  body.xan-home .xan-secondary-video-frame,
  body.xan-home .xan-video-showcase-card{
    aspect-ratio:16/9!important;
    max-height:none!important;
  }
}

/* TABLET — independent horizontal contract; no desktop floating-card overlap. */
@media (min-width:821px) and (max-width:1024px){
  body.xan-home .xan-hero-v124,
  body.xan-home .xan-hero-v113{
    height:min(78svh,720px)!important;
    min-height:540px!important;
    max-height:720px!important;
  }
  body.xan-home .xan-hero-nav-strip{
    margin-top:0!important;
    padding:0!important;
    background:#055970!important;
    border:0!important;
  }
  body.xan-home .xan-hero-nav-inner{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#055970!important;
  }
  body.xan-home .xan-hero-nav-inner a{
    min-height:62px!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.14)!important;
  }
  body.xan-home .xan-hero-nav-inner a :where(span,strong,small),
  body.xan-home .xan-hero-nav-inner .xan-icon{color:#fff!important;stroke:#fff!important}
  body.xan-home .xan-secondary-video-frame,
  body.xan-home .xan-video-showcase-card{aspect-ratio:16/9!important}
}

/* MOBILE / INSTALLED XAN MOBIL — vertical, true full-screen hero. Cards remain below the video. */
@media (max-width:820px){
  body.xan-home .xan-hero-v124,
  body.xan-home .xan-hero-v113{
    width:100vw!important;
    height:100svh!important;
    min-height:100svh!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
  }
  body.xan-home .xan-hero-v124 .xan-hero-video,
  body.xan-home .xan-hero-v113 .xan-hero-video{
    width:100vw!important;
    height:100svh!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  /* If a dedicated portrait mobile video is configured, keep its native vertical framing. */
  body.xan-home .xan-hero-v124.is-xan-video-portrait-v13102 .xan-hero-video,
  body.xan-home .xan-hero-v113.is-xan-video-portrait-v13102 .xan-hero-video{
    object-fit:cover!important;
    object-position:center center!important;
  }
  body.xan-home .xan-hero-nav-strip{
    position:relative!important;
    z-index:5!important;
    width:100%!important;
    margin-top:0!important;
    padding:0!important;
    background:#055970!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.xan-home .xan-hero-nav-inner{
    width:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#055970!important;
  }
  body.xan-home .xan-hero-nav-inner a{
    min-height:58px!important;
    padding:9px 8px!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.14)!important;
    font-size:11.5px!important;
    font-weight:600!important;
    text-shadow:none!important;
  }
  body.xan-home .xan-hero-nav-inner a :where(span,strong,small),
  body.xan-home .xan-hero-nav-inner .xan-icon{color:#fff!important;stroke:#fff!important}

  /* Content videos may use portrait canvas only on mobile when their own media is portrait. */
  body.xan-home .xan-secondary-video-frame.is-xan-video-portrait-v13102,
  body.xan-home .xan-video-showcase-card.is-xan-video-portrait-v13102{
    aspect-ratio:9/16!important;
    width:min(100%,430px)!important;
    margin-inline:auto!important;
  }
  body.xan-home .xan-secondary-video-frame.is-xan-video-landscape-v13102,
  body.xan-home .xan-video-showcase-card.is-xan-video-landscape-v13102{
    aspect-ratio:16/9!important;
    width:100%!important;
  }
  body.xan-home .xan-secondary-video,
  body.xan-home .xan-video-showcase-media{object-fit:cover!important}

  /* Installed app uses the same mobile visual contract, not a squeezed desktop canvas. */
  html.xan-pwa-standalone-v13102 body.xan-home .xan-hero-v124,
  html.xan-pwa-standalone-v13102 body.xan-home .xan-hero-v113{
    height:100svh!important;
    min-height:100svh!important;
  }
}

/* Very small phones: keep cards below, readable, and out of the initial hero viewport. */
@media (max-width:480px){
  body.xan-home .xan-hero-nav-inner{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.xan-home .xan-hero-nav-inner a{min-height:56px!important;font-size:11px!important;gap:7px!important}
  body.xan-home .xan-hero-nav-inner .xan-icon{width:18px!important;height:18px!important}
}

/* PWA contrast guard: every text element that sits on a corporate/dark app surface stays white. */
html.xan-pwa-standalone-v13102 body.xan-home :where(.xan-header-v124:not(.is-scrolled),.xan-hero-nav-strip) :where(a,button,span,strong,small,.xan-icon){
  color:#fff!important;
}
html.xan-pwa-standalone-v13102 body.xan-home .xan-header-v124:not(.is-scrolled) :where(.xan-menu a,.xan-login-link){
  color:#fff!important;text-shadow:none!important;
}
/* Open mobile/tablet menu is an intentional light surface, so its text must remain dark. */
@media (max-width:1024px){
  html.xan-pwa-standalone-v13102 body .xan-header-v124 .xan-nav.is-open :where(.xan-menu a,.xan-mobile-nav-actions-v194 a,.xan-mobile-nav-actions-v194 button){
    color:#041F40!important;
  }
  html.xan-pwa-standalone-v13102 body .xan-header-v124 .xan-nav.is-open .xan-mobile-pwa-link-v13102,
  html.xan-pwa-standalone-v13102 body .xan-header-v124 .xan-nav.is-open .xan-mobile-assistant-link-v194{
    color:#fff!important;
  }
}