/* =============================================================================
   X3WEB — Digital Marketing (dm-*)
   -----------------------------------------------------------------------------
   /digital-marketing and the /marketing-results/ pages. Loaded after x3.css
   through $x3_page_css; uses its tokens and nothing else.

   The result pages also load x3-bm.css for the screenshot frame (.bm-frame)
   and the lightbox; assets/js/business-model.js opens it (main[data-bm-page]).

   Sections
     1. Client-results cards and logo chips   (x3_mr_card())
     2. Result-page header                    (logo panel, h1, intro)
     3. At a glance
     4. Heading beside its text, numbered "what we did"
     5. Pictures: framed, each row at one height
     6. Pull-quote, figures row, small print, CTA note
     7. /digital-marketing: hero on phones, photo collage, four points, ad
        managers, platform sections, three steps, "Running both?" block
     8. The lightbox on phones: pictures open larger than the screen, to pan
   ============================================================================= */


/* ── 1. Client-results cards and logo chips ────────────────────────────────── */

.dm-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
}
@media (min-width: 640px) {
  .dm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three cards on two columns: the third sits centred under the pair. */
  .dm-cards > .dm-card:last-child:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - clamp(1rem, 0.6rem + 1.2vw, 1.75rem) / 2);
  }
}
@media (min-width: 1024px) {
  .dm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dm-cards > .dm-card:last-child:nth-child(3) { grid-column: auto; width: auto; }
  .dm-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 64rem; margin-inline: auto; }
}

.dm-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.dm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.dm-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--scene);
}
.dm-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform 0.6s var(--ease);
}
.dm-card:hover .dm-card__media > img { transform: scale(1.03); }

/* The client's logo on a white chip. Over a card's picture it sits in the top
   left corner; in the logo row it is a link of its own. */
/* Every chip is the same size, so the logos read as one set. */
.dm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 10.5rem;
  height: 3.75rem;
  padding: 0.5rem 0.875rem;
  background: var(--card);
  box-shadow: var(--shadow-2);
}
/* --logo-zoom (data: logo['zoom']) enlarges a logo file that carries wide
   white margins; the chip clips the margin, never the mark. */
.dm-chip img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform: scale(var(--logo-zoom, 1));
}
.dm-card__media .dm-chip {
  position: absolute;
  top: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  left: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
}

.dm-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.875rem;
  padding: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
}
.dm-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
/* The area always takes its own line under the tags, so the result lines of
   cards side by side start at the same height. */
.dm-card__area {
  display: inline-flex;
  flex-basis: 100%;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.dm-card__area svg { flex: none; width: 0.875rem; height: 0.875rem; color: var(--accent); }
.dm-card__result {
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.dm-card__result a { color: inherit; text-decoration: none; }
.dm-card__result a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.dm-card__text { font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }
.dm-card__body .x3-link { margin-top: auto; }
@media (max-width: 767.98px) {
  .dm-card__body { align-items: center; }
  .dm-card__meta,
  .dm-card__area { justify-content: center; }
  .dm-card__body .x3-link { align-self: center; }
}



/* ── 2. Result-page header ─────────────────────────────────────────────────── */

/* On the hero's wall, like the top of every other page. Phones: the logo
   panel, then the h1 and intro. From 900px: copy left, logo panel right. */
.dm-rhead {
  background: var(--wall);
  padding-top: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
}
.dm-rhead .x3-crumb { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.dm-rhead .x3-eyebrow { margin-bottom: 1.25rem; }

.dm-rhead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .dm-rhead__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .dm-rhead__copy { order: 1; }
  .dm-rhead__logo { order: 2; }
}

.dm-rhead__copy { max-width: 48rem; }
.dm-rhead__title {
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
  font-weight: 450;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.dm-rhead__lead {
  max-width: 40rem;
  margin-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-hero);
}

.dm-rhead__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 8.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.dm-rhead__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(78%, 16rem);
  max-height: 6rem;
  object-fit: contain;
  transform: scale(var(--logo-zoom, 1));
}
/* From 900px: a wider panel, and the logo no bigger than about its own file
   (the Kagima logo is a 258px picture inside its SVG; larger, it goes soft). */
@media (min-width: 900px) {
  .dm-rhead__logo { height: auto; aspect-ratio: 16 / 10; padding: clamp(2rem, 1rem + 2vw, 3.5rem); }
  .dm-rhead__logo img { max-width: min(80%, 16rem); max-height: 14rem; }
}


/* ── 3. At a glance ────────────────────────────────────────────────────────── */

.dm-glance {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--line-strong);
}
.dm-glance__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--line);
}
.dm-glance dt {
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dm-glance dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
@media (min-width: 640px) {
  .dm-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-glance__item:nth-child(odd) { padding-right: 1.5rem; }
  .dm-glance__item:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .dm-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dm-glance__item,
  .dm-glance__item:nth-child(odd),
  .dm-glance__item:nth-child(even) {
    padding: 1.5rem 1.5rem 0.25rem;
    border-bottom: 0;
  }
  .dm-glance__item + .dm-glance__item { border-left: 1px solid var(--line); }
  .dm-glance__item:first-child { padding-left: 0; }
}


/* ── 4. Heading beside its text, numbered "what we did" ────────────────────── */

.dm-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 1rem + 4vw, 6rem);
}
@media (min-width: 900px) {
  .dm-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; }
  .dm-two__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.dm-two__body { max-width: 46rem; }
