/* The light pages: Design 1, "Alternating" (Charlie, 5 Nov 2026: "Design 1").
   Loaded instead of _kit.css on pages marked "design": "light" in pages.json (html[data-wl-redesign="light"]).

   Why it exists: the site ran two looks (dark per-page layouts from the 11-15 Oct build, white team pages), and the dark
   layouts were tied to the order of the team's sections, so team rewrites in Webflow scrambled them (LESSONS 99-102).
   Charlie, 4 Nov: "a bit more white ... more professional and a bit more consistency overall of pages"; "integration,
   not a complete takeover"; then picked Design 1 of three: navy and white take turns down the page.

   How: the team's own Webflow layout stays (it always matches the words they wrote). _tools/white_bands.py marks each
   part of the page at build time, by structure only: data-wl-white or data-wl-navy on each block or chapter, white
   first under the navy first screen. This file gives the parts their colours and one shared finish: the hero, the type,
   the spacing, links, lists, the FAQ. It never places anything by position, never matches words and adds no media.

   Colours travel as custom properties (--wl-b-*): every part sets them and the words inside read them, so a white card
   inside a navy part, or a navy box inside a white one, keeps the right colours without extra rules.

   Rules: words never change; nothing live shows is hidden; no wash, fade or text on any photo; numbering 1, 2, 3. */

html[data-wl-redesign="light"] {
  --wl-l-bg: #ffffff;
  --wl-l-ink: #081431;         /* headings on white: the brand navy */
  --wl-l-text: #2c3445;        /* paragraphs on white */
  --wl-l-line: #e3e6ee;
  --wl-l-link: #283376;        /* brand indigo */
  --wl-l-h2: clamp(1.55rem, 1.15rem + 1.25vw, 2.25rem);
  --wl-l-h3: clamp(1.12rem, 1.02rem + .35vw, 1.3rem);
  --wl-l-body: clamp(15.5px, 15px + .15vw, 17px);
  --wl-l-measure: 960px;       /* the team's own content width */
  --wl-l-pad: clamp(40px, 5vw, 76px);         /* a block's room above and below */
  --wl-l-part-pad: clamp(36px, 4.5vw, 64px);  /* a chapter's */
  background: var(--wl-ink);   /* the navy frame: header, first screen, footer */
}
html[data-wl-redesign="light"] body { background: var(--wl-ink); color: var(--wl-l-text); }

/* ---------- 1. First screen: navy band, the page photo clean and the same size on every page, the title under it ----------
   Webflow gives each page's hero its own size rules (fixed backgrounds, "contain", 1600px, 70% 50%); here every hero is
   the same rounded photo, filled edge to edge, never fixed to the window. */
html[data-wl-redesign="light"] .section-black-blue.case-study-hero {
  background: var(--wl-ink);
  padding: 14px var(--wl-gutter) 0;
  margin-bottom: 0;
}
html[data-wl-redesign="light"] .container-case-study-hero-image[class] {
  width: 100%;
  max-width: 1100px;
  height: clamp(240px, 38vw, 560px);
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border-radius: 20px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
html[data-wl-redesign="light"] .container-case-study-hero-image::after { content: none; }
html[data-wl-redesign="light"] .section-navigation-background { display: none; }
html[data-wl-redesign="light"] .section-page-hero {
  background: var(--wl-ink);
  margin-top: 0;
  padding: clamp(22px, 3vw, 40px) var(--wl-gutter) clamp(34px, 4.5vw, 60px);
  text-align: center;
}
html[data-wl-redesign="light"] .section-page-hero .container-960-centered { max-width: 1000px; margin: 0 auto; }
html[data-wl-redesign="light"] .section-page-hero .text-hero-pretitle {
  margin: 0;
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
}
html[data-wl-redesign="light"] .section-page-hero :is(.h-page-hero, h1:not(.text-hero-pretitle), h2, p) {
  margin: 12px auto 0;
  max-width: 760px;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: clamp(1rem, .92rem + .4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
/* some pages have no separate lime title line: their h1 is the title (e.g. /creator-athlete-marketing) */
html[data-wl-redesign="light"] .section-page-hero .container-960-centered:not(:has(.text-hero-pretitle)) > :is(h1, .h-page-hero) {
  margin: 0 auto;
  max-width: 1000px;
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.2rem);
  line-height: 1.06;
  text-wrap: balance;
}
/* the shared title box Webflow gave a sky photo (24 Oct republish): text never sits on a photo */
html[data-wl-redesign="light"] .container-hero-headline.home { background-image: none; }

/* Every other kind of first screen (white_bands.py marks it data-wl-first): /team, /magazine, /work-and-insights and
   /blog use Webflow's indigo hero, /work's hero is a white section, /channels' a blue one, news stories have their own.
   All navy, with light words; the lime title stays lime. */
html[data-wl-redesign="light"] [data-wl-first] {
  background-color: var(--wl-ink) !important;
  color: #fff;
  --wl-b-ink: #fff;
  --wl-b-text: rgba(255, 255, 255, .82);
  --wl-b-link: #fff;
  --wl-b-underline: var(--wl-lime);
  --black-almost: #eef1f7;
}
html[data-wl-redesign="light"] [data-wl-first] :where(h1, h2, h3, h4, p, .h-page-hero, .heading-white, .text-hero-pretitle):not(.neon) { color: #fff; }
html[data-wl-redesign="light"] [data-wl-first] :is(p, li) a:not([class*="button"]) { color: #fff; text-decoration-color: var(--wl-lime); }
html[data-wl-redesign="light"] [data-wl-first] .divider-gray { display: none; }
/* Webflow's hero headline box keeps a 15em top padding from the old fixed menu; these first screens size to their words */
html[data-wl-redesign="light"] [data-wl-first]:is(.section-hero-team, .section-hero-news, .section-blue) { margin-top: 0; padding: 0 var(--wl-gutter); }
html[data-wl-redesign="light"] [data-wl-first] :is(.container-hero, .container-for-hero) { min-height: 0; }
html[data-wl-redesign="light"] [data-wl-first]:not(.section-hero-careers) .container-hero-headline.home { min-height: 0; margin: 0 auto; padding: clamp(32px, 4.5vw, 72px) 0 clamp(32px, 4.5vw, 64px); }

/* The For pages' first screen (/for/brands, /for/talent-management, ...): "For" is a small lime label and the audience
   is the big title, the page's picture beside them (as the For design had since 15 Oct, without the added reels). */
html[data-wl-redesign="light"] .section-page-hero .container-for-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.4vw, 64px);
  width: 100%;
  max-width: var(--wl-max);
  margin: 0 auto;
  text-align: left;
}
html[data-wl-redesign="light"] .section-page-hero .container-for-hero .container-hero-headline {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
html[data-wl-redesign="light"] .section-page-hero .container-for-hero .container-hero-headline > :is(.spacer-0-5em, .spacer-1em) { display: none; }
html[data-wl-redesign="light"] .section-page-hero .container-for-hero .text-hero-pretitle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  color: var(--wl-lime);
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}
html[data-wl-redesign="light"] .section-page-hero .container-for-hero .text-hero-pretitle::before { content: ""; width: 34px; height: 2px; background: currentColor; }
html[data-wl-redesign="light"] .section-page-hero .container-for-hero .text-hero-pretitle ~ h1.h-page-hero {
  max-width: 100%;
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-size: clamp(1.4rem, 8.5cqi, 4.2rem);  /* cqi: the longest word ("REPRESENTATION") fits a phone's column */
  font-weight: 400;
  line-height: 1.02;
  text-align: left;
  text-wrap: balance;
  overflow-wrap: break-word;
}
html[data-wl-redesign="light"] .section-page-hero .container-for-hero .button-hero-white { margin: 0; }
html[data-wl-redesign="light"] .section-page-hero .container-for-hero .div-block-7 { width: 100%; }
html[data-wl-redesign="light"] .section-page-hero .container-for-hero .image-12 { display: block; width: 100%; height: auto; border-radius: 20px; }

/* /about-us and /careers: Webflow lays their title over the hero photo or film (house rule: no words on a photo).
   The photo or film sits clean in a rounded frame with the title under it, as both pages have had since 15 Oct
   (pages/about.css, pages/careers.css). */
html[data-wl-redesign="light"] .section-hero-careers { display: block; min-height: 0; margin: 0; padding: 14px var(--wl-gutter) clamp(26px, 3.2vw, 48px); overflow: visible; background: var(--wl-ink); color: #fff; text-align: left; }
html[data-wl-redesign="light"] .section-hero-careers::after { content: none; }
html[data-wl-redesign="light"] .section-hero-careers.about-hero::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 1100px;
  height: clamp(240px, 38vw, 560px);
  margin: 0 auto;
  border-radius: 20px;
  background: var(--wl-ink) url("https://cdn.prod.website-files.com/680941018c753b77b6fbed37/6aba477be969787078502388_snowboading%20stunt.avif") 50% 38% / cover no-repeat;
}
html[data-wl-redesign="light"] .section-hero-careers .careers-hero-video {
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  max-width: 1100px;
  height: clamp(240px, 38vw, 560px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  background: var(--wl-ink);
}
html[data-wl-redesign="light"] .section-hero-careers .careers-hero-video > video { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
html[data-wl-redesign="light"] .section-hero-careers :is(.container-hero, .container-for-hero) { display: block; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0; }
html[data-wl-redesign="light"] .section-hero-careers .container-hero-headline.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: clamp(22px, 3vw, 40px) 0 0;
  border-radius: 0;
  text-align: center;
}
html[data-wl-redesign="light"] .section-hero-careers .spacer-0-5em { display: none; }
html[data-wl-redesign="light"] .section-hero-careers :is(h1, .text-hero-pretitle) {
  margin: 0;
  padding: 0;
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.2rem);
  font-weight: 400;
  line-height: 1.06;
  text-align: center;
  text-transform: none;
  text-wrap: balance;
}
html[data-wl-redesign="light"] .section-hero-careers .button-6 { margin-top: 18px; padding: 12px 26px; border: 0; border-radius: 999px; background: var(--wl-lime); background-image: none; color: var(--wl-ink); font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; opacity: 1; }

/* ---------- 2. Blocks: one rhythm, edge to edge ---------- */
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud) {
  padding-top: var(--wl-l-pad);
  padding-bottom: var(--wl-l-pad);
  margin-top: 0;      /* Webflow's 40 px bottom margin on its grey bands left strips between them */
  margin-bottom: 0;
  border-radius: 0;   /* square corners, so no notch shows where two colours meet */
}
/* a block the alternation leaves alone keeps a plain white or navy ground (no third, grey tone) */
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy) { background-color: var(--wl-l-bg); }
html[data-wl-redesign="light"] :is(.sp-section-dark, .section-dark-cloud) { background-color: var(--wl-ink); }

