/* XFANS V3.3 — responsive lock + real-asset presentation hardening
   Loaded after all previous styles to remove viewport/zoom-dependent breakage.
   No factual content or people are generated here. */

:root{
  --v33-navy:#0a2742;
  --v33-navy-deep:#061d31;
  --v33-gold:#c99b3f;
  --v33-cream:#f5f2eb;
}

/* ---------- HERO: two explicit single-line statements on desktop ---------- */
@media (min-width:981px){
  .hero{min-height:620px!important}
  .hero-content{
    width:min(900px,61vw)!important;
    max-width:none!important;
    padding-top:182px!important;
  }
  .hero h1{
    margin:0!important;
    font-size:clamp(34px,3.0vw,56px)!important;
    line-height:1.01!important;
    letter-spacing:-.037em!important;
  }
  .hero-line{display:block!important;white-space:nowrap!important;width:max-content!important;max-width:100%!important}
  .hero-line-2{margin-top:7px!important}
  .hero-sub{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
    white-space:nowrap!important;
    font-size:clamp(13px,.93vw,16px)!important;
    line-height:1.25!important;
    margin:20px 0 24px!important;
  }
  .hero-image{
    width:min(58vw,980px)!important;
    height:548px!important;
    right:-1%!important;
    object-fit:cover!important;
    object-position:59% 58%!important;
    filter:brightness(1.36) saturate(1.08) contrast(1.015)!important;
    opacity:1!important;
    transform:none!important;
  }
  .hero:after{
    inset:74px 0 0 0!important;
    background:linear-gradient(90deg,
      rgba(6,29,49,1) 0%,
      rgba(6,29,49,.98) 27%,
      rgba(6,29,49,.87) 39%,
      rgba(6,29,49,.51) 54%,
      rgba(6,29,49,.12) 72%,
      transparent 91%)!important;
  }
  .hero:before{
    left:-7%!important;top:90px!important;width:54%!important;height:460px!important;
    background:
      radial-gradient(circle at 52% 48%,rgba(201,155,63,.22),rgba(201,155,63,.07) 29%,transparent 64%),
      radial-gradient(circle at 24% 62%,rgba(255,255,255,.06),transparent 55%)!important;
  }
}

/* Decorative left-side depth only. No invented content. */
.hero-content:after{
  content:""!important;
  position:absolute!important;
  left:-8%!important;
  top:120px!important;
  width:560px!important;
  height:330px!important;
  z-index:-1!important;
  pointer-events:none!important;
  opacity:.9!important;
  background:
    linear-gradient(118deg,transparent 0 29%,rgba(255,255,255,.035) 29.2% 29.5%,transparent 29.8% 55%,rgba(201,155,63,.09) 55.2% 55.5%,transparent 55.8%),
    radial-gradient(circle at 12% 82%,rgba(201,155,63,.10),transparent 34%)!important;
}

/* ---------- INTRO NETWORK THUMBNAIL ---------- */
.intro-image.network-composite{
  background:var(--v33-navy-deep)!important;
  border:1px solid rgba(16,36,58,.10)!important;
}
.intro-image.network-composite .image-blur{
  display:block!important;
  inset:-20%!important;
  filter:blur(36px) brightness(.52) saturate(.72)!important;
  opacity:.94!important;
}
.intro-image.network-composite img{
  object-fit:contain!important;
  object-position:center!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4.5%,#000 95.5%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 4.5%,#000 95.5%,transparent 100%)!important;
}

/* ---------- FIVE SERVICES: preserve original 16:9 source composition ---------- */
.v31-service-grid{align-items:stretch!important}
.v31-service-card{display:flex!important;flex-direction:column!important}
.v31-service-media{
  height:auto!important;
  aspect-ratio:16/9!important;
  position:relative!important;
  background:var(--v33-navy-deep)!important;
}
.v31-service-media:before{
  inset:-18px!important;
  filter:blur(18px) brightness(.58) saturate(.80)!important;
  opacity:.86!important;
}
.v31-service-media:after{
  background:linear-gradient(90deg,rgba(6,29,49,.16),transparent 11%,transparent 89%,rgba(6,29,49,.16))!important;
}
.v31-service-media img{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:contrast(1.02) saturate(1.01)!important;
}
.v31-service-card:hover .v31-service-media img{transform:none!important;filter:contrast(1.025) saturate(1.025)!important}
.v31-service-body{min-height:216px!important;flex:1!important}
.v31-service-links{gap:10px!important}
.v31-view-examples{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  border-top:1px solid #ddd5c8!important;
  padding-top:10px!important;
  color:#8a6220!important;
}

/* ---------- HOME ROSTER: no redundant full-roster action / no image zoom ---------- */
.talent-head .button[href*="our-talent"]{display:none!important}
.player-card img{object-fit:contain!important;object-position:center top!important;transform:none!important}
.player-card:hover img{transform:none!important}
.player-img-wrap:after{display:none!important}

/* ---------- FEATURED PROJECTS ---------- */
.v31-feature-media{position:relative!important;overflow:hidden!important}
.v31-feature-media:before{opacity:.90!important}
.v31-feature-media img{transform:none!important}
.v31-feature:hover .v31-feature-media img{transform:none!important}
.v31-feature-hero .v31-feature-media{
  aspect-ratio:2048/458!important;
  background:#081f35!important;
}
.v31-feature-hero .v31-feature-media img{
  object-fit:contain!important;
  object-position:center!important;
  width:100%!important;height:100%!important;
}

