/**
 * Moss Hotel — Design System
 *
 * Sections:
 *  0. CSS Custom Properties (tokens)
 *  1. Resets & Base
 *  2. Typography
 *  3. Layout Utilities
 *  4. Navigation
 *  5. Mobile Menu Overlay
 *  6. Hero
 *  7. Sections & Containers
 *  8. Buttons
 *  9. Cards
 * 10. Room Cards
 * 11. Split Layout
 * 12. Gallery & Lightbox
 * 13. Amenity Grid
 * 14. CTA Strip
 * 15. Note Caption (brand element)
 * 16. Contact Form
 * 17. Footer
 * 18. Scroll Reveal
 * 19. Accessibility & Focus
 *
 * @package MossHotel
 */

/* =============================================================================
   0. CSS Custom Properties
   ========================================================================== */

:root {
    /* Brand colours */
    --mh-green:       #3e4d57;
    --mh-green-deep:  #31373c;
    --mh-green-light: #52697a;
    --mh-green-muted: #6b808f;

    /* Tints - 50 through 900 */
    --mh-green-50:  #f2f4f6;
    --mh-green-100: #dde5ea;
    --mh-green-200: #bbcad4;
    --mh-green-300: #92a8b8;
    --mh-green-400: #6a869a;
    --mh-green-500: #3e4d57;
    --mh-green-600: #34414a;
    --mh-green-700: #2a343c;
    --mh-green-800: #1f272d;
    --mh-green-900: #14191d;

    /* Darks */
    --mh-dark:       #231f20;
    --mh-dark-deep:  #1a1718;
    --mh-dark-mid:   #2e2a2b;
    --mh-dark-light: #3d3839;

    /* Light tones */
    --mh-wash:       #e8eff4;
    --mh-wash-mid:   #d6e2eb;
    --mh-stone:      #bbc4bf;
    --mh-stone-light: #d8e0db;
    --mh-cream:      #f7f4ef;
    --mh-white:      #ffffff;

    /* Text */
    --mh-text-dark:    #231f20;
    --mh-text-body:    #3a3536;
    --mh-text-muted:   #5c5557;
    --mh-text-light:   #b0a9aa;
    --mh-text-white:   #ffffff;
    --mh-text-green:   #3e4d57;

    /* Typography */
    --mh-font-heading: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mh-font-body:    'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mh-font-mono:    'Courier New', Courier, monospace;

    --mh-weight-light:    300;
    --mh-weight-regular:  400;
    --mh-weight-medium:   500;
    --mh-weight-semibold: 600;

    /* Font sizes */
    --mh-text-xs:   0.75rem;
    --mh-text-sm:   0.875rem;
    --mh-text-base: 1rem;
    --mh-text-lg:   1.125rem;
    --mh-text-xl:   clamp( 1.25rem, 1.1rem + 0.5vw, 1.5rem );
    --mh-text-2xl:  clamp( 1.5rem, 1.25rem + 0.75vw, 2rem );
    --mh-text-3xl:  clamp( 1.875rem, 1.5rem + 1.25vw, 2.5rem );
    --mh-text-4xl:  clamp( 2.25rem, 1.75rem + 1.5vw, 3.25rem );
    --mh-text-5xl:  clamp( 3rem, 2rem + 2.5vw, 4.5rem );

    /* Letter spacing */
    --mh-tracking-tight:  -0.01em;
    --mh-tracking-normal: 0;
    --mh-tracking-wide:   0.1em;
    --mh-tracking-wider:  0.2em;
    --mh-tracking-widest: 0.3em;

    /* Line heights */
    --mh-leading-tight:   1.1;
    --mh-leading-snug:    1.3;
    --mh-leading-normal:  1.6;
    --mh-leading-relaxed: 1.75;

    /* Spacing scale */
    --mh-sp-1:  0.25rem;
    --mh-sp-2:  0.5rem;
    --mh-sp-3:  0.75rem;
    --mh-sp-4:  1rem;
    --mh-sp-6:  1.5rem;
    --mh-sp-8:  2rem;
    --mh-sp-10: 2.5rem;
    --mh-sp-12: 3rem;
    --mh-sp-16: 4rem;
    --mh-sp-20: 5rem;
    --mh-sp-24: 6rem;
    --mh-sp-32: 8rem;

    /* Border radius */
    --mh-radius-sm:  2px;
    --mh-radius:     4px;
    --mh-radius-md:  6px;
    --mh-radius-lg:  12px;
    --mh-radius-pill: 9999px;

    /* Shadows */
    --mh-shadow-sm:  0 1px 3px rgba(35, 31, 32, 0.08);
    --mh-shadow:     0 4px 16px rgba(35, 31, 32, 0.1);
    --mh-shadow-lg:  0 12px 40px rgba(35, 31, 32, 0.14);

    /* Transitions */
    --mh-transition:        200ms ease;
    --mh-transition-slow:   400ms ease;

    /* Nav height */
    --mh-nav-height: 80px;

    /* Max width */
    --mh-max-width: 1200px;
    --mh-content-width: 760px;
}


/* =============================================================================
   1. Resets & Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:  var( --mh-font-body );
    font-weight:  var( --mh-weight-light );
    font-size:    var( --mh-text-base );
    line-height:  var( --mh-leading-normal );
    color:        var( --mh-text-body );
    background:   var( --mh-white );
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.mh-menu-open,
body.mh-lightbox-open,
body.mh-dialog-open {
    overflow: hidden;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var( --mh-text-green );
    text-decoration: none;
    transition: color var( --mh-transition );
}

a:hover {
    color: var( --mh-green-deep );
}

ul,
ol {
    list-style: none;
}

address {
    font-style: normal;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
}


/* =============================================================================
   2. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family:    var( --mh-font-heading );
    font-weight:    var( --mh-weight-light );
    line-height:    var( --mh-leading-tight );
    letter-spacing: var( --mh-tracking-wide );
    text-transform: uppercase;
    color:          var( --mh-text-dark );
}

h1 { font-size: var( --mh-text-5xl ); }
h2 { font-size: var( --mh-text-4xl ); letter-spacing: var( --mh-tracking-wider ); }
h3 { font-size: var( --mh-text-2xl ); }
h4 { font-size: var( --mh-text-xl ); }
h5 { font-size: var( --mh-text-lg ); }

p {
    font-size:   var( --mh-text-base );
    line-height: var( --mh-leading-normal );
    color:       var( --mh-text-body );
}

.mh-narrative p:not(:last-child) {
    margin-bottom: var( --mh-sp-4 );
}


.mh-text-lead {
    font-size:   var( --mh-text-lg );
    line-height: var( --mh-leading-relaxed );
    color:       var( --mh-text-body );
}

.mh-text-body-sm {
    font-size:   var( --mh-text-sm );
    line-height: var( --mh-leading-relaxed );
    color:       var( --mh-text-muted );
}

.mh-text-caption {
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-widest );
    text-transform: uppercase;
    color:          var( --mh-green );
}

/* Eyebrow / category label */
.mh-eyebrow {
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-widest );
    text-transform: uppercase;
    color:          var( --mh-green );
    margin-bottom:  var( --mh-sp-3 );
}

.mh-section--dark  .mh-eyebrow,
.mh-section--wash  .mh-eyebrow {
    color: var( --mh-green-300 );
}

/* Light surface headings */
.mh-section--wash h2,
.mh-section--wash h3,
.mh-section--wash h4 {
    color: var( --mh-dark );
}

/* Dark surface headings */
.mh-section--dark h1,
.mh-section--dark h2,
.mh-section--dark h3,
.mh-section--dark h4 {
    color: var( --mh-white );
}

.mh-section--dark p {
    color: var( --mh-stone );
}

.mh-section--dark .mh-text-lead,
.mh-section--green .mh-text-lead {
    color: var( --mh-stone );
}

.mh-section--dark .mh-text-body-sm,
.mh-section--green .mh-text-body-sm {
    color: var( --mh-stone );
}

.mh-section--dark .mh-text-caption,
.mh-section--green .mh-text-caption {
    color: var( --mh-green-200 );
}

.mh-section--dark figure.mh-figure figcaption,
.mh-section--dark .mh-award-badge figcaption {
    color: var( --mh-stone );
}

.mh-section--dark .mh-phone-link,
.mh-section--dark .mh-email-link {
    color: var( --mh-stone-light );
}


/* =============================================================================
   3. Layout Utilities
   ========================================================================== */

.mh-container {
    width: 100%;
    max-width: var( --mh-max-width );
    margin-inline: auto;
    padding-inline: var( --mh-sp-6 );
}

.mh-content-wrap {
    max-width: var( --mh-content-width );
    margin-inline: auto;
}

.mh-stack-md,
.mh-stack-lg {
    display:        flex;
    flex-direction: column;
}

.mh-stack-md {
    gap: clamp( var( --mh-sp-6 ), 3vw, var( --mh-sp-8 ) );
}

.mh-stack-lg {
    gap: clamp( var( --mh-sp-8 ), 4vw, var( --mh-sp-12 ) );
}

.mh-stack-md > .mh-section-intro,
.mh-stack-lg > .mh-section-intro {
    margin-bottom: 0;
}


/* =============================================================================
   4. Navigation
   ========================================================================== */

.mh-nav {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    z-index:         1000;
    height:          var( --mh-nav-height );
    background:      transparent;
    transition:      background var( --mh-transition-slow ), box-shadow var( --mh-transition-slow );
}

.mh-nav.is-scrolled,
.single-room .mh-nav,
.archive-room .mh-nav,
.page .mh-nav {
    background:  rgba(35, 31, 32, 0.96);
    box-shadow:  0 1px 0 rgba(255,255,255, 0.06);
    backdrop-filter: blur( 8px );
}

.mh-nav__inner {
    display:         flex;
    align-items:     center;
    height:          100%;
    gap:             var( --mh-sp-6 );
}

.mh-nav__logo-link {
    padding-block: var( --mh-sp-2 );
}

.mh-nav__logo {
    width:  140px;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.mh-nav__links {
    display:     none;
    align-items: center;
    gap:         var( --mh-sp-8 );
    margin-left: auto;
}

.mh-nav__link {
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-widest );
    text-transform: uppercase;
    color:          rgba( 255,255,255, 0.85 );
    transition:     color var( --mh-transition );
}

.mh-nav__link:hover,
.mh-nav__link.is-active {
    color: var( --mh-white );
}

.mh-nav__actions {
    display:     none;
    align-items: center;
    gap:         var( --mh-sp-4 );
}

.mh-nav__phone {
    display:        flex;
    align-items:    center;
    gap:            var( --mh-sp-2 );
    font-size:      var( --mh-text-sm );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: 0.05em;
    color:          rgba( 255,255,255, 0.8 );
    transition:     color var( --mh-transition );
}

