/* Wavelength Now Redesign: the style layer.
   Loaded on every page AFTER Webflow's own CSS. Rules: styles and photos only, never words.
   Round 1 (2026-10-09): the homepage, scoped to its Webflow page id.
   Round 2 (2026-10-12, Charlie: only the pages the main menu links to): the shell (tokens, utility bar, nav, footer,
   reveal, reduced motion) is scoped to html[data-wl-redesign], which build.py sets on exactly the pages in
   redesign/pages/pages.json. Each of those pages has its own redesign/pages/<slug>.css. Every other page is untouched.
   Breakpoints are Webflow's own (991 / 767 / 479) so everything ports back to the Designer. */

/* ---------- 1. Tokens ---------- */
html[data-wl-redesign] {
  --wl-ink: #081431;         /* brand navy: the page */
  --wl-ink-deep: #050d22;    /* footer, utility bar */
  --wl-indigo: #283376;      /* brand indigo */
  --wl-lime: #d2f801;        /* brand neon: the one accent */
  --wl-text: #ffffff;
  --wl-muted: rgba(255, 255, 255, .70);
  --wl-faint: rgba(255, 255, 255, .50);
  --wl-line: rgba(255, 255, 255, .10);
  --wl-line-2: rgba(255, 255, 255, .20);
  --wl-card: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  --wl-r-sm: 12px;
  --wl-r-md: 18px;
  --wl-r-lg: 28px;
  --wl-max: 1200px;
  --wl-gutter: clamp(20px, 5vw, 48px);
  --wl-section: clamp(56px, 7vw, 104px);
  --wl-ease: cubic-bezier(.2, .7, .2, 1);
  scroll-behavior: smooth;
  background: var(--wl-ink);
}
html[data-wl-redesign] body {
  font-family: Poppins, sans-serif;
  background: var(--wl-ink);
  color: var(--wl-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[data-wl-redesign] ::selection { background: var(--wl-lime); color: var(--wl-ink); }
html[data-wl-redesign] :focus-visible { outline: 2px solid var(--wl-lime); outline-offset: 3px; border-radius: 6px; }
/* 19 Oct (go-live gate E11, WCAG 2.4.11): whatever the browser scrolls to, on Tab or a #jump, stops below the sticky
   menu bar (72 px, 64 under 992) instead of under it; it had hidden the creator names on the creator-athlete pages
   and the story bars. The scroll-margins below were cut by the same 88 px, so every #jump lands where it did. */
html[data-wl-redesign] { scroll-padding-top: 88px; }
html[data-wl-redesign] #wf-form-Wavelength-Network-Form { scroll-margin-top: 52px; }

/* Anything live hides stays hidden (Webflow's .hidden combos are display:none at every width). */
html[data-wl-redesign] .hidden { display: none !important; }

/* ---------- 2. Utility bar (About Us, News, Team, Channels, Join the team) ---------- */
html[data-wl-redesign] .section-top-banner {
  background: var(--wl-ink-deep);
  padding: 0 var(--wl-gutter);
  border-bottom: 1px solid var(--wl-line);
}
html[data-wl-redesign] .section-top-banner .container {
  width: 100%;
  max-width: var(--wl-max);
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}
html[data-wl-redesign] .container-top-bar-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
html[data-wl-redesign] .container-top-bar-links::-webkit-scrollbar { display: none; }
html[data-wl-redesign] .section-top-banner .navigation-link {
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--wl-faint);
  transition: color .2s;
}
html[data-wl-redesign] .section-top-banner .navigation-link:hover { color: #fff; }

/* ---------- 3. Main navigation ---------- */
html[data-wl-redesign] .navigation-updated {
  height: 72px;
  padding: 0 var(--wl-gutter);
  background: var(--wl-ink);  /* solid: a live blur here re-rendered under every playing video (12 Oct), and text showed through on phones */
  border-bottom: 1px solid var(--wl-line);
}
html[data-wl-redesign] .navigation-container { max-width: var(--wl-max); }
html[data-wl-redesign] .navigation-updated .brand { display: flex; align-items: center; gap: 10px; padding: 0; }
/* the logo read as a menu item: Webflow's brand box is narrower than the WAVELENGTH lettering, which spilled 26px past it */
@media screen and (min-width: 1400px) { html[data-wl-redesign] .navigation-updated .brand { flex: none; width: auto; margin-right: 28px; } }
@media screen and (min-width: 1280px) and (max-width: 1399px) {  /* at 1280 the lettering overlapped "Home" by 3px */
  html[data-wl-redesign] .navigation-updated .brand { flex: none; width: auto; margin-right: 14px; }
  html[data-wl-redesign] body .nav-menu-4 > .navigation-link,
  html[data-wl-redesign] body .nav-menu-4 .w-dropdown-toggle { padding-left: 9px; padding-right: 9px; }
}
@media screen and (min-width: 1280px) and (max-width: 1339px) {
  html[data-wl-redesign] body .nav-menu-4 > .navigation-link,
  html[data-wl-redesign] body .nav-menu-4 .w-dropdown-toggle { padding-left: 7px; padding-right: 7px; }
}
html[data-wl-redesign] .image-5 { width: 30px; }
html[data-wl-redesign] .text-logotype { font-size: 15px; letter-spacing: .04em; padding: 0; }
html[data-wl-redesign] .div-block-25 { display: flex; align-items: center; gap: 8px; }
html[data-wl-redesign] .nav-menu-4 { display: flex; align-items: center; gap: 2px; }
html[data-wl-redesign] .nav-menu-4 > .navigation-link,
html[data-wl-redesign] .nav-menu-4 .w-dropdown-toggle {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, .8);
  transition: color .2s, background-color .2s;
}
html[data-wl-redesign] .nav-menu-4 > .navigation-link:hover,
html[data-wl-redesign] .nav-menu-4 .w-dropdown-toggle:hover,
html[data-wl-redesign] .nav-menu-4 .w-dropdown-toggle.w--open {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}
html[data-wl-redesign] .nav-menu-4 > .navigation-link.w--current { color: var(--wl-lime); }
/* a drawn chevron on every dropdown toggle (no characters added) */
html[data-wl-redesign] .nav-menu-4 .w-dropdown-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -3px 0 0 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .6;
  transform: rotate(45deg);
  transition: transform .2s var(--wl-ease);
}
html[data-wl-redesign] .nav-menu-4 .w-dropdown-toggle.w--open::after { transform: translateY(3px) rotate(225deg); }
/* dropdown panels */
html[data-wl-redesign] .dropdown-list-4.w--open {
  min-width: 270px;
  margin-top: 10px;
  padding: 8px;
  background: #0e1c48;
  border: 1px solid var(--wl-line);
  border-radius: var(--wl-r-md);
  box-shadow: 0 28px 64px -16px rgba(0, 0, 0, .6);
  animation: wl-drop .18s var(--wl-ease) both;
}
html[data-wl-redesign] .dropdown-list-4.wide.w--open { min-width: 320px; }
/* An invisible bridge over the 10px gap above the panel (13 Oct, Charlie: "when i try to go down and press them they just
   disappear"). Webflow closes a hover dropdown the moment the pointer leaves it; the gap was outside both the toggle
   and the panel, so the panel closed on the way down. The bridge belongs to the panel, so the pointer never leaves. */
