/* Channels (/channels): the network and its reach (15 Oct, full-site pass).
   The phone top gap (360 px above "Our Channels" on a 390 px screen) came from the shared hero headline box
   (.container-hero-headline.home): Webflow's 15em padding-top, sized to clear the old fixed navigation (the shell made
   it sticky) plus 6em margins at 479 px and down. Here: a title band under the header, then the phone collage (the
   network's own screens) in a rounded frame, shown whole on desktop and cropped to its middle phones on small screens
   so the screens stay readable.
   Then the four channels on a lifted navy band (white logo files, no filter), each at one optical weight with its social links under it (44 px
   taps), the two statements as large text, and the eight interests as a reach board: icon, interest, audience in
   lime Bungee, divided by hairlines. Every picture keeps a fixed shape so nothing jumps while loading.
   Words, order and links are untouched; every rule is scoped to this page id. */

/* ---------- title band ---------- */
html[data-wf-page="6835532345c8905b658319fc"] #who.section-blue {
  display: block;
  margin: 0;
  padding: clamp(26px, 4vw, 64px) var(--wl-gutter) 0;
  border: 0;
  background: none;
  color: #fff;
}
html[data-wf-page="6835532345c8905b658319fc"] #who.section-blue :is(.container-hero, .container-for-hero) {
  display: block;
  width: 100%;
  max-width: var(--wl-max);
  margin: 0 auto;
  padding: 0;
}
html[data-wf-page="6835532345c8905b658319fc"] #who .container-hero-headline.home {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font-size: 16px;
  text-align: left;
}
html[data-wf-page="6835532345c8905b658319fc"] #who .text-hero-pretitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  color: rgba(255, 255, 255, .88);
  font-family: Poppins, sans-serif;
  font-size: clamp(12px, 11.4px + .2vw, 14px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .16em;
  text-align: left;
  text-transform: uppercase;
}
html[data-wf-page="6835532345c8905b658319fc"] #who .text-hero-pretitle::before {
  content: "";
  flex: none;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--wl-lime);
}
html[data-wf-page="6835532345c8905b658319fc"] #who h1 {
  margin: 0;
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-size: clamp(2.1rem, .9rem + 6vw, 6.4rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: 0;
  text-align: left;
}

/* the phone collage: the network's screens, in a rounded frame (its indigo backdrop is part of the picture) */
html[data-wf-page="6835532345c8905b658319fc"] #who .container-phones {
  display: block;
  width: 100%;
  max-width: var(--wl-max);
  margin: clamp(26px, 3.4vw, 48px) auto 0;
  padding: 0;
}
html[data-wf-page="6835532345c8905b658319fc"] #who .container-phones img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4532 / 1439;
  object-fit: cover;
  border-radius: var(--wl-r-lg);
  box-shadow: 0 0 0 1px var(--wl-line);
}

/* ---------- the four channels: a lifted navy band ----------
   The lead's white logo files (UNREEL keeps its cut-out NETWORK letters; swapped in by channels.fixes.json), no CSS
   filter. Each logo sits in a box of the same height, sized by height so the four weigh the same (Extreme 1, UNREEL
   .62, metdaan .56, Supercar Blondie .42), so the social links under them line up. */
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon {
  --logo: 68px;
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(30px, 3.6vw, 48px) var(--wl-gutter);
  border-top: 1px solid var(--wl-line);
  border-bottom: 1px solid var(--wl-line);
  background: var(--wl-ink-2);
}
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .brands-container-on-home { max-width: var(--wl-max); overflow: visible; }
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .grid-brand-logos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
}
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .w-dyn-item { filter: none; }  /* live's site code inverts the last column (made for dark files on lime) */
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .w-dyn-item + .w-dyn-item { border-left: 1px solid var(--wl-line); }
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .container-grid-wavelength-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 6px 16px;
}
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .image-6 {
  --h: var(--logo);
  display: block;
  flex: none;
  width: auto;
  max-width: 100%;
  height: var(--h);
  margin: calc((var(--logo) - var(--h)) / 2) 0;
  aspect-ratio: auto;
  object-fit: contain;
  transform: none;
  filter: none;
}
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .image-6[src*="net-unreel"] { --h: calc(var(--logo) * .62); }
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .image-6[src*="net-metdaan"] { --h: calc(var(--logo) * .56); }
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .image-6[src*="net-supercar-blondie"] { --h: calc(var(--logo) * .5); }  /* its thin lettering needs a little more than .42 to read */
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .flex-block-12 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-top: 16px;
}
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .link-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  transition: background-color .2s;
}
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .link-social-icon:hover { background: rgba(255, 255, 255, .1); }
/* the black-disc icons drawn as white discs on navy (small icons, not photos or logos) */
html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .link-social-icon img { display: block; width: 30px; height: 30px; filter: invert(1); }

