/* The homepage standard on inner pages (7 Nov 2026), loaded on pages marked "design": "standard" in pages.json.

   Charlie, 7 Nov: the homepage is his favourite page ("clean, has all the aspects to it ... optimised thoroughly") and the
   standard for every page you can click to. No white strips and no navy-and-white turns ("very tacky"); one lime pill
   and a text link; short creator rows with names under the photos; the questions and Let's Talk exactly as on the
   homepage. The numbers come from the live homepage (DESIGN-STANDARD.md, docs/design-standard/).

   It sits on the shared shell in redesign.css (tokens, header, campaigns, Let's Talk, questions, footer), which already
   draws those blocks the homepage's way on every redesigned page. Markup changes CSS can't make are in
   _tools/standard_layout.py. Everything goes by Webflow class or structure, never by words or a section's position.

   Open choices for Charlie (7 Nov) are switched on <html> by data-o-* (the example pages under /_designs/ set them);
   with no attribute a page shows option 1. Once he picks, the other options come out of this file.
     data-o-first    1 side by side (title left, photo right) | 2 photo first (wide photo, title under it)
     data-o-text     1 one centred reading column | 3 folding chapters | 4 two columns (title left, text right)
     data-o-creators 1 one row of four | 2 one row you swipe | 3 two rows of four
     data-o-buttons  1 lime pill + text link | 2 lime pill + outline pill
     data-o-faq      1 the homepage's list | 2 title beside the list
     data-o-cta      1 folded into Let's Talk | 2 kept as one plain line */

/* ---------- 1. Ground, grid and spacing ---------- */
html[data-wl-redesign="standard"] {
  --s-measure: 760px;                        /* the longest reading line (the homepage's statement) */
  --s-block: calc(var(--wl-section) / 2);    /* half the gap between blocks: two halves make the homepage's 86-101 px */
  --s-title: clamp(1.3rem, .95rem + 1.25vw, 2rem);  /* section titles: Bungee 32 px laptop, 20.8 px phone (homepage) */
  --s-sub: clamp(1.08rem, 1rem + .3vw, 1.25rem);    /* subheadings: Poppins 600, 18-20 px */
  --s-body: clamp(1rem, .96rem + .15vw, 1.0625rem); /* body: 16-17 px */
}
html[data-wl-redesign="standard"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-dark,
  .sp-section-cloud-copy, .section-dark-cloud, .section-blue, .wl-talent-apply, .wl-faq-section-1, [class*="wl-faq-section-1-copy"]) {
  margin: 0;
  padding: var(--s-block) var(--wl-gutter);
  border: 0;
  background: transparent;
  background-image: none;
  color: #fff;
}
/* the gutter belongs to the outermost box (LESSONS 112): a section inside a section adds no side padding */
html[data-wl-redesign="standard"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .section-dark-cloud)
  :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .section-dark-cloud) { padding-inline: 0; padding-bottom: 0; }
html[data-wl-redesign="standard"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-dark, .sp-section-cloud-copy,
  .section-dark-cloud, .section-blue, .wl-talent-apply, .wl-faq-section-1, [class*="wl-faq-section-1-copy"], [data-wl-hero])
  :is(.container, .container-960-left:not(:has(.form-block)), .container-960-centered, .sp-container,
  .w-container, .wl-faq-container-1, .container-for-hero, .wl-talent-apply__text) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wl-max);
  margin-inline: auto;
  padding: 0;
  text-align: left;
  align-items: stretch;
  background: none;
  border: 0;
  border-radius: 0;
}
html[data-wl-redesign="standard"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-dark, .sp-section-cloud-copy,
  .section-dark-cloud, .section-blue, .wl-talent-apply, .wl-faq-section-1, [class*="wl-faq-section-1-copy"], [data-wl-hero]) .container.centered { align-items: stretch; text-align: left; }
html[data-wl-redesign="standard"] :is(.section-navigation-background, [data-wl-emptied], .divider-gray, .container-phones:empty) { display: none !important; }
html[data-wl-redesign="standard"] :is(.spacer-2em, .spacer-1em, .spacer-4em) { height: 12px; }  /* 8 Nov: /channels' 4em spacer doubled a section's top space */
/* the campaigns' button sits under a hairline, as on the homepage (18 px, the line, 36 px) */
html[data-wl-redesign="standard"] .section-dark-cloud > .container > .spacer-1em { height: 18px; }
html[data-wl-redesign="standard"] .section-dark-cloud > .container > .spacer-2em { height: 36px; border-top: 1px solid var(--wl-line); }

/* ---------- 2. Type ---------- */
html[data-wl-redesign="standard"] main, html[data-wl-redesign="standard"] body { font-family: Poppins, sans-serif; }
/* section titles: every h2 in the page's content, at the homepage's section-title size */
html[data-wl-redesign="standard"] :is(.section-cloud, .section-white, .sp-section-cloud, .sp-section-copy, .sp-section-dark, .sp-section-cloud-copy, .section-blue, .wl-talent-apply)
  h2:where(:not(.heading-creator-grid-name, .wl-ch-body *, .collection-item-grid *, [data-wl-hero] *, .news-container *, .magazine-card *)),
html[data-wl-redesign="standard"] :is(.heading-9, .section-dark-cloud .label-brands, .label-brands):not(:where(.section-neon, [data-wl-hero]) *) {
  max-width: var(--wl-max);
  margin: 0 0 20px;
  color: #fff;
  font-family: Bungee, sans-serif;
  font-size: var(--s-title);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}
html[data-wl-redesign="standard"] :is(h2, .heading-9) strong { font-weight: 400; }
/* a section title that follows other content gets the room of a new block */
html[data-wl-redesign="standard"] :is(.w-richtext, .rich-text-block, .sp-container, .container, .container-960-left, .wl-ch-body, .wl-read) > * + h2:not(.heading-creator-grid-name) { margin-top: clamp(40px, 5vw, 64px); }
/* subheadings: the team's h3/h4 and bold-only paragraphs */
html[data-wl-redesign="standard"] :is(.w-richtext, .rich-text-block, .sp-container, .container-960-left) :is(h3, h4):not(:where(.heading-15, .wl-faq-title-1, .sp-card-title, .heading-9)),
html[data-wl-redesign="standard"] p[data-wl-head] {
  max-width: var(--s-measure);
  margin: 32px 0 10px;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: var(--s-sub);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-transform: none;
}
html[data-wl-redesign="standard"] :is(h3, h4, p[data-wl-head]) strong { font-weight: inherit; }
/* Webflow's own text colours were made for its white sections: on navy every heading and bold word is white, reading
   text 70% white, small print 50% and plain links white (a scan on 7 Nov found dark text on /services, /channels, /careers,
   /work-and-insights, /magazine, /supercar-blondie). The whole page except the header, top bar, footer, lime band and the
   Let's Talk form, which keep the shell's own colours; the doubled attribute outweighs Webflow's two-class colours. */
