/* Homepage photography only. Do not change shared/footer motion. */
.hero.hero--network .hero-media {
  animation: none;
  animation-timeline: auto;
  animation-range: normal;
  translate: none;
  transform: none;
}

.hero.hero--network .hero-media img {
  object-position: 62% 50%;
  transform-origin: 62% 50%;
  transform: none;
  animation: none;
}

/* Two layouts. WIDE (photo behind the text): screens 1200px and wider,
   landscape screens from 1024px, and landscape browser windows from 768px on
   a computer with a mouse or trackpad ("hover: hover"), which is what a
   laptop zoomed to 150% looks like. STACKED (photo above the text): phones,
   portrait tablets and touch screens under 1024px. Every media query in this
   file uses one of these two lists, so keep them matching. */

/* Keep the original photograph's orientation in Arabic, too. Frame the
   connections on the open left side instead of flipping photographed markings. */
@media (min-width: 1200px), (min-width: 1024px) and (orientation: landscape),
       (min-width: 768px) and (orientation: landscape) and (hover: hover) {
  .hero.hero--network {
    --network-overlay-angle: 90deg;
  }

  [dir="rtl"] .hero.hero--network {
    --network-overlay-angle: 270deg;
  }

  .hero.hero--network::before {
    background:
      linear-gradient(var(--network-overlay-angle), #0b1f2cf5, #0b1f2ced 32%, #0b1f2cd1 52%, #0b1f2c29 78%, #0b1f2c14),
      linear-gradient(0deg, #0b1f2c80, #0b1f2c00 34%);
  }

  [dir="rtl"] .hero.hero--network .hero-media {
    left: 0;
    right: auto;
    width: 76%;
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
    mask-image: linear-gradient(90deg, #000 70%, transparent);
  }

  [dir="rtl"] .hero.hero--network .hero-media img {
    object-position: 100% 50%;
    transform-origin: 72% 50%;
  }
}

/* FILL THE WINDOW AT ANY SIZE AND ANY ZOOM (October 2026).
   The shared rule clamps the hero between 560px and 880px tall. Browser zoom
   changes the window's size in CSS pixels, so zooming out left the next
   section showing under the hero (as a 2560x1440 monitor did at 100%), and
   zooming in, or a 1366x768 laptop at 100%, pushed it past the bottom of the
   screen. Here the hero is exactly the window below the header, and what is
   inside scales with the window's height as well as its width. Small text
   (buttons, the call line, the facts) keeps its readable size; on short
   windows the facts give way instead — they are repeated further down. */
@media (min-width: 1200px), (min-width: 1024px) and (orientation: landscape),
       (min-width: 768px) and (orientation: landscape) and (hover: hover) {
  .hero.hero--network {
    min-height: calc(100svh - var(--header-h) - 1px); /* the header's 1px border */
  }

  /* The text sits centred, with equal room above and below. */
  .hero.hero--network[data-hero-carousel] .hero-inner {
    padding-block: clamp(16px, 5svh, 96px);
  }

  .hero.hero--network h1 {
    margin-top: clamp(10px, 2svh, 22px);
    font-size: clamp(2rem, min(1.3rem + 3.3vw, 7.3svh), 4.25rem);
  }

  .hero.hero--network:lang(ar) h1 {
    font-size: clamp(1.75rem, min(1.2rem + 2.7vw, 6svh), 3.5rem);
  }

  .hero.hero--network .lead {
    margin-top: clamp(10px, 2svh, 22px);
    font-size: clamp(1rem, min(var(--fs-lead), 2.5svh), var(--fs-lead));
  }

  .hero.hero--network .cta-row {
    margin-top: clamp(14px, 3svh, 28px);
  }

  .hero.hero--network .or-call {
    margin-top: clamp(8px, 1.6svh, 14px);
  }

  .hero.hero--network .trust-list {
    margin-top: clamp(14px, 3svh, 28px);
  }
}

@media (min-width: 1200px) and (max-height: 599px),
       (min-width: 1024px) and (orientation: landscape) and (max-height: 599px),
       (min-width: 768px) and (orientation: landscape) and (hover: hover) and (max-height: 599px) {
  .hero.hero--network .trust-list {
    display: none;
  }
}

@media (min-width: 1200px) and (max-height: 479px),
       (min-width: 1024px) and (orientation: landscape) and (max-height: 479px),
       (min-width: 768px) and (orientation: landscape) and (hover: hover) and (max-height: 479px) {
  .hero.hero--network .hero-copy > .tag {
    display: none;
  }

  .hero.hero--network h1 {
    margin-top: 0;
  }
}

/* Very short windows (a small laptop zoomed to 150% or more): the headline
   and the paragraph may use the full text width, so each is a line shorter. */
@media (min-width: 1200px) and (max-height: 429px),
       (min-width: 1024px) and (orientation: landscape) and (max-height: 429px),
       (min-width: 768px) and (orientation: landscape) and (hover: hover) and (max-height: 429px) {
  .hero.hero--network h1,
  .hero.hero--network .lead {
    max-width: none;
  }
}

/* Shortest windows (175-200% zoom on a 768px-high laptop): tighter spacing. */
@media (min-width: 1200px) and (max-height: 359px),
       (min-width: 1024px) and (orientation: landscape) and (max-height: 359px),
       (min-width: 768px) and (orientation: landscape) and (hover: hover) and (max-height: 359px) {
  .hero.hero--network[data-hero-carousel] .hero-inner {
    padding-block: 8px;
  }

  .hero.hero--network h1 {
    font-size: 1.75rem;
  }

  .hero.hero--network .lead {
    margin-top: 8px;
  }

  .hero.hero--network .cta-row {
    margin-top: 10px;
  }
}

/* A narrow desktop window (768-1023px) gets the wide layout too, so undo the
   shared stylesheet's phone layout, which covers everything under 1024px. */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) and (hover: hover) {
  .hero.hero--network {
    align-items: center;
  }

  .hero.hero--network .hero-media {
    bottom: 0;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) and (orientation: landscape),
       (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) and (hover: hover) {
  .hero.hero--network::before {
    background: linear-gradient(var(--network-overlay-angle), #0b1f2cf5, #0b1f2ce8 55%, #0b1f2cd1 72%, #0b1f2c29);
  }
}

@media (max-width: 767px), (max-width: 1023px) and (hover: none),
       (orientation: portrait) and (max-width: 1199px) {
  .hero.hero--network .hero-media img {
    object-position: 68% 42%;
    transform-origin: 68% 42%;
  }

  .hero.hero--network .hero-inner {
    padding-top: clamp(136px, 20svh, 200px);
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  /* Reach the bottom of a tall tablet screen; the text stays at the bottom. */
  .hero.hero--network {
    min-height: calc(100svh - var(--header-h) - 1px);
  }

  .hero.hero--network .hero-inner {
    padding-top: min(36svh, 480px);
  }
}

/* One restrained opening movement, then a still image. No continuous drift
   or scroll-linked parallax. Never move the text or call-to-action buttons. */
@media (prefers-reduced-motion: no-preference) {
  .hero.hero--network .hero-media img {
    animation: home-network-settle 4s cubic-bezier(.25, .8, .25, 1) both;
  }
}

@keyframes home-network-settle {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}

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

/* Progressive enhancement: a fixed headline over three decorative photographs
   that change on their own (home-hero.js), with a slow crossfade and no
   controls. Without JavaScript only the first photograph is visible. */
.hero.hero--network[data-hero-carousel] .hero-media .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}

.hero.hero--network[data-hero-carousel] .hero-media .hero-slide.is-active {
  opacity: 1;
}

.hero.hero--network[data-hero-carousel] .hero-media img {
  animation: none;
  transform: none;
}

.hero.hero--network[data-hero-carousel] .hero-slide--workplace img {
  object-position: 60% 50%;
}

.hero.hero--network[data-hero-carousel] .hero-slide--cloud img {
  object-position: 50% 45%;
}

@media (max-width: 767px), (max-width: 1023px) and (hover: none),
       (orientation: portrait) and (max-width: 1199px) {
  .hero.hero--network[data-hero-carousel] .hero-inner {
    --hero-gallery-copy-start: clamp(136px, 20svh, 200px);
    padding-top: var(--hero-gallery-copy-start);
    padding-bottom: 40px;
  }

  .hero.hero--network[data-hero-carousel] .hero-slide--workplace img {
    object-position: 55% 40%;
  }

  .hero.hero--network[data-hero-carousel] .hero-slide--cloud img {
    object-position: 50% 40%;
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .hero.hero--network[data-hero-carousel] .hero-inner {
    --hero-gallery-copy-start: min(28svh, 320px);
    padding-bottom: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero--network[data-hero-carousel] .hero-media .hero-slide {
    transition: none;
  }
}