/* product.css draws its app mockup with a .mk grid; on this page .mk is the body's own class */
body.pdp.mk { display: block; }
.mk {
  --mk-ease: cubic-bezier(.22, .61, .36, 1);
  --mk-out: cubic-bezier(.16, 1, .3, 1);
  --mk-paper: #fcfcf9;
  --mk-ink: #0b0d10;
  --mk-blue: #0062fe;
  --mk-acc: #8fb4ff;
}

/* the badge they clicked, shown back to them (not a link), and one line saying where they found us */
.mk-greet { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }

.mk-greet__t {
  max-width: 34ch; min-height: 3em; min-height: 2lh; /* the space is held before the line is set: no shift */
  font-size: var(--step-0); line-height: 1.5; color: rgb(255 255 255 / .72); text-wrap: pretty;
}

.mk-hero__in .mk-hero__h {
  margin-top: 0;
  font-size: clamp(2.5rem, 1.25rem + 3.6vw, 4.5rem); font-weight: 300; letter-spacing: -.045em; line-height: 1;
  color: var(--paper); text-shadow: 0 0 2.5rem #0b0d10; text-wrap: balance;
}
/* each line rises out of its own mask */
.mk-ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mk-ln > span { display: block; }
.mk-hero__sub {
  max-width: 40ch; margin-top: 1.5rem;
  font-size: var(--step-1); font-weight: 300; line-height: 1.55; color: rgb(255 255 255 / .74); text-wrap: pretty;
}
.mk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2.25rem; }

@media (width <= 900px) {
  /* phones: the badge sits top left with the line under it; the gate is drawn top right */
  
  .mk-greet { flex-direction: column; align-items: flex-start; max-width: calc(100% - 6.5rem); }
  .mk-cta { gap: 1rem; }
}
@media (width <= 420px) {
  
  .mk-greet { margin-bottom: 1.25rem; }
  .mk-cta { margin-top: 1.75rem; }

}

/* The first five seconds, in CSS from first paint (the canvas intro runs on its own clock in media.js). */
@media (prefers-reduced-motion: no-preference) {
  html.js .mk-greet { animation: mk-fade .6s var(--mk-ease) both; }
  html.js .mk-ln > span { animation: mk-rise 1.05s var(--mk-out) .1s both; }
  html.js .mk-ln + .mk-ln > span { animation-delay: .22s; }
  html.js .mk-hero__sub { animation: hero-in .9s var(--mk-ease) .45s both; }
  html.js .mk-cta { animation: hero-in .9s var(--mk-ease) .55s both; }

}
@keyframes mk-fade { from { opacity: 0; } }
@keyframes mk-rise { from { transform: translateY(110%); } }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 02 The reach: the booked placements. The numbers are final in the HTML; the stage scrubs them as the
   network settles. Each figure keeps its final width (the screen-reader copy holds it, invisibly). */