html[data-wl-redesign] .dropdown-list-4.w--open::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
html[data-wl-redesign] .dropdown-link-2,
html[data-wl-redesign] .service-list-dropdown a {
  display: flex;
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--wl-r-sm);
  background: transparent;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
html[data-wl-redesign] .dropdown-link-2:hover,
html[data-wl-redesign] .service-list-dropdown a:hover {
  background: rgba(210, 248, 1, .1);
  color: var(--wl-lime);
  text-decoration: none;
}
@keyframes wl-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Contact Us */
html[data-wl-redesign] .button-highlight.navigation {
  height: 40px;
  margin-left: 10px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--wl-lime);
  color: var(--wl-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
  white-space: nowrap;
  transition: transform .2s var(--wl-ease), box-shadow .2s;
}
html[data-wl-redesign] .button-highlight.navigation:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(210, 248, 1, .7);
}
html[data-wl-redesign] .menu-button-3 { color: #fff; padding: 10px; border-radius: 12px; }
html[data-wl-redesign] .menu-button-3.w--open { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------- 4. Hero ---------- */
html[data-wf-page="680941028c753b77b6fbed5b"] .section-home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 104px) var(--wl-gutter) clamp(56px, 7vw, 112px);
  background:
    radial-gradient(55% 75% at 88% 35%, rgba(40, 51, 118, .6) 0%, rgba(40, 51, 118, 0) 70%),
    var(--wl-ink);
}
html[data-wf-page="680941028c753b77b6fbed5b"] .container-home-hero { max-width: var(--wl-max); }
html[data-wf-page="680941028c753b77b6fbed5b"] .grid-102 {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 96px);
  align-items: center;
  font-size: 16px;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .div-block-24 { max-width: 720px; align-items: stretch; text-align: left; }
html[data-wf-page="680941028c753b77b6fbed5b"] .heading-neon-small {
  margin: 0 0 .5em;
  color: var(--wl-lime);
  font-size: clamp(2.35rem, 1.1rem + 3.7vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-align: left;
  text-wrap: balance;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .div-block-24 > .mb-15 { padding: 0; margin-left: 0; margin-right: 0; }
html[data-wf-page="680941028c753b77b6fbed5b"] .heading-neon-small + .mb-15 {
  max-width: 640px;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-align: left;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .mb-15 + .mb-15 {
  max-width: 640px;
  margin: 0 0 12px;
  color: var(--wl-muted);
  font-size: clamp(.98rem, .94rem + .2vw, 1.06rem);
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .text-block-29 {
  margin: 20px 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--wl-line);
  color: var(--wl-faint);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .text-block-29 a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(210, 248, 1, .6); }
/* stats */
html[data-wf-page="680941028c753b77b6fbed5b"] .grid-wavelength-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-wavelength-numbers-copy {
  padding: 2px 16px;
  border-left: 1px solid var(--wl-line-2);
  text-align: left;
  align-items: flex-start;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-wavelength-numbers-copy:first-child { padding-left: 0; border-left: 0; }
html[data-wf-page="680941028c753b77b6fbed5b"] .text-wavelength-number-headline {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3.1rem);
  line-height: 1;
  text-align: left;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .text-unreel-number-subline {
  color: var(--wl-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}
/* the four network logos: a ruled panel of white logos under the story card (15 Oct evening, full-site brief: "far too
   small and visually insignificant"). White files from _tools/network_logos.py (the UNREEL lockup keeps its NETWORK
   letters cut out); sizes from _tools/logo_sizes.py; placement per width in stories.css. */
html[data-wf-page="680941028c753b77b6fbed5b"] .button-logos-flex { justify-content: flex-start; }
html[data-wf-page="680941028c753b77b6fbed5b"] .banner--pratner-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--wl-line);
  border-radius: var(--wl-r-md);
  background: var(--wl-line);
}
html[data-wf-page="680941028c753b77b6fbed5b"] .banner--pratner-logos a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: clamp(84px, 7.2vw, 108px); padding: 14px 18px; background: var(--wl-ink); opacity: 1; transition: background-color .2s; }
html[data-wf-page="680941028c753b77b6fbed5b"] .banner--pratner-logos a:hover { background: var(--wl-ink-2); }
html[data-wf-page="680941028c753b77b6fbed5b"] .banner--pratner-logos a:focus-visible { outline: 2px solid var(--wl-lime); outline-offset: -4px; }
html[data-wf-page="680941028c753b77b6fbed5b"] .banner--pratner-logos img { filter: none; object-fit: contain; }  /* contain: on a 320-360 phone a cell can be narrower than a logo's set height allows; never stretch it */
@media screen and (max-width: 374px) { html[data-wf-page="680941028c753b77b6fbed5b"] .banner--pratner-logos a { padding: 12px 10px; } }
/* the phone: the same reel, cropped to the screen, in a frame drawn here */
html[data-wf-page="680941028c753b77b6fbed5b"] .container-hero-video { position: relative; justify-content: center; }
html[data-wf-page="680941028c753b77b6fbed5b"] .container-hero-video::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 248, 1, .2) 0%, rgba(210, 248, 1, 0) 62%);
  pointer-events: none;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .background-video-mobile {
  position: relative;
  z-index: 1;
  width: clamp(220px, 22vw, 296px);
  height: auto;
  aspect-ratio: 296 / 620;
  overflow: hidden;
  border-radius: clamp(32px, 3.3vw, 44px);
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .30),
    0 0 0 9px #03060f,
    0 0 0 10px rgba(255, 255, 255, .16),
    0 60px 110px -30px rgba(0, 0, 0, .85);
  transform: rotate(3deg);
  animation: wl-float 7s ease-in-out infinite;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .background-video-mobile > video { object-fit: cover; }
