/* /services/<service> (CMS template, 12 Oct): one long article per service, designed to read well.
   The service photo opens the page, clean, with the label and the title in lime under it on the navy page; the article
   runs in a comfortable column; a side column holds the Book a Chat button and a network reel in a phone frame, and
   stays beside the reader all the way down (sticky). On phones the button floats at the foot of the screen until the
   article ends. Wrapper + reel: service-detail.fixes.json; reel per service and subhead classes: service-detail.js.
   13 Oct, Charlie: "the overlays on the pictures make them look weird and ai": no wash, no text on the photo. */

/* ---------- first screen ---------- */
html[data-wf-page="6836aade638718aef72e2283"] .section-black-blue.case-study-hero { margin-bottom: 0; }
/* the screen's height less room for the label and a two-line title, so photo and title share the first screen */
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image {
  height: clamp(320px, calc(100vh - 390px), 620px);
  background-size: cover;
  background-position: center 40%;
}
/* real network content instead of the CMS's stock and AI-looking photos (the CMS sets each photo inline; matched here
   by its file id). Wide crops for laptops and tablets, tall crops for phones. */
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image[style*="6a83485348606683186a3773"] { background-image: url("/_redesign/webp/396dd0be158145ae.webp") !important; background-position: 50% 50%; }  /* 15 Oct: was a soft video frame (svc-smm.webp); now the UNREEL pages we run, 1848px */
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image[style*="6a9992808cde39b2d2e6dc02"] { background-image: url("/_redesign/mock-img/svc-whitelisting.webp") !important; background-position: 50% 40%; }
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image[style*="6a675d68ffee2fcab38b3f37"] { background-image: url("/_redesign/mock-img/edge-1200.webp") !important; background-position: 50% 24%; }  /* the climbers' helmets in frame */
/* 15 Oct: bg_speed renames the stock photo in the inline style (to 8e33a11329f97b8b.webp), so this rule had stopped
   matching and the 720px stock office photo showed instead of the Cannes pier. Both names match now. */
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image:is([style*="69a9156a3fe7177141e0dadd"], [style*="8e33a11329f97b8b"]) { background-image: url("/_redesign/mock-img/cannes-pier-1200.webp") !important; background-position: 50% 60%; }
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image[style*="6a70ba16e0949cf327feab30"] { background-image: url("/_redesign/mock-img/starlight-1200.webp") !important; background-position: 50% 55%; }
/* Whitelisting's title runs to three lines on laptops: its photo is shorter so the title still ends on the first screen */
@media screen and (min-width: 768px) {
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image[style*="6a9992808cde39b2d2e6dc02"] { height: clamp(300px, calc(100vh - 450px), 560px); background-position: 50% 6%; }  /* her face in frame */
}
@media screen and (max-width: 767px) {
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image[style*="6a83485348606683186a3773"] { background-image: url("/_redesign/webp/396dd0be158145ae.webp") !important; background-position: 50% 50%; }
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image[style*="6a9992808cde39b2d2e6dc02"] { background-image: url("/_redesign/mock-img/svc-whitelisting-tall.webp") !important; background-position: 50% 30%; }
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image[style*="6a70ba16e0949cf327feab30"] { background-position: 45% 50%; }
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image[style*="6a675d68ffee2fcab38b3f37"] { background-position: 50% 50%; }
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image:is([style*="69a9156a3fe7177141e0dadd"], [style*="8e33a11329f97b8b"]) { background-position: 40% 50%; }
}
/* the label and title start just under the photo, on the navy page */
html[data-wf-page="6836aade638718aef72e2283"] .section-cloud.single-service-post {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: clamp(22px, 2.6vw, 36px) var(--wl-gutter) var(--wl-section);
}
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings {
  width: 100%;
  max-width: var(--wl-max);
  margin: 0 auto;
  align-items: flex-start;
}
html[data-wf-page="6836aade638718aef72e2283"] .link-block-6 { margin: 0 0 14px; text-decoration: none; }
html[data-wf-page="6836aade638718aef72e2283"] .link-block-6 .label-brands {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-family: Poppins, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .2s;
}
html[data-wf-page="6836aade638718aef72e2283"] .link-block-6 .label-brands::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--wl-lime);
  transition: width .25s var(--wl-ease);
}
html[data-wf-page="6836aade638718aef72e2283"] .link-block-6:hover .label-brands { color: #fff; }
html[data-wf-page="6836aade638718aef72e2283"] .link-block-6:hover .label-brands::before { width: 34px; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .container-case-study-headings > h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-size: clamp(2rem, 1.05rem + 3vw, 4.1rem);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: 0;
  text-wrap: balance;
}
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .divider-gray {
  width: 56px;
  height: 4px;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  border-radius: 2px;
  background: var(--wl-lime);
}
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .spacer-2em { width: 100%; height: clamp(18px, 2vw, 28px); }

/* ---------- the opening paragraph: the lead, with its short list as chips ---------- */
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .w-richtext:nth-child(5) p {
  max-width: 54ch;
  color: #fff;
  font-size: clamp(1.08rem, .98rem + .45vw, 1.35rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -.01em;
}
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .w-richtext:nth-child(5) p strong { font-weight: 600; }
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .w-richtext:nth-child(5) ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
}
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .w-richtext:nth-child(5) ul > li {
  margin: 0;
  padding: 9px 16px 9px 34px;
  border: 1px solid var(--wl-line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: #fff;
  font-size: 14.5px;
  line-height: 1.35;
}
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .w-richtext:nth-child(5) ul > li::before { left: 15px; top: calc(50% - 4px); }

/* ---------- the article ---------- */
html[data-wf-page="6836aade638718aef72e2283"] .container-results-right {
  width: 100%;
  max-width: 70ch;
  margin: clamp(8px, 2vw, 24px) 0 0;
  padding: clamp(28px, 3vw, 40px) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--wl-line);
  border-radius: 0;
  color: var(--wl-muted);
}
html[data-wf-page="6836aade638718aef72e2283"] .rich-text-results,
html[data-wf-page="6836aade638718aef72e2283"] .container-results-right ~ .w-richtext { max-width: 70ch; color: var(--wl-muted); }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext :is(p, li) { font-size: clamp(15.5px, 14.8px + .25vw, 17.5px); line-height: 1.78; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext a { color: #fff; font-weight: 600; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext li strong { color: #fff; }
/* paragraphs that are only a bold line read as the article's subheads (service-detail.js marks them) */
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext p.wl-sd-sub {
  margin: 2.1em 0 .65em;
  color: #fff;
  font-size: clamp(1.12rem, .98rem + .5vw, 1.38rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
}
html[data-wf-page="6836aade638718aef72e2283"] .rich-text-results > p.wl-sd-sub:first-child { margin-top: 0; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext p.wl-sd-sub::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin: 0 0 14px;
  border-radius: 2px;
  background: var(--wl-lime);
}
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext h2 {
  margin: 2.2em 0 .5em;
  color: #fff;
  font-family: Bungee, sans-serif;
  font-size: clamp(1.4rem, 1rem + 1.3vw, 2.1rem);
  font-weight: 400;
  line-height: 1.1;
}
html[data-wf-page="6836aade638718aef72e2283"] .rich-text-results > h2:first-child { margin-top: 0; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext h3 {
  margin: 2em 0 .6em;
  color: #fff;
  font-family: Bungee, sans-serif;
  font-size: clamp(1.2rem, .95rem + .8vw, 1.6rem);
  font-weight: 400;
  line-height: 1.15;
}
html[data-wf-page="6836aade638718aef72e2283"] .rich-text-results > h3:first-child { margin-top: 0; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext h3 strong { font-weight: inherit; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext h4 {
  margin: 2em 0 .6em;
  color: #fff;
  font-family: Bungee, sans-serif;
  font-size: clamp(1.08rem, .95rem + .5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.2;
}
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext h4 strong { font-weight: inherit; }
html[data-wf-page="6836aade638718aef72e2283"] .rich-text-results > h4:first-child { margin-top: 0; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext ul > li { margin-bottom: .75em; }
/* numbered steps */
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext ol { counter-reset: wl-step; margin: 0 0 1.4em; padding: 0; list-style: none; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext ol > li {
  position: relative;
  margin: 0 0 1em;
  padding: 0 0 0 52px;
  counter-increment: wl-step;
}
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext ol > li::before {
  content: counter(wl-step);
  position: absolute;
  left: 0;
  top: .1em;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--wl-lime);
  border-radius: 50%;
  color: var(--wl-lime);
  font-family: Bungee, sans-serif;
  font-size: 14px;
  line-height: 1;
}
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext figure { margin: 1.6em 0 2.2em; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext figure > div { overflow: hidden; border-radius: var(--wl-r-md); box-shadow: 0 0 0 1px var(--wl-line); }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext figure img { display: block; width: 100%; height: auto; border-radius: 0; }
/* the closing block (next steps, questions) */
html[data-wf-page="6836aade638718aef72e2283"] .container-results-right ~ .w-richtext {
  width: 100%;
  margin-top: clamp(12px, 2vw, 28px);
  padding: clamp(28px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--wl-line);
}
html[data-wf-page="6836aade638718aef72e2283"] .container-results-right ~ .w-richtext > :first-child { margin-top: 0; }
html[data-wf-page="6836aade638718aef72e2283"] .container-results-right ~ .w-richtext > h3:first-child { color: var(--wl-lime); }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-embed { width: 100%; margin-top: 1.4em; }

/* ---------- the side column: a reel in a phone frame and the button ---------- */
html[data-wf-page="6836aade638718aef72e2283"] .wl-sd-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 30px;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .28),
    0 0 0 7px #03060f,
    0 0 0 8px rgba(255, 255, 255, .16),
    0 40px 80px -24px rgba(0, 0, 0, .8);
}
html[data-wf-page="6836aade638718aef72e2283"] .wl-sd-phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 2.4%;
  left: 50%;
  width: 30%;
  height: 3.6%;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
html[data-wf-page="6836aade638718aef72e2283"] .wl-sd-phone .wl-reel-video { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-wf-page="6836aade638718aef72e2283"] .wl-sd-stick .button-hero-white {
  align-self: stretch;
  margin: 0;
  background: var(--wl-lime);
  border-color: var(--wl-lime);
  color: var(--wl-ink);
}
html[data-wf-page="6836aade638718aef72e2283"] .wl-sd-stick .button-hero-white:hover { box-shadow: 0 12px 30px -12px rgba(210, 248, 1, .7); }

@media screen and (min-width: 992px) {
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(230px, 20vw, 280px);
    column-gap: clamp(48px, 7vw, 120px);
    align-items: start;
    justify-items: start;
  }
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > * { grid-column: 1; }
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .wl-sd-aside {
    grid-column: 2;
    grid-row: 1 / span 12;
    align-self: stretch;
    justify-self: stretch;
    margin-top: 0;  /* below the photo, level with the label: nothing of the column lies on the photo */
  }
  /* the button first, beside the title on the first screen, then the phone under it */
  html[data-wf-page="6836aade638718aef72e2283"] .wl-sd-stick {
    position: sticky;
    top: 104px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  /* phone frames shorter than the screen: keep the button and the phone in view on short laptops */
  html[data-wf-page="6836aade638718aef72e2283"] .wl-sd-phone { width: min(100%, calc((100vh - 360px) * 9 / 16)); align-self: center; }
}

/* ---------- tablets and phones: one column; the reel after the opening; the button ends the text ---------- */
@media screen and (max-width: 991px) {
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings { display: flex; flex-direction: column; }
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > * { order: 2; }
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > :is(.link-block-6, h1, .divider-gray, .spacer-2em:nth-child(4)),
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .w-richtext:nth-child(5) { order: 1; }
  html[data-wf-page="6836aade638718aef72e2283"] :is(.wl-sd-aside, .wl-sd-stick) { display: contents; }
  html[data-wf-page="6836aade638718aef72e2283"] .wl-sd-phone {
    order: 1;
    align-self: center;
    width: min(62vw, 250px);
    margin: clamp(28px, 6vw, 44px) 0 clamp(8px, 2vw, 16px);
  }
  /* 14 Oct (Safari stress test): floating, it sat on top of the paragraph being read on every phone and iPad; the header's
     Contact Us is always in view, so here the button simply ends the text */
  html[data-wf-page="6836aade638718aef72e2283"] .wl-sd-stick .button-hero-white {
    position: static;
    order: 3;
    align-self: flex-start;
    margin-top: clamp(28px, 5vw, 40px);
  }
  html[data-wf-page="6836aade638718aef72e2283"] .container-results-right,
  html[data-wf-page="6836aade638718aef72e2283"] .rich-text-results,
  html[data-wf-page="6836aade638718aef72e2283"] .container-results-right ~ .w-richtext { max-width: 70ch; }
}
@media screen and (max-width: 767px) {
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image { height: clamp(240px, 46svh, 440px); }
  html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-hero-image[style*="6a9992808cde39b2d2e6dc02"] { height: clamp(220px, 40svh, 400px); }  /* five-line title */
  html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .container-case-study-headings > h1 { font-size: clamp(2.2rem, 9.6vw, 2.8rem); }  /* at least 2.3x the body text at 390 */
  html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext ol > li { padding-left: 46px; }
}

/* ---------- shared blocks ---------- */
html[data-wf-page="6836aade638718aef72e2283"] #contact > .section-cloud { margin-bottom: 0; }
/* a bold line straight under a section heading is its kicker (AI Search's "Step 1: ..."), not a new subhead */
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext h2 + p.wl-sd-sub { margin-top: 0; color: var(--wl-lime); font-size: clamp(1rem, .95rem + .25vw, 1.12rem); }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext h2 + p.wl-sd-sub::before { display: none; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext :is(h3, h4) + p.wl-sd-sub { margin-top: 1em; }
/* the opening lead's own bold line needs no marker (the lime rule sits just above it) */
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .w-richtext:nth-child(5) p.wl-sd-sub { margin: 0 0 .5em; font-size: clamp(1.08rem, .98rem + .45vw, 1.35rem); }
html[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings > .w-richtext:nth-child(5) p.wl-sd-sub::before { display: none; }
/* the closing block's questions (a bold line on its own, or a bold line that opens its answer) read as one FAQ */
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .container-results-right ~ .w-richtext p.wl-sd-sub {
  margin: 1.5em 0 .35em;
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
}
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .container-results-right ~ .w-richtext p.wl-sd-sub::before { display: none; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext p.wl-sd-qa { margin-top: 1.5em; }
html[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext p.wl-sd-qa > strong:first-child {
  display: block;
  margin: 0 0 .35em;
  color: #fff;
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
  font-weight: 600;
  line-height: 1.4;
}

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

/* AI Search Optimisation has no reel (service-detail.js drops the phone), which left the sticky button alone in a
   280px column beside the article: the audit's biggest empty area on these pages (15 Oct). Without a phone the side
   column is only as wide as the button, and the article's dashboard pictures run the full width; the text keeps its
   70-character lines. */
@media screen and (min-width: 992px) {
  html.wl-sd-nophone[data-wf-page="6836aade638718aef72e2283"] .container-case-study-headings { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 4vw, 64px); }
  html.wl-sd-nophone[data-wf-page="6836aade638718aef72e2283"] :is(.container-results-right, .rich-text-results, .container-results-right ~ .w-richtext) { max-width: none; }
  html.wl-sd-nophone[data-wf-page="6836aade638718aef72e2283"] :is(.container-results-right, .rich-text-results, .container-results-right ~ .w-richtext) > :not(figure) { max-width: 70ch; }
  html.wl-sd-nophone[data-wf-page="6836aade638718aef72e2283"] .single-service-post .w-richtext figure { width: 100%; max-width: 940px !important; }
}