/* Morris Moor shared styles */

html {
    scroll-padding-top: 96px;
}

/* Lenis smooth scrolling (initialised in script.js). */
html.lenis,
html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}

body {
    margin: 0;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
}

/* Fine industrial grid — a nod to the factory the precinct used to be, and the
   one texture that stops a flat-colour section reading as a blank slab. Drawn
   as an overlay rather than a background-image so it composes with whatever
   colour, wash or gradient the section already carries. Sections on a dark
   ground override `--mm-grid-line` with a light ink. */
:root {
    --mm-grid-line: rgba(28, 28, 28, 0.035);
    --mm-grid-size: clamp(40px, 5vw, 72px);
}
.mm-grid-lines {
    position: relative;
    isolation: isolate;
}
.mm-grid-lines::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--mm-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--mm-grid-line) 1px, transparent 1px);
    background-size: var(--mm-grid-size) var(--mm-grid-size);
}

/* Header — three slots: nav left, wordmark centred, enquiry + account right.
   Equal `1fr` side columns keep the wordmark on the page's centre line no
   matter how wide either side grows. */
.mm-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 20px 40px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #D9D9D9;
    position: sticky;
    top: 0;
    z-index: 100;
}
/* Overlay variant: on the landing page the header floats over the full-bleed
   hero, then picks up a solid background once the page scrolls (`is-solid` is
   toggled from the landing page script). */
.mm-header-overlay {
    position: fixed;
    left: 0;
    right: 0;
    background-color: transparent;
    border-bottom-color: transparent;
    transition: background-color 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
}
.mm-header-overlay .mm-logo,
.mm-header-overlay .mm-nav-link,
.mm-header-overlay .mm-nav-greeting {
    color: #F2EEE7;
}
.mm-header-overlay .mm-nav-link:hover,
.mm-header-overlay .mm-nav-link-active {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.14);
}
.mm-header-overlay.is-solid {
    background-color: #FBF8F3;
    border-bottom-color: #DED8CC;
    padding-block: 14px;
}
.mm-header-overlay.is-solid .mm-logo,
.mm-header-overlay.is-solid .mm-nav-link,
.mm-header-overlay.is-solid .mm-nav-greeting {
    color: #1C1C1C;
}
.mm-header-overlay.is-solid .mm-nav-link:hover,
.mm-header-overlay.is-solid .mm-nav-link-active {
    color: #FF6900;
    background-color: #FFF3EB;
}
/* The fixed header is out of flow, so an empty flash slot must not push the
   hero down the page. */
.mm-header-overlay ~ .mm-main > .mm-flash {
    margin-bottom: 0;
}
.mm-header-overlay ~ .mm-main > .mm-flash .message {
    margin: 96px 24px 0;
}

.mm-logo {
    justify-self: center;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 1px;
    color: #272727;
    white-space: nowrap;
    text-decoration: none;
}
/* The wordmark is a link home. Fading rather than recolouring, so it reads the
   same over the landing page's dark hero as it does on a white header. */
a.mm-logo:hover,
a.mm-logo:focus-visible {
    opacity: 0.72;
}
.mm-nav {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mm-nav-link {
    font-size: 15px;
    font-weight: bold;
    color: #272727;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
}
.mm-nav-link:hover,
.mm-nav-link-active {
    color: #FF6900;
    background-color: #FFF3EB;
}
.mm-nav-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Enquiry sits with the actions rather than the page nav, but it is a link to a
   page and not a button, so it keeps the nav link's weight and just gains a
   little air before the buttons beside it. */
.mm-nav-link-action {
    margin-right: 4px;
    white-space: nowrap;
}
.mm-nav-greeting {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: bold;
    color: #272727;
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 4px;
}
.mm-nav-greeting:hover {
    color: #FF6900;
    background-color: #FFF3EB;
}
.mm-header-overlay .mm-nav-greeting:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.14);
}
.mm-header-overlay.is-solid .mm-nav-greeting:hover {
    color: #FF6900;
    background-color: #FFF3EB;
}

/* Too narrow for three columns: stack with the wordmark on top and both
   groups centred under it. */
@media (max-width: 900px) {
    .mm-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 14px 20px;
    }
    .mm-logo {
        order: -1;
        justify-self: center;
    }
    .mm-nav,
    .mm-nav-actions {
        justify-self: stretch;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .mm-nav:empty {
        display: none;
    }
}

.mm-header-btn,
.mm-login-btn {
    background-color: #FF6900;
    color: #FFFFFF;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}

/* Landing hero */
.mm-hero {
    background-color: #272727;
    color: #FFFFFF;
    padding: 100px 40px;
    text-align: center;
}
.mm-hero h1 {
    font-weight: bold;
    font-size: 48px;
    margin-bottom: 16px;
}
.mm-hero p {
    font-size: 18px;
    color: #D9D9D9;
    max-width: 600px;
    margin: 0 auto 32px;
}
.mm-hero-cta {
    background-color: #FF6900;
    color: #FFFFFF;
    padding: 14px 32px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}

/* ── Landing page ─────────────────────────────────────────────────────────── */

.mm-lp-eyebrow {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FF6900;
    margin: 0 0 20px;
}

.mm-lp-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FF6900;
    background-color: #FFF3EB;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px dashed rgba(255, 105, 0, 0.5);
    transform: rotate(-2deg);
    margin-bottom: 16px;
}
.mm-lp-tag-dark {
    background-color: rgba(255, 105, 0, 0.15);
    color: #FF6900;
}

/* Hero */
.mm-lp-hero {
    height: calc(100vh - 72px);
    min-height: 560px;
    max-height: 840px;
    background-color: #1C1C1C;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.mm-lp-hero-spotlight {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(
        circle 380px at var(--mm-spot-x, 50%) var(--mm-spot-y, 50%),
        rgba(255, 255, 255, 0.35),
        rgba(255, 105, 0, 0.14) 45%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    mix-blend-mode: overlay;
}
.mm-lp-hero:hover .mm-lp-hero-spotlight {
    opacity: 1;
}
.mm-lp-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 2;
}
.mm-lp-hero-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}

/* Generic wave divider, reused between the lower page sections */
.mm-wave-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
}
.mm-wave-divider svg {
    display: block;
    width: 100%;
    height: 44px;
}
.mm-lp-hero-inner {
    position: relative;
    padding: 80px 60px 80px 80px;
    z-index: 1;
}
.mm-lp-hero-heading {
    position: relative;
}
.mm-lp-hero-title {
    font-size: 64px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1.05;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
    animation: mmFadeInUp 0.7s ease 0.12s backwards;
}
/* Entrance animation — the hero fades/slides in on page load, staggered
   piece by piece, same fade-up used for the enquiry page hero. */
.mm-lp-hero .mm-lp-eyebrow {
    animation: mmFadeInUp 0.6s ease backwards;
}
.mm-lp-hero-sub {
    animation: mmFadeInUp 0.6s ease 0.24s backwards;
}
.mm-lp-hero-actions {
    animation: mmFadeInUp 0.6s ease 0.36s backwards;
}
.mm-lp-hero-grid {
    animation: mmFadeInUp 0.8s ease 0.2s backwards;
}
@media (prefers-reduced-motion: reduce) {
    .mm-lp-hero .mm-lp-eyebrow,
    .mm-lp-hero-title,
    .mm-lp-hero-sub,
    .mm-lp-hero-actions,
    .mm-lp-hero-grid {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mm-lp-hero-sticker {
        animation: none !important;
        opacity: 0.9 !important;
        transform: rotate(var(--mm-rot, 0deg)) !important;
    }
}
.mm-lp-hero-sticker {
    position: absolute;
    height: auto;
    filter: invert(1) drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.4));
    opacity: 0;
    pointer-events: none;
}
.mm-lp-hero-sticker-1 {
    width: 92px;
    top: -20px;
    right: -110px;
    --mm-rot: -9deg;
    animation: mmStickerPopIn 0.5s ease 0.4s forwards, mmHeroFloat 5s ease-in-out 0s infinite;
}
.mm-lp-hero-sticker-2 {
    width: 80px;
    top: 92px;
    right: -30px;
    --mm-rot: 7deg;
    animation: mmStickerPopIn 0.5s ease 0.55s forwards, mmHeroFloat 5s ease-in-out 1.1s infinite;
}
.mm-lp-hero-sticker-3 {
    width: 104px;
    top: 192px;
    right: -120px;
    --mm-rot: -4deg;
    animation: mmStickerPopIn 0.5s ease 0.7s forwards, mmHeroFloat 5s ease-in-out 2.2s infinite;
}
@keyframes mmHeroFloat {
    0%, 100% { transform: translateY(0) rotate(var(--mm-rot, 0deg)); }
    50% { transform: translateY(-8px) rotate(var(--mm-rot, 0deg)); }
}
.mm-lp-hero-sub {
    font-size: 17px;
    color: #A0A0A0;
    line-height: 1.7;
    max-width: 480px;
    margin: 0 0 40px;
}
.mm-lp-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.mm-lp-btn-primary {
    background-color: #FF6900;
    color: #FFFFFF;
    padding: 16px 32px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.15s;
}
.mm-lp-btn-primary:hover {
    background-color: #E55E00;
    color: #FFFFFF;
}
.mm-lp-btn-outline {
    background-color: transparent;
    color: #FFFFFF;
    padding: 16px 32px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.25);
    transition: border-color 0.15s;
}
.mm-lp-btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
}

/* Hero photo (right side) */
.mm-lp-hero-grid {
    position: relative;
    height: 100%;
    align-self: stretch;
    overflow: hidden;
}
.mm-lp-hero-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #1C1C1C 0%, rgba(28, 28, 28, 0.35) 30%, rgba(28, 28, 28, 0) 60%);
    pointer-events: none;
}
.mm-lp-hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Intro strip */
.mm-lp-intro {
    background-color: #FFFFFF;
    padding: 80px 80px;
}
.mm-lp-intro-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.mm-lp-intro-photo {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.mm-lp-intro-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mm-lp-intro-text {
    position: relative;
}
.mm-lp-intro-sticker {
    position: absolute;
    top: -56px;
    right: 6%;
    width: 76px;
    height: auto;
    transform: rotate(9deg);
    filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.12));
}
.mm-lp-intro-text h2 {
    font-size: 40px;
    font-weight: bold;
    color: #1C1C1C;
    line-height: 1.15;
    margin: 0 0 20px;
}
.mm-lp-intro-text p {
    font-size: 16px;
    color: #555555;
    line-height: 1.8;
    margin: 0 0 20px;
}
.mm-lp-intro-text p:last-child { margin-bottom: 0; }