/* one content width for every block (some team blocks span the whole window, others stop at 960 px) */
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud) > :is(.container, .container.full-width) {
  width: 100%;
  max-width: var(--wl-max);
  margin-left: auto;
  margin-right: auto;
}
/* The shell turns .container-960-left into the navy Let's Talk card. On these pages the same box also holds whole
   pages of text (/event-commercialisation), so only the box with the contact form is a card. */
html[data-wl-redesign="light"] .container-960-left:not(:has(.form-block)) {
  max-width: var(--wl-l-measure);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* ---------- 3. Colours: what words look like on white and on navy ----------
   The places below say which colours their words take; the parts _tools/white_bands.py marks come last and win. */
html[data-wl-redesign="light"] :where(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .hero-heading-center, .sp-card) {
  --wl-b-ink: var(--wl-l-ink);
  --wl-b-text: var(--wl-l-text);
  --wl-b-link: var(--wl-l-link);
  --wl-b-underline: currentColor;
  --wl-b-marker: var(--wl-l-ink);
  --wl-b-line: var(--wl-l-line);
  --wl-b-accent: var(--wl-l-ink);
  --black-almost: #030303;
}
html[data-wl-redesign="light"] :where(.sp-section-dark, .section-dark-cloud, .section-black, .wl-faq-section-1, [class*="wl-faq-section-1-copy"], .container-960-left:has(.form-block)) {
  --wl-b-ink: #fff;
  --wl-b-text: rgba(255, 255, 255, .82);
  --wl-b-link: #fff;
  --wl-b-underline: var(--wl-lime);
  --wl-b-marker: var(--wl-lime);
  --wl-b-line: rgba(255, 255, 255, .16);
  --wl-b-accent: var(--wl-lime);
  --black-almost: #eef1f7;
}
/* the team's white cards keep dark words wherever they sit */
html[data-wl-redesign="light"] .sp-card[class] {
  --wl-b-ink: var(--wl-l-ink);
  --wl-b-text: var(--wl-l-text);
  --wl-b-link: var(--wl-l-link);
  --wl-b-underline: currentColor;
  --wl-b-marker: var(--wl-l-ink);
  --black-almost: #030303;
}

/* ---------- 4. Design 1: the parts take turns ---------- */
html[data-wl-redesign="light"] [data-wl-white] {
  background-color: var(--wl-l-bg) !important;  /* !important: some team blocks carry an inline colour */
  --wl-b-ink: var(--wl-l-ink);
  --wl-b-text: var(--wl-l-text);
  --wl-b-link: var(--wl-l-link);
  --wl-b-underline: currentColor;
  --wl-b-marker: var(--wl-l-ink);
  --wl-b-line: var(--wl-l-line);
  --wl-b-accent: var(--wl-l-ink);
  --black-almost: #030303;
}
html[data-wl-redesign="light"] [data-wl-navy] {
  background-color: var(--wl-ink) !important;
  --wl-b-ink: #fff;
  --wl-b-text: rgba(255, 255, 255, .82);
  --wl-b-link: #fff;
  --wl-b-underline: var(--wl-lime);
  --wl-b-marker: var(--wl-lime);
  --wl-b-line: rgba(255, 255, 255, .16);
  --wl-b-accent: var(--wl-lime);
  --black-almost: #eef1f7;
}
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) { background-image: none !important; }
/* something loose between blocks (a button, a picture) carries on the part above it */
html[data-wl-redesign="light"] [data-wl-cont] { display: flow-root; box-sizing: border-box; padding: 0 var(--wl-gutter) var(--wl-l-part-pad); text-align: center; }
/* cards and panels with a ground of their own (white_bands.py reads it from the stylesheets) keep words that read on it */
html[data-wl-redesign="light"] [data-wl-surface="light"] {
  --wl-b-ink: var(--wl-l-ink);
  --wl-b-text: var(--wl-l-text);
  --wl-b-link: var(--wl-l-link);
  --wl-b-underline: currentColor;
  --wl-b-marker: var(--wl-l-ink);
  --wl-b-line: var(--wl-l-line);
  --wl-b-accent: var(--wl-l-ink);
  --black-almost: #030303;
}
html[data-wl-redesign="light"] [data-wl-surface="dark"] {
  --wl-b-ink: #fff;
  --wl-b-text: rgba(255, 255, 255, .82);
  --wl-b-link: #fff;
  --wl-b-underline: var(--wl-lime);
  --wl-b-marker: var(--wl-lime);
  --wl-b-line: rgba(255, 255, 255, .16);
  --wl-b-accent: var(--wl-lime);
  --black-almost: #eef1f7;
}
/* a chapter inside a block: room above and below, its colour painted edge to edge of the window */
html[data-wl-redesign="light"] [data-wl-band] {
  position: relative;
  padding-top: var(--wl-l-part-pad);
  padding-bottom: var(--wl-l-part-pad);
}
/* every part paints its colour to both edges of the window, also when it sits in a narrow column */
html[data-wl-redesign="light"] [data-wl-white] { box-shadow: 0 0 0 100vmax var(--wl-l-bg); clip-path: inset(-1px -100vmax); }  /* -1px: no hairline seam between parts */
html[data-wl-redesign="light"] [data-wl-navy] { box-shadow: 0 0 0 100vmax var(--wl-ink); clip-path: inset(-1px -100vmax); }
html[data-wl-redesign="light"] [data-wl-band] > :is(h2, h3):first-child { margin-top: 0; }
/* a block split into chapters adds no strip of its own colour under them, or above them when it has no intro */
html[data-wl-redesign="light"] [data-wl-chaptered] { padding-bottom: 0 !important; }
html[data-wl-redesign="light"] [data-wl-chaptered][data-wl-no-intro] { padding-top: 0 !important; }
/* a button row left after a block's last chapter continues that chapter */
html[data-wl-redesign="light"] [data-wl-tail] { margin-top: 0; margin-bottom: 0; padding-bottom: var(--wl-l-part-pad); }
/* the FAQ changes colour from the part above it, so it gets its own room at the top */
html[data-wl-redesign="light"] :is(.wl-faq-section-1, [class*="wl-faq-section-1-copy"]):is([data-wl-white], [data-wl-navy]) { padding-top: clamp(48px, 6vw, 88px) !important; }
/* A team page's own copy of the FAQ band (class "wl-faq-section-1-copy-copy" on /supercar-blondie and
   /creator-economy-investment) gets the shell FAQ's room and width. */
html[data-wl-redesign="light"] [class*="wl-faq-section-1-copy"] { padding: clamp(48px, 6vw, 88px) var(--wl-gutter); }
html[data-wl-redesign="light"] [class*="wl-faq-section-1-copy"] > .sp-container { width: 100%; max-width: var(--wl-max); margin: 0 auto; }

/* words that sit straight in the page (no box of their own, e.g. a news story): the text column and room */
html[data-wl-redesign="light"] [data-wl-loose] {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--wl-l-measure) + 2 * var(--wl-gutter));
  margin-left: auto;
  margin-right: auto;
  padding: var(--wl-l-pad) var(--wl-gutter);
}

/* ---------- 5. Type: Poppins headings, one size per level (Bungee stays the hero title's) ----------
   The heading lists sit in :where() (5 Nov, last run): inside :is() the longest one ([data-wl-band] > h3:first-child...)
   lent every heading its weight, so the rules below ("the first heading starts at the top", the FAQ heading) lost.
   h2 is a section heading and h3 a sub-heading on every page; the team's .sp-h2 class marks a section heading whatever
   its tag (/supercar-blondie). By structure, not by words: a text block with no h2 in it uses its plain h3s as section
   headings and its .ec-sub h3s as sub-headings (/event-commercialisation). */
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, [data-wl-white], [data-wl-navy], .hero-heading-center)
  :where(h2:not(.heading-creator-grid-name, .wl-faq-title-1, .heading-15, .sp-card-title), :is(h3, h4).sp-h2,
      :is(.rich-text-block, .w-richtext):not(:has(h2)) > h3:not(.ec-sub, .sp-card-title),
      [data-wl-band] > h3:first-child:not([class*="sub"])) {
  margin-top: 1.7em;
  margin-bottom: .5em;
  font-family: Poppins, sans-serif;
  font-size: var(--wl-l-h2);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
  text-transform: none;
  text-wrap: balance;
}
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, [data-wl-white], [data-wl-navy], .hero-heading-center)
  :where(:is(h3, h4):not(.heading-15, .sp-card-title, .heading-creator-grid-name, .sp-h2):not(:is(.rich-text-block, .w-richtext):not(:has(h2)) > h3:not(.ec-sub)):not([data-wl-band] > h3:first-child:not([class*="sub"]))) {
  margin-top: 1.5em;
  margin-bottom: .4em;
  font-family: Poppins, sans-serif;
  font-size: var(--wl-l-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-transform: none;
}
/* a sub-heading straight under its section heading sits close to it */
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, [data-wl-white], [data-wl-navy]) h2 + :is(h3, h4) { margin-top: .2em; }
/* the first heading of a block, a chapter or a text block starts at the top */
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, [data-wl-white], [data-wl-navy])
  :is(h2, h3, h4):first-child { margin-top: 0; }
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, [data-wl-white], [data-wl-navy], [data-wl-loose])
  :is(p, li, .w-richtext, .rich-text-block, .tagline-text) {
  font-family: Poppins, sans-serif;
  font-size: var(--wl-l-body);
  line-height: 1.7;
}
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, [data-wl-white], [data-wl-navy], [data-wl-loose]) p { margin-top: 0; margin-bottom: 1em; }
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, [data-wl-white], [data-wl-navy]) :is(strong, b) { font-weight: 600; }
/* lists: small squares, a little air between items */
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, [data-wl-white], [data-wl-navy])
  :is(.w-richtext, .rich-text-block) ul {
  margin: 0 0 1.3em;
  padding-left: 1.25em;
  list-style: square;
}
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, [data-wl-white], [data-wl-navy])
  :is(.w-richtext, .rich-text-block) li { margin: 0 0 .45em; padding-left: .2em; }

/* ---------- 6. Words take their part's colours ----------
   !important: Webflow's classes and the shell's dark-page rules colour some of these words with stronger selectors. */