html[data-wf-page="680941028c753b77b6fbed5b"] .background-video-mobile::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 2.3%;
  left: 50%;
  width: 32%;
  height: 4.2%;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
html[data-wf-page="680941028c753b77b6fbed5b"] .background-video-mobile::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 8%;
  right: 8%;
  bottom: 2.4%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--wl-lime), var(--wl-lime)) left / 0% 100% no-repeat, rgba(255, 255, 255, .28);
  animation: wl-progress 15.07s linear infinite;
}
@keyframes wl-float { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-10px); } }
@keyframes wl-progress { to { background-size: 100% 100%, auto; } }

/* ---------- 5. The four services ----------
   Charlie, 15 Oct afternoon: "this whole section feels extremely AI" -> a sticky photo stage beside a service index.
   15 Oct evening (full-site brief): the stage faded between photos as you scrolled and left a tall empty column beside
   the list, and the brief asks for static, purposeful layouts. Now a static editorial grid on 12 columns:
   - row 1: Creator & Athlete Campaigns, a wide photo (7 columns) | Live Events & Social Stunts, a near-square (5);
   - row 2: the reverse, Bold Stories & Social Reach (5) | Talent & Event Representation (7);
   - each photo is real work, cropped for its cell (_tools/svc_media.py), the words sit under it, the whole block is
     the link, and nothing moves except a slight lift of the photo under a mouse.
   Tablets: two equal columns. Phones: one column, photos at 4:3. Wrapper and photos: pages/home.fixes.json (wordless,
   alt="", aria-hidden). Words and their order unchanged. */
/* the homepage's other Webflow "white" sections (the roster) stay navy */
html[data-wf-page="680941028c753b77b6fbed5b"] .section-white {
  background: var(--wl-ink);
  padding: var(--wl-section) var(--wl-gutter) 20px;
  border: 0;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(24px, 3.2vw, 48px);
  row-gap: clamp(56px, 6vw, 92px);
  max-width: var(--wl-max);
  margin: 0 auto;
  padding: clamp(40px, 4.4vw, 72px) var(--wl-gutter) var(--wl-section);
  box-sizing: content-box;
}
/* the two Webflow sections and their grid stop being boxes, so the four services are items of one grid */
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc > .section-white,
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .grid-diagram-3-column { display: contents; }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .container-phones { display: none; }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13[data-svc="1"] { grid-column: 1 / span 7; }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13[data-svc="2"] { grid-column: 8 / span 5; }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13[data-svc="3"] { grid-column: 1 / span 5; }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13[data-svc="4"] { grid-column: 6 / span 7; }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc-pic { display: block; width: 100%; height: clamp(300px, 30.6vw, 440px); margin-bottom: 8px; overflow: hidden; border-radius: var(--wl-r-lg); background: var(--wl-ink-2); }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--wl-ease); }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13[data-svc="3"] .wl-svc-pic img { object-position: 50% 0; }  /* keep the aircraft edge and the jumper when a phone crops the top */
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .div-block-39,
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .div-block-41 { width: 100%; max-width: none; min-width: 0; flex: none; align-items: stretch; }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .text-home-column { display: block; }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .text-home-column::before,
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .text-home-column::after { content: none; }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .text-home-column h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(1.35rem, .95rem + 1.15vw, 2.1rem);
  line-height: 1.08;
  text-align: left;
  text-wrap: balance;
  transition: color .25s;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .text-home-column p {
  margin: 0;
  max-width: 54ch;
  color: var(--wl-muted);
  font-size: 16px;
  font-weight: 400;  /* Webflow's .paragraph-46 is bolder than the other three */
  line-height: 1.6;
  text-align: left;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .text-home-column p strong { font-weight: inherit; }
/* "Find out more": a text link with an arrow, and the whole block is its click area */
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .button-4 {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 2px 0 4px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .button-4::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--wl-ease);
}
/* the stretched link: an empty layer over the whole block, so photo, title and words are one big target */
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .button-4::before { content: ""; position: absolute; inset: 0; z-index: 1; }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .button-4:focus-visible { color: var(--wl-lime); border-color: var(--wl-lime); outline: 2px solid var(--wl-lime); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13:hover h3 { color: var(--wl-lime); }
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13:hover .wl-svc-pic img { transform: scale(1.025); }
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13:hover .button-4 { color: var(--wl-lime); border-color: var(--wl-lime); }
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13:hover .button-4::after { transform: translateX(4px); }
}

/* ---------- 6. Section titles (shared) ---------- */
html[data-wf-page="680941028c753b77b6fbed5b"] .label-brands {
  margin: 0 0 28px;
  padding: 0;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-align: left;
  text-transform: none;
}

/* ---------- 7. Client logos ----------
   15 Oct evening (full-site brief: the logos "display awkwardly"; no marquee): 24 separate white tiles with gaps read
   as tile soup. Now one white board ruled into equal cells by hairlines: 8 x 3 on desktop, 6 x 4 on tablets, 3 x 8 on
   phones (24 logos fill every grid exactly). The logos keep their own colours; each is sized by its drawn area, centred
   on its ink (_tools/logo_sizes.py), and nothing moves. */
html[data-wf-page="680941028c753b77b6fbed5b"] .section-cloud { background: var(--wl-ink); padding: 0 var(--wl-gutter) var(--wl-section); }
html[data-wf-page="680941028c753b77b6fbed5b"] .section-cloud > .container.centered { max-width: var(--wl-max); margin: 0 auto; padding: 0; align-items: stretch; }
html[data-wf-page="680941028c753b77b6fbed5b"] .section-cloud .spacer-1em { height: 8px; }
/* the board hands straight over to the indigo network chapter: one modest gap, not two section paddings (a 1280x600
   laptop showed 257 px of empty navy and indigo between them) */
