/* ============================================================
   Marketing Link - static service page
   One CSS file. No framework.

   Every selector is prefixed .mlk- so it never collides with header/footer CSS.
   .ml- was unusable: the theme's bootstrap already owns it (.ml-0 ... .ml-auto)
   and the source page already has .ml-client-name and friends.

   EVERY VALUE COMES FROM THE SOURCE PAGE'S REAL CSS
   (perfmatters/page-592.used.css + style inline), tra theo data-id
   of each Elementor element. Nothing here is eyeballed.

   The source page's real breakpoints:
     ≤767px mobile · 768–1024px tablet · ≥1025px desktop
   ------------------------------------------------------------
    1. Token            9. Benefits      17. Reports
    2. Reset           10. Audit CTA     18. Team
    3. Typography      11. Cases         19. Knowledge
    4. Layout          12. Why us        20. Revenue
    5. Buttons         13. Awards        21. FAQ
    6. Marquee         14. Client says   22. About
    7. Swiper          15. Video         23. Slider
    8. Hero            16. Services      24. Responsive
   ============================================================ */


/* 1. Token ------------------------------------------------- */

.mlk {
    --mlk-red:        #CC2F2A;
    /* The same red, darkened just enough to read on the pale tint: #CC2F2A on
       #F9E5E4 is 4.33:1, below the 4.5:1 minimum. Used for TEXT only. */
    --mlk-red-text:   #A82822;
    --mlk-red-tint:   #F9E5E4;
    --mlk-red-tint-2: #FFD8D7;
    --mlk-navy:       #16252E;
    --mlk-ink:        #202226;
    --mlk-text:       #555555;
    --mlk-muted:      #686869;
    --mlk-grey:       #FAFAFA;
    --mlk-grey-2:     #D9D9D9;
    --mlk-line:       rgba(26, 49, 76, .0784);
    --mlk-hairline:   #F0F1F4;
    --mlk-white:      #FFFFFF;

    --mlk-font: "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* The source page uses three different container widths, not one. */
    --mlk-w-head:    562px;   /* title + lead block */
    --mlk-w-wide:   1200px;   /* two-column content rows */
    --mlk-w-normal: 1140px;   /* hero, revenue */

    --mlk-radius:      15px;
    --mlk-radius-card: 20px;
    --mlk-radius-pill: 30px;
}


/* 2. Reset & background ------------------------------------ */
/* Scoped to <main>: body carries .mlk, so .mlk * would leak into the header. */

.mlk-main,
.mlk-main *,
.mlk-main *::before,
.mlk-main *::after { box-sizing: border-box; }

.mlk-main {
    margin: 0;
    font-family: var(--mlk-font);
    /* The source body is 16px; 18px belongs only to the text-editor widget.
       Setting 18px here would inflate every inherited size and break heights. */
    font-size: 16px;
    font-weight: 400;
    /* Source: body { line-height: 1.5 } - UNITLESS, so it scales with each
       element's font-size. Using em here would freeze it into a fixed length
       and inherit wrongly into every smaller text block. */
    line-height: 1.5;
    /* The source's inherited colour is #20292F; #555555 is only the colour each
       text-editor widget declares for itself. */
    color: #20292F;
    background: var(--mlk-white);
    -webkit-font-smoothing: antialiased;
}

/* <picture> is inline: left alone, every WebP image would carry a ~5px
   baseline gap underneath, adding up across the page. */
:where(.mlk-main img, .mlk-main video, .mlk-main picture) { max-width: 100%; height: auto; display: block; }
:where(.mlk-main ul, .mlk-main ol, .mlk-main dl, .mlk-main dd) { margin: 0; padding: 0; list-style: none; }
/* The theme sets `p { margin-bottom: 1rem }` at specificity (0,0,1). A reset
   inside :where() is (0,0,0) and LOSES - every <p> keeps 16px. Writing
   `:where(.mlk-main) p` reaches (0,0,1), wins by load order, and components still win. */
:where(.mlk-main) p { margin: 0; }
/* Colour stays inside :where() (specificity 0) so components decide it, but
   text-decoration needs (0,0,1) to beat the theme's `a{underline}`. */
:where(.mlk-main a) { color: inherit; }
:where(.mlk-main) a { text-decoration: none; }

/* :where() brings this to (0,1,0). As `.mlk-main a:hover` it would be (0,2,1)
   and beat every `.mlk-btn--*:hover` (0,2,0), turning EVERY button red. */
:where(.mlk-main a):hover { color: var(--mlk-red); }

.mlk-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* 3. Typography -------------------------------------------- */
/* :where() drops specificity to 0. Without it `.mlk-main h2` (1 class +
   1 tag) would beat `.mlk-section__title` (1 class) and override sections. */

:where(.mlk-main h1, .mlk-main h2, .mlk-main h3, .mlk-main h4) {
    margin: 0;
    font-family: var(--mlk-font);
    font-weight: 800;
    line-height: 1.3em;
    color: var(--mlk-navy);
}

/* Title + lead are shared by nine sections with identical values. */
.mlk-section__head {
    max-width: var(--mlk-w-head);
    margin: 0 auto;
    /* Elementor: a column inside a container has 10px padding on all sides. */
    padding: 10px;
}

.mlk-section__title {
    /* The source's gap between the title widget and the lead. */
    margin-bottom: 20px;
    /* In a section with no lead the title widget carries no such gap. */
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3em;
    color: var(--mlk-navy);
    text-align: center;
}

.mlk-section__title:last-child { margin-bottom: 0; }

.mlk-section__lead {
    /* 5px from the widget plus the inner <p>'s 16px margin. */
    padding-bottom: 21px;
    font-size: 18px;
    font-weight: 500;
    color: var(--mlk-text);
    text-align: center;
}

/* Some sections write the lead as running text with no <p>, so no 16px. */
.mlk-section__lead--flow { padding-bottom: 5px; }


/* 4. Layout ------------------------------------------------ */

.mlk-container {
    width: 100%;
    max-width: var(--mlk-w-normal);
    margin: 0 auto;
    /* .elementor-container has NO horizontal padding; the 10px sits on each
       .elementor-element-populated inside. Putting 20px here narrows every
       child column and skews widths in almost every section. */
    padding-inline: 0;
}

.mlk-container--wide { max-width: var(--mlk-w-wide); }

/* The source does NOT alternate stripes - each section owns its background. */
.mlk-section { padding: 60px 0 0; }

/* On the source page this section only has 10px of top padding. */
.mlk-revenue { padding-top: 10px; }


.mlk-section--white { background: var(--mlk-white); }
.mlk-section--grey  { background: var(--mlk-grey); }


/* 5. Buttons ----------------------------------------------- */

.mlk-btn {
    display: inline-block;
    padding: 15px 50px;
    border: 0;
    border-radius: var(--mlk-radius);
    font-family: var(--mlk-font);
    font-size: 16px;
    font-weight: 700;
    /* .elementor-button sets a fixed 22px line-height. */
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    transition: color .02s ease, background-color .2s ease;
}

/* Primary button: pale pink background, red text - not red on white. */
.mlk-btn--primary {
    background: var(--mlk-red-tint);
    color: var(--mlk-red-text);
}
.mlk-btn--primary:hover {
    background: var(--mlk-red-tint-2);
    color: var(--mlk-red-text);
}

/* Button on the dark background (audit CTA). */
.mlk-btn--light {
    background: var(--mlk-white);
    font-size: 18px;
    font-weight: 600;
    color: var(--mlk-ink);
}
.mlk-btn--light:hover {
    background: var(--mlk-grey-2);
    color: var(--mlk-ink);
}

/* A button with no explicit size or padding falls back to Elementor's size-sm:
   font-size 15px, padding .7em 1.764em. */