html[data-wl-redesign="light"] :where(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, .section-black, .wl-faq-section-1, [class*="wl-faq-section-1-copy"], .hero-heading-center, .container-960-left:has(.form-block), [data-wl-white], [data-wl-navy])
  :is(h1, h2, h3, h4, h5, h6, strong, b, .label-brands, .text-block-11, .wl-faq-title-1):not(.heading-creator-grid-name) {
  color: var(--wl-b-ink) !important;
}
html[data-wl-redesign="light"] :where(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, .section-black, .wl-faq-section-1, [class*="wl-faq-section-1-copy"], .hero-heading-center, .container-960-left:has(.form-block), [data-wl-white], [data-wl-navy])
  :is(p, li, label, td, th, .w-richtext, .rich-text-block, .tagline-text, .wl-faq-answer-1-2, .text-block-26) {
  color: var(--wl-b-text) !important;
}
/* links inside the words: underlined; indigo on white, white with a lime line on navy */
html[data-wl-redesign="light"] :where(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, .section-black, .wl-faq-section-1, [class*="wl-faq-section-1-copy"], .hero-heading-center, [data-wl-white], [data-wl-navy])
  :is(:is(p, li, td, .w-richtext, .rich-text-block) a:not([class*="button"]):not(.sp-btn), a.link-read-more) {
  color: var(--wl-b-link) !important;
  text-decoration: underline;
  text-decoration-color: var(--wl-b-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
html[data-wl-redesign="light"] :where(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, .section-black, .wl-faq-section-1, [class*="wl-faq-section-1-copy"], [data-wl-white], [data-wl-navy])
  li::marker { color: var(--wl-b-marker) !important; }
/* the FAQ on either ground: its lines, questions and arrow */
html[data-wl-redesign="light"] .wl-faq-grid > details[class], html[data-wl-redesign="light"] .wl-faq-grid > details { border-color: var(--wl-b-line, rgba(255, 255, 255, .16)) !important; }
html[data-wl-redesign="light"] .wl-faq-grid > details > summary,
html[data-wl-redesign="light"] .wl-faq-grid :is(.wl-faq-question, summary > span) { color: var(--wl-b-ink, #fff) !important; }
html[data-wl-redesign="light"] [data-wl-white] .wl-faq-grid > details > summary:hover,
html[data-wl-redesign="light"] [data-wl-white] .wl-faq-grid > details[open] > summary { color: var(--wl-l-link) !important; }
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy], [class*="wl-faq-section-1-copy"]) .wl-faq-grid .wl-faq-arrow-1 { color: var(--wl-b-accent) !important; }

/* lime things keep dark words wherever they sit: buttons and the creator cards' category labels */
html[data-wl-redesign="light"] :is(.button-highlight, .button-hero-white, .sp-btn, .sp-btn-outline, .partner-button, .label-creator-grid-category:not(.dark)):not(.navigation),
html[data-wl-redesign="light"] :is(.button-highlight, .button-hero-white, .sp-btn, .sp-btn-outline, .partner-button, .label-creator-grid-category:not(.dark)):not(.navigation) * {
  --black-almost: #030303;
  color: #081431 !important;
}

/* buttons keep the one button system (buttons.css); they get room from what follows */
html[data-wl-redesign="light"] :is(.button-row, .sp-btn-row) { margin: 1.4em 0 1.8em; gap: 12px; }
html[data-wl-redesign="light"] :is(.button-row, .sp-btn-row) + :is(h2, h3) { margin-top: 1.4em; }

/* photos: one corner radius */
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud)
  img:is(.image-rounded-corners, [class*="image-"]) { border-radius: 16px; }

/* ---------- 7. Page photos chosen in the redesign stay (same files, now in the light finish) ---------- */
/* /creator-athlete-marketing: the collage as WebP (Webflow's file is a 3.9 MB PNG); same switch point as its preload */
html[data-wf-page="6a8d5f9342c6945e98f238a8"] .container-case-study-hero-image.creators-and-campaigns {
  background-image: url("/_redesign/webp/223af517a6cf1fdf.webp");
  background-position: 50% 38%;
}
@media screen and (max-width: 767px) {
  html[data-wf-page="6a8d5f9342c6945e98f238a8"] .container-case-study-hero-image.creators-and-campaigns { background-image: url("/_redesign/webp/f704a221a0f655a1.webp"); }
}
/* every other page the team gives the same collage (/influencer-marketing-agency, its own Webflow page, still loaded the
   3.9 MB PNG: its first screen painted after 22.7 s on the phone test): the same two WebP copies (260 KB and 107 KB),
   the page's own crop */
html[data-wl-redesign="light"] .container-case-study-hero-image.creators-and-campaigns { background-image: url("/_redesign/webp/223af517a6cf1fdf.webp"); }
@media screen and (max-width: 767px) {
  html[data-wl-redesign="light"] .container-case-study-hero-image.creators-and-campaigns { background-image: url("/_redesign/webp/f704a221a0f655a1.webp"); }
}
/* /event-commercialisation: the real event photo the redesign chose over Webflow's stock concert crowd */
html[data-wf-page="6abb9d0b530c6fa5c2e4a009"] .container-case-study-hero-image[class] {
  background-image: url("/_redesign/webp/9f7d5e118e3b1266.webp");
  background-position: 50% 42%;
}
/* /event-production: Webflow's own event photo, filled edge to edge instead of tiled at 70% */
html[data-wf-page="697c4c1d7ead727025048a38"] .container-case-study-hero-image.events.main-events-page-hero {
  background-image: url("https://cdn.prod.website-files.com/680941018c753b77b6fbed37/6ac78a3391e1c59a4e1868e6_EVENT%20PAGE.webp");
  background-position: 50% 34%;
}
/* ---------- 8. The copied footer some team pages carry ("variant-" classes): its logo row sized itself to the 1,600 px
   logo files and ran 6,700 px off the page; four equal columns like the shared footer ---------- */
html[data-wl-redesign="light"] .container-logos-inverted .grid-brand-logos[class*="variant-"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
html[data-wl-redesign="light"] .container-logos-inverted .grid-brand-logos[class*="variant-"] .container-grid-wavelength-brand { min-width: 0; }
html[data-wl-redesign="light"] .container-logos-inverted .grid-brand-logos[class*="variant-"] .image-6 { width: min(62%, 170px); max-width: 100%; }
/* That row still shows Webflow's own black logo files from its CDN, which Webflow turns white with an invert on
   .container-logos-inverted. redesign.css switches that invert off (the shared footer's logos are swapped for white
   files), so on these pages the logos went black on navy and vanished (6 Nov: /underwritten, /supercar-blondie,
   /creator-economy-investment). Invert each such file once; all four show (Webflow's last one was inverted twice). */
html[data-wl-redesign="light"] .container-logos-inverted img[src*="website-files.com"] { filter: invert(1); }

/* ---------- 9. Template pieces on the navy first screen and in parts ---------- */
/* Magazine articles (one Webflow template, 36 pages): the first screen is navy like every page's, so the breadcrumb,
   title, facts and intro read light, the picture sits clean beside them, the first-screen button is the lime one.
   Carried over from the article design these pages had since 15 Oct (pages/magazine-article.css). */
html[data-wl-redesign="light"] .legal-section { margin: 0; padding: clamp(22px, 3vw, 44px) var(--wl-gutter) 0; font-family: Poppins, sans-serif; }
html[data-wl-redesign="light"] .legal-section .global-container { width: 100%; max-width: var(--wl-max); margin: 0 auto; }
html[data-wl-redesign="light"] .legal-section .w-container { width: 100%; max-width: none; margin: 0; }
html[data-wl-redesign="light"] .legal-section .w-container::before,
html[data-wl-redesign="light"] .legal-section .w-container::after { content: none; }
html[data-wl-redesign="light"] .blog-hero-container { padding-bottom: clamp(40px, 5vw, 72px); }
html[data-wl-redesign="light"] .blog-hero-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 clamp(18px, 2.4vw, 30px); font-size: 13px; line-height: 1.4; }
html[data-wl-redesign="light"] .blog-hero-nav .text-hero-nav { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; color: var(--wl-faint); font-size: 13px; font-weight: 500; text-decoration: none; }
html[data-wl-redesign="light"] .blog-hero-nav .text-hero-nav:first-child { color: var(--wl-lime); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
html[data-wl-redesign="light"] .blog-hero-nav .text-hero-nav:hover { color: #fff; }
html[data-wl-redesign="light"] .blog-hero-nav .arrow-hero-nav { width: 10px; height: 10px; filter: invert(1); opacity: .45; }  /* a black arrow icon */
html[data-wl-redesign="light"] .blog-hero-nav .primary-keyword { color: var(--wl-faint); font-size: 13px; text-align: left; }
html[data-wl-redesign="light"] .blog-hero-main { display: grid; height: auto; margin: 0; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
html[data-wl-redesign="light"] .blog-hero-content { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; height: auto; }
html[data-wl-redesign="light"] .blog-hero-content > .blog-heading-9 { margin: 0 0 22px; color: var(--wl-lime); font-family: Bungee, sans-serif; font-size: clamp(1.75rem, 1rem + 1.9vw, 2.75rem); font-weight: 400; line-height: 1.06; letter-spacing: 0; text-wrap: balance; }
html[data-wl-redesign="light"] .blog-hero-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; width: 100%; margin: 0 0 22px; padding: 12px 0; border-top: 1px solid var(--wl-line-2); border-bottom: 1px solid var(--wl-line); }
html[data-wl-redesign="light"] .blog-hero-info-item-2 { display: flex; align-items: center; gap: 8px; margin: 0 18px 0 0; padding: 0 18px 0 0; border-right: 1px solid var(--wl-line-2); }
html[data-wl-redesign="light"] .blog-hero-info-item-2.blog-hero-info-item-last { margin-right: 0; padding-right: 0; border-right: 0; }
html[data-wl-redesign="light"] .blog-hero-info .img-2 { width: 18px; height: 18px; filter: invert(1); opacity: .6; }  /* calendar and clock icons */
html[data-wl-redesign="light"] .blog-hero-info .text-small-2 { color: var(--wl-muted); font-size: 13.5px; line-height: 1.3; }
html[data-wl-redesign="light"] .blog-hero-info .blog-author-name { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; }
html[data-wl-redesign="light"] .blog-hero-info .div-block-45 { width: auto; }
html[data-wl-redesign="light"] .blog-article-intro { max-width: 54ch; margin: 0 0 24px; color: rgba(255, 255, 255, .86); font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); line-height: 1.6; }
html[data-wl-redesign="light"] .blog-hero-content > .button-2 { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px; background: var(--wl-lime); box-shadow: none; color: var(--wl-ink); font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; }
html[data-wl-redesign="light"] .blog-hero-content > .button-2:hover { background: #e6ff5c; }
html[data-wl-redesign="light"] .blog-hero-main > .blog-hero-image-container-2 { grid-column: 2; grid-row: 1; display: block; width: 100%; height: auto; padding: 0; overflow: hidden; border-radius: var(--wl-r-lg); background-color: var(--wl-ink) !important; }
html[data-wl-redesign="light"] .blog-hero-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
/* the article and "More Similar Blogs" boxes are parts: room inside them */
html[data-wl-redesign="light"] :is(.blog-article-content, .blog-more):is([data-wl-white], [data-wl-navy]) { padding-top: var(--wl-l-pad); padding-bottom: var(--wl-l-pad); }
html[data-wl-redesign="light"] .blogs-collection-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
html[data-wl-redesign="light"] .blogs-collection-list > .w-dyn-item { width: auto; min-width: 0; }
html[data-wl-redesign="light"] .blog-more a { color: var(--wl-b-ink); }

/* the Supercar Blondie block on the talent pages (our own block, text-fixes.json #17): a navy card on either ground,
   her reel in a phone beside her name, total and platform links. Nothing sits on the video. */
html[data-wl-redesign="light"] .wl-sb-feature {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: clamp(150px, 17vw, 228px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  width: 100%;
  max-width: var(--wl-max);
  margin: clamp(40px, 5vw, 72px) auto;
  padding: clamp(22px, 3vw, 44px);
  border-radius: var(--wl-r-lg);
  background: var(--wl-ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
  --wl-b-ink: #fff;
  --wl-b-text: rgba(255, 255, 255, .82);
  --wl-b-link: rgba(255, 255, 255, .78);
  --wl-b-underline: transparent;
}
html[data-wl-redesign="light"] .wl-sb-reel { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 24px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 5px #03060f, 0 0 0 6px rgba(255, 255, 255, .16); }
html[data-wl-redesign="light"] .wl-sb-reel::before { content: ""; position: absolute; z-index: 2; top: 2.6%; left: 50%; width: 30%; height: 3.4%; border-radius: 999px; background: #000; transform: translateX(-50%); }
html[data-wl-redesign="light"] .wl-sb-reel .wl-reel-video { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-wl-redesign="light"] .wl-sb-body { min-width: 0; }
html[data-wl-redesign="light"] .wl-sb-cat { display: inline-block; padding: 5px 12px 4px; border: 1px solid var(--wl-line-2); border-radius: 999px; color: var(--wl-muted); font-size: 12px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
html[data-wl-redesign="light"] .wl-sb-body > a.wl-sb-name { display: block; margin: 18px 0 14px; color: #fff; font-family: Bungee, sans-serif; font-size: clamp(2rem, 1.1rem + 3.4vw, 4.6rem); font-weight: 400; line-height: .98; text-decoration: none; text-wrap: balance; overflow-wrap: break-word; }
html[data-wl-redesign="light"] .wl-sb-body > a.wl-sb-name::after { content: " \2192"; color: var(--wl-lime); font-family: Poppins, sans-serif; font-size: .6em; vertical-align: .12em; }
html[data-wl-redesign="light"] .wl-sb-body > a.wl-sb-name:hover { color: var(--wl-lime); }
html[data-wl-redesign="light"] .wl-sb-feature p.wl-sb-total { margin: 0 0 22px; color: var(--wl-muted) !important; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); line-height: 1.3; }
html[data-wl-redesign="light"] .wl-sb-feature .wl-sb-total b { color: var(--wl-lime) !important; font-family: Bungee, sans-serif; font-size: 1.5em; font-weight: 400; }
html[data-wl-redesign="light"] .wl-sb-feature ul.wl-sb-split { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
html[data-wl-redesign="light"] .wl-sb-feature ul.wl-sb-split > li { margin: 0; padding: 0; }
html[data-wl-redesign="light"] .wl-sb-feature ul.wl-sb-split > li::marker { content: none; }
html[data-wl-redesign="light"] .wl-sb-split a { display: inline-block; padding: 7px 14px 6px; border: 1px solid var(--wl-line-2); border-radius: 999px; color: var(--wl-muted) !important; font-size: 14px; line-height: 1.3; text-decoration: none !important; }
html[data-wl-redesign="light"] .wl-sb-split a b { color: #fff !important; font-weight: 600; }
html[data-wl-redesign="light"] .wl-sb-split a:hover { border-color: var(--wl-lime); color: #fff !important; }

/* the article: its contents column beside the text on laptops, above it on tablets and phones; tables ruled, and on
   phones they scroll sideways inside themselves instead of pushing the page wider (as the article design had since 15 Oct) */
html[data-wl-redesign="light"] .blog-post-body { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
html[data-wl-redesign="light"] .blog-post-right { display: block; width: auto; min-width: 0; }
html[data-wl-redesign="light"] .blog-post-right a { overflow-wrap: anywhere; }
html[data-wl-redesign="light"] .blog-post-right .w-richtext table { width: 100%; margin: 1.6em 0 2em; border-collapse: collapse; font-size: .86em; line-height: 1.5; }
html[data-wl-redesign="light"] .blog-post-right .w-richtext th { padding: 0 14px 12px 0; border-bottom: 2px solid var(--wl-b-ink, var(--wl-l-ink)); font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.35; text-align: left; text-transform: uppercase; vertical-align: bottom; }
html[data-wl-redesign="light"] .blog-post-right .w-richtext td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--wl-b-line, var(--wl-l-line)); vertical-align: top; }
html[data-wl-redesign="light"] .blog-post-right .w-richtext td:first-child { font-weight: 600; }

/* the article's text column may shrink below its widest table (the table then scrolls inside itself) */
html[data-wl-redesign="light"] :is(.blog-post-right, .blog-right-content, .blog-article-section) > * { min-width: 0; max-width: 100%; }

/* embeds (videos, Instagram and Facebook posts) never run wider than their column; on case studies the Instagram posts
   sit three across, two on tablets, one on phones (as the case-study design had since 15 Oct) */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(iframe, .w-embed, .w-iframe, .w-video) { max-width: 100%; }
html[data-wl-redesign="light"] .instagram-media { min-width: 0 !important; max-width: min(540px, 100%) !important; }
html[data-wl-redesign="light"] .rich-text-case-study-media { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2.2vw, 30px); }
html[data-wl-redesign="light"] .rich-text-case-study-media > .w-embed.w-script { display: flex; flex: 0 1 calc((100% - 2 * clamp(18px, 2.2vw, 30px)) / 3); justify-content: center; min-width: 0; }
html[data-wl-redesign="light"] .rich-text-case-study-media > .w-embed::before,
html[data-wl-redesign="light"] .rich-text-case-study-media > .w-embed::after { content: none; }
html[data-wl-redesign="light"] .rich-text-case-study-media .instagram-media { width: 100% !important; margin: 0 !important; border-radius: 14px !important; overflow: hidden; }
html[data-wl-redesign="light"] .rich-text-case-study-media > .w-embed.w-iframe { flex: 0 1 560px; max-width: 100%; overflow: hidden; border-radius: 18px; }
html[data-wl-redesign="light"] .rich-text-case-study-media > .w-embed.w-iframe iframe { display: block; max-width: 100%; }

/* the big number rows (/careers' "9 / 20 / 5 / 15+"): lime on navy, navy on white */
html[data-wl-redesign="light"] .text-wavelength-number-headline { color: var(--wl-b-accent, var(--wl-l-ink)) !important; }

/* /careers' perks: no grey cards with white words; the words take their part's colours, the icons turn white on navy */
html[data-wl-redesign="light"] .flex-block-13.benefits, html[data-wl-redesign="light"] .flex-block-13.benefits .div-block-39 { background: none; }
html[data-wl-redesign="light"] .flex-block-13.benefits :is(.benefit-title, [class*="text-home-co"]) { color: var(--wl-b-ink) !important; }
html[data-wl-redesign="light"] .flex-block-13.benefits :is(p, .sm-text) { color: var(--wl-b-text) !important; }
html[data-wl-redesign="light"] [data-wl-navy] .benefit-icon:not([src^="/_redesign/ink/"]) { filter: invert(1); }  /* the build gives them white copies (white_bands.ink_pictures) */

/* nothing in a text column runs wider than the column (phones down to 320 px): boxes shrink, tables scroll inside */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .container-960-left > * { box-sizing: border-box; max-width: 100%; min-width: 0; }
/* pictures keep their shape: channel icons and the copied footer's logos */
html[data-wl-redesign="light"] img.image-channel-icon { object-fit: contain; }
html[data-wl-redesign="light"] .container-logos-inverted .grid-brand-logos[class*="variant-"] .image-6 { height: auto; object-fit: contain; }
/* the article's contents column: links wrap inside it instead of spilling past it */
html[data-wl-redesign="light"] :is(.blog-post-left, .blog-cta-wrap, .blog-sticky-links) { width: auto; max-width: 100%; min-width: 0; box-sizing: border-box; }
html[data-wl-redesign="light"] .blog-sticky-links a { overflow-wrap: anywhere; }
html[data-wl-redesign="light"] .blog-post-right .w-richtext table { font-size: max(14px, .9em); }
/* a heading the team set as h1 inside a section fits a phone */
html[data-wl-redesign="light"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud, [data-wl-white], [data-wl-navy]) h1 {
  font-family: Poppins, sans-serif;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 700;  /* /supercar-blondie set one at 500, thinner than every other heading (5 Nov) */
  line-height: 1.14;
  letter-spacing: -.015em;
  text-transform: none;
  overflow-wrap: break-word;
}

/* button rows wrap instead of running off a phone */
html[data-wl-redesign="light"] :is(.button-row, .sp-btn-row) { flex-wrap: wrap; }

/* ---------- 10. One column, one alignment, one picture shape (5 Nov 2026, last run) ----------
   Charlie: "things on certain formats that look bad in terms of being centred, being in the right place ...
   inconsistent image sizing". The team's layouts mix centred and left words, 960, 1,120, 1,200 and full-width
   columns, and pictures that change shape from row to row. Every part now reads the same way: words left-aligned in
   one text column (at most 960 px, centred on the page), its lone buttons lined up with the words, grids, rows and
   cards at the full content width, and repeated pictures one shape. No words change. */
html[data-wl-redesign="light"] {
  --wl-l-col: 960px;  /* the one text column */
}
/* words: left-aligned in every part (the first screen keeps its centred title; cards keep their own) */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(h1, h2, h3, h4, h5, p, ul, ol, li, blockquote, .w-richtext, .rich-text-block, .label-brands, div[class*="heading"]):not(.heading-creator-grid-name, .label-creator-grid-category, [class*="wl-faq"]) {
  text-align: left;
}
/* the text column: a block of words wider than the column (a 1,300 px paragraph, a centred 1,000 px statement) sits in
   the 960 px column in the middle; blocks beside a grid keep the grid's width so heading and grid line up */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(.container-960-left, .container-960-centered, .container, .sp-container, .w-container, [data-wl-band], [data-wl-cont], [data-wl-white], [data-wl-navy]):not(:has(> :is(.w-dyn-list, .w-layout-grid, .w-row, [class*="grid"], [class*="collection"]))) > :is(p, h1, h2, h3, h4, ul, ol, blockquote, .w-richtext, .rich-text-block, .text-block-26, .button-row, .sp-btn-row) {
  /* explicit side margins (not auto): in Webflow's centred flex boxes an auto margin would shrink the block and
     centre it; these keep it the column's full width, its left edge on the column's left edge */
  box-sizing: border-box;
  max-width: none;
  margin-left: max(0px, calc((100% - var(--wl-l-col)) / 2));
  margin-right: max(0px, calc((100% - var(--wl-l-col)) / 2));
  align-self: stretch;
}
html[data-wl-redesign="light"] :is(.container-960-left, .container-960-centered):not(:has(.form-block)) { margin-left: auto; margin-right: auto; }
/* a part's buttons line up with its words: rows start at the column's left edge, a lone button sits there too */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(.button-row, .sp-btn-row) { justify-content: flex-start; }
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(.container-960-left, .container-960-centered, .container, .sp-container, .w-richtext, .rich-text-block, [data-wl-band], [data-wl-cont]) > :is(a.w-button, a[class*="button"], .sp-btn):not(.navigation) {
  display: flex;
  width: fit-content;
  margin-left: max(0px, calc((100% - var(--wl-l-col)) / 2));
  margin-right: auto;
}
html[data-wl-redesign="light"] [data-wl-cont] { text-align: left; }
/* buttons inside a column of a row (a service row, an event row) sit at the column's left edge too */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is([class*="column"], .w-col) > :is(a.w-button, a[class*="button"], .sp-btn):not(.navigation) { align-self: flex-start; margin-left: 0; margin-right: auto; }
/* a picture-and-words pair the team set as two half columns stacks into a narrow centred strip; it reads as a row
   like every other picture-and-words row (picture left, words right), and stacks on phones */
@media screen and (min-width: 768px) {
  html[data-wl-redesign="light"] .display-flex:has(> .column-50-left-aligned + .column-50-left-aligned) {
    flex-direction: row;
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
  }
  html[data-wl-redesign="light"] .display-flex:has(> .column-50-left-aligned + .column-50-left-aligned) > .column-50-left-aligned { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
  /* each of these rows is a part of its own (/creator-economy-investment): the picture changes side with the colour */
  html[data-wl-redesign="light"] :is([data-wl-navy] .display-flex, .display-flex[data-wl-navy]):has(> .column-50-left-aligned + .column-50-left-aligned) > .column-50-left-aligned:has(> img) { order: 2; }
  html[data-wl-redesign="light"] .display-flex:has(> .column-50-left-aligned + .column-50-left-aligned) > .column-50-left-aligned > img { width: 100%; height: auto; }
}
html[data-wl-redesign="light"] [data-wl-cont] > * { max-width: var(--wl-l-col); margin-left: auto; margin-right: auto; }
/* the shell's campaigns band: its heading starts at the left like every other part's */
html[data-wl-redesign="light"] .section-dark-cloud .label-brands { text-align: left; }
html[data-wl-redesign="light"] .section-dark-cloud > .container.centered { align-items: stretch; }

/* no hairlines where two parts meet: the colour change is the divider (Webflow's divider lines and section borders) */
html[data-wl-redesign="light"] .divider-gray { display: none; }
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) { border-top-width: 0; border-bottom-width: 0; }

/* repeated pictures, one shape: the service and event rows (3:2), the news cards (3:2), event logos one height */
html[data-wl-redesign="light"] .collection-item-grid :is(.column-50-left-aligned, .service-card-column) > img:is(.image-rounded-corners, .service-image) {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
html[data-wl-redesign="light"] .news-container img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
html[data-wl-redesign="light"] img.event-title-logo { width: auto; max-width: 100%; height: auto; max-height: 56px; object-fit: contain; }
/* embeds sit in the middle of their column */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(.w-embed, .w-iframe) > iframe { display: block; margin-left: auto; margin-right: auto; }

/* ---------- 11. Phones ---------- */
@media screen and (max-width: 767px) {
  html[data-wl-redesign="light"] .container-case-study-hero-image[class] { height: clamp(200px, 56vw, 320px); border-radius: 16px; }
  html[data-wl-redesign="light"] .collection-item-grid > :is([class*="column"], .w-col) { width: 100%; max-width: 100%; flex-basis: auto; }
  html[data-wl-redesign="light"] .blog-hero-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  html[data-wl-redesign="light"] .blog-hero-main > .blog-hero-image-container-2 { grid-column: 1; grid-row: 2; }
  html[data-wl-redesign="light"] .blog-hero-image { aspect-ratio: 16 / 9; }
  html[data-wl-redesign="light"] .blog-hero-content > .blog-heading-9 { margin-bottom: 16px; font-size: clamp(1.45rem, 6.6vw, 1.9rem); line-height: 1.08; }
  html[data-wl-redesign="light"] .blog-hero-info-item-2 { margin-right: 12px; padding-right: 12px; }
  html[data-wl-redesign="light"] .blogs-collection-list { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign="light"] .wl-sb-feature {
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr auto;
    grid-template-areas: "reel ." "reel cat" "reel name" "reel total" "reel ." "split split";
    align-items: start;
    gap: 0 18px;
    padding: 18px;
  }
  html[data-wl-redesign="light"] .wl-sb-reel { grid-area: reel; border-radius: 16px; }
  html[data-wl-redesign="light"] .wl-sb-body { display: contents; }
  html[data-wl-redesign="light"] .wl-sb-cat { grid-area: cat; justify-self: start; padding: 4px 9px 3px; font-size: 10px; }
  html[data-wl-redesign="light"] .wl-sb-body > a.wl-sb-name { grid-area: name; margin: 10px 0 8px; font-size: clamp(1.3rem, 6vw, 2rem); }
  html[data-wl-redesign="light"] .wl-sb-feature p.wl-sb-total { grid-area: total; margin: 0; font-size: 15px; }
  html[data-wl-redesign="light"] .wl-sb-feature ul.wl-sb-split { grid-area: split; gap: 6px; margin-top: 20px; }
  html[data-wl-redesign="light"] .wl-sb-split a { padding: 6px 11px 5px; font-size: 13px; }
  html[data-wl-redesign="light"] .section-page-hero .container-for-hero { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign="light"] .section-hero-careers { padding: 10px var(--wl-gutter) 28px; }
  html[data-wl-redesign="light"] .blog-post-right .w-richtext table { display: block; overflow-x: auto; }
}
@media screen and (max-width: 991px) {
  html[data-wl-redesign="light"] .rich-text-case-study-media > .w-embed.w-script { flex-basis: calc((100% - clamp(18px, 2.2vw, 30px)) / 2); }
}
@media screen and (max-width: 767px) {
  html[data-wl-redesign="light"] .rich-text-case-study-media > .w-embed.w-script { flex-basis: 100%; max-width: 100%; }
}
@media screen and (max-width: 767px) {
  html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) table { display: block; max-width: 100%; overflow-x: auto; }
}
@media screen and (max-width: 991px) {
  html[data-wl-redesign="light"] .blog-post-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  html[data-wl-redesign="light"] .blog-post-left { position: static; max-height: none; overflow: visible; }
}

/* ---------- 12. Last run, part 2 (5 Nov 2026): gutters, one button, rows, first screens, forms ----------
   From the 23-device sweep and the review frames at 1440, 768 and 390 px. No words change, nothing is hidden that
   shows on live (the boxes hidden below are empty), no picture is placed over words. */

/* one side gutter for every part at every width (at 768 px many team sections sat 9-10 px from the window's edge);
   the boxes inside a part use the part's gutter instead of their own, and stop at the content width */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]):not([data-wl-band]) {
  padding-left: var(--wl-gutter);
  padding-right: var(--wl-gutter);
}
/* a part inside a centred column (the For pages hold their sections in one 960 px column) or a part that is itself a
   centred box: the column's margin is the gutter, and the part only adds what a narrow window leaves missing
   (it added 48 px inside the column, so the creators grid started at 304 px instead of the column's 240) */
html[data-wl-redesign="light"] :is(.container-960-left, .container-960-centered) :is([data-wl-white], [data-wl-navy]):not([data-wl-band]) {
  padding-left: max(0px, calc(var(--wl-gutter) - max(0px, (100vw - var(--wl-l-col)) / 2)));
  padding-right: max(0px, calc(var(--wl-gutter) - max(0px, (100vw - var(--wl-l-col)) / 2)));
}
html[data-wl-redesign="light"] :is(.container, .sp-container, .w-container) :is([data-wl-white], [data-wl-navy]):not([data-wl-band]),
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]):not([data-wl-band]):is(.container, .sp-container, .w-container) {
  padding-left: max(0px, calc(var(--wl-gutter) - max(0px, (100vw - var(--wl-max)) / 2)));
  padding-right: max(0px, calc(var(--wl-gutter) - max(0px, (100vw - var(--wl-max)) / 2)));
}
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) > :is(.container, .container.full-width, .sp-container, .w-container) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wl-max);
  margin-left: auto;
  margin-right: auto;
}
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) > :is(.container, .sp-container, .w-container, .container-960-left, .container-960-centered):not(:has(.form-block)) {
  padding-left: 0;
  padding-right: 0;
}

/* empty boxes the team left in a page (a contact box with no form on /team and the news stories, an empty white
   section under a news story's first screen): white_bands.py marks them; they hold no words or pictures */
html[data-wl-redesign="light"] [data-wl-empty] { display: none !important; }

/* ---- buttons: one button everywhere (redesign/buttons.css: one height, 48 px, one weight, 600). The team's pages
   mixed 25-28 px pills, 39 px capitals and 52 px pills. ---- */
html[data-wl-redesign="light"] body :is(a.w-button, a.button-hero-white, a.button-highlight, a.partner-button, a.sp-btn, a.sp-btn-outline, input.w-button):not(.navigation) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 1;     /* Webflow's partner buttons don't shrink: a long label ran 18 px off a phone (/creator-ip) */
  max-width: 100%;
  min-height: 48px;
  height: auto;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background-color: var(--wl-lime);
  background-image: none;
  box-shadow: none;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  opacity: 1;
}
html[data-wl-redesign="light"] body :is(a.w-button, a.button-hero-white, a.button-highlight, a.partner-button, a.sp-btn, a.sp-btn-outline, input.w-button):not(.navigation):hover { background-color: #e6ff5c; }
/* dark words on every lime button ("Start Free", "View All Blogs" on the articles had white words), and no Webflow
   outline (3 px dark ring on the services buttons); a keyboard focus ring stays */
html[data-wl-redesign="light"] body :is(a.w-button, a.button-hero-white, a.button-highlight, a.partner-button, a.sp-btn, a.sp-btn-outline, input.w-button):not(.navigation),
html[data-wl-redesign="light"] body :is(a.w-button, a.button-hero-white, a.button-highlight, a.partner-button, a.sp-btn, a.sp-btn-outline):not(.navigation) * {
  --black-almost: #030303;
  color: #081431 !important;
}
html[data-wl-redesign="light"] body :is(a.w-button, a.button-hero-white, a.button-highlight, a.partner-button, a.sp-btn, a.sp-btn-outline, input.w-button):not(.navigation) { outline: 0; }
html[data-wl-redesign="light"] body :is(a.w-button, a.button-hero-white, a.button-highlight, a.partner-button, a.sp-btn, a.sp-btn-outline, input.w-button):not(.navigation):focus-visible { outline: 3px solid #283376; outline-offset: 3px; }
/* a button under a grid or a list (the campaigns band, a creator grid) starts at the grid's left edge, not the text
   column's */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(.container-960-left, .container-960-centered, .container, .sp-container, [data-wl-band], [data-wl-cont]):has(> :is(.w-dyn-list, .w-layout-grid, .w-row, [class*="grid"], [class*="collection"])) > :is(a.w-button, a[class*="button"], .sp-btn):not(.navigation) {
  margin-left: 0;
  margin-right: auto;
}
/* the first screen is centred: its button rows too */
html[data-wl-redesign="light"] .section-page-hero .container-960-centered div:has(> a[class*="button"]) { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---- first screens ---- */
/* a title the team put inside the lime title line (/starlight-festival, /social-media-video-production) is that line */
html[data-wl-redesign="light"] .section-page-hero .text-hero-pretitle :is(h1, h2, p, .h-page-hero) {
  margin: 0;
  max-width: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-wrap: balance;
}
/* the text-only first screens (/team, /magazine, /work-and-insights, /blog, /channels, /brands): the lime line and
   the white heading keep the same order of size at every width (on phones Webflow shrank the lime line to 15 px
   under a 38 px heading; on laptops it is the bigger one) */
html[data-wl-redesign="light"] [data-wl-first]:not(.section-page-hero, .section-hero-careers) .container-hero-headline > .text-hero-pretitle {
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.2rem);
  line-height: 1.06;
  text-wrap: balance;
}
html[data-wl-redesign="light"] [data-wl-first]:not(.section-page-hero, .section-hero-careers) .container-hero-headline > :is(h1, .heading-white):not(.text-hero-pretitle) {
  font-size: clamp(1.25rem, .8rem + 1.9vw, 2.4rem);
  line-height: 1.1;
  text-wrap: balance;
}
/* Webflow drew a 5 px black line under the blue first screen (/brands, /channels) */
html[data-wl-redesign="light"] .section-blue.no-bottom-spacing { border-bottom: 0; }
/* a first-screen photo set as a plain picture (/starlight-festival, /skydrop-festival, /sunday-in-the-mountains):
   the same rounded frame and size as every other page's photo (they showed at 1,343 and 1,010 px wide) */
html[data-wl-redesign="light"] .section-black-blue.case-study-hero img.image-17 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  height: clamp(240px, 38vw, 560px);
  margin: 0 auto;
  object-fit: cover;
  border-radius: 20px;
}
/* a first screen that is only a photo (the case studies): navy room under it, so the photo never meets the white part
   below edge to edge */
html[data-wl-redesign="light"] .section-black-blue.case-study-hero:not(:has(+ .section-page-hero, + .section-navigation-background + .section-page-hero)) {
  padding-bottom: clamp(28px, 4vw, 56px);
}

/* ---- rows of a picture beside words (/services, the event pages): the picture and the words side by side from
   tablets up, pictures left and right in turns; on phones the picture first, then the words, at the full width.
   Webflow stacked some rows into a half-width strip at 768 px and put the words first in others. ---- */
html[data-wl-redesign="light"] .collection-item-grid { border-top: 0; border-bottom: 0; min-height: 0; }
html[data-wl-redesign="light"] .collection-item-grid:not([data-wl-band]) {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(28px, 3.5vw, 52px);
  padding-bottom: clamp(28px, 3.5vw, 52px);
}
html[data-wl-redesign="light"] .collection-item-grid:has(> :is(.column-50-left-aligned, .service-card-column) ~ :is(.column-50-left-aligned, .service-card-column)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  max-width: var(--wl-max);
  margin-left: auto;
  margin-right: auto;
}
html[data-wl-redesign="light"] .collection-item-grid > :is(.column-50-left-aligned, .service-card-column) { width: auto; max-width: none; min-width: 0; margin: 0; order: 1; }
html[data-wl-redesign="light"] .collection-item-grid > :is(.column-50-left-aligned, .service-card-column):has(> :is(img, video, iframe, lite-youtube, .w-embed, .w-video)) { order: 0; }
/* rows side by side in one box take turns by position; a row that is a part of its own takes its side from its colour
   (picture left on white, right on navy), so rows in separate parts still take turns down the page (5 Nov) */
html[data-wl-redesign="light"] .collection-item-grid:not([data-wl-band]):nth-child(even of .collection-item-grid) > :is(.column-50-left-aligned, .service-card-column):has(> :is(img, video, iframe, lite-youtube, .w-embed, .w-video)),
html[data-wl-redesign="light"] .collection-item-grid[data-wl-band][data-wl-navy] > :is(.column-50-left-aligned, .service-card-column):has(> :is(img, video, iframe, lite-youtube, .w-embed, .w-video)),
html[data-wl-redesign="light"] [data-wl-band][data-wl-navy] > .collection-item-grid > :is(.column-50-left-aligned, .service-card-column):has(> :is(img, video, iframe, lite-youtube, .w-embed, .w-video)) { order: 2; }
/* a row with words and a button only ("More Than Events" on /live-events): the button under the words */
html[data-wl-redesign="light"] .collection-item-grid:not(.event-case-study):not(:has(> :is(.column-50-left-aligned, .service-card-column))) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
/* the event lists (/live-events, /stunts-and-activations): every event one row in the content width (they ran edge
   to edge), its picture or film one shape (3:2) beside the words, pictures left and right in turns. The team built
   some rows differently: a row that only wraps another row leaves the layout to it, an empty row takes no room, and a
   column that holds words is never framed as a picture (it would be cropped). */
html[data-wl-redesign="light"] .collection-item-grid.event-case-study {
  width: 100%;
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 52px) 0;
}
html[data-wl-redesign="light"] .collection-item-grid.event-case-study:not(:has(> .event-case-study)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
html[data-wl-redesign="light"] .collection-item-grid.event-case-study:has(> .event-case-study) { display: block; padding: 0; }
html[data-wl-redesign="light"] .collection-item-grid.event-case-study:not(:has(h1, h2, h3, h4, h5, h6, p, img:not(.w-condition-invisible), video, iframe, lite-youtube)) { padding: 0; }
html[data-wl-redesign="light"] .collection-item-grid.event-case-study:not(:has(> .event-case-study)) > * { width: auto; min-width: 0; height: auto; margin: 0; padding: 0; }
html[data-wl-redesign="light"] .collection-item-grid.event-case-study > :not(:has(h1, h2, h3, h4, h5, h6, p)):has(img:not(.w-condition-invisible), video, iframe, lite-youtube) {
  order: 0;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  background-color: var(--wl-ink);
}
html[data-wl-redesign="light"] .collection-item-grid.event-case-study:nth-child(even of .event-case-study) > :not(:has(h1, h2, h3, h4, h5, h6, p)):has(img:not(.w-condition-invisible), video, iframe, lite-youtube),
html[data-wl-redesign="light"] .collection-item-grid.event-case-study:nth-child(even of .event-case-study) > .event-case-study > :not(:has(h1, h2, h3, h4, h5, h6, p)):has(img:not(.w-condition-invisible), video, iframe, lite-youtube) { order: 2; }
html[data-wl-redesign="light"] .collection-item-grid.event-case-study > :has(h1, h2, h3, h4, h5, h6, p):not(.event-case-study) {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  color: inherit;
}
html[data-wl-redesign="light"] .collection-item-grid.event-case-study > :has(h1, h2, h3, h4, h5, h6, p):not(.event-case-study) > :is(a.w-button, a[class*="button"]) { align-self: flex-start; margin: 0; }
html[data-wl-redesign="light"] .collection-item-grid.event-case-study > :has(h1, h2, h3, h4, h5, h6, p):not(.event-case-study) .button-row { justify-content: flex-start; margin: 4px 0 0; }
html[data-wl-redesign="light"] .collection-item-grid.event-case-study :is(img.event-case-study-image, .w-background-video) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  outline: 0;
  margin: 0;  /* Webflow's .background-video-5 has margin-top: 250px on phones, which pushed the Cannes film out of its frame (6 Nov) */
}
html[data-wl-redesign="light"] .collection-item-grid.event-case-study :is(.w-embed-youtubevideo, lite-youtube) { width: 100%; max-width: none; }
/* every event's logo one height (they were 36 to 56 px; the white W had no size before it loaded and never showed) */
html[data-wl-redesign="light"] img:is(.event-title-logo, .event-logo-fixed-size) {
  display: block;
  width: auto;
  max-width: min(100%, 220px);
  height: 44px;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}
