html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Shared scroll motion stays smooth and keeps homepage sections inside the viewport. */
.mmk-space-section {
    width: auto;
    max-width: 100%;
    margin: 20px;
}
[data-aos] {
    will-change: opacity, transform;
}
@media (max-width: 767px) {
    .mmk-space-section {
        min-height: 0;
        padding: 72px 20px 52px;
        border-radius: 18px;
    }
    .mmk-space-cards {
        grid-template-columns: 1fr;
    }
    .mmk-space-card {
        height: 290px;
    }
}
@media (max-width: 480px) {
    .mmk-space-section {
        padding: 58px 16px 42px;
    }
}

/* Homepage white-section detail and typography system. */
html body {
    font-family: "Sora", sans-serif !important;
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Keep icon-font elements on their own font while giving all page copy Sora. */
html body :not(i):not(svg) {
    font-family: "Sora", sans-serif !important;
}

html body :is(p, li, blockquote, .mmk-about-intro, .mmk-about-copy, .mmk-process-description,
    .mmk-feature-content p, .mmk-why-intro, .mmk-space-bottom, .mmk-premium-brands-description,
    .mkm-experience-description, .mkm-experience-address, .mkm-location-text) {
    font-size: clamp(14px, 0.95vw, 16px) !important;
    line-height: 1.75 !important;
    font-weight: 400;
}

html body :is(h1, h2, h3, h4, h5, h6) {
    font-family: "Sora", sans-serif !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em;
    font-weight: 650;
}

html body :is(.mmk-hero .mmk-title, .mkm-hero-title) {
    font-size: clamp(36px, 5vw, 70px) !important;
    line-height: 1.12 !important;
    font-weight: 700;
}

html body :is(.mmk-about-title, .mmk-process-title, .mmk-space-heading h2,
    .mmk-why-title, .mmk-premium-brands-title, .mkm-experience-title,
    .mkm-message-title, .mkm-reels-title) {
    font-size: clamp(27px, 3.2vw, 44px) !important;
    line-height: 1.2 !important;
    font-weight: 650;
}

html body :is(.mmk-feature-content h3, .mmk-space-card h3, .mmk-why-card h3,
    .mkm-experience-company, .mkm-contact-panel-text h3) {
    font-size: clamp(18px, 1.65vw, 23px) !important;
    line-height: 1.35 !important;
    font-weight: 600;
}

html body :is(button, input, select, textarea, label) {
    font-family: "Sora", sans-serif !important;
    line-height: 1.5;
}

@media (max-width: 767px) {
    html body {
        font-size: 15px;
        line-height: 1.65;
    }

    html body :is(.mmk-hero .mmk-title, .mkm-hero-title) {
        font-size: clamp(31px, 8.2vw, 48px) !important;
        line-height: 1.12 !important;
    }

    html body :is(.mmk-about-title, .mmk-process-title, .mmk-space-heading h2,
        .mmk-why-title, .mmk-premium-brands-title, .mkm-experience-title,
        .mkm-message-title, .mkm-reels-title) {
        font-size: clamp(25px, 7vw, 34px) !important;
    }
}

/* Restrained background patterns on exactly two homepage sections. */
html body .mmk-about-section {
    background-color: #fff !important;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(36, 80, 31, 0.035) 0,
        rgba(36, 80, 31, 0.035) 1px,
        transparent 1px,
        transparent 22px
    ) !important;
    background-size: auto !important;
}

html body .mmk-why-section {
    background-color: #fff !important;
    background-image:
        radial-gradient(circle at 88% 18%, transparent 0 82px, rgba(36, 80, 31, 0.075) 83px 84px, transparent 85px 116px, rgba(223, 58, 38, 0.055) 117px 118px, transparent 119px),
        radial-gradient(circle at 8% 86%, transparent 0 58px, rgba(36, 80, 31, 0.055) 59px 60px, transparent 61px),
        linear-gradient(135deg, transparent 49.7%, rgba(36, 80, 31, 0.025) 50%, transparent 50.3%) !important;
    background-size: auto, auto, 88px 88px !important;
}
/* Fixed parallax image for the secondary homepage hero. */
html body .mkm-hero-bg {
    background-image: url("../images/banner-01.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed !important;
}

html body .mkm-hero-bg img {
    opacity: 0 !important;
}