/* =========================================================
   Maria Property — Modern Home (blue / white)
   All rules are scoped with the .mh prefix so other pages are untouched.
   ========================================================= */
:root {
    --mh-navy: #0a2540;
    --mh-blue: #0b5cff;
    --mh-blue-600: #0848c9;
    --mh-blue-50: #eef4ff;
    --mh-sky: #e6f0ff;
    --mh-ink: #0f172a;
    --mh-muted: #5b6b82;
    --mh-line: #e3e9f3;
    --mh-white: #ffffff;
    --mh-radius: 18px;
    --mh-shadow: 0 10px 30px rgba(10, 37, 64, .08);
    --mh-shadow-lg: 0 24px 60px rgba(10, 37, 64, .16);
}

.mh { font-family: 'Sarabun', sans-serif; color: var(--mh-ink); background: var(--mh-white); }
.mh h1, .mh h2, .mh h3, .mh h4, .mh h5 { font-family: 'Prompt', 'Sarabun', sans-serif; color: var(--mh-navy); letter-spacing: -.01em; }
.mh a { text-decoration: none; }
.mh img { max-width: 100%; display: block; }

.mh-section { padding: 96px 0; }
.mh-section--tint { background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%); }
.mh-section--navy { background: var(--mh-navy); color: #cfdcf0; }
.mh-section--navy h2, .mh-section--navy h3, .mh-section--navy h5 { color: #fff; }

.mh-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mh-blue); background: var(--mh-blue-50); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.mh-section--navy .mh-eyebrow { background: rgba(255,255,255,.08); color: #8fb4ff; }
.mh-title { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.25; margin-bottom: 14px; }
.mh-lead { font-size: 17px; color: var(--mh-muted); max-width: 640px; line-height: 1.75; }
.mh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.mh-head--center { flex-direction: column; align-items: center; text-align: center; }
.mh-head--center .mh-lead { margin: 0 auto; }

/* buttons */
.mh-btn { display: inline-flex; align-items: center; gap: 10px; font-family: 'Prompt', sans-serif; font-weight: 500; font-size: 16px; padding: 14px 26px; border-radius: 12px; border: 2px solid transparent; transition: all .25s ease; cursor: pointer; line-height: 1.2; }
.mh-btn--primary { background: var(--mh-blue); color: #fff !important; box-shadow: 0 10px 24px rgba(11, 92, 255, .32); }
.mh-btn--primary:hover { background: var(--mh-blue-600); transform: translateY(-2px); }
.mh-btn--ghost { background: rgba(255,255,255,.08); color: #fff !important; border-color: rgba(255,255,255,.45); backdrop-filter: blur(6px); }
.mh-btn--ghost:hover { background: #fff; color: var(--mh-navy) !important; }
.mh-btn--outline { color: var(--mh-blue) !important; border-color: var(--mh-blue); background: transparent; }
.mh-btn--outline:hover { background: var(--mh-blue); color: #fff !important; }
.mh-link { color: var(--mh-blue) !important; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.mh-link i { transition: transform .2s; }
.mh-link:hover i { transform: translateX(4px); }

/* ---------- HERO ---------- */
.mh-hero { position: relative; min-height: 680px; display: flex; align-items: center; padding: 120px 0 140px; color: #fff; overflow: hidden; }
.mh-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); }
.mh-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 25, 54, .95) 0%, rgba(8, 52, 130, .86) 48%, rgba(11, 92, 255, .35) 100%); }
.mh-hero .container { position: relative; z-index: 2; }
.mh-hero__tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-size: 14px; margin-bottom: 22px; }
.mh-hero__tag span { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.25); }
.mh-hero h1 { color: #fff; font-size: clamp(36px, 5vw, 62px); font-weight: 700; line-height: 1.15; margin-bottom: 20px; }
.mh-hero h1 em { font-style: normal; background: linear-gradient(90deg, #8fb4ff, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mh-hero p.mh-hero__sub { font-size: 19px; color: #d6e3f7; max-width: 560px; line-height: 1.75; margin-bottom: 32px; }
.mh-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.mh-hero__points { display: flex; gap: 28px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; color: #d6e3f7; font-size: 15px; }
.mh-hero__points i { color: #8fb4ff; margin-right: 8px; }

/* search card in hero */
.mh-search { background: #fff; color: var(--mh-ink); border-radius: 22px; padding: 30px; box-shadow: var(--mh-shadow-lg); }
.mh-search h3 { font-size: 22px; margin-bottom: 6px; }
.mh-search p { color: var(--mh-muted); font-size: 15px; margin-bottom: 20px; }
.mh-search label { font-size: 13px; font-weight: 600; color: var(--mh-muted); margin-bottom: 6px; display: block; }
.mh-search .mh-input { width: 100%; height: 50px; border: 1.5px solid var(--mh-line); border-radius: 12px; padding: 0 16px; font-size: 16px; background: #f8fafd; color: var(--mh-ink); margin-bottom: 16px; transition: border-color .2s; font-family: inherit; }
.mh-search .mh-input:focus { outline: none; border-color: var(--mh-blue); background: #fff; }
.mh-search .mh-btn { width: 100%; justify-content: center; }
.mh-search__foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--mh-line); font-size: 14px; color: var(--mh-muted); }
.mh-search__foot a { color: var(--mh-blue); font-weight: 700; }

/* ---------- BUSINESS SPLIT ---------- */
.mh-biz { margin-top: -90px; position: relative; z-index: 5; }
.mh-biz__card { position: relative; height: 100%; background: #fff; border-radius: 24px; padding: 38px; box-shadow: var(--mh-shadow-lg); border: 1px solid var(--mh-line); overflow: hidden; transition: transform .3s; }
.mh-biz__card:hover { transform: translateY(-6px); }
.mh-biz__card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--mh-blue-50); z-index: 0; }
.mh-biz__card > * { position: relative; z-index: 1; }
.mh-biz__card--dark { background: linear-gradient(140deg, var(--mh-blue) 0%, #0a3fae 100%); color: #e3ecff; border: 0; }
.mh-biz__card--dark::after { background: rgba(255,255,255,.08); }
.mh-biz__card--dark h3 { color: #fff; }
.mh-biz__icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; background: var(--mh-blue-50); color: var(--mh-blue); margin-bottom: 22px; }
.mh-biz__card--dark .mh-biz__icon { background: rgba(255,255,255,.15); color: #fff; }
.mh-biz__label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mh-blue); }
.mh-biz__card--dark .mh-biz__label { color: #bcd2ff; }
.mh-biz__card h3 { font-size: 28px; font-weight: 700; margin: 6px 0 12px; }
.mh-biz__card p { line-height: 1.75; margin-bottom: 20px; }
.mh-biz__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: 15px; }
.mh-biz__list i { color: var(--mh-blue); margin-right: 8px; }
.mh-biz__card--dark .mh-biz__list i { color: #9fc0ff; }
.mh-biz__card--dark .mh-btn--outline { color: #fff !important; border-color: rgba(255,255,255,.6); }
.mh-biz__card--dark .mh-btn--outline:hover { background: #fff; color: var(--mh-blue) !important; }

/* ---------- STATS ---------- */
.mh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 64px; border: 1px solid var(--mh-line); border-radius: 20px; background: #fff; }
.mh-stat { padding: 28px 24px; text-align: center; border-right: 1px solid var(--mh-line); }
.mh-stat:last-child { border-right: 0; }
.mh-stat strong { display: block; font-family: 'Prompt', sans-serif; font-size: 34px; font-weight: 700; color: var(--mh-blue); line-height: 1.1; }
.mh-stat span { color: var(--mh-muted); font-size: 15px; }

/* ---------- PROJECTS ---------- */
.mh-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.mh-filter button { border: 1.5px solid var(--mh-line); background: #fff; color: var(--mh-muted); padding: 9px 18px; border-radius: 999px; font-family: 'Prompt', sans-serif; font-size: 14px; cursor: pointer; transition: all .2s; }
.mh-filter button.is-active, .mh-filter button:hover { background: var(--mh-navy); border-color: var(--mh-navy); color: #fff; }

.mh-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.mh-projects--featured .mh-card:first-child { grid-column: span 2; grid-row: span 2; }
.mh-projects--featured .mh-card:first-child .mh-card__img { aspect-ratio: auto; height: 100%; min-height: 360px; }
.mh-projects--featured .mh-card:first-child { display: flex; flex-direction: column; }
.mh-projects--featured .mh-card:first-child .mh-card__media { flex: 1; }
.mh-projects--featured .mh-card:first-child h4 { font-size: 24px; }

.mh-card { background: #fff; border-radius: var(--mh-radius); overflow: hidden; border: 1px solid var(--mh-line); box-shadow: var(--mh-shadow); transition: transform .3s, box-shadow .3s; }
.mh-card:hover { transform: translateY(-6px); box-shadow: var(--mh-shadow-lg); }
.mh-card__media { position: relative; overflow: hidden; }
.mh-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; background: var(--mh-sky); }
.mh-card:hover .mh-card__img { transform: scale(1.06); }
.mh-card__badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
.mh-badge { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--mh-navy); }
.mh-badge--blue { background: var(--mh-blue); color: #fff; }
.mh-card__loc { position: absolute; left: 14px; bottom: 14px; right: 14px; color: #fff; font-size: 14px; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.mh-card__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(6,25,54,.7)); pointer-events: none; }
.mh-card__loc { z-index: 2; }
.mh-card__body { padding: 22px 22px 20px; }
.mh-card__body h4 { font-size: 19px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
.mh-card__body h4 a { color: var(--mh-navy); }
.mh-card__body h4 a:hover { color: var(--mh-blue); }
.mh-price { font-family: 'Prompt', sans-serif; font-size: 22px; font-weight: 700; color: var(--mh-blue); margin-bottom: 16px; }
.mh-price small { font-size: 14px; color: var(--mh-muted); font-weight: 400; }
.mh-specs { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 16px; border-top: 1px solid var(--mh-line); list-style: none; margin: 0; padding-left: 0; font-size: 14px; color: var(--mh-muted); }
.mh-specs i { color: var(--mh-blue); margin-right: 6px; }

/* ---------- PROCESS ---------- */
.mh-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; counter-reset: step; position: relative; }
.mh-steps::before { content: ""; position: absolute; top: 38px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, rgba(143,180,255,.5) 0 8px, transparent 8px 16px); }
.mh-step { position: relative; text-align: center; padding: 0 6px; }
.mh-step__icon { position: relative; width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff; background: var(--mh-blue); box-shadow: 0 0 0 8px rgba(11,92,255,.18); }
.mh-step__icon::after { counter-increment: step; content: counter(step); position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--mh-navy); font-size: 13px; font-weight: 700; display: grid; place-items: center; font-family: 'Prompt', sans-serif; }
.mh-step h5 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.mh-step p { font-size: 15px; line-height: 1.7; margin: 0; color: #a9bcd8; }

/* ---------- WHY ---------- */
.mh-why__img { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--mh-shadow-lg); }
.mh-why__img img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.mh-why__chip { position: absolute; left: 20px; bottom: 20px; background: #fff; border-radius: 16px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--mh-shadow); }
.mh-why__chip i { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--mh-blue); color: #fff; font-size: 20px; }
.mh-why__chip strong { display: block; font-family: 'Prompt', sans-serif; color: var(--mh-navy); }
.mh-why__chip span { font-size: 13px; color: var(--mh-muted); }
.mh-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.mh-feature { display: flex; gap: 16px; padding: 20px; border-radius: 16px; border: 1px solid var(--mh-line); background: #fff; transition: border-color .2s, box-shadow .2s; }
.mh-feature:hover { border-color: #bcd2ff; box-shadow: var(--mh-shadow); }
.mh-feature i { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--mh-blue-50); color: var(--mh-blue); font-size: 19px; }
.mh-feature h5 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.mh-feature p { margin: 0; font-size: 14.5px; color: var(--mh-muted); line-height: 1.65; }

/* ---------- REVIEWS ---------- */
.mh-reviews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mh-review { background: #fff; border-radius: var(--mh-radius); padding: 26px; border: 1px solid var(--mh-line); display: flex; flex-direction: column; gap: 18px; height: 100%; }
.mh-review > i { color: var(--mh-blue); font-size: 24px; opacity: .5; }
.mh-review p { margin: 0; color: var(--mh-ink); line-height: 1.75; flex: 1; }
.mh-review__who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--mh-line); }
.mh-review__who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.mh-review__who strong { display: block; font-size: 15px; color: var(--mh-navy); }
.mh-review__who a { font-size: 13px; color: var(--mh-muted); }

/* ---------- POSTS ---------- */
.mh-tabs { display: inline-flex; background: var(--mh-blue-50); padding: 5px; border-radius: 999px; }
.mh-tabs button { border: 0; background: transparent; padding: 10px 22px; border-radius: 999px; font-family: 'Prompt', sans-serif; font-size: 15px; color: var(--mh-muted); cursor: pointer; }
.mh-tabs button.is-active { background: #fff; color: var(--mh-blue); box-shadow: 0 4px 12px rgba(10,37,64,.08); }
.mh-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.mh-posts[hidden] { display: none; }
.mh-post { border-radius: var(--mh-radius); overflow: hidden; background: #fff; border: 1px solid var(--mh-line); transition: transform .3s, box-shadow .3s; }
.mh-post:hover { transform: translateY(-4px); box-shadow: var(--mh-shadow); }
.mh-post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--mh-sky); }
.mh-post__body { padding: 20px 22px 24px; }
.mh-post__date { font-size: 13px; color: var(--mh-blue); font-weight: 600; margin-bottom: 8px; display: block; }
.mh-post h5 { font-size: 17px; font-weight: 600; line-height: 1.55; margin: 0; }
.mh-post h5 a { color: var(--mh-navy); }
.mh-post h5 a:hover { color: var(--mh-blue); }

/* ---------- FAQ + CONTACT ---------- */
.mh-faq details { border: 1px solid var(--mh-line); border-radius: 14px; background: #fff; margin-bottom: 12px; transition: border-color .2s; }
.mh-faq details[open] { border-color: #bcd2ff; box-shadow: var(--mh-shadow); }
.mh-faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: 'Prompt', sans-serif; font-weight: 500; color: var(--mh-navy); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mh-faq summary::-webkit-details-marker { display: none; }
.mh-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--mh-blue-50); color: var(--mh-blue); display: grid; place-items: center; font-size: 18px; transition: transform .2s; }
.mh-faq details[open] summary::after { transform: rotate(45deg); }
.mh-faq__a { padding: 0 22px 20px; color: var(--mh-muted); line-height: 1.75; }

.mh-contact { background: linear-gradient(150deg, var(--mh-navy) 0%, #0a3fae 100%); border-radius: 24px; padding: 38px; color: #cfdcf0; height: 100%; position: relative; overflow: hidden; }
.mh-contact::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -90px; border-radius: 50%; border: 40px solid rgba(255,255,255,.05); }
.mh-contact h3 { color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.mh-contact ul { list-style: none; padding: 0; margin: 26px 0 30px; }
.mh-contact li { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.mh-contact li i { flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; }
.mh-contact li small { display: block; color: #8fa9cf; font-size: 13px; }
.mh-contact li a, .mh-contact li strong { color: #fff; font-weight: 600; }
.mh-contact .mh-btn { position: relative; z-index: 1; }

/* ---------- PARTNERS ---------- */
.mh-partners { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; }
.mh-partner { width: 160px; height: 90px; border-radius: 14px; border: 1px solid var(--mh-line); background: #fff; display: grid; place-items: center; padding: 14px; }
.mh-partner img { max-height: 60px; width: auto; filter: grayscale(1); opacity: .75; transition: all .25s; }
.mh-partner:hover img { filter: none; opacity: 1; }

/* ---------- FLOATING CTA ---------- */
.mh-float { position: fixed; right: 20px; bottom: 90px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.mh-float a { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 22px; box-shadow: 0 10px 24px rgba(10,37,64,.25); transition: transform .2s; }
.mh-float a:hover { transform: scale(1.08); }
.mh-float__line { background: #06c755; }
.mh-float__tel { background: var(--mh-blue); }

/* reveal on scroll */
.mh-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.mh-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mh-reveal { opacity: 1; transform: none; transition: none; } }

.mh-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--mh-muted); border: 1px dashed var(--mh-line); border-radius: var(--mh-radius); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
    .mh-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .mh-section { padding: 72px 0; }
    .mh-hero { padding: 90px 0 130px; min-height: 0; }
    .mh-search { margin-top: 40px; }
    .mh-biz .col-lg-6 + .col-lg-6 { margin-top: 24px; }
    .mh-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mh-projects--featured .mh-card:first-child { grid-column: span 2; grid-row: auto; }
    .mh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .mh-steps::before { display: none; }
    .mh-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mh-stat:nth-child(2) { border-right: 0; }
    .mh-stat:nth-child(-n+2) { border-bottom: 1px solid var(--mh-line); }
    .mh-why__img { margin-bottom: 40px; }
    .mh-contact { margin-top: 32px; }
}
@media (max-width: 575px) {
    .mh-section { padding: 56px 0; }
    .mh-hero h1 { font-size: 34px; }
    .mh-hero p.mh-hero__sub { font-size: 17px; }
    .mh-hero__cta .mh-btn { width: 100%; justify-content: center; }
    .mh-biz__card { padding: 28px 22px; }
    .mh-biz__list { grid-template-columns: minmax(0, 1fr); }
    .mh-projects, .mh-posts, .mh-reviews, .mh-features { grid-template-columns: minmax(0, 1fr); }
    .mh-projects--featured .mh-card:first-child { grid-column: auto; }
    .mh-projects--featured .mh-card:first-child .mh-card__img { min-height: 0; aspect-ratio: 4 / 3; }
    .mh-steps { grid-template-columns: minmax(0, 1fr); }
    .mh-stat strong { font-size: 26px; }
    .mh-contact, .mh-search { padding: 26px 22px; }
    .mh-partner { width: calc(50% - 11px); }
}
.mh-card[hidden], .mh-posts[hidden] { display: none !important; }
.mh { overflow-x: hidden; }

/* =========================================================
   v2 — photo collage, search strip, featured, gallery, consign, lightbox
   ========================================================= */
.mh-hero { padding-bottom: 150px; }

/* hero collage */
.mh-collage { position: relative; height: 500px; }
.mh-collage a { position: absolute; display: block; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 10, 40, .45); border: 4px solid rgba(255,255,255,.9); transition: transform .35s; }
.mh-collage a:hover { transform: translateY(-6px) rotate(0deg) !important; z-index: 5; }
.mh-collage img { width: 100%; height: 100%; object-fit: cover; }
.mh-collage__a { width: 60%; height: 80%; right: 0; top: 0; transform: rotate(2deg); z-index: 2; }
.mh-collage__b { width: 48%; height: 52%; left: 0; top: 6%; transform: rotate(-3deg); z-index: 1; }
.mh-collage__c { width: 46%; height: 40%; left: 10%; bottom: 0; transform: rotate(1deg); z-index: 3; }
.mh-collage__chip { position: absolute; z-index: 6; display: flex; align-items: center; gap: 12px; background: #fff; color: var(--mh-ink); border-radius: 14px; padding: 12px 16px; box-shadow: var(--mh-shadow-lg); }
.mh-collage__chip i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--mh-blue); color: #fff; }
.mh-collage__chip strong { display: block; font-family: 'Prompt', sans-serif; color: var(--mh-navy); line-height: 1.2; }
.mh-collage__chip span { font-size: 13px; color: var(--mh-muted); }
.mh-collage__chip--1 { right: 4%; bottom: 6%; }
.mh-collage__chip--2 { left: -2%; top: -2%; }

/* search strip */
.mh-strip { position: relative; z-index: 6; margin-top: -48px; }
.mh-searchbar { display: flex; align-items: flex-end; gap: 16px; background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: var(--mh-shadow-lg); border: 1px solid var(--mh-line); }
.mh-searchbar__f { display: flex; flex-direction: column; min-width: 200px; }
.mh-searchbar__f--grow { flex: 1; }
.mh-searchbar label { font-size: 13px; font-weight: 600; color: var(--mh-muted); margin-bottom: 6px; }
.mh-searchbar select, .mh-searchbar input { height: 50px; border: 1.5px solid var(--mh-line); border-radius: 12px; padding: 0 14px; font-size: 16px; background: #f8fafd; color: var(--mh-ink); font-family: inherit; width: 100%; }
.mh-searchbar select:focus, .mh-searchbar input:focus { outline: none; border-color: var(--mh-blue); background: #fff; }
.mh-searchbar .mh-btn { height: 50px; padding: 0 30px; }

/* services */
.mh-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mh-services .mh-biz__card { display: flex; flex-direction: column; }
.mh-services .mh-biz__card p { flex: 1; }
.mh-services .mh-biz__card .mh-btn { align-self: flex-start; }
.mh-services .mh-biz__list { grid-template-columns: minmax(0, 1fr); }
.mh-services .mh-biz__card h3 { font-size: 24px; }

/* featured projects */
.mh-fp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.mh-fp .mh-card { display: flex; flex-direction: column; }
.mh-fp .mh-card__img { aspect-ratio: 1 / 1; }
.mh-fp .mh-card__body { display: flex; flex-direction: column; flex: 1; }
.mh-fp .mh-specs { margin-bottom: 18px; }
.mh-card__sub { color: var(--mh-muted); font-size: 15px; line-height: 1.6; margin-bottom: 12px; flex: 1; }
.mh-card__body h4 { color: var(--mh-navy); }
.mh-card__cta { display: flex; gap: 10px; margin-top: auto; }
.mh-btn--sm { padding: 10px 16px; font-size: 14px; border-radius: 10px; flex: 1; justify-content: center; }
.mh-fp__hero { grid-column: span 2; grid-row: span 2; }
.mh-fp__hero .mh-card__media { flex: 1; }
.mh-fp__hero .mh-card__img { aspect-ratio: auto; height: 100%; min-height: 420px; }
.mh-fp__hero .mh-card__body { flex: none; }
.mh-fp__hero h4 { font-size: 26px; }
.mh-fp__hero .mh-card__cta .mh-btn--sm { flex: none; padding: 12px 26px; font-size: 15px; }

/* gallery (masonry-like grid) */
.mh-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 14px; }
.mh-gallery__item { position: relative; border-radius: 16px; overflow: hidden; display: block; background: var(--mh-sky); }
.mh-gallery__item.is-tall { grid-row: span 2; }
.mh-gallery__item.is-wide { grid-column: span 2; }
.mh-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mh-gallery__item:hover img { transform: scale(1.07); }
.mh-gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(6,25,54,.8)); opacity: .85; transition: opacity .3s; }
.mh-gallery__item span { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; color: #fff; font-family: 'Prompt', sans-serif; font-size: 14px; font-weight: 500; }

/* consign */
.mh-consign { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.mh-consign__img { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--mh-shadow-lg); }
.mh-consign__img img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
.mh-mini-steps { list-style: none; counter-reset: ms; padding: 0; margin: 28px 0 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mh-mini-steps li { counter-increment: ms; position: relative; padding: 18px 18px 18px 64px; border: 1px solid var(--mh-line); border-radius: 16px; background: #fff; }
.mh-mini-steps li::before { content: counter(ms); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--mh-blue); color: #fff; font-family: 'Prompt', sans-serif; font-weight: 600; display: grid; place-items: center; }
.mh-mini-steps strong { display: block; font-family: 'Prompt', sans-serif; color: var(--mh-navy); }
.mh-mini-steps span { font-size: 14px; color: var(--mh-muted); }

/* lightbox */
.mh-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(4, 14, 32, .92); display: flex; align-items: center; justify-content: center; padding: 40px 70px; }
.mh-lightbox[hidden] { display: none; }
.mh-lightbox figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.mh-lightbox img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 12px; margin: 0 auto; }
.mh-lightbox figcaption { color: #dbe6f7; margin-top: 14px; font-family: 'Prompt', sans-serif; }
.mh-lightbox button { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; cursor: pointer; }
.mh-lightbox button:hover { background: rgba(255,255,255,.25); }
.mh-lightbox__close { top: 18px; right: 18px; }
.mh-lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.mh-lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }

@media (max-width: 991px) {
    .mh-collage { height: 420px; margin-top: 48px; }
    .mh-searchbar { flex-wrap: wrap; }
    .mh-searchbar__f { flex: 1 1 100%; }
    .mh-searchbar .mh-btn { width: 100%; justify-content: center; }
    .mh-services { grid-template-columns: minmax(0, 1fr); }
    .mh-fp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mh-fp__hero { grid-row: auto; }
    .mh-fp__hero .mh-card__img { min-height: 0; aspect-ratio: 16 / 10; }
    .mh-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mh-consign { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .mh-consign__img img { min-height: 300px; }
}
@media (max-width: 575px) {
    .mh-collage { height: 320px; }
    .mh-collage__chip { padding: 8px 12px; }
    .mh-collage__chip i { width: 32px; height: 32px; }
    .mh-collage__chip--2 { left: 0; }
    .mh-fp { grid-template-columns: minmax(0, 1fr); }
    .mh-fp__hero { grid-column: auto; }
    .mh-fp__hero .mh-card__img { aspect-ratio: 1 / 1; }
    .mh-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
    .mh-mini-steps { grid-template-columns: minmax(0, 1fr); }
    .mh-lightbox { padding: 60px 10px; }
}