/* Marquee ticker — a scrolling band of brand phrases, no imagery needed. */
.mm-lp-marquee {
    position: relative;
    background-color: #1C1C1C;
    color: #FFFFFF;
    overflow: hidden;
    padding: 20px 0;
}
.mm-lp-marquee-track {
    display: flex;
    width: max-content;
    animation: mmMarqueeScroll 32s linear infinite;
}
.mm-lp-marquee-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: 0 28px;
    white-space: nowrap;
}
.mm-lp-marquee-item i {
    color: #FF6900;
    font-size: 13px;
    margin-left: 28px;
}
@keyframes mmMarqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .mm-lp-marquee-track {
        animation: none;
    }
}
@media (max-width: 640px) {
    .mm-lp-marquee-item {
        font-size: 16px;
        padding: 0 18px;
    }
    .mm-lp-marquee-item i {
        margin-left: 18px;
    }
}

/* Manifesto — a full-bleed photo section with a fixed (parallax-style)
   background and a big editorial statement, breaking up the page rhythm
   without needing any new imagery beyond what the site already owns. */
.mm-lp-manifesto {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 40px;
    overflow: hidden;
    background-image:
        linear-gradient(180deg, rgba(18, 14, 10, 0.8), rgba(18, 14, 10, 0.6) 45%, rgba(18, 14, 10, 0.88)),
        url('/img/photos/hero-precinct.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.mm-lp-manifesto::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mm-lp-manifesto-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}
.mm-lp-manifesto-inner .mm-lp-tag {
    transform: none;
}
.mm-lp-manifesto-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 42px;
    line-height: 1.45;
    color: #FFFFFF;
    margin: 28px 0 0;
}
@media (max-width: 860px) {
    .mm-lp-manifesto {
        min-height: 50vh;
        padding: 72px 24px;
        background-attachment: scroll;
    }
    .mm-lp-manifesto-text {
        font-size: 26px;
    }
}

/* Hand-drawn squiggle underline accent */
.mm-squiggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 7 Q 5 2, 10 7 T 20 7 T 30 7 T 40 7' stroke='%23FF6900' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 40px 12px;
    padding-bottom: 8px;
}

/* Scroll reveal — elements fade/slide in as they enter the viewport */
.mm-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.mm-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .mm-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* Staggered reveal within grids, so cards cascade in one after another */
.mm-lp-spaces-grid > .mm-reveal:nth-child(1) { transition-delay: 0s; }
.mm-lp-spaces-grid > .mm-reveal:nth-child(2) { transition-delay: 0.08s; }
.mm-lp-spaces-grid > .mm-reveal:nth-child(3) { transition-delay: 0.16s; }
.mm-lp-spaces-grid > .mm-reveal:nth-child(4) { transition-delay: 0.24s; }
.mm-lp-spaces-grid > .mm-reveal:nth-child(5) { transition-delay: 0.32s; }
.mm-lp-why-grid > .mm-reveal:nth-child(1) { transition-delay: 0s; }
.mm-lp-why-grid > .mm-reveal:nth-child(2) { transition-delay: 0.1s; }
.mm-lp-why-grid > .mm-reveal:nth-child(3) { transition-delay: 0.2s; }
.mm-lp-why-grid > .mm-reveal:nth-child(4) { transition-delay: 0.3s; }
.mm-lp-intro-inner > .mm-reveal:nth-child(2) { transition-delay: 0.15s; }

/* Section header */
.mm-lp-section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 56px;
}
.mm-lp-section-header h2 {
    font-size: 36px;
    font-weight: bold;
    color: #1C1C1C;
    margin: 0 0 16px;
    line-height: 1.2;
}
.mm-lp-section-header p {
    font-size: 16px;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

/* Event spaces */
.mm-lp-spaces {
    position: relative;
    overflow: hidden;
    background-color: #F7F7F7;
    padding: 80px 80px;
}
.mm-lp-spaces-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.mm-lp-space-card {
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.4s, opacity 0.6s;
}
.mm-lp-space-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}
.mm-lp-space-img {
    height: 220px;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    overflow: hidden;
}
.mm-lp-space-img-1 {
    background: linear-gradient(160deg, #2E2E2E 0%, #1C1C1C 50%, #3A2010 100%);
}
.mm-lp-space-img-2 {
    background: linear-gradient(160deg, #1C2A3A 0%, #1C1C1C 50%, #2A1C0A 100%);
}
.mm-lp-space-img-3 {
    background: linear-gradient(160deg, #1A2E20 0%, #1C1C1C 50%, #2E2010 100%);
}
.mm-lp-space-img-4 {
    background: linear-gradient(160deg, #2E1C2E 0%, #1C1C1C 50%, #10202E 100%);
}
.mm-lp-space-img-5 {
    background: linear-gradient(160deg, #2E2410 0%, #1C1C1C 50%, #1C2E28 100%);
}
.mm-lp-space-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.mm-lp-space-card:hover .mm-lp-space-photo {
    transform: scale(1.04);
}
.mm-lp-space-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
}
.mm-lp-space-sticker {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 55%;
    max-height: 60%;
    object-fit: contain;
    filter: invert(1) drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.3));
    opacity: 0.92;
    transform: rotate(-5deg);
    z-index: 1;
}
/* Equipment hire cards have no photo or hand-drawn sticker, so the icon
   gets a glassy badge treatment with a pulsing ring — nodding to sound
   waves for the audio gear rather than sitting there as a bare glyph. */
.mm-lp-space-icon-big {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.95);
    background-color: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    z-index: 1;
}
.mm-lp-space-icon-big::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    animation: mmPlayPulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .mm-lp-space-icon-big::before {
        animation: none;
        display: none;
    }
}
.mm-lp-space-label {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
    border-radius: 3px;
}
.mm-lp-space-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mm-lp-space-body h3 {
    font-size: 20px;
    font-weight: bold;
    color: #1C1C1C;
    margin: 0 0 10px;
}
.mm-lp-space-body p {
    font-size: 14px;
    color: #666666;
    line-height: 1.7;
    margin: 0 0 16px;
    flex: 1;
}
.mm-lp-space-meta {
    font-size: 13px;
    color: #999999;
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
}
.mm-lp-space-link {
    font-size: 14px;
    font-weight: bold;
    color: #FF6900;
    text-decoration: none;
}
.mm-lp-space-link:hover { text-decoration: underline; }

/* Space category tabs */
.mm-lp-tabs {
    max-width: 1200px;
    margin: 0 auto;
}
.mm-lp-tab-radio { display: none; }
.mm-lp-tabs-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}
.mm-lp-tab-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    padding: 10px 20px;
    border-radius: 999px;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s, transform 0.15s;
    user-select: none;
}
.mm-lp-tab-label:hover {
    color: #FF6900;
    border-color: #FFD3B0;
    transform: translateY(-2px);
}
.mm-lp-tab-panel { display: none; }
#mm-tab-event:checked ~ .mm-lp-tabs-nav label[for="mm-tab-event"],
#mm-tab-meeting:checked ~ .mm-lp-tabs-nav label[for="mm-tab-meeting"],
#mm-tab-addon:checked ~ .mm-lp-tabs-nav label[for="mm-tab-addon"],
#mm-tab-equip:checked ~ .mm-lp-tabs-nav label[for="mm-tab-equip"] {
    color: #FFFFFF;
    background-color: #FF6900;
    border-color: #FF6900;
}
#mm-tab-event:checked ~ #mm-panel-event,
#mm-tab-meeting:checked ~ #mm-panel-meeting,
#mm-tab-addon:checked ~ #mm-panel-addon,
#mm-tab-equip:checked ~ #mm-panel-equip {
    display: block;
}

/* Video */
.mm-lp-video {
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF;
    padding: 80px 80px;
}
.mm-lp-video-inner {
    max-width: 960px;
    margin: 0 auto;
}
.mm-lp-video-frame {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    background-color: #1C1C1C;
}
.mm-lp-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background-color: #FF6900;
    color: #FFFFFF;
    border: none;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 0 0 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: opacity 0.25s, transform 0.2s, visibility 0.25s;
    z-index: 2;
}
.mm-lp-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.06);
    background-color: #E55E00;
}
.mm-lp-play-btn.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.mm-lp-play-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 105, 0, 0.6);
    animation: mmPlayPulse 2.2s ease-out infinite;
}
.mm-lp-play-ring-2 {
    animation-delay: 1.1s;
}
@keyframes mmPlayPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.9); opacity: 0; }
}
.mm-lp-video-frame video {
    display: block;
    width: 100%;
    max-height: 560px;
}

/* Stats bar — a real photo instead of flat black, so the numbers sit on
   top of the precinct itself rather than an empty backdrop. */
.mm-lp-stats {
    position: relative;
    background-color: #1C1C1C;
    background-image:
        linear-gradient(180deg, rgba(20, 16, 12, 0.88), rgba(20, 16, 12, 0.82)),
        url('/img/photos/space-hospitality-courtyard.jpg');
    background-size: cover;
    background-position: center 30%;
    padding: 60px 80px;
    overflow: hidden;
}
.mm-lp-stats-sticker {
    position: absolute;
    width: 64px;
    height: auto;
    filter: invert(1) drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.35));
    opacity: 0.5;
}
.mm-lp-stats-sticker-1 {
    top: 14px;
    left: 4%;
    transform: rotate(-8deg);
}
.mm-lp-stats-sticker-2 {
    bottom: 10px;
    right: 5%;
    transform: rotate(6deg) scaleX(-1);
}
.mm-lp-stats-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.mm-lp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}
.mm-lp-stat-num {
    font-size: 52px;
    font-weight: bold;
    color: #FF6900;
    line-height: 1;
    margin-bottom: 8px;
}
.mm-lp-stat-label {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888888;
}
.mm-lp-stat-divider {
    width: 1px;
    height: 60px;
    background-color: #333333;
    flex-shrink: 0;
}