.mlk-btn--ghost {
    padding: .7em 1.764em;
    background: var(--mlk-white);
    font-size: 15px;
    font-weight: 700;
    color: var(--mlk-red);
}
.mlk-btn--ghost:hover { color: var(--mlk-text); }


/* 6. Marquee ----------------------------------------------- */
/* The source's .scroll-seamless: a 15s linear animation moving
   translateX(0 -> -100%) with exactly two copies of the image. */

.mlk-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

/* Living inside the awards grid, it takes a full row and needs no side padding. */
.mlk-marquee--partner { width: 100%; padding: 50px 0 20px; }

.mlk-marquee__track {
    /* Source: the track is as wide as the frame and the two copies never shrink
       (flex-shrink 0), so moving -100% of the track equals exactly one copy. */
    display: flex;
    animation: mlk-marquee 15s linear infinite;
}

/* ml_img may wrap the image in <picture>, which then becomes the flex item,
   so shrinking must be blocked on it too, not only on <img>. */
.mlk-marquee__track > * {
    flex-shrink: 0;
    max-width: 100%;
}

.mlk-marquee__item {
    width: 100%;
    height: auto;
    max-width: 100%;
}

@keyframes mlk-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .mlk-marquee__track { animation: none; }
}


/* 7. Swiper ------------------------------------------------ */
/* Slide widths are pre-set with Swiper's EXACT formula:
   (container - spaceBetween * (perView - 1)) / perView.
   Get it wrong and Swiper overwrites the width on init, causing layout shift.

     cases  20px — 1.2 / 1.2 / 1.2   (loop)
     says   30px — 1   / 2   / 3
     team   30px — 1   / 2   / 4     (loop, autoplay 3s)
     videos 20px — 1.8 / 1.8 / 2.2   (autoplay 5s)
     slider 20px - 1.5 / 2.5 / 3.5   (loop, continuous)
   The 767 / 1024 breakpoints are Swiper's, not Elementor's. */

.mlk-swiper {
    position: relative;
    overflow: hidden;
    padding-bottom: 44px;
}

.mlk-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    transition-property: transform;
    box-sizing: content-box;
}

.mlk-swiper .swiper-slide {
    flex-shrink: 0;
    height: auto;
}

.mlk-swiper--cases  .swiper-slide { width: calc((100% - 4px) / 1.2);  margin-right: 20px; }
.mlk-swiper--says   .swiper-slide { width: 100%;                      margin-right: 30px; }
.mlk-swiper--team   .swiper-slide { width: 100%;                      margin-right: 30px; }
.mlk-swiper--videos .swiper-slide { width: calc((100% - 16px) / 1.8); margin-right: 20px; }
.mlk-swiper--slider .swiper-slide { width: calc((100% - 10px) / 1.5); margin-right: 20px; }

/* Block + centred like stock Swiper: the dots need their natural width;
   as a flex container they get squeezed to 0px and disappear. */
.mlk-swiper__pagination {
    position: absolute;
    left: 0; right: 0; bottom: 8px;
    display: block;
    height: 24px;
    text-align: center;
    white-space: nowrap;
}

.mlk-swiper__pagination .swiper-pagination-bullet {
    display: inline-block;
    flex: none;
    width: 8px; height: 8px;
    margin: 0 6px;
    border: 0;
    border-radius: 50%;
    background: #000;
    opacity: .2;
    cursor: pointer;
}

.mlk-swiper__pagination .swiper-pagination-bullet-active { opacity: 1; }

/* The source shrinks the dots after the active one with plain CSS. */
.mlk-swiper__pagination .swiper-pagination-bullet { transform: scale(.33); }
.mlk-swiper__pagination .swiper-pagination-bullet-active { transform: scale(1); }
.mlk-swiper__pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet { transform: scale(.66); }
.mlk-swiper__pagination .swiper-pagination-bullet-active + .swiper-pagination-bullet + .swiper-pagination-bullet { transform: scale(.33); }

/* Reserves space before the images and Swiper arrive. */
.mlk-swiper--cases  { min-height: 430px; }
.mlk-swiper--says   { min-height: 300px; padding-bottom: 60px; }

/* The testimonial dots sit at the bottom of that 60px gutter. */
.mlk-swiper--says .mlk-swiper__pagination { bottom: 0; height: 24px; }
.mlk-swiper--team   { min-height: 380px; }

/* The source does not equalise member slides: a slide whose role wraps to two
   lines is taller, the rest keep their content height. */
.mlk-swiper--team .swiper-wrapper,
.mlk-swiper--says .swiper-wrapper,
.mlk-swiper--videos .swiper-wrapper,
.mlk-swiper--cases .swiper-wrapper { align-items: flex-start; }
/* Source: the video dots overlay the carousel and take no height. */
.mlk-swiper--videos { min-height: 330px; padding-bottom: 0; }
.mlk-swiper--slider { min-height: 260px; }


/* 8. Hero -------------------------------------------------- */
/* Elementor 50b2b89: text column 37.619% | image column 61.87%;
   the stats row is pulled up -450px to overlap the image. */

.mlk-hero {
    position: relative;
    padding: 60px 0;
    background-color: var(--mlk-grey);
    background-image: url("/wp-content/uploads/groupwer323.png");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 1300px auto;
}

.mlk-hero__overlay {
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/groueded4.png");
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 1300px auto;
    pointer-events: none;
}

.mlk-hero__inner { position: relative; }

.mlk-hero__row { display: flex; align-items: center; }

.mlk-hero__body {
    position: relative;
    z-index: 10;
    width: 37.619%;
    /* .elementor-element-populated defaults to 10px padding on all sides. */
    padding: 10px;
}

/* --kit-widget-spacing: 20px - a margin-BOTTOM on every widget. */
.mlk-hero__body > * { margin-bottom: 20px; }

/* The source button widget: 10px above, nothing below. */
.mlk-hero__body > .mlk-btn {
    margin-top: 10px;
    margin-bottom: 0;
}

.mlk-hero__media {
    width: 61.87%;
    /* Source: a 10px margin-left inside the column plus padding 10/60/10/40.
       Adding the margin to the width would exceed 1140px and squash the image. */
    padding: 10px 60px 10px 50px;
    z-index: 0;
}

.mlk-hero__image { width: 100%; height: auto; }

.mlk-hero__eyebrow {
    /* A text-editor widget counts the inner <p>'s 1rem margin in its height. */
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7em;
    color: var(--mlk-text);
}

.mlk-hero__title {
    font-size: 50px;
    font-weight: 800;
    line-height: 1.3em;
    letter-spacing: .5px;
    color: var(--mlk-navy);
}