.mh-nav__phone:hover {
    color: var( --mh-white );
}

.mh-nav__phone-number {
    display: none;
}

/* Hamburger */
.mh-nav__hamburger {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            5px;
    width:          36px;
    height:         36px;
    padding:        var( --mh-sp-2 );
    flex-shrink:    0;
}

.mh-nav__hamburger-bar {
    display:        block;
    width:          100%;
    height:         2px;
    background:     var( --mh-white );
    transition:     transform var( --mh-transition ), opacity var( --mh-transition );
}

/* Mobile CTA (always visible on mobile) */
.mh-nav__mobile-cta {
    margin-left: auto;
}

@media ( min-width: 1024px ) {
    .mh-nav__hamburger,
    .mh-nav .mh-nav__mobile-cta {
        display: none;
    }

    .mh-nav__links,
    .mh-nav__actions {
        display: flex;
    }

    .mh-nav__phone-number {
        display: inline;
    }
}


/* =============================================================================
   5. Mobile Menu Overlay
   ========================================================================== */

.mh-mobile-menu {
    position:   fixed;
    inset:      0;
    z-index:    999;
    background: var( --mh-dark );
    display:    flex;
    flex-direction: column;
    transform:  translateX( -100% );
    transition: transform var( --mh-transition-slow );
    overflow-y: auto;
}

.mh-mobile-menu.is-open {
    transform: translateX( 0 );
}

.mh-mobile-menu__inner {
    padding:    var( --mh-sp-20 ) var( --mh-sp-8 ) var( --mh-sp-12 );
    flex:       1;
    display:    flex;
    flex-direction: column;
    gap:        var( --mh-sp-4 );
}

.mh-mobile-menu__close {
    position: absolute;
    top:      var( --mh-sp-6 );
    right:    var( --mh-sp-6 );
    color:    var( --mh-white );
    font-size: var( --mh-text-xl );
    padding:  var( --mh-sp-2 );
}

.mh-mobile-menu__link {
    display:        block;
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-2xl );
    font-weight:    var( --mh-weight-light );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-white );
    padding-block:  var( --mh-sp-3 );
    border-bottom:  1px solid var( --mh-dark-light );
}

.mh-mobile-menu__phone {
    display:     flex;
    align-items: center;
    gap:         var( --mh-sp-3 );
    color:       var( --mh-stone );
    font-size:   var( --mh-text-lg );
    margin-top:  auto;
    padding-top: var( --mh-sp-8 );
}

.mh-mobile-menu__backdrop {
    display:    none;
    position:   fixed;
    inset:      0;
    z-index:    998;
    background: rgba(0,0,0,0.6);
    opacity:    0;
    transition: opacity var( --mh-transition-slow );
}

.mh-mobile-menu__backdrop.is-visible {
    display: block;
    opacity: 1;
}


/* =============================================================================
   6. Hero
   ========================================================================== */

.mh-hero {
    position:    relative;
    overflow:    hidden;
    min-height:  100vh;
    display:     flex;
    align-items: center;
    padding-top: var( --mh-nav-height );
    background:  var( --mh-dark );
}

.mh-hero--rooms,
.mh-hero--inner {
    min-height: 60vh;
}

.mh-hero--compact {
    min-height: 40vh;
}

.mh-hero__media {
    position:  absolute;
    inset:     0;
    z-index:   0;
}

.mh-hero__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
}

.mh-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba( 35, 31, 32, 0.4 ) 0%,
        rgba( 35, 31, 32, 0.6 ) 60%,
        rgba( 35, 31, 32, 0.8 ) 100%
    );
}

.mh-hero__content {
    position:  relative;
    z-index:   1;
    padding-block: var( --mh-sp-24 );
    max-width:     640px;
}

.mh-hero__eyebrow {
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-widest );
    text-transform: uppercase;
    color:          var( --mh-stone );
    margin-bottom:  var( --mh-sp-3 );
}

.mh-hero__title {
    font-size:      clamp( 1.875rem, 1rem + 2.5vw, 2.75rem );
    font-weight:    var( --mh-weight-light );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-white );
    margin-bottom:  var( --mh-sp-6 );
}

.mh-hero__sub {
    font-size:      var( --mh-text-xl );
    font-weight:    var( --mh-weight-light );
    letter-spacing: 0.03em;
    color:          var( --mh-stone-light );
    margin-bottom:  var( --mh-sp-10 );
    line-height:    var( --mh-leading-snug );
}

.mh-hero__actions {
    display:         flex;
    align-items:     center;
    gap:             var( --mh-sp-4 );
    flex-wrap:       wrap;
}


/* =============================================================================
   7. Sections
   ========================================================================== */

.mh-section {
    padding-block: var( --mh-sp-24 );
}

.mh-section--sm {
    padding-block: var( --mh-sp-16 );
}

/* Canonical section surfaces for alternation: white, wash, dark. */
/* Green remains available as an accent surface and should usually inherit dark-surface module treatment. */

/* White surface */
.mh-section--white {
    background: var( --mh-white );
}

/* Moss Wash surface */
.mh-section--wash {
    background: var( --mh-wash );
}

/* Dark (Moss Dark) surface */
.mh-section--dark {
    background: var( --mh-dark );
    color:      var( --mh-stone );
}

/* Accent green surface */
.mh-section--green {
    background: var( --mh-green );
    color:      var( --mh-white );
}

.mh-section--green h1,
.mh-section--green h2,
.mh-section--green h3,
.mh-section--green h4 {
    color: var( --mh-white );
}

.mh-section--green p {
    color: var( --mh-white );
}

.mh-section--green .mh-eyebrow {
    color: var( --mh-green-200 );
}

.mh-section--green .mh-btn--ghost {
    color:        var( --mh-white );
    border-color: rgba( 255, 255, 255, 0.65 );
}

.mh-section--green .mh-btn--ghost:hover {
    background: var( --mh-white );
    color:      var( --mh-green-deep );
}

/* Section intro / heading group */
.mh-section-intro {
    margin-bottom: var( --mh-sp-16 );
}

.mh-section-intro--light h2,
.mh-section-intro--light h3 {
    color: var( --mh-white );
}

.mh-section-intro--light p,
.mh-section-intro--light .mh-eyebrow {
    color: var( --mh-stone );
}

.mh-section-intro__body {
    max-width:   600px;
    margin-top:  var( --mh-sp-4 );
    font-size:   var( --mh-text-lg );
    line-height: var( --mh-leading-relaxed );
}

.mh-section--white .mh-section-intro__body,
.mh-section--wash  .mh-section-intro__body {
    color: var( --mh-text-body );
}

.mh-section--dark .mh-section-intro__body {
    color: var( --mh-stone );
}


/* =============================================================================
   8. Buttons
   ========================================================================== */

.mh-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var( --mh-sp-2 );
    padding:         var( --mh-sp-4 ) var( --mh-sp-8 );
    font-family:     var( --mh-font-heading );
    font-size:       var( --mh-text-xs );
    font-weight:     var( --mh-weight-regular );
    letter-spacing:  var( --mh-tracking-wider );
    text-transform:  uppercase;
    border-radius:   var( --mh-radius );
    border:          1px solid transparent;
    cursor:          pointer;
    transition:      background var( --mh-transition ),
                     border-color var( --mh-transition ),
                     color var( --mh-transition );
    text-decoration: none;
    white-space:     nowrap;
    line-height:     1;
}

.mh-btn--sm {
    padding:     var( --mh-sp-3 ) var( --mh-sp-6 );
    font-size:   var( --mh-text-xs );
}

.mh-btn--lg {
    padding:     var( --mh-sp-6 ) var( --mh-sp-12 );
    font-size:   var( --mh-text-sm );
}

/* Primary — dark bg + white text */
.mh-btn--primary {
    background:   var( --mh-dark );
    color:        var( --mh-white );
    border-color: var( --mh-dark );
}

.mh-btn--primary:hover {
    background:   var( --mh-dark-mid );
    border-color: var( --mh-dark-mid );
    color:        var( --mh-white );
}

/* Green accent button */
.mh-btn--accent {
    background:   var( --mh-green );
    color:        var( --mh-white );
    border-color: var( --mh-green );
}

.mh-btn--accent:hover {
    background:   var( --mh-green-deep );
    border-color: var( --mh-green-deep );
    color:        var( --mh-white );
}

.mh-btn--alert {
    background:   #9f2d25;
    color:        var( --mh-white );
    border-color: #9f2d25;
}

.mh-btn--alert:hover {
    background:   #7f211b;
    border-color: #7f211b;
    color:        var( --mh-white );
}

/* Ghost — transparent + dark border */
.mh-btn--ghost {
    background:   transparent;
    color:        var( --mh-dark );
    border-color: var( --mh-dark );
}

.mh-btn--ghost:hover {
    background:   var( --mh-dark );
    color:        var( --mh-white );
}

/* Ghost on hero (dark image background) */
.mh-hero .mh-btn--ghost {
    color:        var( --mh-white );
    border-color: rgba( 255, 255, 255, 0.7 );
}

.mh-hero .mh-btn--ghost:hover {
    background:   var( --mh-white );
    color:        var( --mh-dark );
    border-color: var( --mh-white );
}

/* Ghost on dark surface */
.mh-section--dark .mh-btn--ghost {
    color:        var( --mh-white );
    border-color: var( --mh-white );
}

.mh-section--dark .mh-btn--ghost:hover {
    background:   var( --mh-white );
    color:        var( --mh-dark );
}

.mh-promo-strip {
    background: var( --mh-dark );
    color:      var( --mh-white );
    padding:    var( --mh-sp-8 ) 0;
}

.mh-promo-strip__inner {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             var( --mh-sp-6 );
}

.mh-promo-strip__eyebrow {
    margin-bottom:    var( --mh-sp-2 );
    color:            var( --mh-stone-light );
    font-size:        var( --mh-text-xs );
    font-weight:      var( --mh-weight-regular );
    letter-spacing:   var( --mh-tracking-wider );
    line-height:      1.2;
    text-transform:   uppercase;
}

.mh-promo-strip h2 {
    color:         var( --mh-white );
    font-size:     var( --mh-text-2xl );
    margin-bottom: 0;
}

.mh-promo-strip .mh-btn {
    width:       100%;
    white-space: normal;
    line-height: 1.25;
    text-align:  center;
}

.mh-offer-dialog {
    width:         min( calc( 100% - var( --mh-sp-8 ) ), 640px );
    max-height:    calc( 100vh - var( --mh-sp-8 ) );
    margin:        auto;
    padding:       0;
    border:        0;
    border-radius: var( --mh-radius );
    background:    transparent;
    color:         var( --mh-text-body );
}

.mh-offer-dialog::backdrop {
    background: rgba( 20, 29, 24, 0.72 );
}