html[data-wl-redesign="light"] .event-case-study-sec-headline { margin: 0 0 clamp(8px, 1.5vw, 20px); }

/* ---- grids ---- */
/* /team: two cards a row on laptops (one narrow column of cards ran down the middle of the page) */
html[data-wl-redesign="light"] .team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  justify-content: stretch;
}
html[data-wl-redesign="light"] .team-collection-item { width: auto; min-width: 0; max-width: none; }
/* /work-and-insights: the news cards two a row from tablets up, each picture the card's full width */
html[data-wl-redesign="light"] .news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
html[data-wl-redesign="light"] .media-collection-item { width: auto; min-width: 0; }
html[data-wl-redesign="light"] .news-container { box-sizing: border-box; height: 100%; margin-bottom: 0; }
html[data-wl-redesign="light"] .news-container > a:has(img) { display: block; align-self: stretch; width: 100%; }

/* ---- content forms (/pitch-stunt-ideas, /stunt-enquiry): the form fills its card, one field a line, in the text
   column's width. The shared Let's Talk layout put these forms in its narrow left column next to an empty one. ---- */
html[data-wl-redesign="light"] .form-block:not(:has(.heading-15)) { grid-template-columns: minmax(0, 1fr); }
html[data-wl-redesign="light"] .container-960-left:has(> .form-block:not(:has(.heading-15))) { max-width: var(--wl-l-col); }
html[data-wl-redesign="light"] .form-block:not(:has(.heading-15)) .w-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin: 0 0 6px;
  padding: 0;
  overflow: visible;
}
html[data-wl-redesign="light"] .form-block:not(:has(.heading-15)) .w-radio > input[type="radio"] { flex: none; margin: 0; float: none; }
html[data-wl-redesign="light"] .form-block:not(:has(.heading-15)) .w-radio > :is(.w-form-label, span, label) { margin: 0; font-size: 15px; line-height: 1.4; }

