:root {
    --mm-teal: #075f63;
    --mm-teal-dark: #064b4f;
    --mm-gold: #c89542;
    --mm-cream: #f8f5ef;
    --mm-cream-light: #fcfaf6;
    --mm-soft-green: #eef4f1;
    --mm-text: #123c42;
    --mm-text-muted: #5d7073;
    --mm-white: #ffffff;
    --mm-header-height: 104px;
    --mm-container: 1460px;
    --mm-shadow: 0 14px 40px rgba(21, 55, 58, .10);
    --mm-transition: .22s ease;
}

/* -------- HEADER -------- */

.mm-site-header {
    position: relative;
    z-index: 999;
    width: 100%;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid rgba(18,60,66,.06);
}

.mm-header-inner {
    width: min(calc(100% - 64px), var(--mm-container));
    min-height: var(--mm-header-height);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 350px) 1fr auto;
    align-items: center;
    gap: 42px;
}

.mm-header-logo {
    display: block;
    line-height: 0;
}

.mm-header-logo img {
    display: block;
    width: min(100%, 330px);
    height: auto;
    max-height: 86px;
    object-fit: contain;
    object-position: left center;
}

.mm-desktop-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(22px, 2.1vw, 42px);
    height: 100%;
}

.mm-nav-item {
    position: relative;
    height: var(--mm-header-height);
    display: flex;
    align-items: center;
}

.mm-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 0;
    color: var(--mm-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color var(--mm-transition);
}

.mm-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--mm-gold);
    transition: right var(--mm-transition);
}

.mm-nav-link:hover,
.mm-nav-link:focus {
    color: var(--mm-teal);
}

.mm-nav-link:hover::after,
.mm-nav-link:focus::after,
body.home .mm-desktop-nav > .mm-nav-link:first-child::after {
    right: 0;
}

.mm-chevron {
    color: var(--mm-teal);
    font-size: 16px;
    transform: translateY(-1px);
}

/* Dropdown */

.mm-dropdown {
    position: absolute;
    left: 50%;
    top: calc(100% - 15px);
    width: 330px;
    padding: 12px;
    background: var(--mm-white);
    border: 1px solid rgba(18,60,66,.08);
    border-radius: 12px;
    box-shadow: var(--mm-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition:
        opacity var(--mm-transition),
        visibility var(--mm-transition),
        transform var(--mm-transition);
}

.mm-has-dropdown:hover .mm-dropdown,
.mm-has-dropdown:focus-within .mm-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.mm-dropdown a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 9px 13px;
    border-radius: 7px;
    color: var(--mm-text);
    font-size: 14px;
    line-height: 1.25;
    text-decoration: none !important;
    transition: background var(--mm-transition), color var(--mm-transition);
}

.mm-dropdown a:hover,
.mm-dropdown a:focus {
    color: var(--mm-teal);
    background: var(--mm-cream);
}

.mm-dropdown-highlight {
    margin-top: 5px;
    border-top: 1px solid rgba(18,60,66,.08);
}

.mm-dropdown-highlight span {
    margin-left: 12px;
    padding: 4px 7px 3px;
    border-radius: 999px;
    background: var(--mm-gold);
    color: white;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
}

/* CTA */

.mm-header-cta {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 23px;
    border-radius: 5px;
    background: var(--mm-teal);
    color: white !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1;
    text-decoration: none !important;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(7,95,99,.13);
    transition:
        background var(--mm-transition),
        transform var(--mm-transition),
        box-shadow var(--mm-transition);
    white-space: nowrap;
}

.mm-header-cta:hover,
.mm-header-cta:focus {
    background: var(--mm-teal-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(7,95,99,.18);
}

.mm-calendar-icon {
    width: 18px;
    height: 17px;
    border: 1.7px solid var(--mm-gold);
    border-radius: 2px;
    position: relative;
}

.mm-calendar-icon::before,
.mm-calendar-icon::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 2px;
    height: 6px;
    border-radius: 2px;
    background: var(--mm-gold);
}

.mm-calendar-icon::before { left: 3px; }
.mm-calendar-icon::after { right: 3px; }

.mm-calendar-icon {
    background:
        linear-gradient(var(--mm-gold),var(--mm-gold)) 3px 6px/10px 1px no-repeat;
}

/* Mobile button */

.mm-menu-button {
    display: none;
    width: 46px;
    height: 46px;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mm-menu-button span {
    display: block;
    width: 26px;
    height: 2px;
    margin: 5px auto;
    background: var(--mm-text);
    transition: transform var(--mm-transition), opacity var(--mm-transition);
}

.mm-site-header.mm-menu-open .mm-menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mm-site-header.mm-menu-open .mm-menu-button span:nth-child(2) {
    opacity: 0;
}
.mm-site-header.mm-menu-open .mm-menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

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

/* Responsive */

@media (max-width: 1180px) {
    .mm-header-inner {
        width: min(calc(100% - 40px), var(--mm-container));
        grid-template-columns: minmax(210px, 285px) 1fr auto;
        gap: 24px;
    }

    .mm-desktop-nav {
        gap: 22px;
    }

    .mm-nav-link {
        font-size: 14px;
    }

    .mm-header-cta {
        padding-inline: 17px;
        font-size: 12px;
    }
}

@media (max-width: 1024px) {
    :root {
        --mm-header-height: 84px;
    }

    .mm-header-inner {
        grid-template-columns: 1fr auto auto;
        width: min(calc(100% - 32px), var(--mm-container));
        gap: 12px;
    }

    .mm-header-logo img {
        width: 245px;
        max-height: 68px;
    }

    .mm-desktop-nav {
        display: none;
    }

    .mm-menu-button {
        display: block;
    }

    .mm-header-cta {
        min-height: 44px;
        padding: 0 15px;
    }

    .mm-mobile-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        background: var(--mm-white);
        border-top: 1px solid rgba(18,60,66,.06);
        opacity: 0;
        transition: max-height .38s ease, opacity .25s ease;
    }

    .mm-site-header.mm-menu-open .mm-mobile-menu {
        max-height: 900px;
        opacity: 1;
        box-shadow: var(--mm-shadow);
    }

    .mm-mobile-menu-inner {
        width: min(calc(100% - 32px), 760px);
        margin: 0 auto;
        padding: 16px 0 24px;
    }

    .mm-mobile-menu-inner > a,
    .mm-mobile-services {
        width: 100%;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 4px;
        border: 0;
        border-bottom: 1px solid rgba(18,60,66,.08);
        background: transparent;
        color: var(--mm-text);
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        text-decoration: none !important;
        cursor: pointer;
    }

    .mm-mobile-submenu {
        display: none;
        margin: 10px 0 12px;
        padding: 12px;
        background: var(--mm-white);
        border: 1px solid rgba(18,60,66,.08);
        border-radius: 12px;
        box-shadow: var(--mm-shadow);
    }

    .mm-mobile-services.is-open + .mm-mobile-submenu {
        display: block;
    }

    .mm-mobile-submenu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 42px;
        padding: 9px 13px;
        border-radius: 7px;
        color: var(--mm-text);
        font-size: 14px;
        line-height: 1.25;
        text-decoration: none !important;
        transition: background var(--mm-transition), color var(--mm-transition);
    }

    .mm-mobile-submenu a:hover,
    .mm-mobile-submenu a:focus {
        color: var(--mm-teal);
        background: var(--mm-cream);
    }

    .mm-mobile-submenu a:last-child {
        margin-top: 5px;
        border-top: 1px solid rgba(18,60,66,.08);
    }

    .mm-mobile-submenu strong {
        margin-left: 12px;
        padding: 4px 7px 3px;
        border-radius: 999px;
        background: var(--mm-gold);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .mm-mobile-cta {
        justify-content: center !important;
        margin-top: 18px;
        border: 0 !important;
        border-radius: 5px;
        background: var(--mm-teal) !important;
        color: white !important;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
}

@media (max-width: 680px) {
    .mm-header-inner {
        min-height: 74px;
    }

    .mm-header-logo img {
        width: 185px;
        max-height: 58px;
    }

    .mm-header-cta {
        display: none;
    }

    .mm-header-inner {
        grid-template-columns: 1fr auto;
    }
}


/* =========================================================
   HERO
   Shortcode: [mm_hero]
   ========================================================= */

.mm-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 15%, rgba(200,149,66,.10), transparent 28%),
        linear-gradient(105deg, #fbf8f2 0%, #f7f2e9 56%, #f4eee4 100%);
}

.mm-hero::before {
    content: "MM";
    position: absolute;
    left: -35px;
    bottom: -105px;
    color: rgba(7,95,99,.035);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(220px, 23vw, 420px);
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
}

.mm-hero-inner {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 64px), var(--mm-container));
    min-height: 650px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .93fr) minmax(500px, 1.07fr);
    align-items: center;
    gap: clamp(55px, 6vw, 105px);
    padding: 66px 0 72px;
}

.mm-hero-copy {
    max-width: 680px;
    padding-left: clamp(0px, 2vw, 28px);
}

.mm-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 23px;
    color: var(--mm-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.mm-hero-kicker::before {
    content: "";
    width: 38px;
    height: 1px;
    background: var(--mm-gold);
}

.mm-hero h1 {
    margin: 0;
    color: var(--mm-teal);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(52px, 4.3vw, 76px);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: .98;
}

.mm-hero h1 em {
    color: var(--mm-gold);
    font-weight: 400;
}

.mm-hero-lead {
    max-width: 610px;
    margin: 29px 0 0;
    color: #53676a;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;
}

.mm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 35px;
}

.mm-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1;
    text-decoration: none !important;
    text-transform: uppercase;
    transition:
        background var(--mm-transition),
        border-color var(--mm-transition),
        color var(--mm-transition),
        transform var(--mm-transition);
}

.mm-btn:hover {
    transform: translateY(-1px);
}

.mm-btn-primary {
    background: var(--mm-teal);
    color: white !important;
}

.mm-btn-primary:hover {
    background: var(--mm-teal-dark);
}

.mm-btn-secondary {
    border-color: rgba(7,95,99,.35);
    background: rgba(255,255,255,.28);
    color: var(--mm-teal) !important;
}

.mm-btn-secondary:hover {
    border-color: var(--mm-teal);
    background: white;
}

.mm-hero-signature {
    display: flex;
    gap: 10px;
    margin-top: 38px;
    color: var(--mm-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-style: italic;
}

.mm-hero-signature span:not(:last-child)::after {
    content: "•";
    margin-left: 10px;
    color: rgba(200,149,66,.55);
    font-size: 10px;
    vertical-align: middle;
}

.mm-hero-visual {
    position: relative;
    align-self: stretch;
    min-height: 510px;
    display: flex;
    align-items: center;
}

.mm-hero-image-wrap {
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;
    border-radius: 4px 4px 78px 4px;
    box-shadow: 0 28px 60px rgba(35,58,58,.13);
}

.mm-hero-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(248,245,239,.10), transparent 28%);
    pointer-events: none;
}

.mm-hero-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 40%;
}

.mm-hero-visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 210px;
    height: 210px;
    right: -58px;
    top: 12px;
    border: 1px solid rgba(200,149,66,.35);
    border-radius: 50%;
}

.mm-hero-note {
    position: absolute;
    left: -35px;
    bottom: 35px;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 19px;
    background: rgba(255,255,255,.94);
    border-left: 3px solid var(--mm-gold);
    box-shadow: 0 12px 30px rgba(18,60,66,.10);
    color: var(--mm-teal);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-style: italic;
}

.mm-hero-note-line {
    width: 26px;
    height: 1px;
    background: var(--mm-gold);
}

@media (max-width: 1100px) {
    .mm-hero-inner {
        grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
        gap: 45px;
    }

    .mm-hero-image-wrap {
        height: 500px;
    }
}

@media (max-width: 900px) {
    .mm-hero-inner {
        width: min(calc(100% - 40px), 760px);
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 42px;
        padding: 55px 0 62px;
    }

    .mm-hero-copy {
        max-width: 700px;
        padding-left: 0;
        text-align: center;
        margin: 0 auto;
    }

    .mm-hero-kicker,
    .mm-hero-actions,
    .mm-hero-signature {
        justify-content: center;
    }

    .mm-hero-lead {
        margin-inline: auto;
    }

    .mm-hero-visual {
        width: 100%;
        min-height: auto;
        max-width: 700px;
        margin: 0 auto;
    }

    .mm-hero-image-wrap {
        height: min(68vw, 520px);
    }

    .mm-hero-note {
        left: 20px;
    }
}

@media (max-width: 600px) {
    .mm-hero-inner {
        width: calc(100% - 30px);
        gap: 32px;
        padding: 39px 0 44px;
    }

    .mm-hero-kicker {
        margin-bottom: 17px;
        font-size: 10px;
        letter-spacing: .12em;
    }

    .mm-hero-kicker::before {
        width: 25px;
    }

    .mm-hero h1 {
        font-size: clamp(41px, 12vw, 55px);
        line-height: 1.02;
    }

    .mm-hero-lead {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.65;
    }

    .mm-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 28px;
    }

    .mm-btn {
        width: 100%;
    }

    .mm-hero-signature {
        margin-top: 27px;
        font-size: 14px;
    }

    .mm-hero-image-wrap {
        height: 430px;
        border-radius: 4px 4px 45px 4px;
    }

    .mm-hero-image-wrap img {
        object-position: 50% 36%;
    }

    .mm-hero-note {
        left: 12px;
        right: 12px;
        bottom: 13px;
        justify-content: center;
        font-size: 12px;
    }

    .mm-hero-visual::before {
        display: none;
    }
}


/* =========================================================
   HERO v1.3 — mekani prijelaz fotografije u pozadinu
   ========================================================= */