/* Why us */
.mm-lp-why {
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF;
    background-image: radial-gradient(rgba(28, 28, 28, 0.07) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    padding: 80px 80px;
}
.mm-lp-why-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.mm-lp-why-card {
    position: relative;
    padding: 32px 24px;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    border-top: 3px solid #FF6900;
    transition: transform 0.4s, box-shadow 0.25s, opacity 0.6s;
}
.mm-lp-why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
}
.mm-lp-why-card:hover .mm-lp-why-icon {
    transform: scale(1.1) rotate(-4deg);
}
.mm-lp-why-icon {
    transition: transform 0.25s;
}
.mm-lp-why-sticker.mm-tilt-b { transform: rotate(-10deg); }
.mm-lp-why-sticker.mm-tilt-c { transform: rotate(5deg); }
.mm-lp-space-sticker.mm-tilt-b { transform: rotate(6deg); }
.mm-lp-space-sticker.mm-tilt-c { transform: rotate(-3deg); }
.mm-lp-space-sticker.mm-tilt-d { transform: rotate(8deg); }
.mm-lp-space-sticker.mm-tilt-e { transform: rotate(-9deg); }
.mm-lp-why-sticker {
    position: absolute;
    top: -10px;
    right: -14px;
    width: 84px;
    height: auto;
    opacity: 0.85;
    transform: rotate(8deg);
    filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.12));
    pointer-events: none;
}
.mm-lp-why-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF3EB;
    color: #FF6900;
    border-radius: 50%;
    font-size: 20px;
    margin-bottom: 16px;
}
.mm-lp-why-card h3 {
    font-size: 17px;
    font-weight: bold;
    color: #1C1C1C;
    margin: 0 0 12px;
}
.mm-lp-why-card p {
    font-size: 14px;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

/* Bottom CTA */
.mm-lp-cta {
    position: relative;
    background-color: #FF6900;
    padding: 80px 40px;
    text-align: center;
    overflow: hidden;
}
.mm-lp-cta-sticker {
    position: absolute;
    bottom: -10px;
    right: 4%;
    width: 130px;
    height: auto;
    opacity: 0.92;
    filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.2));
}
.mm-lp-cta-inner {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}
.mm-lp-cta h2 {
    font-size: 40px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0 0 16px;
}
.mm-lp-cta p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 36px;
    line-height: 1.6;
}
.mm-lp-cta-btn {
    background-color: #FFFFFF;
    color: #FF6900;
    padding: 16px 40px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.15s;
}
.mm-lp-cta-btn:hover {
    background-color: #F0F0F0;
    color: #FF6900;
}

/* Landing page responsive */
@media (max-width: 1024px) {
    .mm-lp-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mm-lp-spaces-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 860px) {
    .mm-lp-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .mm-lp-hero-grid { display: none; }
    .mm-lp-hero-sticker { display: none; }
    .mm-lp-hero-inner {
        padding: 80px 24px;
        text-align: center;
    }
    .mm-lp-hero-title { font-size: 44px; }
    .mm-lp-hero-actions { justify-content: center; }
    .mm-lp-intro { padding: 60px 24px; }
    .mm-lp-intro-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .mm-lp-spaces { padding: 60px 24px; }
    .mm-lp-spaces-grid { grid-template-columns: 1fr; }
    .mm-lp-tabs-nav { gap: 6px; margin-bottom: 32px; }
    .mm-lp-tab-label { font-size: 13px; padding: 8px 14px; }
    .mm-lp-video { padding: 60px 24px; }
    .mm-lp-stats { padding: 48px 24px; }
    .mm-lp-stats-inner { flex-wrap: wrap; gap: 40px; }
    .mm-lp-stat-divider { display: none; }
    .mm-lp-stat { flex: 0 0 40%; }
    .mm-lp-why { padding: 60px 24px; }
    .mm-lp-why-grid { grid-template-columns: 1fr; }
}

/* ── Enquiry page ──────────────────────────────────────────────────────────── */
/* Enquiry page */
.mm-enquiry-hero {
    position: relative;
    background-color: #272727;
    color: #FFFFFF;
    padding: 80px 40px 96px;
    text-align: center;
    overflow: hidden;
}
@keyframes mmFadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes mmStickerPopIn {
    from { opacity: 0; }
    to { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
    .mm-enquiry-hero-eyebrow,
    .mm-enquiry-hero h1,
    .mm-enquiry-hero-sub,
    .mm-enquiry-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mm-enquiry-hero-sticker {
        animation: none !important;
        opacity: 0.9 !important;
        transform: none !important;
    }
}
.mm-enquiry-hero-eyebrow {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FF6900;
    margin: 0 0 16px;
    animation: mmFadeInUp 0.6s ease backwards;
}
.mm-enquiry-hero-heading {
    position: relative;
    display: inline-block;
}
.mm-enquiry-hero h1 {
    font-size: 48px;
    font-weight: bold;
    margin: 0 0 16px;
    animation: mmFadeInUp 0.6s ease 0.1s backwards;
}
.mm-enquiry-hero-sticker {
    position: absolute;
    height: auto;
    filter: invert(1) drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.4));
    opacity: 0;
    pointer-events: none;
}
.mm-enquiry-hero-sticker-1 {
    width: 72px;
    top: -50px;
    left: -90px;
    --mm-rot: -10deg;
    animation: mmStickerPopIn 0.5s ease 0.3s forwards, mmHeroFloat 5s ease-in-out 0.3s infinite;
}
.mm-enquiry-hero-sticker-2 {
    width: 66px;
    top: -58px;
    right: -80px;
    --mm-rot: 10deg;
    animation: mmStickerPopIn 0.5s ease 0.45s forwards, mmHeroFloat 5s ease-in-out 1.7s infinite;
}
.mm-enquiry-hero-sticker-3 {
    width: 78px;
    bottom: 26px;
    right: 6%;
    --mm-rot: -6deg;
    animation: mmStickerPopIn 0.5s ease 0.6s forwards, mmHeroFloat 5s ease-in-out 2.9s infinite;
}
.mm-enquiry-hero-sub {
    font-size: 17px;
    color: #B0B0B0;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    animation: mmFadeInUp 0.6s ease 0.2s backwards;
}
.mm-enquiry-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
}
.mm-enquiry-hero-wave svg {
    display: block;
    width: 100%;
    height: 40px;
}

.mm-enquiry-body {
    background-color: #F7F7F7;
    padding: 60px 20px 80px;
}
.mm-enquiry-card {
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 40px 36px;
    animation: mmFadeInUp 0.7s ease 0.3s backwards;
}
.mm-enquiry-card-sticker {
    position: absolute;
    top: -34px;
    right: 32px;
    width: 30px;
    height: auto;
    transform: rotate(8deg);
    filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.15));
}
.mm-enquiry-form .input {
    margin-bottom: 0;
}
.mm-enquiry-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.mm-enquiry-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.mm-enquiry-row .mm-enquiry-field {
    margin-bottom: 0;
}
.mm-enquiry-field label {
    display: block;
    font-weight: bold;
    font-size: 14px;
    color: #272727;
    margin-bottom: 6px;
}
.mm-enquiry-field input,
.mm-enquiry-field select,
.mm-enquiry-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    color: #272727;
    box-sizing: border-box;
    background-color: #FFFFFF;
}
.mm-enquiry-field input:focus,
.mm-enquiry-field select:focus,
.mm-enquiry-field textarea:focus {
    outline: none;
    border-color: #FF6900;
    box-shadow: 0 0 0 3px rgba(255, 105, 0, 0.12);
}
.mm-enquiry-field .input.error input,
.mm-enquiry-field .input.error select,
.mm-enquiry-field .input.error textarea {
    border-color: #E53935;
    background-color: #FFF5F5;
}
.mm-enquiry-datetime-row {
    display: flex;
    gap: 10px;
}
.mm-enquiry-datetime-row .mm-enquiry-datetime-date,
.mm-enquiry-datetime-row .mm-enquiry-datetime-time {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    font-size: 14px;
}
.mm-enquiry-datetime-row.error .mm-enquiry-datetime-date,
.mm-enquiry-datetime-row.error .mm-enquiry-datetime-time {
    border-color: #E53935;
    background-color: #FFF5F5;
}
.mm-enquiry-field .error-message {
    color: #E53935;
    font-size: 13px;
    margin-top: 4px;
}
.mm-enquiry-footer {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid #D9D9D9;
}
@media (max-width: 600px) {
    .mm-enquiry-hero {
        padding: 60px 24px 56px;
    }
    .mm-enquiry-hero h1 {
        font-size: 32px;
    }
    .mm-enquiry-hero-sticker {
        display: none;
    }
    .mm-enquiry-card {
        padding: 28px 20px 24px;
    }
    .mm-enquiry-card-sticker {
        width: 20px;
        top: -24px;
        right: 20px;
    }
    .mm-enquiry-row {
        grid-template-columns: 1fr;
    }
    .mm-enquiry-row .mm-enquiry-field {
        margin-bottom: 20px;
    }
}

/* Auth (login) page — split screen */
.mm-auth-split {
    /* Fills the window under the 80px header, so with no footer below it the
       page ends exactly at the fold instead of scrolling a sliver. */
    min-height: calc(100vh - 80px);
    display: grid;
    grid-template-columns: 5fr 6fr;
}