/* ---- the FAQ copy on /supercar-blondie and /creator-economy-investment: its heading in the shared FAQ's type ---- */
html[data-wl-redesign="light"] [class*="wl-faq-section"] .wl-faq-header > :is(h2, h3, .sp-h2) {
  margin: 0;
  font-family: Bungee, sans-serif;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: left;
}

@media screen and (min-width: 992px) {
  html[data-wl-redesign="light"] .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  html[data-wl-redesign="light"] .section-black-blue.case-study-hero img.image-17 { height: clamp(200px, 56vw, 320px); border-radius: 16px; }
  /* /careers' film keeps its whole frame on phones (its words are part of the film) */
  html[data-wl-redesign="light"] .section-hero-careers .careers-hero-video { height: auto; aspect-ratio: 16 / 9; }
  html[data-wl-redesign="light"] .collection-item-grid:has(> :is(.column-50-left-aligned, .service-card-column) ~ :is(.column-50-left-aligned, .service-card-column)),
  html[data-wl-redesign="light"] .collection-item-grid.event-case-study:not(:has(> .event-case-study)) { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign="light"] .collection-item-grid:not([data-wl-band]):nth-child(n of .collection-item-grid) > :is(.column-50-left-aligned, .service-card-column):has(> :is(img, video, iframe, lite-youtube, .w-embed, .w-video)),
  html[data-wl-redesign="light"] .collection-item-grid[data-wl-band][data-wl-navy] > :is(.column-50-left-aligned, .service-card-column):has(> :is(img, video, iframe, lite-youtube, .w-embed, .w-video)),
  html[data-wl-redesign="light"] [data-wl-band][data-wl-navy] > .collection-item-grid > :is(.column-50-left-aligned, .service-card-column):has(> :is(img, video, iframe, lite-youtube, .w-embed, .w-video)),
  html[data-wl-redesign="light"] .collection-item-grid.event-case-study:nth-child(n of .event-case-study) > :not(:has(h1, h2, h3, h4, h5, h6, p)):has(img:not(.w-condition-invisible), video, iframe, lite-youtube),
  html[data-wl-redesign="light"] .collection-item-grid.event-case-study:nth-child(n of .event-case-study) > .event-case-study > :not(:has(h1, h2, h3, h4, h5, h6, p)):has(img:not(.w-condition-invisible), video, iframe, lite-youtube) { order: 0; }
  html[data-wl-redesign="light"] .news-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 13. Last run, part 3 (5 Nov 2026): from three reviewers' passes over 60 screens ---------- */

/* the Let's Talk band turns navy when the part above it is white (white_bands.py marks it): no white into white */
html[data-wl-redesign="light"] [data-wl-talk="navy"] {
  background-color: var(--wl-ink) !important;
  background-image: none !important;
  box-shadow: 0 0 0 100vmax var(--wl-ink);
  clip-path: inset(-1px -100vmax);
}
/* the magazine articles wrap their Let's Talk band and footer in a box with 15 px sides: the band and the footer run to
   the window's edges like every other page's */
html[data-wl-redesign="light"] .footer-subscribe { padding-left: 0; padding-right: 0; }
/* a copy of the Let's Talk card the team left after the footer (/services; it shows on live): a card in the gutters */
html[data-wl-redesign="light"] body > .container-960-left:has(.form-block) {
  box-sizing: border-box;
  width: auto;
  max-width: var(--wl-max);
  margin: clamp(32px, 4vw, 56px) max(var(--wl-gutter), calc((100% - var(--wl-max)) / 2));
}
/* an empty contact box (no words, no form; /team): no grey slab. The box stays as the page's #contact jump point. */
html[data-wl-redesign="light"] .section-contact:not(:has(h1, h2, h3, h4, h5, p, img, form, video, iframe, a, input)) { min-height: 0; padding: 0; }
html[data-wl-redesign="light"] .section-contact:not(:has(h1, h2, h3, h4, h5, p, img, form, video, iframe, a, input)) > * { display: none; }

/* in a part with a grid (cards, logos, a list), the words start at the grid's left edge, at a readable width */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(.container-960-left, .container-960-centered, .container, .sp-container, .w-container):has(> :is(.w-dyn-list, .w-layout-grid, .w-row, [class*="grid"], [class*="collection"])) > :is(p, h1, h2, h3, h4, ul, ol, blockquote, .w-richtext, .rich-text-block, [class*="text-block"], [class*="intro"]) {
  align-self: stretch;
  box-sizing: border-box;
  max-width: var(--wl-l-col);
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
/* what follows a grid (a button, a line) keeps clear of its last card ("See all our creators" touched it) */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-dyn-list + :is(a, p, .button-row, .sp-btn-row) { margin-top: clamp(24px, 3vw, 40px); }

/* creator grids (/for/*, /influencer-marketing-agency): the grid fills its part's width, four cards a row where four fit
   (16 and 8 creators: no card alone on the last row) */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-dyn-list:has(> .collection-list-creator-grid) { align-self: stretch; width: 100%; }
/* never five a row: a track is at least a quarter of the row (with plain 210 px tracks five fitted from 1,146 px, which
   left one of 16 cards alone on the last row and cut long names); 200 px keeps four a row from 992 px */
html[data-wl-redesign="light"] .collection-list-creator-grid { width: 100%; grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 73px) / 4)), 1fr)); gap: 24px; }
/* a card about 210 px wide keeps its words inside: names step down in size with the card's width so a 16-letter handle
   ("@pierro_freebord", 9.1 times the type size) fits the card's words column (the card less its two 18 px paddings),
   27 px from 282 px cards up; a long follower count puts "Followers" on its own line ("kieranbmxreilly",
   "@pierro_freebord" and "50,489,729 Followers" were cut off; breaking a word mid-way is only a last resort) */