/* The source paints the second half GREY #6B6B6B, not the brand colour. */
.mlk-hero__accent { color: #6B6B6B; }

.mlk-hero__lead {
    /* A text-editor widget counts the inner <p>'s 1rem margin in its height. */
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7em;
    color: var(--mlk-text);
}

/* The source has two heroes: the mobile one (hidden-desktop) shows at <=1024,
   the desktop one (hidden-tablet hidden-mobile) at >=1025. Different leads. */
.mlk-hero__lead--wide   { display: none; }
.mlk-hero__lead--narrow { display: block; }

/* Logo strip: the mobile copy sits in the text column, the desktop one below the cards. */
.mlk-marquee--mobile { display: block; margin-bottom: 20px; }

/* The mobile stats block is only used on small screens. */
.mlk-hero__stats--mobile { display: none; }

@media (min-width: 1025px) {
    .mlk-hero__lead--wide   { display: block; }
    .mlk-hero__lead--narrow  { display: none; }
    .mlk-marquee--mobile     { display: none; }
    .mlk-hero__stats--mobile { display: none !important; }
}

.mlk-btn--hero { margin-top: 10px; }

.mlk-hero__stats {
    position: relative;
    z-index: 5;
    width: 37.286%;
    margin-top: -450px;
    /* The source's two columns are 62.632% + 37.286% - they do not fill 100%. */
    margin-left: 62.632%;
    /* The source's 10px margin-left plus 10px padding, merged into the left side.
       The 27.5px below: the source's outer section is exactly that much taller
       than its container (measured 382.50 vs 359.11) because whitespace text
       nodes in the Elementor markup add one more line box. */
    padding: 10px 10px 37.5px 20px;
}

.mlk-hero__card {
    border-radius: var(--mlk-radius);
    background: var(--mlk-white);
    box-shadow: 0 10px 40px 0 var(--mlk-line);
    text-align: center;
    transition: background .3s;
}

.mlk-hero__card:hover { background: #F0F0F0; }

/* The source gives the two cards different padding: card 1 in %, card 2 in px. */
.mlk-hero__card--right { margin-left: 50%; padding: 5%; }
.mlk-hero__card--left  { margin-right: 50%; padding: 20px; }

.mlk-hero__card-icon {
    width: 60px;
    height: auto;
    margin: 0 auto 20px;
}

.mlk-hero__card-value {
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    /* The value is an inline <span> at 20px/20px, but the widget's line box is
       set by the strut: 16px x 1.5 = 24px. */
    line-height: 24px;
    color: var(--mlk-navy);
}

.mlk-hero__card-label {
    /* A text-editor widget counts the inner <p>'s 1rem margin in its height. */
    padding-bottom: 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--mlk-muted);
}


/* 9. Benefits ---------------------------------------------- */
/* Not four separate cards - ONE white 20px-radius card holding four columns. */

.mlk-benefits { background: var(--mlk-white); }
.mlk-benefits__body { padding: 60px 0; }

.mlk-benefits__card {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    border-radius: var(--mlk-radius-card);
    background: var(--mlk-white);
    box-shadow: 0 20px 80px 0 rgba(0, 0, 0, .06);
}

.mlk-benefits__item {
    width: 25%;
    padding: 20px;
    color: var(--mlk-text);
}

.mlk-benefits__title {
    /* A text-editor widget counts the inner <p>'s 1rem margin in its height. */
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mlk-ink);
    text-align: center;
}

.mlk-benefits__title--flow { padding-bottom: 0; }

.mlk-benefits__text {
    padding: 0 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7em;
    color: var(--mlk-text);
    text-align: center;
}

/* Cells whose text the source wraps in <p> gain that tag's 16px margin. */
.mlk-benefits__text--wrapped { padding-bottom: 16px; }


/* 10. Audit CTA -------------------------------------------- */
/* A DARK #202226 card with a 60px radius, not a pink one. */

.mlk-audit { padding: 60px 0 40px; }

/* Elementor 373dd2d: the dark section spans the WHOLE column (1200) while
   content_width 762 only caps the content inside. Putting max-width on the
   dark card itself is wrong - it would shrink to 762. */
.mlk-audit__card {
    padding: 80px 0;
    border-radius: 60px;
    background-color: var(--mlk-ink);
    background-image: url("/wp-content/uploads/groupwer323.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.mlk-audit__inner {
    max-width: 762px;
    margin: 0 auto;
}

.mlk-audit__title {
    /* The source's text-editor widget holds a <p> with its default 16px margin,
       and that margin counts INSIDE the widget height. */
    padding-bottom: 16px;
    margin-bottom: 15px;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--mlk-white);
}

.mlk-audit__text {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.8em;
    color: var(--mlk-white);
}


/* 11. Cases ------------------------------------------------ */
/* Source: plugin leadstio-elements/case-studies-carousel/assets/css/index.css
   The card is a ROW: text block on the left, a 768px image on the right. */

.mlk-cases { background: var(--mlk-white); }
/* The cases title column uses padding 3px 0 0 0, not 10px on both sides. */
.mlk-cases .mlk-section__head { padding: 3px 0 0; }
/* 10px from the Elementor column above; below it is 10px plus the section's 60px. */
.mlk-cases__body { padding: 10px 0 70px; }
/* Container 1140 plus the column's 10px padding gives a 1120px carousel. */
.mlk-cases__body .mlk-container { padding-inline: 10px; }
.mlk-cases .mlk-swiper { padding-bottom: 0; margin-bottom: 50px; }
/* The cases dots sit below the carousel, 21px under its bottom edge. */
/* Swiper's CSS loads LATER, so its class must be added here to win. */
.mlk-cases .mlk-swiper__pagination,
.mlk-cases .mlk-swiper__pagination.swiper-pagination-bullets {
    position: static;
    width: 100%;
    height: 24px;
    margin-top: 21px;
    transform: none;
    text-align: center;
}

/* With the dots moved out, the swiper no longer needs its 44px gutter. */
.mlk-swiper--cases { padding-bottom: 0; margin-bottom: 0; }
.mlk-cases .mlk-swiper__pagination { margin-bottom: 5px; }

/* Swiper loads its CSS at runtime, so it comes AFTER service.css and its
   `.swiper-slide{display:block}` ties and wins. Adding .swiper-slide beats it. */
.mlk-case.swiper-slide,
.mlk-case {
    display: flex;
    color: #20292F;
    flex-wrap: nowrap;
    justify-content: left;
    align-items: normal;
    border-radius: var(--mlk-radius-pill);
    background: var(--mlk-grey);
}

.mlk-case__body { flex: 1 1 auto; min-width: 0; }

.mlk-case__title {
    margin: 0;
    padding: 40px 40px 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.011em;
    color: var(--mlk-ink);
    text-align: left;
}

.mlk-case__subtitle {
    margin: 0;
    padding: 20px 40px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.011em;
    color: var(--mlk-text);
    text-align: left;
}

.mlk-case__metrics {
    /* The source stacks them: figure, rule, then label. */
    display: block;
    padding: 40px 40px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.011em;
    color: var(--mlk-text);
    text-align: left;
}

/* The source adds no extra gap between the two metrics. */
/* Every <p> in a text-editor widget keeps its own 1rem margin. */
.mlk-case__metric-value,
.mlk-case__metric-label { margin-bottom: 16px; }

.mlk-case__metric-value strong { font-weight: 700; }
.mlk-case__metric-label { font-weight: 500; }

.mlk-case__link {
    display: block;
    background: rgba(255, 255, 255, 0);
    margin: 10px 40px;
    padding: 0 0 50px;
    font-size: 16px;
    font-weight: 700;
    color: var(--mlk-red);
}

.mlk-case__link:hover { text-decoration: underline; color: var(--mlk-red); }

.mlk-case__media {
    /* The source leaves flex: 0 1 auto - the 768px image SHRINKS to fit and is
       clipped by overflow:hidden. Using 0 0 auto would crush the text column. */
    flex: 0 1 auto;
    overflow: hidden;
    border-radius: var(--mlk-radius-pill);
}

.mlk-case__media img,
.mlk-case__media picture {
    /* The source keeps the image inline, so its box is taller by the descender gap. */
    display: inline;
    width: 768px;
    /* Height follows the image ratio: each slide is as tall as its own image. */
    height: auto;
    object-fit: cover;
    object-position: center;
    transition: all 300ms;
}


/* 12. Why us ----------------------------------------------- */

.mlk-why { background: var(--mlk-grey); }
/* Above: 10px column + 20px inner section. Below: 10px column + 30px section. */
.mlk-why__body { padding: 30px 0 40px; }

/* Measured: text column 541px, image column 619px -> a 1180px grid
   (container 1200, outer column inset 10px because the section sets gap=custom). */
.mlk-why__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-inline: 10px;
}