.mh-offer-dialog__panel {
    position:   relative;
    padding:    var( --mh-sp-10 );
    background: var( --mh-white );
    box-shadow: var( --mh-shadow-lg );
}

.mh-offer-dialog__close {
    position:       absolute;
    top:            var( --mh-sp-4 );
    right:          var( --mh-sp-4 );
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    width:          2.5rem;
    height:         2.5rem;
    border:         1px solid var( --mh-stone-light );
    border-radius:  var( --mh-radius );
    color:          var( --mh-dark );
    background:     var( --mh-white );
}

.mh-offer-dialog__close:hover {
    background: var( --mh-wash );
}

.mh-offer-dialog h2 {
    max-width:     480px;
    margin-bottom: var( --mh-sp-6 );
    font-size:     var( --mh-text-3xl );
}

.mh-offer-dialog p:not(:last-child),
.mh-offer-dialog__list {
    margin-bottom: var( --mh-sp-4 );
}

.mh-offer-dialog__list {
    display:        grid;
    gap:            var( --mh-sp-2 );
    padding-left:   var( --mh-sp-6 );
    list-style:     disc;
}

.mh-offer-dialog__list li {
    line-height: var( --mh-leading-normal );
}


/* =============================================================================
   9. Cards (generic)
   ========================================================================== */

.mh-card {
    background:    var( --mh-white );
    border:        1px solid var( --mh-stone-light );
    border-radius: var( --mh-radius );
    overflow:      hidden;
    transition:    box-shadow var( --mh-transition );
}

.mh-card:hover {
    box-shadow: var( --mh-shadow );
}

.mh-section--dark .mh-card {
    background:   var( --mh-dark-mid );
    border-color: var( --mh-dark-light );
}

.mh-card-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
    gap:                   clamp( var( --mh-sp-8 ), 3vw, var( --mh-sp-10 ) );
}

.mh-card-grid--3 {
    grid-template-columns: 1fr;
}

.mh-card-grid--2 {
    grid-template-columns: 1fr;
}

.mh-card-grid--4 {
    grid-template-columns: 1fr;
}

@media ( min-width: 640px ) {
    .mh-card-grid--2,
    .mh-card-grid--3,
    .mh-card-grid--4 {
        grid-template-columns: repeat( 2, 1fr );
    }
}

@media ( min-width: 1024px ) {
    .mh-card-grid--3 {
        grid-template-columns: repeat( 3, 1fr );
    }
    .mh-card-grid--4 {
        grid-template-columns: repeat( 4, 1fr );
    }
}

/* Shared module catalogue -------------------------------------------------- */

.mh-badge-group {
    display:   flex;
    flex-wrap: wrap;
    gap:       var( --mh-sp-3 );
}

.mh-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            var( --mh-sp-2 );
    padding:        0.7rem 1rem;
    border:         1px solid var( --mh-stone-light );
    border-radius:  var( --mh-radius-pill );
    background:     var( --mh-cream );
    color:          var( --mh-green-deep );
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
}

.mh-badge--green {
    background:   var( --mh-green );
    border-color: var( --mh-green );
    color:        var( --mh-white );
}

.mh-badge--dark {
    background:   var( --mh-dark );
    border-color: var( --mh-dark );
    color:        var( --mh-white );
}

.mh-badge--outline {
    background:   transparent;
    border-color: rgba( 62, 87, 72, 0.35 );
    color:        var( --mh-green-deep );
}

.mh-notice {
    display:        grid;
    grid-template-columns: auto 1fr;
    gap:            var( --mh-sp-6 );
    padding:        var( --mh-sp-8 );
    border:         1px solid var( --mh-stone-light );
    border-left:    3px solid var( --mh-green );
    border-radius:  var( --mh-radius );
    background:     var( --mh-cream );
}

.mh-notice__icon {
    width:          2.5rem;
    height:         2.5rem;
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    border-radius:  50%;
    background:     rgba( 62, 87, 72, 0.12 );
    color:          var( --mh-green );
    font-size:      1rem;
}

.mh-notice__content {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-2 );
}

.mh-notice__title {
    font-size:      var( --mh-text-sm );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-dark );
}

.mh-notice__content p {
    color: var( --mh-text-body );
}

.mh-notice--dark {
    background:   var( --mh-dark-mid );
    border-color: var( --mh-dark-light );
}

.mh-notice--dark .mh-notice__title,
.mh-notice--dark .mh-notice__content p {
    color: var( --mh-white );
}

.mh-notice--dark .mh-notice__icon {
    background: rgba( 255, 255, 255, 0.08 );
    color:      var( --mh-green-200 );
}

.mh-stat-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
    gap:                   var( --mh-sp-8 );
}

.mh-stat {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-3 );
    padding:        var( --mh-sp-8 );
    border-top:     1px solid var( --mh-green );
    background:     rgba( 255, 255, 255, 0.66 );
}

.mh-section--dark .mh-stat,
.mh-section--green .mh-stat {
    background: var( --mh-dark-mid );
}

.mh-stat__value {
    display:        block;
    font-family:    var( --mh-font-heading );
    font-size:      clamp( 2.2rem, 1.8rem + 1vw, 3.25rem );
    font-weight:    var( --mh-weight-light );
    line-height:    1;
    letter-spacing: var( --mh-tracking-wide );
    text-transform: uppercase;
    color:          var( --mh-dark );
}

.mh-stat__label {
    display:        block;
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-widest );
    text-transform: uppercase;
    color:          var( --mh-green );
}

.mh-stat__text {
    font-size: var( --mh-text-sm );
    color:     var( --mh-text-body );
}

.mh-section--dark .mh-stat__value,
.mh-section--green .mh-stat__value {
    color: var( --mh-white );
}

.mh-section--dark .mh-stat__text,
.mh-section--green .mh-stat__text {
    color: var( --mh-stone );
}

.mh-process-grid,
.mh-team-grid,
.mh-testimonial-grid,
.mh-logo-strip {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var( --mh-sp-8 );
}

@media ( min-width: 768px ) {
    .mh-process-grid,
    .mh-team-grid,
    .mh-testimonial-grid {
        grid-template-columns: repeat( 3, 1fr );
    }

    .mh-logo-strip {
        grid-template-columns: repeat( 4, 1fr );
    }
}

.mh-process-step,
.mh-team-card,
.mh-testimonial-card,
.mh-logo-strip__item,
.mh-type-spec,
.mh-category-card,
.mh-support-panel,
.mh-policy-callout {
    border:        1px solid var( --mh-stone-light );
    border-radius: var( --mh-radius );
    background:    var( --mh-white );
}

.mh-section--dark .mh-process-step,
.mh-section--dark .mh-team-card,
.mh-section--dark .mh-testimonial-card,
.mh-section--dark .mh-logo-strip__item,
.mh-section--dark .mh-type-spec,
.mh-section--dark .mh-support-panel,
.mh-section--dark .mh-policy-callout,
.mh-section--green .mh-process-step,
.mh-section--green .mh-team-card,
.mh-section--green .mh-testimonial-card,
.mh-section--green .mh-logo-strip__item,
.mh-section--green .mh-type-spec,
.mh-section--green .mh-support-panel,
.mh-section--green .mh-policy-callout {
    background:   var( --mh-dark-mid );
    border-color: var( --mh-dark-light );
}

.mh-type-spec {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-4 );
    padding:        var( --mh-sp-8 );
    background:     var( --mh-white );
}

.mh-type-spec__label,
.mh-type-spec__meta {
    font-size:      var( --mh-text-xs );
    letter-spacing: var( --mh-tracking-widest );
    text-transform: uppercase;
}

.mh-type-spec__label {
    font-family: var( --mh-font-heading );
    color:       var( --mh-green );
}

.mh-type-spec__meta {
    color: var( --mh-text-muted );
}

.mh-type-spec__sample {
    color: var( --mh-dark );
}

.mh-type-spec__sample--font-heading {
    font-family:    var( --mh-font-heading );
    font-size:      clamp( 2rem, 1.65rem + 1vw, 2.8rem );
    font-weight:    var( --mh-weight-light );
    line-height:    var( --mh-leading-tight );
    letter-spacing: var( --mh-tracking-wide );
}

.mh-type-spec__sample--font-body {
    font-family: var( --mh-font-body );
    font-size:   clamp( 1.6rem, 1.35rem + 0.7vw, 2.2rem );
    font-weight: var( --mh-weight-light );
    line-height: var( --mh-leading-normal );
}

.mh-type-spec__sample--h1,
.mh-type-spec__sample--h2,
.mh-type-spec__sample--h3,
.mh-type-spec__sample--h4 {
    font-family:    var( --mh-font-heading );
    font-weight:    var( --mh-weight-light );
    line-height:    var( --mh-leading-tight );
    letter-spacing: var( --mh-tracking-wide );
    text-transform: uppercase;
}

.mh-type-spec__sample--h1 { font-size: var( --mh-text-4xl ); }
.mh-type-spec__sample--h2 { font-size: var( --mh-text-3xl ); }
.mh-type-spec__sample--h3 { font-size: var( --mh-text-2xl ); }
.mh-type-spec__sample--h4 { font-size: var( --mh-text-xl ); }

.mh-section--dark .mh-type-spec__label,
.mh-section--green .mh-type-spec__label {
    color: var( --mh-green-200 );
}

.mh-section--dark .mh-type-spec__sample,
.mh-section--dark .mh-type-spec p,
.mh-section--green .mh-type-spec__sample,
.mh-section--green .mh-type-spec p {
    color: var( --mh-white );
}

.mh-section--dark .mh-type-spec__meta,
.mh-section--green .mh-type-spec__meta {
    color: var( --mh-stone );
}

.mh-process-step {
    padding:        var( --mh-sp-8 );
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-4 );
}

.mh-process-step__number {
    width:          2.5rem;
    height:         2.5rem;
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    border-radius:  50%;
    background:     var( --mh-green );
    color:          var( --mh-white );
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-sm );
    letter-spacing: var( --mh-tracking-wider );
}

.mh-process-step__title,
.mh-team-card__name,
.mh-category-card__title,
.mh-product-card__title,
.mh-policy-callout__title {
    font-size:      var( --mh-text-lg );
    letter-spacing: var( --mh-tracking-wide );
}

.mh-process-step p,
.mh-team-card p,
.mh-category-card p,
.mh-product-card p,
.mh-policy-callout p,
.mh-support-panel p,
.mh-support-panel li {
    color: var( --mh-text-body );
}