/* (the grid sits in the team's .centered box, so each name was centred over its left-aligned follower count) */
html[data-wl-redesign="light"] .container-creator-grid-item { container-type: inline-size; text-align: left; }
html[data-wl-redesign="light"] .heading-creator-grid-name { font-size: min(1.5em, calc((100cqi - 36px) / 9.2)); line-height: min(36px, 1.34em); overflow-wrap: anywhere; }
html[data-wl-redesign="light"] .container-creator-grid-followers { flex-wrap: wrap; justify-content: flex-start; }

/* the lime "Our Brands" band (/about-us, /careers, /brands, /channels): the four network logos at the homepage's sizes
   (logo-sizes.css keys them by the homepage's WebP files; these pages load Webflow's PNGs, which showed at full size) */
html[data-wl-redesign="light"] .section-neon :is(.brands-container-on-home, .w-dyn-list, [class*="collection-list-wrapper"]) { width: 100%; max-width: var(--wl-max); margin-left: auto; margin-right: auto; }
html[data-wl-redesign="light"] .section-neon .grid-brand-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 32px;
  align-items: center;
  justify-items: center;
  width: 100%;
}
html[data-wl-redesign="light"] .section-neon .container-grid-wavelength-brand { display: flex; justify-content: center; align-items: center; width: 100%; min-width: 0; padding: 0; }
html[data-wl-redesign="light"] .section-neon .image-6 { display: block; width: auto; max-width: 100%; height: 60px; object-fit: contain; aspect-ratio: auto; }
html[data-wl-redesign="light"] .section-neon .image-6[src*="68353f9aec4b1d80f62d2800"] { height: 84.7px; transform: translate(0, 1.7%); }
html[data-wl-redesign="light"] .section-neon .image-6[src*="68353fa9897c0b679fbda616"] { height: 78.2px; transform: none; }
html[data-wl-redesign="light"] .section-neon .image-6[src*="68353fb39e4768d39e294bda"] { height: 89.4px; transform: none; }
html[data-wl-redesign="light"] .section-neon .image-6:is([src*="69d5ed77f421c77784060872"], [src*="removebg-preview"]) { height: 36.9px; transform: translate(.3%, 0); }