.mlk-why__list  { width: 47.542%; padding: 10px; }
.mlk-why__media { width: 52.458%; padding: 10px; }
/* The image is inset 40px on the left; subtract that from max-width or it overflows. */
.mlk-why__media img { margin-left: 40px; max-width: calc(100% - 40px); }

/* The step number is a grey PILL, not small red text. */
.mlk-why__number {
    /* Measured on the source: WHITE text on grey, not dark text. The source grey
       (#D9D9D9) puts that at 1.41:1 - the numbers are all but invisible. Same
       design, darker pill: 4.54:1. */
    display: block;
    width: fit-content;
    margin-bottom: 20px;
    padding: 7px 20px;
    border-radius: var(--mlk-radius-pill);
    background: #767676;
    font-size: 16px;
    font-weight: 500;
    color: var(--mlk-white);
    text-align: center;
}

.mlk-why__title {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3em;
    color: var(--mlk-navy);
    text-align: start;
}

.mlk-why__text {
    /* A text-editor widget counts the inner <p>'s 1rem margin in its height. */
    padding-bottom: 16px;
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7em;
    color: var(--mlk-text);
    text-align: start;
}

.mlk-why .mlk-btn { margin-top: 10px; }


/* 13. Awards ----------------------------------------------- */
/* Elementor 2f15899: TWO ROWS OF FOUR COLUMNS.
   row 1: [title] [badge] [badge] [badge]
   row 2: [lead]  [badge] [badge] [badge] */

.mlk-awards { padding: 40px 0 110px; }


/* The 1140 frame inset 10px per side (Elementor column padding) gives a 952 grid. */
.mlk-awards__grid { padding-inline: 10px; }

.mlk-awards__row { display: flex; flex-wrap: wrap; align-items: center; }

.mlk-awards__cell { width: 25%; padding: 10px; }

.mlk-awards__title {
    margin: 50px 10px 0 0;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.3em;
    color: var(--mlk-navy);
    text-align: start;
}

.mlk-awards__lead {
    /* A text-editor widget counts the inner <p>'s 1rem margin in its height. */
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: 500;
    color: var(--mlk-text);
}

.mlk-awards__cell--logo { text-align: center; }
/* The source forces every badge to exactly 150x150, even non-square files. */
.mlk-awards__cell--logo img { width: 150px; height: 150px; margin: 0 auto; }


/* 14. Client says ------------------------------------------ */
/* Source: plugin leadstio-elements/client-says/assets/css/index.css */

/* On the source page this section only has 20px of top padding. */
.mlk-says { padding-top: 20px; }

/* 10px of Elementor column padding; the 20px below is the gap to the video block. */
.mlk-says__body {
    padding: 10px 0;
    margin-bottom: 20px;
}
/* Source: container 1140 - 10px column padding - 30px widget padding = 1060. */
.mlk-says__body .mlk-container { padding-inline: 40px; }

.mlk-say.swiper-slide,
.mlk-say {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    margin: 0;
    padding: 40px;
    background: var(--mlk-white);
}

/* <figure> and <blockquote> carry the theme's defaults (40px margin, white
   background, radius, padding) - strip them or the card balloons. */
.mlk-say,
.mlk-say > * {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.mlk-say { padding: 40px; background: var(--mlk-white); }

.mlk-say__quote {
    font-size: 16px;
    font-weight: 700;
    color: var(--mlk-text);
}

.mlk-say__logo img { width: 50px; height: auto; object-fit: contain; }

.mlk-say__name {
    margin: 5px 0;
    font-size: 16px;
    font-weight: 400;
    color: #6B6B6B;
}

.mlk-say__rating { display: flex; }
.mlk-say__star { color: #000; }


/* 15. Video reviews ---------------------------------------- */

/* Source: the video block has no top padding, only 60px below. */
.mlk-videos { padding: 0 0 60px; }

.mlk-video.swiper-slide,
.mlk-video {
    /* Source: a white card with no radius and no shadow; the padding lives in the
       two child columns, which stretch equally (NOT centred) so the clip sits at the top. */
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    background: var(--mlk-white);
}

/* Video column 160.3 / text column 270.9 in a 431.2 slide (measured on the source). */
.mlk-video__media { width: 37.17%; padding: 20px; }
.mlk-video__text  { width: 62.83%; padding: 20px; }

.mlk-video__frame {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    text-align: center;
}

.mlk-video__player {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 30px;
    /* The source blocks pointer events on the clip so the overlay gets the click. */
    pointer-events: none;
}

.mlk-video__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.mlk-video__play img { width: 50px; height: 50px; }

.mlk-video__name {
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--mlk-text);
}

.mlk-video__position {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #6B6B6B;
}

.mlk-video__review {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--mlk-text);
}

.mlk-video__link {
    /* The source uses an inline <a>, so the box is only as tall as the text. */
    display: inline;
    padding: 10px 10px 10px 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--mlk-red);
}

.mlk-video__link:hover { color: var(--mlk-red); text-decoration: underline; }


/* YouTube lightbox */

.mlk-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
}

/* The display:flex above would override the hidden attribute unless restated. */
.mlk-lightbox[hidden] { display: none; }

.mlk-lightbox__inner {
    position: relative;
    width: 80%;
    max-width: 900px;
    border-radius: 10px;
    background: #000;
}

.mlk-lightbox__frame { width: 100%; height: 500px; }
.mlk-lightbox__frame iframe { width: 100%; height: 100%; border: 0; }

.mlk-lightbox__close {
    position: absolute;
    top: -40px;
    right: 0;
    border: 0;
    background: none;
    font-size: 40px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}


/* 16. Services --------------------------------------------- */

.mlk-services { background: var(--mlk-grey); }
.mlk-services__body { padding: 0 0 30px; }

.mlk-services__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* The source's 1200 frame inset 10px per side gives a 1180 grid. */
    padding: 20px 10px 0;
}

/* The source splits the three groups into TWO sections (groups 1+2, then 3),
   each with 10px of column padding top and bottom. The last group therefore
   gains 20px above and loses its own top padding. */
.mlk-services__body > .mlk-container { padding-block: 10px; }

.mlk-services__group:last-child {
    margin-top: 20px;
    padding-top: 0;
}

/* Each column is 590; minus 10px padding that is 570, matching the source widget. */
.mlk-services__col   { width: 50%; padding: 10px; }
.mlk-services__media { width: 50%; padding: 10px; }

.mlk-services__name {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3em;
    color: var(--mlk-navy);
    text-align: start;
}

.mlk-services__text {
    /* A text-editor widget counts the inner <p>'s 1rem margin in its height. */
    padding-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7em;
    color: var(--mlk-text);
    text-align: start;
}

.mlk-services__text--flow { padding-bottom: 0; }

.mlk-services__text strong { color: var(--mlk-navy); font-weight: 800; }


/* 17. Reports ---------------------------------------------- */

/* Above: 10px column + 20px inner section. Below: 10px column + 30px section. */
.mlk-reports__body { padding: 30px 0 40px; }

/* The source's outer column is inset 10px, leaving a 1180px grid. */
.mlk-reports__grid {
    display: flex;
    flex-wrap: wrap;
    /* Do NOT use align-items:center: the source stretches both columns to the
       same height and centres inside the image column instead. */
    padding-inline: 10px;
}

.mlk-reports__col {
    /* The source is an Elementor widget-wrap: a flex column, so child margins never collapse. */
    display: flex;
    flex-direction: column;
    width: 47.542%;
    padding: 10px;
}
.mlk-reports__media {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 52.458%;
    padding: 10px;
}
.mlk-reports__media img { margin-left: 40px; max-width: calc(100% - 40px); }

.mlk-reports__title {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3em;
    color: var(--mlk-navy);
    text-align: start;
}

