/* ==========================================================================
   Melas Custom Homepage — styles
   Scope: everything under .melas-hp so we don't fight the active theme.
   ========================================================================== */

.melas-hp {
    --mhp-bg: #f6f6f6;
    --mhp-bg-2: #ffffff;
    --mhp-text: #02110b;
    --mhp-muted: #5a6470;
    --mhp-brand: #5a90c9;
    --mhp-brand-dark: #4a7fb5;
    --mhp-teal: #169091;
    --mhp-cyan: #c9f3ff;
    --mhp-radius: 30px;
    --mhp-radius-lg: 256px;
    --mhp-shadow: 0 8px 30px rgba(20, 30, 50, .06);
    --mhp-shadow-hover: 0 18px 50px rgba(20, 30, 50, .12);
    --mhp-container: 1290px;
    --mhp-gap: clamp(24px, 4vw, 48px);

    font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--mhp-text);
    background: var(--mhp-bg);
    line-height: 1.6;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

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

.melas-hp img { max-width: 100%; height: auto; display: block; }
.melas-hp a { color: inherit; text-decoration: none; width: fit-content;}
.melas-hp ul { list-style: none; padding: 0px 32px; margin: 0; }
.melas-hp p { margin: 0; }
.melas-hp h1, .melas-hp h2, .melas-hp h3, .melas-hp h4 { margin: 0; font-weight: 400; }

.mhp-container {
    width: 100%;
    max-width: var(--mhp-container);
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 40px);
    position: relative;
}

/* ---------- Eyebrow ---------- */
.mhp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 400;
    color: var(--mhp-text);
    line-height: 1.3;
}
.mhp-eyebrow__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mhp-brand);
    flex-shrink: 0;
}

/* ---------- Headings ---------- */
.mhp-h2 {
    font-size: clamp(28px, 3.8vw, 50px);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: -.01em;
    margin: 14px 0 22px;
}

/* ---------- Buttons ---------- */
.mhp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    transition: background-color .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
    will-change: transform;
    cursor: pointer;
}
.mhp-btn--outline {
    border: 2px solid var(--mhp-brand);
    color: var(--mhp-text);
    background: transparent;
}
.mhp-btn--outline:hover {
    background: var(--mhp-brand);
    color: #fff;
}
.mhp-btn--white {
    background: #fff;
    color: var(--mhp-text);
    border: 2px solid #fff;
}
.mhp-btn--white:hover { transform: translateY(-2px); }
.mhp-btn__icon { display: inline-flex; }
/* Plus-in-circle icon variant (no stroke colour follow on the SVG fills) */
.mhp-btn__icon--plus svg { display: block; }
.mhp-btn--outline .mhp-btn__icon--plus { margin-left: 4px; }

/* Link arrow */
.mhp-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
    color: var(--mhp-brand);
    margin-top: auto;
}
.mhp-link svg { transition: transform .25s ease; }
.mhp-link:hover svg { transform: translate(3px, -3px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.mhp-hero {
    position: relative;
    background: var(--mhp-bg);
    border-radius: 0 0 var(--mhp-radius) var(--mhp-radius);
    overflow: hidden;
    padding-top: clamp(140px, 8vw, 130px);
    padding-bottom: clamp(120px, 14vw, 200px);
}
/* Soft mint/cyan gradient occupying the left half of the hero. */
.mhp-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 12% 65%, rgba(22, 144, 145, .28), transparent 70%),
        radial-gradient(55% 55% at -5% 18%, rgba(201, 243, 255, .85), transparent 75%),
        radial-gradient(40% 40% at 30% 40%, rgba(155, 215, 220, .25), transparent 80%);
    filter: blur(40px);
}

.mhp-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mhp-gap);
    align-items: center;
    position: relative;
    z-index: 2;
}
.mhp-hero__title {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 200;
    line-height: 1.2;
    letter-spacing: -.005em;
}
.mhp-hero__subtitle {
    margin-top: 22px;
    color: #02110b;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 200;
}

.mhp-hero__content > .mhp-btn { margin-top: 32px; }