/* /influencer-marketing-agency's own form: the text column's full width; each radio button sits in front of its label
   (they hung after the previous label, the first outside the column) */
html[data-wl-redesign="light"] .ima-form { width: 100%; max-width: none; }
html[data-wl-redesign="light"] .ima-radios { display: flex; flex-wrap: wrap; gap: 10px 28px; }
html[data-wl-redesign="light"] .ima-radio { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
html[data-wl-redesign="light"] .ima-radio > input[type="radio"] { flex: none; float: none; margin: 0; }
/* first-screen button pairs: centred as a pair (Webflow gave each a 60 px right margin) */
html[data-wl-redesign="light"] .section-page-hero .container-960-centered div:has(> a[class*="button"]) > a { margin: 0; }
/* the For pages' first screen: the button under the title, at its left edge */
html[data-wl-redesign="light"] .section-page-hero .container-for-hero .container-hero-headline > a[class*="button"] { align-self: flex-start; margin: 0; }
/* a loose button between parts ("Book a Chat" on the For pages) lines up with the text column */
html[data-wl-redesign="light"] [data-wl-cont] > :is(a.w-button, a[class*="button"], .sp-btn):not(.navigation) {
  display: flex;
  width: fit-content;
  margin-left: max(0px, calc((100% - var(--wl-l-col)) / 2));
  margin-right: auto;
}

/* /team: the two cards of a row the same height */
html[data-wl-redesign="light"] .team-grid { align-items: stretch; }
html[data-wl-redesign="light"] .team-collection-item { display: flex; flex-direction: column; }
html[data-wl-redesign="light"] .team-collection-item > .team-container { flex: 1 1 auto; box-sizing: border-box; }

/* rows the team built as a box of two half columns (/creator-economy-investment) use the part's gutter, not their own */
html[data-wl-redesign="light"] .sp-container.display-flex:has(> .column-50-left-aligned + .column-50-left-aligned) { padding-left: 0; padding-right: 0; }
/* Webflow grid rows of two halves (/supercar-blondie, /event-sponsorship): no 10 px inset, the content width, the
   picture filling its half; on phones the picture first */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6) { max-width: var(--wl-max); margin-left: auto; margin-right: auto; }
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6) > .w-col { padding-left: 0; padding-right: 0; }
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6) > .w-col > img { width: 100%; height: auto; }

/* a first-screen photo set as a plain picture: its box is the full frame width (it shrank to the file's 822 px) */
html[data-wl-redesign="light"] .section-black-blue.case-study-hero > div:has(> img.image-17) { width: 100%; max-width: 1100px; margin: 0 auto; }
/* /brands' and /channels' first-screen phones picture: centred, its top corners rounded like the other first-screen photos */
html[data-wl-redesign="light"] .section-blue .container-phones { display: flex; justify-content: center; width: 100%; max-width: var(--wl-max); margin-left: auto; margin-right: auto; }
html[data-wl-redesign="light"] .section-blue .container-phones > img { display: block; max-width: 100%; height: auto; border-radius: 20px 20px 0 0; }

/* the copied footer (/supercar-blondie, /creator-economy-investment): its four logos one size */
html[data-wl-redesign="light"] .container-logos-inverted .grid-brand-logos[class*="variant-"] .image-6 { width: auto; max-width: 100%; height: 40px; aspect-ratio: auto; object-fit: contain; }

