/* 4dsHub final layout consistency + portfolio media loading + home game motion v13 */

:root{
  --4ds-chrome-top:clamp(38px,5.2vh,58px);
  --4ds-chrome-width:min(1420px,96vw);
  --4ds-logo-width:clamp(330px,23.5vw,452px);
  --4ds-header-gap:clamp(22px,2.7vh,30px);
}

/* ONE header geometry on every page. No state-based jumps. */
body.home-reference-mode .recep-chrome-layer .hero-header,
body.home-reference-mode.concept-mode .recep-chrome-layer .hero-header,
body.home-reference-mode.services-mode .recep-chrome-layer .hero-header,
body.home-reference-mode.contact-mode .recep-chrome-layer .hero-header,
body.home-reference-mode.power-mode .recep-chrome-layer .hero-header,
body.home-reference-mode.form-mode .recep-chrome-layer .hero-header,
body.home-reference-mode.brand-universe-mode .recep-chrome-layer .hero-header{
  position:absolute!important;
  left:50%!important;
  top:var(--4ds-chrome-top)!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--4ds-chrome-width)!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:var(--4ds-header-gap)!important;
  transition:none!important;
}
body.home-reference-mode .recep-chrome-layer .hero-header .logo,
body.home-reference-mode.concept-mode .recep-chrome-layer .hero-header .logo,
body.home-reference-mode.services-mode .recep-chrome-layer .hero-header .logo,
body.home-reference-mode.contact-mode .recep-chrome-layer .hero-header .logo,
body.home-reference-mode.power-mode .recep-chrome-layer .hero-header .logo,
body.home-reference-mode.form-mode .recep-chrome-layer .hero-header .logo{
  width:var(--4ds-logo-width)!important;
  max-width:452px!important;
  height:auto!important;
  transform:none!important;
  transition:none!important;
}
body.home-reference-mode .recep-chrome-layer .hero-header .nav,
body.home-reference-mode.concept-mode .recep-chrome-layer .hero-header .nav,
body.home-reference-mode.services-mode .recep-chrome-layer .hero-header .nav,
body.home-reference-mode.contact-mode .recep-chrome-layer .hero-header .nav,
body.home-reference-mode.power-mode .recep-chrome-layer .hero-header .nav,
body.home-reference-mode.form-mode .recep-chrome-layer .hero-header .nav{
  position:relative!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:none!important;
  gap:clamp(10px,1.3vw,24px)!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  transition:none!important;
}
body.home-reference-mode .recep-chrome-layer .hero-header .nav .nav-button,
body.home-reference-mode .recep-chrome-layer .hero-header .nav .services-trigger,
body.home-reference-mode .recep-chrome-layer .hero-header .nav .contact-trigger,
body.home-reference-mode .recep-chrome-layer .hero-header .nav .team-trigger,
body.home-reference-mode .recep-chrome-layer .hero-header .nav .action-trigger,
body.home-reference-mode .recep-chrome-layer .hero-header .nav .lang-toggle{
  min-height:48px!important;
  padding:0 clamp(12px,1vw,19px)!important;
  margin:0!important;
  font-size:clamp(14px,1.03vw,19px)!important;
  transform:none!important;
}

/* Universe + Podcast stay beside the main logo on every normal site page. */
body.home-reference-mode .recep-chrome-layer .hero-header .home-brand-dock,
body.home-reference-mode.concept-mode .recep-chrome-layer .hero-header .home-brand-dock,
body.home-reference-mode.services-mode .recep-chrome-layer .hero-header .home-brand-dock,
body.home-reference-mode.contact-mode .recep-chrome-layer .hero-header .home-brand-dock,
body.home-reference-mode.power-mode .recep-chrome-layer .hero-header .home-brand-dock,
body.home-reference-mode.form-mode .recep-chrome-layer .hero-header .home-brand-dock{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:clamp(22px,1.8vw,34px)!important;
  width:max-content!important;
  max-width:32vw!important;
  transform:none!important;
  pointer-events:auto!important;
}
body.home-reference-mode .recep-chrome-layer .site-audio-control,
body.home-reference-mode.concept-mode .recep-chrome-layer .site-audio-control,
body.home-reference-mode.services-mode .recep-chrome-layer .site-audio-control,
body.home-reference-mode.contact-mode .recep-chrome-layer .site-audio-control,
body.home-reference-mode.power-mode .recep-chrome-layer .site-audio-control{
  right:clamp(24px,4.5vw,86px)!important;
  top:clamp(28px,3.8vh,46px)!important;
  left:auto!important;
  transform:none!important;
}