@media (min-width: 901px) {
    .mm-hero {
        min-height: 640px;
        background:
            radial-gradient(circle at 15% 28%, rgba(255,255,255,.96), transparent 48%),
            linear-gradient(90deg, #fbf8f2 0%, #f8f4ec 46%, #f3ede3 100%);
    }

    .mm-hero-inner {
        position: relative;
        display: block;
        min-height: 640px;
        padding: 0;
    }

    .mm-hero-copy {
        position: relative;
        z-index: 4;
        width: 49%;
        max-width: 680px;
        padding: 84px 0 78px clamp(0px, 1.4vw, 22px);
    }

    .mm-hero-visual {
        position: absolute;
        z-index: 1;
        top: 0;
        right: calc((100vw - min(100vw - 64px, var(--mm-container))) / -2);
        bottom: 0;
        width: min(64vw, 980px);
        min-height: 100%;
        display: block;
        overflow: hidden;
    }

    .mm-hero-image-wrap {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.10) 7%,
            rgba(0,0,0,.50) 18%,
            #000 34%,
            #000 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.10) 7%,
            rgba(0,0,0,.50) 18%,
            #000 34%,
            #000 100%
        );
    }

    .mm-hero-image-wrap::before {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        background:
            linear-gradient(
                90deg,
                rgba(248,245,239,.95) 0%,
                rgba(248,245,239,.58) 13%,
                rgba(248,245,239,.16) 27%,
                rgba(248,245,239,0) 45%
            );
        pointer-events: none;
    }

    .mm-hero-image-wrap::after {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.06) 0%,
                transparent 58%,
                rgba(244,238,228,.11) 100%
            );
        pointer-events: none;
    }

    .mm-hero-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 55% 43%;
        transform: scale(1.015);
    }

    .mm-hero-visual::before {
        display: none;
    }

    .mm-hero-note {
        z-index: 5;
        left: auto;
        right: 40px;
        bottom: 30px;
        background: rgba(255,255,255,.86);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-left: 2px solid var(--mm-gold);
        box-shadow: 0 10px 25px rgba(18,60,66,.08);
    }

    .mm-hero-signature {
        position: relative;
        z-index: 5;
    }
}

/* Tablet i mobitel: fotografija ostaje kao zaseban blok bez agresivnog reza. */
@media (max-width: 900px) {
    .mm-hero-image-wrap {
        border-radius: 0 0 42px 42px;
        box-shadow: 0 18px 40px rgba(35,58,58,.10);
    }

    .mm-hero-image-wrap::before {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(248,245,239,.10) 0%,
            transparent 72%,
            rgba(248,245,239,.18) 100%
        );
        pointer-events: none;
    }
}


/* HERO v1.4 — usklađen s odabranim prijedlogom */
:root {
    --mm-teal: #07545a;
    --mm-teal-dark: #06474c;
    --mm-gold: #c7923f;
    --mm-cream: #faf7f1;
    --mm-cream-light: #fdfbf7;
    --mm-soft-green: #edf3f0;
    --mm-text: #183f45;
    --mm-text-muted: #52696d;
}

.mm-hero::before,
.mm-hero-signature,
.mm-hero-note,
.mm-hero-visual::before {
    display: none !important;
}

.mm-hero {
    position: relative;
    overflow: hidden;
    background: #faf8f3;
}

.mm-hero-inner {
    position: relative;
    width: min(calc(100% - 64px), var(--mm-container));
    min-height: 620px;
    margin: 0 auto;
}

.mm-hero-copy {
    position: relative;
    z-index: 4;
    width: 49%;
    max-width: 660px;
    padding: 92px 0 82px clamp(0px, 1.2vw, 18px);
}

.mm-hero-kicker {
    display: block;
    margin: 0 0 20px;
    color: var(--mm-teal);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .30em;
    line-height: 1.4;
    text-transform: uppercase;
}

.mm-hero-kicker::before {
    display: none;
}

.mm-hero h1 {
    margin: 0;
    max-width: 650px;
    color: var(--mm-teal);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(56px, 4.35vw, 78px);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1.02;
}

.mm-hero h1 em {
    color: inherit;
    font-style: normal;
}

.mm-hero-divider {
    width: 72px;
    height: 2px;
    margin-top: 28px;
    background: var(--mm-gold);
}

.mm-hero-lead {
    max-width: 520px;
    margin: 23px 0 0;
    color: var(--mm-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
}

.mm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

.mm-btn {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .045em;
}

.mm-btn-primary {
    background: var(--mm-teal);
    color: #fff !important;
    box-shadow: none;
}

.mm-btn-primary:hover {
    background: var(--mm-teal-dark);
}

.mm-btn-secondary {
    border: 1px solid rgba(199,146,63,.72);
    background: rgba(255,255,255,.40);
    color: var(--mm-teal) !important;
}

.mm-btn-secondary:hover {
    border-color: var(--mm-gold);
    background: #fff;
}

.mm-btn-arrow {
    margin-left: 8px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.mm-hero-visual {
    position: absolute;
    z-index: 1;
    top: 0;
    right: calc((100vw - min(100vw - 64px, var(--mm-container))) / -2);
    bottom: 0;
    width: min(66vw, 1010px);
    min-height: 100%;
    display: block;
    overflow: hidden;
}

.mm-hero-image-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.13) 8%,
        rgba(0,0,0,.58) 20%,
        #000 35%,
        #000 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.13) 8%,
        rgba(0,0,0,.58) 20%,
        #000 35%,
        #000 100%
    );
}

.mm-hero-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(250,248,243,.98) 0%,
        rgba(250,248,243,.70) 12%,
        rgba(250,248,243,.23) 28%,
        rgba(250,248,243,0) 46%
    );
    pointer-events: none;
}

.mm-hero-image-wrap::after {
    display: none;
}

.mm-hero-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 53% 42%;
    transform: none;
}

@media (max-width: 900px) {
    .mm-hero-inner {
        width: min(calc(100% - 40px), 760px);
        display: grid;
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 52px 0 0;
    }

    .mm-hero-copy {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
        padding: 0 0 42px;
        text-align: center;
    }

    .mm-hero-kicker {
        font-size: 11px;
        letter-spacing: .22em;
    }

    .mm-hero-divider {
        margin: 24px auto 0;
    }

    .mm-hero-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .mm-hero-actions {
        justify-content: center;
    }

    .mm-hero-visual {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 0;
        margin: 0 auto;
    }

    .mm-hero-image-wrap {
        position: relative;
        inset: auto;
        height: min(74vw, 560px);
        -webkit-mask-image: none;
        mask-image: none;
    }

    .mm-hero-image-wrap::before {
        background: linear-gradient(
            180deg,
            rgba(250,248,243,.45) 0%,
            rgba(250,248,243,0) 18%
        );
    }

    .mm-hero-image-wrap img {
        object-position: 50% 39%;
    }
}

@media (max-width: 600px) {
    .mm-hero-inner {
        width: calc(100% - 30px);
        padding-top: 38px;
    }

    .mm-hero-copy {
        padding-bottom: 32px;
    }

    .mm-hero-kicker {
        margin-bottom: 15px;
        font-size: 9px;
        letter-spacing: .18em;
    }

    .mm-hero h1 {
        font-size: clamp(42px, 12vw, 56px);
        line-height: 1.02;
    }

    .mm-hero-divider {
        width: 58px;
        margin-top: 20px;
    }

    .mm-hero-lead {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.6;
    }

    .mm-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 25px;
    }

    .mm-btn {
        width: 100%;
    }

    .mm-hero-image-wrap {
        height: 440px;
    }
}


/* =========================================================
   HERO v1.5 — bliže odobrenom mockupu
   - vidljiv pacijent u mekoj sjeni
   - nježniji prijelaz fotografije
   - elegantniji naslov
   - tekst "Znanje. Iskustvo. Povjerenje." uz fotografiju
   ========================================================= */

.mm-hero h1 {
    font-family: "Iowan Old Style", "Baskerville", "Palatino Linotype",
                 "Book Antiqua", Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 4.45vw, 80px);
    line-height: .99;
    letter-spacing: -.042em;
}

.mm-hero-kicker {
    letter-spacing: .32em;
    font-weight: 500;
}

.mm-hero-lead {
    font-size: 17.5px;
    line-height: 1.62;
    max-width: 510px;
}

/* Fotografiju širimo ulijevo da se vidi pacijent kao u prijedlogu */
@media (min-width: 901px) {
    .mm-hero-copy {
        width: 47%;
        max-width: 640px;
        padding-top: 86px;
    }

    .mm-hero-visual {
        width: min(72vw, 1110px);
        right: calc((100vw - min(100vw - 64px, var(--mm-container))) / -2);
    }

    .mm-hero-image-wrap {
        /* Umjesto jakog reza, fotografija se postupno pojavljuje.
           Pacijent ostaje vidljiv u polusjeni. */
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.22) 5%,
            rgba(0,0,0,.72) 15%,
            #000 27%,
            #000 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.22) 5%,
            rgba(0,0,0,.72) 15%,
            #000 27%,
            #000 100%
        );
    }

    .mm-hero-image-wrap::before {
        background:
            linear-gradient(
                90deg,
                rgba(250,248,243,.98) 0%,
                rgba(250,248,243,.60) 8%,
                rgba(250,248,243,.14) 20%,
                rgba(250,248,243,0) 34%
            );
    }

    .mm-hero-image-wrap img {
        object-position: 46% 42%;
    }

    .mm-hero-script {
        position: absolute;
        z-index: 5;
        top: 150px;
        right: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        color: var(--mm-teal);
        font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
        font-size: 29px;
        font-weight: 400;
        line-height: 1.02;
        transform: rotate(-4deg);
        text-shadow: 0 1px 0 rgba(255,255,255,.35);
        opacity: .94;
        pointer-events: none;
    }

    .mm-hero-script::after {
        content: "";
        width: 58px;
        height: 1px;
        margin-top: 17px;
        margin-left: 18px;
        background: var(--mm-gold);
    }
}

@media (max-width: 900px) {
    .mm-hero-script {
        display: none;
    }
}


/* =========================================================
   HERO v1.6 — puna fotografija preko cijelog hero bloka
   kao na odobrenom vizualnom prijedlogu
   ========================================================= */

.mm-hero {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    background: #f8f5ef;
}

/* fotografija je sada stvarna pozadina cijelog hero područja */
.mm-hero-visual {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden;
    z-index: 0;
}

.mm-hero-image-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.mm-hero-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 44%;
    transform: none !important;
}

/* Glavni krem overlay – dovoljno jak za tekst, ali ostavlja pacijenta vidljivim */
.mm-hero-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(250,248,243,1) 0%,
            rgba(250,248,243,.98) 19%,
            rgba(250,248,243,.91) 31%,
            rgba(250,248,243,.68) 42%,
            rgba(250,248,243,.25) 52%,
            rgba(250,248,243,.02) 64%,
            rgba(250,248,243,0) 100%
        );
}

.mm-hero-image-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,0) 40%,
            rgba(248,245,239,.08) 100%
        );
}

/* sadržaj ostaje iznad fotografije */
.mm-hero-inner {
    position: relative;
    z-index: 4;
    width: min(calc(100% - 64px), var(--mm-container));
    min-height: 610px;
    margin: 0 auto;
    display: block;
}

.mm-hero-copy {
    position: relative;
    z-index: 5;
    width: 47%;
    max-width: 640px;
    padding: 77px 0 72px clamp(0px, 1vw, 14px);
}

/* Tipografija kao u originalnom prijedlogu */
.mm-hero-kicker {
    margin: 0 0 20px;
    color: var(--mm-teal);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
}

.mm-hero h1 {
    margin: 0;
    max-width: 620px;
    color: var(--mm-teal);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(54px, 4.05vw, 72px);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.03;
}

.mm-hero-divider {
    width: 68px;
    height: 2px;
    margin-top: 26px;
    background: var(--mm-gold);
}