/* Hero media — arched photo + circular text badge */
.mhp-hero__media {
    position: relative;
    aspect-ratio: 513 / 641;
    max-width: 513px;
    margin-inline-start: auto;
    width: 100%;
}
.mhp-hero__photo {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--mhp-radius-lg) var(--mhp-radius-lg) 8px 8px;
    overflow: hidden;
    background: #f0f5f5;
    z-index: 1;
}
.mhp-hero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* Soft teal "paper" shape offset to the bottom-right behind the arch — gives the photo a layered shadow look. */
.mhp-hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--mhp-radius-lg) var(--mhp-radius-lg) 8px 8px;
    background: rgba(22, 144, 145, .25);
    transform: translate(14px, 14px);
    pointer-events: none;
    z-index: 0;
}

/* Circular text badge */
.mhp-badge {
    position: absolute;
    width: 198px;
    height: 198px;
    background: #fff;
    border-radius: 50%;
    bottom: 60px;
    left: -45px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mhp-shadow);
    z-index: 3;
}
.mhp-badge__text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: mhp-spin 24s linear infinite;
}
@keyframes mhp-spin {
    to { transform: rotate(360deg); }
}
.mhp-badge__mark {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Giant background word */
.mhp-hero__bigword {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    text-align: left;
    padding-inline: clamp(20px, 4vw, 40px);
    font-size: clamp(60px, 11vw, 156px);
    font-weight: 200;
    color: transparent;
    -webkit-text-stroke: 1px rgba(22, 144, 145, .35);
    letter-spacing: .02em;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}

/* ==========================================================================
   CARD ROW (overlapping hero)
   ========================================================================== */
.mhp-cards-row {
    position: relative;
    z-index: 4;
    margin-top: -90px;
}
.mhp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.mhp-card {
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--mhp-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.mhp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mhp-shadow-hover);
}
.mhp-card__title {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--mhp-text);
    margin-bottom: 16px;
}
.mhp-card__text {
    color: var(--mhp-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-top: auto;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.mhp-about {
    padding: clamp(80px, 9vw, 140px) 0 clamp(60px, 7vw, 110px);
}
.mhp-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}
.mhp-about__media {
    position: relative;
    aspect-ratio: 586 / 586;
    border-radius: 24px;
    overflow: hidden;
    background: #e9e9e9;
}
.mhp-about__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mhp-about__lead {
    color: var(--mhp-muted);
    font-size: 15px;
    margin-bottom: 30px;
    line-height: 1.85;
}

.mhp-checklist { display: grid; gap: 18px; margin-bottom: 36px; }
.mhp-checklist li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 14px;
    align-items: start;
    font-size: 15px;
    line-height: 1.55;
    color: var(--mhp-text);
}
.mhp-checklist__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--mhp-brand);
    position: relative;
    margin-top: 3px;
}
.mhp-checklist__icon::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--mhp-brand);
    border-radius: 50%;
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.mhp-services {
    position: relative;
    padding: clamp(70px, 8vw, 120px) 0;
    overflow: hidden;
}
.mhp-services__blob {
    position: absolute;
    width: clamp(500px, 60vw, 960px);
    height: clamp(500px, 60vw, 960px);
    right: -10vw;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(201, 243, 255, .55), rgba(90, 144, 201, .12) 60%, transparent 80%);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}
.mhp-services > .mhp-container { position: relative; z-index: 1; }

.mhp-services__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.mhp-services__header .mhp-h2 { max-width: 700px; }
.mhp-services__nav { display: flex; gap: 10px; }
.mhp-navbtn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(2, 17, 11, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mhp-text);
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.mhp-navbtn:hover {
    background: var(--mhp-brand);
    color: #fff;
    border-color: var(--mhp-brand);
}