/* Center the real content area in the viewport without forcing text alignment. */
body.home-reference-mode.concept-mode .concept-pages{
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.home-reference-mode.concept-mode .concept-page.is-active{
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
body.home-reference-mode.concept-mode .portfolio-awards{
  width:min(1480px,92vw)!important;
  max-width:1480px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.home-reference-mode.concept-mode .services-concept-redesign .svc-redesign-wrap,
body.home-reference-mode.concept-mode .concept-bible-holy .holy-hero,
body.home-reference-mode.concept-mode .concept-bible-holy .holy-scroll,
body.home-reference-mode.concept-mode .we-holy-hero,
body.home-reference-mode.concept-mode .we-holy-statement,
body.home-reference-mode.concept-mode .we-dimension-stage,
body.home-reference-mode.concept-mode .we-bible-grid,
body.home-reference-mode.concept-mode .we-holy-final,
body.home-reference-mode.concept-mode .concept-team .team-stage{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Portfolio: a neutral spinner is visible until a valid image has actually loaded. */
.pf-card,.pf-gallery button,.pf-hero-image{position:relative!important;}
.pf-media-loader{
  position:absolute!important;
  inset:0!important;
  z-index:6!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
  opacity:1!important;
  visibility:visible!important;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.045),rgba(255,255,255,0) 42%)!important;
  transition:opacity .24s ease,visibility .24s ease!important;
}
.pf-media-loader i,.pf-lightbox-loader i{
  display:block!important;
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  border:2px solid rgba(255,255,255,.14)!important;
  border-top-color:rgba(255,255,255,.9)!important;
  animation:pfMediaSpin .82s linear infinite!important;
}
.pf-media-loader.is-done,.pf-lightbox-loader.is-done{opacity:0!important;visibility:hidden!important;}
.pf-card img.pf-image-pending,
.pf-gallery img.pf-image-pending,
.pf-hero-image img.pf-image-pending{opacity:0!important;visibility:hidden!important;}
.pf-card img.pf-image-ready,
.pf-gallery img.pf-image-ready,
.pf-hero-image img.pf-image-ready{opacity:1!important;visibility:visible!important;transition:opacity .34s ease!important;}
.pf-lightbox-loader{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:4!important;
  transform:translate(-50%,-50%)!important;
  opacity:1!important;
  visibility:visible!important;
  transition:opacity .2s ease,visibility .2s ease!important;
  pointer-events:none!important;
}
@keyframes pfMediaSpin{to{transform:rotate(360deg)}}

/* Home game composition: intentionally uneven heights + clearly independent floating. */
body.home-reference-mode:not(.concept-mode):not(.services-mode):not(.contact-mode):not(.power-mode):not(.brand-universe-mode):not(.form-mode) .home-game-showcase{
  top:clamp(300px,32svh,354px)!important;
  align-items:center!important;
}
body.home-reference-mode:not(.concept-mode):not(.services-mode):not(.contact-mode):not(.power-mode):not(.brand-universe-mode):not(.form-mode) .home-game-link{
  --game-base-y:0px;
  --game-down:20px;
  --game-up:20px;
  --game-time:6.8s;
  --game-delay:-1s;
  animation:finalGameFloat var(--game-time) cubic-bezier(.42,.03,.58,.97) var(--game-delay) infinite alternate!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
}
body.home-reference-mode .home-game-link:nth-child(1){--game-base-y:36px;--game-down:24px;--game-up:18px;--game-time:5.4s;--game-delay:-1.3s;}
body.home-reference-mode .home-game-link:nth-child(2){--game-base-y:2px;--game-down:18px;--game-up:30px;--game-time:7.9s;--game-delay:-5.1s;}
body.home-reference-mode .home-game-link:nth-child(3){--game-base-y:-8px;--game-down:22px;--game-up:22px;--game-time:6.1s;--game-delay:-2.2s;}
body.home-reference-mode .home-game-link:nth-child(4){--game-base-y:18px;--game-down:28px;--game-up:26px;--game-time:8.7s;--game-delay:-6.4s;}
body.home-reference-mode .home-game-link:nth-child(5){--game-base-y:-24px;--game-down:20px;--game-up:28px;--game-time:6.7s;--game-delay:-3.7s;}
@keyframes finalGameFloat{
  0%{transform:translate3d(0,calc(var(--game-base-y) + var(--game-down)),0)}
  100%{transform:translate3d(0,calc(var(--game-base-y) - var(--game-up)),0)}
}

@media(max-height:820px) and (min-width:901px){
  :root{--4ds-chrome-top:28px;--4ds-logo-width:clamp(290px,21vw,390px);--4ds-header-gap:18px;}
  body.home-reference-mode:not(.concept-mode):not(.services-mode):not(.contact-mode):not(.power-mode):not(.brand-universe-mode):not(.form-mode) .home-game-showcase{top:clamp(250px,30svh,290px)!important;}
}

@media(max-width:900px){
  :root{--4ds-chrome-top:98px;--4ds-chrome-width:100%;--4ds-logo-width:min(64vw,276px);--4ds-header-gap:18px;}
  body.home-reference-mode .recep-chrome-layer .hero-header .nav,
  body.home-reference-mode.concept-mode .recep-chrome-layer .hero-header .nav,
  body.home-reference-mode.services-mode .recep-chrome-layer .hero-header .nav,
  body.home-reference-mode.contact-mode .recep-chrome-layer .hero-header .nav,
  body.home-reference-mode.power-mode .recep-chrome-layer .hero-header .nav{
    width:min(94vw,620px)!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px 9px!important;
  }
  body.home-reference-mode .recep-chrome-layer .hero-header .nav .nav-button,
  body.home-reference-mode .recep-chrome-layer .hero-header .nav .services-trigger,
  body.home-reference-mode .recep-chrome-layer .hero-header .nav .contact-trigger,
  body.home-reference-mode .recep-chrome-layer .hero-header .nav .team-trigger,
  body.home-reference-mode .recep-chrome-layer .hero-header .nav .action-trigger,
  body.home-reference-mode .recep-chrome-layer .hero-header .nav .lang-toggle{
    min-height:38px!important;font-size:11px!important;padding:0 8px!important;
  }
  body.home-reference-mode .recep-chrome-layer .hero-header .home-brand-dock,
  body.home-reference-mode.concept-mode .recep-chrome-layer .hero-header .home-brand-dock,
  body.home-reference-mode.contact-mode .recep-chrome-layer .hero-header .home-brand-dock{
    left:0!important;top:-82px!important;gap:10px!important;max-width:58vw!important;
  }
  body.home-reference-mode .home-brand-button.is-universe img{width:72px!important;}
  body.home-reference-mode .home-brand-button.is-podcast img{width:78px!important;}
  body.home-reference-mode .recep-chrome-layer .site-audio-control{right:10px!important;top:12px!important;max-width:118px!important;}
  body.home-reference-mode.concept-mode:not(.contact-stable-v7-active) .concept-pages{padding-top:calc(var(--v19-mobile-content-top,560px) + 10px)!important;}
  body.home-reference-mode .home-game-link:nth-child(1){--game-base-y:20px;--game-down:14px;--game-up:12px;}
  body.home-reference-mode .home-game-link:nth-child(2){--game-base-y:0px;--game-down:12px;--game-up:16px;}
  body.home-reference-mode .home-game-link:nth-child(3){--game-base-y:-4px;--game-down:12px;--game-up:14px;}
  body.home-reference-mode .home-game-link:nth-child(4){--game-base-y:12px;--game-down:14px;--game-up:16px;}
  body.home-reference-mode .home-game-link:nth-child(5){--game-base-y:-16px;--game-down:12px;--game-up:16px;}
}
@media(max-width:520px){
  body.home-reference-mode .recep-chrome-layer .hero-header .nav{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:min(92vw,390px)!important;}
  body.home-reference-mode .recep-chrome-layer .hero-header .home-brand-dock{top:-76px!important;gap:6px!important;max-width:62vw!important;}
  body.home-reference-mode .home-brand-button.is-universe img{width:52px!important;}
  body.home-reference-mode .home-brand-button.is-podcast img{width:58px!important;}
  body.home-reference-mode.concept-mode:not(.contact-stable-v7-active) .concept-pages{padding-top:calc(var(--v19-mobile-content-top,560px) + 10px)!important;}
}
@media(prefers-reduced-motion:reduce){
  body.home-reference-mode .home-game-link{animation:none!important;will-change:auto!important;}
  .pf-media-loader i,.pf-lightbox-loader i{animation:none!important;}
}