/* /services: the overview of every service (12 Oct; the services list rebuilt 15 Oct as a static editorial layout, see
   below). Layout is CSS grid on the existing markup; numbers are CSS counters; no word moves. */

/* ---------- first screen: the rider photo clean, as shot, and the title with its button under it on the navy page
   (13 Oct, Charlie: "the overlays on the pictures make them look weird and ai": no wash, no text on the photo).
   The photo is the screen's height less room for the title row, so photo, title and button share the first screen. */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .container-case-study-hero-image.all-services {
  height: clamp(340px, calc(100vh - 360px), 640px);
  /* the same photo file, served from this site (15 Oct night, Lighthouse): from Webflow's CDN the phone first had to open
     a second connection, about 0.5 s on slow 4G, before it could start the page's main picture */
  background-image: url("/_redesign/images/services-hero.avif");
  background-color: var(--wl-ink-2);
  background-size: cover;
  background-position: 62% 12%;
  background-attachment: scroll;
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-black-blue.case-study-hero { margin-bottom: 0; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero { padding-bottom: 0; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero .text-hero-pretitle { max-width: 12ch; padding: 0; text-indent: -.225em hanging; }
/* (the title's second word starts with a no-break space in the live text; the hanging indent lines it up on phones,
   where the title takes two lines; on wider screens it is one line and the doubled space is closed up instead) */
@media screen and (min-width: 768px) {
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero .text-hero-pretitle { max-width: none; margin-bottom: 14px; text-indent: 0; word-spacing: -.1125em; }
}

/* ---------- the opening statement: no card, the claim on the left and what we do on the right ---------- */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(24px, 4vw, 48px); margin: 0; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud > .container-960-left {
  max-width: var(--wl-max);
  padding: clamp(28px, 4vw, 48px) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--wl-line);
  border-radius: 0;
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud .w-richtext {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  width: 100%;
}
.wl-nowrap { white-space: nowrap; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud .w-richtext::before,
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud .w-richtext::after { content: none; display: none; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud .w-richtext h3 {
  position: relative;
  margin: 0;
  padding-top: 26px;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: clamp(1.5rem, .95rem + 1.95vw, 2.6rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.02em;
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud .w-richtext h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--wl-lime);
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud .w-richtext p {
  margin: 0;
  padding-top: 22px;
  color: var(--wl-muted);
  font-size: clamp(15px, 14.2px + .3vw, 18px);
  line-height: 1.75;
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .service-topinfo { display: none; } /* an empty list: no words, no height */

/* ---------- the services (15 Oct, Charlie's full-site brief: "the scrolling and fading photography treatment is not
   working ... the visual compositions repeat, and the motion feels unnecessary"). The sticky photo deck that faded
   between eight square photos is gone. Each service is laid out for what it sells, on one 12-column page system:
   1 Campaigns       feature: four roster creators across the page, the words in two columns under them
   2 Live            split: words left, a mosaic of the stunt, the live show and the creator activation it names
   3 Video           a lifted panel: three network reels playing in phone frames (the only motion; it is the product)
   4 Social media    words first, then the UNREEL channel on every platform as one wide band
   5 Paid social     text-led, with the partnership ad it describes in a phone frame
   6 AI search       Wavelength's own AI visibility screen beside the longest text
   7 PR, 8 Feeds     a pair: press coverage and a feed of network posts
   1-3 (make it) are big and photo-led; 4-8 (run it) are tighter. Media are wordless and come from services.fixes.json;
   the words keep their HTML order (the two Webflow columns become display: contents and the grid places title,
   picture, words and button). Numbers are CSS counters, written 1, 2, 3. No photo carries an overlay (rule 8). ---------- */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services { padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(8px, 2vw, 24px); counter-reset: wl-svc; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services > .container > .heading-30 {
  max-width: 18ch;
  margin: 0;
  color: #fff;
  font-family: Bungee, sans-serif;
  font-size: var(--wl-h-section);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: left;
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services > .container > .spacer-2em { width: 100%; height: clamp(20px, 2.6vw, 36px); }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services > .container { display: block; }  /* Webflow centres its children in a flex column */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services :is(.w-dyn-list, .w-dyn-items) { width: 100%; }
/* the panel (3) already closes the first group: no hairline straight under it */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid.w-dyn-item:nth-child(1) { border-top: 0; padding-top: clamp(12px, 2vw, 28px); }

/* every service: one grid; its two Webflow columns step aside so title, picture, words and button are grid items */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "media" "body" "cta";
  align-items: start;
  column-gap: clamp(32px, 5.4vw, 80px);
  row-gap: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(32px, 4.6vw, 64px) 0;
  border: 0;
  border-top: 1px solid var(--wl-line);
  border-radius: 0;
  counter-increment: wl-svc;
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid > * { display: contents; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .wl-sv-media { grid-area: media; min-width: 0; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .heading-29 { grid-area: title; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .w-richtext { grid-area: body; min-width: 0; max-width: 64ch; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .button-hero-white { grid-area: cta; justify-self: start; margin: 6px 0 0; }

/* the type: number, title, words */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .heading-29 {
  max-width: 22ch;
  margin: 0 0 18px;
  color: #fff;
  font-family: Bungee, sans-serif;
  font-size: clamp(1.3rem, .98rem + 1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .heading-29::before {
  content: counter(wl-svc);
  display: block;
  margin: 0 0 12px;
  color: var(--wl-lime);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1;
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .rich-text-block-with-dividers { color: var(--wl-muted); }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .rich-text-block-with-dividers p { margin: 0 0 1em; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .rich-text-block-with-dividers h4 { margin: 0 0 .5em; color: #fff; font-size: 1.05rem; font-weight: 600; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .rich-text-block-with-dividers > p:first-child > strong:only-child { color: #fff; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .rich-text-block-with-dividers ul { margin: .2em 0 1em; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .rich-text-block-with-dividers > :last-child { margin-bottom: 0; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .rich-text-block-with-dividers p.wl-svc-blank { margin: 0; font-size: 2px; line-height: 1; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .w-richtext + .button-hero-white { margin-top: 26px; }

/* "Learn More": the same outline button on every service; with a mouse, the whole service is its click area and the
   button lights up while you're over it (no movement, no new words) */
@media (hover: hover) and (pointer: fine) {
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .button-hero-white::before { content: ""; position: absolute; inset: 0; z-index: 1; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid:hover .button-hero-white { background: var(--wl-lime); border-color: var(--wl-lime); color: var(--wl-ink); }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid:hover .heading-29 { color: var(--wl-lime); }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .heading-29 { transition: color .2s; }
}

/* ---------- the media (wordless, alt="", aria-hidden; shown as shot: no washes, fades or filters) ---------- */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
  border-radius: var(--wl-r-md);
  background: var(--wl-ink-2);
}
/* 1: four creators, 4:5 */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 2px 0 24px; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-roster img { aspect-ratio: 4 / 5; }
/* 2: the stunt tall on the left, the show and the creators stacked on the right */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-live {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  aspect-ratio: 1 / 1;
  margin: 2px 0 24px;
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-live img { height: 100%; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-live .wl-sv-a { grid-row: 1 / 3; object-position: 52% 40%; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-live .wl-sv-b { object-position: 50% 30%; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-live .wl-sv-c { object-position: 50% 45%; }
/* 3 and 5: phone frames (the same frame the service pages use) */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-phone {
  position: relative;
  flex: none;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 24px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 6px #03060f, 0 0 0 7px rgba(255, 255, 255, .16);
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 2.4%;
  left: 50%;
  width: 30%;
  height: 3.4%;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media .wl-sv-phone :is(video, img) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* 3: the screening room, a lifted panel round the whole service */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .container > .collection-item-grid:nth-child(5) {
  margin: clamp(8px, 1.4vw, 20px) 0 clamp(28px, 3.4vw, 48px);
  padding: clamp(28px, 4vw, 56px) clamp(18px, 4vw, 56px);
  border-top: 0;
  border-radius: var(--wl-r-lg);
  background: var(--wl-ink-2);
  box-shadow: 0 0 0 1px var(--wl-line);
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-reels { display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 2vw, 24px); margin: 6px 0 28px; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-reels .wl-sv-phone { width: calc((100% - 2 * clamp(12px, 2vw, 24px)) / 3); max-width: 200px; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-reels .wl-sv-phone:nth-child(2) { margin-top: clamp(18px, 3vw, 40px); }
/* 4: the channel band, whole on wide screens, its middle on phones */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-channels { margin: 2px 0 24px; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-channels img { aspect-ratio: 3 / 2; object-position: 50% 50%; border-radius: var(--wl-r-lg); }
/* 5: the partnership ad */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-ad { display: flex; justify-content: center; margin: 4px 0 30px; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-ad .wl-sv-phone { width: min(200px, 52%); }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-ad .wl-sv-phone::before { content: none; }  /* the camera pill sat on the ad's logo */
/* 6: the platform screen (its window corners) */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-dash { margin: 2px 0 24px; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-dash img { aspect-ratio: 1628 / 1499; border-radius: 12px; box-shadow: 0 0 0 1px var(--wl-line-2); }
/* 7: press coverage, 8: a feed of posts; the pair share one shape */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-press,
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-feed { aspect-ratio: 900 / 398; margin: 2px 0 24px; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-press img { height: 100%; object-position: 50% 0; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-feed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-feed img { height: 100%; border-radius: 8px; }

/* ---------- tablets (768-991): the paired services sit side by side; the paid-social phone beside its words ---------- */
@media screen and (min-width: 768px) {
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-roster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-channels img { aspect-ratio: 2400 / 762; }  /* the whole band (not "auto": that drops the width/height ratio until the lazy file loads) */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-live { aspect-ratio: 16 / 11; }
  /* 4-8 on one two-column grid: 7 and 8 pair up */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .w-dyn-items {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;  /* the pair (7, 8) start on one line, so their hairlines meet */
    column-gap: clamp(32px, 5.4vw, 80px);
  }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .w-dyn-item { align-self: stretch; align-content: start; }  /* Webflow centres them */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .w-dyn-item { grid-column: 1 / -1; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .w-dyn-item:nth-child(4),
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .w-dyn-item:nth-child(5) { grid-column: auto; grid-template-areas: "media" "title" "body" "cta"; }
  /* 5: words left, the phone right */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .w-dyn-item:nth-child(2) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "title media" "body media" "cta media";
  }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-ad { align-self: center; justify-content: center; margin: 0; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-ad .wl-sv-phone { width: min(220px, 100%); }
}

/* ---------- laptops and up: each service gets its own composition ---------- */
@media screen and (min-width: 992px) {
  /* 1 feature: the creators across the page, then the title left and the words right */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .container > .collection-item-grid:nth-child(3) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "media media" "title body" "cta body";
    border-top: 0;
    padding-top: 8px;
  }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-roster { margin: 0 0 clamp(32px, 3.4vw, 48px); }
  /* 2 split: words left (5 of 12), the mosaic right (7 of 12) */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .container > .collection-item-grid:nth-child(4) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "title media" "body media" "cta media";
  }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-live { aspect-ratio: 662 / 560; margin: 0; }
  /* 3 panel: the reels left (7 of 12), the words right, centred on the phones */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .container > .collection-item-grid:nth-child(5) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "media ." "media title" "media body" "media cta" "media .";
  }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-reels { align-self: center; margin: 0; padding-bottom: clamp(18px, 3vw, 40px); }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-reels .wl-sv-phone { max-width: 210px; }
  /* 4 band: the title left and the words right, the channel band under both */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .w-dyn-item:nth-child(1) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "title body" "cta body" "media media";
  }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-channels { margin: clamp(32px, 3.4vw, 48px) 0 0; }
  /* 5 text-led: a wide measure for the long paragraph, the ad beside it */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .w-dyn-item:nth-child(2) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-ad .wl-sv-phone { width: 220px; }
  /* 6: the platform screen left, the words right */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .w-dyn-item:nth-child(3) {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "media title" "media body" "media cta";
  }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-dash { margin: 0; }
}

/* ---------- phones: title first, then its picture, words and button; tighter spacing ---------- */
@media screen and (max-width: 767px) {
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid { padding: 30px 0 34px; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .heading-29 { margin-bottom: 16px; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .heading-29::before { margin-bottom: 10px; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .collection-item-grid .w-richtext + .button-hero-white { margin-top: 20px; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .container > .collection-item-grid:nth-child(3) { border-top: 0; padding-top: 4px; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .our-services .container > .collection-item-grid:nth-child(5) { margin: 4px 0 18px; padding: 28px 16px 30px; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-reels { gap: 10px; margin-bottom: 24px; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-reels .wl-sv-phone { width: calc((100% - 20px) / 3); border-radius: 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 4px #03060f, 0 0 0 5px rgba(255, 255, 255, .16); }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-reels .wl-sv-phone:nth-child(2) { margin-top: 18px; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .wl-sv-feed { gap: 4px; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-white.our-services .collection-item-grid .wl-sv-media.wl-sv-feed img { border-radius: 6px; }
}

@media screen and (max-width: 991px) {
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .container-case-study-hero-image.all-services { height: clamp(380px, 62vh, 620px); }
  /* one column below laptops: the short claim no longer leaves an empty column beside the long paragraph */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud .w-richtext { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud .w-richtext h3 { max-width: 24ch; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud .w-richtext p { max-width: 68ch; }
}
@media screen and (max-width: 767px) {
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .container-case-study-hero-image.all-services { height: clamp(360px, 60svh, 540px); background-position: 70% 20%; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero > * { padding: 0; }  /* the title and button on the 20 px gutter, like the text below */
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero .text-hero-pretitle { font-size: clamp(2.25rem, 9.6vw, 2.9rem); }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud .w-richtext { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud { padding-top: 44px; }
}

/* ---------- the call to talk: a lime band across the page ---------- */
html[data-wf-page="6838ef980628adbe5a7cfc14"] body > .paragraph-28 {
  margin: 0;
  padding: clamp(30px, 4.4vw, 56px) max(var(--wl-gutter), calc((100% - 780px) / 2));  /* lime edge to edge, lines at most ~780 px */
  background: var(--wl-lime);
  color: var(--wl-ink);
  font-family: Poppins, sans-serif;
  font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-align: center;
  text-wrap: balance;
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] body > .paragraph-28 a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: .35em;
  color: var(--wl-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--wl-ink);
  white-space: nowrap;
  transition: gap .2s var(--wl-ease);
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] body > .paragraph-28 a strong { color: inherit; font-weight: 700; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] body > .paragraph-28 a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
}
html[data-wf-page="6838ef980628adbe5a7cfc14"] body > .paragraph-28 a:hover { gap: 14px; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] body > .paragraph-28 + .divider-gray { display: none; }

/* ---------- shared blocks ---------- */
html[data-wf-page="6838ef980628adbe5a7cfc14"] #contact > .section-cloud { margin-bottom: 0; }
html[data-wf-page="6838ef980628adbe5a7cfc14"] body > .container-960-left { width: calc(100% - 2 * var(--wl-gutter)); margin: 0 auto var(--wl-section); }

/* the campaigns title: Webflow's navy on the navy page (redesign.css only fixes it on the homepage) */
html[data-wf-page="6838ef980628adbe5a7cfc14"] #who .label-brands {
  margin: 0 0 22px;
  padding: 0;
  color: #fff;
  font-size: var(--wl-h-section);
  line-height: 1.08;
  text-align: left;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-page-hero + .section-cloud { padding-top: 48px; }
}

/* ---------- no dead bands: the shared campaigns and Let's Talk blocks sit closer together ---------- */
html[data-wf-page="6838ef980628adbe5a7cfc14"] .section-dark-cloud#who { padding-bottom: clamp(24px, 3vw, 48px); }
html[data-wf-page="6838ef980628adbe5a7cfc14"] #contact > .section-cloud { padding-top: 0; }