/* ==========================================================================
   Mission Hope Foundation — Homepage
   Standalone stylesheet for resources/views/Admin/Auth/landing.blade.php.
   Breakpoints: desktop >= 1200px, tablet 768–1199px, mobile 320–767px.
   ========================================================================== */

:root {
    --mh-navy: #0a2d6c;
    --mh-navy-700: #062457;
    --mh-navy-600: #12397f;
    --mh-navy-soft: #7488b4;
    --mh-maroon: #9c0b2f;
    --mh-maroon-700: #7f0725;
    --mh-maroon-soft: #b0405a;
    --mh-ink: #1f2b42;
    --mh-ink-soft: #46526a;
    --mh-gray-50: #f6f8fb;
    --mh-gray-100: #eef2f7;
    --mh-gray-200: #e1e7f0;
    --mh-gray-300: #cdd6e3;
    --mh-white: #ffffff;
    --mh-radius: 10px;
    --mh-radius-sm: 6px;
    --mh-shadow: 0 1px 2px rgba(10, 45, 108, .06), 0 6px 18px rgba(10, 45, 108, .07);
    --mh-shadow-hover: 0 2px 4px rgba(10, 45, 108, .08), 0 12px 28px rgba(10, 45, 108, .12);
    --mh-font: 'Figtree', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mh-gutter: clamp(16px, 4vw, 40px);
    --mh-header-h: 72px;
}

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

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