/* ---------- GLOBAL NETWORK: full panorama always retained ---------- */
.v31-network-visual{
  min-height:520px!important;
  background-color:var(--v33-navy-deep)!important;
  background-image:url('../images/v32-network-panorama.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.v31-network-visual:before{
  content:""!important;
  position:absolute!important;
  inset:-34px!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:url('../images/v32-network-panorama.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  filter:blur(30px) brightness(.52) saturate(.78)!important;
  transform:scale(1.06)!important;
  opacity:.92!important;
}
.v31-network-visual>img{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:.98!important;
  filter:saturate(.94) contrast(1.025)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 3.5%,#000 96.5%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 3.5%,#000 96.5%,transparent 100%)!important;
}
.v31-network-visual:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(5,28,49,.985) 0%,rgba(5,28,49,.90) 21%,rgba(5,28,49,.56) 34%,rgba(5,28,49,.13) 53%,rgba(5,28,49,.04) 78%,rgba(5,28,49,.18) 100%),
    linear-gradient(180deg,rgba(5,28,49,.12),transparent 20%,transparent 80%,rgba(5,28,49,.16))!important;
}
.v31-network-overlay{position:relative!important;z-index:3!important}

/* ---------- CASE STUDY INDEX: keep every deck visual intact ---------- */
.project-media{aspect-ratio:16/9!important}
.project-media img{object-fit:contain!important;object-position:center!important;transform:none!important}
.project-card:hover .project-media img{transform:none!important}

/* ---------- CORPORATE IDENTITY ---------- */
.corp-legal{font-size:11.5px!important;line-height:1.55!important;color:#92a3b0!important}

/* ---------- RESPONSIVE LOCK ---------- */
@media (max-width:1280px) and (min-width:981px){
  .hero-content{width:min(760px,62vw)!important}
  .hero h1{font-size:clamp(34px,3.25vw,46px)!important}
  .hero-sub{font-size:clamp(12.5px,1.05vw,14.5px)!important}
  .hero-image{width:61%!important}
  .v31-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:980px){
  .hero-content{width:100%!important;padding-top:160px!important}
  .hero h1{font-size:clamp(35px,6.4vw,48px)!important}
  .hero-line{white-space:normal!important;width:auto!important}
  .hero-sub{white-space:normal!important;width:auto!important;font-size:15px!important;max-width:580px!important}
  .hero-image{width:100%!important;right:0!important;filter:brightness(1.28) saturate(1.06)!important;opacity:.58!important}
  .v31-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v31-network-visual{min-height:0!important;display:flex!important;flex-direction:column!important}
  .v31-network-visual>img{
    position:relative!important;
    inset:auto!important;
    width:100%!important;height:auto!important;
    object-fit:contain!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 97%,transparent 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 97%,transparent 100%)!important;
  }
  .v31-network-overlay{
    background:linear-gradient(180deg,rgba(5,28,49,.22),rgba(5,28,49,.98) 30%)!important;
    margin-top:-34px!important;
  }
  .v31-network-copy{padding-top:52px!important;padding-bottom:54px!important}
  .v31-network-visual:after{background:linear-gradient(180deg,rgba(5,28,49,.06),rgba(5,28,49,.24) 36%,rgba(5,28,49,.88) 62%,rgba(5,28,49,.98))!important}
}
@media (max-width:640px){
  .hero{min-height:590px!important}
  .hero-content{padding-top:142px!important}
  .hero h1{font-size:34px!important;line-height:1.03!important}
  .hero-sub{font-size:14px!important;line-height:1.4!important}
  .v31-service-grid{grid-template-columns:1fr!important}
  .v31-service-media{aspect-ratio:16/9!important;height:auto!important}
  .v31-service-body{min-height:auto!important}
  .v31-network-copy h2{font-size:30px!important;max-width:335px!important}
  .v31-network-copy p{font-size:15px!important;max-width:340px!important}
}

@media(prefers-reduced-motion:reduce){
  .hero:before,.hero-image{animation:none!important;transform:none!important}
}

/* WHAT WE DO: same real-photo framing and a direct examples route for every vertical. */
.blended-photo{aspect-ratio:16/9!important;height:auto!important;min-height:0!important}
.blended-photo .photo-blur{filter:blur(22px) saturate(.80) brightness(.70)!important;opacity:.84!important}
.blended-photo img{object-fit:contain!important;object-position:center!important;transform:none!important}
.service-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.service-actions .button{min-width:0;padding-inline:18px}
.service-examples{border-color:#b58a39!important;color:inherit!important;background:transparent!important}
.dark .service-examples{color:#fff!important;border-color:rgba(201,155,63,.78)!important}
.service-examples:hover{background:rgba(201,155,63,.09)!important}
@media(max-width:640px){.service-actions{display:grid;grid-template-columns:1fr}.service-actions .button{width:100%}}

/* Long pages: reduce unnecessary initial work without hiding content. */
.project-group,.section{content-visibility:auto;contain-intrinsic-size:1px 700px}