/* magazine articles: "More Similar Blogs" and its button on one line (the button stretched into a 164 px circle) */
html[data-wl-redesign="light"] .blog-more-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
html[data-wl-redesign="light"] .blog-more img { border-radius: 16px; }

@media screen and (min-width: 768px) {
  html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6) { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); }
  html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6)::before,
  html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6)::after { content: none; }
  html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6) > .w-col { float: none; flex: 1 1 0; width: auto; min-width: 0; }
}
@media screen and (max-width: 991px) {
  html[data-wl-redesign="light"] .collection-list-creator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  html[data-wl-redesign="light"] .collection-list-creator-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign="light"] .section-neon .grid-brand-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  html[data-wl-redesign="light"] .section-neon .image-6[src*="68353f9aec4b1d80f62d2800"] { height: 58.2px; }
  html[data-wl-redesign="light"] .section-neon .image-6[src*="68353fa9897c0b679fbda616"] { height: 53.8px; }
  html[data-wl-redesign="light"] .section-neon .image-6[src*="68353fb39e4768d39e294bda"] { height: 61.4px; }
  html[data-wl-redesign="light"] .section-neon .image-6:is([src*="69d5ed77f421c77784060872"], [src*="removebg-preview"]) { height: 25.3px; }
  html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6) { display: flex; flex-direction: column; gap: 24px; }
  html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6) > .w-col { width: 100%; }
  html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6) > .w-col:not(:has(h1, h2, h3, h4, p)):has(img, video, iframe, lite-youtube) { order: -1; }
  html[data-wl-redesign="light"] .blog-hero-info { justify-content: flex-start; }
}
@media screen and (max-width: 479px) {
  html[data-wl-redesign="light"] .blog-hero-info-item-2 { margin-right: 16px; padding-right: 0; border-right: 0; }
}
/* a team section nested inside a part (the For pages put their sections inside one 960 px column of a page-wide part):
   the part's column is the edge, so the nested section adds no side padding of its own (it added Webflow's 64 px) */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-cloud-copy, .sp-section-dark, .section-dark-cloud):not([data-wl-white], [data-wl-navy]) {
  padding-left: 0;
  padding-right: 0;
}

/* ---------- 14. Last run, part 4 (5 Nov 2026): second review round ---------- */
/* the Let's Talk band takes its turn in the colours (white_bands.py: data-wl-talk) */
html[data-wl-redesign="light"] [data-wl-talk="white"] { background-color: var(--wl-l-bg) !important; background-image: none !important; }
/* rows: no Webflow 4em margins between them (a band row kept 72 px above and below); a row that opens or closes a
   coloured wrapper uses the wrapper's room, not its own as well */
html[data-wl-redesign="light"] .collection-item-grid { margin-top: 0; margin-bottom: 0; }
html[data-wl-redesign="light"] [data-wl-band] > .collection-item-grid:first-child { padding-top: 0; }
html[data-wl-redesign="light"] [data-wl-band] > .collection-item-grid:last-child { padding-bottom: 0; }
/* words: no trailing margin under the last paragraph or list of a text block (the button under it sat 70 px down) */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(.w-richtext, .rich-text-block, [class*="rich-text-block"]) > :last-child { margin-bottom: 0; }
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is(.w-richtext, .rich-text-block, [class*="rich-text-block"]) + :is(a[class*="button"], a.w-button, .button-row) { margin-top: 20px; }
/* the event lists: a film keeps a film's shape (16:9); a photo frame stays 3:2 */
html[data-wl-redesign="light"] .collection-item-grid.event-case-study > :not(:has(h1, h2, h3, h4, h5, h6, p)):has(lite-youtube, iframe, div.w-embed-youtubevideo) { aspect-ratio: 16 / 9; }  /* div.: the same weight as the photo frame rule */
/* the event logos look one size: their files carry different empty margins (the W mark fills 57% of its height,
   Urbenduro 59%), so each is sized to show about 38 px of logo; negative margins keep the row's spacing */
html[data-wl-redesign="light"] img.event-title-logo[src*="wavelength-mark-white"] { height: 67px; margin: -14px 0 -14px -14px; }
html[data-wl-redesign="light"] img.event-title-logo[src*="185b77245043b251"] { height: 64px; margin: -13px 0; }
html[data-wl-redesign="light"] img.event-title-logo[src*="6cc10deed9b5cc95"] { height: 38px; }
html[data-wl-redesign="light"] img.event-title-logo[src*="5880396551d6265f"] { height: 40px; }

/* rows the team built as a box of two halves (/creator-economy-investment): the content width, a gap between picture
   and words when they stack (the heading sat 3 px under its picture on phones) */
html[data-wl-redesign="light"] .display-flex:has(> .column-50-left-aligned + .column-50-left-aligned) { box-sizing: border-box; width: 100%; max-width: var(--wl-max); margin-left: auto; margin-right: auto; gap: clamp(24px, 4vw, 64px); }
/* Webflow grid rows: the picture's own 10 px margin pushed it 9 px past the content edge (/supercar-blondie) */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .w-row:has(> .w-col-6 + .w-col-6) > .w-col > img { margin-left: 0; margin-right: 0; }
/* the Supercar Blondie card on the talent pages: the text column's width, like the words around it */
html[data-wl-redesign="light"] .wl-sb-feature { max-width: var(--wl-l-col); }

/* the lime "Our Brands" band: our sizes win over logo-sizes.css (it loads later and kept the PNGs at full width on
   tablets), each logo in a box of one height so the icon rows under them line up */
html[data-wl-redesign="light"] body .section-neon .image-6 { max-width: 100%; object-fit: contain; }
html[data-wl-redesign="light"] .section-neon .container-grid-wavelength-brand { display: grid; grid-template-rows: 96px auto; justify-items: center; align-items: center; row-gap: 10px; }

/* /services: the copy of the Let's Talk card under the footer sits on the footer's colour, not a lighter navy strip */
html[data-wl-redesign="light"] body > .container-960-left:has(.form-block) {
  box-shadow: 0 0 0 100vmax var(--wl-ink-deep);
  clip-path: inset(calc(-1 * clamp(32px, 4vw, 56px)) -100vmax);
}
/* the magazine articles: no 1 px light line at the very bottom of the page */
html[data-wl-redesign="light"] .footer-subscribe { border-bottom: 0; }
/* /work-and-insights: the news cards' pictures and words on the grid's edges (the white card padding made a 32 px
   inset on a white part, where the card itself doesn't show) */
html[data-wl-redesign="light"] .news-container { padding: 0; background-color: transparent; }
/* /careers' open roles: three cards a row at the full content width (they were held to 960 px: 1,500 px tall cards) */
html[data-wl-redesign="light"] [data-wl-loose]:has(.roles-wide) { max-width: calc(var(--wl-max) + 2 * var(--wl-gutter)); }
html[data-wl-redesign="light"] .container-960-left.roles-wide { max-width: var(--wl-max); }
html[data-wl-redesign="light"] .display-flex.wfull:has(> .label-brands) { justify-content: flex-start; }
/* /team: a card stretched to its neighbour's height keeps its words at the top */
html[data-wl-redesign="light"] .team-text-container { justify-content: flex-start; }
/* content forms on navy: every radio label in the same light grey */
html[data-wl-redesign="light"] .form-block:not(:has(.heading-15)) .w-radio :is(.w-form-label, span, label) { color: rgba(255, 255, 255, .82) !important; }

@media screen and (max-width: 991px) {
  /* the same four logos as Webflow's PNGs or as the copy's WebP files (/business-exit, /creator-ip,
     /event-commercialisation, /event-sponsorship load the WebP ones; they kept their laptop sizes and were squashed) */
  html[data-wl-redesign="light"] body .section-neon .image-6:is([src*="68353f9aec4b1d80f62d2800"], [src*="4372e6476cad756e"]) { height: 58.2px; }
  html[data-wl-redesign="light"] body .section-neon .image-6:is([src*="68353fa9897c0b679fbda616"], [src*="5e8ab951bde6f170"]) { height: 53.8px; }
  html[data-wl-redesign="light"] body .section-neon .image-6:is([src*="68353fb39e4768d39e294bda"], [src*="806c3d7f9c95869a"]) { height: 61.4px; }
  html[data-wl-redesign="light"] body .section-neon .image-6:is([src*="69d5ed77f421c77784060872"], [src*="removebg-preview"], [src*="039f4d38cc4ef931"]) { height: 25.3px; }
  html[data-wl-redesign="light"] .section-neon .container-grid-wavelength-brand { grid-template-rows: 70px auto; }
}
@media screen and (max-width: 767px) {
  /* rows of a picture and words the team built in other ways (/influencer-marketing-agency's specialisms): the
     picture first on phones */
  html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) :is([class*="-row"], .display-flex):not(.button-row, .sp-btn-row, .w-row) > :not(:has(h1, h2, h3, h4, h5, h6, p)):has(img, video, iframe, lite-youtube) { order: -1; }
  /* /influencer-marketing-agency's specialism rows: the picture is a background box, first on phones */
  html[data-wl-redesign="light"] .spec-row { flex-direction: column; }
  html[data-wl-redesign="light"] .spec-row > .spec-row-img { order: -1; }
}
/* the FAQ's small "FAQ" label: the grey made for white failed contrast on a navy FAQ (3.76:1); it takes its part's text colour */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) .wl-faq-pretitle { color: var(--wl-b-text) !important; }
/* magazine articles: the article sits inside the template's own padded <section>, so its parts add no second gutter
   (the article ran 96 px from the left and 151 px from the right at 1,024 px), and the text fills its column */
html[data-wl-redesign="light"] .legal-section :is([data-wl-white], [data-wl-navy]):not([data-wl-band]) { padding-left: 0; padding-right: 0; }
html[data-wl-redesign="light"] .blog-right-content { width: 100%; }
/* the service pages' "Book a Chat" under left-aligned words starts at their left edge (Webflow centred it) */
html[data-wl-redesign="light"] .container-case-study-headings > :is(a.w-button, a[class*="button"]) { align-self: flex-start; }
/* short laptop screens (1280 x 600, 1366 x 768): the first-screen photo takes at most half the screen, so the page's
   title shows on the first screen (it fell below it under a 560 px photo) */
@media screen and (min-width: 768px) {
  html[data-wl-redesign="light"] .container-case-study-hero-image[class],
  html[data-wl-redesign="light"] .section-black-blue.case-study-hero img.image-17,
  html[data-wl-redesign="light"] .section-hero-careers.about-hero::before,
  html[data-wl-redesign="light"] .section-hero-careers .careers-hero-video { max-height: max(240px, 50svh); }
}
/* small logos and icons keep their shape when the team gave them a fixed box (/social-media-video-production's
   platform logos were stretched by up to 5%) */
html[data-wl-redesign="light"] :is([data-wl-white], [data-wl-navy]) img:is(.image-8, [class*="logo"], [class*="icon"]) { object-fit: contain; }