.mm-auth-panel-brand {
    position: relative;
    overflow: hidden;
    background-color: #1C1C1C;
    background-image: radial-gradient(circle at 20% 90%, rgba(255, 105, 0, 0.22), transparent 55%);
    color: #FFFFFF;
    padding: 72px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mm-auth-panel-brand::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -140px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.mm-auth-panel-brand::after {
    content: '';
    position: absolute;
    top: -90px;
    right: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 1px solid rgba(255, 105, 0, 0.35);
}
.mm-auth-sticker {
    position: absolute;
    top: 46%;
    right: 44px;
    width: 100px;
    height: auto;
    filter: invert(1) drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.35));
    opacity: 0;
    --mm-rot: 6deg;
    z-index: 1;
    animation: mmStickerPopIn 0.5s ease 0.5s forwards, mmHeroFloat 5s ease-in-out 0.5s infinite;
}
.mm-auth-spotlight {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
        circle 340px at var(--mm-spot-x, 50%) var(--mm-spot-y, 50%),
        rgba(255, 255, 255, 0.3),
        rgba(255, 105, 0, 0.14) 45%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    mix-blend-mode: overlay;
}
.mm-auth-panel-brand:hover .mm-auth-spotlight {
    opacity: 1;
}
.mm-auth-eyebrow {
    position: relative;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FF6900;
    margin: 0 0 24px;
    animation: mmFadeInUp 0.6s ease backwards;
}
.mm-auth-brand-title {
    position: relative;
    font-size: 56px;
    font-weight: bold;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    animation: mmFadeInUp 0.7s ease 0.12s backwards;
}
.mm-auth-brand-sub {
    position: relative;
    font-size: 16px;
    color: #A0A0A0;
    line-height: 1.7;
    max-width: 380px;
    margin: 0;
    animation: mmFadeInUp 0.6s ease 0.24s backwards;
}
.mm-auth-brand-stats {
    position: relative;
    display: flex;
    gap: 40px;
    margin-top: 48px;
    animation: mmFadeInUp 0.6s ease 0.36s backwards;
}
.mm-auth-brand-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mm-auth-brand-stat-num {
    font-size: 28px;
    font-weight: bold;
    color: #FF6900;
    line-height: 1;
}
.mm-auth-brand-stat-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888888;
}

.mm-auth-panel-form {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 48px;
}
.mm-auth-form-wrap {
    width: 100%;
    max-width: 380px;
    animation: mmFadeInUp 0.7s ease 0.2s backwards;
}
.mm-auth-form-title {
    font-size: 30px;
    font-weight: bold;
    color: #1C1C1C;
    margin: 0 0 8px;
}
.mm-auth-form-sub {
    font-size: 15px;
    color: #666666;
    margin: 0 0 32px;
}
.mm-auth-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.mm-auth-field label {
    display: block;
    font-weight: bold;
    font-size: 14px;
    color: #272727;
    margin-bottom: 6px;
}
.mm-auth-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    color: #272727;
    box-sizing: border-box;
    background-color: #FFFFFF;
}
.mm-auth-field input:focus {
    outline: none;
    border-color: #FF6900;
    box-shadow: 0 0 0 3px rgba(255, 105, 0, 0.12);
}
.mm-auth-submit {
    width: 100%;
    margin-top: 4px;
}
.mm-auth-recaptcha {
    margin-bottom: 16px;
}
.mm-auth-recaptcha .g-recaptcha {
    transform-origin: left top;
}
.mm-auth-form-note {
    margin: 20px 0 0;
    font-size: 13px;
    color: #999999;
    text-align: center;
}
.mm-auth-link {
    color: #FF6900;
    font-weight: bold;
    text-decoration: none;
}
.mm-auth-link:hover {
    text-decoration: underline;
}
.mm-auth-field-row {
    display: flex;
    gap: 16px;
}
.mm-auth-field-row .mm-auth-field {
    flex: 1;
    min-width: 0;
}
.mm-auth-field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.mm-auth-field-label-row label {
    margin-bottom: 0;
}
.mm-auth-field-label-row .mm-auth-link {
    font-size: 13px;
    font-weight: normal;
}

/* Forgot-password confirmation — surfaces the reset link directly since no
   mail transport is configured in this environment yet. */
.mm-auth-dev-note {
    margin-top: 24px;
    padding: 16px 18px;
    background-color: #FFF3EB;
    border: 1.5px dashed rgba(255, 105, 0, 0.5);
    border-radius: 6px;
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
}
.mm-auth-dev-note-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FF6900;
}
.mm-auth-dev-note p {
    margin: 0 0 10px;
}
.mm-auth-dev-link {
    display: block;
    word-break: break-all;
    font-size: 13px;
    color: #1C1C1C;
    font-weight: bold;
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .mm-auth-eyebrow,
    .mm-auth-brand-title,
    .mm-auth-brand-sub,
    .mm-auth-brand-stats,
    .mm-auth-form-wrap {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mm-auth-sticker {
        animation: none !important;
        opacity: 0.85 !important;
        transform: rotate(6deg) !important;
    }
}

@media (max-width: 480px) {
    .mm-auth-field-row {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 900px) {
    .mm-auth-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .mm-auth-panel-brand {
        padding: 56px 32px;
    }
    .mm-auth-brand-title {
        font-size: 40px;
    }
    .mm-auth-brand-stats {
        margin-top: 36px;
        gap: 28px;
    }
    .mm-auth-panel-form {
        padding: 48px 24px 64px;
    }
}
@media (max-width: 480px) {
    .mm-auth-brand-stats {
        gap: 20px;
    }
}

/* Form / content sections */
.mm-dashboard-section {
    max-width: 720px;
    margin: 60px auto;
    padding: 0 20px;
}
.mm-dashboard-section h1 {
    color: #272727;
    font-size: 32px;
    margin-bottom: 12px;
}
.mm-dashboard-note {
    color: #272727;
    font-size: 16px;
    margin: 0;
}

.mm-required-note {
    color: #272727;
    font-size: 14px;
    margin-bottom: 20px;
}
.mm-required-star {
    color: #FF6900;
    font-weight: bold;
}

.mm-password-wrap {
    position: relative;
}
.mm-password-wrap input {
    padding-right: 64px;
}
.mm-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #FF6900;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
}
/* Icon variant: an eye in a square hit area instead of the word "Show". The
   glyph carries no meaning on its own, so the button keeps an aria-label that
   changes with its state. */
.mm-password-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    right: 6px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 4px;
    font-size: 17px;
    line-height: 1;
    color: #888888;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.mm-password-toggle-icon:hover,
.mm-password-toggle-icon:focus-visible {
    color: #FF6900;
    background-color: rgba(255, 105, 0, 0.1);
}
.mm-password-toggle-icon[aria-pressed="true"] {
    color: #FF6900;
}
/* The word "Show" needed room; the icon needs less. */
.mm-password-wrap:has(.mm-password-toggle-icon) input {
    padding-right: 46px;
}

/* The header's main action. Booking is what most visitors are here to do, so it
   carries the accent rather than sitting alongside Login as another outline. */
.mm-header-btn-primary {
    background-color: #FF6900;
    border-color: #FF6900;
    color: #FFFFFF;
}
.mm-header-btn-primary:hover,
.mm-header-btn-primary:focus-visible {
    background-color: #E55F00;
    border-color: #E55F00;
    color: #FFFFFF;
}

.mm-submit-btn {
    background-color: #FF6900;
    color: #FFFFFF;
    border: none;
    padding: 14px 32px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
}

/* Footer */
.mm-footer {
    background-color: #1C1C1C;
    color: #A0A0A0;
    font-size: 14px;
}
.mm-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 40px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
}
.mm-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.mm-footer-sticker {
    width: 130px;
    height: auto;
    filter: invert(1);
    opacity: 0.9;
}
.mm-footer-acknowledgement {
    margin: 0;
    max-width: 38ch;
    color: #888888;
    font-size: 13px;
    line-height: 1.6;
}
.mm-footer-col h4 {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.mm-footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.mm-footer-col a {
    color: #A0A0A0;
    text-decoration: none;
}
.mm-footer-col a:hover {
    color: #FF6900;
}
.mm-footer-col p {
    margin: 0;
}
.mm-footer-bottom {
    border-top: 1px solid #2E2E2E;
    padding: 20px 40px;
    text-align: center;
}
.mm-footer-bottom p {
    margin: 0;
    font-size: 13px;
    color: #777777;
}
.mm-footer-bottom a {
    color: #777777;
    text-decoration: none;
}
.mm-footer-bottom a:hover {
    color: #FF6900;
}
.mm-footer-sep {
    margin: 0 8px;
    color: #4A4A4A;
}

@media (max-width: 1040px) {
    .mm-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
    .mm-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .mm-footer-inner {
        grid-template-columns: 1fr;
        padding: 48px 24px;
        gap: 32px;
        text-align: left;
    }
}

/* Inline flash (login / dashboard / enquiry via layout) */
.mm-flash {
    margin-bottom: 20px;
}
.mm-flash .message {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    margin: 0 0 12px;
    color: #272727;
}
.mm-flash .message.hidden {
    display: none;
}
.mm-flash .message-text {
    flex: 1;
}
.mm-flash .message-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 18px;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}
.mm-flash .message-close:hover {
    opacity: 1;
}
.mm-flash .message.success {
    border-color: #2E7D32;
    background-color: #E8F5E9;
}
.mm-flash .message.error {
    border-color: #E53935;
    background-color: #FFF5F5;
}
.mm-flash .message.warning {
    border-color: #F9A825;
    background-color: #FFF8E1;
}
.mm-flash .message.info {
    border-color: #D9D9D9;
    background-color: #F5F5F5;
}

/* Corner toast flash (element/flash/toast.php) — floats above the page so a
   confirmation like "You have been logged out." never shifts the layout it
   lands on. The container only leaves the flow once it holds a toast, so
   inline `.message` flashes are unaffected. */
.mm-flash:has(.mm-toast) {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 48px));
    margin-bottom: 0;
    pointer-events: none;
}
.mm-toast {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid #DED8CC;
    background-color: #FBF8F3;
    color: #1C1C1C;
    box-shadow: 0 8px 24px rgba(39, 39, 39, 0.14);
    pointer-events: auto;
    transition: opacity .25s ease, transform .25s ease;
}
.mm-toast.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
}
.mm-toast.hidden {
    display: none;
}
.mm-toast-text {
    flex: 1;
}
.mm-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 18px;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}
.mm-toast-close:hover {
    opacity: 1;
}
.mm-toast.success {
    border-color: #2E7D32;
    background-color: #E8F5E9;
}
.mm-toast.error {
    border-color: #E53935;
    background-color: #FFF5F5;
}
.mm-toast.warning {
    border-color: #F9A825;
    background-color: #FFF8E1;
}