.mh-section--dark .mh-process-step p,
.mh-section--dark .mh-team-card p,
.mh-section--dark .mh-category-card p,
.mh-section--dark .mh-product-card p,
.mh-section--dark .mh-policy-callout p,
.mh-section--dark .mh-support-panel p,
.mh-section--dark .mh-support-panel li,
.mh-section--green .mh-process-step p,
.mh-section--green .mh-team-card p,
.mh-section--green .mh-category-card p,
.mh-section--green .mh-product-card p,
.mh-section--green .mh-policy-callout p,
.mh-section--green .mh-support-panel p,
.mh-section--green .mh-support-panel li {
    color: var( --mh-stone );
}

.mh-logo-strip__item {
    min-height:     140px;
    padding:        var( --mh-sp-8 );
    display:        flex;
    align-items:    center;
    justify-content: center;
    text-align:     center;
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-sm );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-green-deep );
}

.mh-section--dark .mh-logo-strip__item,
.mh-section--green .mh-logo-strip__item {
    color: var( --mh-white );
}

.mh-trust-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       var( --mh-sp-4 );
}

.mh-trust-item {
    display:        inline-flex;
    align-items:    center;
    gap:            var( --mh-sp-3 );
    padding:        0.9rem 1rem;
    border:         1px solid var( --mh-stone-light );
    border-radius:  var( --mh-radius-pill );
    background:     rgba( 255, 255, 255, 0.75 );
    color:          var( --mh-dark );
    font-size:      var( --mh-text-sm );
}

.mh-trust-item i {
    color: var( --mh-green );
}

.mh-section--dark .mh-trust-item,
.mh-section--green .mh-trust-item {
    background:   rgba( 255, 255, 255, 0.06 );
    border-color: rgba( 255, 255, 255, 0.16 );
    color:        var( --mh-white );
}

.mh-section--dark .mh-trust-item i,
.mh-section--green .mh-trust-item i {
    color: var( --mh-green-200 );
}

.mh-testimonial-card {
    padding:        var( --mh-sp-8 );
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-6 );
}

.mh-testimonial-card__quote {
    font-size:      var( --mh-text-lg );
    line-height:    var( --mh-leading-relaxed );
    color:          var( --mh-text-body );
}

.mh-testimonial-card__quote::before { content: open-quote; }
.mh-testimonial-card__quote::after  { content: close-quote; }

.mh-testimonial-card__meta {
    font-size:      var( --mh-text-xs );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-text-muted );
}

.mh-section--dark .mh-testimonial-card__quote,
.mh-section--green .mh-testimonial-card__quote {
    color: var( --mh-stone );
}

.mh-section--dark .mh-testimonial-card__meta,
.mh-section--green .mh-testimonial-card__meta {
    color: var( --mh-green-200 );
}

.mh-team-card {
    padding:        var( --mh-sp-8 );
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-5, 1.25rem );
}

.mh-team-card__avatar {
    width:          4rem;
    height:         4rem;
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    border-radius:  50%;
    background:     var( --mh-green );
    color:          var( --mh-white );
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-lg );
    letter-spacing: var( --mh-tracking-wide );
}

.mh-team-card__role,
.mh-category-card__meta,
.mh-product-card__meta,
.mh-support-panel__eyebrow {
    font-size:      var( --mh-text-xs );
    letter-spacing: var( --mh-tracking-widest );
    text-transform: uppercase;
    color:          var( --mh-green );
}

.mh-pricing-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var( --mh-sp-8 );
}

@media ( min-width: 960px ) {
    .mh-pricing-grid {
        grid-template-columns: repeat( 3, 1fr );
    }
}

.mh-pricing-card {
    position:       relative;
    padding:        var( --mh-sp-10 );
    border:         1px solid var( --mh-stone-light );
    border-radius:  var( --mh-radius );
    background:     var( --mh-white );
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-6 );
}

.mh-pricing-card--featured {
    border-color: var( --mh-green );
    box-shadow:   var( --mh-shadow );
}

.mh-pricing-card__price {
    font-family: var( --mh-font-heading );
    font-size:   clamp( 2rem, 1.8rem + 1vw, 3rem );
    line-height: 1;
    color:       var( --mh-dark );
}

.mh-pricing-card__price span {
    font-size:      var( --mh-text-sm );
    letter-spacing: var( --mh-tracking-wide );
    text-transform: uppercase;
    color:          var( --mh-text-muted );
}

.mh-pricing-card__list {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-3 );
}

.mh-pricing-card__list li,
.mh-support-panel__list li {
    position:      relative;
    padding-left:  1.5rem;
    color:         var( --mh-text-body );
}

.mh-pricing-card__list li::before,
.mh-support-panel__list li::before {
    content:  '\2713';
    position: absolute;
    left:     0;
    top:      0;
    color:    var( --mh-green );
}

.mh-faq-list {
    display: grid;
    gap:     var( --mh-sp-6 );
}

.mh-faq-item {
    border:        1px solid var( --mh-stone-light );
    border-radius: var( --mh-radius );
    background:    var( --mh-white );
    overflow:      hidden;
}

.mh-faq-item summary {
    position:       relative;
    list-style:     none;
    cursor:         pointer;
    padding:        var( --mh-sp-6 ) var( --mh-sp-8 );
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-sm );
    letter-spacing: var( --mh-tracking-wide );
    text-transform: uppercase;
    color:          var( --mh-dark );
}

.mh-faq-item summary::-webkit-details-marker {
    display: none;
}

.mh-faq-item summary::after {
    content:   '+';
    position:  absolute;
    right:     var( --mh-sp-8 );
    top:       50%;
    transform: translateY( -50% );
    color:     var( --mh-green );
}

.mh-faq-item[open] summary::after {
    content: '-';
}

.mh-faq-item__body {
    padding:   var( --mh-sp-2 ) var( --mh-sp-8 ) var( --mh-sp-8 );
}

.mh-data-table-wrap {
    overflow-x: auto;
}

.mh-data-table {
    width:            100%;
    min-width:        620px;
    border-collapse:  collapse;
    border:           1px solid var( --mh-stone-light );
    background:       var( --mh-white );
}

.mh-data-table caption {
    margin-bottom:  var( --mh-sp-6 );
    text-align:     left;
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-widest );
    text-transform: uppercase;
    color:          var( --mh-green );
}

.mh-data-table th,
.mh-data-table td {
    padding:        var( --mh-sp-5, 1.25rem ) var( --mh-sp-6 );
    border-bottom:  1px solid var( --mh-stone-light );
    text-align:     left;
    vertical-align: top;
}

.mh-data-table th {
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-dark );
    background:     var( --mh-wash );
}

.mh-data-table td {
    color: var( --mh-text-body );
}

.mh-category-card {
    overflow: hidden;
}

.mh-category-card__media,
.mh-product-card__media {
    aspect-ratio: 16 / 10;
    overflow:     hidden;
}

.mh-category-card__media img,
.mh-product-card__media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.mh-category-card__body,
.mh-support-panel,
.mh-policy-callout {
    padding: var( --mh-sp-8 );
}

.mh-category-card__body {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-4 );
}

.mh-category-card__link,
.mh-product-card__link {
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-green );
}

.mh-product-card {
    display:        grid;
    grid-template-columns: 1fr;
    border:         1px solid var( --mh-stone-light );
    border-radius:  var( --mh-radius );
    overflow:       hidden;
    background:     var( --mh-white );
}

@media ( min-width: 768px ) {
    .mh-product-card {
        grid-template-columns: minmax( 0, 0.95fr ) minmax( 0, 1.05fr );
    }
}

.mh-product-card__body {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-6 );
    padding:        var( --mh-sp-10 );
}

.mh-product-card__actions {
    display:  flex;
    flex-wrap: wrap;
    gap:      var( --mh-sp-4 );
    margin-top: auto;
}

.mh-support-panel {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-6 );
}

.mh-support-panel__list {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-4 );
}

.mh-policy-callout {
    border-left: 3px solid var( --mh-green );
    display:     flex;
    flex-direction: column;
    gap:         var( --mh-sp-4 );
}

.mh-section--dark .mh-pricing-card,
.mh-section--green .mh-pricing-card,
.mh-section--dark .mh-product-card,
.mh-section--green .mh-product-card,
.mh-section--dark .mh-faq-item,
.mh-section--green .mh-faq-item,
.mh-section--dark .mh-data-table,
.mh-section--green .mh-data-table {
    background:   var( --mh-dark-mid );
    border-color: var( --mh-dark-light );
}

.mh-section--dark .mh-pricing-card__price,
.mh-section--green .mh-pricing-card__price,
.mh-section--dark .mh-product-card__title,
.mh-section--green .mh-product-card__title,
.mh-section--dark .mh-process-step__title,
.mh-section--green .mh-process-step__title,
.mh-section--dark .mh-team-card__name,
.mh-section--green .mh-team-card__name,
.mh-section--dark .mh-category-card__title,
.mh-section--green .mh-category-card__title,
.mh-section--dark .mh-policy-callout__title,
.mh-section--green .mh-policy-callout__title,
.mh-section--dark .mh-support-panel h3,
.mh-section--green .mh-support-panel h3,
.mh-section--dark .mh-faq-item summary,
.mh-section--green .mh-faq-item summary,
.mh-section--dark .mh-data-table th,
.mh-section--green .mh-data-table th,
.mh-section--dark .mh-data-table td,
.mh-section--green .mh-data-table td {
    color: var( --mh-white );
}

.mh-section--dark .mh-pricing-card__price span,
.mh-section--green .mh-pricing-card__price span,
.mh-section--dark .mh-team-card__role,
.mh-section--green .mh-team-card__role,
.mh-section--dark .mh-category-card__meta,
.mh-section--green .mh-category-card__meta,
.mh-section--dark .mh-product-card__meta,
.mh-section--green .mh-product-card__meta,
.mh-section--dark .mh-support-panel__eyebrow,
.mh-section--green .mh-support-panel__eyebrow {
    color: var( --mh-green-200 );
}

.mh-section--dark .mh-data-table th,
.mh-section--green .mh-data-table th {
    background: rgba( 255, 255, 255, 0.06 );
}


/* =============================================================================
  10. Room Cards
   ========================================================================== */

.mh-room-list {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-10 );
}

.mh-room-card {
    position:       relative;
    display:        flex;
    flex-direction: column;
    background:     var( --mh-white );
    border:         1px solid var( --mh-stone-light );
    border-radius:  var( --mh-radius );
    overflow:       hidden;
    transition:     box-shadow var( --mh-transition ), border-color var( --mh-transition );
}

.mh-room-card:hover {
    box-shadow: var( --mh-shadow );
}

.mh-room-card:hover .mh-room-card__title a {
    color: var( --mh-green );
}

.mh-room-card:hover .mh-btn--ghost {
    background:   var( --mh-dark );
    color:        var( --mh-white );
}

.mh-room-card__image {
    aspect-ratio: 16 / 9;
    overflow:     hidden;
}

.mh-room-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var( --mh-transition-slow );
}