.mhp-services__track {
    --mhp-slide-gap: 30px;
    --mhp-slides-per-view: 3;
    display: flex;
    gap: var(--mhp-slide-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Vertical padding only — gives the soft drop-shadow room to breathe instead of being clipped by overflow-x. */
    padding: 24px 0 40px;
}
.mhp-services__track::-webkit-scrollbar { display: none; }
.mhp-services__track .mhp-service {
    flex: 0 0 calc((100% - (var(--mhp-slides-per-view) - 1) * var(--mhp-slide-gap)) / var(--mhp-slides-per-view));
    scroll-snap-align: start;
    min-width: 0;
}

.mhp-service {
    background: #fff;
    border-radius: 22px;
    padding: 0 0 36px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Layered shadow: a tight contact shadow + a soft ambient one — feels more natural than a single big blur. */
    box-shadow:
        0 1px 2px rgba(20, 30, 50, .04),
        0 12px 28px -10px rgba(20, 30, 50, .12);
    transition: transform .3s ease, box-shadow .3s ease;
}
.mhp-service:hover {
    transform: translateY(-4px);
    box-shadow:
        0 2px 4px rgba(20, 30, 50, .05),
        0 24px 44px -14px rgba(20, 30, 50, .18);
}
.mhp-service__media {
    display: block;
    aspect-ratio: 410 / 300;
    overflow: hidden;
}
.mhp-service__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.mhp-service:hover .mhp-service__media img { transform: scale(1.04); }
.mhp-service__title {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--mhp-text);
    padding: 32px 40px 20px;
}
.mhp-service__title a { transition: color .2s ease; }
.mhp-service__title a:hover { color: var(--mhp-brand); }
.mhp-service__list { padding: 0 40px; margin-bottom: 28px; }
.mhp-service__list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 12px;
    color: var(--mhp-muted);
    font-size: 15px;
    line-height: 1.5;
}
.mhp-service__list li::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mhp-brand);
    left: 0;
    top: 9px;
}
.mhp-service .mhp-link { padding: 0 40px; }

/* ==========================================================================
   CTA
   ========================================================================== */