@media (max-width: 600px) {
    .mm-flash:has(.mm-toast) {
        top: 76px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-toast {
        transition: none;
    }
}

/* Optional Flash modal — used by element/mm_flash_modal.php when enabled */
.mm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(39, 39, 39, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.mm-modal-box {
    background: #FFFFFF;
    padding: 32px;
    border-radius: 8px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.mm-modal-box div[class*="message"] {
    margin: 0 0 20px;
    font-size: 16px;
    color: #272727;
}
.mm-modal-close {
    background-color: #FF6900;
    color: #FFFFFF;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
}

.mm-confirm-modal[hidden] {
    display: none;
}

.mm-confirm-modal:not([hidden]) {
    display: flex;
}

.mm-confirm-modal-box {
    text-align: left;
    max-width: 440px;
    width: calc(100% - 32px);
}

.mm-confirm-modal-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: bold;
    color: #272727;
}

.mm-confirm-modal-message {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
}

.mm-confirm-modal-list {
    max-height: 220px;
    overflow-y: auto;
    margin: -12px 0 24px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #272727;
}

.mm-confirm-modal-list[hidden] {
    display: none;
}

.mm-confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Review-before-submit modal on the Make a Booking form (US10.3) */
.mm-book-review-modal[hidden] {
    display: none;
}

.mm-book-review-modal:not([hidden]) {
    display: flex;
}

.mm-book-review-box {
    text-align: left;
    max-width: 440px;
    width: calc(100% - 32px);
}

.mm-book-review-list {
    margin: 0 0 20px;
}

.mm-book-review-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #EDEDED;
}

.mm-book-review-row:last-child {
    border-bottom: none;
}

.mm-book-review-row dt {
    color: #666666;
    font-size: 14px;
}

.mm-book-review-row dd {
    margin: 0;
    font-weight: bold;
    color: #272727;
    text-align: right;
}

.mm-book-review-cost dd {
    color: #FF6900;
}

.input.error input,
.input.error select,
.input.error textarea {
    border-color: #E53935;
    border-width: 2px;
    background-color: #FFF5F5;
}
.error-message {
    color: #E53935;
    font-weight: bold;
    font-size: 13px;
    margin-top: 6px;
}

/* Internal layout (staff/admin shell) — same warmth and confidence as the
   public site, dialled back for daily-use data screens rather than marketing. */
body.mm-internal {
    background-color: #F7F3EC;
}

.mm-internal-wrapper {
    min-height: 100vh;
}

.mm-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background-color: #1C1C1C;
    z-index: 200;
    transform: translateX(0);
    transition: transform 0.2s ease;
}

.mm-sidebar-brand {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 0 20px;
    box-sizing: border-box;
}

.mm-sidebar-brand .mm-logo {
    color: #FFFFFF;
}

.mm-sidebar-subtitle {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #A0A0A0;
}

.mm-sidebar-nav {
    padding: 8px 14px 16px;
}

.mm-sidebar-label {
    margin: 20px 0 8px 10px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6E6E6E;
}

.mm-sidebar-nav .mm-sidebar-label:first-child {
    margin-top: 4px;
}

.mm-sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mm-sidebar-menu li {
    margin-bottom: 4px;
}

.mm-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    color: #C9C9C9;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mm-sidebar-link i {
    font-size: 18px;
    color: #8A8A8A;
    transition: color 0.15s ease;
}

.mm-sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}

.mm-sidebar-link:hover i {
    color: #FFFFFF;
}

.mm-sidebar-link.is-active {
    background-color: #FF6900;
    color: #FFFFFF;
}

.mm-sidebar-link.is-active i {
    color: #FFFFFF;
}

.mm-internal-body {
    margin-left: 240px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mm-internal-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 0 28px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    box-shadow: 0 2px 12px rgba(28, 28, 28, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.mm-sidebar-toggle {
    display: none;
    border: 1px solid #D9D9D9;
    background: #FFFFFF;
    color: #272727;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.mm-internal-topbar-title {
    flex: 1;
    font-size: 18px;
    font-weight: bold;
    color: #272727;
}

.mm-internal-topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mm-internal-user {
    font-size: 14px;
    color: #666666;
}

.mm-internal-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mm-internal-main {
    flex: 1;
    padding: 28px 32px;
}

.mm-internal-content {
    /* admin.css gives this section its own padding, so it has to be inside the
       100% width — without border-box it added ~54px and pushed every internal
       page sideways into a horizontal scroll. */
    box-sizing: border-box;
    width: 100%;
    max-width: none;
}

.mm-internal-content h1 {
    color: #1C1C1C;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

.mm-internal-content .mm-page-note {
    color: #666666;
    font-size: 15px;
    margin: 0 0 24px;
}

/* Internal page header (Dashboard welcome banner + list-page headers) —
   a warm, textured card echoing the landing page rather than a flat
   left-accent-stripe box. */
.mm-dash-welcome,
.mm-page-header {
    position: relative;
    overflow: hidden;
    background-color: #FFFDFB;
    background-image: radial-gradient(rgba(28, 28, 28, 0.05) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    border: 1px solid #EFE6D8;
    border-radius: 10px;
    padding: 28px 32px 30px;
    margin-bottom: 24px;
    box-shadow: 0 12px 28px rgba(28, 28, 28, 0.05);
}
.mm-dash-eyebrow,
.mm-page-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FF6900;
    background-color: #FFF3EB;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px dashed rgba(255, 105, 0, 0.5);
    transform: rotate(-1deg);
    margin: 0 0 14px;
}
.mm-dash-welcome h1,
.mm-page-header h1 {
    margin: 0 0 6px;
}
.mm-dash-welcome .mm-page-note,
.mm-page-header .mm-page-note {
    margin: 0;
}

.mm-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    margin-bottom: 24px;
}

.mm-stat-card {
    background-color: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-radius: 10px;
    padding: 22px 24px;
    box-shadow: 0 8px 20px rgba(28, 28, 28, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mm-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(28, 28, 28, 0.09);
}

.mm-stat-card-accent {
    background-color: #FF6900;
    border-color: #FF6900;
}

.mm-stat-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #FFF3EB;
    color: #FF6900;
    font-size: 19px;
    margin-bottom: 18px;
}

.mm-stat-card-accent .mm-stat-card-icon {
    background-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.mm-stat-card-label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: bold;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mm-stat-card-accent .mm-stat-card-label {
    color: rgba(255, 255, 255, 0.75);
}

.mm-stat-card-value {
    margin: 0;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #1C1C1C;
}

.mm-stat-card-accent .mm-stat-card-value {
    color: #FFFFFF;
}

.mm-stat-card-note {
    margin: 8px 0 0;
    font-size: 14px;
    color: #999999;
}

.mm-stat-card-accent .mm-stat-card-note {
    color: rgba(255, 255, 255, 0.75);
}

.mm-table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.mm-table-card-header .mm-table-card-title {
    margin: 0;
}

.mm-table-card-link {
    font-size: 14px;
    font-weight: bold;
    color: #FF6900;
    text-decoration: none;
    white-space: nowrap;
}

.mm-table-card-link:hover {
    text-decoration: underline;
}

.mm-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
}

.mm-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.mm-status-new {
    background-color: #FFF3EB;
    color: #FF6900;
}

.mm-status-replied {
    background-color: #EEF6FF;
    color: #2563EB;
}

.mm-status-closed {
    background-color: #F3F4F6;
    color: #666666;
}

.mm-status-active {
    background-color: #E8F5E9;
    color: #2E7D32;
}

/* Quote statuses */
.mm-status-draft {
    background-color: #F3F4F6;
    color: #666666;
}
.mm-status-sent {
    background-color: #EEF6FF;
    color: #2563EB;
}
.mm-status-pending {
    background-color: #FFF8E1;
    color: #B45309;
}
.mm-status-approved {
    background-color: #E9F9EE;
    color: #1E8E3E;
}
.mm-status-rejected {
    background-color: #FDECEA;
    color: #C62828;
}

.mm-paid-amount {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mm-status-signed {
    background-color: #E9F9EE;
    color: #1E8E3E;
}

.mm-sign-agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 20px;
}

.mm-sign-agree input[type="checkbox"] {
    margin-top: 3px;
}

.mm-signed-detail {
    margin-top: 6px;
    font-size: 12px;
    color: #666666;
}

.mm-simple-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mm-simple-list li {
    padding: 12px 0;
    border-bottom: 1px solid #D9D9D9;
    color: #272727;
    font-size: 15px;
}

.mm-table-card {
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(28, 28, 28, 0.05);
    box-sizing: border-box;
}

.mm-internal-content .mm-table-card + .mm-table-card {
    margin-top: 40px;
}

.mm-table-card-body {
    padding: 20px;
}

.mm-table-card-title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: bold;
    color: #1C1C1C;
}

.mm-table-responsive {
    overflow-x: auto;
    border-radius: 8px;
}

.mm-table-wrap {
    background-color: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(28, 28, 28, 0.05);
    overflow-x: auto;
}

.mm-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mm-data-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: bold;
    color: #1C1C1C;
    background-color: #FBF8F3;
    border-bottom: 1px solid #EFEFEF;
    white-space: nowrap;
}

.mm-data-table thead th:first-child {
    border-top-left-radius: 8px;
}

.mm-data-table thead th:last-child {
    border-top-right-radius: 8px;
}

.mm-data-table tbody td {
    padding: 12px 16px;
    color: #333333;
    border-bottom: 1px solid #F2F2F2;
    vertical-align: top;
}

.mm-table-truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.mm-data-table tbody tr:last-child td {
    border-bottom: none;
}

.mm-data-table tbody tr:hover td {
    background-color: #FFFBF7;
}

.mm-table-empty {
    text-align: center;
    color: #666666;
    padding: 24px 16px !important;
}

.mm-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mm-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #EFEFEF;
    background-color: #FBF8F3;
    color: #666666;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mm-table-action:hover {
    background-color: #FFF3EB;
    border-color: #FF6900;
    color: #FF6900;
}

.mm-table-action-danger:hover {
    background-color: #FDECEA;
    border-color: #E53935;
    color: #E53935;
}

.mm-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;
}

/* CRUD card (view / edit / add) */
.mm-crud-card {
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(28, 28, 28, 0.05);
    box-sizing: border-box;
}

.mm-crud-card-body {
    padding: 24px;
}

.mm-crud-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F2F2F2;
}

.mm-crud-card-title {
    margin: 0;
    font-size: 21px;
    font-weight: bold;
    color: #1C1C1C;
}

.mm-crud-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mm-crud-card-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.mm-crud-field {
    min-width: 0;
}

