/* XFANS V3.4 — viewport consistency + real-asset integration
   Loaded last. No factual content is introduced here. */

/* HERO: use the new landscape composite built exclusively from the approved real XFANS ball photo. */
.hero{min-height:clamp(570px,44vw,650px)!important;background:#061d31!important}
.hero-image{
  top:74px!important;left:0!important;right:0!important;width:100%!important;
  height:calc(100% - 74px)!important;object-fit:cover!important;object-position:center!important;
  filter:none!important;opacity:1!important;transform:none!important;
}
.hero:after{
  inset:74px 0 0 0!important;
  background:linear-gradient(90deg,
    rgba(5,28,49,.98) 0%,rgba(5,28,49,.92) 22%,rgba(5,28,49,.72) 37%,
    rgba(5,28,49,.32) 52%,rgba(5,28,49,.08) 68%,rgba(5,28,49,0) 82%)!important;
}
.hero-content{width:min(900px,64vw)!important;max-width:none!important}
.hero h1{font-size:clamp(32px,3.25vw,54px)!important;line-height:1.01!important}
.hero-line{display:block!important;white-space:nowrap!important;width:max-content!important;max-width:100%!important}
.hero-sub{white-space:nowrap!important;width:max-content!important;max-width:100%!important;font-size:clamp(12.5px,.92vw,15.5px)!important}
.hero-content:after{opacity:.62!important}
.hero:before{opacity:.72!important}

/* World image: no duplicated blurred side plates. The panorama itself is the visual. */
.v31-network-visual{
  min-height:unset!important;aspect-ratio:2400/900!important;
  background:#061d31!important;background-image:none!important;
  overflow:hidden!important;
}
.v31-network-visual:before{display:none!important}
.v31-network-visual>img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important;opacity:1!important;
  filter:none!important;-webkit-mask-image:none!important;mask-image:none!important;
}
.v31-network-visual:after{
  background:linear-gradient(90deg,
    rgba(5,28,49,.97) 0%,rgba(5,28,49,.91) 18%,rgba(5,28,49,.67) 30%,
    rgba(5,28,49,.18) 47%,rgba(5,28,49,.02) 68%,rgba(5,28,49,.10) 100%)!important;
}
.v31-network-copy{padding-top:clamp(46px,5vw,74px)!important;padding-bottom:clamp(44px,5vw,70px)!important}

/* Intro network preview and About preview: keep the same factual map fully visible. */
.network-composite,.card-photo:has(img[src*="network-panorama"]){background:#061d31!important}
.network-composite .image-blur{display:none!important}
.network-composite img,.card-photo img[src*="network-panorama"]{
  width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}

/* Five home services: preserve whole real image, add restrained same-asset depth only. */
.v31-service-media{background:#081f35!important;isolation:isolate!important}
.v31-service-media:before{opacity:.68!important;filter:blur(22px) brightness(.52) saturate(.78)!important;transform:scale(1.05)!important}
.v31-service-media:after{background:linear-gradient(90deg,rgba(8,31,53,.20),transparent 13%,transparent 87%,rgba(8,31,53,.20))!important}
.v31-service-media img{object-fit:contain!important;object-position:center!important;transform:none!important;filter:contrast(1.025) saturate(1.02)!important}
.v31-service-card:hover .v31-service-media img{transform:none!important}
.v31-view-examples{font-size:12.5px!important}

/* Project media: same policy — show real source intact. */
.v31-feature-media,.project-media{background:#081f35!important;isolation:isolate!important}
.v31-feature-media img,.project-media img{object-fit:contain!important;object-position:center!important;transform:none!important}
.v31-feature-hero .v31-feature-media img{object-fit:contain!important}

/* Player cards: never zoom or crop more than source. */
.player-img-wrap{background:#e8e3d8!important}
.player-card img{object-fit:contain!important;object-position:center top!important;transform:none!important}
.player-card:hover img{transform:none!important}

/* Keep readable proportions at browser zoom / narrower desktop widths. */
@media (min-width:721px) and (max-width:1180px){
  .hero-content{width:min(820px,78vw)!important;padding-top:160px!important}
  .hero h1{font-size:clamp(30px,4.2vw,46px)!important}
  .hero-sub{font-size:clamp(11.5px,1.35vw,14px)!important}
  .hero-line,.hero-sub{white-space:nowrap!important}
}

/* Mobile remains intentionally responsive, not desktop squeezed into a phone. */
@media (max-width:720px){
  .hero{min-height:590px!important}
  .hero-image{top:68px!important;height:calc(100% - 68px)!important;object-position:66% center!important;opacity:.62!important}
  .hero:after{inset:68px 0 0 0!important;background:linear-gradient(90deg,rgba(5,28,49,.98),rgba(5,28,49,.82) 58%,rgba(5,28,49,.34))!important}
  .hero-content{width:100%!important;padding-top:142px!important}
  .hero h1{font-size:clamp(29px,8.2vw,34px)!important;line-height:1.02!important}
  .hero-line{white-space:nowrap!important;width:max-content!important;max-width:100%!important}
  .hero-sub{white-space:normal!important;width:auto!important;font-size:13.5px!important;max-width:330px!important}
  .v31-network-visual{aspect-ratio:auto!important;display:flex!important;flex-direction:column!important}
  .v31-network-visual>img{position:relative!important;width:100%!important;height:auto!important;object-fit:contain!important;order:0!important}
  .v31-network-overlay{margin-top:0!important;order:1!important;background:#061d31!important}
  .v31-network-visual:after{display:none!important}
  .v31-network-copy{padding-top:42px!important;padding-bottom:48px!important}
}

/* Accessibility / interaction polish */
:focus-visible{outline:3px solid #d4a74b!important;outline-offset:4px!important}
.button,.v31-view-examples,.profile-link,.contact-action{touch-action:manipulation}
@media(prefers-reduced-motion:reduce){.hero-image{transform:none!important}.network-marquee-track{animation:none!important}}

/* Inner What We Do service photography — preserve faces and source framing. */
.blended-photo{aspect-ratio:16/9!important;background:#081f35!important;isolation:isolate!important}
.blended-photo .photo-blur{
  inset:-20px!important;filter:blur(24px) saturate(.78) brightness(.58)!important;
  opacity:.66!important;transform:scale(1.06)!important;
}
.blended-photo:after{
  background:linear-gradient(90deg,rgba(8,31,53,.18),transparent 10%,transparent 90%,rgba(8,31,53,.18))!important;
}
.blended-photo img{
  width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;
  -webkit-mask-image:none!important;mask-image:none!important;transform:none!important;background:transparent!important;
}
.blended-photo:hover img{transform:none!important}

/* Keep the small network preview naturally panoramic rather than forcing a cropped box. */
.intro-image.network-composite img,.card-photo img[src*="v34-network-panorama"]{height:auto!important;aspect-ratio:2400/900!important}