.mhp-cta {
    padding: clamp(40px, 6vw, 80px) 0;
}
.mhp-cta__inner {
    background: var(--mhp-brand);
    border-radius: 28px;
    color: #fff;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 379px) 1fr;
    align-items: stretch;
    min-height: 280px;
}
.mhp-cta__media {
    position: relative;
    align-self: end;
}
.mhp-cta__media img {
    display: block;
    max-height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: bottom center;
}
.mhp-cta__content {
    padding: clamp(28px, 5vw, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
}
.mhp-cta__title {
    font-size: clamp(26px, 3.4vw, 46px);
    line-height: 1.15;
    font-weight: 300;
    color: #fff;
    max-width: 600px;
}
/* CTA button: white pill with dark label + brand-blue plus-circle icon */
.mhp-cta .mhp-btn--white {
    align-self: start;
    background: #fff;
    border: 2px solid #fff;
    color: var(--mhp-text) !important;
    padding: 18px 36px;
}
.mhp-cta .mhp-btn--white .mhp-btn__label { color: var(--mhp-text) !important; }
.mhp-cta .mhp-btn--white:hover { transform: translateY(-1px); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.mhp-contact {
    padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 110px);
}
.mhp-contact__grid {
    background: #fff;
    border-radius: 28px;
    padding: clamp(40px, 6vw, 80px) clamp(40px, 6vw, 80px) 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: end;
    overflow: hidden; /* clips the form's flat bottom corners to follow the card's rounded edge */
    box-shadow:
        0 1px 2px rgba(20, 30, 50, .04),
        0 18px 40px -16px rgba(20, 30, 50, .12);
}
/* Left intro sits at the top of the card, not aligned with the form bottom. */
.mhp-contact__intro {     
    align-self: center;
    padding-bottom: clamp(40px, 6vw, 80px);
    gap: 24px;
    display: flex;
    flex-direction: column; }
/* Form anchors to the bottom of the card; only its top corners are rounded so it sits flush with the card's bottom edge. */
.mhp-contact .mhp-form {
    border-radius: 28px 28px 0 0;
    margin-bottom: 0;
}
.mhp-contact__intro .mhp-h2 { max-width: 520px; }
.mhp-contact__text {
    color: var(--mhp-muted);
    font-size: 15px;
    line-height: 1.8;
    max-width: 480px;
}

.mhp-form {
    background: var(--mhp-brand);
    color: #fff;
    border-radius: 22px;
    padding: clamp(28px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mhp-form__title {
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 12px;
}
.mhp-form__notice {
    background: rgba(255, 255, 255, .15);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
}
.mhp-form__notice--ok { background: rgba(0, 160, 80, .25); }
.mhp-form__notice--err { background: rgba(220, 60, 60, .3); }

.mhp-field { display: block; }
.mhp-field__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.mhp-about__content {
    gap: 24px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
}
.mhp-field input,
.mhp-field textarea {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 12px;
    padding: 18px 22px;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font: inherit;
    font-size: 15px;
    transition: border-color .2s ease, background-color .2s ease;
}
.mhp-field input::placeholder,
.mhp-field textarea::placeholder {
    color: #fff !important;
    opacity: .85;
    -webkit-text-fill-color: #fff;
}
.mhp-field input:focus,
.mhp-field textarea:focus {
    outline: none;
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
}
.mhp-field textarea { resize: vertical; min-height: 110px; }

.mhp-form__submit {
    margin-top: 6px;
    background: #fff;
    color: var(--mhp-text);
    border: none;
    border-radius: 999px;
    padding: 18px;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease;
}
.mhp-form__submit:hover {
    color: var(--mhp-brand);
    transform: translateY(-1px);
}

/* ----- Contact Form 7 integration -----
   Styles target CF7's default markup when the [contact-form-7] shortcode is
   rendered inside .mhp-form, so the blue card chrome looks the same as the
   hand-rolled form did. */
.mhp-form .wpcf7 { margin: 0; }
.mhp-form .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
.mhp-form .wpcf7-form p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mhp-form .wpcf7-form label { color: #fff; font-size: 14px; opacity: .9; }
.mhp-form .wpcf7-form-control-wrap { display: block; }

.mhp-form input[type="text"],
.mhp-form input[type="email"],
.mhp-form input[type="tel"],
.mhp-form input[type="url"],
.mhp-form input[type="number"],
.mhp-form input[type="date"],
.mhp-form textarea,
.mhp-form select {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 12px;
    padding: 18px 22px;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font: inherit;
    font-size: 15px;
    transition: border-color .2s ease, background-color .2s ease;
}
.mhp-form input::placeholder,
.mhp-form textarea::placeholder {
    color: #fff !important;
    opacity: .85;
    -webkit-text-fill-color: #fff;
}
.mhp-form input:focus,
.mhp-form textarea:focus,
.mhp-form select:focus {
    outline: none;
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
}
.mhp-form textarea { resize: vertical; min-height: 110px; }

.mhp-form input[type="submit"],
.mhp-form button[type="submit"],
.mhp-form .wpcf7-submit {
    width: 100%;
    margin-top: 6px;
    background: #fff;
    color: var(--mhp-text) !important;
    -webkit-text-fill-color: var(--mhp-text);
    border: none;
    border-radius: 999px;
    padding: 18px;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease;
}
.mhp-form input[type="submit"]:hover,
.mhp-form button[type="submit"]:hover,
.mhp-form .wpcf7-submit:hover {
    color: var(--mhp-brand) !important;
    transform: translateY(-1px);
}

/* CF7 status / validation messages */
.mhp-form .wpcf7 form.invalid .wpcf7-response-output,
.mhp-form .wpcf7 form.unaccepted .wpcf7-response-output,
.mhp-form .wpcf7 form.sent .wpcf7-response-output,
.mhp-form .wpcf7-response-output {
    margin: 12px 0 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 14px;
}
.mhp-form .wpcf7 form.sent .wpcf7-response-output {
    background: rgba(0, 160, 80, .3);
}
.mhp-form .wpcf7 form.invalid .wpcf7-response-output,
.mhp-form .wpcf7 form.unaccepted .wpcf7-response-output {
    background: rgba(220, 60, 60, .3);
}
.mhp-form .wpcf7-not-valid-tip {
    color: #ffdede;
    font-size: 13px;
    margin-top: 4px;
}
.mhp-form .wpcf7-spinner {
    background-color: #fff;
    margin-left: -10px;
    align-self: center;
}

/* ==========================================================================
   ARTICLES
   ========================================================================== */
.mhp-articles {
    padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 10vw, 140px);
    background: var(--mhp-bg);
}
.mhp-articles__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: end;
    margin-bottom: 50px;
}
.mhp-articles__header .mhp-h2 { max-width: 600px; }
.mhp-articles__text {
    color: var(--mhp-muted);
    font-size: 15px;
    line-height: 1.85;
}

.mhp-articles__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.mhp-article {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--mhp-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.mhp-article:hover {
    transform: translateY(-4px);
    box-shadow: var(--mhp-shadow-hover);
}
.mhp-article__title {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 14px;
    color: var(--mhp-text);
}
.mhp-article__title a:hover { color: var(--mhp-brand); }
.mhp-article__excerpt {
    color: var(--mhp-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* Both articles use the same vertical stack: image on top, title + excerpt below.
   The lead article has a taller image (16:9-ish); the side article uses a shorter,
   wider crop so the second card stays compact. */
.mhp-article__media {
    display: block;
    overflow: hidden;
}
.mhp-article__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.mhp-article:hover .mhp-article__media img { transform: scale(1.04); }

.mhp-article__title,
.mhp-article__excerpt { padding-inline: 36px; }
.mhp-article__title { padding-top: 30px; }
.mhp-article__excerpt { padding-bottom: 36px; }

.mhp-article--lead .mhp-article__media { aspect-ratio: 605 / 313; }

.mhp-article--side {
    align-self: start;
}
.mhp-article--side .mhp-article__media { aspect-ratio: 605 / 240; }
.mhp-article--side .mhp-article__body { display: contents; }

/* ==========================================================================
   REVEAL ANIMATIONS (pure CSS + tiny JS observer)
   ========================================================================== */
.mhp-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s ease, transform .8s ease;
    transition-delay: var(--mhp-reveal-delay, 0ms);
}
.mhp-reveal[data-reveal="fade"]    { transform: translateY(0); opacity: 0; }
.mhp-reveal[data-reveal="fade-up"] { transform: translateY(24px); }
.mhp-reveal[data-reveal="words"]   { transform: none; opacity: 1; }

.mhp-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Word-by-word reveal (used on big headings) */
.mhp-reveal[data-reveal="words"] .mhp-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.mhp-reveal[data-reveal="words"] .mhp-word > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform .7s cubic-bezier(.16,.84,.3,1);
    transition-delay: calc(var(--mhp-word-i, 0) * 50ms);
}
.mhp-reveal[data-reveal="words"].is-visible .mhp-word > span {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .mhp-reveal,
    .mhp-reveal[data-reveal="words"] .mhp-word > span,
    .mhp-badge__text {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    .mhp-services__track { --mhp-slides-per-view: 2; }
    .mhp-articles__header { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
    .mhp-hero__grid { grid-template-columns: 1fr; }
    .mhp-hero__media { max-width: 420px; margin-inline: auto; }
    .mhp-hero__bigword { font-size: clamp(48px, 14vw, 90px); bottom: 16px; }
    .mhp-cards { grid-template-columns: 1fr; gap: 16px; }
    .mhp-cards-row { margin-top: -50px; }
    .mhp-card { min-height: auto; }
    .mhp-about__grid { grid-template-columns: 1fr; }
    .mhp-services__header { flex-direction: column; align-items: start; }
    .mhp-services__track { --mhp-slides-per-view: 1; }
    .mhp-cta__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .mhp-cta__content {
        order: 1;
        padding: clamp(36px, 8vw, 56px) clamp(24px, 6vw, 40px) clamp(24px, 5vw, 32px);
        align-items: center;
        gap: 24px;
    }
    .mhp-cta__title { text-align: center; margin-inline: auto; }
    .mhp-cta .mhp-btn--white { align-self: center; }
    .mhp-cta__media {
        order: 2;
        max-height: none;
        padding: 0 clamp(24px, 8vw, 40px);
    }
    .mhp-cta__media img {
        max-height: 420px;
        margin-inline: auto;
        object-fit: contain;
        object-position: bottom center;
    }
    .mhp-contact__grid { grid-template-columns: 1fr; }
    .mhp-articles__grid { grid-template-columns: 1fr; }
    .mhp-article--side .mhp-article__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 520px) {
    .mhp-badge { width: 140px; height: 140px; bottom: 30px; left: -18px; }
    .mhp-badge svg { width: 140px; height: 140px; }
    .mhp-service__title,
    .mhp-service__list,
    .mhp-service .mhp-link,
    .mhp-article__title,
    .mhp-article__excerpt { padding-inline: 24px; }
    .mhp-card { padding: 24px; }
    .mhp-contact__grid{ padding: clamp(17px, 6vw, 80px) clamp(11px, 4vw, 80px) 0; }
}