/* The public design of Marvelous Media & Communications, rebuilt 1-op-1 from the rendered Divi site
   (measured with getComputedStyle, Scripts/compare_styles.py). The class prefix is mv-; the colours
   come from /beheer/colors (the --vsi-* and --mv-* properties the host page writes after this file).

   The measures of the old theme:
   - a row is 80% of the window and at most 1080px wide;
   - a section has 54px above and below it from 1350px up, 4% between 981 and 1350px, 50px below 981px;
   - a row has 27px / 2% / 30px above and below it;
   - columns: 2/3 = 64.833%, 1/3 = 29.667%, 1/2 = 47.25%, 3/4 = 73.625%, 1/4 = 20.875%, the gap 5.5%;
   - text: Noto Sans 15px, line height 1.9em, #666; headings #333, weight 500. */

:root {
    --mv-yellow: var(--vsi-primary, #fbbc43);
    --mv-brown: var(--mv-secondary, #6b5e58);
    --mv-text: var(--vsi-ink, #666666);
    --mv-heading: #333333;
    --mv-link: var(--vsi-link, #fbbc43);
    --mv-link-hover: var(--vsi-link-hover, #6b5e58);
    --mv-header-bg: var(--vsi-header-bg, #ffffff);
    --mv-header-text: var(--vsi-header-text, #000000);
    --mv-header-accent: var(--vsi-header-accent, #fbbc43);
    --mv-footer-bg: var(--vsi-footer-bg, #000000);
    --mv-footer-text: var(--vsi-footer-text, #ffffff);
    --mv-footer-heading: var(--vsi-footer-heading, #ffffff);
    --mv-footer-link: var(--vsi-footer-link, #fbbc43);
    --mv-footer-link-hover: var(--vsi-footer-link-hover, #ffffff);
    --mv-footer-muted: var(--vsi-footer-muted, #bababa);
    --mv-section-space: 54px;
    --mv-row-space: 27px;
    --mv-gap: 5.5%;
    --mv-font: "Noto Sans", Helvetica, Arial, Lucida, sans-serif;
}

@media (min-width: 981px) and (max-width: 1349px) {
    :root {
        --mv-section-space: 4vw;
        --mv-row-space: 2vw;
    }
}

@media (max-width: 980px) {
    :root {
        --mv-section-space: 50px;
        --mv-row-space: 30px;
    }
}

/* ---------------------------------------------------------------- base */

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

html {
    -webkit-text-size-adjust: 100%;
}

body.mv-site {
    margin: 0;
    background-color: var(--vsi-bg, #ffffff);
    color: var(--mv-text);
    font-family: var(--mv-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9em;
    -webkit-font-smoothing: antialiased;
}

:where(.mv-site) img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

:where(.mv-site) a {
    color: var(--mv-link);
    text-decoration: none;
}

:where(.mv-site) a:hover {
    color: var(--mv-link-hover);
}

:where(.mv-site) h1,
:where(.mv-site) h2,
:where(.mv-site) h3,
:where(.mv-site) h4,
:where(.mv-site) h5,
:where(.mv-site) h6 {
    margin: 0;
    padding-bottom: 10px;
    color: var(--mv-heading);
    font-weight: 500;
    line-height: 1em;
}

:where(.mv-site) h1 { font-size: 30px; }
:where(.mv-site) h2 { font-size: 26px; }
:where(.mv-site) h3 { font-size: 22px; }
:where(.mv-site) h4 { font-size: 18px; }
:where(.mv-site) h5 { font-size: 16px; }
:where(.mv-site) h6 { font-size: 14px; }

:where(.mv-site) p {
    margin: 0;
    padding-bottom: 1em;
}

:where(.mv-site) p:last-of-type {
    padding-bottom: 0;
}

:where(.mv-site) strong,
:where(.mv-site) b {
    font-weight: 700;
}

:where(.mv-site) ul,
:where(.mv-site) ol {
    margin: 0;
    padding: 0 0 23px 1em;
    line-height: 26px;
}

:where(.mv-site) ul {
    list-style-type: disc;
}

:where(.mv-site) ol {
    list-style-type: decimal;
    list-style-position: inside;
}

:where(.mv-site) ol li {
    padding-bottom: 1em;
}

.mv-text > :last-child {
    padding-bottom: 0;
}

:where(.mv-site) hr {
    border: 0;
    border-top: 1px solid #dddddd;
    margin: 20px 0;
}

/* ---------------------------------------------------------------- sections and rows */

.mv-block {
    position: relative;
    padding: var(--mv-section-space) 0;
    background-color: #ffffff;
}

.mv-space-top--small { padding-top: 10px; }
.mv-space-top--none { padding-top: 0; }
.mv-space-bottom--small { padding-bottom: 10px; }
.mv-space-bottom--none { padding-bottom: 0; }

.mv-row:empty {
    padding: 0;
}

.mv-row {
    position: relative;
    width: 80%;
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--mv-row-space) 0;
}

.mv-bg--secondary { background-color: var(--mv-brown); }
.mv-bg--primary { background-color: var(--mv-yellow); }
.mv-bg--dark { background-color: #000000; }
.mv-bg--tint { background-color: var(--vsi-bg-tint, #f5f3f2); }

.mv-bg--secondary,
.mv-bg--secondary h1,
.mv-bg--secondary h2,
.mv-bg--secondary h3,
.mv-bg--secondary h4,
.mv-bg--dark,
.mv-bg--dark h1,
.mv-bg--dark h2,
.mv-bg--dark h3,
.mv-bg--dark h4,
.mv-bg--primary,
.mv-bg--primary h1,
.mv-bg--primary h2,
.mv-bg--primary h3,
.mv-bg--primary h4 {
    color: #ffffff;
}

.mv-headings--small .mv-text h2 { font-size: 18px; }
.mv-headings--large .mv-text h3 { font-size: 26px; margin-top: 10px; }

/* ---------------------------------------------------------------- header */

.vsi-screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mv-skip:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    width: auto;
    height: auto;
    padding: 8px 14px;
    clip: auto;
    background: #ffffff;
    color: #000000;
}

.mv-header {
    position: relative;
    z-index: 9990;
    background-color: var(--mv-header-bg);
}

.mv-header__inner {
    display: flex;
    align-items: center;
    width: 80%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 27px 0;
}

.mv-header__logo {
    flex: 0 0 auto;
    margin-right: 30px;
    line-height: 0;
}

.mv-header__logo img {
    width: auto;
    height: 80px;
    max-height: 80px;
    transition: height 0.2s;
}

.mv-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}

.mv-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1em;
}

.mv-menu > .mv-menu__item {
    position: relative;
    padding: 0 11px;
}

.mv-menu > .mv-menu__item:last-child {
    padding-right: 0;
}

.mv-menu > .mv-menu__item > a {
    display: flex;
    align-items: center;
    padding: 31px 0;
    color: var(--mv-header-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
    /* The hover fade of the old menu links: opacity in 0.2 s ease-in-out (measured with getComputedStyle
       on the Divi menu, 20 October 2026; was 0.4 s, twice as slow). Guarded by SliderArrowTests. */
    transition: opacity 0.2s ease-in-out, padding 0.2s;
}

.mv-menu > .mv-menu__item > a:hover {
    opacity: 0.7;
    color: var(--mv-header-text);
}

.mv-menu > .mv-menu__item.is-current > a {
    color: var(--mv-header-accent);
}

/* The arrow of a menu item with a submenu (the "3" of the icon font of the old theme). */
.mv-menu__item--parent > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.mv-submenu {
    position: absolute;
    top: 100%;
    left: -11px;
    z-index: 9999;
    visibility: hidden;
    min-width: 240px;
    margin: 0;
    padding: 20px 0;
    list-style: none;
    border-top: 3px solid var(--mv-header-accent);
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    line-height: 26px;
}

.mv-menu__item:hover > .mv-submenu,
.mv-menu__item:focus-within > .mv-submenu {
    visibility: visible;
    opacity: 1;
}

.mv-submenu .mv-menu__item {
    padding: 0 20px;
}

.mv-submenu a {
    display: block;
    min-width: 200px;
    padding: 6px 20px;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    text-transform: uppercase;
    white-space: nowrap;
}

.mv-submenu a:hover {
    background-color: rgba(0, 0, 0, 0.03);
    color: #000000;
    opacity: 0.7;
}

.mv-submenu .is-current > a {
    color: var(--mv-header-accent);
}

.mv-lang {
    flex: 0 0 auto;
    margin-left: 22px;
    padding: 4px 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    color: var(--mv-header-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.mv-site .mv-lang:hover {
    color: var(--mv-header-accent);
}

.mv-menu-toggle {
    display: none;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-left: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mv-header-accent);
    cursor: pointer;
}

.mv-menu-toggle__bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 32px;
    margin: 0 auto;
}

.mv-menu-toggle__bars span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background-color: currentColor;
}

.mv-mobile-menu {
    display: none;
}

/* The sticky header of the old site: after 20px of scrolling it stays on top, smaller. */
.mv-scrolled .mv-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

.mv-scrolled .mv-header__logo img {
    height: 70px;
}

.mv-scrolled .mv-menu > .mv-menu__item > a {
    padding-top: 21px;
    padding-bottom: 21px;
}

.mv-scrolled .mv-main {
    padding-top: var(--mv-header-height, 134px);
}

@media (max-width: 980px) {
    .mv-header__inner {
        padding: 30px 0;
    }

    .mv-nav {
        display: none;
    }

    /* As on the old site, the phone header holds only the logo and the menu button; the language
       switch is the last line of the mobile menu (a header switch pushed the button off a 360 px screen). */
    .mv-lang {
        display: none;
    }

    .mv-header__logo {
        margin-right: 0;
    }

    .mv-menu-toggle {
        display: block;
        margin-left: auto;
    }

    /* The mobile menu: a full-width white panel under the header, opened by site.js (mv-menu-open on <html>). */
    .mv-menu-open .mv-mobile-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 94px);
        overflow-y: auto;
        border-top: 3px solid var(--mv-header-accent);
        background-color: #ffffff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .mv-mobile-menu ul {
        margin: 0;
        padding: 5% 10%;
        list-style: none;
        line-height: 1.5em;
    }

    .mv-mobile-menu ul ul {
        padding: 0 0 0 20px;
    }

    .mv-mobile-menu a {
        display: block;
        padding: 10px 5%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        color: #000000;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .mv-mobile-menu .is-current > a {
        color: var(--mv-header-accent);
    }

    .mv-mobile-menu__lang a {
        font-weight: 400;
        text-transform: none;
    }

    .mv-scrolled .mv-main {
        padding-top: var(--mv-header-height, 106px);
    }
}

/* ---------------------------------------------------------------- hero */

.mv-block--hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 0;
    background-color: #ffffff;
}

.mv-hero--h40 { height: 40vh; max-height: 400px; }
.mv-hero--h60 { height: 60vh; max-height: 500px; }
.mv-hero--h80 { height: 80vh; max-height: 700px; }
.mv-hero--h100 { height: 100vh; max-height: 900px; }

/* A real photo with an alt text, cut to the section like the background photo of the old site. */
.mv-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.mv-site .mv-hero__image {
    max-width: none;
    height: 100%;
}

.mv-focus--top .mv-hero__image { object-position: center top; }
.mv-focus--bottom .mv-hero__image { object-position: center bottom; }
.mv-focus--right .mv-hero__image { object-position: right center; }
/* The blog and post heroes of the old theme builder (layouts 168 and 181): center bottom -50px. */
.mv-hero--blog .mv-hero__image { object-position: 50% calc(100% + 50px); }

.mv-hero__content {
    z-index: 1;
    text-align: center;
}

.mv-site .mv-hero__title {
    padding-bottom: 10px;
    color: #ffffff;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.3em;
    text-align: center;
    text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
}

.mv-site .mv-hero__subtitle {
    padding-bottom: 10px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 300;
    line-height: 1.2em;
    text-align: center;
    text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
}

@media (max-width: 767px) {
    .mv-site .mv-hero__title {
        font-size: 32px;
    }

    .mv-site .mv-hero__subtitle {
        font-size: 20px;
    }
}

/* ---------------------------------------------------------------- columns */

.mv-split,
.mv-media {
    display: flex;
    gap: var(--mv-gap);
}

.mv-split--2-3 > .mv-col--main { flex: 0 0 64.833%; }
.mv-split--2-3 > .mv-col--side { flex: 0 0 29.6667%; }
.mv-split--3-4 > .mv-col--main { flex: 0 0 73.625%; }
.mv-split--3-4 > .mv-col--side { flex: 0 0 20.875%; }
.mv-split--1-2 > .mv-col { flex: 0 0 47.25%; }

/* The question with a button beside the text, vertically centred (the flex column of the old site). */
.mv-side--cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.mv-side--cta .mv-button-row {
    margin-top: 20px;
}

/* The list of services beside the text: centred words without bullets, underlined on hover. */
.mv-side--tags {
    text-align: center;
}

.mv-side--tags h2,
.mv-side--tags h3 {
    font-size: 23px;
    line-height: 1em;
}

.mv-site .mv-side--tags ul {
    padding: 0;
    list-style: none;
    text-align: center;
}

.mv-side--tags li {
    display: inline;
    position: relative;
    margin: 0 7px;
    padding: 5px 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 2.2em;
    cursor: default;
    background:
        linear-gradient(to right, #ffffff, #ffffff),
        linear-gradient(to right, rgb(255, 0, 0), rgb(255, 0, 180), rgb(0, 100, 200));
    background-size: 100% 0.2em, 0 0.2em;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}

.mv-side--tags li:hover {
    background-size: 0 0.2em, 100% 0.2em;
}

.mv-media--align-center {
    align-items: center;
}

.mv-media--align-top {
    align-items: flex-start;
}

.mv-media > .mv-media__image { flex: 0 0 29.6667%; }
.mv-media > .mv-media__text { flex: 0 0 64.833%; }

.mv-media--image-right > .mv-media__image {
    order: 2;
}

.mv-media__img {
    display: block;
    width: 100%;
}

.mv-media--image-right .mv-media__image {
    margin: 30px 0;
}

@media (max-width: 980px) {
    .mv-split,
    .mv-media {
        flex-direction: column;
        gap: 30px;
    }

    .mv-split > .mv-col,
    .mv-media > .mv-col {
        flex: 1 1 auto;
        width: 100%;
    }

    .mv-media--image-right > .mv-media__image {
        order: 0;
        margin: 0;
    }

    .mv-side--tags {
        text-align: left;
    }

    .mv-site .mv-side--tags h2 {
        text-align: left;
    }

    .mv-site .mv-side--tags ul {
        text-align: left;
    }

    .mv-side--tags li {
        margin: 0 14px 0 0;
        font-size: 17px;
        font-style: italic;
        line-height: 2em;
    }
}

/* ---------------------------------------------------------------- buttons */

.mv-button-row {
    margin: 0;
    padding: 0;
}

.mv-site .mv-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.3em 0.7em;
    border: 0;
    border-radius: 5px;
    background-color: var(--mv-yellow);
    color: #ffffff;
    font-family: var(--mv-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7em;
    cursor: pointer;
    transition: background-color 0.3s, padding 0.3s;
}

.mv-site .mv-button:hover {
    background-color: var(--vsi-primary-dark, #e0a52f);
    color: #ffffff;
}

.mv-button__icon {
    display: inline-flex;
    width: 0.9em;
    height: 0.9em;
}

.mv-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.mv-text + .mv-button-row {
    margin-top: 20px;
}

/* ---------------------------------------------------------------- cards */

.mv-cards {
    display: grid;
    grid-template-columns: repeat(var(--mv-card-columns, 3), minmax(0, 1fr));
    column-gap: var(--mv-gap);
    row-gap: 30px;
}

.mv-cards--cols-1 { --mv-card-columns: 1; }
.mv-cards--cols-2 { --mv-card-columns: 2; }
.mv-cards--cols-3 { --mv-card-columns: 3; }
.mv-cards--cols-4 { --mv-card-columns: 4; }

.mv-cards__title {
    margin-bottom: 0;
}

.mv-card__link {
    display: block;
    color: inherit;
}

.mv-site .mv-card__link:hover {
    color: inherit;
}

/* A long e-mail address breaks inside its box on a phone, as Divi's break-word did. The same for a
   pasted web address in a post or a long word in a heading ("Maatwerkoplossingen" at 320 px): it
   breaks inside the column instead of running out of the window; also a post title ("advertentiestrategieën"
   at 320 px). Normal text is not affected. */
.mv-card__text,
.mv-text,
.mv-post__content,
.mv-post__title,
.mv-post-item__title {
    overflow-wrap: break-word;
}

.mv-card__text ul {
    padding-left: 1.5em;
}

/* Icons: the icon left of the title and the text (the services of the home page). */
.mv-cards--icons .mv-card {
    position: relative;
    min-height: 32px;
    padding-left: 47px;
}

.mv-cards--icons .mv-card__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    color: var(--mv-yellow);
}

.mv-cards--icons .mv-card__title {
    line-height: 1.3em;
}

.mv-cards--icons .mv-card .mv-button-row {
    margin-top: 20px;
}

.mv-cards--icons .mv-button {
    font-size: 18px;
}

/* Boxes: a white box with a shadow and a centred yellow icon (the contact details). */
.mv-cards--boxes .mv-card {
    padding: 30px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
    color: var(--mv-yellow);
    font-size: 18px;
    font-weight: 300;
    text-align: center;
}

.mv-cards--boxes .mv-card__icon {
    display: block;
    width: 62px;
    height: 62px;
    margin: 0 auto 30px;
    color: var(--mv-yellow);
}

.mv-site .mv-cards--boxes .mv-card__title {
    color: var(--mv-yellow);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.mv-cards--boxes .mv-card__text,
.mv-cards--boxes .mv-card__text a {
    color: var(--mv-yellow);
}

/* Portfolio: photo, title and list, as many columns of at least 300px as fit (the old grid). */
.mv-cards--portfolio {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 20px;
    row-gap: 0;
    overflow: hidden;
}

.mv-cards--portfolio .mv-card {
    margin-bottom: 30px;
}

.mv-cards--portfolio .mv-card__image {
    display: block;
    width: 100%;
    margin-bottom: 30px;
}

.mv-site .mv-cards--portfolio .mv-card__title {
    font-weight: 700;
}

.mv-cards--portfolio .mv-card__text li {
    line-height: 26px;
}

.mv-cards__more-row {
    display: flex;
    justify-content: flex-end;
}

.mv-site .mv-cards__more {
    border-radius: 3px;
    font-size: 20px;
}

.mv-site .mv-cards__more::after {
    content: "";
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-left: 0.2em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.mv-card--more {
    display: none;
}

.mv-cards__more[hidden] {
    display: none;
}

@media (max-width: 980px) {
    .mv-cards:not(.mv-cards--portfolio) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------- testimonials */

.mv-block--testimonials .mv-row {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* The arrows belong to the whole yellow strip, as on the old site (Divi slider over the full width):
   the slider box itself is not their positioning parent, and the strip clips them while they wait
   outside it. */
.mv-block--testimonials {
    overflow: hidden;
}

.mv-block--testimonials .mv-row,
.mv-block--testimonials .mv-testimonials {
    position: static;
}

/* Desktop: the old slider text column is min(70.4% of the window, 1080 px) wide with 8% of that as side
   space (measured at 1024, 1280, 1440 and 1920 px, 20 October 2026); the row of 1080 px made the
   quotes one line shorter. Phones already matched and keep the row. Guarded by SliderArrowTests. */
/* From 768 px the old strip had 20 px section space plus 5 px row space around its 40 px of text
   space, 15 px more per side than the "small" block space plus this row; on a phone the heights already
   match (measured 20 October 2026). */
@media (min-width: 768px) {
    .mv-block--testimonials .mv-row {
        padding-top: 55px;
        padding-bottom: 55px;
    }
}

@media (min-width: 981px) {
    .mv-block--testimonials .mv-testimonials {
        --mv-testimonials-width: min(70.4vw, 1080px);
        width: var(--mv-testimonials-width);
        max-width: 100%;
        margin: 0 auto;
        padding: 0 calc(var(--mv-testimonials-width) * 0.08);
    }
}

.mv-testimonials {
    position: relative;
    padding: 0 8%;
    color: #ffffff;
    text-align: center;
}

.mv-testimonial {
    display: none;
    margin: 0;
}

.mv-testimonial.is-active {
    display: block;
}

.mv-testimonial__quote {
    margin: 0;
    padding: 0;
    border: 0;
}

.mv-site .mv-testimonial__quote p {
    padding-bottom: 17px;
    color: #ffffff;
    font-size: 17px;
    line-height: 28.5px;
}

.mv-testimonial__author {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mv-testimonial__name {
    padding: 20px 0 10px;
    font-family: "Great Vibes", handwriting;
    font-size: 32px;
    line-height: 26px;
}

.mv-testimonial__company {
    font-size: 15px;
}

.mv-slider__arrow {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, left 0.2s ease-in-out, right 0.2s ease-in-out;
}

/* Measured on the old site (Divi .et-pb-arrow-prev/next, 20 October 2026): a 48 px arrow waits 22 px
   outside the strip and slides 22 px into it in 0.2 s ease-in-out while the pointer is on the strip.
   Guarded by SliderArrowTests. */
.mv-slider__arrow--prev { left: -22px; }
.mv-slider__arrow--next { right: -22px; }

.mv-block--testimonials:hover .mv-slider__arrow,
.mv-slider__arrow:focus-visible {
    opacity: 1;
}

.mv-block--testimonials:hover .mv-slider__arrow--prev,
.mv-slider__arrow--prev:focus-visible { left: 22px; }

.mv-block--testimonials:hover .mv-slider__arrow--next,
.mv-slider__arrow--next:focus-visible { right: 22px; }

/* Touch has no hover: the arrows stay visible just inside the strip, clear of the text. */
@media (max-width: 980px) {
    .mv-slider__arrow {
        opacity: 1;
    }

    .mv-slider__arrow--prev,
    .mv-block--testimonials:hover .mv-slider__arrow--prev { left: 4px; }

    .mv-slider__arrow--next,
    .mv-block--testimonials:hover .mv-slider__arrow--next { right: 4px; }
}

/* ---------------------------------------------------------------- form (the contact form of the old site) */

.mv-form .vsi-form__fields {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
}

.mv-form .vsi-form__field {
    position: relative;
    flex: 0 0 100%;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #ffffff;
}

.mv-form .vsi-form__field--w50 {
    flex: 0 0 calc(50% - 15px);
}

.mv-form .vsi-form__field--submit,
.mv-form .vsi-form__field--captcha {
    padding: 0;
    background: transparent;
}

.mv-form .vsi-form__field--submit {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
}

.mv-form .vsi-form__label {
    position: absolute;
    top: 18px;
    left: 10px;
    color: #666666;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9em;
    pointer-events: none;
    transition: top 0.15s, font-size 0.15s;
}

/* The label moves into the top right corner as soon as the field has focus or a value (site.js sets mv-filled). */
.mv-form .vsi-form__field:focus-within .vsi-form__label,
.mv-form .vsi-form__field.mv-filled .vsi-form__label {
    top: 0;
    right: 7px;
    left: auto;
    color: #aaaaaa;
    font-size: 14px;
}

.mv-form .vsi-form__input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #666666;
    font-family: var(--mv-font);
    font-size: 16px;
    outline: none;
}

.mv-form .vsi-form-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mv-form textarea.vsi-form__input {
    height: auto;
    min-height: 250px;
    padding: 10px 0;
    resize: vertical;
}

.mv-site .mv-form .vsi-form__button {
    padding: 10px 30px;
    border: 0;
    border-radius: 5px;
    background-color: var(--mv-yellow);
    color: #ffffff;
    font-family: var(--mv-font);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.mv-form .vsi-form__message {
    display: block;
    margin-top: 25px;
    color: #ffffff;
}

.mv-form .vsi-form__field .vsi-form__message {
    margin-top: 4px;
    color: #c0392b;
    font-size: 13px;
}

@media (max-width: 767px) {
    .mv-form .vsi-form__field--w50 {
        flex: 0 0 100%;
    }
}

/* ---------------------------------------------------------------- map */

.mv-block--map .vsi-map {
    display: block;
    width: 100%;
    height: 40vh;
    max-height: 500px;
    border: 0;
}

/* ---------------------------------------------------------------- blog, posts, search, 404 */

.mv-list__row {
    display: flex;
    gap: 5.5%;
}

.mv-list__main {
    flex: 0 0 73.625%;
    min-width: 0;
}

.mv-sidebar {
    flex: 0 0 20.875%;
    min-width: 0;
}

.mv-list--archive {
    padding-top: 0;
}

.mv-list--archive .mv-list__row {
    padding-top: 58px;
}

.mv-list--archive .mv-sidebar {
    padding-left: 30px;
    border-left: 1px solid #e2e2e2;
}

/* The archive template (category, search, 404) set its sidebar headings in 26 px, the blog page in 23 px. */
.mv-site .mv-list--archive .mv-widget__title {
    font-size: 26px;
}

.mv-post-item {
    margin-bottom: 60px;
}

.mv-post-item__image {
    display: block;
    margin-bottom: 30px;
    line-height: 0;
}

.mv-post-item__image img {
    width: 100%;
}

/* The old theme cut a list photo to 1080 x 675 when it was at least that large, and showed a smaller one whole. */
.mv-post-item__image--crop img {
    aspect-ratio: 1080 / 675;
    object-fit: cover;
}

.mv-post-item__title a {
    color: var(--mv-heading);
}

.mv-site .mv-post-item__title {
    font-size: 26px;
    line-height: 1em;
}

.mv-post-meta {
    margin-bottom: 6px;
    font-size: 15px;
}

.mv-site .mv-post-meta {
    padding-bottom: 0;
}

/* Category, search and 404 (the Divi archive template): a smaller meta line with room under it. */
.mv-site .mv-list--archive .mv-post-meta {
    padding-bottom: 15px;
    font-size: 14px;
}

.mv-post-meta a {
    color: var(--mv-text);
}

.mv-post__title {
    line-height: 1.38em;
}

.mv-site .mv-post__title {
    font-size: 26px;
}

.mv-post .mv-post-meta {
    padding-bottom: 1em;
}

/* The full post keeps its photos the way it was written, never cut off. */
.mv-post__content img {
    height: auto;
}

.mv-pager {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.mv-pager__newer {
    margin-left: auto;
}

.mv-widget {
    margin-bottom: 30px;
}

.mv-site .mv-widget__title {
    font-size: 23px;
}

.mv-site .mv-widget__list {
    padding: 0;
    list-style: none;
}

.mv-widget__list li {
    margin-bottom: 0.5em;
    line-height: 1.9em;
}

.mv-widget__list a {
    color: var(--mv-text);
}

.mv-search {
    position: relative;
    display: flex;
}

.mv-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0.7em;
    border: 1px solid #dddddd;
    border-radius: 3px 0 0 3px;
    color: #666666;
    font-family: var(--mv-font);
    font-size: 16px;
}

.mv-search__button {
    flex: 0 0 auto;
    height: 40px;
    padding: 0.7em;
    border: 1px solid #dddddd;
    border-left: 0;
    border-radius: 0 3px 3px 0;
    background-color: #dddddd;
    color: #666666;
    font-family: var(--mv-font);
    font-size: 14px;
    cursor: pointer;
}

.mv-not-found__title {
    padding-bottom: 20px;
}

@media (max-width: 980px) {
    .mv-post-item {
        margin-bottom: 42px;
    }

    .mv-list__row {
        flex-direction: column;
        gap: 30px;
    }

    .mv-list__main,
    .mv-sidebar {
        flex: 1 1 auto;
        width: 100%;
    }

    .mv-list--archive .mv-sidebar {
        padding-left: 0;
        border-left: 0;
    }

    /* On a phone the archive sidebar follows the last post directly and the footer follows the sidebar. */
    .mv-list--archive .mv-list__row {
        gap: 0;
    }

    .mv-site .mv-list--archive {
        padding-bottom: 0;
    }
}

/* ---------------------------------------------------------------- footer */

.mv-footer {
    padding: var(--mv-section-space) 0 10px;
    background-color: var(--mv-footer-bg);
    color: var(--mv-footer-text);
    text-align: center;
}

.mv-site .mv-footer__heading {
    padding: 5px 0 10px;
    color: var(--mv-footer-heading);
    font-size: 16px;
}

.mv-footer__inner {
    font-size: 14px;
    line-height: 1.6em;
}

.mv-site .mv-footer__text {
    padding-bottom: 14px;
    color: var(--mv-footer-text);
}

.mv-site .mv-footer__menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.3em;
    padding: 1em 0;
}

.mv-site .mv-footer__menu a {
    color: var(--mv-footer-link);
    font-weight: 600;
}

.mv-site .mv-footer__menu a:hover {
    color: var(--mv-footer-link-hover);
}

.mv-site .mv-footer__social {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-bottom: 0;
}

.mv-footer__social img {
    width: 30px;
    height: 30px;
}

/* A 44 x 44 touch target around the 30 px icon of the old site, without moving the icons (13A.6). */
.mv-footer__social a {
    display: block;
    margin: -7px;
    padding: 7px;
    line-height: 0;
}

.mv-footer__bottom {
    padding-top: 10px;
    padding-bottom: 0;
    color: var(--mv-footer-muted);
    line-height: 1.3em;
}

.mv-site .mv-footer__bottom a {
    color: var(--mv-footer-muted);
    font-weight: 700;
}

.mv-site .mv-footer__bottom a:hover {
    color: var(--mv-footer-link-hover);
}

/* The label of the test copy (SiteNoIndex on): small, in the bottom left corner, pinned to two edges
   only (all four would stretch it over the window, The Reef 19 October 2026) and never in the way of a
   click. Guarded by StagingLabelTests. */
.mv-hidden-label {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 1000;
    padding: 4px 10px;
    border: 1px solid #ffe69c;
    border-radius: 4px;
    background-color: #fff3cd;
    color: #664d03;
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
}

/* ---------------------------------------------------------------- touch */

/* Phones and tablets: every tap target at least 44 px (WCAG 2.5.8) without moving anything. The
   search field grows to 44 px, the pager link gets a taller hit area that a negative margin takes back,
   and the bordered language button of the tablet header gets an invisible hit area around it. Desktop
   (above 1024 px) keeps the drawing of the old site. Guarded by TouchTargetTests. */
@media (max-width: 1024px) {
    .mv-search__input,
    .mv-search__button {
        height: 44px;
    }

    .mv-pager a {
        display: inline-block;
        padding: 8px 0;
        margin: -8px 0;
    }

    .mv-lang {
        position: relative;
    }

    .mv-lang::after {
        content: "";
        position: absolute;
        inset: -12px -8px;
    }
}

/* ---------------------------------------------------------------- phone */

@media (max-width: 767px) {
    .mv-site .mv-post-item__title {
        font-size: 16px;
        line-height: 1em;
    }

    .mv-site ul,
    .mv-site ol {
        padding-bottom: 20px;
    }
}