.mlk-reports__text,
.mlk-reports__list {
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7em;
    color: var(--mlk-text);
    text-align: start;
}

.mlk-reports__list {
    /* Source: the <ul> inside the widget carries a 16px margin top and bottom. */
    padding-bottom: 16px;
    padding-left: 1.1em;
    list-style: disc;
}
.mlk-reports__list li { margin-bottom: .5em; }


/* 18. Team ------------------------------------------------- */

.mlk-team { background: var(--mlk-grey); }
/* 10px from the Elementor column above; below it is 10px plus the section's 60px. */
.mlk-team__body { padding: 10px 0 70px; }
/* Source: the carousel is 1036px wide (1140 - 10 column - 42 widget, each side). */
.mlk-team__body .mlk-container { padding-inline: 52px; }

/* Source: plugin leadstio-elements/team-members/assets/css/index.css */
.mlk-team .mlk-swiper { padding-bottom: 60px; }

/* Source: flex row + wrap; a 200px image on the left and a 100%-wide text block
   that wraps onto its own line - not flex-direction column. */
.mlk-member.swiper-slide,
.mlk-member {
    display: flex;
    flex-wrap: wrap;
    /* Swiper equalises slide heights; unchecked, the spare space is shared
       between the flex lines and inflates the name and role. */
    align-content: flex-start;
    background: transparent;
}

/* A fixed square keeps the carousel height stable while images load. */
.mlk-member__photo {
    align-self: flex-start;
    width: 200px;
    overflow: hidden;
}

/* The source keeps the image inline, so its box is taller by the text descender. */
.mlk-member__photo picture { display: inline; }

.mlk-member__photo img {
    display: inline;
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.mlk-member__name {
    /* Source: the name and role are centred at every breakpoint. */
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 10px 10px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--mlk-text);
}

.mlk-member__role {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--mlk-text);
}


/* 19. Knowledge -------------------------------------------- */

.mlk-knowledge { background: var(--mlk-white); }
.mlk-knowledge__body { padding: 0 0 60px; }

.mlk-knowledge__grid { display: flex; flex-wrap: wrap; }
.mlk-knowledge__col { width: 33.333%; padding: 10px; }
/* Container 1140 / 3 columns - 10px padding per side gives 360px of content. */

.mlk-knowledge__label {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3em;
    color: var(--mlk-text);
}

/* The source divider widget: a 21px box (10px padding each side + a 1px rule). */
.mlk-knowledge__divider {
    margin-bottom: 20px;
    padding: 10px 0;
}

.mlk-knowledge__divider span {
    display: block;
    border-top: 1px solid var(--mlk-hairline);
}

.mlk-knowledge__thumb { display: block; margin-bottom: 20px; }

/* The source right-aligns the column button (the widget sets elementor-align-right). */
.mlk-knowledge__col .mlk-btn--ghost {
    display: block;
    width: fit-content;
    margin-left: auto;
}

/* The last widget in a source column carries no bottom gap. */
.mlk-knowledge__col > :last-child { margin-bottom: 0; }

.mlk-knowledge__thumb img {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    border-radius: var(--mlk-radius-pill);
    background: var(--mlk-grey);
}

.mlk-knowledge__post-title,
.mlk-knowledge__title {
    display: block;
    margin-bottom: 20px;
    padding: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3em;
    color: var(--mlk-navy);
}

.mlk-knowledge__text {
    /* 5px from the widget plus the inner <p>'s 16px margin. */
    padding-bottom: 21px;
    font-size: 16px;
    font-weight: 500;
    color: var(--mlk-text);
    text-align: start;
}


/* 20. Revenue ---------------------------------------------- */

.mlk-revenue { background: var(--mlk-white); }
.mlk-revenue__body { padding: 20px 0 30px; }

.mlk-revenue__grid { display: flex; flex-wrap: wrap; }

.mlk-revenue__card {
    width: calc(50% - 40px);
    margin: 20px;
    padding: 30px;
    border: 1px solid #EAE4E475;
    border-radius: var(--mlk-radius-card);
    background: var(--mlk-white);
    box-shadow: 0 10px 40px 0 var(--mlk-line);
    transition: background .3s;
}

.mlk-revenue__card:hover { background: var(--mlk-grey); }

/* Two button widgets: left cell 43.542%, right cell 56.126%, button centred in each. */
.mlk-revenue__tags { display: flex; flex-wrap: wrap; }

.mlk-revenue__tag-slot {
    margin: 20px 0;
    text-align: center;
}

.mlk-revenue__tag-slot:nth-child(1) { width: 43.542%; }
.mlk-revenue__tag-slot:nth-child(2) { width: 56.126%; }

/* The "tags" are really buttons with widths fixed in percentages. */
.mlk-revenue__tag {
    display: inline-block;
    padding: .7em 1.764em;
    border-radius: var(--mlk-radius);
    background: var(--mlk-red-tint);
    /* Elementor's sm button: 15px/22px, not 1.5. */
    line-height: 22px;
    font-size: 15px;
    font-weight: 500;
    color: var(--mlk-red-text);
    text-align: center;
}

.mlk-revenue__tag:hover { background: var(--mlk-red-tint-2); color: var(--mlk-red-text); }

.mlk-revenue__title {
    padding: 15px 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3em;
    color: var(--mlk-navy);
    text-align: center;
}

.mlk-revenue__text {
    /* A text-editor widget counts the inner <p>'s 1rem margin in its height. */
    padding: 0 20px 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7em;
    color: var(--mlk-text);
    text-align: center;
}


/* 21. FAQ -------------------------------------------------- */
/* Elementor 54ef6fe: two columns - text 53.156% left, image 46.8% right.
   Plain <details>, so it opens and closes with JavaScript off. */

.mlk-faq { padding: 60px 0 0; }

.mlk-faq__inner { display: flex; flex-wrap: wrap; align-items: stretch; }

.mlk-faq__col {
    width: 53.156%;
    padding: 0 40px 0 20px;
}

.mlk-faq__media {
    /* Source: the image sits at the TOP of the column, not vertically centred. */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 46.8%;
    text-align: center;
}

.mlk-faq__title {
    width: 100%;
    max-width: 100%;
    /* Source: the title widget has no bottom gap. */
    margin-bottom: 0;
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3em;
    color: var(--mlk-navy);
    text-align: start;
}

.mlk-faq__item {
    border: 1px solid var(--mlk-hairline);
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.mlk-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* A 24px icon box plus a 17px gap keeps the text exactly as wide as the source. */
    gap: 15px;
    padding: 32px 0;
    font-size: 20px;
    font-weight: 600;
    /* Source: line-height equals the font size. */
    line-height: 20px;
    color: #20292F;
    cursor: pointer;
    list-style: none;
}

.mlk-faq__question::-webkit-details-marker { display: none; }

.mlk-faq__question::after {
    content: "";
    /* The source uses a 16x16 PLUS (closed) and MINUS (open) glyph,
       not a chevron. The container is 24px wide. */
    flex: 0 0 24px;
    width: 24px;
    height: 16px;
    background:
        linear-gradient(var(--mlk-ink), var(--mlk-ink)) center / 16px 3.4px no-repeat,
        linear-gradient(var(--mlk-ink), var(--mlk-ink)) center / 3.4px 16px no-repeat;
}

.mlk-faq__item[open] .mlk-faq__question::after {
    background: linear-gradient(var(--mlk-ink), var(--mlk-ink)) center / 16px 3.4px no-repeat;
}

.mlk-faq__answer {
    padding: 0 0 32px;
    font-size: 16px;
    font-weight: 500;
    color: var(--mlk-text);
}

/* Every answer paragraph carries its own 16px margin, including the last. */
.mlk-faq__answer p { margin-bottom: 16px; }