.mm-crud-field-col-1 { grid-column: span 1; }
.mm-crud-field-col-2 { grid-column: span 2; }
.mm-crud-field-col-3 { grid-column: span 3; }
.mm-crud-field-col-4 { grid-column: span 4; }
.mm-crud-field-col-5 { grid-column: span 5; }
.mm-crud-field-col-6 { grid-column: span 6; }
.mm-crud-field-col-7 { grid-column: span 7; }
.mm-crud-field-col-8 { grid-column: span 8; }
.mm-crud-field-col-9 { grid-column: span 9; }
.mm-crud-field-col-10 { grid-column: span 10; }
.mm-crud-field-col-11 { grid-column: span 11; }
.mm-crud-field-col-12 { grid-column: span 12; }

.mm-crud-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: bold;
    color: #272727;
}

.mm-crud-field-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    color: #272727;
    background-color: #FFFFFF;
    transition: border-color 0.15s ease;
}

.mm-crud-field-control:focus {
    outline: none;
    border-color: #FF6900;
}

.mm-crud-field-control[readonly],
.mm-crud-field-control:disabled {
    background-color: #FBF8F3;
    color: #272727;
    cursor: default;
}
.mm-crud-field-value {
    display: flex;
    align-items: center;
    min-height: 39px;
    padding: 10px 12px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    background-color: #FBF8F3;
    box-sizing: border-box;
}

.mm-crud-field-control.mm-field-invalid {
    border-color: #E53935;
}

.mm-field-error {
    margin: 6px 0 0;
    font-size: 13px;
    color: #E53935;
}

.mm-crud-card-append {
    margin-top: 16px;
}

.mm-crud-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #F2F2F2;
}

.mm-tab-links {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.mm-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.mm-search-input-wrap {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
}

.mm-search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #999999;
    font-size: 14px;
    pointer-events: none;
}

.mm-search-input {
    padding-left: 36px;
}

.mm-filter-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 160px;
}

.mm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mm-btn-primary {
    background-color: #FF6900;
    color: #FFFFFF;
    border-color: #FF6900;
    box-shadow: 0 6px 16px rgba(255, 105, 0, 0.25);
}

.mm-btn-primary:hover {
    background-color: #E55E00;
    border-color: #E55E00;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.mm-btn-secondary {
    background-color: #FFFFFF;
    color: #272727;
    border-color: #E0E0E0;
}

.mm-btn-secondary:hover {
    background-color: #FBF8F3;
    color: #272727;
}

.mm-btn-danger {
    background-color: #E53935;
    color: #FFFFFF;
    border-color: #E53935;
}

.mm-btn-approve {
    background-color: #1E8E3E;
    color: #FFFFFF;
    border-color: #1E8E3E;
}

.mm-btn-approve:hover {
    background-color: #167A32;
    border-color: #167A32;
    color: #FFFFFF;
}

.mm-btn-danger:hover {
    background-color: #C62828;
    border-color: #C62828;
    color: #FFFFFF;
}

/* Payment-due banner — sits above the dashboard welcome card so an
   approved membership awaiting payment is impossible to miss. */
.mm-payment-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    background-color: #FF6900;
    color: #FFFFFF;
    border-radius: 10px;
    padding: 18px 24px;
    margin-bottom: 20px;
    box-shadow: 0 12px 28px rgba(255, 105, 0, 0.25);
}
.mm-payment-banner-icon {
    flex: 0 0 auto;
    font-size: 26px;
    line-height: 1;
}
.mm-payment-banner-text {
    flex: 1 1 auto;
    min-width: 0;
}
.mm-payment-banner-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: bold;
}
.mm-payment-banner-note {
    margin: 0;
    font-size: 13px;
    color: #FFEFE3;
}
.mm-payment-banner-btn {
    flex: 0 0 auto;
    background-color: #FFFFFF;
    color: #FF6900;
    border-color: #FFFFFF;
    white-space: nowrap;
}
.mm-payment-banner-btn:hover {
    background-color: #FFF3EB;
    color: #E55E00;
    border-color: #FFF3EB;
}
@media (max-width: 640px) {
    .mm-payment-banner {
        flex-wrap: wrap;
    }
}

@media (max-width: 700px) {
    .mm-stat-grid {
        grid-template-columns: 1fr;
    }

    .mm-crud-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .mm-crud-field-col-1,
    .mm-crud-field-col-2,
    .mm-crud-field-col-3,
    .mm-crud-field-col-4,
    .mm-crud-field-col-5,
    .mm-crud-field-col-6,
    .mm-crud-field-col-7,
    .mm-crud-field-col-8,
    .mm-crud-field-col-9,
    .mm-crud-field-col-10,
    .mm-crud-field-col-11,
    .mm-crud-field-col-12 {
        grid-column: span 12;
    }

    .mm-crud-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .mm-crud-card-footer .mm-btn {
        width: 100%;
        text-align: center;
    }
}

/* Error pages (404 / 500) */
.mm-error-hero {
    background-color: #272727;
    color: #FFFFFF;
    padding: 80px 40px 72px;
    text-align: center;
}
.mm-error-eyebrow {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FF6900;
    margin: 0 0 16px;
}
.mm-error-title {
    font-size: 48px;
    font-weight: bold;
    margin: 0 0 16px;
}
.mm-error-sub {
    font-size: 17px;
    color: #B0B0B0;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}
.mm-error-body {
    background-color: #F7F7F7;
    padding: 60px 20px 80px;
}
.mm-error-card {
    background-color: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 40px 40px;
    text-align: center;
}
.mm-error-code {
    font-size: 72px;
    font-weight: bold;
    line-height: 1;
    color: #FF6900;
    margin: 0 0 20px;
}
.mm-error-code-server {
    color: #272727;
}
.mm-error-message {
    font-size: 16px;
    color: #666666;
    line-height: 1.7;
    margin: 0 0 32px;
}
.mm-error-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
@media (max-width: 600px) {
    .mm-error-hero {
        padding: 60px 24px 56px;
    }
    .mm-error-title {
        font-size: 32px;
    }
    .mm-error-card {
        padding: 36px 24px 32px;
    }
    .mm-error-code {
        font-size: 56px;
    }
    .mm-error-actions {
        flex-direction: column;
        width: 100%;
    }
    .mm-error-actions .mm-btn {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .mm-sidebar {
        transform: translateX(-100%);
    }

    .mm-internal-wrapper.mm-sidebar-open .mm-sidebar {
        transform: translateX(0);
    }

    .mm-internal-body {
        margin-left: 0;
    }

    .mm-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mm-internal-user {
        display: none;
    }
}

/* Quote view — add line item + notes */
.mm-quote-total-highlight {
    font-size: 22px;
    font-weight: 800;
    color: #FF6900;
}
.mm-quote-add-item-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 1.75rem 1.75rem 2rem;
}

.mm-quote-add-item-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: flex-end;
}

.mm-quote-add-item-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mm-quote-add-item-field-space {
    flex: 2 1 260px;
}

.mm-quote-add-item-field-small {
    flex: 1 1 150px;
}

.mm-quote-add-item-submit {
    flex: 0 0 auto;
    padding-left: 0.5rem;
}

.mm-quote-line-total-preview {
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.mm-quote-notes {
    margin-top: 0.5rem;
}

.mm-quote-notes summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.5rem 0;
}

 .mm-rates-header {
     margin-top: 40px;
 }
.mm-rates-card {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 8px 24px 24px;
    margin-top: 8px;
}
.mm-rates-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.mm-rates-table th,
.mm-rates-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #EEE;
}
/* Three fixed columns: name, price field, active toggle. */
.mm-rates-table th:first-child,
.mm-rates-table td:first-child {
    width: 52%;
}
.mm-rates-table th:nth-child(2),
.mm-rates-table td:nth-child(2) {
    width: 28%;
}
.mm-rates-table th:last-child,
.mm-rates-table td:last-child {
    width: 20%;
}
.mm-rates-category-row td {
    background-color: #FAFAFA;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #666;
    border-bottom: 1px solid #DDD;
    padding-top: 20px;
}
.mm-rates-input {
    width: 100%;
    max-width: 140px;
    padding: 8px 10px;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    font-size: 14px;
}
.mm-rates-footer {
    margin-top: 16px;
}

.mm-quote-total-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FF6900;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 20px 28px;
    margin: 20px 0;
}

.mm-quote-total-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mm-quote-total-value {
    font-size: 32px;
    font-weight: 800;
}

@media (max-width: 480px) {
    .mm-quote-total-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .mm-quote-total-value {
        font-size: 26px;
    }
}

/* ── History page ─────────────────────────────────────────────────────────── */
/* An editorial, book-like retelling: pinned chapter numerals down the side,
   art-directed photo mosaics instead of an even grid, a drop cap opening
   each chapter, and a full-bleed quote interlude for the factory's closing. */
.mm-history-hero {
    position: relative;
    background-color: #272727;
    color: #FFFFFF;
    padding: 120px 40px 140px;
    text-align: center;
    overflow: hidden;
}
/* Entrance animation — fades/slides in on load, piece by piece, same
   treatment as the landing page and enquiry page heroes. */