html[data-wl-redesign="standard"][data-wl-redesign] body
  :where(h1, h2, h3, h4, h5, h6, strong, b, em, blockquote, figcaption, label, td, th, dt, .text-diagram-headline, .text-diagram-number):not(:where(a, button, .w-button, .navigation-updated, .w-nav, .section-top-banner, .section-ash, .section-black, .section-neon, .form-block) *) { color: #fff; }
html[data-wl-redesign="standard"][data-wl-redesign] body :where(p:not(.tagline-text), li, dd):not(:where(a, button, .w-button, .navigation-updated, .w-nav, .section-top-banner, .section-ash, .section-black, .section-neon, .form-block) *) { color: var(--wl-muted); }
html[data-wl-redesign="standard"][data-wl-redesign] body
  :where(a:not([class*="button"], .w-button, .w-inline-block, .link-read-more, .news-grid-link, .wl-sb-name, .wl-see-all, [class*="nav"], .wl-talent-apply__cta > a, p.wl-cta > a)):not(:where(.navigation-updated, .w-nav, .section-top-banner, .section-ash, .section-black, .section-neon, .form-block) *) { color: #fff; }
html[data-wl-redesign="standard"] :is(.news-grid-link, .link-read-more) { color: var(--wl-lime); }
html[data-wl-redesign="standard"] .container-case-study-headings a:not(:where([class*="button"], .w-button)) { color: #fff; }
html[data-wl-redesign="standard"] :is(.news-grid-date, .text-small-2) { color: var(--wl-faint); }
html[data-wl-redesign="standard"] .text-wavelength-number-headline { color: var(--wl-lime); }
/* reading text */
html[data-wl-redesign="standard"] :is(.w-richtext, .rich-text-block, .sp-container, .container-960-left, .wl-talent-apply__text, .container, .wl-read) > :is(p, ul, ol, blockquote),
html[data-wl-redesign="standard"] :is(.w-richtext, .rich-text-block) :is(p, li) {
  max-width: var(--s-measure);
  color: var(--wl-muted);
  font-size: var(--s-body);
  line-height: 1.65;
}
html[data-wl-redesign="standard"] :is(.w-richtext, .rich-text-block) p { margin: 0 0 16px; }
html[data-wl-redesign="standard"] :is(.w-richtext, .rich-text-block) :is(ul, ol) { margin: 0 0 18px; padding-left: 1.2em; }
html[data-wl-redesign="standard"] :is(.w-richtext, .rich-text-block) li { margin: 0 0 8px; padding-left: .2em; }
html[data-wl-redesign="standard"] :is(.w-richtext, .rich-text-block) li::marker { color: var(--wl-lime); }
html[data-wl-redesign="standard"] :is(.w-richtext, .rich-text-block, .wl-talent-apply__text) :is(strong, b, em) { color: #fff; }
html[data-wl-redesign="standard"] :is(.w-richtext, .rich-text-block, .wl-talent-apply__text, .text-block-26, .text-block-17, .sp-container) a:not([class*="button"]):not(.sp-btn):not(p.wl-cta > a) {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--wl-lime);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ---------- 3. First screen ---------- */
html[data-wl-redesign="standard"] [data-wl-hero] {
  margin: 0;
  padding: clamp(36px, 5vw, 72px) var(--wl-gutter) clamp(28px, 3.5vw, 48px);
  background: transparent;
  text-align: left;
}
html[data-wl-redesign="standard"] [data-wl-hero] > :is(.container-for-hero, .container-960-centered, .wl-first) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  min-height: 0;
}
html[data-wl-redesign="standard"] [data-wl-hero] > :is(.container-for-hero, .container-960-centered, .wl-first):not(:has([data-wl-photo])) { grid-template-columns: minmax(0, 1fr); }
/* the title block sits level with the middle of the photo (Charlie, 8 Nov: a short title at the top of a tall photo left
   "extra amounts of space" under it); the container rule above (0,4,1) sets stretch, so it goes on the items */
html[data-wl-redesign="standard"] [data-wl-hero] :is(.container-for-hero, .container-960-centered, .wl-first) > :is(.wl-hero-text, .container-hero-headline, [data-wl-photo]) { align-self: center; }
/* the case-study template's photo banner, now the first screen (title and summary beside the photo) */
html[data-wl-redesign="standard"] .case-study-hero[data-wl-hero] { display: block; height: auto; min-height: 0; max-height: none; background: transparent; }
html[data-wl-redesign="standard"] [data-wl-hero] > .wl-first { box-sizing: border-box; width: 100%; max-width: var(--wl-max); margin: 0 auto; }
html[data-wl-redesign="standard"] [data-wl-hero] a.link-block-6 { order: -3; display: block; text-decoration: none; }
html[data-wl-redesign="standard"] [data-wl-hero] .label-brands {
  margin: 0 0 14px;
  color: var(--wl-lime);
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}
html[data-wl-redesign="standard"] [data-wl-hero] .wl-hero-text > .w-richtext { max-width: 34em; margin: 0; }
html[data-wl-redesign="standard"] [data-wl-hero] .wl-hero-text > .w-richtext > :is(p, ul, ol):not([data-wl-lead]) { max-width: none; margin: 14px 0 0; color: var(--wl-muted); font-size: var(--s-body); line-height: 1.65; }
html[data-wl-redesign="standard"] [data-wl-hero] .wl-hero-text > .w-richtext li { margin: 0 0 6px; }
html[data-wl-redesign="standard"] [data-wl-hero] :is(.container-hero-headline, .wl-hero-text) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  text-align: left;
}
html[data-wl-redesign="standard"] [data-wl-hero] :is(.spacer-0-5em, .spacer-1em) { display: none; }
/* Webflow's other hero templates: the title box carried a shared sky photo with the title on it (no words on photos,
   RULES B6), so the first screen is the title, its intro and button on navy; a photo of the page's own comes later */
html[data-wl-redesign="standard"] [data-wl-hero]:not(.section-page-hero) { min-height: 0; background-image: none; }
html[data-wl-redesign="standard"] [data-wl-hero] :is(.container-hero, .container-for-hero):not([data-wl-hero] > .container-for-hero:has([data-wl-photo])):not(.container-for-hero:has(> [data-wl-photo])) {
  display: block; width: 100%; max-width: var(--wl-max); min-height: 0; margin: 0 auto; padding: 0; background: none;
}
/* a picture or film Webflow put behind the title (/careers) or under it (/channels), moved beside it */
html[data-wl-redesign="standard"] [data-wl-hero] .container-for-hero:has(> [data-wl-photo]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  width: 100%;
  max-width: var(--wl-max);
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  background: none;
}
html[data-wl-redesign="standard"] [data-wl-photo].w-background-video { position: relative; height: auto; min-height: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; isolation: isolate; background: #0e1c48; }
html[data-wl-redesign="standard"] [data-wl-photo].w-background-video > video { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; z-index: 0; border-radius: 0; }
html[data-wl-redesign="standard"] .container-phones[data-wl-photo] { position: static; width: 100%; max-width: none; height: auto; margin: 0; padding: 0; background: none; }
html[data-wl-redesign="standard"] .container-phones[data-wl-photo] img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
html[data-wl-redesign="standard"] [data-wl-hero] .container-hero-headline.home {
  display: flex; flex-direction: column; align-items: flex-start; min-height: 0; margin: 0; padding: 0;
  background-image: none; background-color: transparent; text-align: left;
}
/* Webflow sometimes puts the title after the button (/event-commercialisation): the small label, then the title, then the rest */
html[data-wl-redesign="standard"] [data-wl-hero] :is(.container-hero-headline, .wl-hero-text) > .text-hero-pretitle:not(h1) { order: -2; }
html[data-wl-redesign="standard"] [data-wl-hero] :is(.container-hero-headline, .wl-hero-text) > :is(h1, .h-page-hero) { order: -1; }
/* Webflow centres the hero button in its column; here everything starts at the left edge */
html[data-wl-redesign="standard"] [data-wl-hero] :is(.container-hero-headline, .wl-hero-text) > * { align-self: flex-start; margin-left: 0; margin-right: 0; }
/* "For" over the audience: a small lime label (a pretitle that is the page's whole title stays the big title) */
html[data-wl-redesign="standard"] [data-wl-hero] .text-hero-pretitle:not(h1) {
  margin: 0 0 14px;
  color: var(--wl-lime);
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}
html[data-wl-redesign="standard"] [data-wl-hero] .text-hero-pretitle:not(h1)::before { content: none; }
html[data-wl-redesign="standard"] [data-wl-hero] .text-hero-pretitle:not(h1) { text-align: left; }
html[data-wl-redesign="standard"] [data-wl-hero] [data-wl-label] { order: -3; margin: 0 0 14px; color: var(--wl-lime); font-size: 12px; font-weight: 700; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
html[data-wl-redesign="standard"] [data-wl-hero] :is(h1, .h-page-hero) {
  max-width: 14em;
  margin: 0;
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-size: clamp(2.1rem, 1rem + 3.2vw, 3.67rem);
  text-align: left;
  font-weight: 400;
  line-height: .98;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
html[data-wl-redesign="standard"] [data-wl-hero] :is(h1, .h-page-hero)::first-line { color: #fff; }
/* long titles a size down so the lead and button still fit the first screen (standard_layout.hero_title measures them) */
html[data-wl-redesign="standard"] [data-wl-hero][data-wl-long="1"] :is(h1, .h-page-hero) { font-size: clamp(1.9rem, 1rem + 2.4vw, 2.95rem); }
html[data-wl-redesign="standard"] [data-wl-hero][data-wl-long="2"] :is(h1, .h-page-hero) { font-size: clamp(1.7rem, .9rem + 2vw, 2.5rem); }
/* two buttons moved up from the opening: the pill and the text link side by side */
html[data-wl-redesign="standard"] [data-wl-hero] .wl-hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 28px 0 0; }
html[data-wl-redesign="standard"] [data-wl-hero] .wl-hero-buttons > a { margin: 0; }
html[data-wl-redesign="standard"] [data-wl-hero]:not(:has([data-wl-photo])) :is(h1, .h-page-hero) { max-width: 22em; }
/* a title-only first screen needs less room under it: the next block's own top space follows (8 Nov: "extra amounts
   of space") */
html[data-wl-redesign="standard"] [data-wl-hero]:not(:has([data-wl-photo])) { padding-bottom: clamp(4px, 1vw, 14px); }
/* long titles (/creator-economy-investment) step down a size so they keep to three or four lines */
html[data-wl-redesign="standard"] [data-wl-hero] h1.text-hero-pretitle { max-width: 16em; }
html[data-wl-redesign="standard"] [data-wl-hero] :is(.container-960-centered, .wl-hero-text, .container-hero-headline) { text-align: left; }
html[data-wl-redesign="standard"] [data-wl-hero] :is(.container-hero-headline, .wl-hero-text) > :is(a, .w-button) { margin-top: 28px; }
html[data-wl-redesign="standard"] [data-wl-hero] :is(.button-row, .sp-btn-row) { margin: 28px 0 0; }
html[data-wl-redesign="standard"] [data-wl-hero] :is([data-wl-lead], :is(.container-hero-headline, .wl-hero-text) > p:not([data-wl-intro], [data-wl-label])) {
  max-width: 34em;
  margin: 22px 0 0;
  color: var(--wl-muted);
  font-family: Poppins, sans-serif;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
html[data-wl-redesign="standard"] [data-wl-hero] [data-wl-intro] { max-width: 34em; margin: 12px 0 0; color: var(--wl-muted); font-size: var(--s-body); font-weight: 400; line-height: 1.65; text-align: left; }
html[data-wl-redesign="standard"] [data-wl-hero] :is([data-wl-lead], [data-wl-intro]) :is(strong, b) { color: inherit; font-weight: 500; }
/* the case-study template's text box: the page's 1200 px grid, not Webflow's 960 px column */
html[data-wl-redesign="standard"] .container-case-study-headings { box-sizing: border-box; width: 100%; max-width: var(--wl-max); margin-inline: auto; }
html[data-wl-redesign="standard"] [data-wl-photo] { display: block; width: 100%; margin: 0; padding: 0; }
html[data-wl-redesign="standard"] [data-wl-photo] img,
html[data-wl-redesign="standard"] [data-wl-photo] > .container-case-study-hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: 50% 35%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  border: 0;
  border-radius: 22px;
  box-shadow: none;
}
html[data-wl-redesign="standard"] [data-wl-photo] > .container-case-study-hero-image::after { content: none; }
/* the client's logo on a case study's photo: the whole logo, never cropped to the photo's shape (8 Nov: "Tripadvisc") */
html[data-wl-redesign="standard"] [data-wl-photo] .container-client-logo img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; object-position: center; border-radius: 0; }
html[data-wl-redesign="standard"][data-wl-path="for-brands"] [data-wl-photo] img { object-position: 18% 50%; }
/* option 2: a wide photo first, the title under it */
html[data-wl-redesign="standard"][data-o-first="2"] [data-wl-hero] > :is(.container-for-hero, .container-960-centered, .wl-first) { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); }
html[data-wl-redesign="standard"][data-o-first="2"] [data-wl-photo] { order: -1; }
html[data-wl-redesign="standard"][data-o-first="2"] [data-wl-photo] :is(img, .container-case-study-hero-image) { height: auto; aspect-ratio: 21 / 9; }
html[data-wl-redesign="standard"][data-o-first="2"] [data-wl-hero] :is(h1, .h-page-hero) { max-width: 20em; }

/* the one-line signpost ("If you are a brand ... click here"): small, at the left edge, the same everywhere */
html[data-wl-redesign="standard"] :is(.text-block-26, .text-block-17) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wl-max);
  margin: 0 auto 8px;
  padding: 0;
  color: var(--wl-faint);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* the signpost, moved under the first screen's button */
html[data-wl-redesign="standard"] [data-wl-hero] :is(.text-block-26, .text-block-17) { width: auto; max-width: 34em; margin: 22px 0 0; }

/* ---------- 4. Long text ---------- */
/* Charlie, 7 Nov (night): the title-left, text-right chapters on every page looked "extremely out of place and
   unusual". 8 Nov: long text "crunched into the left of the page" (a 760 px column at the left edge with an empty half
   beside it) looked horrific; "use normal design techniques". So long text is set the way articles are: one reading
   column of the homepage statement's width (760 px), centred on the page, its titles in the same column. Pictures,
   creator rows, Let's Talk and the questions keep the full width. Other formats stay on the example pages under
   /_designs/ (data-o-text): 3 folding chapters, 4 two columns. */
/* the doubled attribute matches the page grid's container rule in section 1 (0,4,1), which comes earlier */
html[data-wl-redesign="standard"][data-wl-redesign] :is([data-wl-chapters], [data-wl-ch][data-wl-text-section], [data-wl-read]) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--s-measure);
  margin-inline: auto;
}
html[data-wl-redesign="standard"] [data-wl-ch] { display: block; margin: 0; padding: clamp(40px, 5vw, 72px) 0 0; border-top: 0; }
html[data-wl-redesign="standard"] [data-wl-chapters] > [data-wl-ch]:first-child,
html[data-wl-redesign="standard"] [data-wl-chapters] > div:first-child > [data-wl-ch]:first-child { padding-top: clamp(8px, 1.5vw, 20px); }
html[data-wl-redesign="standard"] [data-wl-ch-more] { padding-top: 0; }
/* a first screen that is only a title, on a page that goes straight into long text: the title on the column's edge */
html[data-wl-redesign="standard"][data-wl-redesign] [data-wl-hero][data-wl-read-hero] :is(.container-hero-headline, .wl-hero-text) { box-sizing: border-box; width: 100%; max-width: var(--s-measure); margin-inline: auto; }
/* a picture strip or the video wall inside the column takes the page's full width again (a wide block) */
html[data-wl-redesign="standard"] [data-wl-read] :is(.w-embed.w-script:not(.rich-text-case-study-media > *), .sp-ph-row) {
  box-sizing: border-box;
  width: min(var(--wl-max), 100vw - 2 * var(--wl-gutter));
  max-width: none;
  margin-inline: calc((100% - min(var(--wl-max), 100vw - 2 * var(--wl-gutter))) / 2);
}
/* /media-properties' own chapters (its body is hand-written, already one block per chapter): the room of a new block
   between them, and under the opening's button */
html[data-wl-redesign="standard"] :is(.wl-ip-intro, .wl-ip-ch) + .wl-ip-ch { margin-top: clamp(48px, 5.5vw, 76px); }
html[data-wl-redesign="standard"] .wl-ip-ch > h2 { margin: 0 0 18px; }
html[data-wl-redesign="standard"] .wl-ch-head > * { position: static; max-width: none; margin: 0 0 18px !important; }
html[data-wl-redesign="standard"] .wl-ch-head > :is(h2, h3, h4, h5, p) {
  color: #fff;
  font-family: Bungee, sans-serif;
  font-size: var(--s-title);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-wrap: balance;
}
html[data-wl-redesign="standard"] .wl-ch-head strong { font-weight: inherit; }
html[data-wl-redesign="standard"] .wl-ch-body :is(h2, h3, h4, h5, p[data-wl-head], [data-wl-sub]) {
  max-width: var(--s-measure);
  margin: 30px 0 8px;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: var(--s-sub);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-transform: none;
  text-decoration: none;
}
html[data-wl-redesign="standard"] .wl-ch-body :is(h2, h3, h4, h5) strong { font-weight: inherit; }
html[data-wl-redesign="standard"] .wl-ch-body > :first-child { margin-top: 0 !important; }
html[data-wl-redesign="standard"] .wl-ch-body > :last-child { margin-bottom: 0; }
html[data-wl-redesign="standard"] .wl-ch-body :is(p, ul, ol, blockquote) { max-width: var(--s-measure); }
/* the chapter's first paragraph reads as its lead */
html[data-wl-redesign="standard"] .wl-ch-body > p:first-child:not([data-wl-head]) { color: #fff; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.6; }
/* a section that is a title and its text (no long text box) */
html[data-wl-redesign="standard"] [data-wl-text-section] { padding: 0; }
/* labelled points (Charlie, 7 Nov: no boxes, "they look highly AI"): a ruled list in two columns, each point under a
   hairline, its label in white and its words in the reading grey; no frames, fills or rounded panels */
html[data-wl-redesign="standard"] ul[data-wl-points] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
  max-width: none;
  margin: 22px 0 8px;
  padding: 0;
  list-style: none;
}
html[data-wl-redesign="standard"] ul[data-wl-points] > li {
  max-width: none;
  margin: 0;
  padding: 18px 0 20px;
  border: 0;
  border-top: 1px solid var(--wl-line-2);
  border-radius: 0;
  background: none;
  color: var(--wl-muted);
  font-size: var(--s-body);
  line-height: 1.6;
}
/* an odd number (or two or fewer) would leave the last point alone with an empty half beside it: one column */
html[data-wl-redesign="standard"] :is(ul[data-wl-points]:has(> li:last-child:nth-child(odd)), ul[data-wl-points]:not(:has(> li:nth-child(3))),
  .wl-steps:has(> .wl-step:last-child:nth-child(odd))) { grid-template-columns: minmax(0, 1fr); }
html[data-wl-redesign="standard"] ul[data-wl-points] > li::marker { content: none; }
html[data-wl-redesign="standard"] ul[data-wl-points] > li::before { content: none; display: none; }
html[data-wl-redesign="standard"] ul[data-wl-points] > li > :is(strong, b):first-child {
  display: block;
  margin: 0 0 6px;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: var(--s-sub);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
/* numbered steps: the same ruled list as the points, two across (never a row of three or more equal blocks, the
   AI-look check's "feature cards in a row"), each step's number in lime */
html[data-wl-redesign="standard"] .wl-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
  max-width: none;
  margin: 22px 0 8px;
}
html[data-wl-redesign="standard"] .wl-step { padding: 18px 0 20px; border-top: 1px solid var(--wl-line-2); }
html[data-wl-redesign="standard"] .wl-step > :first-child { max-width: none; margin: 0 0 8px !important; font-size: var(--s-sub); line-height: 1.3; }
html[data-wl-redesign="standard"] .wl-step > :first-child::first-letter { color: var(--wl-lime); font-family: Bungee, sans-serif; font-size: 1.5em; font-weight: 400; }
html[data-wl-redesign="standard"] .wl-step > :not(:first-child) { max-width: none; font-size: var(--s-body); line-height: 1.6; }