/* 22. About ------------------------------------------------ */

/* Source: the section has no padding, only the Elementor column's 10px. */
.mlk-about { padding: 10px 0; }

.mlk-about__inner { display: flex; flex-wrap: wrap; align-items: center; }

/* Source: the image comes FIRST (on the left) and is narrower than the text. */
.mlk-about__media { order: -1; width: 39.48%; padding: 10px; }
.mlk-about__body  { width: 60%; padding: 10px; }

.mlk-about__text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7em;
    color: var(--mlk-text);
}

.mlk-about__text + .mlk-about__text { margin-top: 1em; }

/* The source text widget sits 20px above the next block; centring shifts it half of that. */
.mlk-about__body > :last-child { margin-bottom: 20px; }
.mlk-about__text strong { font-weight: 800; color: inherit; }
.mlk-about__media img { border-radius: var(--mlk-radius); }


/* 23. Image slider ----------------------------------------- */

.mlk-slider { padding: 20px 0 60px; }

.mlk-slider__item {
    aspect-ratio: 500 / 380;
    overflow: hidden;
    border-radius: var(--mlk-radius);
    background: var(--mlk-grey);
}

.mlk-slider__item img,
.mlk-slider__item picture { width: 100%; height: 100%; object-fit: cover; }


/* 24. Responsive ------------------------------------------- */
/* The source page's breakpoints: 767 / 1024. */

@media (min-width: 767px) {
    .mlk-swiper--says   .swiper-slide { width: calc((100% - 30px) / 2); }
    .mlk-swiper--team   .swiper-slide { width: calc((100% - 30px) / 2); }
    .mlk-swiper--slider .swiper-slide { width: calc((100% - 30px) / 2.5); }
}

@media (min-width: 1024px) {
    .mlk-swiper--says   .swiper-slide { width: calc((100% - 60px) / 3); }
    .mlk-swiper--team   .swiper-slide { width: calc((100% - 90px) / 4); }
    .mlk-swiper--videos .swiper-slide { width: calc((100% - 24px) / 2.2); }
    .mlk-swiper--slider .swiper-slide { width: calc((100% - 50px) / 3.5); }

    .mlk-swiper--cases  { min-height: 400px; }
    .mlk-swiper--team   { min-height: 340px; }
    .mlk-swiper--says   { min-height: 280px; }
    .mlk-swiper--videos { min-height: 300px; }
}

/* <=1024: the source stacks, centres, and turns OFF every section background image. */
@media (max-width: 1024px) {
    .mlk-hero { padding: 60px 0; background-image: none; }
    .mlk-hero__overlay { display: none; }

    /* Source: IMAGE ON TOP, text underneath. */
    .mlk-hero__row { flex-direction: column-reverse; }
    .mlk-hero__body,
    .mlk-hero__media { width: 100%; }
    .mlk-hero__body { text-align: center; padding: 10px; }
    .mlk-hero__media { padding: 10px; }
    .mlk-hero__image { width: 450px; max-width: 100%; margin: 0 auto; }

    /* The source HIDES the desktop stats cards and desktop logo strip on small screens. */
    .mlk-hero__row + .mlk-hero__stats,
    .mlk-hero > .mlk-marquee { display: none; }

    .mlk-hero__stats--mobile { display: none; }

    /* At this size the title also carries the inner <p>'s 16px margin. */
    .mlk-hero__title { padding-bottom: 16px; }

    .mlk-section { padding: 60px 0 0; }

    /* The source splits the head into its own section with 20px below. */
    .mlk-section__head { padding-bottom: 30px; margin-bottom: 0; }

    /* The audit card on small screens: no inner padding, 80px on the section instead. */
    .mlk-audit { padding: 80px 20px; }
    .mlk-audit__card { padding: 0; }
    .mlk-audit__inner { max-width: none; }

    /* The source cell is inset 40px per side; the text inside is not inset further. */
    .mlk-benefits__item { width: 100%; padding: 20px 40px; }
    .mlk-benefits__text { padding-inline: 0; }
    /* 10px below the widget; cells wrapped in <p> add that tag's 16px margin. */
    .mlk-benefits__title { text-align: start; padding-bottom: 26px; font-size: 13px; }
    .mlk-benefits__title--flow { padding-bottom: 10px; }

    /* Awards on small screens: [title | lead], the strip under the lead, then six
       badges on ONE row. The two markup rows are flattened with display:contents. */
    .mlk-awards__grid { display: flex; flex-wrap: wrap; align-items: center; }
    .mlk-awards__row { display: contents; }

    .mlk-awards__cell { width: 16.666%; order: 4; }

    /* The source title row is 218px tall: both cells are inset 60px on top. */
    .mlk-awards__row:nth-child(1) > .mlk-awards__cell:first-child { width: 50%; order: 1; padding-top: 60px; }
    .mlk-awards__row:nth-child(2) > .mlk-awards__cell:first-child { width: 50%; order: 2; padding-top: 60px; }

    /* At this size a badge is 97px tall and scales its width. */
    .mlk-awards__cell--logo img { width: auto; height: 97px; max-width: 100%; }

    .mlk-marquee--partner {
        width: 50%;
        margin-left: 50%;
        order: 3;
        /* Source: the strip lives in the lead column, 80px below the text. */
        padding: 56px 10px 0;
    }

    .mlk-awards { padding: 20px 0 0; }
    .mlk-awards__grid { padding-inline: 0; }
    .mlk-awards__title { margin: 0; font-size: 28px; font-weight: 800; text-align: start; }
    /* At this size the source lead is running text (5px), without the <p>'s 16px. */
    .mlk-awards__lead  { text-align: center; padding-bottom: 5px; }

    /* Source on small screens: the IMAGE COMES FIRST in all three two-column sections. */
    .mlk-why__inner,
    .mlk-reports__grid,
    .mlk-services__group,
    .mlk-faq__inner { flex-direction: column-reverse; }

    /* Source: those three two-column sections are capped at 562 and centred,
       not stretched to 728 like the rest. */
    .mlk-why__list,
    .mlk-why__media,
    .mlk-services__col,
    .mlk-services__media,
    .mlk-reports__col,
    .mlk-reports__media {
        width: 100%;
        max-width: 562px;
        margin-inline: auto;
    }

    .mlk-about__body,
    .mlk-about__media { width: 100%; }

    /* On small screens the source puts the TEXT first and the image below. */
    .mlk-about__media { order: 0; }
    /* The section's 60px minus the inner column's 10px. */
    .mlk-about { padding-top: 50px; }
    .mlk-revenue__body { padding: 40px 0 24px; }

    /* The knowledge hub keeps its three columns at tablet size. */
    .mlk-knowledge__col { width: 33.333%; }

    /* Source: the number pill, the member photo and the CTA are all centred
       at this size. */
    .mlk-why__number   { margin-inline: auto; }
    .mlk-member__photo { margin-inline: auto; }

    .mlk-why .mlk-btn {
        display: block;
        width: fit-content;
        margin-inline: auto;
    }

    .mlk-why__title,
    .mlk-why__text,
    .mlk-services__name,
    .mlk-services__text,
    .mlk-reports__title,
    .mlk-reports__text { text-align: center; }

    /* At this size the source image widget sits 20px above the next block. */
    .mlk-why__media img,
    .mlk-reports__media img { max-width: 400px; margin: 0 auto 20px; }
    .mlk-services__media img { max-width: 400px; margin: 0 auto; }

    .mlk-why__body { padding: 70px 0; }

    .mlk-services__group { padding-top: 40px; }
    /* The last group is its own section: on small screens the gap is larger than on desktop. */
    .mlk-services__group:last-child { margin-top: 140px; }
    .mlk-services__body { padding: 40px 0 60px; }
    .mlk-reports__body { padding: 0 0 140px; }

    /* Source: at <=1025 the case card stacks REVERSED (image on top). */
    .mlk-case { flex-direction: column-reverse; }
    .mlk-case__media img,
    .mlk-case__media picture { width: 100%; height: 300px; }

    .mlk-faq { padding: 80px 40px 100px; }
    .mlk-faq__col,
    .mlk-faq__media { width: 100%; }
    .mlk-faq__col { padding: 60px 0 0; }
    .mlk-faq__media img { max-width: 350px; margin: 0 auto; }
    /* Source: a 688 card inside a 768 frame - inset 20px per side, then subtract the margin. */
    .mlk-revenue__grid { padding-inline: 20px; }
    .mlk-revenue__card { width: calc(100% - 40px); }
}