.mm-history-hero .mm-lp-eyebrow {
    animation: mmFadeInUp 0.6s ease backwards;
}
.mm-history-hero h1 {
    font-size: 84px;
    font-weight: bold;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 20px;
    position: relative;
    z-index: 1;
    animation: mmFadeInUp 0.7s ease 0.12s backwards;
}
.mm-history-hero-sub {
    font-size: 18px;
    color: #A0A0A0;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    animation: mmFadeInUp 0.6s ease 0.24s backwards;
}
.mm-history-hero-figure {
    position: absolute;
    height: 340px;
    width: auto;
    right: 6%;
    bottom: -30px;
    opacity: 0;
    filter: invert(1) drop-shadow(-4px 6px 0 rgba(0, 0, 0, 0.35));
    pointer-events: none;
    animation: mmStickerPopIn 0.5s ease 0.4s forwards, mmHeroFloat 5s ease-in-out 0.4s infinite;
}
@media (prefers-reduced-motion: reduce) {
    .mm-history-hero .mm-lp-eyebrow,
    .mm-history-hero h1,
    .mm-history-hero-sub {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mm-history-hero-figure {
        animation: none !important;
        opacity: 0.9 !important;
        transform: none !important;
    }
}

/* Lede — a single, oversized editorial statement rather than a boilerplate header */
.mm-history-lede {
    background-color: #FFFFFF;
    padding: 100px 40px 90px;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.mm-history-lede-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 34px;
    line-height: 1.45;
    color: #1C1C1C;
    margin: 20px 0 24px;
}
.mm-history-lede-sub {
    font-size: 16px;
    color: #777777;
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
}

/* Chapters */
.mm-history-chapter {
    position: relative;
    padding: 120px 40px;
}
.mm-history-chapter-a { background-color: #F8F4EE; }
.mm-history-chapter-b { background-color: #FFFFFF; }
.mm-history-chapter-last { padding-bottom: 140px; }
.mm-history-chapter-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 72px;
}
.mm-history-chapter-marker {
    position: sticky;
    top: 120px;
    align-self: start;
}
.mm-history-chapter-label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FF6900;
    margin-bottom: 12px;
}
.mm-history-chapter-number {
    display: block;
    font-size: 76px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: #1C1C1C;
}
.mm-history-chapter-number-word {
    font-size: 52px;
}
.mm-history-chapter-figure {
    width: 108px;
    height: auto;
    margin-top: 28px;
    filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.1));
}
.mm-history-chapter-content h3 {
    font-size: 42px;
    font-weight: bold;
    color: #1C1C1C;
    margin: 0 0 24px;
    line-height: 1.15;
}
.mm-history-chapter-content p {
    font-size: 17px;
    color: #444444;
    line-height: 1.85;
    max-width: 580px;
    margin: 0 0 20px;
}
.mm-history-chapter-content p:last-of-type {
    margin-bottom: 0;
}
.mm-history-chapter-content p:first-of-type::first-letter {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 62px;
    line-height: 0.75;
    color: #FF6900;
    float: left;
    padding: 4px 10px 0 0;
}
.mm-history-chapter-content p + .mm-mosaic {
    margin-top: 48px;
}

/* Interlude — a full-bleed pause for the factory's closing */
.mm-history-interlude {
    position: relative;
    background-color: #1C1C1C;
    color: #FFFFFF;
    padding: 140px 40px;
    text-align: center;
    overflow: hidden;
}
.mm-history-interlude-mark {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 400px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
    user-select: none;
}
.mm-history-interlude-eyebrow {
    position: relative;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FF6900;
    margin: 0 0 24px;
}
.mm-history-interlude-quote {
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 32px;
    line-height: 1.5;
    max-width: 700px;
    margin: 0 auto;
}

/* Photo mosaics — art-directed layouts, not a uniform grid */
.mm-mosaic {
    display: grid;
    gap: 18px;
}
.mm-mosaic figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    background-color: #EFEFEF;
}
.mm-mosaic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.mm-mosaic figure:hover img {
    transform: scale(1.06);
}
.mm-mosaic figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 14px 10px;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: #FFFFFF;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 12px;
    line-height: 1.4;
}

.mm-mosaic-2 {
    grid-template-columns: 3fr 2fr;
}
.mm-mosaic-2 figure:nth-child(1) { height: 400px; }
.mm-mosaic-2 figure:nth-child(2) { height: 400px; margin-top: 56px; }

.mm-mosaic-3 {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 420px;
}
.mm-mosaic-3 figure:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.mm-mosaic-3 figure:nth-child(2) { grid-column: 2; grid-row: 1; }
.mm-mosaic-3 figure:nth-child(3) { grid-column: 2; grid-row: 2; }

.mm-mosaic-4 {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 420px;
}
.mm-mosaic-4 figure:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.mm-mosaic-4 figure:nth-child(2) { grid-column: 2; grid-row: 1; }
.mm-mosaic-4 figure:nth-child(3) { grid-column: 3; grid-row: 1; }
.mm-mosaic-4 figure:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }

.mm-mosaic-1 figure { height: 480px; }

/* History page responsive */
@media (max-width: 980px) {
    .mm-history-chapter-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .mm-history-chapter-marker {
        position: static;
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .mm-history-chapter-figure { margin-top: 0; width: 76px; }
}
@media (max-width: 860px) {
    .mm-history-hero { padding: 90px 24px 100px; }
    .mm-history-hero h1 { font-size: 52px; }
    .mm-history-hero-figure { display: none; }
    .mm-history-lede { padding: 72px 24px 64px; }
    .mm-history-lede-text { font-size: 26px; }
    .mm-history-chapter { padding: 80px 24px; }
    .mm-history-chapter-content h3 { font-size: 32px; }
    .mm-history-interlude { padding: 96px 24px; }
    .mm-history-interlude-quote { font-size: 24px; }
    .mm-history-interlude-mark { font-size: 240px; top: -30px; }
    .mm-mosaic-2,
    .mm-mosaic-3,
    .mm-mosaic-4 {
        grid-template-columns: 1fr 1fr;
        height: auto;
    }
    .mm-mosaic-2 figure:nth-child(1),
    .mm-mosaic-2 figure:nth-child(2) { height: 220px; margin-top: 0; }
    .mm-mosaic-3 figure:nth-child(1) { grid-column: 1 / 3; grid-row: 1; height: 240px; }
    .mm-mosaic-3 figure:nth-child(2) { grid-column: 1; grid-row: 2; height: 160px; }
    .mm-mosaic-3 figure:nth-child(3) { grid-column: 2; grid-row: 2; height: 160px; }
    .mm-mosaic-4 figure:nth-child(1) { grid-column: 1 / 3; grid-row: 1; height: 220px; }
    .mm-mosaic-4 figure:nth-child(2) { grid-column: 1; grid-row: 2; height: 160px; }
    .mm-mosaic-4 figure:nth-child(3) { grid-column: 2; grid-row: 2; height: 160px; }
    .mm-mosaic-4 figure:nth-child(4) { grid-column: 1 / 3; grid-row: 3; height: 200px; }
    .mm-mosaic-1 figure { height: 280px; }
}
@media (max-width: 480px) {
    .mm-history-hero h1 { font-size: 40px; }
    .mm-history-lede-text { font-size: 22px; }
    .mm-history-chapter-content p:first-of-type::first-letter { font-size: 44px; }
}

/* ── Space detail page ────────────────────────────────────────────────────── */
/* Full-bleed poster hero — the photo (or sticker+gradient) fills the whole
   band, with the name and pitch anchored bottom-left over a dark scrim,
   rather than boxed into a plain 50/50 split. */
.mm-space-hero {
    position: relative;
    background-color: #1C1C1C;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}
.mm-space-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mm-space-hero-sticker {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 40%;
    max-height: 50%;
    object-fit: contain;
    filter: invert(1) drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.3));
    opacity: 0.9;
}
.mm-space-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #1C1C1C 5%, rgba(28, 28, 28, 0.55) 45%, rgba(28, 28, 28, 0.15) 75%);
}
.mm-space-hero-back {
    position: absolute;
    top: 32px;
    left: 40px;
    z-index: 2;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    opacity: 0.85;
}
.mm-space-hero-back:hover {
    opacity: 1;
    text-decoration: underline;
}
.mm-space-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 60px;
    color: #FFFFFF;
    max-width: 720px;
}
.mm-space-hero-content .mm-lp-tag {
    transform: none;
}
.mm-space-hero-content h1 {
    font-size: 64px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 16px 0 20px;
}
.mm-space-hero-summary {
    font-size: 17px;
    color: #D9D9D9;
    line-height: 1.7;
    max-width: 520px;
    margin: 0 0 28px;
}

/* Body — description with a drop cap, a badge-style feature list, and a
   torn "ticket stub" facts card instead of a plain sidebar box. */
.mm-space-body {
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF;
    padding: 90px 40px;
}
.mm-space-watermark {
    position: absolute;
    top: 50%;
    left: -40px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(28, 28, 28, 0.08);
    white-space: nowrap;
    pointer-events: none;
}
.mm-space-body-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 64px;
    align-items: start;
}
.mm-space-description p {
    font-size: 16px;
    color: #555555;
    line-height: 1.85;
    margin: 0 0 20px;
    max-width: 620px;
}
.mm-space-description p:first-of-type::first-letter {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 56px;
    line-height: 0.75;
    color: #FF6900;
    float: left;
    padding: 4px 10px 0 0;
}
.mm-space-description h2 {
    font-size: 26px;
    font-weight: bold;
    color: #1C1C1C;
    margin: 44px 0 22px;
}
.mm-space-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}
.mm-space-features li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: #333333;
    line-height: 1.5;
}
.mm-space-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #FFF3EB;
    color: #FF6900;
    font-size: 15px;
}

/* Quick-facts "ticket stub" — sits straight and fills its sidebar column,
   rather than tilted/narrow, so it doesn't look adrift next to the copy. */
.mm-space-facts {
    background-color: #FBF8F3;
    border: 1px solid #EFE6D8;
    border-radius: 10px;
    box-shadow: 0 16px 32px rgba(28, 28, 28, 0.08);
    box-sizing: border-box;
    width: 100%;
    position: sticky;
    top: 100px;
    overflow: hidden;
}
.mm-space-facts-top {
    padding: 28px 24px 24px;
    text-align: center;
}
.mm-space-facts-label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FF6900;
    margin-bottom: 12px;
}
.mm-space-facts-figure {
    display: block;
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    color: #1C1C1C;
    letter-spacing: -0.02em;
}
.mm-space-facts-figure-small {
    font-size: 36px;
    color: #FF6900;
}
.mm-space-facts-figure-label {
    display: block;
    font-size: 13px;
    color: #777777;
    margin-top: 8px;
}
.mm-space-facts-tear {
    position: relative;
    height: 1px;
    border-top: 2px dashed #E0D5C0;
    margin: 0 -1px;
}
.mm-space-facts-tear::before,
.mm-space-facts-tear::after {
    content: "";
    position: absolute;
    top: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FFFFFF;
}
.mm-space-facts-tear::before { left: -10px; }
.mm-space-facts-tear::after { right: -10px; }
.mm-space-facts-bottom {
    padding: 24px;
}
.mm-space-fact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}
.mm-space-fact dt {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #999999;
    margin: 0;
}
.mm-space-fact dd {
    font-size: 14px;
    font-weight: bold;
    color: #1C1C1C;
    margin: 0;
    text-align: right;
}
.mm-space-facts-btn {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    margin-top: 12px;
}