/* inside a step, points stay a plain list (a card grid in a narrow step would squeeze them) */
html[data-wl-redesign="standard"] .wl-step ul[data-wl-points] { display: block; margin: 10px 0 0; padding-left: 1.1em; list-style: disc; }
html[data-wl-redesign="standard"] .wl-step ul[data-wl-points] > li { margin: 0 0 8px; padding: 0 0 0 .2em; border: 0; border-radius: 0; background: none; font-size: 14.5px; }
html[data-wl-redesign="standard"] .wl-step ul[data-wl-points] > li::marker { content: initial; color: var(--wl-lime); }
html[data-wl-redesign="standard"] .wl-step ul[data-wl-points] > li > :is(strong, b):first-child { display: inline; margin: 0; font-family: Poppins, sans-serif; font-size: inherit; font-weight: 600; }

/* 3 Folding chapters: a ruled row per chapter (title and arrow) that opens to its text; the first one open */
html[data-wl-redesign="standard"][data-o-text="3"] [data-wl-ch]:not([data-wl-ch-more]) { padding: 0; border-top: 1px solid var(--wl-line-2); }
html[data-wl-redesign="standard"][data-o-text="3"] [data-wl-chapters] { border-bottom: 1px solid var(--wl-line-2); }
html[data-wl-redesign="standard"][data-o-text="3"] .wl-ch-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(18px, 2vw, 26px) 0; cursor: pointer; }
html[data-wl-redesign="standard"][data-o-text="3"] .wl-ch-head > * { margin: 0 !important; font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem); }
html[data-wl-redesign="standard"][data-o-text="3"] .wl-ch-head::after { content: "\25BE"; flex: none; color: var(--wl-lime); font-size: 18px; transition: transform .2s var(--wl-ease); }
html[data-wl-redesign="standard"][data-o-text="3"] [data-wl-ch][data-open] > .wl-ch-head::after { transform: rotate(180deg); }
html[data-wl-redesign="standard"][data-o-text="3"] [data-wl-ch]:not([data-open]):not([data-wl-ch-more]) > .wl-ch-body,
html[data-wl-redesign="standard"][data-o-text="3"] [data-wl-ch]:not([data-open]) + [data-wl-ch-more] { display: none; }
html[data-wl-redesign="standard"][data-o-text="3"] .wl-ch-body { padding: 0 0 clamp(24px, 3vw, 40px); }

/* 4 Two columns (as built on 7 Nov): the title on the left, staying in view, its text on the right */
html[data-wl-redesign="standard"][data-o-text="4"] :is([data-wl-chapters], [data-wl-ch][data-wl-text-section], [data-wl-read]) { max-width: var(--wl-max); }
html[data-wl-redesign="standard"][data-o-text="4"] [data-wl-ch] {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 3.5vw, 48px) 0;
  border-top: 1px solid var(--wl-line);
}
html[data-wl-redesign="standard"][data-o-text="4"] [data-wl-ch-more] { padding-top: 0; border-top: 0; }
html[data-wl-redesign="standard"][data-o-text="4"] .wl-ch-head > * { position: sticky; top: 104px; max-width: none; margin: 0 !important; }
html[data-wl-redesign="standard"][data-o-text="4"] .wl-ch-body :is(p, ul, ol, h3, h4, p[data-wl-head], [data-wl-sub]) { max-width: none; }
html[data-wl-redesign="standard"][data-o-text="4"] .wl-ch-body > p:first-child:not([data-wl-head]) { color: var(--wl-muted); font-size: var(--s-body); }
html[data-wl-redesign="standard"][data-o-text="4"] [data-wl-text-section] { padding: clamp(28px, 3.5vw, 44px) 0 0; }
html[data-wl-redesign="standard"][data-o-text="4"] ul[data-wl-points] { display: block; padding-left: 1.2em; list-style: disc; }
html[data-wl-redesign="standard"][data-o-text="4"] ul[data-wl-points] > li { margin: 0 0 8px; padding: 0 0 0 .2em; border: 0; border-radius: 0; background: none; font-size: var(--s-body); }
html[data-wl-redesign="standard"][data-o-text="4"] ul[data-wl-points] > li::marker { content: initial; color: var(--wl-lime); }
html[data-wl-redesign="standard"][data-o-text="4"] ul[data-wl-points] > li > :is(strong, b):first-child { display: inline; margin: 0; font-family: Poppins, sans-serif; font-size: inherit; font-weight: 600; }
html[data-wl-redesign="standard"][data-o-text="4"] .wl-steps { display: block; margin: 0; }
html[data-wl-redesign="standard"][data-o-text="4"] .wl-step { padding: 0; border: 0; }
html[data-wl-redesign="standard"][data-o-text="4"] .wl-step > :first-child { margin: 30px 0 8px !important; }
html[data-wl-redesign="standard"][data-o-text="4"] .wl-step > :first-child::first-letter { color: inherit; font-family: inherit; font-size: inherit; }

/* ---------- 5. Buttons: one lime pill, then a text link ---------- */
html[data-wl-redesign="standard"] :is(.button-row, .sp-btn-row) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  width: auto;
  max-width: none;
  margin: 28px 0 8px;
}
html[data-wl-redesign="standard"] :is(.button-row, .sp-btn-row)[data-wl-repeat] { display: none; }
html[data-wl-redesign="standard"] :is(.button-row, .sp-btn-row) > a { margin: 0; }
html[data-wl-redesign="standard"] :where(a.partner-button, a.button-hero-white, a.sp-btn, .wl-talent-apply__cta a, p.wl-cta a, a.button-highlight, a.w-button):not(.navigation):not(:where(.w-nav, .navigation-updated, .section-ash, .section-top-banner, .form-block) *),
html[data-wl-redesign="standard"] :where(.button-row, .sp-btn-row) > a:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: auto;
  height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--wl-lime);
  color: var(--wl-ink);
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}
html[data-wl-redesign="standard"] :where(a.partner-button, a.button-hero-white, a.sp-btn, .wl-talent-apply__cta a, p.wl-cta a):not(.navigation):hover,
html[data-wl-redesign="standard"] :where(.button-row, .sp-btn-row) > a:first-child:hover { background: #e6ff5c; color: var(--wl-ink); }
html[data-wl-redesign="standard"] :is(a.partner-button, a.button-hero-white, a.button-highlight)::after { content: none; }
/* option 1: the second button is a text link with an arrow (the homepage's "Find out more"), in a row or side by side */
html[data-wl-redesign="standard"] :where(a.button-highlight, a.w-button, a.partner-button, a.button-hero-white) ~ :where(a.button-highlight, a.w-button, a.partner-button, a.button-hero-white):not(.navigation),
html[data-wl-redesign="standard"] :is(.button-row, .sp-btn-row) > a + a {
  height: auto;
  padding: 6px 0;
  border-radius: 0;
  background: none;
  color: #fff;
  border-bottom: 1px solid var(--wl-line-2);
}
html[data-wl-redesign="standard"] :where(a.button-highlight, a.w-button, a.partner-button, a.button-hero-white) ~ :where(a.button-highlight, a.w-button, a.partner-button, a.button-hero-white):not(.navigation)::after,
html[data-wl-redesign="standard"] :is(.button-row, .sp-btn-row) > a + a::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  background: currentColor;
  -webkit-mask: var(--wl-arrow) center / contain no-repeat;
          mask: var(--wl-arrow) center / contain no-repeat;
}
html[data-wl-redesign="standard"] :is(.button-row, .sp-btn-row) > a + a:hover { background: none; color: var(--wl-lime); border-bottom-color: var(--wl-lime); }
/* option 2: the second button is an outline pill */
html[data-wl-redesign="standard"][data-o-buttons="2"] :is(.button-row, .sp-btn-row) > a + a {
  height: 48px;
  padding: 0 24px;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
}
html[data-wl-redesign="standard"][data-o-buttons="2"] :is(.button-row, .sp-btn-row) > a + a::after { content: none; }
html[data-wl-redesign="standard"][data-o-buttons="2"] :is(.button-row, .sp-btn-row) > a + a:hover { border-color: var(--wl-lime); }

/* a strip that only repeats a call to action ("Have a campaign in mind?", a lone "Book a Chat"):
   option 1 folds it into the page's one Let's Talk; option 2 keeps it as a plain line, no strip */
html[data-wl-redesign="standard"]:not([data-o-cta="2"]) [data-wl-cta] { display: none !important; }
/* option 2 keeps the strip whole, its buttons too (they repeat the page's first pair) */
html[data-wl-redesign="standard"][data-o-cta="2"] [data-wl-cta] :is(.button-row, .sp-btn-row)[data-wl-repeat] { display: flex; }
/* option 2: a bare button keeps the page's left edge */
html[data-wl-redesign="standard"][data-o-cta="2"] body > a[data-wl-cta] {
  display: flex;
  width: fit-content;
  margin: var(--s-block) max(var(--wl-gutter), calc((100% - var(--wl-max)) / 2));
}

/* ---------- 6. Creators: names under the photos, a short row ---------- */
html[data-wl-redesign="standard"] .collection-list-creator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 8px 0 0;
}
html[data-wl-redesign="standard"] .collection-list-creator-grid > .w-dyn-item { container-type: inline-size; min-width: 0; }
/* option 1 (default): one row of four */
html[data-wl-redesign="standard"]:not([data-o-creators="2"]):not([data-o-creators="3"]) .collection-list-creator-grid:has(> [data-wl-pick]) > .w-dyn-item:not([data-wl-pick]),
html[data-wl-redesign="standard"]:not([data-o-creators="2"]):not([data-o-creators="3"]) .collection-list-creator-grid:not(:has(> [data-wl-pick])) > .w-dyn-item:nth-child(n + 5),
html[data-wl-redesign="standard"][data-o-creators="3"] .collection-list-creator-grid > .w-dyn-item:nth-child(n + 9) { display: none; }
/* option 2: every creator in one row you swipe or scroll, the next one peeking in */
html[data-wl-redesign="standard"][data-o-creators="2"] .collection-list-creator-grid {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--wl-line-2) transparent;
  padding-bottom: 14px;
}
html[data-wl-redesign="standard"][data-o-creators="2"] .collection-list-creator-grid > .w-dyn-item { flex: 0 0 calc((100% - 3 * clamp(16px, 2vw, 28px)) / 4.35); scroll-snap-align: start; }
/* the card: Webflow paints the photo behind the whole card with the name on it; here the photo is a 4:5 picture on top
   (the same image, drawn by ::before) and the name, followers and links sit under it */
html[data-wl-redesign="standard"] .container-creator-grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent !important;
  background-size: 0 0 !important;
  background-repeat: no-repeat !important;
}
html[data-wl-redesign="standard"] .container-creator-grid-item::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  background-image: inherit;
  background-size: cover;
  background-position: 50% 30%;
  background-color: #0e1c48;
}
html[data-wl-redesign="standard"] .container-creator-grid-item :is(.div-block-34, .div-block-31, .div-block-29, .div-block-30) {
  position: static;
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  inset: auto;
}
html[data-wl-redesign="standard"] .container-category-labels-creator-grid { position: absolute; top: 12px; left: 12px; right: 12px; margin: 0; }
html[data-wl-redesign="standard"] .label-creator-grid-category {
  display: inline-block;
  margin: 0;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: var(--wl-lime);
  color: var(--wl-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-wl-redesign="standard"] .label-creator-grid-category * { color: inherit; }
html[data-wl-redesign="standard"] .container-creator-grid-item .div-block-30 { padding-top: 14px; }
html[data-wl-redesign="standard"] .heading-creator-grid-name {
  margin: 0 0 4px;
  color: #fff;
  font-family: Bungee, sans-serif;
  font-size: min(1.15rem, 8cqi);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}
html[data-wl-redesign="standard"] .heading-creator-grid-name a { color: inherit; text-decoration: none; }
html[data-wl-redesign="standard"] .container-creator-grid-followers { display: flex; justify-content: flex-start; gap: 6px; margin: 0 0 10px; color: var(--wl-faint); font-family: Poppins, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; text-align: left; }
html[data-wl-redesign="standard"] .container-creator-grid-followers * { font: inherit; }
html[data-wl-redesign="standard"] .container-creator-grid-followers > :first-child { color: var(--wl-lime); font-weight: 600; }
html[data-wl-redesign="standard"] .container-creator-grid-item .div-block-32 { display: flex; gap: 8px; }
html[data-wl-redesign="standard"] .link-block-social-icon { width: 22px; height: 22px; margin: 0; padding: 0; background: none; opacity: .75; }
html[data-wl-redesign="standard"] .link-block-social-icon:hover { opacity: 1; }
html[data-wl-redesign="standard"] .link-block-social-icon img { width: 22px; height: 22px; filter: invert(1); }
/* "See all our creators": the block's one lime pill, under the row */
html[data-wl-redesign="standard"] a.wl-see-all {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  height: auto;
  margin-top: clamp(22px, 2.6vw, 32px);
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--wl-line-2);
  background: none;
  color: #fff;
}
/* Webflow's button class draws a 3 px dark-teal outline (#101F22) that shows on the navy; the keyboard focus ring stays */
html[data-wl-redesign="standard"] :is(a.wl-see-all, a.button-hero-white, a.partner-button, a.sp-btn, a.button-highlight):not(:focus-visible) { outline: 0; }
html[data-wl-redesign="standard"] a.wl-see-all::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; background: currentColor; -webkit-mask: var(--wl-arrow) center / contain no-repeat; mask: var(--wl-arrow) center / contain no-repeat; }
html[data-wl-redesign="standard"] a.wl-see-all:hover { background: none; color: var(--wl-lime); border-bottom-color: var(--wl-lime); }