p.dm-two__body { font-size: clamp(1.125rem, 1.02rem + 0.35vw, 1.3125rem); color: var(--ink); }

.dm-did {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.dm-did__item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--line);
}
.dm-did__n {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.05rem;
  font-size: 1.25rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.dm-did__n::after { content: ''; width: 1.75rem; height: 1px; background: var(--accent); }
.dm-did__item p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-muted); }
.dm-did__item strong { font-weight: 600; color: var(--ink); }

/* Phones centre every block (x3.css): the number sits above its text, with a
   hairline either side, as the site's numbered steps do. */
@media (max-width: 767.98px) {
  .dm-did__item { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0.75rem; }
  .dm-did__n { flex-direction: row; align-items: center; gap: 0.75rem; }
  .dm-did__n::before { content: ''; width: 1.75rem; height: 1px; background: var(--accent); }
}


/* ── 5. Pictures: framed, each row at one height ───────────────────────────── */

/*
 * A row's pictures share one height: each grows in proportion to its own
 * width-to-height ratio (--ar, set on the figure), and the row is no wider than
 * --dm-row-h tall allows (--ar-sum and --n set on the row). Phones stack them,
 * a portrait no wider than --dm-row-h tall allows. The frame is .bm-frame; the
 * screen keeps the picture's own ratio (--bm-ratio), so nothing is cropped.
 */
.dm-gal {
  --dm-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  --dm-row-h: 24rem;
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.dm-gal__row {
  display: flex;
  flex-direction: column;
  gap: var(--dm-gap);
}
.dm-gal__row > .dm-shot {
  width: 100%;
  max-width: calc(var(--dm-row-h) * var(--ar, 1));
  margin-inline: auto;
}
@media (min-width: 900px) {
  .dm-gal { --dm-row-h: 30rem; }
  .dm-gal__row {
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    max-width: calc(var(--dm-row-h) * var(--ar-sum, 1) + (var(--n, 1) - 1) * var(--dm-gap));
    margin-inline: auto;
  }
  .dm-gal__row > .dm-shot {
    flex: var(--ar, 1) 1 0%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }
}
.dm-shot figcaption { margin-top: 0.875rem; }


/* ── 6. Pull-quote, figures row, small print, CTA note ─────────────────────── */

.dm-quote {
  max-width: 60rem;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.dm-quote blockquote p {
  font-size: clamp(1.625rem, 1.15rem + 1.7vw, 2.75rem);
  font-weight: 420;
  line-height: 1.16;
  letter-spacing: -0.032em;
  color: var(--ink);
}
.dm-quote figcaption {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dm-quote figcaption::before { content: ''; flex: none; width: 2.25rem; height: 1px; background: var(--accent); }
@media (max-width: 767.98px) {
  .dm-quote figcaption { gap: 0.75rem; }
  .dm-quote figcaption::before,
  .dm-quote figcaption::after { content: ''; flex: none; width: 1.75rem; height: 1px; background: var(--accent); }
}

.dm-figs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--line-strong);
}
.dm-fig {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.dm-fig__before { font-size: 0.9375rem; line-height: 1.3; color: var(--ink-muted); }
.dm-fig__before--empty { display: none; }
.dm-fig__num {
  font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums;
  color: var(--accent);
}
.dm-fig__label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (min-width: 768px) {
  .dm-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dm-fig { padding: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem) clamp(1rem, 0.6rem + 1.2vw, 2rem) 0.5rem; border-bottom: 0; }
  .dm-fig + .dm-fig { border-left: 1px solid var(--line); }
  .dm-fig:first-child { padding-left: 0; }
  .dm-fig__before--empty { display: block; }
}

.dm-smallprint { max-width: 48rem; margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); }
.dm-smallprint--center { margin-inline: auto; text-align: center; }