/* Space detail page responsive */
@media (max-width: 900px) {
    .mm-space-body-inner {
        grid-template-columns: 1fr;
    }
    .mm-space-facts {
        position: static;
        max-width: 360px;
        margin: 0 auto;
    }
    .mm-space-watermark {
        display: none;
    }
}
@media (max-width: 860px) {
    .mm-space-hero {
        min-height: 420px;
    }
    .mm-space-hero-back {
        top: 20px;
        left: 24px;
    }
    .mm-space-hero-content {
        padding: 40px 24px;
    }
    .mm-space-hero-content h1 {
        font-size: 40px;
    }
    .mm-space-body {
        padding: 64px 24px;
    }
    .mm-space-description p:first-of-type::first-letter {
        font-size: 42px;
    }
}

/* The hidden attribute alone loses to .mm-enquiry-field's own display:flex —
   this ID-level override guarantees it actually hides. */
#website-link-field[hidden] {
    display: none;
}

.mm-field-hint {
    margin: -2px 0 8px;
    font-size: 13px;
    color: #666666;
}

.mm-enquiry-section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #D9D9D9;
}

.mm-enquiry-section-title {
    font-weight: bold;
    font-size: 15px;
    color: #272727;
    margin: 0 0 4px;
}

.mm-enquiry-section-hint {
    font-size: 13px;
    color: #666666;
    margin: 0 0 12px;
}

.mm-optional-note {
    font-weight: normal;
    font-size: 13px;
    color: #999999;
    text-transform: none;
}

.mm-enquiry-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px 16px;
    padding: 14px 16px;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    background-color: #FAFAFA;
}

.mm-enquiry-checkbox-group .mm-enquiry-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: normal;
    text-transform: none;
    color: #272727;
    margin-bottom: 0;
    cursor: pointer;
}

.mm-enquiry-checkbox-group .mm-enquiry-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #FF6900;
    cursor: pointer;
}

.mm-enquiry-option-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}

.mm-enquiry-price {
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

.mm-addon-estimate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    background: #fff;
}

.mm-addon-estimate-label {
    font-size: 13px;
    color: #555;
}

.mm-addon-estimate-value {
    font-size: 16px;
    font-weight: 700;
    color: #272727;
}

/* Member dashboard */
.mm-member-tier {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
}
.mm-member-tier-label {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888888;
}
.mm-member-tier-value {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    color: #FF6900;
    background-color: #FFF3EB;
    border: 1px solid rgba(255, 105, 0, 0.35);
    padding: 4px 12px;
    border-radius: 999px;
}
.mm-member-account-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mm-sidebar-link-soon {
    opacity: 0.72;
    cursor: default;
}

/* Member avatar menu */
.mm-avatar-menu {
    position: relative;
}
.mm-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #D9D9D9;
    border-radius: 50%;
    background-color: #FFF3EB;
    color: #FF6900;
    cursor: pointer;
    overflow: hidden;
}
.mm-avatar-btn:hover,
.mm-avatar-menu.is-open .mm-avatar-btn {
    border-color: #FF6900;
}
.mm-avatar-initials {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.02em;
    line-height: 1;
}
.mm-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mm-avatar-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    background-color: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(28, 28, 28, 0.12);
    padding: 8px;
    z-index: 300;
}
.mm-avatar-dropdown[hidden] {
    display: none;
}
.mm-avatar-dropdown-email {
    margin: 0;
    padding: 10px 12px 8px;
    font-size: 12px;
    color: #888888;
    border-bottom: 1px solid #EFEFEF;
    word-break: break-all;
}
.mm-avatar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 4px;
    color: #272727;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}
.mm-avatar-dropdown-item i {
    font-size: 16px;
    color: #666666;
}
.mm-avatar-dropdown-item:hover {
    background-color: #FFF3EB;
    color: #FF6900;
}
.mm-avatar-dropdown-item:hover i {
    color: #FF6900;
}


/* --- Booking calendar (US10.2) --------------------------------------------- */

.mm-internal .mm-cal-toolbar {
    flex-wrap: wrap;
    gap: 16px;
}
.mm-internal .mm-cal-space-form {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mm-internal .mm-cal-space-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-cal-space-form select {
    padding: 8px 12px;
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
    background-color: var(--ad-surface);
    color: var(--ad-ink);
    font-size: 14px;
}
.mm-internal .mm-cal-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}
.mm-internal .mm-cal-month-label {
    min-width: 150px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ad-ink);
}
.mm-internal .mm-cal-empty {
    padding: 24px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 18px 24px 0;
    font-size: 12px;
    color: var(--ad-ink-soft);
}
.mm-internal .mm-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mm-internal .mm-cal-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.mm-internal .mm-cal-dot-available {
    background-color: #2F7A4A;
}
.mm-internal .mm-cal-dot-booked {
    background-color: #C1392B;
}
.mm-internal .mm-cal-dot-today {
    background-color: var(--ad-accent);
}
.mm-internal .mm-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    padding: 18px 24px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ad-ink-soft);
    text-align: center;
}
.mm-internal .mm-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    padding: 0 24px 24px;
}
.mm-internal .mm-cal-day {
    min-height: 76px;
    padding: 8px;
    border: 1px solid var(--ad-rule);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mm-internal .mm-cal-day-empty {
    border: none;
    background: none;
}
.mm-internal .mm-cal-day-num {
    font-size: 13px;
    font-weight: 600;
    color: var(--ad-ink);
}
.mm-internal .mm-cal-day-status {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mm-internal .mm-cal-day-available {
    background-color: rgba(47, 122, 74, 0.06);
}
.mm-internal .mm-cal-day-available .mm-cal-day-status {
    color: #2F7A4A;
}
.mm-internal .mm-cal-day-booked {
    background-color: rgba(193, 57, 43, 0.06);
}
.mm-internal .mm-cal-day-booked .mm-cal-day-status {
    color: #C1392B;
}
.mm-internal .mm-cal-day-today {
    border-color: var(--ad-accent);
    box-shadow: inset 0 0 0 1px var(--ad-accent);
}
.mm-internal .mm-cal-hint {
    margin: 14px 24px 0;
    padding: 10px 14px;
    background-color: rgba(255, 105, 0, 0.06);
    border: 1px solid rgba(255, 105, 0, 0.2);
    border-radius: 3px;
    font-size: 12px;
    color: var(--ad-ink-soft);
}
/* An open day is a real link once US10.3 lets you book straight from it -
   same layout as the read-only cell, plus a hover affordance and a label
   that only shows up once you're pointing at it, so the grid doesn't read
   as a wall of buttons. */
a.mm-cal-day-link {
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.mm-cal-day-link:hover,
a.mm-cal-day-link:focus-visible {
    border-color: var(--ad-accent);
    box-shadow: inset 0 0 0 1px var(--ad-accent);
}
.mm-internal .mm-cal-day-book {
    display: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ad-accent);
}
a.mm-cal-day-link:hover .mm-cal-day-book,
a.mm-cal-day-link:focus-visible .mm-cal-day-book {
    display: block;
}

/* Always-visible "who booked it" label for the staff calendar (US10.2.1) */
.mm-internal .mm-cal-day-customer {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ad-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (max-width: 720px) {
    .mm-internal .mm-cal-weekdays,
    .mm-internal .mm-cal-grid {
        grid-template-columns: repeat(7, minmax(34px, 1fr));
        gap: 4px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .mm-internal .mm-cal-day {
        min-height: 54px;
        padding: 4px;
    }
    .mm-internal .mm-cal-day-status {
        display: none;
    }
}

/* --- Content preview bar ---------------------------------------------------
   Shown across the top of a public page while an admin looks at unsaved content
   changes. The page below it is meant to look exactly like the live site, so
   this is the one thing that has to be unmistakable. */
.mm-preview-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 10px clamp(16px, 4vw, 40px);
    background-color: #171715;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    font-size: 13px;
    color: #F2EEE7;
}
.mm-preview-bar-tag {
    padding: 3px 10px;
    background-color: #FF6900;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
}
.mm-preview-bar-text {
    flex: 1 1 auto;
    min-width: 0;
}
.mm-preview-bar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}
.mm-preview-bar-link {
    color: #9A948A;
    text-decoration: none;
}
.mm-preview-bar-link:hover {
    color: #F2EEE7;
}
.mm-preview-bar-exit {
    padding: 6px 12px;
    background-color: #FF6900;
    border-radius: 2px;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
}
.mm-preview-bar-exit:hover {
    background-color: #E55F00;
    color: #FFFFFF;
}
/* Outlines each previewed change on the page, so it can be found at a glance. */
.mm-preview-mark {
    outline: 2px dashed #FF6900;
    outline-offset: 6px;
}

/* --- Questionnaire answers and custom questions ------------------------------ */

/* Answers to questions added in the content management system, on a request's
   own page (a list) and in a customer's bookings table (compact). */
.mm-answers {
    display: grid;
    gap: 10px;
    margin: 0;
}
.mm-answers-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.mm-answers-row dt {
    font-size: 13px;
    color: #666666;
}
.mm-answers-row dd {
    margin: 0;
    font-size: 14px;
    color: #272727;
}
.mm-answers-none {
    margin: 0;
    font-size: 14px;
    color: #666666;
}
.mm-answers-inline {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.45;
}
.mm-answers-inline span {
    color: #666666;
}
@media (max-width: 640px) {
    .mm-answers-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* A yes/no custom question on a public form: two chips rather than a dropdown. */
.mm-question-choice {
    margin: 0;
    padding: 0;
    border: 0;
}
.mm-question-choice legend {
    margin-bottom: 8px;
    padding: 0;
}
.mm-question-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 18px;
    cursor: pointer;
}

/* --- Full details of a request (admin Enquiries and Bookings lists) ----------- */

.mm-details-modal[hidden] {
    display: none;
}
.mm-details-box {
    width: min(640px, calc(100% - 32px));
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    text-align: left;
}
.mm-details-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.mm-details-close {
    padding: 0 4px;
    font-size: 26px;
    line-height: 1;
    color: #666666;
    background: none;
    border: 0;
    cursor: pointer;
}
.mm-details-close:hover {
    color: #272727;
}
.mm-details-body {
    overflow-y: auto;
    margin-top: 8px;
    padding-right: 4px;
}
.mm-details-open {
    margin: 16px 0 0;
    font-size: 14px;
}