/* ---------- 7. Picture beside words (/creator-economy-investment, /creator-athlete-marketing) ---------- */
html[data-wl-redesign="standard"] .sp-container.display-flex.creator-inv-imgtext {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 72px);
  margin: 0 0 clamp(40px, 5vw, 72px);
}
html[data-wl-redesign="standard"] .creator-inv-imgtext > .column-50-left-aligned { width: auto; max-width: none; margin: 0; padding: 0; }
html[data-wl-redesign="standard"] .creator-inv-imgtext > .column-50-left-aligned:has(img) { order: 2; }
html[data-wl-redesign="standard"] .creator-inv-imgtext .image-rounded-corners { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 22px; }
/* /creator-athlete-marketing's industries: the homepage's service cards (photo on top, title, one line), one row */
html[data-wl-redesign="standard"] .spec-rows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: 32px 0 0; }
html[data-wl-redesign="standard"] .spec-rows > .spec-row { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; }
html[data-wl-redesign="standard"] .spec-rows .spec-row-img { order: -1; width: 100%; aspect-ratio: 4 / 5; height: auto; min-height: 0; margin: 0; border-radius: 22px; background-size: cover; background-position: center; }
html[data-wl-redesign="standard"] .spec-rows .spec-row-text { width: auto; margin: 0; padding: 0; }
html[data-wl-redesign="standard"] .spec-rows .spec-row-text h3 { max-width: none; margin: 0 0 8px; color: #fff; font-family: Bungee, sans-serif; font-size: clamp(.98rem, .9rem + .3vw, 1.12rem); font-weight: 400; line-height: 1.2; }
html[data-wl-redesign="standard"] .spec-rows .spec-row-text p { max-width: none; margin: 0; font-size: 14.5px; line-height: 1.6; }
html[data-wl-redesign="standard"] .rich-text-block-with-dividers :is(h2, h3) { margin-top: 0; }
html[data-wl-redesign="standard"] .center-text { text-align: left; }
/* a row Webflow left empty (two empty columns) takes no room */
html[data-wl-redesign="standard"] .creator-inv-imgtext:not(:has(img, p, h2, h3)) { display: none; }
/* /creator-economy-investment: three photos in a row, four cards, the tagline */
html[data-wl-redesign="standard"] .sp-ph-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 32px 0 0; }
html[data-wl-redesign="standard"] .sp-ph[class] { width: auto; min-width: 0; max-width: none; height: auto; min-height: 0; flex: none; aspect-ratio: 4 / 3; margin: 0; border-radius: 22px; background-size: cover; background-position: center; }
html[data-wl-redesign="standard"] .sp-ph-banner-wrap:empty { display: none; }
html[data-wl-redesign="standard"] .tagline-text { margin: 16px 0 0; color: var(--wl-lime); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
/* the team's card grids (/supercar-blondie, /creator-economy-investment): ruled items like the labelled points, no boxes */
html[data-wl-redesign="standard"] .sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); margin: 8px 0 0; }
html[data-wl-redesign="standard"] .sp-card {
  margin: 0;
  padding: 18px 0 22px;
  border: 0;
  border-top: 1px solid var(--wl-line-2);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html[data-wl-redesign="standard"] .sp-card-title { margin: 0 0 6px; color: #fff; font-family: Poppins, sans-serif; font-size: var(--s-sub); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
html[data-wl-redesign="standard"] .sp-card-text { margin: 0; color: var(--wl-muted); font-size: var(--s-body); line-height: 1.6; }

/* ---------- 7b. Rows of a picture and its words (/services, /stunts-and-activations) ---------- */
/* Webflow zig-zags them (picture left, then right) at varying widths; here every row is the same: picture on the left
   (the homepage's 22 px corners), title and text on the right, a hairline between rows, and the row's links as the
   homepage's "Find out more" text links (one lime pill per screen, not one per row). On a phone the picture sits on top. */
html[data-wl-redesign="standard"] .collection-item-grid:has(> :nth-child(2)):has(> * img, > * iframe, > * video) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;  /* 8 Nov: a picture at the top of a long text left an empty block under it */
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  max-width: var(--wl-max);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-top: 1px solid var(--wl-line);
  flex-direction: row;
}
/* a row Webflow wrapped in another row (/stunts-and-activations "The Send"): the wrapper adds nothing */
html[data-wl-redesign="standard"] .collection-item-grid:not(:has(> :nth-child(2))) { display: block; width: 100%; max-width: var(--wl-max); margin: 0 auto; padding: 0; border: 0; }
html[data-wl-redesign="standard"] .collection-item-grid:not(:has(> :nth-child(2))) > :not(.collection-item-grid) { padding: clamp(28px, 3.5vw, 44px) 0; border-top: 1px solid var(--wl-line); }
html[data-wl-redesign="standard"] .collection-item-grid:has(> :nth-child(2)) > * {
  position: static; width: auto; max-width: none; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0; flex: none; order: 1;
  background: none; text-align: left;
}
html[data-wl-redesign="standard"] .collection-item-grid:has(> :nth-child(2)) > :not(:has(h1, h2, h3, h4)) { order: 0; }
/* the picture beside a long text stays in view while the text scrolls past it (8 Nov: a picture at the top of a long
   text left an empty block under it); beside a short text the text sits level with the picture's middle */
html[data-wl-redesign="standard"] .collection-item-grid:has(> :nth-child(2)):has(> * img, > * iframe, > * video) > :not(:has(h1, h2, h3, h4)) { align-self: start; position: sticky; top: 104px; }
html[data-wl-redesign="standard"] .collection-item-grid :is(img.event-logo-fixed-size) { display: block; width: auto; max-width: 160px; height: 40px; margin: 0 0 14px; object-fit: contain; object-position: left center; border-radius: 0; }
html[data-wl-redesign="standard"] .collection-item-grid :is(img.service-image, img.event-case-study-image) {
  display: block; width: 100%; max-width: none; height: auto; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px;
}
html[data-wl-redesign="standard"] .collection-item-grid .event-case-study-video :is(iframe, .w-embed, .w-video, .w-embed-youtubevideo) {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: 22px;
}
html[data-wl-redesign="standard"] .collection-item-grid .event-case-study-video .w-video iframe { position: static; height: 100%; }
html[data-wl-redesign="standard"] .collection-item-grid img.event-title-logo { display: block; width: auto; max-width: 160px; height: 28px; margin: 0 0 14px; object-fit: contain; object-position: left center; border-radius: 0; }
html[data-wl-redesign="standard"] .collection-item-grid :is(h2, h3, h4):not(.wl-faq-title-1) {
  max-width: none;
  margin: 0 0 12px;
  color: #fff;
  font-family: Bungee, sans-serif;
  font-size: clamp(1.15rem, .95rem + .7vw, 1.6rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
html[data-wl-redesign="standard"] .collection-item-grid :is(p, li) { max-width: var(--s-measure); color: var(--wl-muted); font-size: var(--s-body); line-height: 1.65; text-align: left; }
html[data-wl-redesign="standard"] .collection-item-grid p[data-wl-head] { margin: 0 0 8px; color: #fff; font-size: var(--s-sub); }
html[data-wl-redesign="standard"] .collection-item-grid .button-row { margin: 18px 0 0; }
html[data-wl-redesign="standard"] .collection-item-grid :is(a.button-hero-white, a.w-button, .button-row > a) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  height: auto;
  margin: 18px 28px 0 0;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--wl-line-2);
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
}
html[data-wl-redesign="standard"] .collection-item-grid .button-row > a { margin-top: 0; }
html[data-wl-redesign="standard"] .collection-item-grid :is(a.button-hero-white, a.w-button, .button-row > a)::after {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; background: currentColor;
  -webkit-mask: var(--wl-arrow) center / contain no-repeat; mask: var(--wl-arrow) center / contain no-repeat;
}
html[data-wl-redesign="standard"] .collection-item-grid :is(a.button-hero-white, a.w-button, .button-row > a):hover { background: none; color: var(--wl-lime); border-bottom-color: var(--wl-lime); }
html[data-wl-redesign="standard"] .our-services h3.heading-30,
html[data-wl-redesign="standard"] .event-case-studies h2.event-case-study-sec-headline {
  max-width: var(--wl-max);
  margin: 0 0 24px;
  color: #fff;
  font-family: Bungee, sans-serif;
  font-size: var(--s-title);
  font-weight: 400;
  line-height: 1.12;
  text-align: left;
  text-transform: none;
}
html[data-wl-redesign="standard"] .section-black.event-case-studies { padding: var(--s-block) var(--wl-gutter); background: transparent; }
html[data-wl-redesign="standard"] .event-case-studies > .container.full-width { box-sizing: border-box; width: 100%; max-width: var(--wl-max); margin: 0 auto; padding: 0; }

/* a row that is only words (/event-production "More Than Events. We Build Cultural IP."): the homepage's centred
   statement, a Bungee title and a short paragraph 760 px wide */
html[data-wl-redesign="standard"] .collection-item-grid:not(:has(> :nth-child(2))):not(:has(img, iframe, video)) > * {
  max-width: var(--s-measure); margin: 0 auto; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--wl-line); text-align: center;
}
html[data-wl-redesign="standard"] .collection-item-grid:not(:has(> :nth-child(2))):not(:has(img, iframe, video)) :is(h2, h3) {
  margin: 0 0 16px; font-size: clamp(1.6rem, 1rem + 1.9vw, 2.7rem); line-height: 1.08; text-align: center;
}
html[data-wl-redesign="standard"] .collection-item-grid:not(:has(> :nth-child(2))):not(:has(img, iframe, video)) p { max-width: none; margin: 0 auto 10px; text-align: center; }

/* /creator-economy-investment and /creator-athlete-marketing rows: the picture on the left, like every row */
html[data-wl-redesign="standard"] .creator-inv-imgtext > .column-50-left-aligned:has(img) { order: 0; }

/* Supercar Blondie: a block's first heading is its section title; the numbered steps' numbers are lime */
html[data-wl-redesign="standard"] .sp-section-dark .w-row .w-col:first-child > h3.title-white:first-of-type {
  margin: 0 0 20px; color: #fff; font-family: Bungee, sans-serif; font-size: var(--s-title); font-weight: 400; line-height: 1.12; text-transform: none;
}
html[data-wl-redesign="standard"] .sp-card > .sp-card-title:first-child:has(+ .sp-card-title) { margin: 0 0 6px; color: var(--wl-lime); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1; }

/* /careers: the perks as navy cards with white icons, left-aligned; the numbers ruled; open roles at the left edge;
   each job's "Apply now" a text link (one lime pill per screen) */
html[data-wl-redesign="standard"] .display-flex.w-layout-grid:has(> .flex-block-13.benefits) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); justify-content: stretch; width: 100%; margin: 0; }
/* a perk: its small icon beside its title and words, under a hairline (a ruled list, two across) */
html[data-wl-redesign="standard"] .flex-block-13.benefits > .div-block-39 { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; align-items: start; }
html[data-wl-redesign="standard"] .flex-block-13.benefits { align-items: stretch; width: auto; max-width: none; margin: 0; text-align: left; padding: 20px 0 8px; }
html[data-wl-redesign="standard"] .flex-block-13.benefits .div-block-39 { align-items: flex-start; text-align: left; }
html[data-wl-redesign="standard"] img.benefit-icon { width: 30px; height: 30px; margin: 2px 0 0; filter: invert(1); opacity: .85; }
html[data-wl-redesign="standard"] .flex-block-13.benefits :is(h4, p) { text-align: left; }
html[data-wl-redesign="standard"] .flex-block-13.benefits h4,
html[data-wl-redesign="standard"] .flex-block-13.benefits h4.benefit-title { width: auto; margin: 0 0 6px; color: #fff; font-family: Bungee, sans-serif; font-size: clamp(1rem, .95rem + .25vw, 1.15rem); font-weight: 400; line-height: 1.2; text-align: left; }
html[data-wl-redesign="standard"] .flex-block-13.benefits .text-home-column { display: block; width: 100%; margin: 0; padding: 0; text-align: left; }
html[data-wl-redesign="standard"] .stats-section .label-brands { text-align: left; }
html[data-wl-redesign="standard"] .grid-wavelength-numbers.global-dna { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 8px 0 0; border-top: 1px solid var(--wl-line); }
html[data-wl-redesign="standard"] .global-dna > .container-grid-wavelength-numbers-copy { align-items: flex-start; padding: 22px 20px 6px 0; border-right: 1px solid var(--wl-line); text-align: left; }
html[data-wl-redesign="standard"] .global-dna > .container-grid-wavelength-numbers-copy:not(:first-child) { padding-left: 20px; }
html[data-wl-redesign="standard"] .global-dna > .container-grid-wavelength-numbers-copy:last-child { border-right: 0; }
html[data-wl-redesign="standard"] .global-dna .text-wavelength-number-headline { color: var(--wl-lime); font-family: Bungee, sans-serif; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); line-height: 1; text-align: left; }
html[data-wl-redesign="standard"] .global-dna .text-unreel-number-subline { margin-top: 8px; color: var(--wl-muted); font-size: 14px; text-align: left; text-transform: none; letter-spacing: 0; }
html[data-wl-redesign="standard"] .roles-wide .display-flex:has(> .label-brands) { align-items: flex-start; justify-content: flex-start; text-align: left; }
html[data-wl-redesign="standard"] .roles-wide .label-brands { align-self: flex-start; margin-left: 0; text-align: left; }
html[data-wl-redesign="standard"] .job-post a.button-highlight {
  height: auto; padding: 6px 0; border-radius: 0; border-bottom: 1px solid var(--wl-line-2); background: none; color: #fff;
}
html[data-wl-redesign="standard"] .job-post a.button-highlight::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; background: currentColor; -webkit-mask: var(--wl-arrow) center / contain no-repeat; mask: var(--wl-arrow) center / contain no-repeat; }
html[data-wl-redesign="standard"] .job-post img.jobpost-feature { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* the open roles: one role per row, its photo on the left and its words on the right, like the picture rows (8 Nov:
   three long texts side by side left uneven columns and empty blocks; nothing three across) */
html[data-wl-redesign="standard"] .roles-grid { display: block; }
html[data-wl-redesign="standard"] .job-post { margin: 0; padding: clamp(28px, 3.5vw, 44px) 0; border-top: 1px solid var(--wl-line); }
html[data-wl-redesign="standard"] .job-post > .div-block-39 {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 64px); align-items: start; padding: 0;
}
html[data-wl-redesign="standard"] .job-post > .div-block-39 > div:first-child { display: contents; }
html[data-wl-redesign="standard"] .job-post > .div-block-39 img.jobpost-feature { grid-column: 1; grid-row: 1 / span 4; position: sticky; top: 104px; margin: 0; border-radius: 22px; }
html[data-wl-redesign="standard"] .job-post > .div-block-39 > :not(div:first-child),
html[data-wl-redesign="standard"] .job-post > .div-block-39 > div:first-child > :not(img) { grid-column: 2; max-width: var(--s-measure); }
html[data-wl-redesign="standard"] .job-post > .div-block-39 .job-title { margin-top: 0; }
/* location and working pattern line, and "Open until filled", on the cards the runner added (Thando 5 Nov, rebuilt 9 Nov 2026) */
html[data-wl-redesign="standard"] .job-post .wl-job-meta { margin: 0 0 12px; color: var(--wl-lime); font-size: 14px; font-weight: 500; line-height: 1.45; }
html[data-wl-redesign="standard"] .job-post p.wl-job-closing { color: #fff; font-size: 14px; font-weight: 600; }
html[data-wl-redesign="standard"] .job-post > .div-block-39 > a { justify-self: start; }
html[data-wl-redesign="standard"] .job-post .job-title { margin: 16px 0 8px; color: #fff; font-family: Bungee, sans-serif; font-size: clamp(1rem, .92rem + .3vw, 1.2rem); font-weight: 400; line-height: 1.2; }

/* /channels: the vertical icons white, the audience numbers lime Bungee, reading text at most 760 px */
html[data-wl-redesign="standard"] img.image-channel-icon { filter: invert(1); opacity: .9; }
html[data-wl-redesign="standard"] .container-grid-channel-icons .text-diagram-number { margin-top: 4px; color: var(--wl-lime); font-family: Bungee, sans-serif; font-size: clamp(1rem, .9rem + .4vw, 1.3rem); text-transform: none; letter-spacing: 0; }
html[data-wl-redesign="standard"] .container-grid-channel-icons .text-diagram-headline { color: #fff; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
html[data-wl-redesign="standard"] .section-white :is(.container, .container-960-left) > :is(p, ul, ol),
html[data-wl-redesign="standard"] .ch-block :is(p.ch-text, ol.ch-list, ul.ch-list) { max-width: var(--s-measure); }
html[data-wl-redesign="standard"] .wl-news-leadgen { box-sizing: border-box; width: 100%; max-width: calc(var(--wl-max) + 2 * var(--wl-gutter)); margin: 0 auto; padding: var(--s-block) var(--wl-gutter) 0; }
html[data-wl-redesign="standard"] .wl-news-leadgen p { max-width: var(--s-measure); margin: 0; text-align: left; }

/* an empty Webflow box shows nothing (/team had a 146 px empty card above Let's Talk) */
html[data-wl-redesign="standard"] .div-block-40:not(:has(p, h1, h2, h3, h4, li, img, a, form, input)) { display: none; }

/* cards in a grid (/work, /work-and-insights, /magazine): one family. Photo 16:9 with 22 px corners, a small date,
   a Bungee card title, the lime "Read more" link; three across, equal heights, the last row starts at the left */
html[data-wl-redesign="standard"] .link-block-5 > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
html[data-wl-redesign="standard"] .news-grid.w-dyn-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); width: 100%; max-width: var(--wl-max); margin: 0 auto; padding: 0; justify-content: stretch; }
html[data-wl-redesign="standard"] .news-grid > .media-collection-item { display: flex; width: auto; max-width: none; margin: 0; padding: 0; }
html[data-wl-redesign="standard"] .news-container { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; height: 100%; margin: 0; padding: 0 0 12px; text-align: left; }
/* small card photos take a smaller corner than the big ones (22 px on a 380 px picture reads like a pill) */
html[data-wl-redesign="standard"] .news-container > a.w-inline-block:first-child > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
html[data-wl-redesign="standard"] .news-container .news-grid-date { margin: 14px 0 0; color: var(--wl-faint); font-size: 13px; text-transform: none; letter-spacing: 0; }
html[data-wl-redesign="standard"] .news-container .news-grid-date + .news-grid-date { display: none; }
html[data-wl-redesign="standard"] .news-container h2.news-grid-headline { margin: 8px 0 10px; color: #fff; font-family: Bungee, sans-serif; font-size: clamp(1rem, .92rem + .3vw, 1.2rem); font-weight: 400; line-height: 1.2; text-transform: none; }
html[data-wl-redesign="standard"] .news-container > p { max-width: none; margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; }
html[data-wl-redesign="standard"] .news-container a.news-grid-link { margin-top: auto; color: var(--wl-lime); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; text-decoration: none; }
html[data-wl-redesign="standard"] .magazine-card { display: flex; flex-direction: column; height: 100%; overflow: visible; padding: 0 0 12px; }
html[data-wl-redesign="standard"] .magazine-card img.magazine-card-image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
html[data-wl-redesign="standard"] .magazine-card .magazine-card-content { display: flex; flex-direction: column; flex: 1; padding: 14px 0 0; }
html[data-wl-redesign="standard"] .magazine-card .magazine-meta-info img.img-2 { display: none; }
html[data-wl-redesign="standard"] .magazine-card .text-small-2 { color: var(--wl-faint); font-size: 13px; }
html[data-wl-redesign="standard"] .magazine-card h3.magazine-card-title { margin: 8px 0 12px; color: #fff; font-family: Bungee, sans-serif; font-size: clamp(1rem, .92rem + .3vw, 1.2rem); font-weight: 400; line-height: 1.2; }
html[data-wl-redesign="standard"] .magazine-card .card-divider { margin-top: auto; background: var(--wl-line); }
html[data-wl-redesign="standard"] .magazine-card h5.magazine-author-name { margin: 12px 0 0; color: var(--wl-faint); font-family: Poppins, sans-serif; font-size: 13px; font-weight: 500; }

/* a short text that asks the reader to apply (/for/talent-management "Looking for Athlete or Creator Representation?"):
   its own block under a hairline, not a line hanging off the creators above it */
html[data-wl-redesign="standard"] .w-richtext:has(> p.wl-cta) { max-width: var(--wl-max); margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(28px, 3.5vw, 44px) 0 0; border-top: 1px solid var(--wl-line); }
html[data-wl-redesign="standard"] .w-richtext:has(> p.wl-cta) > :is(h3, h4):first-child { margin-top: 0; }
/* the team's video wall (a third-party embed drawn in its own sealed box): the page's full width, so fewer rows */
html[data-wl-redesign="standard"] .w-embed:has(#social-wall) { width: 100%; max-width: var(--wl-max); margin: 24px 0 0; }
html[data-wl-redesign="standard"] #social-wall { width: 100%; max-width: none; }

/* the team's hand-written HTML blocks (/services/sports-pr-agency) carry their own colours in style="": a cyan pill and
   a navy outline that disappears on navy. They take the page's button pair and the homepage's ruled numbers; the
   !important is needed to outrank colours typed into the tag */
html[data-wl-redesign="standard"] [data-rt-embed-type] a[style*="border-radius:999px"] {
  display: inline-flex !important; align-items: center; height: 48px; padding: 0 26px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--wl-lime) !important; color: var(--wl-ink) !important; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; text-decoration: none;
}
html[data-wl-redesign="standard"] [data-rt-embed-type] a[style*="border-radius:999px"] + a[style*="border-radius:999px"] {
  height: auto; padding: 6px 0 !important; border: 0 !important; border-bottom: 1px solid var(--wl-line-2) !important; border-radius: 0 !important;
  background: none !important; color: #fff !important;
}
html[data-wl-redesign="standard"] [data-rt-embed-type] a[style*="border-radius:999px"] + a[style*="border-radius:999px"]::after {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; background: currentColor;
  -webkit-mask: var(--wl-arrow) center / contain no-repeat; mask: var(--wl-arrow) center / contain no-repeat;
}
html[data-wl-redesign="standard"] [data-rt-embed-type] div[style*="flex-wrap"]:has(> a[style*="border-radius:999px"]) { align-items: center; gap: 14px 28px !important; }
html[data-wl-redesign="standard"] [data-rt-embed-type] div[style*="grid-template-columns"] { gap: 0 !important; border-top: 1px solid var(--wl-line); }
html[data-wl-redesign="standard"] [data-rt-embed-type] div[style*="grid-template-columns"] > div[style*="background"] {
  padding: 20px 20px 8px 0 !important; border-radius: 0 !important; background: none !important; border-right: 1px solid var(--wl-line);
}
html[data-wl-redesign="standard"] [data-rt-embed-type] div[style*="grid-template-columns"] > div[style*="background"]:last-child { border-right: 0; }
html[data-wl-redesign="standard"] [data-rt-embed-type] div[style*="grid-template-columns"] > div[style*="background"] > div:last-child { color: var(--wl-muted) !important; }

/* ---------- 8. The talent page's intro and Supercar Blondie ---------- */
/* Thando's intro (/for/talent-management): the page's lead, in the text column, "Apply" its pill */
html[data-wl-redesign="standard"] .wl-talent-apply__text > p { max-width: var(--s-measure); margin: 0 0 14px; }
html[data-wl-redesign="standard"] .wl-talent-apply__text > p:first-child { color: #fff; font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); line-height: 1.5; }
html[data-wl-redesign="standard"] .wl-talent-apply__cta { max-width: var(--wl-max); margin: 24px auto 0; }
html[data-wl-redesign="standard"] .wl-sb-feature {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: clamp(170px, 20vw, 290px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  width: 100%;
  max-width: var(--wl-max);
  margin: clamp(32px, 4vw, 56px) auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
html[data-wl-redesign="standard"] .wl-sb-reel { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: #000; }
html[data-wl-redesign="standard"] .wl-sb-reel .wl-reel-video { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-wl-redesign="standard"] .wl-sb-body { min-width: 0; }
html[data-wl-redesign="standard"] .wl-sb-cat { display: inline-block; padding: 5px 10px 4px; border-radius: 999px; background: var(--wl-lime); color: var(--wl-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-wl-redesign="standard"] .wl-sb-body > a.wl-sb-name { display: block; margin: 14px 0 8px; color: #fff; font-family: Bungee, sans-serif; font-size: clamp(1.4rem, 1rem + 1.3vw, 2.1rem); line-height: 1.05; text-decoration: none; }
html[data-wl-redesign="standard"] .wl-sb-body > a.wl-sb-name:hover { color: var(--wl-lime); }
html[data-wl-redesign="standard"] .wl-sb-feature p.wl-sb-total { margin: 0 0 20px; color: var(--wl-muted); font-size: clamp(1rem, .95rem + .4vw, 1.25rem); }
html[data-wl-redesign="standard"] .wl-sb-feature .wl-sb-total b { color: var(--wl-lime); font-family: Bungee, sans-serif; font-size: 1.4em; font-weight: 400; }
html[data-wl-redesign="standard"] .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="standard"] .wl-sb-feature ul.wl-sb-split > li { margin: 0; padding: 0; }
html[data-wl-redesign="standard"] .wl-sb-feature ul.wl-sb-split > li::marker { content: none; }
html[data-wl-redesign="standard"] .wl-sb-feature ul.wl-sb-split { gap: 6px 22px; }
html[data-wl-redesign="standard"] .wl-sb-feature ul.wl-sb-split a { display: inline-flex; gap: 6px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--wl-line-2); border-radius: 0; color: var(--wl-muted); font-size: 13.5px; text-decoration: none; }
html[data-wl-redesign="standard"] .wl-sb-feature ul.wl-sb-split a:hover { color: #fff; border-bottom-color: var(--wl-lime); }
html[data-wl-redesign="standard"] .wl-sb-feature ul.wl-sb-split a b { color: #fff; font-weight: 600; }

/* Webflow boxes that are white or light grey in the team's design (found by a scan, 7 Nov). Charlie, 7 Nov: no boxes
   ("they look highly AI"): no frames, fills or rounded panels; items stand on the navy, divided by hairlines, and only
   pictures keep the homepage's rounded corners */
html[data-wl-redesign="standard"] .container-results-right { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
html[data-wl-redesign="standard"] :is(.team-container, .div-block-40, .flex-block-13.benefits, .job-post, .news-container, .magazine-card) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
}
html[data-wl-redesign="standard"] :is(.team-container, .flex-block-13.benefits) { border-top: 1px solid var(--wl-line-2); }
html[data-wl-redesign="standard"] section.hero-heading-center { background: transparent; color: #fff; }
/* /team: the people in a two-column grid of cards (Webflow stacked one 600 px card a row at the left) */
html[data-wl-redesign="standard"] .team-grid.w-dyn-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); box-sizing: border-box; width: 100%; max-width: var(--wl-max); margin: 0 auto; padding: 0; }
html[data-wl-redesign="standard"] .team-grid > .team-collection-item { width: auto; min-width: 0; max-width: none; margin: 0; }
html[data-wl-redesign="standard"] .team-container .team-text-container { min-width: 0; }
html[data-wl-redesign="standard"] .team-container { width: 100%; height: 100%; margin: 0; padding: 24px 0 28px; gap: 20px; }
@media screen and (max-width: 991px) { html[data-wl-redesign="standard"] .team-grid.w-dyn-items { grid-template-columns: minmax(0, 1fr); } }
html[data-wl-redesign="standard"] [data-wl-dup] { display: none !important; }

/* photos in the page's content: the homepage's 22 px corners (Webflow had 0, 14 and 41 px) */
html[data-wl-redesign="standard"] :is(img.image-rounded-corners, img.magazine-card-image, img.jobpost-feature, img.team-portrait-image, img.image-blondie, .news-grid img, .link-block-5 > img) { border-radius: 22px; }

/* ---------- 9. Questions: the homepage's list, just after Let's Talk ---------- */
html[data-wl-redesign="standard"] :is(.wl-faq-section-1, [class*="wl-faq-section-1-copy"]) .faq-sb { max-width: var(--wl-max); margin: 0 auto; padding: 0; }
html[data-wl-redesign="standard"] .wl-faq-header { margin: 0 0 28px; padding: 0; text-align: left; }
html[data-wl-redesign="standard"] .wl-faq-header > :is(h2, h3, h4) {
  max-width: none;
  margin: 0;
  color: #fff;
  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-transform: none;
}
html[data-wl-redesign="standard"] .wl-faq-header strong { font-weight: 400; }
html[data-wl-redesign="standard"] .wl-faq-intro { margin: -12px 0 28px; }
html[data-wl-redesign="standard"] .wl-faq-intro p { max-width: var(--s-measure); margin: 0 0 12px; color: var(--wl-muted); font-size: 15px; line-height: 1.6; }
/* the questions written as text get the homepage's arrow, drawn here so no character is added */
html[data-wl-redesign="standard"] .wl-faq-arrow-1:empty::before { content: "\25BE"; }
html[data-wl-redesign="standard"] .wl-faq-grid .wl-faq-answer-1-2 strong { color: #fff; }
html[data-wl-redesign="standard"] .wl-faq-grid .wl-faq-answer-1-2 > :is(p, ul, ol) { max-width: none; margin: 0 0 10px; color: inherit; font-size: inherit; line-height: inherit; }
html[data-wl-redesign="standard"] .wl-faq-grid .wl-faq-answer-1-2 > :last-child { margin-bottom: 0; }
/* Charlie, 7 Nov (night): "The FAQ may need to be condensed in terms of design as well, while staying where it is and
   overall consistent." data-o-faq: 1 (default) compact: a smaller title, tighter rows and smaller type, the same list in
   the same place | 2 short list: the first nine (six on a phone), the rest behind one button (example pages only: the
   button's words are new) | 3 as built (the homepage's list at its full size) */
html[data-wl-redesign="standard"]:not([data-o-faq="3"]) :is(.wl-faq-section-1, [class*="wl-faq-section-1-copy"]) { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
html[data-wl-redesign="standard"]:not([data-o-faq="3"]) .wl-faq-header { margin: 0 0 18px; }
html[data-wl-redesign="standard"]:not([data-o-faq="3"]) .wl-faq-header > :is(h2, h3, h4) { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); }
html[data-wl-redesign="standard"]:not([data-o-faq="3"]) .wl-faq-intro { margin: -6px 0 18px; }
html[data-wl-redesign="standard"]:not([data-o-faq="3"]) .wl-faq-intro p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
html[data-wl-redesign="standard"]:not([data-o-faq="3"]) .wl-faq-grid { gap: 0 28px; }
html[data-wl-redesign="standard"]:not([data-o-faq="3"]) .wl-faq-grid > details > summary { padding: 11px 0; font-size: 13.5px; line-height: 1.35; }
html[data-wl-redesign="standard"]:not([data-o-faq="3"]) .wl-faq-grid .wl-faq-answer-1-2 { padding-bottom: 14px; font-size: 13.5px; line-height: 1.6; }
html[data-wl-redesign="standard"][data-o-faq="2"] .wl-faq-grid:not([data-all]) > details:nth-child(n + 10) { display: none; }
html[data-wl-redesign="standard"] .wl-faq-more { display: none; }
html[data-wl-redesign="standard"][data-o-faq="2"] .wl-faq-grid:not([data-all]) + .wl-faq-more { display: inline-flex; }
html[data-wl-redesign="standard"] .wl-faq-more {
  align-items: center; margin: 18px 0 0; padding: 6px 0; border: 0; border-bottom: 1px solid var(--wl-line-2); background: none;
  color: #fff; font: 600 14.5px/1.3 Poppins, sans-serif; cursor: pointer;
}
html[data-wl-redesign="standard"] .wl-faq-more:hover { color: var(--wl-lime); border-bottom-color: var(--wl-lime); }

/* the footer (Charlie: the group titles "don't make sense with what's underneath ... extremely messy"): data-o-footer
   1 the menu's own groups (example pages only: built by _tools/designs.py from the page's menu, so its words are new
   to the footer) | 2 tidy: the team's groups side by side, without the one-creator group and the eighteen case studies
   (all on /work) | 3 as built */
html[data-wl-redesign="standard"]:is([data-o-footer="2"], [data-o-footer="3"]) .wl-foot-menu { display: none; }
html[data-wl-redesign="standard"]:not([data-o-footer="2"], [data-o-footer="3"]) .grid-footer-navigation { display: none; }
html[data-wl-redesign="standard"]:not([data-o-footer="2"], [data-o-footer="3"]) .wl-foot-menu {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; padding: 28px 0 32px; border-top: 1px solid var(--wl-line);
}
html[data-wl-redesign="standard"] .wl-foot-menu .wl-foot-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
html[data-wl-redesign="standard"] .wl-foot-menu .label-footer-navigation { margin: 0 0 6px; }
html[data-wl-redesign="standard"][data-o-footer="2"] .grid-footer-navigation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; padding: 28px 0 32px; border-top: 1px solid var(--wl-line); }
html[data-wl-redesign="standard"][data-o-footer="2"] .container-navigation-row { padding: 0; border: 0; }
html[data-wl-redesign="standard"][data-o-footer="2"] .container-navigation-row :is(.grid-navigation-row, .div-block-43) { display: flex; flex-direction: column; gap: 9px; }
html[data-wl-redesign="standard"][data-o-footer="2"] .container-navigation-row:is(:has(a[href^="/work/"]), :has(> .div-block-43 > a.link-footer:only-child)) { display: none; }
@media screen and (max-width: 767px) {
  html[data-wl-redesign="standard"]:not([data-o-footer="2"], [data-o-footer="3"]) .wl-foot-menu,
  html[data-wl-redesign="standard"][data-o-footer="2"] .grid-footer-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wl-redesign="standard"][data-o-faq="2"] .wl-faq-grid:not([data-all]) > details:nth-child(n + 7) { display: none; }
}

html[data-wl-redesign="standard"] :is(.wl-faq-section-1, [class*="wl-faq-section-1-copy"]) a:not([class*="button"]) {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--wl-lime);
  text-underline-offset: 4px;
}
html[data-wl-redesign="standard"] :is(.wl-faq-section-1, [class*="wl-faq-section-1-copy"]) .wl-faq-container-1 > p { color: var(--wl-muted); font-size: 15px; }

/* ---------- 10. Let's Talk and the campaigns keep the homepage's shell; spacing only ---------- */
html[data-wl-redesign="standard"] .form-block .w-richtext p { max-width: none; margin: 0; font-size: 17px; line-height: 1.6; }
html[data-wl-redesign="standard"] .form-block .w-richtext ul.list-4 { display: grid; gap: 12px; max-width: none; margin: 24px 0 0; padding: 0; list-style: none; }
html[data-wl-redesign="standard"] .form-block .w-richtext ul.list-4 > li { max-width: none; margin: 0; padding: 0; color: var(--wl-muted); font-size: 15px; line-height: 1.5; }
html[data-wl-redesign="standard"] .form-block .w-richtext ul.list-4 > li::marker { content: none; }
html[data-wl-redesign="standard"] .section-dark-cloud { padding-top: var(--s-block); }
html[data-wl-redesign="standard"] .section-cloud:has(> .container-960-left > .form-block) { padding-top: var(--s-block); padding-bottom: var(--s-block); }
/* a form of its own (/pitch-stunt-ideas), not Let's Talk: no words column beside it, so one column at the reading
   width instead of fields in the left half of a full-width panel (8 Nov) */
html[data-wl-redesign="standard"] .form-block:not(:has(.heading-15)) { grid-template-columns: minmax(0, 1fr); }
html[data-wl-redesign="standard"] .container-960-left:has(> .form-block:not(:has(.heading-15))) { box-sizing: border-box; max-width: calc(var(--s-measure) + 2 * clamp(28px, 5vw, 64px)); }

/* the copied footer some team pages carry ("variant-" classes, LESSONS 100, 129): four equal logo columns like the
   shared footer, and Webflow's black logo files turned white (redesign.css switches off Webflow's own invert) */
html[data-wl-redesign="standard"] .container-logos-inverted .grid-brand-logos[class*="variant-"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
html[data-wl-redesign="standard"] .container-logos-inverted .grid-brand-logos[class*="variant-"] .container-grid-wavelength-brand { min-width: 0; }
html[data-wl-redesign="standard"] .container-logos-inverted .grid-brand-logos[class*="variant-"] .image-6 { width: auto; max-width: 100%; height: 40px; object-fit: contain; }
html[data-wl-redesign="standard"] .container-logos-inverted img[src*="website-files.com"] { filter: invert(1); }

/* ---------- 10b. Magazine articles and case-study media (8 Nov 2026) ----------
   These templates joined the standard on 8 Nov (Charlie: the case studies "look horrific"; the white design is
   retired). Their layout rules come over from pages/_light.css, where they were built and tested on 15 Oct and 5 Nov
   (the first screen, the article with its contents column, tables that scroll inside themselves on phones, Instagram
   posts three, two and one across), with the white parts' colours swapped for the navy ones. Overrides follow. */
/* ---------- 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="standard"] .legal-section { margin: 0; padding: clamp(22px, 3vw, 44px) var(--wl-gutter) 0; font-family: Poppins, sans-serif; }
html[data-wl-redesign="standard"] .legal-section .global-container { width: 100%; max-width: var(--wl-max); margin: 0 auto; }
html[data-wl-redesign="standard"] .legal-section .w-container { width: 100%; max-width: none; margin: 0; }
html[data-wl-redesign="standard"] .legal-section .w-container::before,
html[data-wl-redesign="standard"] .legal-section .w-container::after { content: none; }
html[data-wl-redesign="standard"] .blog-hero-container { padding-bottom: clamp(40px, 5vw, 72px); }
html[data-wl-redesign="standard"] .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="standard"] .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="standard"] .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="standard"] .blog-hero-nav .text-hero-nav:hover { color: #fff; }
html[data-wl-redesign="standard"] .blog-hero-nav .arrow-hero-nav { width: 10px; height: 10px; filter: invert(1); opacity: .45; }  /* a black arrow icon */
html[data-wl-redesign="standard"] .blog-hero-nav .primary-keyword { color: var(--wl-faint); font-size: 13px; text-align: left; }
html[data-wl-redesign="standard"] .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="standard"] .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="standard"] .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="standard"] .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="standard"] .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="standard"] .blog-hero-info-item-2.blog-hero-info-item-last { margin-right: 0; padding-right: 0; border-right: 0; }
html[data-wl-redesign="standard"] .blog-hero-info .img-2 { width: 18px; height: 18px; filter: invert(1); opacity: .6; }  /* calendar and clock icons */
html[data-wl-redesign="standard"] .blog-hero-info .text-small-2 { color: var(--wl-muted); font-size: 13.5px; line-height: 1.3; }
html[data-wl-redesign="standard"] .blog-hero-info .blog-author-name { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; }
html[data-wl-redesign="standard"] .blog-hero-info .div-block-45 { width: auto; }
html[data-wl-redesign="standard"] .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="standard"] .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="standard"] .blog-hero-content > .button-2:hover { background: #e6ff5c; }
html[data-wl-redesign="standard"] .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="standard"] .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="standard"] .blogs-collection-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
html[data-wl-redesign="standard"] .blogs-collection-list > .w-dyn-item { width: auto; min-width: 0; }
/* 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="standard"] .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="standard"] .blog-post-right { display: block; width: auto; min-width: 0; }
html[data-wl-redesign="standard"] .blog-post-right a { overflow-wrap: anywhere; }
html[data-wl-redesign="standard"] .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="standard"] .blog-post-right .w-richtext th { padding: 0 14px 12px 0; border-bottom: 2px solid var(--wl-line-2); 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="standard"] .blog-post-right .w-richtext td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--wl-line); vertical-align: top; }
html[data-wl-redesign="standard"] .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="standard"] :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="standard"] .instagram-media { min-width: 0 !important; max-width: min(540px, 100%) !important; }
html[data-wl-redesign="standard"] .rich-text-case-study-media { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2.2vw, 30px); }
html[data-wl-redesign="standard"] .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="standard"] .rich-text-case-study-media > .w-embed::before,
html[data-wl-redesign="standard"] .rich-text-case-study-media > .w-embed::after { content: none; }
html[data-wl-redesign="standard"] .rich-text-case-study-media .instagram-media { width: 100% !important; margin: 0 !important; border-radius: 14px !important; overflow: hidden; }
html[data-wl-redesign="standard"] .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="standard"] .rich-text-case-study-media > .w-embed.w-iframe iframe { display: block; max-width: 100%; }
html[data-wl-redesign="standard"] .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="standard"] :is(.blog-post-left, .blog-cta-wrap, .blog-sticky-links) { width: auto; max-width: 100%; min-width: 0; box-sizing: border-box; }
@media screen and (max-width: 991px) {
  html[data-wl-redesign="standard"] .rich-text-case-study-media > .w-embed.w-script { flex-basis: calc((100% - clamp(18px, 2.2vw, 30px)) / 2); }
  html[data-wl-redesign="standard"] .blog-post-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  html[data-wl-redesign="standard"] .blog-post-left { position: static; max-height: none; overflow: visible; }
}
@media screen and (max-width: 767px) {
  html[data-wl-redesign="standard"] .blog-hero-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  html[data-wl-redesign="standard"] .blog-hero-main > .blog-hero-image-container-2 { grid-column: 1; grid-row: 2; }
  html[data-wl-redesign="standard"] .blog-hero-image { aspect-ratio: 16 / 9; }
  html[data-wl-redesign="standard"] .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="standard"] .blog-hero-info { justify-content: flex-start; }
  html[data-wl-redesign="standard"] .blog-hero-info-item-2 { margin-right: 12px; padding-right: 12px; }
  html[data-wl-redesign="standard"] .blogs-collection-list { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign="standard"] .blog-post-right .w-richtext table { display: block; overflow-x: auto; }
  html[data-wl-redesign="standard"] .rich-text-case-study-media > .w-embed.w-script { flex-basis: 100%; max-width: 100%; }
}
@media screen and (max-width: 479px) {
  html[data-wl-redesign="standard"] .blog-hero-info-item-2 { margin-right: 16px; padding-right: 0; border-right: 0; }
}

/* the magazine's article template (8 Nov: it joined the standard; it was made for a white page): the trail, the
   contents list and its arrows readable on navy, the photo without the lime frame, Key Takeaways without a box */