.mm-hero-lead {
    max-width: 505px;
    margin-top: 22px;
    color: #244b50;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}

.mm-hero-actions {
    margin-top: 31px;
}

/* tekst uz doktoricu – bez dodatnih monograma */
.mm-hero-script {
    position: absolute;
    z-index: 6;
    top: 145px;
    right: 2.5vw;
    display: flex;
    flex-direction: column;
    color: var(--mm-teal);
    font-family: "Segoe Print", "Bradley Hand", cursive;
    font-size: 25px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.05;
    transform: rotate(-4deg);
    opacity: .88;
    pointer-events: none;
}

.mm-hero-script::after {
    content: "";
    width: 56px;
    height: 1px;
    margin: 17px 0 0 15px;
    background: var(--mm-gold);
}

/* Desktop crop: čuva i pacijenta lijevo i doktoricu desno */
@media (min-width: 1200px) {
    .mm-hero-image-wrap img {
        object-position: 52% 43%;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .mm-hero {
        min-height: auto;
    }

    .mm-hero-inner {
        width: min(calc(100% - 40px), 760px);
        min-height: auto;
        padding: 46px 0 0;
    }

    .mm-hero-copy {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
        padding: 0 0 38px;
        text-align: center;
    }

    .mm-hero-visual {
        position: relative !important;
        inset: auto !important;
        height: min(75vw, 550px) !important;
        min-height: 0 !important;
    }

    .mm-hero-image-wrap {
        position: absolute !important;
        inset: 0 !important;
    }

    .mm-hero-image-wrap::before {
        background:
            linear-gradient(
                180deg,
                rgba(250,248,243,.38) 0%,
                rgba(250,248,243,0) 22%
            );
    }

    .mm-hero-image-wrap img {
        object-position: 49% 40%;
    }

    .mm-hero-script {
        display: none;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .mm-hero-inner {
        width: calc(100% - 30px);
        padding-top: 34px;
    }

    .mm-hero h1 {
        font-size: clamp(42px, 12vw, 54px);
    }

    .mm-hero-lead {
        font-size: 15px;
    }

    .mm-hero-visual {
        height: 430px !important;
    }

    .mm-hero-image-wrap img {
        object-position: 51% 40%;
    }
}


/* =========================================================
   HERO v1.7 — REBUILD
   Bitno: originalna portretna fotografija se više NE rasteže
   s object-fit: cover. Čuvamo njezin horizontalni kadar kako bi
   pacijent ostao vidljiv, a doktorica bila prirodne veličine.
   ========================================================= */

@media (min-width: 901px) {

    .mm-hero {
        position: relative;
        min-height: 585px;
        overflow: hidden;
        background: #f8f5ef;
    }

    .mm-hero-inner {
        position: relative;
        z-index: 3;
        width: min(calc(100% - 64px), var(--mm-container));
        min-height: 585px;
        margin: 0 auto;
        display: block;
    }

    .mm-hero-copy {
        position: relative;
        z-index: 6;
        width: 44%;
        max-width: 610px;
        padding: 70px 0 64px 0;
    }

    .mm-hero-kicker {
        margin-bottom: 17px;
        font-family: "Montserrat", Arial, sans-serif;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .31em;
        color: #07545a;
    }

    .mm-hero h1 {
        max-width: 610px;
        margin: 0;
        font-family: "DM Serif Display", Georgia, serif;
        font-size: clamp(54px, 4vw, 70px);
        font-weight: 400;
        line-height: 1.02;
        letter-spacing: -.022em;
        color: #07545a;
    }

    .mm-hero-divider {
        width: 68px;
        height: 2px;
        margin-top: 23px;
        background: #c7923f;
    }

    .mm-hero-lead {
        max-width: 475px;
        margin-top: 21px;
        font-family: "Montserrat", Arial, sans-serif;
        font-size: 16px;
        line-height: 1.62;
        color: #244b50;
    }

    .mm-hero-actions {
        margin-top: 29px;
    }

    /*
     * Cijela fotografija zauzima desni dio, ali img zadržava
     * originalni omjer. To je ključna razlika od v1.6.
     */
    .mm-hero-visual {
        position: absolute !important;
        z-index: 1;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden;
        pointer-events: none;
    }

    .mm-hero-image-wrap {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .mm-hero-image-wrap img {
        position: absolute;
        z-index: 1;
        top: 50%;
        right: -1.5%;
        width: clamp(820px, 62vw, 1110px);
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: initial !important;
        object-position: initial !important;
        transform: translateY(-43%) !important;
    }

    /*
     * Krem ploha završava mekim prijelazom oko pacijenta.
     * Ne prekrivamo cijelu fotografiju bijelim slojem.
     */
    .mm-hero-image-wrap::before {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(
                90deg,
                #faf8f3 0%,
                #faf8f3 28%,
                rgba(250,248,243,.98) 34%,
                rgba(250,248,243,.90) 39%,
                rgba(250,248,243,.62) 44%,
                rgba(250,248,243,.22) 49%,
                rgba(250,248,243,0) 55%
            );
    }

    /* Diskretno zatamnjenje siluete pacijenta, bez umjetnog MM-a. */
    .mm-hero-image-wrap::after {
        content: "";
        position: absolute;
        z-index: 3;
        left: 37%;
        bottom: -17%;
        width: 23%;
        height: 72%;
        border-radius: 50% 50% 0 0;
        background: radial-gradient(
            ellipse at 45% 65%,
            rgba(31,38,38,.18) 0%,
            rgba(31,38,38,.08) 42%,
            rgba(31,38,38,0) 72%
        );
        filter: blur(16px);
        opacity: .65;
        pointer-events: none;
    }

    .mm-hero-script {
        position: absolute;
        z-index: 7;
        top: 142px;
        right: 2.4%;
        display: flex;
        flex-direction: column;
        color: #07545a;
        font-family: "Segoe Print", "Bradley Hand", cursive;
        font-size: 24px;
        font-style: italic;
        font-weight: 400;
        line-height: 1.02;
        transform: rotate(-4deg);
        opacity: .88;
    }

    .mm-hero-script::after {
        content: "";
        width: 52px;
        height: 1px;
        margin: 16px 0 0 15px;
        background: #c7923f;
    }
}

/* Širi desktop: malo više zraka kao na mockupu. */
@media (min-width: 1500px) {
    .mm-hero {
        min-height: 610px;
    }

    .mm-hero-inner {
        min-height: 610px;
    }

    .mm-hero-copy {
        padding-top: 76px;
    }

    .mm-hero-image-wrap img {
        width: 1080px;
        right: 0;
        transform: translateY(-43%) !important;
    }
}

/* Tablet/mobitel: ne pokušavamo imitirati desktopni overlap. */
@media (max-width: 900px) {
    .mm-hero-image-wrap img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        max-width: none;
        height: auto !important;
        object-fit: initial !important;
        transform: translate(-50%, -38%) !important;
    }

    .mm-hero-image-wrap::before {
        background: linear-gradient(
            180deg,
            rgba(250,248,243,.20) 0%,
            rgba(250,248,243,0) 24%
        );
    }

    .mm-hero-image-wrap::after {
        display: none;
    }
}


/* =========================================================
   HERO v1.8 — manja fotografija + više glave + više pacijenta
   ========================================================= */

@media (min-width: 901px) {

    /*
     * Fotografiju dodatno smanjujemo i spuštamo.
     * Cilj: cijela glava doktorice u kadru i više pacijenta lijevo.
     */
    .mm-hero-image-wrap img {
        top: 50% !important;
        right: 1.5% !important;
        width: clamp(700px, 53vw, 920px) !important;
        height: auto !important;
        max-width: none !important;
        transform: translateY(-39%) !important;
    }

    /*
     * Krem overlay završava ranije pa ostaje više vidljivog pacijenta.
     */
    .mm-hero-image-wrap::before {
        background:
            linear-gradient(
                90deg,
                #faf8f3 0%,
                #faf8f3 25%,
                rgba(250,248,243,.98) 30%,
                rgba(250,248,243,.86) 35%,
                rgba(250,248,243,.52) 40%,
                rgba(250,248,243,.16) 45%,
                rgba(250,248,243,0) 50%
            ) !important;
    }

    /*
     * Pacijent ostaje kao diskretna sjena, ali malo izraženija.
     */
    .mm-hero-image-wrap::after {
        left: 34% !important;
        bottom: -11% !important;
        width: 26% !important;
        height: 78% !important;
        background: radial-gradient(
            ellipse at 48% 60%,
            rgba(25,31,31,.25) 0%,
            rgba(25,31,31,.12) 40%,
            rgba(25,31,31,0) 74%
        ) !important;
        filter: blur(13px) !important;
        opacity: .78 !important;
    }

    /* Malo više mjesta desno za rukopisni tekst. */
    .mm-hero-script {
        top: 135px !important;
        right: 1.8% !important;
    }
}

@media (min-width: 1500px) {
    .mm-hero-image-wrap img {
        width: 900px !important;
        right: 1.5% !important;
        transform: translateY(-39%) !important;
    }
}


/* =========================================================
   HERO v1.9 — niži, manja fotografija, mekši rubovi
   ========================================================= */

@media (min-width: 901px) {

    .mm-hero {
        min-height: 500px !important;
        background: #faf8f3 !important;
    }

    .mm-hero-inner {
        min-height: 500px !important;
    }

    .mm-hero-copy {
        width: 45% !important;
        max-width: 600px !important;
        padding: 54px 0 50px 0 !important;
    }

    .mm-hero h1 {
        font-size: clamp(50px, 3.65vw, 66px) !important;
        line-height: 1.02 !important;
    }

    .mm-hero-kicker {
        margin-bottom: 15px !important;
    }

    .mm-hero-divider {
        margin-top: 20px !important;
    }

    .mm-hero-lead {
        margin-top: 18px !important;
        font-size: 15.5px !important;
        line-height: 1.58 !important;
        max-width: 470px !important;
    }

    .mm-hero-actions {
        margin-top: 24px !important;
    }

    /*
     * Fotografija je manja i više "sjedi" unutar heroa,
     * umjesto da agresivno puni cijelu desnu polovicu.
     */
    .mm-hero-image-wrap img {
        top: 50% !important;
        right: 2.2% !important;
        width: clamp(640px, 48vw, 820px) !important;
        height: auto !important;
        max-width: none !important;
        transform: translateY(-39%) !important;
    }

    /*
     * Meki prijelaz na lijevom rubu fotografije.
     * Ovo uklanja tvrdi vertikalni rez.
     */
    .mm-hero-image-wrap {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.10) 7%,
            rgba(0,0,0,.42) 15%,
            rgba(0,0,0,.82) 23%,
            #000 31%,
            #000 100%
        ) !important;
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.10) 7%,
            rgba(0,0,0,.42) 15%,
            rgba(0,0,0,.82) 23%,
            #000 31%,
            #000 100%
        ) !important;
    }

    /*
     * Krem fade prema fotografiji, blaži nego prije.
     */
    .mm-hero-image-wrap::before {
        background:
            linear-gradient(
                90deg,
                #faf8f3 0%,
                #faf8f3 24%,
                rgba(250,248,243,.96) 29%,
                rgba(250,248,243,.76) 35%,
                rgba(250,248,243,.42) 40%,
                rgba(250,248,243,.12) 45%,
                rgba(250,248,243,0) 50%
            ) !important;
    }

    /*
     * Uklanjamo umjetno zatamnjenje koje je znalo napraviti
     * "fleku" preko pacijenta.
     */
    .mm-hero-image-wrap::after {
        display: none !important;
    }

    /*
     * Desni dio dobiva mekani završetak kao na vizualnom prijedlogu.
     */
    .mm-hero-visual {
        border-radius: 0 0 0 54px !important;
        overflow: hidden !important;
    }

    .mm-hero-script {
        top: 112px !important;
        right: 2.4% !important;
        font-size: 22px !important;
    }
}

@media (min-width: 1500px) {
    .mm-hero {
        min-height: 520px !important;
    }

    .mm-hero-inner {
        min-height: 520px !important;
    }

    .mm-hero-image-wrap img {
        width: 800px !important;
        right: 2.4% !important;
        transform: translateY(-39%) !important;
    }
}


/* =========================================================
   HERO v2.0 — MATCH NA REFERENCU
   Nema tvrdog reza. Fotografija počinje duboko ispod teksta,
   pacijent se vidi kao sjena, doktorica ostaje manja i prirodna.
   ========================================================= */

@media (min-width: 901px) {

    .mm-hero {
        min-height: 505px !important;
        background: #faf8f3 !important;
    }

    .mm-hero-inner {
        min-height: 505px !important;
    }

    .mm-hero-copy {
        width: 43% !important;
        max-width: 575px !important;
        padding: 58px 0 52px 12px !important;
    }

    .mm-hero h1 {
        font-size: clamp(49px, 3.55vw, 64px) !important;
        line-height: 1.01 !important;
        max-width: 570px !important;
    }

    .mm-hero-kicker {
        margin-bottom: 16px !important;
    }

    .mm-hero-divider {
        margin-top: 20px !important;
    }

    .mm-hero-lead {
        max-width: 455px !important;
        margin-top: 18px !important;
        font-size: 15.5px !important;
        line-height: 1.58 !important;
    }

    .mm-hero-actions {
        margin-top: 25px !important;
    }

    /* cijeli hero je foto-platno; nema desnog pravokutnika */
    .mm-hero-visual {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .mm-hero-image-wrap {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        /* važno: uklanja masku koja je pravila vertikalni rez */
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    /*
     * Originalna fotografija je portretna.
     * Držimo je kao samostalni image layer, umjesto cover pozadine.
     * Pomaknuta je dovoljno lijevo da se pacijent vidi između teksta i doktorice.
     */
    .mm-hero-image-wrap img {
        position: absolute !important;
        z-index: 1 !important;
        top: 50% !important;
        right: 3.5% !important;
        width: clamp(690px, 50vw, 850px) !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: initial !important;
        object-position: initial !important;
        transform: translateY(-38.5%) !important;
    }

    /*
     * Ovo radi prijelaz kao na mockupu:
     * krem je potpuno čist iza teksta, a zatim se fotografija postepeno otvara.
     * Nema nikakvog ravnog ruba.
     */
    .mm-hero-image-wrap::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 4 !important;
        inset: 0 !important;
        pointer-events: none !important;
        background:
            linear-gradient(
                90deg,
                #faf8f3 0%,
                #faf8f3 24%,
                rgba(250,248,243,.995) 29%,
                rgba(250,248,243,.97) 33%,
                rgba(250,248,243,.88) 37%,
                rgba(250,248,243,.68) 41%,
                rgba(250,248,243,.42) 45%,
                rgba(250,248,243,.20) 49%,
                rgba(250,248,243,.07) 53%,
                rgba(250,248,243,0) 58%
            ) !important;
    }

    /* bez umjetnih sjena/fleka */
    .mm-hero-image-wrap::after {
        display: none !important;
    }

    .mm-hero-script {
        top: 116px !important;
        right: 3.0% !important;
        font-size: 22px !important;
        line-height: 1.03 !important;
    }
}

@media (min-width: 1450px) {
    .mm-hero {
        min-height: 520px !important;
    }

    .mm-hero-inner {
        min-height: 520px !important;
    }

    .mm-hero-image-wrap img {
        width: 830px !important;
        right: 4.5% !important;
        transform: translateY(-38.5%) !important;
    }
}


/* =========================================================
   HERO v2.1 — desktop kompozicija izrađena iz originalne fotografije
   ========================================================= */

@media (min-width: 901px) {
    .mm-hero,
    .mm-hero-inner {
        min-height: 520px !important;
    }

    .mm-hero {
        background: #faf8f3 !important;
    }

    .mm-hero-copy {
        width: 42% !important;
        max-width: 575px !important;
        padding: 61px 0 54px 10px !important;
    }

    .mm-hero h1 {
        max-width: 560px !important;
        font-size: clamp(49px, 3.45vw, 63px) !important;
        line-height: 1.01 !important;
    }

    .mm-hero-lead {
        max-width: 455px !important;
        font-size: 15.5px !important;
        line-height: 1.6 !important;
    }

    .mm-hero-visual,
    .mm-hero-image-wrap {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .mm-hero-image-wrap::before,
    .mm-hero-image-wrap::after {
        display: none !important;
    }

    .mm-hero-image-wrap picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .mm-hero-image-wrap picture img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }

    .mm-hero-script {
        top: 126px !important;
        right: 3.2% !important;
        font-size: 22px !important;
    }
}

@media (max-width: 900px) {
    .mm-hero-image-wrap picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .mm-hero-image-wrap picture img {
        width: 100%;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 50% 38% !important;
        transform: none !important;
    }
}


/* =========================================================
   HERO v2.2 — manja fotografija, više pacijenta, bez desnog teksta,
   suptilan zeleni detalj u pozadini.
   ========================================================= */

.mm-hero-script {
    display: none !important;
}

@media (min-width: 901px) {
    .mm-hero,
    .mm-hero-inner {
        min-height: 500px !important;
    }

    .mm-hero-copy {
        width: 42% !important;
        max-width: 570px !important;
        padding: 56px 0 50px 10px !important;
    }

    .mm-hero h1 {
        font-size: clamp(48px, 3.35vw, 61px) !important;
        max-width: 550px !important;
    }

    .mm-hero-lead {
        max-width: 450px !important;
        font-size: 15.5px !important;
    }

    .mm-hero-actions {
        margin-top: 24px !important;
    }

    .mm-hero-image-wrap picture img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}


/* =========================================================
   HERO v2.3 — referenca: bez zelenih detalja, više pacijenta,
   doktorica manja i pomaknuta desno
   ========================================================= */

.mm-hero-script {
    display: none !important;
}

.mm-hero::before {
    display: none !important;
}

@media (min-width: 901px) {
    .mm-hero,
    .mm-hero-inner {
        min-height: 520px !important;
    }

    .mm-hero {
        background: #faf8f3 !important;
    }

    .mm-hero-copy {
        width: 41% !important;
        max-width: 560px !important;
        padding: 65px 0 56px 18px !important;
    }

    .mm-hero-kicker {
        margin-bottom: 17px !important;
    }

    .mm-hero h1 {
        max-width: 550px !important;
        font-size: clamp(50px, 3.55vw, 64px) !important;
        line-height: 1.01 !important;
    }

    .mm-hero-divider {
        margin-top: 22px !important;
    }

    .mm-hero-lead {
        max-width: 445px !important;
        margin-top: 19px !important;
        font-size: 15.5px !important;
        line-height: 1.6 !important;
    }

    .mm-hero-actions {
        margin-top: 26px !important;
    }

    .mm-hero-visual,
    .mm-hero-image-wrap,
    .mm-hero-image-wrap picture {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .mm-hero-image-wrap::before,
    .mm-hero-image-wrap::after {
        display: none !important;
    }

    .mm-hero-image-wrap picture img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }
}


/* =========================================================
   HERO v2.4 — manja stvarna fotografija, vidljiviji pacijent,
   vraćen suptilan zeleni detalj lijevo
   ========================================================= */

.mm-hero-script {
    display: none !important;
}

@media (min-width: 901px) {
    .mm-hero,
    .mm-hero-inner {
        min-height: 500px !important;
    }

    .mm-hero-copy {
        width: 41% !important;
        max-width: 555px !important;
        padding: 58px 0 50px 14px !important;
    }

    .mm-hero h1 {
        max-width: 545px !important;
        font-size: clamp(49px, 3.4vw, 62px) !important;
    }

    .mm-hero-lead {
        max-width: 445px !important;
        font-size: 15.5px !important;
    }

    .mm-hero-image-wrap picture img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }
}