@media (max-width: 767px) {
    .mlk-container { padding-inline: 20px; }
    .mlk-section__title { font-size: 28px; max-width: 312px; margin-inline: auto; }
    .mlk-section__lead  { font-size: 16px; }

    /* HERO on phones: a 260px image, two SMALL stat cards over its bottom edge,
       then the text block. The order comes from display:contents + order. */
    .mlk-hero { padding: 10px 10px 50px; }
    .mlk-hero .mlk-container { padding-inline: 0; }

    .mlk-hero__inner { display: flex; flex-direction: column; }
    .mlk-hero__row   { display: contents; }
    .mlk-hero__media { order: 1; }
    .mlk-hero__stats { order: 2; }
    .mlk-hero__body  { order: 3; }

    /* Source: the image is set to 450px but the widget padding caps it, so it
       tracks the viewport (390 -> 260, 480 -> 350, >=600 -> 450), 15px above the next block. */
    .mlk-hero__image {
        width: 450px;
        max-width: calc(100% - 80px);
        margin-bottom: 15px;
    }

    /* The source image widget is lopsided: 40 left, 60 right, so the image shifts 5px left. */
    .mlk-hero__media { padding-right: 20px; }

    /* At this size widgets lose the 20px gap; only the inner <p>'s 16px margin
       remains, already carried by each text block's padding-bottom. */
    .mlk-hero__body > * { margin-bottom: 0; }
    .mlk-marquee--mobile { margin: 15px 0 25px; }
    .mlk-hero__body > .mlk-btn { margin-top: 0; }
    .mlk-hero__title { font-size: 34px; }
    .mlk-hero__eyebrow,
    .mlk-hero__lead { font-size: 16px; }

    /* The two stat cards OVERLAP the image and scale with the frame (390 -> 96,
       600 -> 150), so they use percentages rather than fixed px. */
    .mlk-hero__media { position: relative; }

    .mlk-hero__stats--mobile {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2%;
        display: flex;
        justify-content: space-between;
        width: 86.3%;
        margin: 0 auto;
        padding: 0;
    }

    .mlk-hero__card--right,
    .mlk-hero__card--left {
        width: 30%;
        margin: 0;
        padding: 10px;
        border-radius: 15px;
        background: var(--mlk-white);
        box-shadow: 0 10px 40px 0 var(--mlk-line);
    }

    /* The three widgets inside a card sit flush together. */
    .mlk-hero__card--right,
    .mlk-hero__card--left {
        display: flex;
        flex-direction: column;
        /* Content is flush with the bottom of the card, as in the source. */
        justify-content: flex-end;
    }

    .mlk-hero__card-icon { width: 45%; height: auto; margin-bottom: 0; }

    .mlk-hero__card-value {
        padding-bottom: 10px;
        font-size: 14px;
        line-height: 14px;
    }

    .mlk-hero__card-label {
        width: auto;
        max-width: none;
        margin: 0;
        padding-bottom: 16px;
        font-size: 10px;
        line-height: 15px;
    }

    .mlk-benefits__card { padding: 40px; }
    /* On phones: 20px horizontal, 30px vertical (10px column + 20px widget). */
    .mlk-benefits__item { padding: 30px 20px; }

    /* At this size the section head only has 10px below. */
    .mlk-section__head { padding-bottom: 10px; }
    .mlk-benefits__body { padding: 10px 0 0; }
    /* 20px below the widget; cells wrapped in <p> add that tag's 16px. */
    .mlk-benefits__title { text-align: center; padding-bottom: 36px; }
    .mlk-benefits__title--flow  { padding-bottom: 20px; }
.mlk-benefits__text--wrapped { padding-bottom: 16px; }

.mlk-benefits__text { padding: 0; font-size: 14px; }

    .mlk-audit { padding: 60px 20px; }
    /* The section is already inset 20px, so the inner frame adds none. */
    .mlk-audit .mlk-container { padding-inline: 0; }
    .mlk-audit__card { padding: 60px 20px; }
    .mlk-audit__title { font-size: 30px; line-height: 1.3em; }
    .mlk-audit__text  { font-size: 18px; line-height: 1.7em; }

    /* On phones the columns fill the 350 frame instead of the tablet's 562 cap. */
    .mlk-why__list,
    .mlk-why__media,
    .mlk-services__col,
    .mlk-services__media,
    .mlk-reports__col,
    .mlk-reports__media { max-width: none; }

    /* Source: the knowledge frame spans the full width, columns inset 15px per side,
       and the label is as large as a post title (22px). */
    .mlk-knowledge__body .mlk-container { padding-inline: 0; }
    .mlk-knowledge__col { width: 100%; padding: 10px 15px; }
    .mlk-knowledge__label { font-size: 22px; line-height: 1.3em; }

    /* At this size those images are exactly 80% of the column width (390 -> 248,
       600 -> 416), not a fixed pixel value. */
    .mlk-why__media img,
    .mlk-reports__media img,
    .mlk-services__media img { width: 80%; max-width: none; margin-bottom: 20px; }

    .mlk-why__title,
    .mlk-services__name,
    .mlk-reports__title { font-size: 28px; margin-bottom: 15px; }

    .mlk-why__text,
    .mlk-services__text,
    .mlk-reports__text { font-size: 14px; margin-bottom: 0; }

    /* Only "why us" keeps 10px between a paragraph and the next number pill. */
    .mlk-why__text { margin-bottom: 10px; }

    /* Spacing between service groups on phones. */
    .mlk-services__group { padding-top: 0; }
    .mlk-services__group:last-child { margin-top: 30px; }
    .mlk-services__body { padding: 0 0 108px; }
    /* The image column has no vertical padding at this size. */
    .mlk-services__media { padding-block: 0; }
    .mlk-reports__media  { padding-block: 0; }
    .mlk-reports__media img { margin-bottom: 30px; }
    /* On phones the reports text column is inset 40px per side. */
    .mlk-reports__col { padding: 10px 40px; }
    .mlk-reports__body { padding-bottom: 83px; }
    /* The list spans the full column width with markers inside the line. */
    .mlk-reports__list { padding-left: 0; list-style-position: inside; font-size: 14px; margin-bottom: 0; }

    .mlk-why__number { padding: 7px 15px; margin-bottom: 10px; }
    /* AWARDS on phones: title, lead and strip stacked full width; badges
       three to a row. */
    .mlk-awards__row:nth-child(1) > .mlk-awards__cell:first-child,
    .mlk-awards__row:nth-child(2) > .mlk-awards__cell:first-child {
        width: 100%;
        padding-top: 0;
    }

    .mlk-awards__cell { width: 33.333%; }

    .mlk-marquee--partner {
        width: 100%;
        margin-left: 0;
        padding: 20px 10px;
    }

    .mlk-awards__title { font-size: 28px; text-align: center; }
    .mlk-awards__lead  { text-align: center; }
    /* The 350 frame is already inset, so the card grid adds none. */
    .mlk-revenue__grid { padding-inline: 0; }
    .mlk-revenue__body { padding: 12px 0 24px; }
    .mlk-revenue__title { font-size: 20px; }
    .mlk-revenue__text  { font-size: 14px; padding-inline: 0; }
    .mlk-faq { padding: 40px 20px; }
    /* The section is already inset 20px, so the inner frame adds none. */
    .mlk-faq .mlk-container { padding-inline: 0; }
    .mlk-faq__col { margin-bottom: 40px; padding: 0; }
    .mlk-faq__title { font-size: 28px; max-width: 312px; text-align: center; }
    .mlk-faq__question { font-size: 18px; line-height: 1.3em; }
    .mlk-faq__media img { width: 100%; max-width: 250px; margin-bottom: 30px; }
    /* About: the section is inset 10px, both columns 20px per side, and the
       text is CENTRED as in the source. */
    .mlk-about { padding-top: 10px; }
    .mlk-about__text { text-align: center; }
    .mlk-about__body,
    .mlk-about__media { padding-inline: 20px; }

    /* The video card stacks: the video column fills the slide width and the
       frame is what is left after 20px per side (600px -> 284px, as in the source). */
    /* At this size the source video strip spans the full screen width. */
    .mlk-videos .mlk-container { padding-inline: 0; }

    .mlk-video { flex-direction: column; }
    .mlk-video__media,
    .mlk-video__text { width: 100%; max-width: none; }
}