html[data-wl-redesign="standard"] .blog-hero-nav :is(a, .text-block-16) { color: var(--wl-muted); }
html[data-wl-redesign="standard"] .blog-hero-nav .primary-keyword { color: #fff; }
html[data-wl-redesign="standard"] .blog-hero-nav img.arrow-hero-nav { filter: invert(1); opacity: .6; }
html[data-wl-redesign="standard"] .blog-hero-image-container-2 { padding: 0; background: none; border: 0; border-radius: 22px; overflow: hidden; box-shadow: none; }
html[data-wl-redesign="standard"] .blog-hero-image-container-2 img.blog-hero-image { border-radius: 22px; }
/* the team's script writes the contents list with inline dark colours for a white page, so these need !important */
html[data-wl-redesign="standard"] :is(.blog-sticky-links, .blog-sticky-links div) { color: #fff !important; }
html[data-wl-redesign="standard"] .blog-sticky-links a { color: var(--wl-muted) !important; }
html[data-wl-redesign="standard"] .blog-sticky-links a:hover { color: #fff !important; }
html[data-wl-redesign="standard"] .blog-key-takeaways { padding: 22px 0 0; background: none; border: 0; border-top: 1px solid var(--wl-line-2); border-radius: 0; box-shadow: none; }
html[data-wl-redesign="standard"] .legal-section:has(> .global-container > [data-wl-hero]) { margin-top: 0; padding-top: 0; }
/* on a phone the trail wraps and a wide table scrolls inside itself, so the article never scrolls sideways */
html[data-wl-redesign="standard"] .blog-hero-nav { flex-wrap: wrap; row-gap: 6px; }
html[data-wl-redesign="standard"] .blog-hero-nav .primary-keyword { min-width: 0; white-space: normal; }
html[data-wl-redesign="standard"] :is(.blog-post-body, .blog-post-right, .blog-right-content, .blog-article-section, .scaile-article) { min-width: 0; }
html[data-wl-redesign="standard"] .scaile-article table { display: block; max-width: 100%; overflow-x: auto; }

/* /services' small "FAQ" over its questions was Webflow grey (#6b7280, 3.8:1 on navy): the reading grey (8 Nov contrast check) */
html[data-wl-redesign="standard"] .wl-faq-pretitle { color: var(--wl-muted); }
/* YouTube thumbnails (lite-youtube-embed): clean with the play button, no title bar or dark gradient drawn over them
   (no overlays on photos; the title stays the button's label), and the player fills the thumbnail's box on "play".
   As the dark kit has had since 14 Oct (_kit.css); check_all's overlay audit found the gradient on 8 Nov. */
html[data-wl-redesign="standard"] lite-youtube::before { content: none; display: none; }
html[data-wl-redesign="standard"] .w-embed-youtubevideo lite-youtube > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; transform: none; }

/* ---------- 11. Tablets and phones ---------- */
@media screen and (max-width: 991px) {
  html[data-wl-redesign="standard"] .collection-list-creator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wl-redesign="standard"] .news-grid.w-dyn-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wl-redesign="standard"] .display-flex.w-layout-grid:has(> .flex-block-13.benefits) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wl-redesign="standard"] .wl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wl-redesign="standard"] ul[data-wl-points] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wl-redesign="standard"][data-o-text="4"] [data-wl-ch] { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0; }
  html[data-wl-redesign="standard"] .spec-rows { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  html[data-wl-redesign="standard"] .spec-rows::-webkit-scrollbar { display: none; }
  html[data-wl-redesign="standard"] .spec-rows > .spec-row { flex: 0 0 36vw; scroll-snap-align: start; }
  html[data-wl-redesign="standard"][data-o-text="4"] .wl-ch-head > * { position: static; }
  html[data-wl-redesign="standard"][data-o-faq="2"] :is(.wl-faq-container-1, .faq-sb) { display: block; }
  html[data-wl-redesign="standard"][data-o-faq="2"] .wl-faq-header { position: static; }
}
@media screen and (max-width: 767px) {
  html[data-wl-redesign="standard"] [data-wl-hero] > :is(.container-for-hero, .container-960-centered, .wl-first),
  html[data-wl-redesign="standard"] [data-wl-hero] .container-for-hero:has(> [data-wl-photo]) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html[data-wl-redesign="standard"] [data-wl-photo] :is(img, .container-case-study-hero-image) { height: auto; aspect-ratio: 4 / 3; }
  html[data-wl-redesign="standard"][data-o-first="2"] [data-wl-photo] :is(img, .container-case-study-hero-image) { aspect-ratio: 16 / 10; }
  /* creators: one row you swipe, the next card peeking in (the homepage's service cards) */
  html[data-wl-redesign="standard"] .collection-list-creator-grid {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--wl-gutter));
    padding: 0 var(--wl-gutter) 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--wl-gutter);
    scrollbar-width: none;
  }
  html[data-wl-redesign="standard"] .collection-list-creator-grid::-webkit-scrollbar { display: none; }
  html[data-wl-redesign="standard"] .collection-list-creator-grid > .w-dyn-item { flex: 0 0 62vw; scroll-snap-align: start; }
  html[data-wl-redesign="standard"] .sp-container.display-flex.creator-inv-imgtext { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  html[data-wl-redesign="standard"] .creator-inv-imgtext > .column-50-left-aligned:has(img) { order: -1; }
  html[data-wl-redesign="standard"] .spec-rows { margin-inline: calc(-1 * var(--wl-gutter)); padding-inline: var(--wl-gutter); scroll-padding: 0 var(--wl-gutter); }
  html[data-wl-redesign="standard"] .spec-rows > .spec-row { flex: 0 0 62vw; }
  html[data-wl-redesign="standard"] .sp-ph-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  html[data-wl-redesign="standard"] .sp-ph { border-radius: 14px; }
  html[data-wl-redesign="standard"] .sp-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign="standard"] .wl-sb-feature { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0; border-radius: 0; }
  html[data-wl-redesign="standard"] .wl-sb-reel { aspect-ratio: 4 / 5; }
  html[data-wl-redesign="standard"] .wl-sb-feature ul.wl-sb-split a { padding: 4px 0; font-size: 13px; }
  html[data-wl-redesign="standard"] :is(.button-row, .sp-btn-row) { gap: 12px 22px; }
  /* long labels wrap inside the pill instead of running off the screen */
  html[data-wl-redesign="standard"] :is(a.partner-button, a.button-hero-white, a.sp-btn, a.button-highlight, a.w-button, .wl-talent-apply__cta a, p.wl-cta a):not(.navigation):not(:where(.w-nav, .navigation-updated, .section-ash, .section-top-banner, .form-block) *) {
    max-width: 100%; height: auto; min-height: 48px; padding-top: 12px; padding-bottom: 12px; white-space: normal; text-align: left; line-height: 1.3;
  }
  /* labelled points one across on a phone */
  html[data-wl-redesign="standard"] ul[data-wl-points],
  html[data-wl-redesign="standard"] .wl-steps,
  html[data-wl-redesign="standard"] .display-flex.w-layout-grid:has(> .flex-block-13.benefits) { grid-template-columns: minmax(0, 1fr); }
  /* cards one across on a phone; the numbers two by two */
  html[data-wl-redesign="standard"] .news-grid.w-dyn-items { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign="standard"] .grid-wavelength-numbers.global-dna { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wl-redesign="standard"] .global-dna > .container-grid-wavelength-numbers-copy:nth-child(2) { border-right: 0; }
  html[data-wl-redesign="standard"] .global-dna > .container-grid-wavelength-numbers-copy:nth-child(3) { padding-left: 0; }
  html[data-wl-redesign="standard"] .global-dna > .container-grid-wavelength-numbers-copy:nth-child(n + 3) { border-top: 1px solid var(--wl-line); }
  /* rows of a picture and its words: the picture on top */
  html[data-wl-redesign="standard"] .collection-item-grid:has(> :nth-child(2)):has(> * img, > * iframe, > * video) { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  html[data-wl-redesign="standard"] .collection-item-grid:has(> :nth-child(2)):has(> * img, > * iframe, > * video) > :not(:has(h1, h2, h3, h4)) { position: static; }
  html[data-wl-redesign="standard"] .job-post > .div-block-39 { grid-template-columns: minmax(0, 1fr); }
  html[data-wl-redesign="standard"] .job-post > .div-block-39 img.jobpost-feature { grid-row: auto; position: static; margin-bottom: 16px; border-radius: 18px; }
  html[data-wl-redesign="standard"] .job-post > .div-block-39 > :not(div:first-child),
  html[data-wl-redesign="standard"] .job-post > .div-block-39 > div:first-child > :not(img) { grid-column: 1; }
  html[data-wl-redesign="standard"] .collection-item-grid :is(img.service-image, img.event-case-study-image) { border-radius: 18px; }
  /* a wide table scrolls on its own, never the page (LESSONS 108) */
  html[data-wl-redesign="standard"] table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ---------- 12. Wide layout: text across the page, pictures between it (9 Nov 2026) ----------
   Charlie, 9 Nov: "really thin text where it doesn't fill enough of the page ... crammed and really ugly ... walls of
   text, no images that relate". The 760 px column left a third of the laptop page empty. Now a chapter uses the page's
   1200 px grid: with a picture (media-plan.json) it is picture and text side by side, alternating; without one the
   title sits over its text, which runs in two columns under a large lead paragraph (short chapters read as one
   statement). Articles (/magazine, /news) keep the single reading column: they are read, not scanned.
   Rules from the ui-ux-pro-max review: lines 60-75 characters, a clear lead, one picture per idea, phone first. */
html[data-wl-redesign="standard"] [data-wl-gone] { display: none !important; }
html[data-wl-redesign="standard"][data-wl-redesign]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) :is([data-wl-chapters], [data-wl-ch][data-wl-text-section], [data-wl-read]) { max-width: var(--wl-max); }
html[data-wl-redesign="standard"][data-wl-redesign]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) [data-wl-hero][data-wl-read-hero] :is(.container-hero-headline, .wl-hero-text) { max-width: var(--wl-max); }
/* text outside the chapters (an opening, a closing line): a lead paragraph, not a thin column */
html[data-wl-redesign="standard"]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) [data-wl-read]:not(:has(.wl-ch)) :is(p, ul, ol) { max-width: 880px; }
html[data-wl-redesign="standard"]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) [data-wl-read]:not(:has(.wl-ch)) > p { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height: 1.65; }
/* chapters without a picture: the text across the page in two columns, led by a large first paragraph */
html[data-wl-redesign="standard"]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) .wl-ch-body :is(p, ul, ol, blockquote) { max-width: none; }
html[data-wl-redesign="standard"]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) .wl-ch:is([data-wl-len="m"], [data-wl-len="l"]):not([data-wl-media]) > .wl-ch-body {
  column-count: 2;
  column-gap: clamp(32px, 5vw, 80px);
}
html[data-wl-redesign="standard"]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) .wl-ch:not([data-wl-media]) > .wl-ch-body > p:first-child:not([data-wl-head]):not(:has(> strong:first-child)) {
  column-span: all;
  max-width: 940px;
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(1.15rem, 1.02rem + .6vw, 1.4rem);
  line-height: 1.55;
}
html[data-wl-redesign="standard"]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) .wl-ch[data-wl-len="s"]:not([data-wl-media]) > .wl-ch-body > p:not(:first-child) { max-width: 760px; }
html[data-wl-redesign="standard"] .wl-ch-body :is(h2, h3, h4, h5, p[data-wl-head], [data-wl-sub]) { break-after: avoid; break-inside: avoid; }
html[data-wl-redesign="standard"] .wl-ch-body :is(p, li) { orphans: 3; widows: 3; }
html[data-wl-redesign="standard"] .wl-ch-body :is(ul[data-wl-points], .wl-steps, .wl-case, .w-embed, table, .sp-grid) { column-span: all; }
/* a chapter with a picture: picture and text side by side, alternating */
html[data-wl-redesign="standard"] .wl-fig { grid-area: fig; width: 100%; margin: 0; }
html[data-wl-redesign="standard"] .wl-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
html[data-wl-redesign="standard"] .wl-ch[data-wl-media] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "fig head" "fig body";
  column-gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