/* HERO v2.5 — single original photo, medium scale, patient visible */
.mm-hero-script { display:none !important; }
@media (min-width:901px){
  .mm-hero,.mm-hero-inner{min-height:510px !important;}
  .mm-hero{background:#faf8f3 !important;}
  .mm-hero-copy{
    width:41% !important;
    max-width:565px !important;
    padding:60px 0 52px 16px !important;
  }
  .mm-hero h1{
    max-width:550px !important;
    font-size:clamp(50px,3.45vw,63px) !important;
    line-height:1.01 !important;
  }
  .mm-hero-lead{max-width:450px !important;}
  .mm-hero-visual,.mm-hero-image-wrap,.mm-hero-image-wrap picture{
    position:absolute !important; inset:0 !important;
    width:100% !important;height:100% !important;
    overflow:hidden !important;
  }
  .mm-hero-image-wrap::before,.mm-hero-image-wrap::after{display:none !important;}
  .mm-hero-image-wrap picture img{
    display:block !important;width:100% !important;height:100% !important;
    object-fit:cover !important;object-position:center center !important;
    transform:none !important;max-width:none !important;
  }
}


/* =========================================================
   HERO v2.6 — samo diskretan zeleni botanički detalj lijevo
   Sve ostalo ostaje identično v2.5.
   ========================================================= */

@media (min-width: 901px) {
    .mm-hero {
        position: relative !important;
        overflow: hidden !important;
    }

    .mm-hero::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: -22px !important;
        bottom: 24px !important;
        width: 145px !important;
        height: 270px !important;
        z-index: 1 !important;
        pointer-events: none !important;
        opacity: .28 !important;
        filter: blur(1.4px) !important;
        background:
            radial-gradient(ellipse at 37% 87%, rgba(103,130,101,.42) 0 17%, transparent 18%),
            radial-gradient(ellipse at 59% 73%, rgba(103,130,101,.38) 0 16%, transparent 17%),
            radial-gradient(ellipse at 32% 60%, rgba(103,130,101,.34) 0 15%, transparent 16%),
            radial-gradient(ellipse at 61% 47%, rgba(103,130,101,.31) 0 14%, transparent 15%),
            radial-gradient(ellipse at 39% 34%, rgba(103,130,101,.28) 0 13%, transparent 14%),
            linear-gradient(76deg,
                transparent 0 46%,
                rgba(92,119,91,.28) 47% 49%,
                transparent 50% 100%);
        transform: rotate(-8deg) !important;
        transform-origin: bottom left !important;
    }

    .mm-hero-copy {
        position: relative !important;
        z-index: 3 !important;
    }
}

@media (max-width: 900px) {
    .mm-hero::after {
        display: none !important;
    }
}


/* =========================================================
   HERO v2.7 — izraženiji, mekani botanički detalj lijevo
   Hero fotografija, tekst, gumbi i pozicije ostaju v2.6.
   ========================================================= */

@media (min-width: 901px) {
    .mm-hero::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: -18px !important;
        bottom: -18px !important;
        width: 205px !important;
        height: 360px !important;
        z-index: 2 !important;
        pointer-events: none !important;
        opacity: .42 !important;
        filter: blur(2.2px) !important;
        transform: rotate(-7deg) !important;
        transform-origin: bottom left !important;

        background:
            /* leaves */
            radial-gradient(ellipse 32px 68px at 31px 306px,
                rgba(108,132,101,.48) 0 52%, transparent 55%),
            radial-gradient(ellipse 35px 72px at 72px 272px,
                rgba(108,132,101,.44) 0 52%, transparent 55%),
            radial-gradient(ellipse 32px 66px at 39px 225px,
                rgba(108,132,101,.40) 0 52%, transparent 55%),
            radial-gradient(ellipse 31px 64px at 84px 191px,
                rgba(108,132,101,.37) 0 52%, transparent 55%),
            radial-gradient(ellipse 29px 59px at 54px 146px,
                rgba(108,132,101,.34) 0 52%, transparent 55%),
            radial-gradient(ellipse 27px 54px at 94px 112px,
                rgba(108,132,101,.30) 0 52%, transparent 55%),
            radial-gradient(ellipse 24px 48px at 71px 75px,
                rgba(108,132,101,.26) 0 52%, transparent 55%),

            /* stem */
            linear-gradient(72deg,
                transparent 0 45%,
                rgba(92,118,91,.34) 46% 48%,
                transparent 49% 100%) !important;

        -webkit-mask-image: linear-gradient(
            to right,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.88) 58%,
            rgba(0,0,0,.42) 82%,
            transparent 100%
        ) !important;
        mask-image: linear-gradient(
            to right,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.88) 58%,
            rgba(0,0,0,.42) 82%,
            transparent 100%
        ) !important;
    }

    .mm-hero-copy {
        position: relative !important;
        z-index: 4 !important;
    }
}

@media (max-width: 900px) {
    .mm-hero::after {
        display: none !important;
    }
}


/* =========================================================
   HERO v2.8 — stvarni botanički SVG detalj lijevo
   ========================================================= */

.mm-hero::after {
    display: none !important;
}

.mm-hero-botanical {
    display: none;
}