/* 26. Video reviews: reserved box ---------------------------- */
/* The clips load only when they come near the viewport (service.js), so the box
   has to hold its place from the first paint or the section jumps later.
   4:5 is the clips' own ratio - measured 180x225 on the source page. */

.mlk-video__player {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--mlk-grey);
}

/* The play button is the only thing above the clip before it arrives. */
.mlk-video__play img { width: 50px; height: 35px; }

/* The lightbox builds its <iframe> on click, so an empty YouTube frame is never
   requested with the page. */
.mlk-lightbox__frame > div { width: 100%; height: 100%; }


/* 27. Pricing tiers (PPC pages) ------------------------------ */
/* Colours and layout taken from the Elementor source: two icon lists per card
   (included, then excluded with line-through), a centred price, the note under it,
   and a green button on the outer two cards with a white one in the middle. */

.mlk-plans__lead { margin: 0 0 8px; font-weight: 500; }

.mlk-plans__discounts {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    color: var(--mlk-muted);
}

.mlk-plans__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }

.mlk-plan {
    display: flex;
    flex-direction: column;
    padding: 32px 24px;
    border: 1px solid var(--mlk-line);
    border-radius: 16px;
    background: var(--mlk-white);
}

.mlk-plan__name {
    margin: 0 0 20px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
}

.mlk-plan__features { margin: 0 0 24px; padding: 0; list-style: none; flex: 1; }
.mlk-plan__features li { margin-bottom: 10px; padding-left: 26px; position: relative; }

.mlk-plan__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 14px;
    height: 8px;
    border-left: 2px solid #4CAF50;
    border-bottom: 2px solid #4CAF50;
    transform: rotate(-45deg);
}

.mlk-plan__feature--off { color: var(--mlk-muted); }
.mlk-plan__feature--off::before { border-color: currentColor; opacity: .45; }
.mlk-plan__feature--off s { text-decoration-thickness: 1px; }

.mlk-plan__amount {
    margin: 0;
    text-align: center;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: #202226;
}

.mlk-plan__note {
    margin: 2px 0 20px;
    text-align: center;
    font-size: 14px;
    color: #202226;
}

.mlk-plan__cta { align-self: stretch; text-align: center; color: #555555; }
.mlk-plan--accent .mlk-plan__cta { background: #D2EBD2; }
.mlk-plan--plain .mlk-plan__cta { background: var(--mlk-white); border: 1px solid var(--mlk-line); }

@media (min-width: 768px) {
    .mlk-plans__grid { grid-template-columns: repeat(3, 1fr); }
}

/* 28. Hero objective list (PPC pages) ------------------------ */

.mlk-hero__bullets {
    margin: 0 0 24px;
    padding: 0 0 0 20px;
    max-width: 480px;
}

.mlk-hero__bullets li { margin-bottom: 6px; }

.mlk-plan__feature--off { color: var(--mlk-muted); }
.mlk-plan__feature--off s { text-decoration-thickness: 1px; }


/* 29. Ad platforms grid (paid social) ------------------------ */

.mlk-platforms__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 32px;
}

.mlk-platform {
    padding: 24px;
    border: 1px solid var(--mlk-line);
    border-radius: 16px;
    background: var(--mlk-white);
}

.mlk-platform__name { margin: 0 0 10px; font-size: 18px; line-height: 1.3; font-weight: 700; }
.mlk-platform__text { margin: 0; color: var(--mlk-muted); }

@media (min-width: 600px)  { .mlk-platforms__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .mlk-platforms__grid { grid-template-columns: repeat(4, 1fr); } }


/* 30. Generic text section ------------------------------------- */
.mlk-text__inner { max-width: 860px; }
.mlk-text__para { margin: 0 0 14px; }

/* 27b. Pricing cards: equal columns, buttons on one line ------- */
.mlk-plans__grid { align-items: stretch; }
.mlk-plan__name { min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
.mlk-plan__cta { margin-top: auto; }

/* 27c. Pricing: intro lines centred like the title ------------- */
.mlk-plans__lead { text-align: center; }
.mlk-plans__discounts { justify-content: center; }

/* 27d. Pricing, as on the live page: pill titles, tinted middle card, round checks */
.mlk-plan { padding: 40px 32px; border: 0; box-shadow: 0 10px 40px 0 var(--mlk-line); }
.mlk-plan--plain { background: #E4F3E4; }
.mlk-plan__name {
    display: block; min-height: 0; width: max-content; max-width: 100%;
    margin: 0 auto 32px; padding: 10px 26px; border-radius: 999px;
    background: #D2EBD2; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
}
.mlk-plan--plain .mlk-plan__name { background: var(--mlk-white); }
.mlk-plan__features li { padding-left: 38px; margin-bottom: 18px; line-height: 1.35; }
.mlk-plan__features li::before {
    width: 22px; height: 22px; border-radius: 50%; background: #3E3E3E; border: 0;
    top: .15em; transform: none;
}
.mlk-plan__features li::after {
    content: ""; position: absolute; left: 7px; top: calc(.15em + 5px);
    width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.mlk-plan__feature--off::before { background: #B9B9B9; opacity: 1; }
.mlk-plan--plain .mlk-plan__cta, .mlk-plan--accent .mlk-plan__cta { background: #D2EBD2; border: 0; }
.mlk-plans__discounts { display: block; text-align: center; list-style: disc; list-style-position: inside; }
.mlk-plans__discounts li { margin: 4px 0; }





/* 24b. Revenue with three cards: one row on desktop, as on the live page.
   Each card keeps its 20px margin on both sides, so a third of the row minus
   40px is what makes exactly three fit - a basis that forgets the margins
   wraps the third card onto its own line. */
@media (min-width: 1025px) {
    .mlk-revenue__grid--three .mlk-revenue__card { width: calc(33.333% - 40px); }
}

/* 31. Layout stability ------------------------------------------------------
   content-visibility was removed: sections below the fold were laid out at a
   900px guess and snapped to their real height while scrolling - that was the
   0.1167 "while scrolling" CLS on desktop. */
.mlk-hero__image, .mlk-hero__card-icon { aspect-ratio: 1 / 1; }

/* Awards followed by the audit block: 110px + 60px of air between them. */
.mlk-awards:has(+ .mlk-audit) { padding-bottom: 30px; }
.mlk-awards + .mlk-audit { padding-top: 0; }