html[data-wl-redesign="standard"] .wl-ch[data-wl-media="right"] { grid-template-areas: "head fig" "body fig"; }
html[data-wl-redesign="standard"] .wl-ch[data-wl-media] > .wl-ch-head { grid-area: head; align-self: end; }
html[data-wl-redesign="standard"] .wl-ch[data-wl-media] > .wl-ch-body { grid-area: body; column-count: auto; }
html[data-wl-redesign="standard"] .wl-ch[data-wl-media] > .wl-fig { align-self: center; }
html[data-wl-redesign="standard"] .wl-ch[data-wl-media="wide"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fig" "head" "body"; }
html[data-wl-redesign="standard"] .wl-ch[data-wl-media="wide"] > .wl-fig { margin-bottom: clamp(24px, 3vw, 40px); }
html[data-wl-redesign="standard"] .wl-ch[data-wl-media="wide"] > .wl-fig img { aspect-ratio: 21 / 9; }
html[data-wl-redesign="standard"] .wl-ch[data-wl-media] > .wl-ch-body > p:first-child:not([data-wl-head]):not(:has(> strong:first-child)) { font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem); line-height: 1.6; color: #fff; }
/* a sub-section with its picture (the example campaigns): a ruled row, picture one side, text the other */
html[data-wl-redesign="standard"] .wl-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  margin: 0;
  padding: clamp(28px, 3.2vw, 48px) 0;
  border-top: 1px solid var(--wl-line-2);
}
html[data-wl-redesign="standard"] .wl-case .wl-fig { grid-area: auto; }
html[data-wl-redesign="standard"] .wl-case[data-wl-side="right"] .wl-fig { order: 2; }
html[data-wl-redesign="standard"] .wl-case .wl-fig img { aspect-ratio: 16 / 10; }
html[data-wl-redesign="standard"] .wl-case-text > :first-child { margin-top: 0 !important; }
html[data-wl-redesign="standard"] .wl-case-text > :last-child { margin-bottom: 0; }
html[data-wl-redesign="standard"] .wl-case-text :is(ul, ol):not([data-wl-points]) { margin: 10px 0 14px; padding-left: 1.1em; }
html[data-wl-redesign="standard"] .wl-case-text li { margin: 0 0 6px; color: var(--wl-muted); }
html[data-wl-redesign="standard"] .wl-case-text li::marker { color: var(--wl-lime); }
@media (max-width: 900px) {
  html[data-wl-redesign="standard"] .wl-ch[data-wl-media], html[data-wl-redesign="standard"] .wl-ch[data-wl-media="right"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "head" "fig" "body";
    row-gap: 0;
  }
  html[data-wl-redesign="standard"] .wl-ch[data-wl-media] > .wl-fig { margin: 4px 0 24px; }
  html[data-wl-redesign="standard"] .wl-fig img { border-radius: 18px; aspect-ratio: 16 / 10; }
  html[data-wl-redesign="standard"] .wl-case { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html[data-wl-redesign="standard"] .wl-case[data-wl-side="right"] .wl-fig { order: 0; }
  html[data-wl-redesign="standard"] .wl-ch:not([data-wl-media]) > .wl-ch-body { column-count: auto !important; }
}
/* a services page's first screen shows its range: three of the site's pictures, one tall and two stacked */
html[data-wl-redesign="standard"] .wl-mosaic { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 10px; width: 100%; aspect-ratio: 4 / 3; }
html[data-wl-redesign="standard"] .wl-mosaic img { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; border-radius: 18px; }
html[data-wl-redesign="standard"] .wl-mosaic img:first-child { grid-row: 1 / span 2; }
@media (max-width: 900px) { html[data-wl-redesign="standard"] .wl-mosaic { gap: 8px; } html[data-wl-redesign="standard"] .wl-mosaic img { border-radius: 14px; } }
/* the footer's last group ("About Wavelength Network", nine links) was one tall thin column running far below the others
   (Charlie, 9 Nov: "a super thin, big bar at the bottom that stretches all the way down"). It is now a ruled row under the
   groups, its links side by side and wrapping, so every group is as tall as its own words */
html[data-wl-redesign="standard"]:not([data-o-footer="2"], [data-o-footer="3"]) .wl-foot-menu .wl-foot-col:last-child {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px clamp(20px, 3vw, 40px);
  padding-top: 24px;
  border-top: 1px solid var(--wl-line);
}
html[data-wl-redesign="standard"]:not([data-o-footer="2"], [data-o-footer="3"]) .wl-foot-menu .wl-foot-col:last-child .label-footer-navigation { flex: 1 0 100%; margin: 0 0 4px; }
/* Webflow's rich text caps a <figure> at 60% of its box; the page's pictures take the whole column, and stay in view
   beside a tall text (sticky) */
html[data-wl-redesign="standard"] .wl-fig { max-width: none !important; position: static; float: none; }
html[data-wl-redesign="standard"] .wl-ch[data-wl-media]:not([data-wl-media="wide"]) > .wl-fig { align-self: start; position: sticky; top: 104px; }
html[data-wl-redesign="standard"] .wl-ch[data-wl-media] ul[data-wl-points], html[data-wl-redesign="standard"] .wl-ch[data-wl-media] .wl-steps { grid-template-columns: minmax(0, 1fr); }
html[data-wl-redesign="standard"] .wl-case .wl-fig { position: static; }
@media (max-width: 900px) { html[data-wl-redesign="standard"] .wl-ch[data-wl-media]:not([data-wl-media="wide"]) > .wl-fig { position: static; } }
/* the opening before the first chapter (words straight in the team's text box): a lead paragraph, then the rest wider than
   the old 760 px measure */
html[data-wl-redesign="standard"]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) [data-wl-chapters] > :is(p, ul, ol, div:not(.wl-ch):not([data-wl-ch])) > p,
html[data-wl-redesign="standard"]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) [data-wl-chapters] > p { max-width: 900px; font-size: 1.0625rem; line-height: 1.7; }
html[data-wl-redesign="standard"]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) [data-wl-chapters] > p:first-child,
html[data-wl-redesign="standard"]:not([data-wl-path^="magazine-"]):not([data-wl-path^="news-"]) [data-wl-chapters] > div:first-child:not(.wl-ch) > p:first-child { color: #fff; font-size: clamp(1.15rem, 1.02rem + .6vw, 1.4rem); line-height: 1.55; max-width: 940px; }

/* ---------- 13. /stunts-and-activations: the events as a grid of picture cards (9 Nov 2026) ----------
   Charlie: the page "is meant to be about services ... not a list of events". The event services now come first (a copy of
   /event-production's, text-fixes.json); the events follow as the homepage's campaigns block does: two columns of 16:9
   pictures, a Bungee title, the first paragraph and the links. The other paragraphs stay in the page (the words are the
   team's) but are folded away; each event's own page has them. */
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-studies > .container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4.5vw, 64px) clamp(24px, 4vw, 64px); align-items: start; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-studies > .container > :is(h2, .event-case-study-sec-headline) { grid-column: 1 / -1; margin: 0; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .collection-item-grid.event-case-study { display: flex; grid-template-columns: none; flex-direction: column; gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .collection-item-grid.event-case-study > :is(.event-case-study-video, .creator-showdown-video) { order: -1; width: 100%; max-width: none; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .collection-item-grid.event-case-study > :is(.event-case-study-video, .creator-showdown-video) > :is(img, video, iframe, lite-youtube, .w-embed-youtubevideo, .background-video-5) { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study-content, html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .creator-showdown-content { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: none; margin: 0; padding: 0; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study-content > img.event-title-logo { display: none; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study :is(h3, .event-title, .heading-36) { margin: 0; color: #fff; font-family: Bungee, sans-serif; font-size: clamp(1rem, .9rem + .45vw, 1.2rem); font-weight: 400; line-height: 1.2; text-transform: none; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study :is(.rich-text-block-with-dividers, .w-richtext) { margin: 0; padding: 0; border: 0; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study :is(.rich-text-block-with-dividers, .w-richtext) > :not(:first-child) { display: none; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study :is(.rich-text-block-with-dividers, .w-richtext) > :first-child { margin: 0; color: var(--wl-muted); font-size: var(--s-body); font-weight: 400; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study .button-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 0; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study .button-row a { padding: 0; border: 0; background: none; color: var(--wl-lime); font-family: Poppins, sans-serif; font-size: 14px; font-weight: 600; text-transform: none; box-shadow: none; min-height: 0; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study .button-row a::after { content: " \203A"; }
@media (max-width: 767px) { html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-studies > .container { grid-template-columns: minmax(0, 1fr); } html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .collection-item-grid.event-case-study > :is(.event-case-study-video, .creator-showdown-video) { border-radius: 18px; } }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .collection-item-grid.event-case-study > .event-case-study-video { position: relative; top: 0; left: 0; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study-video > .w-background-video { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study-video > .w-background-video video { object-fit: cover; }

html[data-wl-redesign="standard"] .wl-ch-body > :is(p, h3, h4, [data-wl-sub]) { break-inside: avoid; }

html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .collection-item-grid.event-case-study:not(:has(.event-case-study-content, .creator-showdown-content)) { display: none; }

/* /stunts-and-activations (Charlie, 9 Nov): The Bridge first among the events */
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-studies > .container > :is(h2, .event-case-study-sec-headline) { order: -2; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .collection-item-grid.event-case-study#bridge-grid { order: -1; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .collection-item-grid.event-case-study > .event-case-study-video > .w-background-video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study-video > .w-background-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-studies > .container { row-gap: clamp(32px, 3.5vw, 52px); }
html[data-wl-redesign="standard"] .wl-case-text .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 18px 0 0; }
html[data-wl-redesign="standard"] .wl-case-text .button-row a { white-space: nowrap; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .collection-item-grid.event-case-study > .event-case-study-video > .w-background-video { top: 0 !important; left: 0 !important; margin: 0 !important; transform: none !important; }
/* Charlie, 9 Nov: the Cannes Pier card's picture "is a mess": its looping video is a close-up of a sign. A real photo of the Wavelength Pier instead (the video stays in the page, hidden) */
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] #wavelength-creator-grid > .event-case-study-video:first-child { background: #081431 url(/_redesign/images/figs/pier-cannes-2.webp) center / cover no-repeat; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] #wavelength-creator-grid > .event-case-study-video:first-child > * { display: none !important; }
/* Webflow gives the Pier card's text box both classes (content and video): it is text, not a picture */
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .collection-item-grid.event-case-study > .event-case-study-content.event-case-study-video { aspect-ratio: auto !important; order: 0 !important; overflow: visible !important; border-radius: 0 !important; background: none !important; position: static !important; }
html[data-wl-redesign="standard"][data-wl-path="stunts-and-activations"] .event-case-study :is(.event-title-logo, .event-logo-fixed-size) { display: none; }
/* a button the team asked for by name (Alistair, 9 Nov: the button after the last investment question) stays even though it repeats the Let's Talk link */
html[data-wl-redesign="standard"] .sp-btn-row.wl-keep[data-wl-repeat] { display: flex !important; margin: 28px 0 0; }
html[data-wl-redesign="standard"] .sp-btn-row.wl-keep .sp-btn { color: var(--wl-ink); }

/* ---------- A magazine article's questions: the homepage's folding list, one column in the article's own width ----------
   (Thando, 9 Nov 2026, "All pages: FAQ dropdowns exactly like the home page"; built by standard_layout.article_questions) */
html[data-wl-redesign="standard"] .wl-faq-grid.wl-faq-article { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; margin: 12px 0 clamp(32px, 4vw, 48px); padding: 0; }
html[data-wl-redesign="standard"] .wl-faq-grid.wl-faq-article > details:last-child { border-bottom: 1px solid rgba(255, 255, 255, .10); }
html[data-wl-redesign="standard"] .wl-faq-grid.wl-faq-article .wl-faq-answer-1-2 p { max-width: none; margin: 0 0 10px; color: inherit; font-size: inherit; line-height: inherit; }
html[data-wl-redesign="standard"] .wl-faq-grid.wl-faq-article .wl-faq-answer-1-2 p:last-child { margin-bottom: 0; }

/* ---------- Services page (/creator-athlete-marketing and its two other addresses), 10 Nov 2026 ----------
   Alistair, design review, request Doc 1tBWAJM6Yotk15mgk4zPtpmio1i-8FU_hKUlwBE7tj8s:
   1. "Proven campaign results" reads as one column under its heading (the text no longer flows into two columns or alternates
      sides): every example keeps its text on the left, picture on the right.
   2. A photo sits on the right of the opening text (plan "intro" in media-plan.json, standard_layout.intro_figure). */
html[data-wl-redesign="standard"]:is([data-wl-path="creator-athlete-marketing"], [data-wl-path="creator-and-athlete-campaign"], [data-wl-path="services-creator-collaboration"]) .wl-ch:has(> .wl-ch-body > .wl-case) > .wl-ch-body { column-count: auto !important; }
@media (min-width: 901px) {
  html[data-wl-redesign="standard"]:is([data-wl-path="creator-athlete-marketing"], [data-wl-path="creator-and-athlete-campaign"], [data-wl-path="services-creator-collaboration"]) .wl-case .wl-fig { order: 2; }
}
html[data-wl-redesign="standard"] [data-wl-intro-media] {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
html[data-wl-redesign="standard"] [data-wl-intro-media] > :not(.wl-fig) { grid-column: 1; max-width: none; }
html[data-wl-redesign="standard"] [data-wl-intro-media] > .wl-fig { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
html[data-wl-redesign="standard"] [data-wl-intro-media] > .wl-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) {
  html[data-wl-redesign="standard"] [data-wl-intro-media] { display: flex; flex-direction: column; }
  html[data-wl-redesign="standard"] [data-wl-intro-media] > .wl-fig { order: 2; margin: 8px 0 8px; }
}