.mk-reach {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .875rem 2.25rem; margin-top: 1.5rem;
}
.mk-reach > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.mk-reach dd {
  display: grid; justify-items: start;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 300; line-height: 1; letter-spacing: -.04em;
  color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mk-reach dd > * { grid-area: 1 / 1; }
.mk-reach dd > .sr-only { position: static; width: auto; height: auto; overflow: visible; }
.mk-reach dt {
  margin-top: .5rem;
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.35; letter-spacing: .04em; color: rgb(255 255 255 / .66);
}

@media (width <= 900px) {
  .mk-reach { grid-template-columns: repeat(2, auto); gap: 1rem 2rem; }
}

/* 03 The response: the earlier campaign's figure, labelled with its dates in the heading itself */

.mk-fig__n {
  display: block; margin-top: .875rem;
  font-size: clamp(3rem, 1rem + 6.25vw, 6.75rem); font-weight: 300; line-height: .95; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mk-fig__l { display: block; margin-top: .75rem; font-size: var(--step-2); font-weight: 300; line-height: 1.15; letter-spacing: -.025em; }

/* 04 Verified: 387 reported, 19 real. When the ledger culls (data-cull), the reported count steps back. */

#journey[data-cull="1"] .mk-vs__a { opacity: .45; }

html.js #journey.ready:not(.is-reduced):not([data-cull]) .mk-tag { opacity: 0; transform: translateY(8px); }

/* 05 The gate: the ask, the page's mid-way way in to the form */

.mk-chip:is(:hover, :focus-visible) { border-color: rgb(143 180 255 / .55); }
.mk-chip:is(:hover, :focus-visible)::before { background: #0062fe; transform: scale(1); }

/* a narrow cell (the 12-column grid between 1100 and about 1440px): the button drops its disc, then may wrap */
@container (width < 192px) { .mk-res__cta .btn { padding-inline: 1rem; } .mk-res__cta .btn__disc { display: none; } }
@container (width < 166px) { .mk-res__cta .btn { white-space: normal; line-height: 1.25; border-radius: 1.25rem; } }

/* ---------- the enquiry (#talk): the shared contact layout, with this page's copy, team and form ---------- */
.mk-talk .contact__field--opt label::after,
.mk-q--opt legend::after { content: " (optional)"; color: var(--pp-soft); font-weight: 300; }
.mk-talk__k {
  margin-top: 2.25rem;
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(255 255 255 / .66);
}

/* the people behind the work */
.mk-team { margin-top: .25rem; }
.mk-team__l { display: grid; gap: .75rem; margin-top: 1rem; }
.mk-tm { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; column-gap: .875rem; min-height: 56px; color: #fff; }
.mk-tm picture { display: block; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: #1a1d22; }
.mk-tm img { width: 56px; height: 56px; object-fit: cover; filter: grayscale(1); transition: filter .6s var(--mk-ease); }
.mk-tm:is(:hover, :focus-visible) img { filter: grayscale(0); }

.mk-tm__t { display: grid; gap: .0625rem; }
.mk-tm__n { font-size: var(--step-0); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
.mk-tm__r { font-size: var(--step--1); line-height: 1.3; color: rgb(255 255 255 / .6); }

@media (hover: hover) { .mk-tm:hover .mk-tm__n { text-decoration: underline 1px; text-underline-offset: .2em; } }

/* the form's two choice groups: native radios (arrow keys move within a group), drawn as chips */
.mk-q { min-width: 0; margin: 0 0 1.5rem; padding: 0; border: 0; }
.mk-q legend {
  margin-bottom: .75rem; padding: 0;
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .74);
  transition: color .18s;
}

.mk-q label {
  display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 44px; padding: .5rem 1rem;
  border: 1px solid rgb(255 255 255 / .16); border-radius: 999px;
  font-size: .9375rem; line-height: 1.25; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--mk-out), border-color .2s var(--mk-out);
}
.mk-q label::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: rgb(143 180 255 / .5); transform: scale(.4);
  transition: transform .2s var(--mk-out), background-color .2s var(--mk-out);
}
@media (width < 600px) { .mk-q label { gap: .5rem; padding-inline: .75rem; }  }
@media (hover: hover) { .mk-q label:hover { border-color: rgb(255 255 255 / .34); } }

.mk-q:has(:user-invalid) legend { color: var(--c-warn); }
.mk-q:has(:user-invalid) label { border-color: rgb(255 155 138 / .45); }

/* ---------- reduced motion: everything drawn finished and still ---------- */
@media (prefers-reduced-motion: reduce) {
  
  .mk-vs__a, .mk-tag, .mk-chip, .mk-chip::before, .mk-q label, .mk-q label::before, .mk-q legend, .mk-tm img,
  .mk-big__c::before, .mk-res__v::after, .mk-ledger__bar i { transition: none; }
}

/* Hero: the client's logo beside the credit they clicked, so the visitor recognises where they came from.
   The line under it says the rest. Hidden (.is-solo) when the visitor didn't come from the Complex Law campaign. */
.mk-greet { flex-direction: column; align-items: flex-start; gap: .875rem; }
.mk-greet__lk { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mk-greet__cl { display: block; width: auto; height: clamp(1.375rem, .9rem + 1vw, 1.875rem); }

.mk-greet__lk.is-solo .mk-greet__cl, .mk-greet__lk.is-solo .mk-greet__rule { display: none; }
@media (width <= 900px) {
  .mk-greet { max-width: calc(100% - 6.5rem); }
  .mk-greet__lk { gap: .75rem; }
  
}

/* Where we buy media: two rows of media owners drifting in opposite directions (CSS only; the duplicate
   list makes the loop seamless). Paused on hover; still and wrapped under reduced motion. */
.mk-mq { margin-top: clamp(3rem, 5vw, 4.5rem); }

.mk-mq__row {
  display: flex; overflow: hidden; margin-top: 1.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mk-mq__row + .mk-mq__row { margin-top: .75rem; }
.mk-mq__l { display: flex; flex: none; gap: .75rem; padding-right: .75rem; animation: mk-mq 70s linear infinite; }

.mk-mq__row:hover .mk-mq__l { animation-play-state: paused; }
@keyframes mk-mq { to { transform: translateX(-100%); } }
.mk-lg {
  display: inline-flex; align-items: center; gap: .625rem; height: 3.25rem; padding: 0 1.25rem;
  border: 1px solid var(--pp-line-2); border-radius: 999px; white-space: nowrap;
  font-size: var(--step-0); font-weight: 400; letter-spacing: -.01em; color: rgb(255 255 255 / .9);
}
.mk-lg svg { flex: none; width: 1.25rem; height: 1.25rem; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .mk-mq__row { -webkit-mask-image: none; mask-image: none; }
  .mk-mq__l { animation: none; flex-wrap: wrap; flex: 1 1 auto; }
  .mk-mq__dup { display: none; }
}

/* The people behind the work: larger photos, three across */
.mk-team .mk-team__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.mk-team .mk-tm { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; min-height: 0; }
.mk-team .mk-tm picture { width: min(8rem, 100%); height: auto; aspect-ratio: 1; }
.mk-team .mk-tm img { width: 100%; height: 100%; }

@media (width <= 420px) { .mk-team .mk-team__l { gap: .875rem; }  }

/* Could we run yours?: what happens next, the team as three even cards, a heading on the form */
.mk-talk .contact__h { max-width: 12ch; }
.mk-next3 { display: grid; gap: .875rem; margin-top: 2rem; max-width: 34rem; }
.mk-next3 li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; padding-top: .875rem; border-top: 1px solid var(--pp-line); }
.mk-next3__n { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; color: var(--pp-acc); }
.mk-next3 p { font-size: var(--step-0); line-height: 1.5; color: var(--pp-text); }
.mk-next3 b { font-weight: 400; color: #fff; }
.mk-talk .mk-team { margin-top: 2.5rem; }
.mk-team .mk-team__l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.mk-team .mk-tm {
  height: 100%; padding: 1.125rem; gap: .875rem; border: 1px solid var(--pp-line-2); border-radius: 14px;
  background: rgb(255 255 255 / .02); transition: border-color .3s var(--mk-ease), background-color .3s var(--mk-ease);
}
.mk-team .mk-tm:is(:hover, :focus-visible) { border-color: rgb(143 180 255 / .4); background: rgb(0 98 254 / .06); }
.mk-team .mk-tm picture { width: min(6rem, 100%); }
.mk-team .mk-tm__t { gap: .25rem; }
.mk-team .mk-tm__n { font-size: var(--step-0); }
@media (width <= 520px) {
  .mk-team .mk-tm { padding: .75rem; }
  .mk-team .mk-tm__n { font-size: .9375rem; }
  .mk-team .mk-tm__r { font-size: .75rem; }
}
.mk-form__h { margin-bottom: .5rem; font-size: var(--step-1); font-weight: 400; letter-spacing: -.02em; color: #fff; }

/* Where we buy media: its own section straight after the story */

/* The media owners' logos come from one image of them all, already white, at 2x and 3x (logos/strip-2x.webp and
   strip-3x.webp, drawn from the files in logos/ by review/tools/logo-strip.js on 23 Oct 2026): one small request
   instead of 39. Each logo shows its slice: --w and --h are its size, --y where it sits in the image. A changed
   strip needs a new file name, as /assets is cached for a year. */
.mk-lg__s {
  display: block; flex: none; width: var(--w); height: var(--h); opacity: .9;
  background: url(/assets/pages/campaign/logos/strip-2x.webp) 0 var(--y) / 9.5rem 69.125rem no-repeat;
  background-image: -webkit-image-set(url(/assets/pages/campaign/logos/strip-2x.webp) 2x, url(/assets/pages/campaign/logos/strip-3x.webp) 3x);
  background-image: image-set(url(/assets/pages/campaign/logos/strip-2x.webp) 2x, url(/assets/pages/campaign/logos/strip-3x.webp) 3x);
}
.mk-lg--img { padding: 0 1.6rem; }
/* Hero: "We make national advertising campaigns." then the aside, "Full stop.", quieter and set apart */
.mk-hero__h { max-width: 15ch; }
.mk-ln--aside { margin-top: .3em; color: var(--pp-acc); font-size: .5em; letter-spacing: -.02em; }

/* ---------- The mock-ups around the page: TV and radio (media section), the bus (street band) ---------- */
.mk-mock { margin: 0; }
.mk-mock__face {
  position: relative; aspect-ratio: 2.3 / 1; container-type: inline-size; overflow: hidden; border-radius: 14px;
  background: #0f141c; box-shadow: 0 30px 80px -30px rgb(0 98 254 / .4), 0 0 0 1px rgb(255 255 255 / .08);
}
.mk-mock .mk-sc { opacity: 1; transform: none; }
.mk-mock__cap { margin-top: .75rem; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .58); }
.mk-mock:not(.is-live) * { animation-play-state: paused !important; }

/* Radio: the car-dashboard set from the mock-up, its unit nudging to the beat while the levels move */
@media (prefers-reduced-motion: no-preference) {
  html.js .mk-mock--radio .mk-sc--radio .mk-sc__unit { animation: mk-thump .9s cubic-bezier(.3, 0, .3, 1) infinite; }
}
@keyframes mk-thump { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-.45cqi); } 55% { transform: translateY(0); } }

/* Hero: the client's logo and the credit evened out (James: the logo looked small on phones) */
.mk-greet__cl { height: clamp(1.75rem, 1.3rem + .9vw, 2.25rem); }
@media (width <= 900px) {
  
  .mk-greet__cl { height: 1.9rem; }
}

/* 03 Response: how real-world campaigns are attributed, as five small cards with dot icons */

.mk-at__ic { width: 1.75rem; height: 1.75rem; margin-top: .15rem; }
.mk-at__ic .l { fill: rgb(255 255 255 / .8); }
.mk-at__ic .b { fill: #0062fe; }

/* the strip: three rows, all drifting the same way at slightly different speeds */

.mk-mq__row--1 .mk-mq__l { animation-duration: 75s; }
.mk-mq__row--2 .mk-mq__l { animation-duration: 90s; }
.mk-mq__row--3 .mk-mq__l { animation-duration: 82s; }

/* Title: bigger and bolder; "Full stop." quieter, in blue */
.mk-hero__h {
  max-width: 13ch; font-size: clamp(2.9rem, 1.1rem + 5.6vw, 6.75rem); font-weight: 500;
  letter-spacing: -.055em; line-height: .93;
}
.mk-hero__h .mk-ln { padding-bottom: .06em; margin-bottom: -.06em; }
.mk-ln--aside { margin-top: .45em; font-size: .4em; font-weight: 500; letter-spacing: -.03em; color: var(--pp-acc); }
.mk-hero__sub { max-width: 42ch; margin-top: clamp(1.25rem, 2vw, 1.75rem); }
.mk-greet { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

/* "Our advertisements as seen on": every media owner, three rows drifting the same way */
.mk-seen__k { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .66); }
.mk-seen .mk-mq { margin-top: 0; }
.mk-seen .mk-mq__row { margin-top: 0; }
.mk-seen .mk-mq__row + .mk-mq__row { margin-top: .625rem; }
.mk-seen .mk-lg { height: 3.4rem; border-color: rgb(255 255 255 / .1); }
.mkb-seen { padding: clamp(1rem, 2vw, 2rem) 0 clamp(3rem, 6vw, 5rem); }

/* A quiet button in every section; the big one stays for the end */
.mk-btn2 {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: clamp(1.5rem, 2.5vw, 2rem); min-height: 44px; padding: 0 1.15rem;
  border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; font-size: var(--step-0); color: #fff; text-decoration: none;
  transition: border-color .25s var(--mk-ease), background-color .25s var(--mk-ease);
}
.mk-btn2 span { color: var(--pp-acc); transition: transform .25s var(--mk-ease); }
.mk-btn2:is(:hover, :focus-visible) { border-color: rgb(143 180 255 / .6); background: rgb(0 98 254 / .12); }
.mk-btn2:is(:hover, :focus-visible) span { transform: translateX(3px); }

/* Team: short roles, a small arrow to each profile, Alice's credit as a link underneath */
.mk-tm__go { margin-left: .35em; font-size: .8em; color: var(--pp-acc); }

/* Calmer mock-ups: fewer details, and adverts that carry the line and nothing else. They are pictures inside
   pictures, in their own colours (a navy tint here made them look greyed out next to the real adverts; gone 23 Oct). */
.mk-mock__face, .mk-sp__face { box-shadow: 0 0 0 1px rgb(255 255 255 / .08); border-radius: 16px; }
.mk-mock .mk-ad { display: flex; align-items: center; justify-content: flex-start; }
.mk-mock .mk-ad__h { font-weight: 500; letter-spacing: -.025em; }
.mk-mock .mk-sc__tact, .mk-mock .mk-sc__sig, .mk-mock .mk-sc__pole, .mk-mock .mk-sc__shade, .mk-mock .mk-sc__pool,
.mk-mock .mk-sc__ghost, .mk-mock .mk-sc__mirror, .mk-mock .mk-sc__chip, .mk-mock .mk-sc__dest { display: none !important; }
.mk-mock .mk-sc--radio .mk-ad__art, .mk-mock .mk-sc--radio .mk-ad__lvl { display: none !important; }
.mk-mock__cap { color: rgb(255 255 255 / .5); }

/* Mock-ups version: sections in two columns (copy and picture), alternating, with plenty of air */
.mkb .pp { padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.mkb-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }
.mkb-hero .mk-hero__in { max-width: none; }
.mkb-hero .mk-hero__h { max-width: 12ch; }
.mkb-sec__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }

.mkb-sec .pp-h { margin-top: clamp(1.25rem, 2vw, 1.75rem); max-width: 15ch; }
.mkb-sec .pp-sub { margin-top: 1.1rem; }
.mkb-sec .mk-reach { margin-top: 1.75rem; }
.mkb-sec .mk-fig { max-width: none; }

@media (width <= 900px) {
  .mkb-sec__in { grid-template-columns: minmax(0, 1fr); }
  
}

/* The title. These selectors outrank the journey's own ".hero__in h1" (which kept it small before). */
.mk-hero .mk-hero__in .mk-hero__h, .mkb-hero .mk-hero__h {
  max-width: 11ch; margin-top: 0; font-size: clamp(3.3rem, .9rem + 7.4vw, 8.75rem); font-weight: 600;
  letter-spacing: -.06em; line-height: .9; text-wrap: balance;
}
.mk-hero__h .mk-ln--aside { display: block; margin-top: 0; font-size: 1em; font-weight: inherit; letter-spacing: inherit; color: var(--pp-acc); }
.mk-hero .mk-hero__in, .mkb-hero .mk-hero__in { max-width: 64rem; }
.mk-hero .mk-hero__sub, .mkb-hero .mk-hero__sub { max-width: 46ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); color: rgb(255 255 255 / .8); }

/* Headline figures: big, right under the call to action */
.mk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 52rem; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgb(255 255 255 / .16); }
.mk-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 1.25rem 1.5rem 0 0; }
.mk-stats > div + div { padding-left: 1.5rem; border-left: 1px solid rgb(255 255 255 / .1); }
.mk-stats dd { font-size: clamp(2.25rem, 1.3rem + 3vw, 4rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mk-stats dt { margin-top: .6rem; font-size: var(--step--1); line-height: 1.4; color: rgb(255 255 255 / .66); }
@media (width <= 560px) {
  .mk-stats > div { padding-right: .75rem; }
  .mk-stats > div + div { padding-left: .75rem; }
  .mk-stats dd { font-size: 1.9rem; }
}

/* 02 Reach: the six figures as a proper grid of hairline cells */
.mk-reach {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important;
  margin-top: 1.75rem; border-top: 1px solid rgb(255 255 255 / .16); border-left: 1px solid rgb(255 255 255 / .1);
}
.mk-reach > div { padding: 1.1rem 1.1rem 1.2rem; border-right: 1px solid rgb(255 255 255 / .1); border-bottom: 1px solid rgb(255 255 255 / .1); background: rgb(11 13 16 / .5); }
.mk-reach dd { font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.6rem) !important; font-weight: 500; letter-spacing: -.045em; }
.mk-reach dt { margin-top: .35rem; }
@media (width <= 560px) { .mk-reach { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .mk-reach > div { padding: .8rem .8rem .9rem; } }

/* 04 Tracking: six cards */
.mk-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin-top: 1.5rem; max-width: 38rem; }
.mk-track li { padding: 1rem 1.05rem 1.1rem; border: 1px solid rgb(255 255 255 / .12); border-radius: 14px; background: rgb(11 13 16 / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mk-track .mk-at__ic { display: block; width: 1.6rem; height: 1.6rem; }
.mk-track__t { margin-top: .75rem; font-size: var(--step-0); font-weight: 500; line-height: 1.25; color: #fff; }
.mk-track__d { margin-top: .25rem; font-size: var(--step--1); line-height: 1.45; color: var(--pp-text); }
.mk-track--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; margin-top: clamp(2rem, 4vw, 3rem); gap: .875rem; }
.mk-track--wide li { padding: 1.5rem; }
@media (width <= 900px) { .mk-track--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width <= 560px) { .mk-track, .mk-track--wide { grid-template-columns: minmax(0, 1fr); } .mk-track li { padding: .8rem .9rem; } }
.mkb-track__h { margin-top: clamp(1.25rem, 2vw, 1.75rem); max-width: 16ch; }
.mkb-track .pp-sub { margin-top: 1.1rem; }

/* Team: large square photos with rounded corners; Alice's credit points up at her */
.mk-team .mk-team__l { gap: 1rem; }
.mk-team .mk-tm { padding: 0; border: 0; background: none; gap: .9rem; }
.mk-team .mk-tm:is(:hover, :focus-visible) { background: none; }
.mk-team .mk-tm picture { width: 100%; max-width: 13rem; aspect-ratio: 1; border-radius: 18px; }
.mk-team .mk-tm img { border-radius: 18px; }
.mk-team .mk-tm__n { font-size: var(--step-1); font-weight: 500; letter-spacing: -.02em; }
.mk-team .mk-tm__r { font-size: var(--step--1); color: rgb(255 255 255 / .62); }
.mk-callout { position: relative; margin-top: .75rem; padding-left: 4.25rem; max-width: 26rem; font-size: var(--step-0); line-height: 1.4; }
.mk-callout a { color: #fff; text-decoration: none; }
.mk-callout a:hover { text-decoration: underline; text-underline-offset: .2em; }
.mk-callout__arrow { position: absolute; left: .5rem; top: -1.6rem; width: 3.4rem; height: auto; }

/* Form: the budget as a drop-down, the channels as tick boxes */
.mk-budget { margin-bottom: 1.5rem; }
.mk-ck__o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.mk-ck__i {
  position: relative; display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: 0 .85rem; cursor: pointer;
  border: 1px solid rgb(255 255 255 / .16); border-radius: 10px; font-size: var(--step--1); color: #fff;
  transition: border-color .2s var(--mk-ease), background-color .2s var(--mk-ease);
}
.mk-ck__i input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mk-ck__box { flex: none; width: 1.15rem; height: 1.15rem; border: 1.5px solid rgb(255 255 255 / .45); border-radius: 4px; display: grid; place-items: center; transition: background-color .15s, border-color .15s; }
.mk-ck__box::after { content: ""; width: .32rem; height: .6rem; margin-top: -.12rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .15s var(--mk-ease); }
.mk-ck__i:has(input:checked) { border-color: rgb(143 180 255 / .6); background: rgb(0 98 254 / .14); }
.mk-ck__i:has(input:checked) .mk-ck__box { background: #0062fe; border-color: #0062fe; }
.mk-ck__i:has(input:checked) .mk-ck__box::after { transform: rotate(45deg) scale(1); }
.mk-ck__i:has(input:focus-visible) { outline: 2px solid var(--pp-acc); outline-offset: 2px; }
@media (hover: hover) { .mk-ck__i:hover { border-color: rgb(255 255 255 / .34); } }
@media (width <= 560px) { .mk-ck__o { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The first screen holds the title, the line, the buttons and the three figures: on wide screens the
   buttons and the figures share one row */
.mk-hero .mk-hero__in .mk-hero__h, .mkb-hero .mk-hero__h { font-size: clamp(3.3rem, .9rem + 6.6vw, 7rem); }
.mk-greet { margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem); }
.mk-hero .mk-cta, .mkb-hero .mk-cta { margin-top: clamp(1.5rem, 2.4vw, 2rem); }

@media (width >= 1100px) {
  .mk-hero .mk-hero__in, .mkb-hero .mk-hero__in { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2.5rem, 4vw, 4rem); align-items: end; }
  .mk-hero .mk-hero__in > :not(.mk-cta):not(.mk-stats), .mkb-hero .mk-hero__in > :not(.mk-cta):not(.mk-stats) { grid-column: 1 / -1; }
  .mk-hero .mk-stats, .mkb-hero .mk-stats { margin-top: clamp(1.5rem, 2.4vw, 2rem); max-width: 40rem; }
  .mk-hero .mk-cta, .mkb-hero .mk-cta { align-self: end; padding-bottom: .4rem; }
}

/* the callout sits clear of the role line, its arrow curling up to Alice's card */
.mk-callout { margin-top: 2.25rem; padding-left: 4.5rem; }
.mk-callout__arrow { top: -1.9rem; left: .75rem; width: 3.4rem; }
.mkb-hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Round 6 (James, 21 Oct 2026): the title keeps its size but goes back to the site's light weight;
   more space between the hero and the strip of media owners */
.mk-hero .mk-hero__in .mk-hero__h, .mkb-hero .mk-hero__h { font-weight: 300; letter-spacing: -.05em; }

.mkb-seen { padding-top: clamp(5rem, 10vw, 9rem); }

/* Hero: the Complex Law logo at about the size of the Claims Gate logo in the header */
body.mkb .mk-greet__cl { height: clamp(1.25rem, 1.05rem + .35vw, 1.5rem); }
body.mkb .mk-greet__lk.is-solo { display: none; }

/* Media owners: more space above and below, and half the speed */
body.mkb .mkb-seen { padding-block: clamp(6rem, 12vw, 11rem); }
body.mkb .mk-mq__row--1 .mk-mq__l { animation-duration: 150s; }
body.mkb .mk-mq__row--2 .mk-mq__l { animation-duration: 180s; }
body.mkb .mk-mq__row--3 .mk-mq__l { animation-duration: 165s; }

/* Backdrop: three soft glows on near-black, fixed behind everything. The page's own grounds are cleared so
   it shows through; the footer keeps its solid dark. Cheap to run: each glow's ::before drifts by itself (a
   CSS animation, moved by the compositor), and its <i> glides to where backdrop.js puts it, which happens
   only when the pointer moves or the page scrolls. Nothing runs every frame from JavaScript. */
body.mkb, body.mkb .contact { background: transparent; }
:root:has(body.mkb) { background: #07090d; }
.mkb-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #07090d; }
.mkb-bg i { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform 1.8s cubic-bezier(.22, .61, .36, 1); }
.mkb-bg i::before { content: ""; position: absolute; border-radius: 50%; animation: mkb-drift 40s ease-in-out infinite alternate; }
.mkb-bg__a { transform: translate3d(30vw, 20vh, 0); }
.mkb-bg__a::before { width: 110vmax; height: 110vmax; left: -55vmax; top: -55vmax; background: radial-gradient(closest-side, rgb(0 98 254 / .15), rgb(0 98 254 / .05) 55%, rgb(0 98 254 / 0)); }
.mkb-bg__b { transform: translate3d(85vw, 75vh, 0); }
.mkb-bg__b::before { width: 120vmax; height: 120vmax; left: -60vmax; top: -60vmax; background: radial-gradient(closest-side, rgb(22 52 120 / .42), rgb(22 52 120 / 0)); animation-duration: 52s; animation-direction: alternate-reverse; }
.mkb-bg__c { transform: translate3d(50vw, 115vh, 0); }
.mkb-bg__c::before { width: 80vmax; height: 80vmax; left: -40vmax; top: -40vmax; background: radial-gradient(closest-side, rgb(143 180 255 / .07), rgb(143 180 255 / 0)); animation-duration: 64s; }
@keyframes mkb-drift { from { transform: translate3d(-5vw, -4vh, 0); } to { transform: translate3d(5vw, 4vh, 0); } }
@media (prefers-reduced-motion: reduce) {
  .mkb-bg i { transition: none; }
  .mkb-bg i::before { animation: none; }
}
/* low-memory phones and Data Saver (backdrop.js): still glows, no layers kept for movement */
.mkb-bg--still i { transition: none; }
.mkb-bg--still i::before { animation: none; }
/* a fine grain stops the faint gradients from banding (plain blending: a blend mode would be redone every frame) */
.mkb-bg::after {
  content: ""; position: absolute; inset: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- tokens ---------- */
body.mkb {
  --mk-sec: clamp(4.5rem, 8vw, 7.5rem);    /* section padding, top and bottom: 115px at 1440, 102 at 1280 */
  --mk-block: clamp(2.5rem, 4vw, 3.5rem);  /* between blocks in a section: CTA to figures, copy to band or cards */
  --mk-gap-h: 1.25rem;                      /* kicker to headline (as the contact eyebrow) */
  --mk-gap-sub: 1.5rem;                     /* headline to its description (as the contact body) */
  --mk-gap-cta: 2rem;                       /* description to button; copy to mock-up on phones */
}

/* ---------- hero: one left edge, read top to bottom: credit, title, line, button, figures ---------- */
body.mkb .mk-greet { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }   /* the credit is context: set apart from the title */
body.mkb .mk-greet__t { max-width: 64ch; min-height: 0; }                /* one line on desktop */
body.mkb .mkb-hero .mk-hero__in { display: block; max-width: none; }    
/* "advertising campaigns." is 9.23em wide, so the title sets in three lines on desktop:
   We make national / advertising campaigns. / Full stop.  Size (clamp 3.3rem-7rem) and weight 300 unchanged. */
body.mkb .mkb-hero .mk-hero__h { max-width: 9.6em; }
body.mkb .mkb-hero .mk-cta { margin-top: var(--mk-gap-cta); padding-bottom: 0; }
/* the three figures: their own row under the button, each cell as wide as its number */
body.mkb .mkb-hero .mk-stats {
  width: fit-content; max-width: 100%; margin-top: var(--mk-block);
  grid-template-columns: repeat(3, max-content);
}
body.mkb .mkb-hero .mk-stats > div { padding: 1.25rem clamp(1.5rem, 3vw, 2.75rem) 0 0; }
body.mkb .mkb-hero .mk-stats > div + div { padding-left: clamp(1.5rem, 3vw, 2.75rem); }
body.mkb .mk-stats dd { font-size: var(--step-3); font-weight: 400; letter-spacing: -.045em; }
body.mkb .mk-stats dt { margin-top: .5rem; max-width: 18ch; font-size: var(--step-0); line-height: 1.35; color: rgb(255 255 255 / .72); }
@media (width >= 1100px) {
  /* the hero fills the first screen, so the media strip always starts below the fold */
  body.mkb .mkb-hero {
    display: flex; flex-direction: column; justify-content: center;
    min-height: min(calc(100svh - var(--nav-h, 64px)), 60rem); padding-block: clamp(1.5rem, 3vw, 2.5rem);
  }
  body.mkb .mkb-hero > .wrap { width: 100%; }
}
/* short laptop windows (1280x800, 1366x768): the button and the figures stay on the first screen */
@media (width >= 1100px) and (height <= 820px) {
  body.mkb .mkb-hero { padding-block: 1rem; }
  body.mkb .mk-greet { margin-bottom: 1.5rem; }
  body.mkb .mkb-hero .mk-stats { margin-top: 2rem; }
}
@media (width <= 900px) {
  body.mkb .mkb-hero .mk-greet { max-width: none; }   
}
@media (width <= 560px) {
  body.mkb .mkb-hero .mk-stats { width: auto; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .95fr); }
  body.mkb .mkb-hero .mk-stats > div { padding-right: .75rem; }
  body.mkb .mkb-hero .mk-stats > div + div { padding-left: .75rem; }
  body.mkb .mk-stats dt { font-size: .8125rem; }
}
@media (width < 390px) {
  body.mkb .mkb-hero .mk-cta .alink { display: none; }   
}
@media (prefers-reduced-motion: no-preference) {
  html.js body.mkb .mkb-hero .mk-stats { animation: hero-in .9s var(--mk-ease) .65s both; }   
}

/* ---------- sections 01 to 04: one rhythm ---------- */
body.mkb .pp { padding-block: var(--mk-sec); }
body.mkb .pp-k + .pp-h { margin-top: var(--mk-gap-h); }
body.mkb .pp-h + .pp-sub { margin-top: var(--mk-gap-sub); }
body.mkb .mkb-sec .pp-h, body.mkb .mkb-track__h { max-width: 18ch; }   /* the product pages' measure: two-line headlines */
body.mkb .mkb-sec .mk-fig { max-width: none; }
/* the quiet button: the same type as the primary; the fill alone tells them apart */
body.mkb .mk-btn2 { margin-top: var(--mk-gap-cta); font-size: .9375rem; font-weight: 500; }

@media (width > 900px) {
  /* two equal columns on the contact section's grid line; both columns start together; copy always on the left */
  body.mkb .mkb-sec__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mk-block) var(--gap-col); align-items: start; }
  /* the picture's top edge lines up with the headline, not the kicker (kicker line + kicker gap) */
  body.mkb .mkb-sec__fig { margin-top: calc(var(--step--1) * 1.5 + var(--mk-gap-h)); }
}

/* 02 The reach: the six figures as a full-width band under the copy and the bus */
body.mkb .mkb-sec__in > .mk-reach { grid-column: 1 / -1; margin-top: 0; }
@media (width >= 1280px) {
  body.mkb .mkb-sec__in > .mk-reach { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
body.mkb .mk-reach dd { font-size: var(--step-2) !important; font-weight: 400; }
body.mkb .mk-reach dt {
  margin-top: .5rem; font-family: inherit; font-size: var(--step-0); letter-spacing: 0; line-height: 1.35;
  color: rgb(255 255 255 / .72); text-wrap: balance;
}

/* The response: one label (the kicker), the figure on the contact title's size, one step under the H1 */
body.mkb .mk-fig__n { min-width: 0 !important; margin-top: 0; font-size: clamp(3rem, 1.5rem + 3.6vw, 4.75rem); line-height: .95; }
body.mkb .mk-fig__l { margin-top: .5rem; }

/* Tracking: card text on the body scale, not footnote size */
body.mkb .mk-track--wide { margin-top: var(--mk-block); }
body.mkb .mk-track__t { margin-top: 1rem; font-size: var(--step-1); font-weight: 400; line-height: 1.25; letter-spacing: -.015em; }
body.mkb .mk-track__d { margin-top: .375rem; font-size: var(--step-0); line-height: 1.5; }

/* mock-up captions describe a picture: sentence case, not the kickers' mono capitals */
body.mkb .mk-mock__cap { font-family: inherit; font-size: var(--step--1); letter-spacing: 0; text-transform: none; color: rgb(255 255 255 / .6); }

/* ---------- contact (#talk) ---------- */
body.mkb .mk-talk .contact__body { font-size: var(--step-1); line-height: 1.55; }   /* the same lead as every section */
body.mkb .mk-talk .mk-team { margin-top: var(--mk-block); }
body.mkb .mk-talk .mk-team .mk-talk__k { margin-top: 0; }
body.mkb .mk-team .mk-tm__n { font-size: var(--step-1); font-weight: 400; letter-spacing: -.015em; }
body.mkb .mk-team .mk-tm__r { color: rgb(255 255 255 / .66); }
body.mkb .mk-callout a { text-decoration: underline 1px rgb(255 255 255 / .35); text-underline-offset: .25em; }   /* a link needs a cue without hover */
body.mkb .mk-callout a:hover { text-decoration-color: currentColor; }
/* the form's own heading (an h3), one step under the section title */
body.mkb .mk-form__h { margin-bottom: 1.5rem; font-size: var(--step-2); font-weight: 300; line-height: 1.15; letter-spacing: -.03em; }
/* channel tick boxes: drop the radio-chip pill and dot they pick up from .mk-q label */
body.mkb .mk-ck .mk-ck__i { gap: .65rem; min-height: 48px; padding: .5rem .85rem; border-radius: 10px; font-size: .9375rem; line-height: 1.25; }
body.mkb .mk-ck .mk-ck__i::before { content: none; }
body.mkb .contact__consent p { font-size: var(--step--1); font-weight: 400; line-height: 1.5; color: rgb(255 255 255 / .66); }

/* one column (under 1000px): heading, the team and Alice's line, then the form, then what happens next */
@media (width < 1000px) {
  body.mkb .mk-talk .contact__in { display: flex; flex-direction: column; gap: 0; }
  body.mkb .mk-talk .contact__copy { display: contents; }
  body.mkb .mk-talk .contact__copy > * { order: 1; }
  body.mkb .mk-talk .contact__copy > .mk-team { order: 2; margin-top: 2rem; }
  body.mkb .mk-talk .contact__form { order: 3; margin-top: 2rem; }
  body.mkb .mk-talk .contact__copy > .mk-next3 { order: 4; margin-top: 2.5rem; }
}

/* ---------- phones and small tablets ---------- */
@media (width <= 900px) {
  /* copy, then the picture that proves it, then the figures, then the button */
  body.mkb .mkb-sec__in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  body.mkb .mkb-sec__copy { display: contents; }
  body.mkb .mkb-sec__copy > * { order: 1; }
  body.mkb .mkb-sec__fig { order: 2; margin-top: var(--mk-gap-cta); }
  body.mkb .mkb-sec__in > .mk-reach { order: 3; margin-top: var(--mk-gap-cta); }
  body.mkb .mkb-sec__copy > .mk-btn2 { order: 4; align-self: flex-start; }
}
@media (width < 768px) {
  body.mkb { --mk-sec: 3.5rem; }
  /* mock-ups edge to edge, the scene cropped to 130% so the advert lines are readable (Tube 13px, TV 17px) */
  body.mkb .mk-mock { margin-inline: calc(var(--gut) * -1); overflow: clip; }
  body.mkb .mk-mock__face { width: 130%; margin-left: -15%; border-radius: 0; }
  body.mkb .mk-mock__cap { padding-inline: var(--gut); }
  /* a compact team, so the form's heading is on screen after a "Speak to the team" jump */
  body.mkb .mk-talk .mk-team .mk-team__l { gap: .75rem; }
  body.mkb .mk-talk .mk-team .mk-tm { gap: .6rem; }
  body.mkb .mk-talk .mk-team .mk-tm picture { max-width: 5rem; border-radius: 14px; }
  body.mkb .mk-talk .mk-team .mk-tm img { border-radius: 14px; }
  body.mkb .mk-talk .mk-team .mk-tm__n { font-size: .9375rem; }
  body.mkb .mk-talk .mk-team .mk-tm__go { display: none; }
  body.mkb .mk-talk .mk-team .mk-tm__r { font-size: .8125rem; line-height: 1.35; }
  body.mkb .mk-talk .mk-callout { margin-top: 1.75rem; }
}
@media (width <= 560px) {
  body.mkb .mk-reach dt { font-size: .8125rem; }
  /* tracking: list rows, icon on the left */
  body.mkb .mk-track--wide { gap: .5rem; }
  body.mkb .mk-track--wide li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: .875rem; align-items: start; padding: .875rem 1rem; }
  body.mkb .mk-track--wide .mk-at__ic { grid-row: 1 / 3; width: 1.75rem; height: 1.75rem; margin-top: .1rem; }
  body.mkb .mk-track--wide .mk-track__t { margin-top: 0; font-size: 1rem; }
  body.mkb .mk-track--wide .mk-track__d { margin-top: .2rem; font-size: .875rem; line-height: 1.4; }
}

/* 01 The advert and 02 The reach: the Underground and bus photos, cross-fading */
body.mkb .mk-real { margin: 0; }
body.mkb .mk-real__stage {
  position: relative; aspect-ratio: 1600 / 893; overflow: hidden; border-radius: 16px; background: #0f141c;
  box-shadow: 0 30px 80px -30px rgb(0 98 254 / .4), 0 0 0 1px rgb(255 255 255 / .08);
}
body.mkb .mk-real__img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s var(--mk-ease, cubic-bezier(.22, .61, .36, 1));
}
body.mkb .mk-real__img.is-on { opacity: 1; }
/* the caption keeps one shape whatever the format: where it is, then the format on its own line */
body.mkb .mk-real__cap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body.mkb .mk-real__fmt { display: block; color: rgb(255 255 255 / .45); }
body.mkb .mk-real__ctl { display: flex; flex: none; align-items: center; margin-right: -6px; }
body.mkb .mk-real__dots { display: flex; }
body.mkb .mk-real__dot, body.mkb .mk-real__pause {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
}
body.mkb .mk-real__dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .3);
  transition: width .3s var(--mk-ease, ease), background-color .3s;
}
body.mkb .mk-real__dot:hover::before { background: rgb(255 255 255 / .6); }
body.mkb .mk-real__dot.is-on::before { width: 18px; background: var(--pp-acc); }
/* pause: two bars; once paused: a triangle */
body.mkb .mk-real__pause::before {
  content: ""; width: 8px; height: 9px; background: rgb(255 255 255 / .6);
  clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%, 0 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 0);
}
body.mkb .mk-real.is-paused .mk-real__pause::before { width: 8px; height: 10px; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
body.mkb .mk-real__pause:hover::before { background: #fff; }

/* 03 The response: the TV advert on a plain screen with a stand */
body.mkb .mk-tv { margin: 0; --bz: clamp(5px, .55vw, 8px); }
body.mkb .mk-tv__set { position: relative; padding: var(--bz) var(--bz) clamp(1.1rem, 2.2vw, 1.75rem); }
body.mkb .mk-tv__screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #000;
  box-shadow: 0 0 0 var(--bz) #0b0f16, 0 0 0 calc(var(--bz) + 1px) rgb(255 255 255 / .12), 0 40px 90px -30px rgb(0 98 254 / .45);
}
body.mkb .mk-tv__v { display: block; width: 100%; height: 100%; object-fit: cover; }
body.mkb .mk-tv__stand {
  position: absolute; left: 50%; bottom: 0; width: 26%; height: clamp(1.1rem, 2.2vw, 1.75rem); transform: translateX(-50%);
  background: linear-gradient(#161c27, #0b0f16); clip-path: polygon(42% 0, 58% 0, 62% 62%, 100% 78%, 100% 100%, 0 100%, 0 78%, 38% 62%);
}
/* top left: the advert's legal line runs along the bottom */
body.mkb .mk-tv__btn {
  position: absolute; left: .75rem; top: .75rem; display: inline-flex; align-items: center; gap: .55rem; min-height: 40px;
  padding: .45rem .95rem .45rem .6rem; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px;
  background: rgb(11 13 16 / .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.2; color: #fff; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
body.mkb .mk-tv__btn:hover { border-color: rgb(143 180 255 / .6); background: rgb(0 98 254 / .35); }

body.mkb .mk-tv__ic, body.mkb .mk-play__ic { position: relative; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--blue, #0062fe); }
/* the icon shows where things stand, the label what pressing does: a triangle before it plays; while it plays,
   a struck speaker when muted and a speaker with a wave when the sound is on; two bars where pressing pauses it */
body.mkb .mk-tv__ic::before, body.mkb .mk-play__ic::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: .5rem; height: .6rem; background: #fff;
  clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}
body.mkb .mk-tv.is-playing .mk-tv__ic::before { width: .6rem; height: .6rem; clip-path: polygon(0 32%, 32% 32%, 72% 0, 72% 100%, 32% 68%, 0 68%); }
body.mkb .mk-tv.is-auto.is-playing:not(.has-sound) .mk-tv__ic::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 2px; height: .85rem; border-radius: 1px; background: #fff; transform: rotate(-45deg);
}
body.mkb .mk-tv.is-auto.has-sound .mk-tv__ic::before { transform: translateX(-.14rem); }
body.mkb .mk-tv.is-auto.has-sound .mk-tv__ic::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: .55rem; height: .55rem; margin: -.275rem 0 0 -.3rem;
  border: 1.5px solid; border-color: transparent #fff transparent transparent; border-radius: 50%;
}
body.mkb .mk-tv:not(.is-auto).has-sound .mk-tv__ic::before, body.mkb .mk-play.is-on .mk-play__ic::before {
  width: .5rem; height: .55rem; clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%, 0 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 0);
}

/* 04 Tracking: the radio plays our two radio adverts; the display shows the one playing */
body.mkb .mk-radio__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
body.mkb .mk-radio__l { display: flex; flex-wrap: wrap; gap: .5rem; }
body.mkb .mk-play {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 40px; padding: .4rem .95rem .4rem .5rem;
  border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; background: rgb(255 255 255 / .04);
  font-family: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.2; color: #fff; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
body.mkb .mk-play:hover, body.mkb .mk-play.is-on { border-color: rgb(143 180 255 / .6); background: rgb(0 98 254 / .14); }

body.mkb .mk-play__t { color: rgb(255 255 255 / .5); font-variant-numeric: tabular-nums; }
/* the display: "Ad · 0:40" with its level, then the title under it; the level holds its space, so
   nothing moves when it lights up */
body.mkb .mk-mock--radio .mk-sc--radio .mk-ad { flex-direction: column; align-items: flex-start; justify-content: center; gap: .6cqi; }
body.mkb .mk-mock--radio .mk-sc--radio .mk-ad__meta { gap: 1.4cqi; font-size: 1.3cqi; white-space: nowrap; }
body.mkb .mk-mock--radio .mk-sc--radio .mk-ad__lvl { display: flex !important; visibility: hidden; }
body.mkb .mk-mock--radio.is-playing .mk-sc--radio .mk-ad__lvl { visibility: visible; }
/* the head unit bounces to the beat only while an advert plays */
body.mkb .mk-mock--radio:not(.is-playing) .mk-sc--radio .mk-sc__unit { animation: none; }

/* phones: the photos and the TV edge to edge, like the other pictures */
@media (width < 768px) {
  body.mkb .mk-real, body.mkb .mk-tv { margin-inline: calc(var(--gut) * -1); }
  /* a closer crop, so the adverts read: every one stays whole (the angled escalator is set right) */
  body.mkb .mk-real__stage { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
  body.mkb .mk-real__img--r { object-position: 85% 50%; }
  /* the controls sit under the photo, so the caption has the full width */
  body.mkb .mk-real__cap { flex-direction: column-reverse; align-items: flex-start; gap: .25rem; padding-inline: var(--gut); }
  body.mkb .mk-real__ctl { margin: 0 0 0 -8px; }
  body.mkb .mk-tv .mk-mock__cap { padding-inline: var(--gut); }
  body.mkb .mk-tv__set { padding: 0; }
  body.mkb .mk-tv__screen { border-radius: 0; box-shadow: none; }
  body.mkb .mk-tv__stand { display: none; }
  body.mkb .mk-tv__btn { left: var(--gut); }
  body.mkb .mk-play, body.mkb .mk-tv__btn { min-height: 44px; }
  body.mkb .mk-radio__l { display: grid; width: 100%; }
  body.mkb .mk-play { width: 100%; }
  body.mkb .mk-play__t { margin-left: auto; }
}