body.mh-home {
    margin: 0;
    font-family: var(--mh-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--mh-ink);
    background: var(--mh-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mh-home img { max-width: 100%; height: auto; display: block; }
.mh-home a { color: inherit; }
.mh-home h1, .mh-home h2, .mh-home h3, .mh-home p { margin: 0; }
.mh-home ul { margin: 0; padding: 0; list-style: none; }
.mh-home button { font: inherit; }

.mh-icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: middle; }

.mh-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.mh-skip {
    position: absolute; left: 16px; top: -60px; z-index: 1000;
    padding: 10px 16px; border-radius: var(--mh-radius-sm);
    background: var(--mh-navy); color: #fff !important; text-decoration: none; font-weight: 600;
}
.mh-skip:focus { top: 12px; }

.mh-home :focus-visible { outline: 3px solid rgba(156, 11, 47, .55); outline-offset: 2px; }

.mh-container {
    width: 100%;
    max-width: 1840px;
    margin: 0 auto;
    padding-left: var(--mh-gutter);
    padding-right: var(--mh-gutter);
}

/* ---------- Buttons ---------- */
.mh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .65em;
    padding: .72em 1.35em;
    border: 2px solid transparent; border-radius: var(--mh-radius-sm);
    font-family: var(--mh-font); font-weight: 600; font-size: 1rem; line-height: 1.15;
    text-decoration: none; text-align: center; cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mh-btn:hover { transform: translateY(-1px); text-decoration: none; }
.mh-btn__arrow { font-size: 1.15em; transition: transform .18s ease; }
.mh-btn:hover .mh-btn__arrow { transform: translateX(3px); }

.mh-btn--navy { background: var(--mh-navy); border-color: var(--mh-navy); color: #fff !important; }
.mh-btn--navy:hover { background: var(--mh-navy-700); border-color: var(--mh-navy-700); box-shadow: 0 6px 16px rgba(10, 45, 108, .25); }

.mh-btn--maroon { background: var(--mh-maroon); border-color: var(--mh-maroon); color: #fff !important; }
.mh-btn--maroon:hover { background: var(--mh-maroon-700); border-color: var(--mh-maroon-700); box-shadow: 0 6px 16px rgba(156, 11, 47, .25); }

.mh-btn--outline-maroon { background: #fff; border-color: var(--mh-maroon); color: var(--mh-maroon) !important; }
.mh-btn--outline-maroon:hover { background: #fff5f7; box-shadow: 0 6px 16px rgba(156, 11, 47, .14); }

.mh-btn--lg { font-size: clamp(1rem, .55rem + .55vw, 1.2rem); padding: .8em 1.4em; min-height: 54px; }
.mh-btn--sm { font-size: .95rem; padding: .66em 1.2em; }

.mh-btn--account {
    background: #fff; border-color: var(--mh-maroon); color: var(--mh-maroon) !important;
    font-size: 15px; padding: 8px 18px; white-space: nowrap; border-radius: 4px;
}
.mh-btn--account:hover { background: var(--mh-maroon); color: #fff !important; transform: none; }

/* ---------- Header ---------- */
.mh-header {
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    border-bottom: 4px solid var(--mh-navy);
}
.mh-header__inner {
    max-width: 1840px; margin: 0 auto;
    height: var(--mh-header-h);
    padding: 0 var(--mh-gutter);
    display: flex; align-items: center; gap: 24px;
}
.mh-header__logo { flex: none; display: block; }
.mh-header__logo img { width: clamp(210px, 17vw, 310px); }

.mh-header__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }

.mh-burger {
    display: none;
    width: 44px; height: 44px; padding: 6px;
    border: 0; background: transparent; color: var(--mh-navy);
    cursor: pointer; border-radius: var(--mh-radius-sm);
}
.mh-burger .mh-icon { width: 32px; height: 32px; }
.mh-burger__close { display: none !important; }
.mh-nav-open .mh-burger__open { display: none !important; }
.mh-nav-open .mh-burger__close { display: inline-block !important; }

/* Desktop navigation */
.mh-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.mh-nav__list { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 38px); }
.mh-nav__item { position: relative; }
.mh-nav__row { display: flex; align-items: center; }
.mh-nav__link {
    display: block; padding: 24px 0;
    font-size: clamp(12.5px, .55vw + 5.5px, 14.5px); font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; white-space: nowrap;
    color: var(--mh-navy) !important; text-decoration: none;
    transition: color .15s ease;
}
.mh-nav__link--label { cursor: default; }
.mh-nav__item:hover > .mh-nav__row .mh-nav__link,
.mh-nav__item:hover > .mh-nav__link,
.mh-nav__link:focus-visible { color: var(--mh-maroon) !important; }

.mh-nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 28px; margin-left: 2px; padding: 0;
    border: 0; background: transparent; color: var(--mh-navy); cursor: pointer;
}
.mh-nav__toggle .mh-icon { width: 14px; height: 14px; transition: transform .18s ease; }
.mh-nav__item:hover > .mh-nav__row .mh-nav__toggle { color: var(--mh-maroon); }

.mh-nav__sub {
    position: absolute; top: calc(100% - 6px); left: -16px; z-index: 20;
    min-width: 240px; padding: 8px;
    background: #fff; border: 1px solid var(--mh-gray-200); border-top: 3px solid var(--mh-maroon);
    border-radius: 0 0 var(--mh-radius) var(--mh-radius);
    box-shadow: var(--mh-shadow-hover);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.mh-nav__sub--nested { top: -9px; left: 100%; border-top-width: 1px; border-radius: var(--mh-radius); }
.mh-nav__subitem { position: relative; }
.mh-nav__subitem .mh-nav__row { justify-content: space-between; }
.mh-nav__sublink {
    display: block; flex: 1 1 auto;
    padding: 9px 12px; border-radius: var(--mh-radius-sm);
    font-size: 14px; font-weight: 600; color: var(--mh-ink) !important; text-decoration: none;
}
.mh-nav__sublink:hover, .mh-nav__sublink:focus-visible { background: var(--mh-gray-100); color: var(--mh-navy) !important; }

/* Desktop dropdown behaviour (any width where the full menu fits on one line). */
@media (hover: hover) {
    html:not(.mh-nav-drawer) .mh-nav__item.has-children:hover > .mh-nav__sub,
    html:not(.mh-nav-drawer) .mh-nav__subitem.has-children:hover > .mh-nav__sub { opacity: 1; visibility: visible; transform: none; }
}
html:not(.mh-nav-drawer) .mh-nav__item.is-open > .mh-nav__sub,
html:not(.mh-nav-drawer) .mh-nav__subitem.is-open > .mh-nav__sub,
html:not(.mh-nav-drawer) .mh-nav__item.has-children:focus-within > .mh-nav__sub,
html:not(.mh-nav-drawer) .mh-nav__subitem.has-children:focus-within > .mh-nav__sub { opacity: 1; visibility: visible; transform: none; }
html:not(.mh-nav-drawer) .mh-nav__item.is-open > .mh-nav__row .mh-nav__toggle .mh-icon { transform: rotate(180deg); }
html:not(.mh-nav-drawer) .mh-nav__extras { display: none; }

/*
 * The header script (resources/views/Admin/Auth/home/header.blade.php) measures the menu:
 * if it does not fit on one line it first tries "tight" spacing, then falls back to the
 * hamburger drawer. This keeps long admin-entered menu names from overlapping the logo
 * or the My Account button at any screen width.
 */
html.mh-nav-tight .mh-header__inner { gap: 16px; }
html.mh-nav-tight .mh-header__logo img { width: 200px; }
html.mh-nav-tight .mh-nav__list { gap: 14px; }
html.mh-nav-tight .mh-nav__link { font-size: 12.5px; letter-spacing: 0; }
html.mh-nav-tight .mh-nav__toggle { width: 18px; margin-left: 0; }
html.mh-nav-tight .mh-btn--account { padding: 7px 14px; font-size: 14px; }

@media (max-width: 1199.98px) {
    :root { --mh-header-h: 68px; }
}

/* Hamburger drawer (tablet/mobile, or desktop when the menu is too long to fit) */
html.mh-nav-drawer .mh-burger { display: inline-flex; align-items: center; justify-content: center; }
html.mh-nav-drawer .mh-header__actions { gap: 8px; }
html.mh-nav-drawer .mh-nav {
    position: fixed; left: 0; right: 0; bottom: 0;
    top: calc(var(--mh-header-h) + 4px);
    display: block;
    background: #fff;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--mh-gutter) 32px;
    border-top: 1px solid var(--mh-gray-200);
    box-shadow: 0 18px 30px rgba(10, 45, 108, .12);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
html.mh-nav-drawer .mh-nav-open .mh-nav { transform: none; opacity: 1; visibility: visible; }
html.mh-nav-drawer .mh-nav-open { overflow: hidden; }
html.mh-nav-drawer .mh-nav__list { display: block; max-width: 720px; margin: 0 auto; }
html.mh-nav-drawer .mh-nav__item { border-bottom: 1px solid var(--mh-gray-200); }
html.mh-nav-drawer .mh-nav__row { justify-content: space-between; }
html.mh-nav-drawer .mh-nav__link { padding: 16px 0; font-size: 16px; flex: 1 1 auto; }
html.mh-nav-drawer .mh-nav__toggle { width: 44px; height: 44px; margin: 0; border-radius: var(--mh-radius-sm); }
html.mh-nav-drawer .mh-nav__toggle .mh-icon { width: 18px; height: 18px; }
html.mh-nav-drawer .mh-nav__toggle--sub .mh-icon { transform: rotate(90deg); }
html.mh-nav-drawer .mh-nav__item.is-open > .mh-nav__row .mh-nav__toggle .mh-icon { transform: rotate(180deg); }
html.mh-nav-drawer .mh-nav__subitem.is-open > .mh-nav__row .mh-nav__toggle--sub .mh-icon { transform: rotate(270deg); }
html.mh-nav-drawer .mh-nav__sub,
html.mh-nav-drawer .mh-nav__sub--nested {
    position: static; display: none;
    min-width: 0; padding: 0 0 12px 12px; margin: 0;
    border: 0; border-left: 3px solid var(--mh-maroon); border-radius: 0;
    box-shadow: none; opacity: 1; visibility: visible; transform: none;
    background: transparent;
    }
html.mh-nav-drawer .mh-nav__sub--nested { margin-left: 8px; border-left-color: var(--mh-gray-300); padding-bottom: 4px; }
html.mh-nav-drawer .mh-nav__item.is-open > .mh-nav__sub,
html.mh-nav-drawer .mh-nav__subitem.is-open > .mh-nav__sub { display: block; }
html.mh-nav-drawer .mh-nav__sublink { font-size: 15px; padding: 10px 12px; }
html.mh-nav-drawer .mh-nav__extras { max-width: 720px; margin: 24px auto 0; }
html.mh-nav-drawer .mh-nav__extras-title {
    margin-bottom: 10px !important;
    font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mh-navy-soft);
    }
html.mh-nav-drawer .mh-nav__quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
html.mh-nav-drawer .mh-nav__quick a {
    display: block; padding: 8px 0;
    font-size: 15px; font-weight: 600; color: var(--mh-ink) !important; text-decoration: none;
    }
html.mh-nav-drawer .mh-nav__quick a:hover { color: var(--mh-maroon) !important; }
html.mh-nav-drawer .mh-nav__meta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mh-gray-200);
    }
html.mh-nav-drawer .mh-nav__donate { width: 100%; margin-top: 18px; }
html.mh-nav-drawer .mh-nav__phone {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; color: var(--mh-navy) !important; text-decoration: none;
    }

/* ---------- Language select ---------- */
.mh-lang {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px; border: 1px solid var(--mh-gray-300); border-radius: var(--mh-radius-sm);
    background: #fff; color: var(--mh-navy);
}
.mh-lang .mh-icon { width: 18px; height: 18px; }
.mh-lang__select {
    border: 0; background: transparent; color: var(--mh-ink);
    font: 600 14px/1.2 var(--mh-font); max-width: 180px; cursor: pointer;
}
.mh-lang__select:focus { outline: none; }

/* ---------- Alerts / announcement ---------- */
.mh-alert {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin: 16px 0 0; padding: 12px 16px;
    border-radius: var(--mh-radius-sm); border: 1px solid var(--mh-gray-200);
    background: var(--mh-gray-50); font-weight: 600;
}
.mh-alert--success { background: #edf8f1; border-color: #bfe3cc; color: #1b5e37; }
.mh-alert--danger, .mh-alert--error { background: #fdf0f2; border-color: #f0c2cc; color: var(--mh-maroon-700); }
.mh-alert--warning { background: #fff8e8; border-color: #f1dca6; color: #7a5a00; }
.mh-alert__close { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }

.mh-announcement { background: var(--mh-gray-50); border-bottom: 1px solid var(--mh-gray-200); padding: 14px 0; }

/* ---------- Hero ---------- */
.mh-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
}
.mh-hero__media {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 59%; z-index: -1;
}
.mh-hero__media a { display: block; height: 100%; }
.mh-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mh-hero__media--left img { object-position: left center; }
.mh-hero__media--right img { object-position: right center; }
.mh-hero__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, #f3f6fa 0%, rgba(243, 246, 250, .85) 5%, rgba(243, 246, 250, .35) 11%, rgba(243, 246, 250, 0) 18%);
}

/* Navy + maroon corner accent from the brand mockup */
.mh-hero__stripe {
    position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none;
    width: clamp(90px, 7.4vw, 140px); aspect-ratio: 140 / 150;
    background:
        linear-gradient(to bottom right, var(--mh-navy) 0 34%, transparent 34.2%),
        linear-gradient(to bottom right, transparent 0 42%, var(--mh-maroon) 42.2% 57%, transparent 57.2%);
}

.mh-hero__inner { position: relative; }
.mh-hero__content {
    /* Text column scales with the viewport (like the mockup) so the headline stays on two lines. */
    --mh-hero-pad: clamp(0px, calc(7.7vw - var(--mh-gutter)), 120px);
    box-sizing: content-box;
    max-width: min(660px, calc(44vw - var(--mh-gutter) - var(--mh-hero-pad)));
    min-height: clamp(340px, calc(22.6vw - 80px), 400px);
    padding: clamp(32px, 2vw, 44px) 0 clamp(30px, 1.8vw, 38px) var(--mh-hero-pad);
    display: flex; flex-direction: column; justify-content: center;
}
.mh-hero__eyebrow {
    margin-bottom: 14px !important;
    font-size: clamp(12px, .3vw + 9px, 15px); font-weight: 600; letter-spacing: .32em;
    color: var(--mh-navy-soft); text-transform: uppercase;
}
.mh-hero__title {
    font-size: clamp(30px, 2.65vw, 54px);
    line-height: 1.06; font-weight: 800; letter-spacing: -.015em;
}
.mh-hero__line1 { display: block; color: var(--mh-navy); }
.mh-hero__line2 { display: block; color: var(--mh-maroon); }
.mh-hero__rule { display: block; width: 96px; height: 4px; margin: 16px 0 18px; background: var(--mh-maroon); border-radius: 2px; }
.mh-hero__text { font-size: clamp(16px, .35vw + 12.5px, 19.5px); line-height: 1.42; color: var(--mh-ink); max-width: 620px; }
.mh-hero__actions { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.1vw, 22px); margin-top: 22px; }
.mh-hero__actions .mh-btn { min-width: clamp(160px, 10.8vw, 210px); }

/* ---------- Featured resources ---------- */
.mh-resources { position: relative; padding: 14px 0 10px; background: #fff; }
@media (min-width: 1200px) {
    .mh-resources .mh-container { padding-left: clamp(16px, 1.1vw, 24px); padding-right: clamp(16px, 1.1vw, 24px); }
}
.mh-resources__grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mh-resources__grid--1 { grid-template-columns: minmax(0, 1fr); }
.mh-resources__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mh-callout {
    --accent: var(--mh-navy);
    --accent-soft: var(--mh-navy-soft);
    --tint: #eef2f8;
    position: relative;
    display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: stretch;
    min-height: 212px;
    background: linear-gradient(110deg, #fff 0%, var(--tint) 100%);
    border: 1px solid var(--mh-gray-200); border-radius: var(--mh-radius);
    box-shadow: var(--mh-shadow);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.mh-callout:hover { transform: translateY(-3px); box-shadow: var(--mh-shadow-hover); }
.mh-callout--maroon { --accent: var(--mh-maroon); --accent-soft: var(--mh-maroon-soft); --tint: #f8edf0; }

.mh-callout__media { position: relative; min-height: 100%; }
.mh-callout__media img {
    position: absolute; inset: 7px 0 7px 7px;
    width: calc(100% - 7px); height: calc(100% - 14px);
    object-fit: cover; object-position: center;
    border-radius: 7px 0 0 7px;
    clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}
.mh-callout__badge {
    position: absolute; z-index: 2;
    top: 8px; right: -6px;
    width: clamp(70px, 4.7vw, 90px); aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--accent); color: #fff;
    border: 5px solid #fff;
    box-shadow: 0 6px 14px rgba(10, 45, 108, .18);
}
.mh-callout__badge .mh-icon { width: 52%; height: 52%; }

.mh-callout__body {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 20px 20px 18px clamp(18px, 1.6vw, 30px);
    min-width: 0;
}
.mh-callout__title { font-size: clamp(20px, .75vw + 11px, 28px); line-height: 1.12; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.mh-callout__subtitle {
    margin-top: 8px !important;
    font-size: clamp(10px, .2vw + 7.5px, 12.5px); font-weight: 700; letter-spacing: .2em; line-height: 1.5;
    color: var(--accent-soft); text-transform: uppercase;
}
.mh-callout__text { margin: 10px 0 14px !important; font-size: clamp(14px, .2vw + 11.5px, 16px); line-height: 1.38; color: var(--mh-ink); }
.mh-callout__btn { margin-top: auto; min-width: min(250px, 100%); }

/* ---------- Explore / Prepare / Achieve ---------- */
.mh-highlights { padding: clamp(28px, 2.4vw, 40px) 0 clamp(36px, 3vw, 56px); background: #fff; }
.mh-highlights__grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mh-highlight {
    --accent: var(--mh-navy);
    position: relative;
    display: flex; align-items: center; gap: clamp(16px, 1.6vw, 30px);
    padding: 4px clamp(16px, 3vw, 70px);
    text-decoration: none; color: inherit;
}
.mh-highlight--maroon { --accent: var(--mh-maroon); }
.mh-highlight + .mh-highlight::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 1px; background: var(--mh-gray-300);
}
.mh-highlight__icon {
    flex: none;
    width: clamp(84px, 5.8vw, 108px); aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--accent); color: #fff;
    box-shadow: 0 6px 16px rgba(10, 45, 108, .16);
    transition: transform .2s ease;
}
a.mh-highlight:hover .mh-highlight__icon { transform: translateY(-2px); }
.mh-highlight__icon .mh-icon { width: 54%; height: 54%; }
.mh-highlight__body { display: flex; flex-direction: column; min-width: 0; }
.mh-highlight__title { font-size: clamp(21px, .6vw + 14px, 28px); font-weight: 800; line-height: 1.1; color: var(--accent); text-transform: uppercase; letter-spacing: -.005em; }
.mh-highlight__text { margin-top: 6px; font-size: clamp(15px, .3vw + 12px, 19.5px); line-height: 1.32; color: #1f3566; }

/* ---------- Remaining homepage content ---------- */
.mh-more { padding: clamp(36px, 4vw, 64px) 0; background: var(--mh-gray-50); border-top: 1px solid var(--mh-gray-200); }
.mh-richtext { color: var(--mh-ink); overflow-wrap: anywhere; }
.mh-richtext > * + * { margin-top: 1em !important; }
.mh-richtext h1, .mh-richtext h2, .mh-richtext h3, .mh-richtext h4 { color: var(--mh-navy); line-height: 1.2; font-weight: 800; }
.mh-richtext h1 { font-size: clamp(26px, 2vw + 14px, 38px); }
.mh-richtext h2 { font-size: clamp(22px, 1.4vw + 12px, 30px); }
.mh-richtext h3 { font-size: clamp(19px, .8vw + 12px, 24px); }
.mh-richtext a { color: var(--mh-maroon); font-weight: 600; }
.mh-richtext ul, .mh-richtext ol { padding-left: 1.4em; list-style: revert; }
.mh-richtext img, .mh-richtext iframe, .mh-richtext video { max-width: 100%; height: auto; border-radius: var(--mh-radius-sm); }
.mh-richtext iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; border: 0; }
.mh-richtext table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.mh-richtext td, .mh-richtext th { border: 1px solid var(--mh-gray-200); padding: 8px; }

/* ---------- Footer ---------- */
.mh-footer { background: var(--mh-gray-50); border-top: 4px solid var(--mh-navy); color: var(--mh-ink); }
.mh-footer__grid {
    display: grid; gap: 32px 40px;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    padding-top: clamp(36px, 3.4vw, 56px); padding-bottom: clamp(32px, 3vw, 48px);
}
.mh-footer__logo img { width: min(290px, 100%); }
.mh-footer__brand p { margin: 16px 0 20px !important; max-width: 420px; color: var(--mh-ink-soft); line-height: 1.55; }
.mh-footer__heading {
    margin-bottom: 14px !important;
    font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mh-navy);
}
.mh-footer__col ul { display: grid; gap: 10px; }
.mh-footer__col li a { color: var(--mh-ink-soft) !important; text-decoration: none; font-weight: 500; transition: color .15s ease; }
.mh-footer__col li a:hover { color: var(--mh-maroon) !important; }
.mh-footer__icon-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700 !important; color: var(--mh-navy) !important; }
.mh-footer__col .mh-lang { margin-top: 18px; }
.mh-footer__bar { background: var(--mh-navy); color: rgba(255, 255, 255, .86); font-size: 14px; }
.mh-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 16px; padding-bottom: 16px; }
.mh-footer__legal { display: flex; gap: 10px; align-items: center; }
.mh-footer__legal a { color: #fff !important; text-decoration: none; }
.mh-footer__legal a:hover { text-decoration: underline; }

/* ==========================================================================
   Desktop 1200–1439px: three equal cards stay in a row, but each card puts its
   image on top so titles and buttons are not squeezed into a narrow column.
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    .mh-resources__grid--3 .mh-callout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .mh-resources__grid--3 .mh-callout__media { min-height: 0; aspect-ratio: 16 / 7; }
    .mh-resources__grid--3 .mh-callout__media img {
        inset: 7px 7px 0 7px; width: calc(100% - 14px); height: calc(100% - 7px);
        border-radius: 7px 7px 0 0;
        clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
    }
    .mh-resources__grid--3 .mh-callout__badge { top: auto; bottom: -30px; right: 20px; width: 74px; }
    .mh-resources__grid--3 .mh-callout__body { padding: 16px 22px 20px; }
    .mh-resources__grid--3 .mh-callout__title { padding-right: 76px; font-size: 22px; }
    .mh-resources__grid--3 .mh-callout__btn { min-width: 0; }
}

/* 1440–1599px: image-left layout from the mockup, slightly more compact. */
@media (min-width: 1440px) and (max-width: 1599.98px) {
    .mh-callout { grid-template-columns: 42% minmax(0, 1fr); }
    .mh-callout__body { padding: 18px 18px 18px 24px; }
    .mh-callout__title { font-size: 22px; }
    .mh-callout__btn { min-width: 0; font-size: 14.5px; }
}

/* ==========================================================================
   Large desktop: let the hero breathe on very wide screens
   ========================================================================== */
@media (min-width: 1600px) {
    .mh-hero__content { max-width: min(660px, 40%); }
}

/* ==========================================================================
   Small desktop / large tablet (992–1199px)
   ========================================================================== */
@media (max-width: 1199.98px) {
    .mh-hero__media { width: 54%; }
    .mh-hero__content { --mh-hero-pad: 0px; max-width: calc(47vw - var(--mh-gutter)); min-height: 360px; }
    .mh-hero__content { padding-top: 48px; }
    .mh-hero__title { font-size: clamp(30px, 3.3vw, 40px); }
    .mh-hero__stripe { width: 56px; }

    .mh-resources__grid,
    .mh-resources__grid--2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .mh-callout { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); min-height: 200px; }
    .mh-callout__badge { width: 80px; }
    .mh-callout__body { padding: 20px 24px 20px 32px; }
    .mh-callout__btn { min-width: 0; }

    .mh-highlight { padding: 4px clamp(14px, 2.4vw, 32px); }
    .mh-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mh-footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   Tablet portrait + mobile (< 992px): stacked hero, image first
   ========================================================================== */
@media (max-width: 991.98px) {
    .mh-hero { background: linear-gradient(180deg, #fff 0%, #f3f6fa 100%); }
    .mh-hero__media {
        position: relative; z-index: 0;
        width: 100%; height: auto;
        aspect-ratio: 2.35 / 1;
        min-height: 200px;
    }
    .mh-hero__media::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(247, 249, 252, .95) 100%); }
    .mh-hero__media--center img { object-position: 62% center; }
    .mh-hero__stripe { width: clamp(46px, 9vw, 80px); }
    .mh-hero__content { max-width: 760px; min-height: 0; padding: 22px 0 30px; }
    .mh-hero__title { font-size: clamp(30px, 4.6vw + 8px, 46px); }
    .mh-hero__rule { display: none; }
    .mh-hero__eyebrow { margin-bottom: 8px !important; }
    .mh-hero__text { margin-top: 12px !important; }
    .mh-hero__actions { gap: 14px; margin-top: 22px; }
    .mh-hero__actions .mh-btn { flex: 1 1 0; min-width: 0; }

    .mh-highlights__grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mh-highlight { flex-direction: column; text-align: center; gap: 12px; padding: 4px clamp(10px, 2vw, 24px); }
    .mh-highlight + .mh-highlight::before { top: 18px; bottom: 18px; }
    .mh-highlight__body { align-items: center; }
}

/* ==========================================================================
   Mobile (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
    :root { --mh-header-h: 64px; --mh-gutter: 16px; }
    .mh-header__inner { gap: 10px; }
    .mh-header__logo { min-width: 0; flex: 0 1 auto; }
    .mh-header__logo img { width: min(210px, calc(100vw - 196px)); min-width: 112px; }
    .mh-btn--account { font-size: 14px; padding: 6px 12px; }
    .mh-burger { width: 40px; height: 40px; padding: 4px; }

    .mh-hero__content { padding: 18px 0 24px; }
    .mh-hero__eyebrow { letter-spacing: .26em; font-size: 12px; }
    .mh-hero__title { font-size: clamp(26px, 7.4vw, 40px); }
    .mh-hero__text { font-size: 16px; }
    .mh-hero__actions .mh-btn { font-size: 16px; padding: .75em 1em; min-height: 50px; }

    .mh-resources { padding-top: 4px; }
    .mh-callout {
        grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
        min-height: 0;
    }
    .mh-callout__media { min-height: 150px; }
    .mh-callout__media img { inset: 5px 0 5px 5px; width: calc(100% - 5px); height: calc(100% - 10px); }
    .mh-callout__badge { width: 62px; border-width: 4px; top: 6px; right: -8px; }
    .mh-callout__body { padding: 14px 14px 14px 20px; }
    .mh-callout__title { font-size: clamp(17px, 2.4vw + 8px, 22px); }
    .mh-callout__subtitle { font-size: 9.5px; letter-spacing: .18em; margin-top: 6px !important; }
    .mh-callout__text { font-size: 14px; margin: 6px 0 12px !important; }
    .mh-callout__btn { width: 100%; font-size: 14.5px; padding: .62em .9em; }

    .mh-highlights { padding: 24px 0 36px; }
    .mh-highlight__icon { width: clamp(64px, 17vw, 92px); }
    .mh-highlight__title { font-size: clamp(17px, 3.4vw + 5px, 22px); }
    .mh-highlight__text { font-size: clamp(13.5px, 1.6vw + 8px, 16px); }

    .mh-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .mh-footer__bar-inner { justify-content: center; text-align: center; }
}

/* Phones (360–479px): keep the mockup's side-by-side card layout, just more compact */
@media (max-width: 479.98px) {
    .mh-hero__actions { gap: 10px; }
    .mh-hero__actions .mh-btn { flex: 1 1 auto; font-size: 15px; padding: .75em .8em; gap: .45em; }

    .mh-callout { grid-template-columns: minmax(0, 43%) minmax(0, 1fr); }
    .mh-callout__media { min-height: 140px; }
    .mh-callout__badge { width: 54px; border-width: 3px; right: -10px; }
    .mh-callout__body { padding: 12px 12px 12px 18px; }
    .mh-callout__title { font-size: 17px; }
    .mh-callout__subtitle { font-size: 8.5px; letter-spacing: .14em; }
    .mh-callout__text { font-size: 13px; line-height: 1.35; }
    .mh-callout__btn { font-size: 13px; padding: .6em .55em; gap: .4em; }

    .mh-highlight { padding: 4px 8px; }

    .mh-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Very narrow phones (320–359px): stack where side-by-side would hurt readability */
@media (max-width: 359.98px) {
    .mh-hero__actions { flex-direction: column; }
    .mh-hero__actions .mh-btn { flex: none; width: 100%; }

    .mh-callout { grid-template-columns: minmax(0, 1fr); }
    .mh-callout__media { min-height: 0; aspect-ratio: 16 / 8; }
    .mh-callout__media img {
        inset: 6px 6px 0 6px; width: calc(100% - 12px); height: calc(100% - 6px);
        border-radius: 7px 7px 0 0;
        clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    }
    .mh-callout__badge { top: auto; bottom: -24px; right: 16px; width: 58px; }
    .mh-callout__body { padding: 12px 16px 16px; }
    .mh-callout__title { padding-right: 64px; font-size: 18px; }
    .mh-callout__subtitle { font-size: 9.5px; }
    .mh-callout__text { font-size: 14px; }
    .mh-callout__btn { font-size: 14px; }

    .mh-highlights__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mh-highlight { flex-direction: row; text-align: left; gap: 16px; padding: 14px 0; }
    .mh-highlight__body { align-items: flex-start; }
    .mh-highlight + .mh-highlight::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
    .mh-highlight__icon { width: 60px; }
    .mh-header__logo img { min-width: 104px; }
    .mh-btn--account { font-size: 13px; padding: 5px 9px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mh-home *, .mh-home *::before, .mh-home *::after { transition: none !important; }
}

/* Optical size tweak: the gears glyph has more internal whitespace than the other icons. */
.mh-highlight__icon .mh-icon--gears,
.mh-callout__badge .mh-icon--gears { width: 64%; height: 64%; }