.mh-room-card:hover .mh-room-card__img {
    transform: scale( 1.03 );
}

.mh-room-card__body {
    padding:        var( --mh-sp-6 );
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-3 );
    flex:           1;
}

.mh-room-card__building {
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-green );
}

.mh-room-card__title {
    font-size:      var( --mh-text-2xl );
    font-weight:    var( --mh-weight-light );
    letter-spacing: var( --mh-tracking-wide );
    text-transform: uppercase;
    color:          var( --mh-dark );
}

.mh-room-card__title a {
    color: inherit;
}

.mh-room-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mh-room-card__title a:hover {
    color: var( --mh-green );
}

.mh-room-card__excerpt {
    font-size:   var( --mh-text-base );
    line-height: var( --mh-leading-relaxed );
    color:       var( --mh-text-body );
    flex:        1;
}

.mh-room-card__features {
    font-size:      var( --mh-text-xs );
    letter-spacing: var( --mh-tracking-wide );
    text-transform: uppercase;
    color:          var( --mh-text-muted );
}

.mh-room-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var( --mh-sp-4 );
    flex-wrap:       wrap;
    margin-top:      auto;
    padding-top:     var( --mh-sp-4 );
    border-top:      1px solid var( --mh-stone-light );
}

.mh-room-card__meta {
    display: flex;
    gap:     var( --mh-sp-4 );
}

.mh-room-card__size {
    font-size:      var( --mh-text-xs );
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var( --mh-text-muted );
}

.mh-room-card__price {
    font-size:      var( --mh-text-sm );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: 0.05em;
    color:          var( --mh-dark );
}

.mh-room-card__actions {
    display: flex;
    gap:     var( --mh-sp-3 );
    flex-wrap: wrap;
}

@media ( min-width: 768px ) {
    .mh-room-card {
        flex-direction: row;
    }

    .mh-room-card__image {
        width:       40%;
        flex-shrink: 0;
        aspect-ratio: unset;
    }

    .mh-room-card__body {
        padding: var( --mh-sp-10 );
    }
}


/* Room cards inside dark sections — card has white bg, so pin text to light-surface colours */
.mh-section--dark .mh-room-card__title,
.mh-section--dark .mh-room-card__title a {
    color: var( --mh-dark );
}

.mh-section--dark .mh-room-card__title a:hover {
    color: var( --mh-green );
}

.mh-section--dark .mh-room-card__excerpt {
    color: var( --mh-text-body );
}

.mh-section--dark .mh-room-card__building {
    color: var( --mh-green );
}

.mh-section--dark .mh-room-card__features,
.mh-section--dark .mh-room-card__size {
    color: var( --mh-text-muted );
}

.mh-section--dark .mh-room-card__price {
    color: var( --mh-dark );
}

/* =============================================================================
  11. Split Layout
   ========================================================================== */

.mh-split {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-12 );
    align-items:    center;
}

.mh-split--reverse .mh-split__media {
    order: -1;
}

.mh-split__content {
    flex: 1;
}

.mh-split__media {
    flex:          1;
    border-radius: var( --mh-radius );
    overflow:      hidden;
}

.mh-split__media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    display:    block;
}

.mh-split__media img.mh-image--focus-bottom {
    object-position: center bottom;
}

.mh-split__content p {
    font-size:   var( --mh-text-lg );
    line-height: var( --mh-leading-relaxed );
    margin-top:  var( --mh-sp-4 );
}

.mh-section--dark  .mh-split__content p,
.mh-section--dark  .mh-split__content p {
    color: var( --mh-stone );
}

.mh-section--green .mh-split__content p {
    color: var( --mh-white );
}

.mh-split__actions {
    margin-top: var( --mh-sp-8 );
    display:    flex;
    gap:        var( --mh-sp-4 );
    flex-wrap:  wrap;
}

@media ( min-width: 768px ) {
    .mh-split {
        flex-direction: row;
        gap:            var( --mh-sp-16 );
    }

    .mh-split--reverse {
        flex-direction: row-reverse;
    }

    .mh-split--reverse .mh-split__media {
        order: unset;
    }
}


/* =============================================================================
  12. Gallery & Lightbox
   ========================================================================== */

.mh-gallery {
    display:               grid;
    grid-template-columns: repeat( 3, 1fr );
    gap:                   var( --mh-sp-2 );
}

.mh-gallery__thumb {
    aspect-ratio:  4 / 3;
    overflow:      hidden;
    cursor:        pointer;
    border-radius: var( --mh-radius-sm );
    /* Button reset */
    background:    none;
    border:        none;
    padding:       0;
    display:       block;
    position:      relative;
}

.mh-gallery__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var( --mh-transition-slow );
}

.mh-gallery__thumb:hover img,
.mh-gallery__thumb:focus-visible img {
    transform: scale( 1.05 );
}

/* Expand icon overlay shown on hover / focus */
.mh-gallery__expand {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba( 0, 0, 0, 0 );
    color:           #ffffff;
    font-size:       1.25rem;
    opacity:         0;
    transition:      opacity 0.3s ease, background 0.3s ease;
    pointer-events:  none;
}

.mh-gallery__thumb:hover .mh-gallery__expand,
.mh-gallery__thumb:focus-visible .mh-gallery__expand {
    opacity:    1;
    background: rgba( 0, 0, 0, 0.35 );
}

/* Lightbox overlay */
.mh-lightbox {
    position: fixed;
    inset:    0;
    z-index:  2000;
    display:  flex;
    align-items: center;
    justify-content: center;
}

.mh-lightbox[hidden] {
    display: none;
}

.mh-lightbox__inner {
    position:   relative;
    z-index:    2001;
    max-width:  90vw;
    max-height: 90vh;
}

.mh-lightbox__figure {
    text-align: center;
    margin:     0;
}

.mh-lightbox__img {
    display:       block;
    max-width:     100%;
    max-height:    85vh;
    width:         auto;
    height:        auto;
    margin:        0 auto;
    border-radius: var( --mh-radius );
}

.mh-lightbox__caption {
    margin-top: var( --mh-sp-3 );
    font-size:  var( --mh-text-sm );
    color:      var( --mh-stone );
}

.mh-lightbox__counter {
    position:    absolute;
    bottom:      calc( -1 * var( --mh-sp-10 ) );
    left:        50%;
    transform:   translateX( -50% );
    font-size:   var( --mh-text-xs );
    letter-spacing: var( --mh-tracking-wide );
    text-transform: uppercase;
    color:       var( --mh-stone );
}

.mh-lightbox__close,
.mh-lightbox__prev,
.mh-lightbox__next {
    position:         absolute;
    z-index:          2005;
    width:            48px;
    height:           48px;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    border-radius:    50%;
    background-color: rgba( 35, 31, 32, 0.55 );
    border:           1px solid rgba( 255, 255, 255, 0.15 );
    color:            var( --mh-white );
    font-size:        var( --mh-text-lg );
    cursor:           pointer;
    opacity:          0.85;
    transition:       background-color var( --mh-transition ),
                      border-color var( --mh-transition ),
                      transform var( --mh-transition ),
                      opacity var( --mh-transition );
}

.mh-lightbox__close:hover,
.mh-lightbox__prev:hover,
.mh-lightbox__next:hover {
    opacity:          1;
    background-color: var( --mh-green );
    border-color:     var( --mh-green-light );
}

.mh-lightbox__close {
    top:   var( --mh-sp-6 );
    right: var( --mh-sp-6 );
}

.mh-lightbox__close:hover {
    transform: scale( 1.08 );
}

.mh-lightbox__prev {
    left:      var( --mh-sp-6 );
    top:       50%;
    transform: translateY( -50% );
}

.mh-lightbox__prev:hover {
    transform: translateY( -50% ) scale( 1.08 );
}

.mh-lightbox__next {
    right:     var( --mh-sp-6 );
    top:       50%;
    transform: translateY( -50% );
}

.mh-lightbox__next:hover {
    transform: translateY( -50% ) scale( 1.08 );
}

/* Accessibility focus state */
.mh-lightbox__close:focus-visible,
.mh-lightbox__prev:focus-visible,
.mh-lightbox__next:focus-visible {
    border-radius:  50%;
    outline:        2px solid var( --mh-white );
    outline-offset: 3px;
}

@media ( max-width: 767px ) {
    .mh-lightbox__close,
    .mh-lightbox__prev,
    .mh-lightbox__next {
        width:     44px;
        height:     44px;
        font-size: var( --mh-text-base );
    }

    .mh-lightbox__close {
        top:   var( --mh-sp-4 );
        right: var( --mh-sp-4 );
    }

    .mh-lightbox__prev {
        left:  var( --mh-sp-4 );
    }

    .mh-lightbox__next {
        right: var( --mh-sp-4 );
    }
}

@media ( prefers-reduced-motion: reduce ) {
    .mh-lightbox__close,
    .mh-lightbox__prev,
    .mh-lightbox__next {
        transition: none;
    }

    .mh-lightbox__close:hover,
    .mh-lightbox__prev:hover,
    .mh-lightbox__next:hover {
        transform: none;
    }

    .mh-lightbox__prev:hover,
    .mh-lightbox__next:hover {
        transform: translateY( -50% );
    }
}

.mh-lightbox__backdrop {
    position:   fixed;
    inset:      0;
    background: rgba( 35, 31, 32, 0.92 );
}


/* =============================================================================
  13. Amenity Grid
   ========================================================================== */

.mh-amenity-split {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var( --mh-sp-10 );
}

.mh-amenity-split__heading {
    font-size:      var( --mh-text-xs );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-green );
    margin-bottom:  var( --mh-sp-6 );
}

.mh-amenity-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       var( --mh-sp-3 ) var( --mh-sp-6 );
}

.mh-amenity-item {
    display:     flex;
    align-items: center;
    gap:         var( --mh-sp-2 );
    font-size:   var( --mh-text-sm );
    color:       var( --mh-text-body );
}

.mh-amenity-item i {
    color:      var( --mh-green );
    font-size:  var( --mh-text-sm );
    flex-shrink: 0;
}

@media ( min-width: 768px ) {
    .mh-amenity-split {
        grid-template-columns: repeat( 2, 1fr );
    }
}


/* =============================================================================
  13b. Room Spec Panels (Booking.com-style detail grid)
   ========================================================================== */

/* Hero badge strip -------------------------------------------------------- */

.mh-room-badges {
    display:   flex;
    flex-wrap: wrap;
    gap:       var( --mh-sp-2 );
    margin:    var( --mh-sp-6 ) 0 var( --mh-sp-8 );
}

.mh-room-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        5px 12px;
    background:     rgba( 255, 255, 255, 0.15 );
    border:         1px solid rgba( 255, 255, 255, 0.3 );
    border-radius:  100px;
    font-size:      0.78rem;
    font-weight:    500;
    letter-spacing: 0.03em;
    color:          #fff;
    backdrop-filter: blur( 6px );
}