html[data-wf-page="680941028c753b77b6fbed5b"] .section-cloud:has(+ .w-layout-blockcontainer > .heading-35) { padding-bottom: clamp(48px, 5vw, 80px); }
html[data-wf-page="680941028c753b77b6fbed5b"] .collection-list-clients-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e4e7ee;
  border-radius: var(--wl-r-lg);
  background: #e4e7ee;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .container-client-logo {
  height: clamp(92px, 8.4vw, 124px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .image-client-logo { width: auto; max-width: 100%; max-height: 56px; object-fit: contain; }

/* ---------- 8. Guaranteed Reach statement ----------
   15 Oct evening (full-site brief: "misaligned, poorly centred, incorrectly proportioned", and the jump into the next
   section felt accidental): the statement now opens THE WAVELENGTH NETWORK chapter. It sits centred on the same
   indigo band as the network title and the reels, so there is one change of background instead of a navy gap and
   then a band, and the statement, the title and the phones share one centre line. */
html[data-wf-page="680941028c753b77b6fbed5b"] body > .w-layout-blockcontainer.w-container:has(> .heading-35) {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  margin: 0;
  padding: clamp(56px, 6vw, 96px) max(var(--wl-gutter), calc((100% - var(--wl-max)) / 2)) clamp(28px, 3vw, 44px);
  background: var(--wl-indigo);
  text-align: center;
}
html[data-wf-page="680941028c753b77b6fbed5b"] body > .w-layout-blockcontainer.w-container:has(> .heading-35)::before,
html[data-wf-page="680941028c753b77b6fbed5b"] body > .w-layout-blockcontainer.w-container:has(> .heading-35)::after { content: none; }
html[data-wf-page="680941028c753b77b6fbed5b"] .heading-35 {
  align-self: center;  /* something upstream stretches it, which pinned the 24ch box to the left */
  max-width: 24ch;
  margin: 0;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .heading-35::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin: 0 auto 26px;
  border-radius: 4px;
  background: var(--wl-lime);
}
html[data-wf-page="680941028c753b77b6fbed5b"] .text-block-28 {
  display: block;
  max-width: 62ch;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  font-weight: 400;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}
/* the network title follows straight on, on the same band */
html[data-wf-page="680941028c753b77b6fbed5b"] body > .w-layout-blockcontainer.w-container:has(> .heading-35) + .section-blue { padding-top: clamp(36px, 4vw, 64px); }

/* ---------- 9. THE WAVELENGTH NETWORK ---------- */
html[data-wf-page="680941028c753b77b6fbed5b"] .section-blue {
  overflow: hidden;
  padding: clamp(56px, 7vw, 104px) var(--wl-gutter) 0;
  background: var(--wl-indigo);
  text-align: center;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .heading-22 {
  margin: 0 auto clamp(28px, 4vw, 48px);
  padding: 0;
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-size: clamp(2.1rem, .8rem + 5.2vw, 5.6rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: 0;
  text-align: center;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .section-blue .container-phones { max-width: var(--wl-max); margin: 0 auto; overflow: hidden; }
html[data-wf-page="680941028c753b77b6fbed5b"] .image-15 { display: block; max-width: 100%; margin: 0 auto -7px; padding: 0; outline: 0; }

/* ---------- 9b. Network reels (preview page /_preview/network-reels/ until Charlie approves) ---------- */
html[data-wf-page="680941028c753b77b6fbed5b"] .section-blue .container-phones.wl-reels {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  max-width: var(--wl-max);
  margin: 0 auto;
  padding: 8px 0 clamp(64px, 7vw, 104px);
  overflow: visible;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel {
  position: relative;
  flex: none;
  width: clamp(118px, 15vw, 218px);
  aspect-ratio: 9 / 16;
  margin: 0 -6px;
  overflow: hidden;
  border-radius: clamp(20px, 2.3vw, 32px);
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .28),
    0 0 0 7px #03060f,
    0 0 0 8px rgba(255, 255, 255, .16),
    0 40px 80px -24px rgba(0, 0, 0, .75);
  transition: transform .45s var(--wl-ease);
}
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel:nth-child(1) { z-index: 1; transform: translateY(52px) rotate(-7deg); }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel:nth-child(2) { z-index: 2; transform: translateY(20px) rotate(-3.5deg); }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel:nth-child(3) { z-index: 3; width: clamp(142px, 18vw, 262px); }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel:nth-child(4) { z-index: 2; transform: translateY(20px) rotate(3.5deg); }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel:nth-child(5) { z-index: 1; transform: translateY(52px) rotate(7deg); }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel:hover { z-index: 4; transform: translateY(-8px) rotate(0deg); }
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 2.4%;
  left: 50%;
  width: 30%;
  height: 3.8%;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel-video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width: 767px) {
  html[data-wf-page="680941028c753b77b6fbed5b"] .section-blue .container-phones.wl-reels {
    justify-content: flex-start;
    gap: 18px;
    width: calc(100% + 2 * var(--wl-gutter));
    max-width: none;
    margin: 0 calc(-1 * var(--wl-gutter));
    padding: 16px var(--wl-gutter) 56px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  html[data-wf-page="680941028c753b77b6fbed5b"] .section-blue .container-phones.wl-reels::-webkit-scrollbar { display: none; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel,
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel:nth-child(n) { width: min(62vw, 240px); margin: 0; transform: none; scroll-snap-align: center; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-reel:nth-child(3) { order: -1; }
}

/* ---------- 10. Roster by category ---------- */
html[data-wf-page="680941028c753b77b6fbed5b"] .container-960-centered { max-width: var(--wl-max); margin: 0 auto; padding: 0; }
html[data-wf-page="680941028c753b77b6fbed5b"] .container-960-centered > .container { max-width: none; padding: 0; }
html[data-wf-page="680941028c753b77b6fbed5b"] .grid-channels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-channel-icons {
  height: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: 26px 22px;
  background: var(--wl-card);
  border: 1px solid var(--wl-line);
  border-radius: 22px;
  text-align: left;
  transition: border-color .25s, transform .25s var(--wl-ease);
}
html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-channel-icons:hover { border-color: rgba(210, 248, 1, .45); transform: translateY(-3px); }
html[data-wf-page="680941028c753b77b6fbed5b"] .image-channel-icon { width: auto; height: 44px; margin: 0 0 18px; filter: invert(1); opacity: .92; }
html[data-wf-page="680941028c753b77b6fbed5b"] .text-diagram-headline { color: #fff; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-align: left; }
html[data-wf-page="680941028c753b77b6fbed5b"] .text-diagram-number { color: var(--wl-lime); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
/* 15 Oct: the eight rounded, outlined icon cards read as the template look (research: "rounded cards, outlined boxes"
   are the 2026 AI tell). No boxes now: a ruled data grid where the reach number leads and the category is its label. */
html[data-wf-page="680941028c753b77b6fbed5b"] .grid-channels { gap: 0 clamp(20px, 3vw, 44px); }
html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-channel-icons { padding: 22px 0 28px; background: none; border: 0; border-top: 1px solid var(--wl-line); border-radius: 0; gap: 6px; }
html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-channel-icons:hover { border-color: var(--wl-line); }
html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-channel-icons .image-channel-icon { height: 32px; margin: 0 0 14px; opacity: .8; }
html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-channel-icons .text-diagram-headline { color: var(--wl-muted); font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-channel-icons .text-diagram-number { color: var(--wl-lime); font-family: Bungee, sans-serif; font-size: clamp(1.05rem, .7rem + 1.15vw, 1.9rem); font-weight: 400; line-height: 1.05; letter-spacing: 0; }
html[data-wf-page="680941028c753b77b6fbed5b"] .text-block-15 { align-self: flex-start; margin-top: 28px; color: var(--wl-muted); font-size: 15px; font-weight: 500; text-align: left; }
html[data-wf-page="680941028c753b77b6fbed5b"] .text-block-15 a { color: var(--wl-lime); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 11. Lime band: a few of our brands ---------- */
html[data-wl-redesign] .section-neon { padding: clamp(32px, 4vw, 48px) var(--wl-gutter); background: var(--wl-lime); }
html[data-wl-redesign] .brands-container-on-home { max-width: var(--wl-max); margin: 0 auto; }
html[data-wl-redesign] .section-neon .label-brands {
  margin: 0 0 20px;
  color: var(--wl-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}
html[data-wl-redesign] .section-neon .grid-brand-logos { align-items: center; }
html[data-wl-redesign] .section-neon .container-grid-wavelength-brand { padding: 0 12px; }
html[data-wl-redesign] .section-neon .image-6 { width: min(80%, 240px); height: auto; max-width: none; aspect-ratio: 16 / 9; }
html[data-wl-redesign] .section-neon .w-dyn-item:last-child .image-6 { width: min(62%, 190px); aspect-ratio: 5 / 1; }

/* ---------- 12. Campaigns ---------- */
html[data-wl-redesign] .section-dark-cloud { background: var(--wl-ink); padding: var(--wl-section) var(--wl-gutter); }
/* 15 Oct evening (25-device sweep): on the same navy as the section before it, the campaigns' full top padding stacked
   on that section's bottom padding (230-270 px of nothing on a 1280x600 laptop); the previous section's padding is enough */
html[data-wl-redesign] * + .section-dark-cloud { padding-top: clamp(24px, 3vw, 48px); }
html[data-wl-redesign] .section-dark-cloud > .container.centered { max-width: var(--wl-max); margin: 0 auto; padding: 0; align-items: stretch; }
html[data-wl-redesign] .collection-list-case-study-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
html[data-wl-redesign] .container-case-study-grid-hero-image { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; background: #0e1c48; }
html[data-wl-redesign] .container-case-study-grid-hero-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--wl-ease); }
html[data-wl-redesign] .collection-item-case-study-grid:hover .container-case-study-grid-hero-image img { transform: scale(1.04); }
html[data-wl-redesign] .div-block-26 { right: 0; bottom: 0; margin: 0 14px 14px 0; padding: 8px 10px; border-radius: 12px; }
html[data-wl-redesign] .div-block-26 img { max-height: 34px; width: auto; }
html[data-wl-redesign] .div-block-33 { padding: 18px 4px 0; text-align: left; }
html[data-wl-redesign] .text-block-11 { color: #fff; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
html[data-wl-redesign] .link-read-more { display: inline-block; margin-top: 6px; color: var(--wl-lime); font-size: 14px; font-weight: 500; text-decoration: none; }
html[data-wl-redesign] .link-read-more:hover { text-decoration: underline; text-underline-offset: 4px; }
html[data-wl-redesign] .divider-gray { height: 1px; background: var(--wl-line); }
html[data-wl-redesign] .section-dark-cloud .button-highlight {
  align-self: flex-start;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--wl-lime);
  color: var(--wl-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 52px;
  text-transform: none;
  transition: transform .2s var(--wl-ease), box-shadow .2s;
}
html[data-wl-redesign] .section-dark-cloud .button-highlight:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px rgba(210, 248, 1, .7); }

/* ---------- 13. Let's Talk ---------- */
html[data-wl-redesign] .container-960-left {
  max-width: var(--wl-max);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px);
  background: linear-gradient(155deg, #12245e 0%, #0b1840 55%, #0a1638 100%);
  border: 1px solid var(--wl-line);
  border-radius: 32px;
}
html[data-wl-redesign] .form-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin: 0;
}
html[data-wl-redesign] .form-block > .w-form-done,
html[data-wl-redesign] .form-block > .w-form-fail { grid-column: 1 / -1; }
html[data-wl-redesign] .heading-15 {
  margin: 0 0 16px;
  color: var(--wl-lime);
  font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
}
html[data-wl-redesign] .form-block .w-richtext p { color: var(--wl-muted); font-size: 17px; line-height: 1.6; }
html[data-wl-redesign] .list-4 { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
html[data-wl-redesign] .list-4 li { margin: 0; padding: 0; color: var(--wl-muted); font-size: 15px; line-height: 1.5; }
html[data-wl-redesign] .list-4 a,
html[data-wl-redesign] .list-4 a * {
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(210, 248, 1, .6);
  overflow-wrap: anywhere;
}
html[data-wl-redesign] .form label {
  display: block;
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
html[data-wl-redesign] .form label sup { color: var(--wl-lime); }
html[data-wl-redesign] .form .w-input {
  height: 52px;
  margin: 0 0 18px;
  padding: 0 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--wl-line-2);
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
html[data-wl-redesign] .form textarea.w-input { height: 140px; padding: 14px 16px; resize: vertical; }
html[data-wl-redesign] .form .w-input::placeholder { color: rgba(255, 255, 255, .4); }
html[data-wl-redesign] .form .w-input:focus {
  outline: 0;
  border-color: var(--wl-lime);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 4px rgba(210, 248, 1, .15);
}
html[data-wl-redesign] .form .spacer-large-40 { height: 4px; }
html[data-wl-redesign] .form .button-highlight {
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--wl-lime);
  color: var(--wl-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .2s var(--wl-ease), box-shadow .2s;
}
html[data-wl-redesign] .form .button-highlight:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px rgba(210, 248, 1, .7); }

/* ---------- 14. FAQ: a compact list instead of 25 boxes ---------- */
html[data-wl-redesign] .wl-faq-section-1 { background: var(--wl-ink); padding: 0 var(--wl-gutter) var(--wl-section); }
html[data-wl-redesign] .wl-faq-container-1 { max-width: var(--wl-max); margin: 0 auto; padding: 0; }
html[data-wl-redesign] .wl-faq-header { margin: 0 0 28px; padding: 0; text-align: left; }
html[data-wl-redesign] .wl-faq-title-1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-align: left;
}
html[data-wl-redesign] .wl-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
  max-width: none;
  margin: 0;
  align-items: start;
}
html[data-wl-redesign] .wl-faq-grid > details {
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--wl-line);
  border-radius: 0;
  box-shadow: none;
}
html[data-wl-redesign] .wl-faq-grid > details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 16px 0;
  color: rgba(255, 255, 255, .86);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}
html[data-wl-redesign] .wl-faq-grid > details > summary::-webkit-details-marker { display: none; }
html[data-wl-redesign] .wl-faq-grid > details > summary:hover,
html[data-wl-redesign] .wl-faq-grid > details[open] > summary { color: #fff; }
html[data-wl-redesign] .wl-faq-grid > details > summary > span { color: inherit; font: inherit; }
html[data-wl-redesign] .wl-faq-grid .wl-faq-arrow-1 { flex: none; color: var(--wl-lime) !important; font-size: 12px !important; transition: transform .2s var(--wl-ease); }
html[data-wl-redesign] .wl-faq-grid > details[open] .wl-faq-arrow-1 { transform: rotate(180deg); }
html[data-wl-redesign] .wl-faq-grid .wl-faq-answer-1-2 {
  margin: 0;
  padding: 0 0 18px;
  color: var(--wl-muted);
  font-size: 14.5px;
  line-height: 1.65;
  background: transparent;
  border: 0;
}

/* ---------- 15. Footer ---------- */
html[data-wl-redesign] body > div > .divider-gray { display: none; }
html[data-wl-redesign] .section-ash {
  align-items: stretch;
  padding: clamp(56px, 7vw, 96px) var(--wl-gutter) 40px;
  background: var(--wl-ink-deep);
  border-top: 1px solid var(--wl-line);
}
html[data-wl-redesign] .section-ash > .w-layout-vflex { width: 100%; max-width: var(--wl-max); margin: 0 auto; }
html[data-wl-redesign] .container-footer-navigation { width: 100%; }
html[data-wl-redesign] .container-logo-footer { height: 46px; width: auto; filter: none; }
html[data-wl-redesign] .container-navigation-row { padding: 24px 0; border-top: 1px solid var(--wl-line); border-bottom: 0; }
html[data-wl-redesign] .label-footer-navigation {
  margin: 0 0 14px;
  color: var(--wl-lime);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html[data-wl-redesign] .grid-navigation-row,
html[data-wl-redesign] .div-block-43 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 28px;
}
html[data-wl-redesign] .link-footer {
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .15s;
}
html[data-wl-redesign] .link-footer:hover { color: #fff; }
html[data-wl-redesign] .container-address-details {
  width: 100%;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--wl-line);
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  line-height: 1.7;
}
html[data-wl-redesign] .container-address-details > div > div:first-child,
html[data-wl-redesign] .container-address-details > div > div:nth-child(2) { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.5; }
html[data-wl-redesign] .container-address-details strong,
html[data-wl-redesign] .container-address-details b { color: #fff; }
html[data-wl-redesign] .link-dark { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(210, 248, 1, .5); }
html[data-wl-redesign] .flex-block-16 { gap: 10px; }
html[data-wl-redesign] .link-social-icon-2 { width: 40px; padding: 0; opacity: .85; transition: opacity .2s; }
html[data-wl-redesign] .link-social-icon-2:hover { opacity: 1; }
html[data-wl-redesign] .link-social-icon-2 img { filter: invert(1); }
html[data-wl-redesign] body > .spacer-1em:last-of-type { background: var(--wl-ink-deep); }
html[data-wl-redesign] .text-copyright { margin-top: 18px; color: var(--wl-faint); font-size: 12px; }
/* bottom brand band: logos at their own proportions (they were stretched) */
html[data-wl-redesign] .section-black:has(.container-logos-inverted) { padding: 28px var(--wl-gutter) 36px; background: var(--wl-ink-deep); border-top: 1px solid var(--wl-line); }
html[data-wl-redesign] .container-logos-inverted { max-width: var(--wl-max); margin: 0 auto; filter: none; }
html[data-wl-redesign] .container-logos-inverted .w-dyn-item { filter: none !important; }
html[data-wl-redesign] .container-logos-inverted .grid-brand-logos { align-items: center; }
html[data-wl-redesign] .container-logos-inverted .container-grid-wavelength-brand,
html[data-wl-redesign] .section-neon .container-grid-wavelength-brand { width: 100%; }
html[data-wl-redesign] .container-logos-inverted .image-6 {
  width: min(62%, 170px);
  height: auto;
  max-width: none;
  /* white files (build.py white_network_logos), so no filter: brightness(0) invert(1) merged UNREEL's NETWORK bar */
  filter: none;
  opacity: .9;
}
html[data-wl-redesign] .container-logos-inverted .w-dyn-item:last-child .image-6 { width: min(50%, 140px); aspect-ratio: 5 / 1; }

/* the services below 992px: two equal columns on tablets, one column on phones (photos at 4:3) */
@media screen and (max-width: 991px) {
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc .flex-block-13[data-svc] { grid-column: auto; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc-pic { height: auto; aspect-ratio: 4 / 3; }
}
@media screen and (max-width: 767px) {
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc { grid-template-columns: minmax(0, 1fr); row-gap: 44px; padding-top: 28px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .wl-svc-pic { border-radius: var(--wl-r-md); }
}

/* ---------- 15a. Type: the Wavelength brand kit (Charlie, 2026-10-09) ----------
   Bungee for every headline, Poppins for paragraphs, buttons, labels and the nav. Bungee has one weight
   (400) and draws everything in capitals, so headline sizes are smaller than they were in Poppins. */
html[data-wf-page="680941028c753b77b6fbed5b"] .heading-neon-small,
html[data-wl-redesign] .label-brands,
html[data-wf-page="680941028c753b77b6fbed5b"] .heading-35,
html[data-wf-page="680941028c753b77b6fbed5b"] .heading-22,
html[data-wf-page="680941028c753b77b6fbed5b"] .text-home-column h3,
html[data-wf-page="680941028c753b77b6fbed5b"] .text-diagram-headline,
html[data-wl-redesign] .text-block-11,
html[data-wl-redesign] .heading-15,
html[data-wl-redesign] .wl-faq-title-1 {
  font-family: Bungee, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}
html[data-wf-page="680941028c753b77b6fbed5b"] .heading-neon-small { font-size: clamp(1.9rem, .95rem + 3.1vw, 3.6rem); line-height: 1.04; }
html[data-wl-redesign] .label-brands { font-size: clamp(1.3rem, .95rem + 1.25vw, 2rem); line-height: 1.12; }
html[data-wf-page="680941028c753b77b6fbed5b"] .heading-35 { font-size: clamp(1.6rem, 1rem + 1.9vw, 2.7rem); line-height: 1.08; }
html[data-wf-page="680941028c753b77b6fbed5b"] .text-home-column h3 { font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); line-height: 1.15; }
html[data-wf-page="680941028c753b77b6fbed5b"] .text-diagram-headline { font-size: 15px; line-height: 1.2; }
html[data-wl-redesign] .text-block-11 { font-size: clamp(1rem, .92rem + .35vw, 1.2rem); line-height: 1.2; }
html[data-wl-redesign] .heading-15 { font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.8rem); line-height: 1.05; }
html[data-wl-redesign] .wl-faq-title-1 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem); line-height: 1.1; }
/* the small lime-band label stays a Poppins label */
html[data-wl-redesign] .section-neon .label-brands { font-family: Poppins, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .16em; }

/* ---------- 15b. Small laptops and tablets in landscape (992-1279): the full menu has to fit ---------- */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  html[data-wl-redesign] .navigation-updated { padding: 0 24px; }
  html[data-wl-redesign] .image-5 { width: 26px; }
  html[data-wl-redesign] .text-logotype { font-size: 13px; }
  html[data-wl-redesign] .navigation-updated .brand { gap: 8px; }
  html[data-wl-redesign] .div-block-25 { gap: 4px; }
  html[data-wl-redesign] .nav-menu-4 { gap: 0; }
  html[data-wl-redesign] .nav-menu-4 > .navigation-link,
  html[data-wl-redesign] .nav-menu-4 .w-dropdown-toggle { padding: 8px 7px; font-size: 13px; }
  html[data-wl-redesign] .nav-menu-4 .w-dropdown-toggle::after { width: 5px; height: 5px; margin-left: 5px; }
  html[data-wl-redesign] .button-highlight.navigation { margin-left: 4px; padding: 0 14px; font-size: 13px; }
}

@media screen and (min-width: 992px) and (max-width: 1099px) {
  html[data-wl-redesign] .nav-menu-4 > .navigation-link,
  html[data-wl-redesign] .nav-menu-4 .w-dropdown-toggle { padding: 8px 5px; font-size: 12.5px; }
  html[data-wl-redesign] .button-highlight.navigation { padding: 0 12px; }
}

/* ---------- 16. Tablet (Webflow medium, 991 and below) ---------- */
@media screen and (max-width: 991px) {
  html[data-wl-redesign] .navigation-updated { height: 64px; }
  html[data-wl-redesign] .w-nav-overlay { top: 100%; }
  /* 15 Oct evening (full-site brief: phone menus "feel unfinished"): Webflow makes the open menu as tall as the whole
     page inside the sticky header, so with a section open the last links sat below the screen and scrolling only
     moved the page underneath. Now the open menu is its own scroll area that ends at the bottom of the screen, and the
     page behind it stays still. Its height allows for the top bar (34 px) above the header when the page is at the top. */
  html[data-wl-redesign] .w-nav-overlay { height: auto !important; max-height: calc(100vh - var(--wl-menu-top, 100px)); max-height: calc(100dvh - var(--wl-menu-top, 100px)); overflow-y: auto; overscroll-behavior: contain; }
  html[data-wl-redesign]:has(.menu-button-3.w--open) { overflow: hidden; }
  /* Webflow places the open menu absolutely inside the overlay; in flow, the overlay takes its height and can scroll it */
  html[data-wl-redesign] .w-nav-overlay [data-nav-menu-open] { position: relative; top: 0; }
  html[data-wl-redesign] .w-nav-overlay .nav-menu-4 {
    display: block;
    padding: 8px var(--wl-gutter) 24px;
    background: var(--wl-ink);
    border-bottom: 1px solid var(--wl-line);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  }
  html[data-wl-redesign] .w-nav-overlay .nav-menu-4 > .navigation-link,
  html[data-wl-redesign] .w-nav-overlay .nav-menu-4 .w-dropdown,
  html[data-wl-redesign] .w-nav-overlay .nav-menu-4 .w-dropdown-toggle { display: flex; width: 100%; }
  html[data-wl-redesign] .w-nav-overlay .nav-menu-4 .w-dropdown { flex-direction: column; }
  html[data-wl-redesign] .w-nav-overlay .nav-menu-4 > .navigation-link,
  html[data-wl-redesign] .w-nav-overlay .nav-menu-4 .w-dropdown-toggle {
    justify-content: space-between;
    padding: 16px 4px;
    border-radius: 0;
    border-bottom: 1px solid var(--wl-line);
    background: transparent;
    font-size: 17px;
  }
  html[data-wl-redesign] .w-nav-overlay .dropdown-list-4.w--open {
    position: static;
    min-width: 0;
    margin: 8px 0;
    padding: 4px;
    background: rgba(255, 255, 255, .04);
    border: 0;
    box-shadow: none;
  }
  html[data-wf-page="680941028c753b77b6fbed5b"] .grid-102 { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .div-block-24 { max-width: none; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .collection-list-clients-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html[data-wf-page="680941028c753b77b6fbed5b"] .grid-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wl-redesign] .form-block { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign] .wl-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
}

/* ---------- 17. Phones (Webflow small, 767 and below; tiny, 479 and below) ---------- */
@media screen and (max-width: 767px) {
  /* logo chips on campaign cards: smaller on phones so they sit on a corner, not over the subject (critic, 13 Oct) */
  html[data-wl-redesign] .div-block-26 { margin: 0 10px 10px 0; padding: 5px 7px; border-radius: 9px; }
  html[data-wl-redesign] .div-block-26 img { max-height: 22px; }
  html[data-wl-redesign] .section-top-banner .container { justify-content: center; }
  html[data-wl-redesign] .container-top-bar-links { gap: 0 18px; }
  html[data-wl-redesign] .section-top-banner .navigation-link { font-size: 11.5px; line-height: 34px; }
  html[data-wl-redesign] .button-highlight.navigation { height: 36px; line-height: 36px; padding: 0 16px; font-size: 13px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .section-home-hero { padding-top: 40px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-wavelength-numbers-copy { padding: 2px 12px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .button-logos-flex { justify-content: flex-start; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .background-video-mobile { width: 230px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .collection-list-clients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--wl-r-md); }
  html[data-wf-page="680941028c753b77b6fbed5b"] .container-client-logo { height: 76px; padding: 8px 10px; }
  html[data-wl-redesign] .collection-list-case-study-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign] .section-dark-cloud .button-highlight { height: auto; padding: 15px 22px; line-height: 1.3; white-space: normal; text-align: center; }
  html[data-wl-redesign] .container-960-left { padding: 28px 22px; border-radius: 24px; }
  html[data-wl-redesign] .list-4 a { font-size: 14px; }
  html[data-wl-redesign] .section-neon .grid-brand-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  html[data-wl-redesign] .wl-faq-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign] .grid-navigation-row,
  html[data-wl-redesign] .div-block-43 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
  html[data-wl-redesign] .container-logos-inverted .grid-brand-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}
@media screen and (max-width: 479px) {
  html[data-wl-redesign] .section-top-banner .container { justify-content: flex-start; }
  /* 24 Oct re-sync: live renamed the top bar's "News" to "Insights & News", so at 375-412 px the five links (395 px)
     ran past the left edge of the screen (stress test WIDE on every page, all three engines). A narrower bar margin,
     smaller links and tighter gaps fit them again (335 px at 375), and the row can no longer grow wider than the bar
     (min-width 0: a phone that draws it wider scrolls it instead). Same words, same order. */
  html[data-wl-redesign] .section-top-banner { padding: 0 12px; }
  html[data-wl-redesign] .section-top-banner .container { justify-content: center; }
  html[data-wl-redesign] .container-top-bar-links { min-width: 0; gap: 0 10px; }
  html[data-wl-redesign] .section-top-banner .navigation-link { font-size: 10.5px; }
  html[data-wl-redesign] .text-logotype { font-size: 13px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .collection-list-clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-wf-page="680941028c753b77b6fbed5b"] .grid-channels { gap: 10px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-channel-icons { padding: 18px 0 22px; }  /* no side padding: the ruled grid lines up with the page edge */
  html[data-wf-page="680941028c753b77b6fbed5b"] .text-diagram-headline { font-size: 15px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .text-unreel-number-subline { font-size: 12px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .text-block-29 { font-size: 14px; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .text-wavelength-number-headline { font-size: 1.5rem; }
  html[data-wf-page="680941028c753b77b6fbed5b"] .container-grid-wavelength-numbers-copy { padding: 2px 10px; }
  html[data-wl-redesign] .grid-navigation-row,
  html[data-wl-redesign] .div-block-43 { gap: 10px 16px; }
  html[data-wl-redesign] .link-footer { font-size: 13.5px; }
}

/* the narrowest phones (iPhone SE 1st gen, 320 px): the five top-bar links made the page scroll sideways (stress test,
   14 Oct); a tighter gap keeps all five on one line inside the screen */
@media screen and (max-width: 374px) {
  html[data-wl-redesign] .section-top-banner .container { padding-left: 12px; padding-right: 12px; }
  html[data-wl-redesign] .container-top-bar-links { flex-wrap: wrap; justify-content: center; gap: 0 10px; }  /* Safari draws them wider: wrap, never spill */
  html[data-wl-redesign] .section-top-banner .navigation-link { font-size: 10.5px; }
  html[data-wl-redesign] .container-top-bar-links { gap: 0 8px; }  /* keeps "Join the team" on the line in Chrome at 320 (a second line made the bar 69px) */
  /* 15 Oct evening: at 320 the menu button sat over the H of WAVELENGTH; a smaller word mark, a tighter button and a
     slimmer Contact Us give the three their own room */
  html[data-wl-redesign] .navigation-updated .text-logotype { font-size: 11.5px; letter-spacing: .02em; }
  html[data-wl-redesign] .navigation-updated .brand { gap: 6px; flex: 0 1 auto; min-width: 0; }
  html[data-wl-redesign] .menu-button-3 { padding: 10px 8px; }
  html[data-wl-redesign] .button-highlight.navigation { padding: 0 12px; font-size: 12.5px; }
}

/* ---------- 17b. Scroll reveal (motion.js adds .wl-reveal only to things below the first screen) ---------- */
/* 14 Oct (Charlie: "when loading stuff in, can feel extremely laggy"): a block used to wait until it was on screen,
   then take up to 1.1 s (0.7 s plus a stagger of up to 0.42 s) to arrive, so a quick scroll met empty space. Now it
   starts just before it scrolls in and is there within 0.6 s. */
html[data-wl-redesign] .wl-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--wl-ease), transform .45s var(--wl-ease);
  transition-delay: calc(var(--wl-i, 0) * 45ms);
}
html[data-wl-redesign] .wl-reveal.is-in { opacity: 1; transform: none; }

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-wl-redesign] { scroll-behavior: auto; }
  html[data-wl-redesign] .background-video-mobile,
  html[data-wl-redesign] .background-video-mobile::after,
  html[data-wl-redesign] .dropdown-list-4.w--open { animation: none; }
  html[data-wl-redesign] * { transition-duration: .01ms !important; }
  /* 15 Oct evening: any page's own looping or entrance animation stops too (it jumps to its end state) */
  html[data-wl-redesign] *, html[data-wl-redesign] *::before, html[data-wl-redesign] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 18 Oct: a signed creator's name on the creator grids links to their page (/collaborators/<name>); it looks as before */
html .heading-creator-grid-name .wl-grid-page { color: inherit; text-decoration: none; }
html .heading-creator-grid-name .wl-grid-page:hover { color: var(--wl-lime); }
html .heading-creator-grid-name .wl-grid-page:focus-visible { outline: 2px solid var(--wl-lime); outline-offset: 3px; }

/* 25 Oct (SEO batch 3, Charlie: "All approved. Apply all six lines"): three pages outside the redesign got their headings
   fixed (tags only). Webflow's default h1/h2 sizes and margins would otherwise change their look; these keep it identical. */
html:not([data-wl-redesign]) h1.text-hero-pretitle { margin-top: 0; margin-bottom: 0; }
html:not([data-wl-redesign]) .text-hero-pretitle > h1 { margin: 0; max-width: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-wrap: inherit; }
html[data-wf-page="6ac3956cd793bdc3d68daad2"] h2.heading-44.white-title { font-size: 38px; line-height: 44px; }