/* ---------- the two statements, then the reach board ---------- */
html[data-wf-page="6835532345c8905b658319fc"] #what.section-neon + .divider-gray { display: none; }
html[data-wf-page="6835532345c8905b658319fc"] #what.section-white { padding-bottom: clamp(32px, 4vw, 56px); }
/* the content box: not the Let's Talk card that redesign.css draws for .container-960-left */
html[data-wf-page="6835532345c8905b658319fc"] #what.section-white > .container-960-left {
  display: block;
  width: 100%;
  max-width: var(--wl-max);
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
html[data-wf-page="6835532345c8905b658319fc"] #what.section-white > .container-960-left > :is(.spacer-4em, .spacer-2em) { display: none; }
html[data-wf-page="6835532345c8905b658319fc"] #what.section-white > .container-960-left > h2 {
  max-width: 34ch;
  margin: 0 0 .9em;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: clamp(1.35rem, 1rem + 1.35vw, 2.25rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
html[data-wf-page="6835532345c8905b658319fc"] #what.section-white > .container-960-left > h2 + h2 {
  margin-bottom: clamp(32px, 4.4vw, 64px);
  color: var(--wl-muted);
}
html[data-wf-page="6835532345c8905b658319fc"] #what.section-white > .container-960-left > .container { max-width: none; padding: 0; }
html[data-wf-page="6835532345c8905b658319fc"] .grid-channels {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--wl-line-2);
}
html[data-wf-page="6835532345c8905b658319fc"] .grid-channels > .w-dyn-item { border-bottom: 1px solid var(--wl-line-2); }
html[data-wf-page="6835532345c8905b658319fc"] .grid-channels > .w-dyn-item:not(:nth-child(4n + 1)) { border-left: 1px solid var(--wl-line-2); }
html[data-wf-page="6835532345c8905b658319fc"] .container-grid-channel-icons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  padding: clamp(22px, 2.6vw, 36px) clamp(16px, 2vw, 28px);
  text-align: left;
  transition: background-color .25s;
}
html[data-wf-page="6835532345c8905b658319fc"] .grid-channels > .w-dyn-item:nth-child(4n + 1) .container-grid-channel-icons { padding-left: 0; }
html[data-wf-page="6835532345c8905b658319fc"] .container-grid-channel-icons:hover { background: rgba(255, 255, 255, .03); }
/* black line icons drawn white on the navy page (one file, News, has a white square behind its icon: screen keeps that
   square from showing) */
html[data-wf-page="6835532345c8905b658319fc"] .image-channel-icon {
  width: 44px;
  height: 44px;
  margin: 0 0 clamp(18px, 2.4vw, 32px);
  object-fit: contain;
  border-radius: 0;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: .9;
}
html[data-wf-page="6835532345c8905b658319fc"] .text-diagram-headline {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .82);
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[data-wf-page="6835532345c8905b658319fc"] .text-diagram-number {
  display: block;
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-size: clamp(1.3rem, .95rem + 1.1vw, 2.05rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
}
html[data-wf-page="6835532345c8905b658319fc"] #what .text-block-15 {
  max-width: none;
  text-align: left;
  margin: clamp(26px, 3vw, 40px) 0 0;
  color: var(--wl-muted);
  font-size: 17px;
  line-height: 1.6;
}
html[data-wf-page="6835532345c8905b658319fc"] #what .text-block-15 strong { color: #fff; font-weight: 600; }
html[data-wf-page="6835532345c8905b658319fc"] #what .text-block-15 a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--wl-lime); }
html[data-wf-page="6835532345c8905b658319fc"] #what .text-block-15 a:hover { color: var(--wl-lime); }
html[data-wf-page="6835532345c8905b658319fc"] #what.section-white > .container:empty { display: none; }
html[data-wf-page="6835532345c8905b658319fc"] #what.section-white > .container > .spacer-2em { display: none; }