.mh-room-badge i {
    font-size:  0.72rem;
    opacity:    0.85;
    flex-shrink: 0;
}

/* Gallery count label ---------------------------------------------------- */

.mh-gallery-count {
    display:        inline-block;
    margin-left:    var( --mh-sp-2 );
    font-size:      0.7rem;
    font-weight:    500;
    letter-spacing: 0.05em;
    color:          var( --mh-bark );
    text-transform: lowercase;
}

/* Compact gallery variant (4 columns, smaller thumbs) -------------------- */

.mh-gallery--compact {
    grid-template-columns: repeat( 2, 1fr );
}

.mh-gallery--compact .mh-gallery__thumb {
    aspect-ratio: 4 / 3;
}

@media ( min-width: 600px ) {
    .mh-gallery--compact {
        grid-template-columns: repeat( 4, 1fr );
    }
}

@media ( min-width: 1024px ) {
    .mh-gallery--compact {
        grid-template-columns: repeat( 5, 1fr );
    }
}

/* Specs grid container --------------------------------------------------- */

.mh-room-specs {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var( --mh-sp-3 );
    margin-top:            var( --mh-sp-6 );
}

@media ( min-width: 768px ) {
    .mh-room-specs {
        grid-template-columns: 1fr 1fr;
    }
}

/* At desktop, use 3 equal columns only when a View panel is present.    */
@media ( min-width: 1024px ) {
    .mh-room-specs--has-view {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .mh-room-specs--has-view .mh-spec-panel--view {
        grid-column: auto;
    }
}

/* Spec panel card -------------------------------------------------------- */

.mh-spec-panel {
    background:    var( --mh-wash );
    border:        1px solid var( --mh-stone );
    border-radius: var( --mh-radius );
    padding:       var( --mh-sp-4 );
}

.mh-spec-panel__title {
    display:        flex;
    align-items:    center;
    gap:            var( --mh-sp-2 );
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var( --mh-green );
    margin:         0 0 var( --mh-sp-4 );
    padding-bottom: var( --mh-sp-3 );
    border-bottom:  1px solid rgba( 62, 87, 72, 0.15 );
}

.mh-spec-panel__title i {
    font-size:  0.85rem;
    flex-shrink: 0;
}

/* Full-width panels: only Facilities spans all columns.
   View is full-width on mobile/tablet but slots into col 3 at desktop (above). */
.mh-spec-panel--facilities {
    grid-column: 1 / -1;
}

/* Panel A: Detail key-value list ---------------------------------------- */

.mh-spec-detail-list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        0;
}

.mh-spec-detail-list li {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             var( --mh-sp-3 );
    padding:         var( --mh-sp-2 ) 0;
    border-bottom:   1px solid rgba( 62, 87, 72, 0.12 );
    font-size:       var( --mh-text-sm );
}

.mh-spec-detail-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mh-spec-detail__label {
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size:      0.7rem;
    color:          var( --mh-bark );
    flex-shrink:    0;
}

.mh-spec-detail__value {
    color:      var( --mh-dark );
    text-align: right;
}

/* Spec checklist (panels B, C, D) --------------------------------------- */

.mh-spec-checklist {
    list-style:    none;
    padding:       0;
    margin:        0;
    display:       flex;
    flex-direction: column;
    gap:           0.3rem;
}

.mh-spec-checklist li {
    display:     flex;
    align-items: flex-start;
    gap:         var( --mh-sp-2 );
    font-size:   var( --mh-text-sm );
    color:       var( --mh-text-body );
    line-height: 1.5;
}

/* Real Font Awesome icon per term */
.mh-spec-checklist li i {
    color:      var( --mh-green );
    font-size:  0.85rem;
    flex-shrink: 0;
    margin-top: 0.2em;
    width:      1em;
    text-align: center;
}

.mh-spec-checklist__upgrade {
    font-weight: 600;
    color:       var( --mh-dark ) !important;
}

/* Upgrade items use gold icon */
.mh-spec-checklist__upgrade i {
    color: #8a7340 !important;
}

/* 2-column checklist for Room Facilities panel --------------------------- */

.mh-spec-checklist--2col {
    flex-direction: unset;
    display:        grid;
    grid-template-columns: 1fr;
}

@media ( min-width: 640px ) {
    .mh-spec-checklist--2col {
        grid-template-columns: 1fr 1fr;
    }
}

/* Hotel services compact list -------------------------------------------- */

.mh-service-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       var( --mh-sp-3 ) var( --mh-sp-6 );
    list-style: none;
    padding:    0;
    margin:     0;
}

.mh-service-item {
    display:     flex;
    align-items: center;
    gap:         var( --mh-sp-2 );
    font-size:   var( --mh-text-sm );
    color:       var( --mh-text-body );
}

.mh-service-item i {
    color:      var( --mh-green );
    font-size:  0.9rem;
    flex-shrink: 0;
}

/* Section heading small variant ------------------------------------------ */

.mh-section-heading--sm {
    font-size: var( --mh-text-lg ) !important;
}

/* CTA building sub-label ------------------------------------------------- */

.mh-room-cta__building {
    font-weight: 400;
    opacity:     0.7;
}


/* =============================================================================
  14. CTA Strip
   ========================================================================== */

.mh-cta-strip {
    padding-block: var( --mh-sp-20 );
}

/* ── Access note notice ─────────────────────────────────────────────────── */

.mh-access-note {
    display:     flex;
    align-items: flex-start;
    gap:         var( --mh-sp-4 );
    padding:     var( --mh-sp-4 ) var( --mh-sp-6 );
    background:  rgba( 62, 87, 72, 0.08 );
    border-left: 3px solid var( --mh-green );
    border-radius: 4px;
    max-width:   680px;
}

.mh-access-note__icon {
    color:      var( --mh-green );
    font-size:  1.1rem;
    flex-shrink: 0;
    margin-top: 0.15em;
}

.mh-access-note__text {
    font-size:   var( --mh-text-base );
    color:       var( --mh-bark );
    line-height: 1.6;
    margin:      0;
}



.mh-cta-strip__inner {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             var( --mh-sp-8 );
}

.mh-cta-strip__text h2 {
    font-size:   var( --mh-text-3xl );
    color:       var( --mh-white );
    margin-bottom: var( --mh-sp-3 );
}

.mh-cta-strip__text p {
    font-size:   var( --mh-text-lg );
    color:       var( --mh-stone );
    max-width:   560px;
}

.mh-cta-strip__actions {
    display:  flex;
    gap:      var( --mh-sp-4 );
    flex-wrap: wrap;
}

@media ( min-width: 768px ) {
    .mh-cta-strip__inner {
        flex-direction:  row;
        align-items:     center;
        justify-content: space-between;
    }
}


/* =============================================================================
  15. Note Caption (brand element)
   ========================================================================== */

.mh-note {
    display:        block;
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-light );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-text-muted );
    margin-top:     var( --mh-sp-3 );
}

.mh-note--green {
    color: var( --mh-green );
}

/* =============================================================================
  15. Note Caption (brand element)
   ========================================================================== */

.mh-note {
    display:        block;
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-light );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-text-muted );
    margin-top:     var( --mh-sp-3 );
}

.mh-note--green {
    color: var( --mh-green );
}

/* Award badge pair — side by side ─────────────────────────────────────────── */
.mh-award-badges {
    display:        flex;
    gap:            var( --mh-sp-4 );
    align-items:    flex-start;
    width:          100%;
}

.mh-award-badge {
    flex:    1;
    min-width: 0;
}

.mh-award-badge a {
    display: block;
    text-decoration: none;
}

.mh-award-badge img {
    width:         100%;
    height:        auto;
    display:       block;
    object-fit:    contain;
    border-radius: var( --mh-radius );
}

.mh-award-badge figcaption {
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-text-muted );
    margin-top:     var( --mh-sp-2 );
}

@media ( max-width: 480px ) {
    .mh-award-badges {
        flex-direction: column;
    }
}

figure.mh-figure {
    position: relative;
}

figure.mh-figure figcaption {
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-text-muted );
    margin-top:     var( --mh-sp-2 );
}


/* =============================================================================
  16. Contact Form
   ========================================================================== */

.mh-form {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-6 );
}

.mh-form__row {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var( --mh-sp-6 );
}

@media ( min-width: 640px ) {
    .mh-form__row--2 {
        grid-template-columns: repeat( 2, 1fr );
    }
}

.mh-form__field {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-2 );
}

.mh-form__label {
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-text-dark );
}

.mh-form__input,
.mh-form__textarea,
.mh-form__select {
    padding:       var( --mh-sp-3 ) var( --mh-sp-4 );
    border:        1px solid var( --mh-stone );
    border-radius: var( --mh-radius );
    font-family:   var( --mh-font-body );
    font-size:     var( --mh-text-base );
    font-weight:   var( --mh-weight-light );
    color:         var( --mh-text-dark );
    background:    var( --mh-white );
    transition:    border-color var( --mh-transition );
    width:         100%;
}

.mh-form__input:focus,
.mh-form__textarea:focus,
.mh-form__select:focus {
    outline:       none;
    border-color:  var( --mh-green );
    box-shadow:    0 0 0 3px rgba( 62, 87, 72, 0.15 );
}

.mh-form__textarea {
    min-height:  160px;
    resize:      vertical;
}

.mh-form__submit {
    align-self: flex-start;
}

.mh-form-message {
    padding:       var( --mh-sp-4 ) var( --mh-sp-6 );
    border-radius: var( --mh-radius );
    font-size:     var( --mh-text-sm );
    line-height:   var( --mh-leading-normal );
}

.mh-form-message--success {
    background: #e8f5e9;
    color:      #1b5e20;
    border:     1px solid #a5d6a7;
}

.mh-form-message--error {
    background: #fdecea;
    color:      #b71c1c;
    border:     1px solid #ef9a9a;
}


/* =============================================================================
  17. Footer
   ========================================================================== */

.mh-footer {
    background: var( --mh-dark-deep );
    color:      var( --mh-stone );
    border-top: 1px solid var( --mh-dark-light );
}

.mh-footer__main {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var( --mh-sp-12 );
    padding-block:         var( --mh-sp-20 );
}

@media ( min-width: 640px ) {
    .mh-footer__main {
        grid-template-columns: repeat( 2, 1fr );
    }
}

@media ( min-width: 1024px ) {
    .mh-footer__main {
        grid-template-columns: repeat( 4, 1fr );
    }
}

.mh-footer__heading {
    font-family:    var( --mh-font-heading );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-widest );
    text-transform: uppercase;
    color:          var( --mh-white );
    margin-bottom:  var( --mh-sp-6 );
}