.dm-band__note { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); }


/* ── 7. /digital-marketing ─────────────────────────────────────────────────── */

/* The hero on phones (plan, Section 1): the portrait photograph sits under the
   copy, and the "300+" badge moves up under the headline, so the headline, the
   proof figure, the paragraph and the main button are on the first screen of a
   real phone (Facebook's in-app browser included). Scoped to the page through
   main.dm-page, which follows the hero; every other page keeps the standard
   order. */
@media (max-width: 639.98px) {
  .hero:has(~ .dm-page) .hero__media { order: 4; }
  .hero:has(~ .dm-page) .hero__top { padding-top: 1rem; padding-bottom: 1rem; }
  .hero:has(~ .dm-page) .x3-crumb,
  .hero:has(~ .dm-page) .x3-eyebrow { margin-bottom: 0.75rem; }
  .hero:has(~ .dm-page) .hero__body { display: flex; flex-direction: column; padding-top: 0; padding-bottom: 2.25rem; }
  .hero:has(~ .dm-page) .x3-btnrow { margin-top: 1rem; }
  .hero:has(~ .dm-page) .hero__note { margin-top: 0.875rem; }
  .hero:has(~ .dm-page) .hero__trust,
  .hero:has(~ .dm-page) .hero__note + .hero__trust { order: -1; justify-content: center; margin: 0 0 0.875rem; }
}

/* Tablets: the floating "Book a Strategy Call" pill sits over the hero's round
   button, which opens the same popup as the main button; it steps aside. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero:has(~ .dm-page) .hero__round { display: none; }
}

/* The phone bar's "Book a Strategy Call" is longer than "Get in Touch": it
   takes the wider share of the bar, so it stays on one line. */