/* ---------- tablets ---------- */
@media screen and (max-width: 991px) {
  html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon { --logo: 56px; }
  html[data-wf-page="6835532345c8905b658319fc"] .grid-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wf-page="6835532345c8905b658319fc"] .grid-channels > .w-dyn-item:not(:nth-child(4n + 1)) { border-left: 0; }
  html[data-wf-page="6835532345c8905b658319fc"] .grid-channels > .w-dyn-item:nth-child(even) { border-left: 1px solid var(--wl-line-2); }
  html[data-wf-page="6835532345c8905b658319fc"] .grid-channels > .w-dyn-item:nth-child(even) .container-grid-channel-icons { padding-left: clamp(16px, 2vw, 28px); }
  html[data-wf-page="6835532345c8905b658319fc"] .grid-channels > .w-dyn-item:nth-child(odd) .container-grid-channel-icons { padding-left: 0; }
}

/* ---------- phones ---------- */
@media screen and (max-width: 767px) {
  html[data-wf-page="6835532345c8905b658319fc"] #who.section-blue { padding: 22px var(--wl-gutter) 0; }
  html[data-wf-page="6835532345c8905b658319fc"] #who .text-hero-pretitle { margin-bottom: 12px; }
  html[data-wf-page="6835532345c8905b658319fc"] #who .container-phones { width: calc(100% + 2 * var(--wl-gutter) - 20px); margin: 22px 0 0 calc(10px - var(--wl-gutter)); }
  html[data-wf-page="6835532345c8905b658319fc"] #who .container-phones img { height: clamp(210px, 62vw, 300px); aspect-ratio: auto; object-position: 50% 30%; border-radius: 22px; }
  /* one channel per row: logo on the left, its links on the right */
  html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon { --logo: 50px; padding-top: 10px; padding-bottom: 10px; }
  html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .grid-brand-logos { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .w-dyn-item + .w-dyn-item { border-left: 0; border-top: 1px solid var(--wl-line); }
  html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .container-grid-wavelength-brand {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 72px;
    padding: 10px 0;
  }
  html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .image-6 { flex: 0 1 auto; min-width: 0; margin: 0; }
  html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .flex-block-12 { flex-wrap: nowrap; gap: 0; margin: 0; }
  html[data-wf-page="6835532345c8905b658319fc"] body #what.section-neon .link-social-icon img { width: 28px; height: 28px; }
  html[data-wf-page="6835532345c8905b658319fc"] .container-grid-channel-icons { padding: 20px 14px 22px; }
  html[data-wf-page="6835532345c8905b658319fc"] .grid-channels > .w-dyn-item:nth-child(even) .container-grid-channel-icons { padding-left: 14px; }
  html[data-wf-page="6835532345c8905b658319fc"] .image-channel-icon { width: 36px; height: 36px; margin-bottom: 16px; }
  html[data-wf-page="6835532345c8905b658319fc"] .text-diagram-headline { font-size: 11.5px; letter-spacing: .1em; }
  html[data-wf-page="6835532345c8905b658319fc"] .text-diagram-number { font-size: clamp(.95rem, 4.4vw, 1.4rem); }
  html[data-wf-page="6835532345c8905b658319fc"] #what .text-block-15 { font-size: 16px; }
}

/* the campaigns button under "Some of our high-impact social campaigns" (shared): buttons.css gives it
   line-height: 48px, which beats redesign.css's phone rule, so on phones its two-line label became two 48 px lines in a
   120 px pill. Reported to the lead; held here on this page until the shared fix lands. */
@media screen and (max-width: 767px) {
  html[data-wf-page="6835532345c8905b658319fc"] body .section-dark-cloud .button-highlight { height: auto; min-height: 48px; padding: 13px 22px; line-height: 1.3; text-align: left; }
}