.mh-footer__address {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-4 );
}

.mh-footer__address p {
    font-size:   var( --mh-text-sm );
    line-height: var( --mh-leading-relaxed );
    color:       var( --mh-stone );
}

.mh-footer__link {
    color: var( --mh-stone );
    font-size: var( --mh-text-sm );
    transition: color var( --mh-transition );
}

.mh-footer__link:hover {
    color: var( --mh-white );
}

.mh-footer__link--small {
    font-size: var( --mh-text-xs );
}

.mh-footer__nav-link {
    display:      block;
    padding-block: var( --mh-sp-2 );
}

.mh-footer__social {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-4 );
}

.mh-footer__social-link {
    display:     flex;
    align-items: center;
    gap:         var( --mh-sp-3 );
    color:       var( --mh-stone );
    font-size:   var( --mh-text-sm );
    transition:  color var( --mh-transition );
}

.mh-footer__social-link i {
    width:     var( --mh-sp-6 );
    font-size: var( --mh-text-base );
}

.mh-footer__social-link:hover {
    color: var( --mh-white );
}

.mh-footer__copyright {
    border-top: 1px solid var( --mh-dark-light );
    padding-block: var( --mh-sp-6 );
}

.mh-footer__copyright p {
    font-size:   var( --mh-text-xs );
    letter-spacing: 0.05em;
    color:       var( --mh-text-light );
    text-align:  center;
}


/* =============================================================================
  18. Scroll Reveal
   ========================================================================== */

.mh-scroll-reveal {
    opacity:   0;
    transform: translateY( 20px );
    transition: opacity var( --mh-transition-slow ),
                transform var( --mh-transition-slow );
}

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

@media ( prefers-reduced-motion: reduce ) {
    .mh-scroll-reveal {
        opacity:   1;
        transform: none;
        transition: none;
    }
}


/* =============================================================================
  19. Accessibility & Focus
   ========================================================================== */

:focus-visible {
    outline:        2px solid var( --mh-green );
    outline-offset: 3px;
    border-radius:  var( --mh-radius-sm );
}

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

/* ═══════════════════════════════════════════════════════════════
   Section 20 — Page-specific components (homepage, rooms, contact, legal)
   ═══════════════════════════════════════════════════════════════ */

/* Coordinate accent — homepage hotel story */
.mh-coordinate {
    font-family: var( --mh-font );
    font-size:   0.85rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color:       var( --mh-green );
    margin-bottom: var( --mh-sp-3 );
    text-transform: uppercase;
}

/* Section-level CTA row — centres a button below a card grid */
.mh-section-cta {
    text-align: center;
    margin-top: var( --mh-sp-8 );
}

/* Room card portrait variant — forces column layout even at wider viewports */
.mh-room-card--portrait {
    flex-direction: column !important;
}

.mh-room-card--portrait .mh-room-card__image {
    width:        100% !important;
    aspect-ratio: 16 / 10 !important;
    overflow:     hidden;
}

/* Section heading (used inside room content sections) */
.mh-section-heading {
    font-size:      1.5rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom:  var( --mh-sp-6 );
    padding-bottom: var( --mh-sp-3 );
    border-bottom:  2px solid var( --mh-stone );
    color:          var( --mh-dark );
}

/* Gallery eyebrow heading */
.mh-gallery-heading {
    margin-bottom: var( --mh-sp-4 );
}

/* Room CTA strip */
.mh-room-cta .mh-container {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var( --mh-sp-6 );
}

.mh-room-cta__details {
    flex: 1;
    min-width: 200px;
}

.mh-room-cta__label {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    color:          var( --mh-stone );
    text-transform: uppercase;
    margin-bottom:  4px;
}

.mh-room-cta__size {
    font-size:   0.9rem;
    color:       var( --mh-stone );
    margin-bottom: 4px;
}

.mh-room-cta__price {
    font-size:   1.4rem;
    font-weight: 700;
    color:       #fff;
}

.mh-room-cta__actions {
    display:   flex;
    gap:       var( --mh-sp-3 );
    flex-wrap: wrap;
}

.mh-room-cta__enquire {
    width:     100%;
    font-size: 0.85rem;
    color:     var( --mh-stone );
}

.mh-room-cta__enquire a {
    color:           var( --mh-stone );
    text-decoration: none;
}

.mh-room-cta__enquire a:hover {
    text-decoration: underline;
}

/* Collaborator cards */
.mh-collaborator-card .mh-collaborator-card__body {
    padding: var( --mh-sp-6 );
}

.mh-collaborator-card__title {
    font-size:      1.05rem;
    font-weight:    600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color:          var( --mh-dark );
    margin-bottom:  4px;
}

.mh-collaborator-card__role {
    font-size:    0.8rem;
    font-weight:  600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:        var( --mh-green );
    margin-bottom: var( --mh-sp-2 );
}

.mh-collaborator-card__desc {
    font-size:   0.9rem;
    line-height: 1.65;
    color:       #555;
    margin-bottom: var( --mh-sp-3 );
}

.mh-collaborator-card__link {
    font-size:   0.85rem;
    color:       var( --mh-green );
    font-weight: 500;
    word-break:  break-word;
}

/* Place cards (Lost & Found guide) */
.mh-place-card .mh-place-card__body {
    padding: var( --mh-sp-4 ) var( --mh-sp-6 );
}

.mh-place-card__title {
    font-size:      1rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var( --mh-dark );
    margin-bottom:  var( --mh-sp-2 );
}

.mh-place-card__desc {
    font-size:   0.9rem;
    line-height: 1.6;
    color:       #555;
    margin-bottom: var( --mh-sp-2 );
}

.mh-place-card__link {
    font-size:   0.85rem;
    color:       var( --mh-green );
    font-weight: 500;
}

/* Info cards (contact page - transport) */
.mh-info-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var( --mh-sp-4 );
    text-align: center;
    padding:    var( --mh-sp-8 ) var( --mh-sp-6 );
}

.mh-info-card__icon {
    font-size:     2rem;
    color:         var( --mh-green );
    margin-bottom: 0;
}

.mh-info-card__title {
    font-size:      1rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var( --mh-dark );
    margin-bottom:  0;
}

.mh-info-card__desc {
    font-size:   0.9rem;
    line-height: 1.65;
    color:       #555;
}

.mh-info-card .mh-cta-strip__actions {
    justify-content: center;
}

/* Contact details */
.mh-contact-grid {
    display: flex;
    flex-direction: column;
    gap: var( --mh-sp-8 );
}

/* Individual general contact item */
.mh-contact-item {
    padding-top: var( --mh-sp-4 );
    padding-bottom: var( --mh-sp-4 );
    border-bottom: 1px solid var( --mh-stone-light );
}

.mh-contact-item:first-child {
    padding-top: 0;
}

.mh-contact-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mh-contact-item__label {
    font-family: var( --mh-font-heading );
    font-size: var( --mh-text-xs );
    font-weight: var( --mh-weight-semibold );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color: var( --mh-green );
    margin-bottom: var( --mh-sp-2 );
}

.mh-contact-item__value {
    font-size: var( --mh-text-base );
    line-height: var( --mh-leading-relaxed );
    color: var( --mh-text-body );
}

.mh-contact-item__secondary {
    display: block;
    margin-top: var( --mh-sp-1 );
    font-size: var( --mh-text-sm );
    color: var( --mh-text-muted );
}

.mh-contact-item__social {
    display: flex;
    gap: var( --mh-sp-4 );
    flex-wrap: wrap;
    margin-top: var( --mh-sp-2 );
}

.mh-contact-item__social a {
    display: inline-flex;
    align-items: center;
    gap: var( --mh-sp-2 );
    color: var( --mh-green );
    font-weight: var( --mh-weight-medium );
    font-size: var( --mh-text-sm );
    border: 1px solid var( --mh-stone );
    padding: var( --mh-sp-2 ) var( --mh-sp-4 );
    border-radius: var( --mh-radius-pill );
    transition: all var( --mh-transition );
}

.mh-contact-item__social a:hover {
    background: var( --mh-green );
    color: var( --mh-white );
    border-color: var( --mh-green );
    box-shadow: var( --mh-shadow-sm );
}

/* Reception highlight panel */
.mh-contact-panel {
    background: var( --mh-white );
    border: 1px solid var( --mh-stone-light );
    border-radius: var( --mh-radius-md );
    padding: var( --mh-sp-8 );
    box-shadow: var( --mh-shadow-sm );
    border-top: 4px solid var( --mh-green );
    display: flex;
    flex-direction: column;
    gap: var( --mh-sp-6 );
}

.mh-contact-panel__title {
    font-family: var( --mh-font-heading );
    font-size: var( --mh-text-sm );
    font-weight: var( --mh-weight-semibold );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color: var( --mh-text-dark );
    margin-bottom: var( --mh-sp-2 );
    border-bottom: 1px solid var( --mh-stone-light );
    padding-bottom: var( --mh-sp-3 );
}

.mh-contact-panel__item {
    display: flex;
    gap: var( --mh-sp-4 );
}

.mh-contact-panel__icon {
    font-size: 1.25rem;
    color: var( --mh-green );
    flex-shrink: 0;
    margin-top: 2px;
}

.mh-contact-panel__content {
    flex: 1;
}

.mh-contact-panel__label {
    font-family: var( --mh-font-heading );
    font-size: var( --mh-text-xs );
    font-weight: var( --mh-weight-semibold );
    letter-spacing: var( --mh-tracking-wide );
    text-transform: uppercase;
    color: var( --mh-text-muted );
    margin-bottom: var( --mh-sp-1 );
}

.mh-contact-panel__value {
    font-size: var( --mh-text-base );
    font-weight: var( --mh-weight-medium );
    color: var( --mh-text-dark );
    line-height: var( --mh-leading-snug );
}

.mh-contact-panel__times {
    display: flex;
    flex-wrap: wrap;
    gap: var( --mh-sp-4 ) var( --mh-sp-8 );
    margin-bottom: var( --mh-sp-2 );
}

.mh-contact-panel__time-block {
    display: flex;
    flex-direction: column;
}