main.dm-page ~ .x3-bar { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
main.dm-page ~ .x3-bar .x3-bar__get { gap: 0.45rem; padding-inline: 0.625rem; line-height: 1.2; text-align: center; }

/* Why X3WEB: the photo collage beside the four points. */
.dm-why { align-items: start; }
@media (min-width: 900px) {
  .dm-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/*
 * Phones and tablets: the team photograph across the column with Quentin's
 * portrait as an inset over its lower left corner, hanging below it.
 * From 900px: Quentin's portrait on top, the team photograph offset under it
 * on the right, on a white mat. The padding at the foot is the overhang.
 */
.dm-collage {
  position: relative;
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  padding-bottom: 16%;
}
.dm-collage figure { margin: 0; overflow: hidden; background: var(--scene); }
.dm-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dm-collage__team { aspect-ratio: 3 / 2; box-shadow: var(--shadow-2); }
.dm-collage__quentin {
  position: absolute;
  left: 5%;
  bottom: 0;
  z-index: 1;
  width: 34%;
  aspect-ratio: 4 / 5;
  border: 0.3125rem solid var(--card);
  box-shadow: var(--shadow-3);
}
.dm-collage__quentin img { object-position: 50% 30%; }
@media (min-width: 900px) {
  .dm-collage {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    max-width: none;
    padding-bottom: 20%;
  }
  .dm-collage__quentin {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 0;
    width: 60%;
    border: 0;
    box-shadow: var(--shadow-2);
  }
  .dm-collage__team {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 72%;
    border: 0.5rem solid var(--card);
    box-shadow: var(--shadow-3);
  }
}

/* The five reviews: the short last row sits centred under the full ones. */
@media (min-width: 768px) and (max-width: 1149.98px) {
  .dm-page .x3-reviews { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dm-page .x3-review { grid-column: span 2; }
  .dm-page .x3-review:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 1150px) {
  .dm-page .x3-reviews { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dm-page .x3-review { grid-column: span 2; }
  .dm-page .x3-review:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
  .dm-page .x3-review:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
}

/* The four points: an orange icon on a stone square, the bold heading, the paragraph. */
.dm-points {
  margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.dm-points__item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1.125rem;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--line);
}
.dm-points__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--stone);
  color: var(--accent);
}
.dm-points__icon svg { width: 1.375rem; height: 1.375rem; }
.dm-points__title {
  font-size: clamp(1.125rem, 1.06rem + 0.2vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.dm-points__item p { margin-top: 0.4rem; font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }

/* Meet your ad managers: a round crop of each one's team-page portrait. The
   page sets the face's centre (--fx, --fy, shares of the photo's width and
   height) and the zoom (--z); --ar is the photo's height over its width. */
.dm-mgrs { margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.dm-mgrs__label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dm-mgrs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
  margin-top: 1rem;
  list-style: none;
}
.dm-mgr {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--ink);
  text-decoration: none;
}
.dm-mgr__photo {
  --ar: 1.34;
  position: relative;
  flex: none;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--scene);
  box-shadow: 0 0 0 3px var(--card), var(--shadow-1);
}
.dm-mgr__photo img {
  position: absolute;
  max-width: none;
  width: calc(var(--z, 1) * 100%);
  height: auto;
  left: calc(50% - var(--fx, 0.5) * var(--z, 1) * 100%);
  top: calc(50% - var(--fy, 0.5) * var(--z, 1) * var(--ar) * 100%);
}
.dm-mgr__text { display: grid; gap: 0.1rem; text-align: left; }
.dm-mgr__name { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.dm-mgr__role { font-size: 0.9375rem; line-height: 1.4; color: var(--ink-muted); }
.dm-mgr:hover .dm-mgr__name {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/*
 * Meta Ads and Google Ads: heading, framed screenshot, steps. Phones and
 * tablets stack them in that order (the picture under the heading); from
 * 1024px the copy and steps share one column and the screenshot the other,
 * staying in view while the steps scroll past. --rev mirrors it (Google).
 */
.dm-plat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "shot" "steps";
  gap: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.dm-plat__head  { grid-area: head; }
.dm-plat__shot  { grid-area: shot; }
.dm-plat__steps { grid-area: steps; }
.dm-plat .x3-h2 { font-size: clamp(2rem, 1.3rem + 1.9vw, 3.125rem); }
.dm-plat__shot { width: 100%; max-width: 48rem; margin-inline: auto; }
.dm-plat__h3 { margin-bottom: 1.25rem; }
.dm-plat__more { margin-top: 1.5rem; }
/* On the stone block the deep orange link text falls just short of 4.5:1;
   ink text, with the orange kept for the underline and the arrow. */
.dm-plat__more .x3-link { color: var(--ink); text-decoration-color: var(--accent); }
.dm-plat__more .x3-link svg { color: var(--accent); }
@media (min-width: 1024px) {
  .dm-plat {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-areas: "head shot" "steps shot";
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 0.5rem + 4vw, 6rem);
    row-gap: clamp(2rem, 1.5rem + 1vw, 2.75rem);
  }
  .dm-plat--rev {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-areas: "shot head" "shot steps";
  }
  .dm-plat__shot {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
    max-width: none;
    margin: 0;
  }
}

/* How it works: three steps, side by side from 768px. */
.x3-steps.dm-steps3 { list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .x3-steps.dm-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* "Running Meta and Google together?": a light, centred block under the Google
   cards, inside their section, so it never merges with the reviews below. */
.dm-both {
  max-width: 52rem;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1.25rem, 0.75rem + 2vw, 3rem);
  background: var(--stone);
  border: 1px solid var(--line);
  text-align: center;
}
.dm-both__title {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 420;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.dm-both .x3-lede { max-width: 40rem; margin: 1rem auto 0; }
.dm-both .x3-btnrow { justify-content: center; margin-top: 1.75rem; }

/* Phones centre every block (x3.css); these parts follow. */
@media (max-width: 767.98px) {
  .dm-points__item { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0.875rem; }
  /* One under the other, centred as a group, the photos in line. */
  .dm-mgrs__list { display: grid; justify-content: center; justify-items: start; }
}


/* ── 8. The lightbox on phones ─────────────────────────────────────────────── */

/*
 * The ad-account pictures are a screen inside a photograph, so at a phone's
 * width the screen text is too small to read even full screen. On phones the
 * lightbox (.bm-lightbox, x3-bm.css; the page adds .dm-lightbox) opens the
 * picture larger than the screen and lets a finger pan it: a landscape picture
 * at 240vw (about 900px), a portrait one (.is-tall, business-model.js) at 170vw.
 * The caption stays in view; a tap on the dark edge or the cross closes it.
 */
@media (max-width: 767.98px) {
  /* No backdrop blur here: it would make the box the frame of the fixed close
     button, which would then pan away with the picture. A denser backdrop
     instead, so the page text behind does not show through. */
  .dm-lightbox {
    background: rgb(28 28 25 / 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .dm-lightbox[data-open='true'] {
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 4.5rem 0 1.25rem;
  }
  .dm-lightbox img {
    width: 240vw;
    max-width: none;
    max-height: none;
  }
  .dm-lightbox.is-tall img { width: 170vw; }
  .dm-lightbox figcaption {
    position: sticky;
    left: 1rem;
    width: calc(100vw - 2rem);
    max-width: none;
    margin-top: 1rem;
  }
  .dm-lightbox .bm-lightbox__close { position: fixed; }
}