@media (min-width: 901px) {
    .mm-hero-botanical {
        display: block !important;
        position: absolute !important;
        z-index: 2 !important;
        left: -8px !important;
        bottom: 8px !important;
        width: 205px !important;
        height: auto !important;
        opacity: .38 !important;
        filter: blur(.35px) !important;
        transform: rotate(-7deg) !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    .mm-hero-copy {
        position: relative !important;
        z-index: 4 !important;
    }
}

@media (max-width: 900px) {
    .mm-hero-botanical {
        display: none !important;
    }
}


/* =========================================================
   HERO v2.9 — stvarni zamućeni zeleni detalj iz reference
   ========================================================= */

@media (min-width: 901px) {
    .mm-hero-botanical {
        display: block !important;
        position: absolute !important;
        z-index: 2 !important;
        left: -3px !important;
        bottom: 34px !important;
        width: 118px !important;
        height: auto !important;
        opacity: .72 !important;
        filter: blur(.55px) !important;
        transform: none !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    .mm-hero-copy {
        z-index: 4 !important;
    }
}

@media (max-width: 900px) {
    .mm-hero-botanical {
        display: none !important;
    }
}


/* =========================================================
   HERO v3.0 — čista podloga + pravi HTML tekst i buttoni
   ========================================================= */

.mm-hero::before,
.mm-hero::after,
.mm-hero-botanical,
.mm-hero-script {
    display: none !important;
}

@media (min-width: 901px) {
    .mm-hero {
        position: relative !important;
        min-height: 450px !important;
        overflow: hidden !important;
        background: #faf8f3 !important;
    }

    .mm-hero-inner {
        position: relative !important;
        z-index: 2 !important;
        width: min(calc(100% - 64px), var(--mm-container)) !important;
        min-height: 450px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .mm-hero-visual,
    .mm-hero-image-wrap,
    .mm-hero-image-wrap picture {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .mm-hero-image-wrap::before,
    .mm-hero-image-wrap::after {
        display: none !important;
    }

    .mm-hero-image-wrap picture img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }

    .mm-hero-copy {
        position: relative !important;
        z-index: 5 !important;
        width: 39% !important;
        max-width: 560px !important;
        padding: 58px 0 50px 16px !important;
    }

    .mm-hero-kicker {
        margin: 0 0 14px !important;
        color: var(--mm-teal) !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        letter-spacing: .30em !important;
        text-transform: uppercase !important;
    }

    .mm-hero h1 {
        margin: 0 !important;
        max-width: 540px !important;
        color: var(--mm-teal) !important;
        font-family: "DM Serif Display", Georgia, serif !important;
        font-size: clamp(48px, 3.35vw, 61px) !important;
        font-weight: 400 !important;
        line-height: 1.01 !important;
        letter-spacing: -.025em !important;
    }

    .mm-hero-divider {
        width: 68px !important;
        height: 2px !important;
        margin-top: 20px !important;
        background: var(--mm-gold) !important;
    }

    .mm-hero-lead {
        max-width: 450px !important;
        margin: 18px 0 0 !important;
        color: #244b50 !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 15.5px !important;
        line-height: 1.58 !important;
    }

    .mm-hero-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
        margin-top: 24px !important;
    }

    .mm-btn {
        min-height: 50px !important;
        padding: 0 22px !important;
        border-radius: 4px !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: .04em !important;
    }
}

@media (max-width: 900px) {
    .mm-hero-visual {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 420px !important;
    }

    .mm-hero-image-wrap picture img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 55% 45% !important;
    }
}


/* =========================================================
   HERO v3.1 — FULL WIDTH, bez smanjivanja podloge
   ========================================================= */

@media (min-width: 901px) {
    .mm-hero {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 0 !important;
        min-height: 450px !important;
        background: #faf8f3 !important;
        overflow: hidden !important;
    }

    .mm-hero-inner {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 450px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mm-hero-visual,
    .mm-hero-image-wrap,
    .mm-hero-image-wrap picture {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mm-hero-image-wrap picture img {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        transform: none !important;
    }

    .mm-hero-copy {
        position: relative !important;
        z-index: 5 !important;
        width: min(39vw, 560px) !important;
        max-width: 560px !important;
        margin-left: max(5.2vw, 52px) !important;
        padding: 58px 0 50px !important;
    }
}

@media (min-width: 1500px) {
    .mm-hero-copy {
        margin-left: calc((100vw - 1440px) / 2 + 45px) !important;
    }
}


/* =========================================================
   HERO v3.2 — MOBILE REBUILD
   Desktop ostaje kao v3.1.
   Na mobitelu tekst ide gore, fotografija ispod, bez preklapanja.
   ========================================================= */

@media (max-width: 900px) {
    .mm-hero {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #faf8f3 !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }

    .mm-hero-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .mm-hero-copy {
        order: 1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 34px 24px 28px !important;
        text-align: left !important;
        background: #faf8f3 !important;
    }

    .mm-hero-kicker {
        margin: 0 0 14px !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        letter-spacing: .24em !important;
        line-height: 1.45 !important;
        color: var(--mm-teal) !important;
        text-transform: uppercase !important;
    }

    .mm-hero h1 {
        margin: 0 !important;
        max-width: 100% !important;
        font-family: "DM Serif Display", Georgia, serif !important;
        font-size: clamp(42px, 10.8vw, 56px) !important;
        font-weight: 400 !important;
        line-height: 1.00 !important;
        letter-spacing: -.025em !important;
        color: var(--mm-teal) !important;
    }

    .mm-hero-divider {
        width: 58px !important;
        height: 2px !important;
        margin: 20px 0 0 !important;
        background: var(--mm-gold) !important;
    }

    .mm-hero-lead {
        max-width: 560px !important;
        margin: 18px 0 0 !important;
        font-family: "Montserrat", Arial, sans-serif !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #244b50 !important;
    }

    .mm-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-top: 24px !important;
    }

    .mm-btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 0 14px !important;
        font-size: 11px !important;
        letter-spacing: .025em !important;
        white-space: nowrap !important;
    }

    .mm-hero-visual {
        order: 2 !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 420px !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: #f3efe8 !important;
    }

    .mm-hero-image-wrap,
    .mm-hero-image-wrap picture {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .mm-hero-image-wrap picture img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 54% 28% !important;
        transform: none !important;
        max-width: none !important;
    }

    /* vrlo blagi prijelaz između teksta i fotografije */
    .mm-hero-visual::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 2 !important;
        inset: 0 0 auto 0 !important;
        height: 56px !important;
        background: linear-gradient(
            180deg,
            rgba(250,248,243,.72) 0%,
            rgba(250,248,243,0) 100%
        ) !important;
        pointer-events: none !important;
    }

    .mm-hero-botanical,
    .mm-hero-script,
    .mm-hero::before,
    .mm-hero::after {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .mm-hero-copy {
        padding: 30px 20px 24px !important;
    }

    .mm-hero h1 {
        font-size: clamp(40px, 12vw, 50px) !important;
    }

    .mm-hero-lead {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
    }

    .mm-hero-actions {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .mm-btn {
        min-height: 50px !important;
        font-size: 11.5px !important;
    }

    .mm-hero-visual {
        height: 390px !important;
    }

    .mm-hero-image-wrap picture img {
        object-position: 56% 26% !important;
    }
}

@media (max-width: 380px) {
    .mm-hero-copy {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .mm-hero h1 {
        font-size: 38px !important;
    }

    .mm-hero-visual {
        height: 350px !important;
    }
}


/* =========================================================
   HERO v3.3 — mobile fix
   - uklonjen ispis pokvarenog HTML fragmenta
   - fotografija na mobitelu je puna širina, ne minijatura
   ========================================================= */

@media (max-width: 900px) {
    .mm-hero {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        overflow: hidden !important;
    }

    .mm-hero-inner {
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .mm-hero-copy {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        padding: 32px 22px 26px !important;
    }

    .mm-hero-visual {
        position: relative !important;
        inset: auto !important;
        width: 100vw !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .mm-hero-image-wrap {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .mm-hero-image-wrap picture {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .mm-hero-image-wrap picture img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        min-width: 100% !important;
        object-fit: initial !important;
        object-position: initial !important;
        transform: none !important;
        margin: 0 !important;
    }
}

@media (max-width: 600px) {
    .mm-hero-copy {
        padding: 28px 18px 22px !important;
    }

    .mm-hero-kicker {
        font-size: 9px !important;
        letter-spacing: .22em !important;
    }

    .mm-hero h1 {
        font-size: clamp(39px, 11.8vw, 49px) !important;
        line-height: 1.01 !important;
    }

    .mm-hero-lead {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
    }

    .mm-hero-actions {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   HERO v3.4 — desktop crop fix
   Mobilna verzija ostaje potpuno ista kao v3.3.
   ========================================================= */

@media (min-width: 901px) {
    .mm-hero,
    .mm-hero-inner {
        min-height: 500px !important;
    }

    .mm-hero-image-wrap picture img {
        object-fit: cover !important;
        object-position: center 18% !important;
    }

    .mm-hero-copy {
        padding-top: 64px !important;
        padding-bottom: 54px !important;
    }
}


/* =========================================================
   HERO v3.5 — MOBILE: prvo fotografija, zatim sadržaj
   DESKTOP v3.4 SE NE MIJENJA.
   ========================================================= */

@media (max-width: 900px) {
    .mm-hero-inner {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Fotografija ide prva */
    .mm-hero-visual {
        order: 1 !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .mm-hero-image-wrap,
    .mm-hero-image-wrap picture {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .mm-hero-image-wrap picture img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        object-fit: initial !important;
        object-position: initial !important;
        transform: none !important;
        margin: 0 !important;
    }

    /* Tekst i CTA idu ispod fotografije */
    .mm-hero-copy {
        order: 2 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 30px 22px 32px !important;
        box-sizing: border-box !important;
        text-align: left !important;
        background: #faf8f3 !important;
    }

    .mm-hero-kicker {
        margin-bottom: 13px !important;
    }

    .mm-hero h1 {
        max-width: 560px !important;
        font-size: clamp(40px, 11vw, 50px) !important;
        line-height: 1.01 !important;
    }

    .mm-hero-divider {
        margin-top: 19px !important;
    }

    .mm-hero-lead {
        max-width: 560px !important;
        margin-top: 17px !important;
        font-size: 14.5px !important;
        line-height: 1.58 !important;
    }

    .mm-hero-actions {
        margin-top: 23px !important;
    }
}

@media (max-width: 600px) {
    .mm-hero-copy {
        padding: 27px 18px 28px !important;
    }

    .mm-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .mm-btn {
        width: 100% !important;
        min-height: 50px !important;
    }
}


/* =========================================================
   USLUGE v3.6 — prema dostavljenom prikazu
   ========================================================= */
.mm-services {
    width: 100%;
    background: #fbfaf6;
    padding: 32px 0 36px;
}
.mm-services-shell {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}
.mm-services-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}
.mm-services-heading h2 {
    margin: 0;
    color: #174f65;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.mm-services-gold-line {
    display: block;
    width: 42px;
    height: 2px;
    margin-top: 9px;
    background: #b88a45;
}
.mm-services-all {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: #174f65;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none !important;
    text-transform: uppercase;
}
.mm-services-all span { font-size: 18px; line-height: 1; }

.mm-services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.mm-service-card {
    position: relative;
    min-height: 158px;
    padding: 18px 12px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #174f65 !important;
    text-decoration: none !important;
    border-right: 1px solid rgba(23,79,101,.10);
    border-bottom: 1px solid rgba(23,79,101,.10);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mm-service-card:nth-child(5n) { border-right: 0; }
.mm-service-card:nth-child(n+6) { border-bottom: 0; }
.mm-service-card:hover {
    background: #f5f1e9;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(24,65,76,.06);
}
.mm-service-name {
    display: block;
    margin-top: 11px;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.27;
    font-weight: 650;
}
.mm-service-name small {
    font-size: .92em;
    font-weight: 650;
}
.mm-service-icon {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    color: #17617a;
}

/* jednostavne line-icons bez vanjske biblioteke */
.mm-service-icon::before,
.mm-service-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}
.mm-icon-stethoscope::before {
    left: 8px; top: 3px; width: 25px; height: 31px;
    border: 2px solid currentColor; border-top: 0; border-radius: 0 0 16px 16px;
}
.mm-icon-stethoscope::after {
    right: 3px; bottom: 4px; width: 12px; height: 12px;
    border: 2px solid currentColor; border-radius: 50%;
    box-shadow: -13px 7px 0 -5px currentColor;
}
.mm-icon-glucose::before {
    left: 13px; top: 2px; width: 23px; height: 34px;
    border: 2px solid currentColor; border-radius: 7px;
}
.mm-icon-glucose::after {
    left: 19px; top: 9px; width: 11px; height: 13px;
    border: 2px solid currentColor; border-radius: 2px;
    box-shadow: 5px 28px 0 -4px currentColor;
}
.mm-icon-thyroid::before {
    left: 5px; top: 5px; width: 38px; height: 34px;
    border: 3px solid currentColor; border-top-color: transparent;
    border-radius: 42% 42% 50% 50%;
    transform: rotate(0deg);
}
.mm-icon-thyroid::after {
    left: 21px; top: 13px; width: 6px; height: 22px;
    background: #fbfaf6; border-left: 2px solid currentColor; border-right: 2px solid currentColor;
}
.mm-icon-monitor::before {
    left: 4px; top: 5px; width: 40px; height: 28px;
    border: 2px solid currentColor; border-radius: 2px;
}
.mm-icon-monitor::after {
    left: 12px; top: 34px; width: 24px; height: 8px;
    border-top: 2px solid currentColor;
    box-shadow: inset 0 5px 0 -3px currentColor;
}
.mm-icon-abdomen::before {
    left: 10px; top: 3px; width: 28px; height: 42px;
    border: 2px solid currentColor; border-radius: 8px 8px 15px 15px;
    transform: perspective(30px) rotateX(-4deg);
}
.mm-icon-abdomen::after {
    left: 17px; top: 16px; width: 15px; height: 12px;
    border: 2px solid currentColor; border-radius: 50% 50% 40% 40%;
}
.mm-icon-heart::before,
.mm-icon-heartplus::before {
    left: 8px; top: 8px; width: 31px; height: 27px;
    border: 2px solid currentColor; border-radius: 15px 15px 4px 15px;
    transform: rotate(45deg);
}
.mm-icon-heart::after {
    left: 3px; top: 24px; width: 43px; height: 2px;
    background: currentColor;
    box-shadow: 10px -6px 0 -0.2px currentColor, 18px 5px 0 -0.2px currentColor;
}
.mm-icon-heartplus::after {
    right: 0; bottom: 1px; width: 19px; height: 19px;
    border: 2px solid currentColor; border-radius: 50%;
    background:
      linear-gradient(currentColor,currentColor) center/9px 2px no-repeat,
      linear-gradient(currentColor,currentColor) center/2px 9px no-repeat,
      #fbfaf6;
}
.mm-icon-apple::before {
    left: 8px; top: 11px; width: 32px; height: 31px;
    border: 2px solid currentColor; border-radius: 48% 48% 42% 42%;
}
.mm-icon-apple::after {
    left: 25px; top: 2px; width: 12px; height: 8px;
    border-top: 2px solid currentColor; border-left: 2px solid currentColor;
    border-radius: 9px 0 0 0; transform: rotate(-20deg);
}
.mm-icon-tube::before {
    left: 16px; top: 3px; width: 17px; height: 39px;
    border: 2px solid currentColor; border-radius: 2px 2px 9px 9px;
}
.mm-icon-tube::after {
    left: 13px; top: 1px; width: 23px; height: 7px;
    border: 2px solid currentColor; border-radius: 2px;
    background: #fbfaf6;
}
.mm-icon-inbody::before {
    left: 4px; bottom: 5px; width: 8px; height: 13px;
    border: 2px solid currentColor;
    box-shadow: 13px -9px 0 -2px #fbfaf6, 13px -9px 0 0 currentColor,
                26px -20px 0 -2px #fbfaf6, 26px -20px 0 0 currentColor;
}
.mm-icon-inbody::after {
    left: 4px; bottom: 2px; width: 38px; height: 2px; background: currentColor;
}
.mm-service-inbody {
    margin: 7px 8px 7px 14px;
    min-height: 144px;
    border: 0 !important;
    border-radius: 8px;
    background: linear-gradient(135deg,#f7f2e8,#f1ece3);
}
.mm-new-badge {
    position: absolute;
    left: 13px; top: 12px;
    padding: 5px 10px;
    border-radius: 4px;
    background: #b98a45;
    color: white;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}
.mm-inbody-arrow {
    margin-top: 5px;
    font-size: 21px;
    line-height: 1;
}

@media (max-width: 900px) {
    .mm-services { padding: 28px 0 30px; }
    .mm-services-shell { width: min(100% - 32px, 700px); }
    .mm-services-grid { grid-template-columns: repeat(2, 1fr); }
    .mm-service-card {
        min-height: 145px;
        border-right: 1px solid rgba(23,79,101,.10) !important;
        border-bottom: 1px solid rgba(23,79,101,.10) !important;
    }
    .mm-service-card:nth-child(2n) { border-right: 0 !important; }
    .mm-service-card:nth-last-child(-n+2) { border-bottom: 0 !important; }
    .mm-service-inbody { margin: 7px; }
}
@media (max-width: 480px) {
    .mm-services-shell { width: calc(100% - 24px); }
    .mm-services-heading { align-items: center; }
    .mm-services-heading h2 { font-size: 12px; }
    .mm-services-all { font-size: 9px; }
    .mm-service-card { min-height: 132px; padding: 14px 8px; }
    .mm-service-name { font-size: 12.5px; }
    .mm-service-icon { transform: scale(.9); }
}


/* =========================================================
   INBODY v3.7 — promo blok prema dostavljenom prikazu
   ========================================================= */

.mm-inbody-block {
    width: 100%;
    padding: 18px 0 44px;
    background: #fbfaf6;
}

.mm-inbody-shell {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .85fr 1fr;
    align-items: stretch;
    width: min(1180px, calc(100% - 64px));
    min-height: 315px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(245,241,234,.98) 0%, rgba(248,246,240,.97) 34%, rgba(247,244,238,.94) 68%, rgba(242,238,231,.96) 100%);
}

.mm-inbody-copy {
    position: relative;
    z-index: 3;
    padding: 38px 20px 34px 46px;
}

.mm-inbody-kicker {
    margin-bottom: 12px;
    color: #b1874e;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.mm-inbody-copy h2 {
    margin: 0;
    color: #174f65;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(36px, 3.2vw, 50px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.02em;
}

.mm-inbody-copy p {
    margin: 18px 0 0;
    color: #23576a;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

.mm-inbody-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 48px;
    margin-top: 20px;
    padding: 0 20px;
    border: 1px solid #b1874e;
    border-radius: 4px;
    color: #174f65 !important;
    background: rgba(255,255,255,.25);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.mm-inbody-btn span {
    font-size: 19px;
    line-height: 1;
}

.mm-inbody-btn:hover {
    background: #174f65;
    color: #fff !important;
    transform: translateY(-1px);
}

.mm-inbody-image {
    position: relative;
    z-index: 1;
    min-height: 315px;
}

.mm-inbody-image::before,
.mm-inbody-image::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 55px;
    pointer-events: none;
}

.mm-inbody-image::before {
    left: 0;
    background: linear-gradient(90deg, #f6f3ec 0%, rgba(246,243,236,0) 100%);
}

.mm-inbody-image::after {
    right: 0;
    background: linear-gradient(270deg, #f4f0e8 0%, rgba(244,240,232,0) 100%);
}

.mm-inbody-image img {
    width: 100%;
    height: 100%;
    min-height: 315px;
    display: block;
    object-fit: cover;
    object-position: center center;
}

.mm-inbody-list-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 30px 42px 30px 34px;
}

.mm-inbody-list {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mm-inbody-list li {
    position: relative;
    margin: 0 0 13px;
    padding-left: 28px;
    color: #345d6b;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
}

.mm-inbody-list li:last-child {
    margin-bottom: 0;
}

.mm-inbody-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #17617a;
    background: #fff;
    box-shadow: 0 1px 4px rgba(23,79,101,.12);
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .mm-inbody-block {
        padding: 14px 0 34px;
    }

    .mm-inbody-shell {
        grid-template-columns: 1fr;
        width: min(100% - 32px, 680px);
        min-height: 0;
    }

    .mm-inbody-copy {
        order: 1;
        padding: 30px 26px 24px;
    }

    .mm-inbody-copy h2 {
        font-size: clamp(38px, 9vw, 50px);
    }

    .mm-inbody-image {
        order: 2;
        min-height: 0;
        height: 300px;
    }

    .mm-inbody-image img {
        min-height: 0;
        height: 300px;
        object-fit: cover;
        object-position: center center;
    }

    .mm-inbody-list-wrap {
        order: 3;
        padding: 26px 26px 28px;
        background: rgba(255,255,255,.22);
    }
}

@media (max-width: 520px) {
    .mm-inbody-shell {
        width: calc(100% - 24px);
    }

    .mm-inbody-copy {
        padding: 26px 20px 22px;
    }

    .mm-inbody-kicker {
        font-size: 10px;
    }

    .mm-inbody-copy h2 {
        font-size: 39px;
    }

    .mm-inbody-copy p {
        font-size: 14px;
    }

    .mm-inbody-btn {
        width: 100%;
        justify-content: space-between;
        min-height: 50px;
    }

    .mm-inbody-image,
    .mm-inbody-image img {
        height: 255px;
    }

    .mm-inbody-list-wrap {
        padding: 22px 20px 25px;
    }

    .mm-inbody-list li {
        font-size: 13.5px;
        margin-bottom: 12px;
    }
}


/* =========================================================
   INBODY v3.8 — šira podloga + mobile overlap fix
   Hero i blok usluga se ne mijenjaju.
   ========================================================= */

/* Desktop: InBody blok malo širi */
@media (min-width: 901px) {
    .mm-inbody-shell {
        width: min(1320px, calc(100% - 36px)) !important;
        grid-template-columns: 1.08fr .92fr 1.08fr !important;
    }

    .mm-inbody-list-wrap {
        padding-left: 38px !important;
        padding-right: 38px !important;
    }
}

/* Mobile/tablet: tri dijela su strogo jedan ispod drugoga */
@media (max-width: 900px) {
    .mm-inbody-shell {
        display: flex !important;
        flex-direction: column !important;
        width: calc(100% - 20px) !important;
        max-width: 720px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .mm-inbody-copy,
    .mm-inbody-image,
    .mm-inbody-list-wrap {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .mm-inbody-copy {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    .mm-inbody-image {
        order: 2 !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .mm-inbody-image::before,
    .mm-inbody-image::after {
        display: none !important;
    }

    .mm-inbody-image img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: none !important;
        object-fit: initial !important;
        object-position: initial !important;
        margin: 0 !important;
    }

    .mm-inbody-list-wrap {
        order: 3 !important;
        flex: 0 0 auto !important;
        display: block !important;
        padding: 26px 28px 30px !important;
        background: #f3efe7 !important;
        clear: both !important;
    }

    .mm-inbody-list {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mm-inbody-list li {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 29px !important;
        margin-bottom: 13px !important;
    }
}

@media (max-width: 520px) {
    .mm-inbody-block {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mm-inbody-shell {
        width: calc(100% - 12px) !important;
        border-radius: 7px !important;
    }

    .mm-inbody-copy {
        padding: 26px 18px 22px !important;
    }

    .mm-inbody-list-wrap {
        padding: 24px 20px 27px !important;
    }
}


/* =========================================================
   PREDNOSTI v3.9 — blok prije footera
   ========================================================= */
.mm-benefits {
    width: 100%;
    padding: 32px 0 34px;
    background: #fbfaf6;
    border-top: 1px solid rgba(23,79,101,.04);
    border-bottom: 1px solid rgba(23,79,101,.07);
}
.mm-benefits-shell {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}
.mm-benefit {
    position: relative;
    min-height: 150px;
    padding: 8px 30px 4px;
    text-align: center;
}
.mm-benefit + .mm-benefit {
    border-left: 1px solid rgba(23,79,101,.11);
}
.mm-benefit-icon {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 11px;
    color: #17617a;
}
.mm-benefit-icon::before,
.mm-benefit-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}
.mm-benefit h3 {
    margin: 0 0 7px;
    color: #174f65;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
}
.mm-benefit p {
    margin: 0;
    color: #496b77;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

/* štit */
.mm-benefit-diagnostics::before {
    left: 10px; top: 2px;
    width: 29px; height: 36px;
    border: 2px solid currentColor;
    border-radius: 5px 5px 14px 14px;
    transform: perspective(25px) rotateX(-3deg);
}
.mm-benefit-diagnostics::after {
    left: 19px; top: 14px;
    width: 12px; height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* srce */
.mm-benefit-heart::before {
    left: 9px; top: 7px;
    width: 30px; height: 30px;
    border: 2px solid currentColor;
    border-radius: 16px 16px 5px 16px;
    transform: rotate(45deg);
}
.mm-benefit-heart::after {
    left: 23px; top: 3px;
    width: 2px; height: 7px;
    background: #fbfaf6;
}

/* osoba */
.mm-benefit-person::before {
    left: 17px; top: 2px;
    width: 15px; height: 15px;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.mm-benefit-person::after {
    left: 10px; top: 22px;
    width: 29px; height: 21px;
    border: 2px solid currentColor;
    border-radius: 17px 17px 3px 3px;
}

/* list */
.mm-benefit-leaf::before {
    left: 8px; top: 5px;
    width: 33px; height: 25px;
    border: 2px solid currentColor;
    border-radius: 100% 0 100% 0;
    transform: rotate(-14deg);
}
.mm-benefit-leaf::after {
    left: 12px; top: 28px;
    width: 30px; height: 2px;
    background: currentColor;
    transform: rotate(-42deg);
    transform-origin: left center;
}

/* =========================================================
   HEADER CTA — ukloni upadljivu plavu boju
   ========================================================= */
.mm-header-cta,
.mm-site-header .mm-header-cta,
a.mm-header-cta {
    background: #b58a50 !important;
    border-color: #b58a50 !important;
    color: #fff !important;
    box-shadow: none !important;
}
.mm-header-cta:hover,
.mm-site-header .mm-header-cta:hover,
a.mm-header-cta:hover {
    background: #9f7742 !important;
    border-color: #9f7742 !important;
    color: #fff !important;
}

/* ako Astra/Elementor button u headeru koristi generičku klasu */
.mm-site-header .ast-custom-button,
.mm-site-header .elementor-button {
    background-color: #b58a50 !important;
    border-color: #b58a50 !important;
    color: #fff !important;
}
.mm-site-header .ast-custom-button:hover,
.mm-site-header .elementor-button:hover {
    background-color: #9f7742 !important;
    border-color: #9f7742 !important;
}

@media (max-width: 900px) {
    .mm-benefits {
        padding: 24px 0 26px;
    }
    .mm-benefits-shell {
        grid-template-columns: repeat(2, 1fr);
        width: calc(100% - 28px);
    }
    .mm-benefit {
        min-height: 145px;
        padding: 18px 12px;
    }
    .mm-benefit + .mm-benefit {
        border-left: 0;
    }
    .mm-benefit:nth-child(even) {
        border-left: 1px solid rgba(23,79,101,.11);
    }
    .mm-benefit:nth-child(n+3) {
        border-top: 1px solid rgba(23,79,101,.11);
    }
}
@media (max-width: 480px) {
    .mm-benefits-shell {
        width: calc(100% - 20px);
    }
    .mm-benefit {
        padding: 17px 8px;
    }
    .mm-benefit h3 {
        font-size: 12.5px;
    }
    .mm-benefit p {
        font-size: 12px;
    }
    .mm-benefit-icon {
        transform: scale(.9);
    }
}


/* =========================================================
   v3.9.2 — ispravak boje header CTA + scroll-to-top
   Korisnik je mislio na gumb "povratak na vrh".
   ========================================================= */

/* Vrati header CTA na originalni tamno-teal izgled. */
.mm-header-cta,
.mm-site-header .mm-header-cta,
a.mm-header-cta,
.mm-site-header .ast-custom-button,
.mm-site-header .elementor-button {
    background: var(--mm-teal) !important;
    border-color: var(--mm-teal) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(7,95,99,.13) !important;
}
.mm-header-cta:hover,
.mm-header-cta:focus,
.mm-site-header .mm-header-cta:hover,
a.mm-header-cta:hover,
.mm-site-header .ast-custom-button:hover,
.mm-site-header .elementor-button:hover {
    background: var(--mm-teal-dark) !important;
    border-color: var(--mm-teal-dark) !important;
    color: #fff !important;
}

/* Astra "Povratak na vrh" — prigušena zlatna umjesto plave. */
#ast-scroll-top,
.ast-scroll-to-top-right,
.ast-scroll-to-top-left {
    background: #b58a50 !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 5px 18px rgba(73,56,31,.18) !important;
}
#ast-scroll-top:hover,
#ast-scroll-top:focus,
.ast-scroll-to-top-right:hover,
.ast-scroll-to-top-left:hover {
    background: #9f7742 !important;
    color: #fff !important;
}

/* =========================================================
   RECENZIJE v3.9.2 — Google + Facebook
   ========================================================= */

.mm-reviews-cta {
    width: 100%;
    padding: 44px 0 48px;
    background: #f5f1e9;
}

.mm-reviews-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(480px, .9fr);
    gap: 64px;
    align-items: center;
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}

.mm-reviews-kicker {
    margin: 0 0 12px;
    color: #b1874e;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.mm-reviews-intro h2 {
    margin: 0;
    color: #174f65;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(34px, 3vw, 46px);
    line-height: 1.04;
    font-weight: 400;
    letter-spacing: -.02em;
}

.mm-reviews-intro p {
    max-width: 560px;
    margin: 16px 0 0;
    color: #496b77;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
}

.mm-review-platforms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.mm-review-card {
    min-height: 112px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 22px 20px;
    border: 1px solid rgba(23,79,101,.11);
    border-radius: 8px;
    background: rgba(255,255,255,.68);
    color: #174f65 !important;
    text-decoration: none !important;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.mm-review-card:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 10px 28px rgba(23,79,101,.08);
}

.mm-review-logo {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(23,79,101,.14);
    border-radius: 50%;
    background: #fff;
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.mm-facebook-mark {
    font-family: Arial, sans-serif;
    font-size: 29px;
    font-weight: 700;
}

.mm-review-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mm-review-copy strong {
    color: #174f65;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
}

.mm-review-copy small {
    margin-top: 4px;
    color: #667f87;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 11.5px;
    line-height: 1.3;
}

.mm-review-arrow {
    color: #b1874e;
    font-size: 22px;
    line-height: 1;
}

@media (max-width: 900px) {
    .mm-reviews-cta {
        padding: 34px 0 38px;
    }

    .mm-reviews-shell {
        grid-template-columns: 1fr;
        gap: 26px;
        width: min(100% - 32px, 680px);
    }

    .mm-review-platforms {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .mm-reviews-shell {
        width: calc(100% - 24px);
    }

    .mm-reviews-intro h2 {
        font-size: 38px;
    }

    .mm-review-platforms {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mm-review-card {
        min-height: 90px;
        padding: 17px 18px;
    }
}


/* =========================================================
   RECENZIJE v3.9.3 — testimonial blok prema referenci
   ========================================================= */
.mm-reviews-cta { display: none !important; }

.mm-testimonials {
    position: relative;
    width: 100%;
    min-height: 245px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 50%, rgba(232,229,218,.55), transparent 30%),
        linear-gradient(100deg, #f7f5ef 0%, #f5f3ed 56%, #f1f0e8 100%);
    border-bottom: 4px solid #0c6870;
}

.mm-testimonials-shell {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: center;
    width: min(1180px, calc(100% - 80px));
    min-height: 245px;
    margin: 0 auto;
}

.mm-testimonials-stage {
    position: relative;
    width: min(720px, 100%);
    min-height: 210px;
    padding: 38px 110px 58px 82px;
}

.mm-testimonial-slide {
    display: none;
    position: relative;
    min-height: 105px;
}
.mm-testimonial-slide.is-active {
    display: block;
    animation: mmTestimonialFade .35s ease;
}
@keyframes mmTestimonialFade {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.mm-quote-mark {
    position: absolute;
    left: -65px;
    top: -20px;
    color: #dcc79d;
    font-family: Georgia, serif;
    font-size: 76px;
    font-weight: 700;
    line-height: 1;
}

.mm-testimonial-slide blockquote {
    max-width: 520px;
    margin: 0;
    padding: 0;
    border: 0;
    color: #174f65;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 2vw, 27px);
    font-style: italic;
    line-height: 1.48;
}

.mm-review-author {
    margin-top: 13px;
    color: #496b77;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.3;
}

.mm-testimonial-controls {
    position: absolute;
    left: 0;
    right: 45px;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
}

.mm-testimonial-arrow {
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(23,79,101,.08);
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    color: #17617a;
    font-family: Arial, sans-serif;
    font-size: 27px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}
.mm-testimonial-arrow:hover {
    background: rgba(255,255,255,.85);
    color: #174f65;
}

.mm-testimonial-dots {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mm-testimonial-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    border: 1px solid #7f9ba3;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.mm-testimonial-dot.is-active {
    border-color: #17617a;
    background: #17617a;
}

.mm-testimonials-message {
    position: relative;
    z-index: 4;
    padding-left: 36px;
    color: #285d6c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    line-height: 1.85;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}
.mm-testimonials-message span {
    display: block;
    width: 48px;
    height: 2px;
    margin-top: 18px;
    background: #b58a50;
}

.mm-testimonials-decor {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.mm-testimonials-decor-left {
    left: -45px;
    top: -35px;
    width: 155px;
    height: 310px;
    opacity: .25;
    filter: blur(7px);
    transform: rotate(-16deg);
    background:
        radial-gradient(ellipse at 70% 15%, #78906d 0 16%, transparent 18%),
        radial-gradient(ellipse at 55% 38%, #78906d 0 18%, transparent 20%),
        radial-gradient(ellipse at 72% 60%, #78906d 0 18%, transparent 20%),
        radial-gradient(ellipse at 48% 80%, #78906d 0 18%, transparent 20%);
}
.mm-testimonials-decor-right {
    right: -15px;
    top: -25px;
    width: 205px;
    height: 300px;
    opacity: .68;
    transform: rotate(5deg);
    background:
        radial-gradient(ellipse at 72% 10%, #71886a 0 14%, transparent 16%),
        radial-gradient(ellipse at 48% 28%, #71886a 0 15%, transparent 17%),
        radial-gradient(ellipse at 80% 45%, #71886a 0 15%, transparent 17%),
        radial-gradient(ellipse at 52% 63%, #71886a 0 16%, transparent 18%),
        radial-gradient(ellipse at 82% 80%, #71886a 0 16%, transparent 18%);
}

@media (max-width: 900px) {
    .mm-testimonials-shell {
        grid-template-columns: 1fr;
        width: min(100% - 34px, 680px);
        min-height: 0;
    }
    .mm-testimonials-stage {
        width: 100%;
        min-height: 250px;
        padding: 42px 45px 68px 68px;
    }
    .mm-testimonials-message {
        padding: 8px 30px 34px 68px;
        font-size: 12px;
    }
    .mm-testimonial-controls {
        right: 0;
    }
    .mm-testimonials-decor-right {
        opacity: .28;
    }
}

@media (max-width: 520px) {
    .mm-testimonials-shell {
        width: calc(100% - 20px);
    }
    .mm-testimonials-stage {
        min-height: 280px;
        padding: 38px 20px 70px 48px;
    }
    .mm-quote-mark {
        left: -34px;
        top: -13px;
        font-size: 58px;
    }
    .mm-testimonial-slide blockquote {
        font-size: 20px;
        line-height: 1.45;
    }
    .mm-testimonial-controls {
        gap: 25px;
    }
    .mm-testimonials-message {
        padding: 4px 20px 32px 48px;
    }
    .mm-testimonials-decor-left {
        opacity: .13;
    }
}


/* v3.9.4 — recenzije: bolji raspored za dulje tekstove */
.mm-testimonials-stage {
    min-height: 230px !important;
}
.mm-testimonial-slide {
    min-height: 130px !important;
}
.mm-testimonial-slide blockquote {
    max-width: 590px !important;
    font-size: clamp(18px, 1.75vw, 24px) !important;
    line-height: 1.5 !important;
}
@media (max-width: 900px) {
    .mm-testimonials-stage {
        min-height: 305px !important;
    }
}
@media (max-width: 520px) {
    .mm-testimonials-stage {
        min-height: 360px !important;
    }
    .mm-testimonial-slide blockquote {
        font-size: 18px !important;
        line-height: 1.48 !important;
    }
}


/* =========================================================
   KONTAKT CTA v3.9.5 — blok prije footera
   ========================================================= */

.mm-contact-cta {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 0% 40%, rgba(74,132,118,.22), transparent 22%),
        radial-gradient(circle at 100% 25%, rgba(74,132,118,.18), transparent 24%),
        linear-gradient(100deg, #0d5c66 0%, #0a6570 52%, #0b5d68 100%);
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.mm-contact-cta::before,
.mm-contact-cta::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 150px;
    opacity: .17;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 25%, rgba(196,211,186,.9) 0 13%, transparent 15%),
        radial-gradient(ellipse at 55% 40%, rgba(196,211,186,.9) 0 14%, transparent 16%),
        radial-gradient(ellipse at 32% 62%, rgba(196,211,186,.9) 0 15%, transparent 17%),
        radial-gradient(ellipse at 62% 78%, rgba(196,211,186,.9) 0 14%, transparent 16%);
}
.mm-contact-cta::before {
    left: -70px;
    top: -25px;
    transform: rotate(-20deg);
}
.mm-contact-cta::after {
    right: -55px;
    bottom: -30px;
    transform: rotate(150deg);
}

.mm-contact-cta-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr 1.45fr auto;
    gap: 30px;
    align-items: center;
    width: min(1320px, calc(100% - 64px));
    min-height: 132px;
    margin: 0 auto;
    padding: 22px 0;
}

.mm-contact-intro h2 {
    margin: 0;
    color: #fff;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 29px;
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -.01em;
}

.mm-contact-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    color: rgba(255,255,255,.92);
    min-width: 0;
}

.mm-contact-item strong {
    display: block;
    margin-bottom: 4px;
    color: #ecd5a5;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mm-contact-item span,
.mm-contact-item a {
    display: block;
    color: #fff !important;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

.mm-contact-item a:hover {
    color: #ecd5a5 !important;
}

.mm-contact-icon,
.mm-contact-calendar {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    color: #d2ad6a;
    flex: 0 0 auto;
}

.mm-contact-icon::before,
.mm-contact-icon::after,
.mm-contact-calendar::before,
.mm-contact-calendar::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}

/* location pin */
.mm-contact-pin::before {
    left: 8px; top: 3px;
    width: 17px; height: 21px;
    border: 2px solid currentColor;
    border-radius: 12px 12px 13px 13px;
    transform: rotate(45deg);
}
.mm-contact-pin::after {
    left: 13px; top: 8px;
    width: 7px; height: 7px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: #0b626c;
}

/* clock */
.mm-contact-clock::before {
    left: 4px; top: 3px;
    width: 25px; height: 25px;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.mm-contact-clock::after {
    left: 16px; top: 8px;
    width: 8px; height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

/* phone */
.mm-contact-phone::before {
    left: 5px; top: 4px;
    width: 22px; height: 24px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    border-radius: 0 0 0 16px;
    transform: rotate(-43deg);
}
.mm-contact-phone::after {
    left: 3px; top: 3px;
    width: 8px; height: 8px;
    border-radius: 3px;
    background: currentColor;
    box-shadow: 16px 16px 0 currentColor;
}

.mm-contact-action {
    justify-self: end;
}

.mm-contact-book {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 22px;
    border: 1px solid #d4b16f;
    border-radius: 5px;
    background: #e6c784;
    color: #174f65 !important;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .035em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: none;
    transition: background .2s ease, transform .2s ease;
}

.mm-contact-book:hover {
    background: #efd79f;
    color: #174f65 !important;
    transform: translateY(-1px);
}

.mm-contact-calendar {
    width: 24px;
    height: 24px;
    color: #174f65;
}
.mm-contact-calendar::before {
    left: 2px; top: 5px;
    width: 20px; height: 17px;
    border: 2px solid currentColor;
    border-radius: 2px;
}
.mm-contact-calendar::after {
    left: 6px; top: 2px;
    width: 12px; height: 6px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
    box-shadow: 0 7px 0 -2px currentColor;
}

@media (max-width: 1050px) {
    .mm-contact-cta-shell {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 22px 28px;
        padding: 28px 0;
    }
    .mm-contact-intro {
        grid-column: 1 / 2;
    }
    .mm-contact-action {
        grid-column: 2 / 4;
        justify-self: start;
    }
}

@media (max-width: 720px) {
    .mm-contact-cta-shell {
        grid-template-columns: 1fr;
        gap: 22px;
        width: calc(100% - 36px);
        padding: 30px 0 32px;
    }
    .mm-contact-intro,
    .mm-contact-action {
        grid-column: auto;
    }
    .mm-contact-intro h2 {
        font-size: 32px;
    }
    .mm-contact-action {
        width: 100%;
    }
    .mm-contact-book {
        width: 100%;
        min-height: 52px;
    }
    .mm-contact-item {
        grid-template-columns: 36px 1fr;
    }
}


/* =========================================================
   FOOTER v3.9.6 — prema dostavljenoj referenci
   ========================================================= */

.mm-footer {
    width: 100%;
    background: #f8f6f0;
    color: #315866;
    font-family: "Montserrat", Arial, sans-serif;
}

.mm-footer-topline {
    width: 100%;
    height: 8px;
    background: #0e6068;
}

.mm-footer-shell {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
    padding: 32px 0 22px;
}

.mm-footer-grid {
    display: grid;
    grid-template-columns: 1.35fr .72fr 1.12fr .82fr;
    gap: 0;
    align-items: start;
}

.mm-footer-brand,
.mm-footer-col {
    min-height: 200px;
    padding: 0 28px;
}

.mm-footer-brand {
    padding-left: 0;
}

.mm-footer-col {
    border-left: 1px solid rgba(23,79,101,.10);
}

.mm-footer-logo-link {
    display: inline-block;
    max-width: 275px;
}

.mm-footer-logo {
    display: block;
    width: 100%;
    height: auto;
    max-width: 275px;
}

.mm-footer-address {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: start;
    margin-top: 28px;
    color: #496b77;
    font-size: 12px;
    line-height: 1.45;
}

.mm-footer-pin {
    position: relative;
    display: block;
    width: 18px;
    height: 22px;
    color: #7e9aa2;
}

.mm-footer-pin::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 2px;
    width: 12px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 9px 9px 10px 10px;
    transform: rotate(45deg);
    box-sizing: border-box;
}

.mm-footer-pin::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    width: 4px;
    height: 4px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.mm-footer-col h3 {
    margin: 0 0 12px;
    color: #174f65;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.mm-footer-col a {
    display: block;
    margin: 0 0 6px;
    color: #496b77 !important;
    font-size: 11px;
    line-height: 1.32;
    text-decoration: none !important;
    transition: color .2s ease;
}

.mm-footer-col a:hover {
    color: #174f65 !important;
}

.mm-footer-services a {
    margin-bottom: 4px;
    font-size: 10.5px;
}

.mm-footer-socials {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 14px;
}

.mm-footer-socials a {
    margin: 0;
}

.mm-social-facebook {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #174f65;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.mm-social-instagram {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid #174f65;
    border-radius: 5px;
    box-sizing: border-box;
}

.mm-social-instagram::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border: 2px solid #174f65;
    border-radius: 50%;
    box-sizing: border-box;
}

.mm-social-instagram::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 2px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #174f65;
}

.mm-footer-signature {
    margin-top: 34px;
    color: #17617a;
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: 20px;
    line-height: 1.18;
    transform: rotate(-5deg);
    transform-origin: left top;
}

.mm-footer-signature span {
    display: block;
}

.mm-footer-signature i {
    display: block;
    width: 42px;
    height: 2px;
    margin-top: 13px;
    background: #b58a50;
    transform: rotate(5deg);
}

.mm-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-top: 18px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(23,79,101,.10);
    color: #71868d;
    font-size: 9px;
    line-height: 1.45;
}

.mm-footer-credit {
    white-space: nowrap;
    text-align: right;
}

.mm-footer-credit span {
    color: #17617a;
    font-size: 11px;
}

@media (max-width: 900px) {
    .mm-footer-shell {
        width: min(100% - 36px, 700px);
        padding-top: 28px;
    }

    .mm-footer-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 28px;
    }

    .mm-footer-brand,
    .mm-footer-col {
        min-height: 0;
        padding: 0 22px;
    }

    .mm-footer-brand {
        padding-left: 0;
    }

    .mm-footer-col:nth-child(3) {
        border-left: 0;
        padding-left: 0;
    }

    .mm-footer-signature {
        margin-top: 24px;
    }
}

@media (max-width: 560px) {
    .mm-footer-topline {
        height: 6px;
    }

    .mm-footer-shell {
        width: calc(100% - 28px);
        padding: 26px 0 18px;
    }

    .mm-footer-grid {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .mm-footer-brand,
    .mm-footer-col,
    .mm-footer-col:nth-child(3) {
        padding: 0;
        border-left: 0;
    }

    .mm-footer-col {
        padding-top: 21px;
        border-top: 1px solid rgba(23,79,101,.10);
    }

    .mm-footer-brand {
        padding-top: 0;
        border-top: 0;
    }

    .mm-footer-logo-link,
    .mm-footer-logo {
        max-width: 260px;
    }

    .mm-footer-address {
        margin-top: 22px;
    }

    .mm-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-top: 26px;
    }

    .mm-footer-credit {
        text-align: left;
    }
}


/* v3.9.7 — footer logo: originalni brand, prozirna podloga */
.mm-footer-logo-link,
.mm-footer-logo {
    background: transparent !important;
}


/* =========================================================
   FOOTER v3.9.8 — veća čitljivost i veće klikabilne zone
   ========================================================= */

.mm-footer-col h3 {
    font-size: 14px !important;
    margin-bottom: 14px !important;
}

.mm-footer-col a {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 6px !important;
}

.mm-footer-services a {
    font-size: 12px !important;
    line-height: 1.42 !important;
    margin-bottom: 4px !important;
}

.mm-footer-address {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.mm-footer-bottom {
    font-size: 10.5px !important;
    line-height: 1.5 !important;
}

@media (max-width: 900px) {
    .mm-footer-col h3 {
        font-size: 15px !important;
    }

    .mm-footer-col a,
    .mm-footer-services a {
        font-size: 14px !important;
        line-height: 1.45 !important;
        margin-bottom: 0 !important;
        padding: 5px 0 !important;
        min-height: 32px !important;
    }

    .mm-footer-address {
        font-size: 14px !important;
    }

    .mm-footer-bottom {
        font-size: 11.5px !important;
    }
}

@media (max-width: 560px) {
    .mm-footer-col h3 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    .mm-footer-col a,
    .mm-footer-services a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 9px 0 !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        border-bottom: 1px solid rgba(23,79,101,.055);
    }

    .mm-footer-col a:last-child {
        border-bottom: 0;
    }

    .mm-footer-address {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .mm-footer-socials a {
        width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-bottom: 0 !important;
    }

    .mm-social-facebook,
    .mm-social-instagram {
        transform: scale(1.18);
    }

    .mm-footer-bottom {
        font-size: 12px !important;
        line-height: 1.55 !important;
    }
}


/* =========================================================
   USLUGE v3.9.9 — kratki opisi na desktopu
   ========================================================= */

.mm-service-card {
    min-height: 178px !important;
    justify-content: flex-start !important;
    padding-top: 20px !important;
}

.mm-service-name {
    margin-top: 10px !important;
}

.mm-service-desc {
    display: block;
    max-width: 185px;
    margin-top: 8px;
    color: #6a7f86;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 11px;
    line-height: 1.42;
    font-weight: 400;
    text-align: center;
}

.mm-service-inbody {
    justify-content: center !important;
}

.mm-service-inbody .mm-service-desc {
    display: none !important;
}

/* Tablet/mobile ostaje čist: ikona + naziv */
@media (max-width: 900px) {
    .mm-service-card {
        min-height: 145px !important;
        justify-content: center !important;
        padding-top: 14px !important;
    }

    .mm-service-desc {
        display: none !important;
    }
}


/* =========================================================
   ZAŠTO MI v3.10.0 — vraćen sadržaj o doktorici,
   vizualno usklađen s novom stranicom (bez stare plave trake)
   ========================================================= */

.mm-why-us {
    width: 100%;
    padding: 34px 0 38px;
    background: #f8f6f0;
}

.mm-why-us-shell {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}

.mm-why-card {
    position: relative;
    padding: 10px 30px 8px;
    text-align: center;
}

.mm-why-card + .mm-why-card {
    border-left: 1px solid rgba(23,79,101,.11);
}

.mm-why-icon {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: #17617a;
}

.mm-why-icon::before,
.mm-why-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}

/* doctor / medical cross */
.mm-why-doctor::before,
.mm-why-equipment::before,
.mm-why-personal::before {
    left: 8px;
    top: 8px;
    width: 32px;
    height: 32px;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.mm-why-doctor::after,
.mm-why-equipment::after,
.mm-why-personal::after {
    left: 20px;
    top: 14px;
    width: 8px;
    height: 20px;
    background:
        linear-gradient(currentColor,currentColor) center/6px 20px no-repeat,
        linear-gradient(currentColor,currentColor) center/20px 6px no-repeat;
}

/* location */
.mm-why-location::before {
    left: 13px;
    top: 3px;
    width: 23px;
    height: 29px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
}
.mm-why-location::after {
    left: 20px;
    top: 10px;
    width: 9px;
    height: 9px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.mm-why-card h3 {
    margin: 0 0 10px;
    color: #174f65;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 400;
}

.mm-why-card p {
    margin: 0 auto;
    max-width: 260px;
    color: #58727b;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.58;
}

@media (max-width: 900px) {
    .mm-why-us-shell {
        grid-template-columns: 1fr 1fr;
        width: calc(100% - 30px);
    }
    .mm-why-card {
        padding: 24px 18px;
    }
    .mm-why-card + .mm-why-card {
        border-left: 0;
    }
    .mm-why-card:nth-child(even) {
        border-left: 1px solid rgba(23,79,101,.11);
    }
    .mm-why-card:nth-child(n+3) {
        border-top: 1px solid rgba(23,79,101,.11);
    }
}

@media (max-width: 560px) {
    .mm-why-us {
        padding: 18px 0 22px;
    }
    .mm-why-us-shell {
        grid-template-columns: 1fr;
        width: calc(100% - 28px);
    }
    .mm-why-card,
    .mm-why-card:nth-child(even),
    .mm-why-card:nth-child(n+3) {
        padding: 25px 10px;
        border-left: 0;
        border-top: 1px solid rgba(23,79,101,.10);
    }
    .mm-why-card:first-child {
        border-top: 0;
    }
    .mm-why-card h3 {
        font-size: 23px;
    }
    .mm-why-card p {
        max-width: 390px;
        font-size: 14px;
        line-height: 1.6;
    }
}


/* =========================================================
   v3.10.1 — suptilan blok o liječnici, bez ponavljanja
   ========================================================= */

.mm-why-us {
    display: none !important;
}

.mm-doctor-intro {
    width: 100%;
    padding: 20px 0 24px;
    background: #fbfaf6;
}

.mm-doctor-intro-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 42px;
    align-items: center;
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
    padding: 24px 30px;
    border-top: 1px solid rgba(23,79,101,.08);
    border-bottom: 1px solid rgba(23,79,101,.08);
}

.mm-doctor-intro-copy {
    max-width: 820px;
}

.mm-doctor-intro-kicker {
    margin-bottom: 8px;
    color: #b1874e;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.mm-doctor-intro h2 {
    margin: 0;
    color: #174f65;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(27px, 2.3vw, 36px);
    line-height: 1.06;
    font-weight: 400;
}

.mm-doctor-intro p {
    max-width: 790px;
    margin: 11px 0 0;
    color: #60767d;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.62;
}

.mm-doctor-intro-action a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(23,79,101,.25);
    border-radius: 4px;
    color: #174f65 !important;
    background: transparent;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
}

.mm-doctor-intro-action a:hover {
    background: #174f65;
    border-color: #174f65;
    color: #fff !important;
}

.mm-doctor-intro-action span {
    color: #b1874e;
    font-size: 17px;
    line-height: 1;
}

.mm-doctor-intro-action a:hover span {
    color: #fff;
}

@media (max-width: 760px) {
    .mm-doctor-intro {
        padding: 14px 0 18px;
    }

    .mm-doctor-intro-shell {
        grid-template-columns: 1fr;
        gap: 18px;
        width: calc(100% - 28px);
        padding: 22px 8px;
    }

    .mm-doctor-intro h2 {
        font-size: 30px;
    }

    .mm-doctor-intro p {
        font-size: 14px;
        line-height: 1.6;
    }
}


/* =========================================================
   v3.10.2 — moderan mini portret u bloku o liječnici
   ========================================================= */

.mm-doctor-intro {
    padding: 24px 0 28px !important;
}

.mm-doctor-intro-shell {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 34px !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.mm-doctor-intro-photo {
    position: relative;
    width: 150px;
    height: 185px;
    overflow: hidden;
    border-radius: 76px 76px 8px 8px;
    background: #eeeae2;
    box-shadow: 0 10px 30px rgba(23,79,101,.10);
}

.mm-doctor-intro-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: inherit;
    pointer-events: none;
}

.mm-doctor-intro-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
}

.mm-doctor-intro-copy {
    max-width: 780px !important;
    padding-right: 20px;
}

.mm-doctor-intro-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 15px;
    color: #174f65 !important;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none !important;
}

.mm-doctor-intro-link span {
    color: #b1874e;
    font-size: 18px;
    transition: transform .2s ease;
}

.mm-doctor-intro-link:hover span {
    transform: translateX(3px);
}

/* ukloni prethodni button styling ako ostane u cacheu */
.mm-doctor-intro-action {
    display: none !important;
}

@media (max-width: 760px) {
    .mm-doctor-intro-shell {
        grid-template-columns: 105px minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: start !important;
        width: calc(100% - 28px) !important;
    }

    .mm-doctor-intro-photo {
        width: 105px;
        height: 138px;
        border-radius: 54px 54px 7px 7px;
    }

    .mm-doctor-intro-copy {
        padding-right: 0;
    }

    .mm-doctor-intro-kicker {
        font-size: 9px !important;
        letter-spacing: .14em !important;
    }

    .mm-doctor-intro h2 {
        font-size: 25px !important;
    }

    .mm-doctor-intro p {
        margin-top: 9px !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 480px) {
    .mm-doctor-intro-shell {
        grid-template-columns: 88px minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .mm-doctor-intro-photo {
        width: 88px;
        height: 116px;
        border-radius: 46px 46px 6px 6px;
    }

    .mm-doctor-intro h2 {
        font-size: 22px !important;
    }

    .mm-doctor-intro p {
        font-size: 12.5px !important;
    }
}


/* =========================================================
   v3.10.3 — portret liječnice u čistom krugu
   ========================================================= */

.mm-doctor-intro-photo {
    width: 190px !important;
    height: 190px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 10px 28px rgba(23,79,101,.10) !important;
}

.mm-doctor-intro-photo::after {
    border-radius: 50% !important;
    border: 1px solid rgba(181,138,80,.20) !important;
}

.mm-doctor-intro-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 34% !important;
}

.mm-doctor-intro-shell {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 42px !important;
}

@media (max-width: 760px) {
    .mm-doctor-intro-photo {
        width: 120px !important;
        height: 120px !important;
    }

    .mm-doctor-intro-shell {
        grid-template-columns: 120px minmax(0, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    .mm-doctor-intro-photo {
        width: 96px !important;
        height: 96px !important;
    }

    .mm-doctor-intro-shell {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        gap: 15px !important;
    }
}


/* =========================================================
   v3.10.4 — recenzije ujednačene na maksimalno 2 reda
   ========================================================= */

.mm-testimonials-stage {
    min-height: 205px !important;
}

.mm-testimonial-slide {
    min-height: 96px !important;
}

.mm-testimonial-slide blockquote {
    max-width: 610px !important;
    font-size: clamp(19px, 1.65vw, 23px) !important;
    line-height: 1.45 !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;

    min-height: 2.9em !important;
    max-height: 2.9em !important;
}

.mm-review-author {
    margin-top: 10px !important;
}

@media (max-width: 900px) {
    .mm-testimonials-stage {
        min-height: 225px !important;
    }

    .mm-testimonial-slide blockquote {
        font-size: 18px !important;
    }
}

@media (max-width: 520px) {
    .mm-testimonials-stage {
        min-height: 235px !important;
    }

    .mm-testimonial-slide blockquote {
        font-size: 17px !important;
        line-height: 1.42 !important;
        min-height: 2.84em !important;
        max-height: 2.84em !important;
    }
}


/* =========================================================
   O NAMA v3.11.0 — nova unutarnja stranica
   ========================================================= */

.mm-about-page {
    background: #fbfaf6;
    color: #174f65;
}

.mm-about-kicker {
    color: #b1874e;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.mm-about-hero {
    padding: 54px 0 58px;
    background: linear-gradient(105deg, #f7f4ed 0%, #fbfaf6 68%, #f2eee5 100%);
}

.mm-about-hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 78px;
    align-items: center;
    width: min(1120px, calc(100% - 64px));
    margin: 0 auto;
}

.mm-about-hero-copy h1 {
    max-width: 680px;
    margin: 13px 0 0;
    color: #174f65;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(48px, 5vw, 68px);
    line-height: .98;
    font-weight: 400;
    letter-spacing: -.025em;
}

.mm-about-hero-copy p {
    max-width: 650px;
    margin: 22px 0 0;
    color: #58727b;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

.mm-about-hero-photo {
    width: 300px;
    height: 300px;
    justify-self: center;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 18px 48px rgba(23,79,101,.11);
}

.mm-about-hero-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 32%;
}

.mm-about-doctor {
    padding: 70px 0;
}

.mm-about-doctor-shell {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 90px;
    width: min(1040px, calc(100% - 64px));
    margin: 0 auto;
}

.mm-about-doctor-title h2 {
    margin: 12px 0 0;
    color: #174f65;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 42px;
    line-height: 1.02;
    font-weight: 400;
}

.mm-about-doctor-title > span {
    display: block;
    width: 54px;
    height: 2px;
    margin-top: 22px;
    background: #b1874e;
}

.mm-about-doctor-copy p {
    margin: 0 0 17px;
    color: #5b727a;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.75;
}

.mm-about-doctor-copy .mm-about-lead {
    color: #174f65;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 24px;
    line-height: 1.35;
}

.mm-about-values {
    padding: 0 0 70px;
}

.mm-about-values-shell {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: min(1040px, calc(100% - 64px));
    margin: 0 auto;
    border-top: 1px solid rgba(23,79,101,.11);
    border-bottom: 1px solid rgba(23,79,101,.11);
}

.mm-about-values article {
    padding: 32px 34px 34px;
}

.mm-about-values article + article {
    border-left: 1px solid rgba(23,79,101,.11);
}

.mm-about-values strong {
    color: #b1874e;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 400;
}

.mm-about-values h3 {
    margin: 9px 0 8px;
    color: #174f65;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 22px;
    font-weight: 400;
}

.mm-about-values p {
    margin: 0;
    color: #667c83;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
}

.mm-about-care {
    padding: 62px 0;
    background: #f2eee6;
}

.mm-about-care-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
    width: min(1040px, calc(100% - 64px));
    margin: 0 auto;
}

.mm-about-care h2 {
    margin: 12px 0 0;
    color: #174f65;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 39px;
    line-height: 1.08;
    font-weight: 400;
}

.mm-about-care p {
    margin: 0;
    color: #5c737b;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.75;
}

.mm-about-cta {
    padding: 48px 0;
    background: #fbfaf6;
}

.mm-about-cta-shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    width: min(1040px, calc(100% - 64px));
    margin: 0 auto;
}

.mm-about-cta h2 {
    margin: 10px 0 0;
    color: #174f65;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 35px;
    line-height: 1.08;
    font-weight: 400;
}

.mm-about-cta a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 0 20px;
    border: 1px solid #b1874e;
    border-radius: 4px;
    color: #174f65 !important;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
}

.mm-about-cta a:hover {
    background: #174f65;
    border-color: #174f65;
    color: #fff !important;
}

@media (max-width: 800px) {
    .mm-about-hero {
        padding: 36px 0 42px;
    }

    .mm-about-hero-shell {
        grid-template-columns: 1fr;
        gap: 30px;
        width: calc(100% - 32px);
    }

    .mm-about-hero-photo {
        order: -1;
        width: 190px;
        height: 190px;
        justify-self: start;
    }

    .mm-about-hero-copy h1 {
        font-size: 47px;
    }

    .mm-about-doctor {
        padding: 48px 0;
    }

    .mm-about-doctor-shell,
    .mm-about-care-shell {
        grid-template-columns: 1fr;
        gap: 25px;
        width: calc(100% - 32px);
    }

    .mm-about-values-shell {
        grid-template-columns: 1fr;
        width: calc(100% - 32px);
    }

    .mm-about-values article + article {
        border-left: 0;
        border-top: 1px solid rgba(23,79,101,.11);
    }

    .mm-about-values article {
        padding: 25px 8px;
    }

    .mm-about-care {
        padding: 44px 0;
    }

    .mm-about-cta-shell {
        flex-direction: column;
        align-items: flex-start;
        width: calc(100% - 32px);
    }

    .mm-about-cta a {
        width: 100%;
        justify-content: space-between;
    }
}


/* =========================================================
   HERO v3.11.1 — stvarna fotografija dr. Maje na naslovnici
   Konstrukcija i tekst desktop heroa ostaju nepromijenjeni.
   ========================================================= */

@media (min-width: 901px) {
    .mm-hero {
        background: #faf8f3 !important;
    }

    .mm-hero-visual {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        pointer-events: none;
    }

    .mm-hero-image-wrap,
    .mm-hero-image-wrap picture {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        overflow: hidden !important;
    }

    .mm-hero-image-wrap picture img {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 62% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: 57% 28% !important;
        transform: none !important;
    }

    .mm-hero-image-wrap::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 3 !important;
        inset: 0 !important;
        pointer-events: none !important;
        background: linear-gradient(
            90deg,
            #faf8f3 0%,
            #faf8f3 38%,
            rgba(250,248,243,.98) 42%,
            rgba(250,248,243,.88) 46%,
            rgba(250,248,243,.58) 50%,
            rgba(250,248,243,.22) 54%,
            rgba(250,248,243,0) 59%
        ) !important;
    }

    .mm-hero-image-wrap::after {
        display: none !important;
    }

    .mm-hero-copy {
        position: relative !important;
        z-index: 5 !important;
    }
}

@media (max-width: 900px) {
    .mm-hero-image-wrap picture img {
        object-fit: cover !important;
        object-position: 50% 26% !important;
    }
}