.mh-contact-panel__time-label {
    font-size: var( --mh-text-xs );
    color: var( --mh-text-muted );
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mh-contact-panel__time-val {
    font-size: 1.05rem;
    font-weight: var( --mh-weight-semibold );
    color: var( --mh-text-dark );
}

.mh-contact-panel__note {
    font-size: var( --mh-text-xs );
    color: var( --mh-text-muted );
    line-height: var( --mh-leading-normal );
    margin-top: var( --mh-sp-2 );
    padding: var( --mh-sp-2 ) var( --mh-sp-3 );
    background: var( --mh-green-50 );
    border-left: 3px solid var( --mh-green-300 );
    border-radius: 0 var( --mh-radius-sm ) var( --mh-radius-sm ) 0;
}

.mh-phone-link,
.mh-email-link {
    color:           var( --mh-green );
    font-weight:     600;
    text-decoration: none;
}

.mh-phone-link:hover,
.mh-email-link:hover {
    text-decoration: underline;
}

.mh-inline-link {
    color:       var( --mh-green );
    font-weight: 500;
}

/* Map placeholder */
.mh-map-placeholder {
    border-radius: var( --mh-radius );
    overflow:      hidden;
    border:        1px solid var( --mh-stone );
}

.mh-map-placeholder iframe {
    display: block;
}

.mh-location-map {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: var( --mh-radius );
    border:        1px solid var( --mh-stone );
}

/* 2x2 Grid Layout for Contact Page Details */
.mh-contact-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var( --mh-sp-8 );
}

.mh-contact-cell {
    width: 100%;
}

.mh-contact-map-cell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mh-location-map-link {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var( --mh-radius );
    overflow: hidden;
    border: 1px solid var( --mh-stone );
}

.mh-location-map-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 320px;
    transition: transform var( --mh-transition-slow );
}

.mh-location-map-link:hover img {
    transform: scale( 1.02 );
}

.mh-osm-wrap {
    border-radius: var( --mh-radius );
    overflow:      hidden;
    border:        1px solid var( --mh-stone );
    height:        100%;
    min-height:    320px;
}

.mh-osm-wrap iframe {
    display:    block;
    width:      100%;
    height:     calc( 100% + 42px ); /* Clip the OSM attribution bar (~42px) */
    margin-top: 0;
}

@media ( min-width: 768px ) {
    .mh-contact-grid-2x2 {
        grid-template-columns: 1fr 1fr;
        gap: var( --mh-sp-10 ) var( --mh-sp-12 );
    }

    .mh-location-map-link img {
        min-height: 100%;
    }
}

.mh-osm-credit {
    font-size:  var( --mh-text-xs );
    text-align: right;
    padding:    var( --mh-sp-2 ) var( --mh-sp-3 );
    color:      var( --mh-text-muted );
    margin:     0;
    background: var( --mh-wash );
}

.mh-osm-credit a {
    color: var( --mh-green );
}

/* Enquiry form wrap */
.mh-form-wrap {
    max-width: 800px;
    margin:    0 auto;
}

.mh-form-intro {
    margin-bottom: var( --mh-sp-8 );
}

.mh-form-intro h2 {
    margin-bottom: var( --mh-sp-2 );
}

.mh-form-intro p {
    font-size: 1rem;
    color:     #555;
}

.mh-form__row {
    margin-bottom: var( --mh-sp-4 );
}

.mh-form__row--2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var( --mh-sp-4 );
}

@media ( max-width: 600px ) {
    .mh-form__row--2 {
        grid-template-columns: 1fr;
    }
}

.mh-form__field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  var( --mh-sp-4 );
}

.mh-form__label {
    font-size:   0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color:       var( --mh-dark );
}

.mh-required {
    color: #c0392b;
}

.mh-form__submit {
    display:        flex;
    align-items:    center;
    gap:            var( --mh-sp-4 );
    flex-wrap:      wrap;
    margin-top:     var( --mh-sp-6 );
}

.mh-form__privacy {
    font-size: 0.8rem;
    color:     #888;
}

.mh-form__btn-loading {
    display: none;
}

.mh-form.is-loading .mh-form__btn-text  { display: none; }
.mh-form.is-loading .mh-form__btn-loading { display: inline; }

/* Legal pages */
.mh-legal-container {
    max-width:  800px;
    margin:     0 auto;
    padding:    var( --mh-sp-12 ) var( --mh-sp-6 );
}

.mh-legal-container h2 {
    font-size:      1.1rem;
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var( --mh-dark );
    margin-top:     var( --mh-sp-8 );
    margin-bottom:  var( --mh-sp-3 );
    padding-top:    var( --mh-sp-6 );
    border-top:     1px solid var( --mh-stone );
}

.mh-legal-container h2:first-child {
    border-top:  none;
    padding-top: 0;
    margin-top:  0;
}

.mh-legal-container p,
.mh-legal-container ul,
.mh-legal-container ol {
    font-size:   1rem;
    line-height: 1.75;
    color:       #444;
    margin-bottom: var( --mh-sp-3 );
}

.mh-legal-container ul,
.mh-legal-container ol {
    padding-left: var( --mh-sp-5 );
}

.mh-legal-container li {
    margin-bottom: var( --mh-sp-1 );
}

.mh-legal-footer {
    padding: var( --mh-sp-6 ) 0;
    font-size: 0.9rem;
    color:     #666;
}

/* ── Hero variants for inner pages ─────────────────────────── */
.mh-hero--our-story  { min-height: 50vh; }
.mh-hero--lost-found { min-height: 50vh; }
.mh-hero--room       { min-height: 60vh; }

/* ── Amenity column aliases (within .mh-amenity-split grid) ── */
.mh-amenity-col {
    /* grid cell — layout provided by .mh-amenity-split grid */
}

.mh-amenity-col__title {
    font-size:      var( --mh-text-xs );
    font-weight:    600;
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          var( --mh-green );
    margin-bottom:  var( --mh-sp-4 );
}

/* ── Room listing (horizontal cards for rooms overview page) ─ */
.mh-room-group-intro {
    margin-bottom: var( --mh-sp-10 );
}

.mh-room-group-intro__body {
    font-size:   1.05rem;
    line-height: 1.7;
    color:       var( --mh-text-body );
    max-width:   680px;
    margin-top:  var( --mh-sp-3 );
}

.mh-room-listing {
    display:        flex;
    flex-direction: column;
    gap:            var( --mh-sp-8 );
}

.mh-room-listing__item {
    display:        flex;
    flex-direction: column;
    background:     var( --mh-white );
    border:         1px solid var( --mh-stone-light );
    border-radius:  var( --mh-radius );
    overflow:       hidden;
    transition:     box-shadow var( --mh-transition );
}

.mh-room-listing__item:hover {
    box-shadow: var( --mh-shadow );
}

.mh-room-listing__image {
    aspect-ratio: 16 / 9;
    overflow:     hidden;
    flex-shrink:  0;
}

.mh-room-listing__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var( --mh-transition-slow );
}

.mh-room-listing__item:hover .mh-room-listing__image img {
    transform: scale( 1.03 );
}

.mh-room-listing__body {
    padding: var( --mh-sp-6 );
    flex: 1;
}

.mh-room-listing__title {
    font-size:      1.5rem;
    font-weight:    300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var( --mh-dark );
    margin-bottom:  var( --mh-sp-3 );
}

.mh-room-listing__persona {
    font-size:    0.9rem;
    font-style:   italic;
    color:        var( --mh-text-muted );
    margin-top:   var( --mh-sp-2 );
    margin-bottom: var( --mh-sp-4 );
}

.mh-room-listing__features {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var( --mh-sp-2 ) var( --mh-sp-4 );
    padding:     0;
    list-style:  none;
    font-size:   0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:       var( --mh-stone );
    margin-bottom: var( --mh-sp-4 );
}

.mh-room-listing__features li::before {
    content: '·';
    margin-right: 6px;
}

.mh-room-listing__features li:first-child::before {
    display: none;
}

.mh-room-listing__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var( --mh-sp-4 );
    flex-wrap:       wrap;
    margin-top:      var( --mh-sp-4 );
    padding-top:     var( --mh-sp-4 );
    border-top:      1px solid var( --mh-stone-light );
}

.mh-room-listing__price {
    font-size:   1.05rem;
    font-weight: 300;
    color:       var( --mh-green );
    letter-spacing: 0.02em;
}

.mh-room-listing__actions {
    display:   flex;
    gap:       var( --mh-sp-3 );
    flex-wrap: wrap;
}

@media ( min-width: 768px ) {
    .mh-promo-strip__inner {
        flex-direction:  row;
        align-items:     center;
        justify-content: space-between;
    }

    .mh-promo-strip .mh-btn {
        width: auto;
    }

    .mh-room-listing__item {
        flex-direction: row;
    }

    .mh-room-listing__image {
        width:        40%;
        aspect-ratio: unset;
    }

    .mh-room-listing__body {
        padding: var( --mh-sp-10 );
    }
}

/* ── Equal-width sibling buttons in action groups ─────────── */
.mh-cta-strip__actions .mh-btn,
.mh-room-listing__actions .mh-btn,
.mh-hero__actions .mh-btn {
    flex:             1;
    justify-content:  center;
    min-width:        0;
}

/* ── Room listing title + image links ─────────────────────── */
.mh-room-listing__title a {
    color:           inherit;
    text-decoration: none;
}

.mh-room-listing__title a:hover {
    color: var( --mh-green );
}

.mh-room-listing__image a {
    display: block;
    width:   100%;
    height:  100%;
}

/* ── Hero trust signal pills ──────────────────────────────── */
.mh-hero__trust {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var( --mh-sp-3 );
    margin-top:    var( --mh-sp-8 );
    margin-bottom: var( --mh-sp-8 );
}

.mh-hero__trust-item {
    display:        inline-flex;
    align-items:    center;
    gap:            var( --mh-sp-2 );
    font-size:      var( --mh-text-xs );
    font-weight:    var( --mh-weight-regular );
    letter-spacing: var( --mh-tracking-wider );
    text-transform: uppercase;
    color:          rgba( 255, 255, 255, 0.82 );
    background:     rgba( 255, 255, 255, 0.09 );
    border:         1px solid rgba( 255, 255, 255, 0.2 );
    padding:        var( --mh-sp-3 ) var( --mh-sp-6 );
    border-radius:  var( --mh-radius-pill );
}

.mh-hero__trust-item i {
    font-size: 0.65rem;
    opacity:   0.75;
}

/* ── Hero: 3-second rule — mobile responsive overrides ───── */
@media ( max-width: 767px ) {
    .mh-hero__content {
        padding-block: var( --mh-sp-16 );
    }

    .mh-hero__sub {
        margin-bottom: var( --mh-sp-6 );
    }

    .mh-hero__trust {
        margin-top:    var( --mh-sp-4 );
        margin-bottom: var( --mh-sp-6 );
    }
}

/* ===================================================
   TESTIMONIALS FOOTER (social proof)
   =================================================== */

.mh-testimonial-footer {
    margin-top: var( --mh-sp-10 );
    text-align: center;
}

.mh-testimonial-footer a {
    color:           var( --mh-green );
    text-decoration: none;
    font-size:       var( --mh-text-xs );
    letter-spacing:  var( --mh-tracking-wide );
    text-transform:  uppercase;
    transition:      color var( --mh-transition );
}

.mh-testimonial-footer a:hover {
    text-decoration: underline;
}