/* ==========================================================================
   Lumière Nova — Joomla 6 template
   Inspired by RocketTheme's Lumiere: full-bleed hero, mosaic showcase,
   restrained serif/sans type pairing, dark-first palette.
   ========================================================================== */

:root {
    --lm-css-version: "1.6.0"; /* read by js/diagnostics.js to spot mixed-version files */
    --lm-accent: #c9a86a;
    --lm-accent-rgb: 201, 168, 106;

    --lm-bg: #0e0e10;
    --lm-bg-alt: #17171a;
    --lm-surface: #1e1e22;
    --lm-border: rgba(255, 255, 255, 0.08);
    --lm-text: #f2f0ec;
    --lm-text-muted: rgba(242, 240, 236, 0.66);

    --lm-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --lm-font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

    --lm-header-h: 88px;
    --lm-radius: 2px;
    --lm-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
    --lm-container-pad: 32px;
}

.lm-mode-light {
    --lm-bg: #faf9f6;
    --lm-bg-alt: #f1efe9;
    --lm-surface: #ffffff;
    --lm-border: rgba(0, 0, 0, 0.08);
    --lm-text: #1c1b19;
    --lm-text-muted: rgba(28, 27, 25, 0.62);
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--lm-bg);
    color: var(--lm-text);
    font-family: var(--lm-font-sans);
    font-weight: 300;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lm-font-serif);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 0.5em;
    letter-spacing: 0.01em;
}

p { margin: 0 0 1em; }

.lm-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lm-skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--lm-accent);
    color: #14140f;
    padding: 12px 20px;
    z-index: 10000;
    font-family: var(--lm-font-sans);
}
.lm-skip-link:focus { left: 8px; top: 8px; }

.lm-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--lm-container-pad);
}

.lm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--lm-font-sans);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: transparent;
    color: var(--lm-text);
    cursor: pointer;
    transition: background var(--lm-transition), color var(--lm-transition), border-color var(--lm-transition);
}
.lm-btn:hover { border-color: var(--lm-accent); color: var(--lm-accent); }

.lm-btn-accent {
    background: var(--lm-accent);
    border-color: var(--lm-accent);
    color: #14140f;
}
.lm-btn-accent:hover {
    background: transparent;
    color: var(--lm-accent);
}

/* -------------------------------------------------------------------- */
/* Flexible module rows (admin-configurable 1–6 columns + alignment)    */
/* -------------------------------------------------------------------- */
/* Wraps a single module position that can hold any number of modules.
   Each module (already wrapped by its own chrome, e.g. .lm-card or
   .lm-glass) becomes one flex item here. A full row — item count >= the
   chosen column count — is evenly spaced because every item shares the
   same flex-basis. A partially filled row is positioned as a whole via
   justify-content, so "aligned left/center/right" still means something
   when, say, only 1 of 4 possible columns has a module in it.
   align-items: flex-start keeps every module at its own natural height,
   anchored to the top of the row, instead of being stretched to match
   the tallest sibling — so a short module never grows to fill unused
   space it doesn't need. */
.lm-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.lm-row-cols-1 > * { flex: 0 1 100%; max-width: 100%; }
.lm-row-cols-2 > * { flex: 0 1 calc(50% - 12px); max-width: calc(50% - 12px); }
.lm-row-cols-3 > * { flex: 0 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); }
.lm-row-cols-4 > * { flex: 0 1 calc(25% - 18px); max-width: calc(25% - 18px); }
.lm-row-cols-5 > * { flex: 0 1 calc(20% - 19.2px); max-width: calc(20% - 19.2px); }
.lm-row-cols-6 > * { flex: 0 1 calc(16.666% - 20px); max-width: calc(16.666% - 20px); }
/* Auto: each module is only as wide as its content (never wider than the row),
   so a logo, a button group or an embed is not forced into a fraction of the
   width. The row's alignment then places the modules as a group. */
.lm-row-cols-auto > * { flex: 0 1 auto; max-width: 100%; }

.lm-row-align-left { justify-content: flex-start; text-align: left; }
.lm-row-align-center { justify-content: center; text-align: center; }
.lm-row-align-right { justify-content: flex-end; text-align: right; }

/* Generic content-alignment utility for single-module positions (no
   column count involved) — sidebars, the hero heading, mosaic tiles. */
.lm-align-left { text-align: left; }
.lm-align-center { text-align: center; }
.lm-align-right { text-align: right; }

/* Images are display:block site-wide (see the base reset), and a block
   element ignores text-align — so a centred footer module, sidebar, hero
   row or mosaic tile would leave any image in it stuck at the left. Auto
   margins move block images with the alignment of whatever they sit in. */
.lm-align-left img, .lm-row-align-left img, .lm-zone-left img { margin-left: 0; margin-right: auto; }
.lm-align-center img, .lm-row-align-center img, .lm-zone-center img { margin-left: auto; margin-right: auto; }
.lm-align-right img, .lm-row-align-right img, .lm-zone-right img { margin-left: auto; margin-right: 0; }
.lm-align-center table, .lm-row-align-center table, .lm-zone-center table { margin-left: auto; margin-right: auto; }
.lm-align-right table, .lm-row-align-right table, .lm-zone-right table { margin-left: auto; margin-right: 0; }

/* -------------------------------------------------------------------- */
/* Top bar                                                               */
/* -------------------------------------------------------------------- */
/* No border-bottom: with the header overlaying the hero, this 1px rule was the
   line that appeared directly under the menu. */
.lm-topbar {
    background: var(--lm-bg-alt);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--lm-text-muted);
}
.lm-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    gap: 24px;
    flex-wrap: wrap;
}
.lm-topbar-left, .lm-topbar-right { flex: 1 1 0; min-width: 0; }

/* Topbar zones hold small inline items (phone, email, login link), so
   equal-width columns would be wrong here. Instead the Columns option
   sets how many items sit on one line, each sized to its own content,
   and the zone's Alignment option positions them within the zone. */
.lm-topbar .lm-row {
    display: grid;
    gap: 4px 20px;
    align-items: center;
}
.lm-topbar .lm-row > * { max-width: none !important; }
.lm-topbar .lm-row-cols-1 { grid-template-columns: repeat(1, max-content); }
.lm-topbar .lm-row-cols-2 { grid-template-columns: repeat(2, max-content); }
.lm-topbar .lm-row-cols-3 { grid-template-columns: repeat(3, max-content); }
.lm-topbar .lm-row-cols-4 { grid-template-columns: repeat(4, max-content); }
.lm-topbar .lm-row-cols-5 { grid-template-columns: repeat(5, max-content); }
.lm-topbar .lm-row-cols-6 { grid-template-columns: repeat(6, max-content); }

/* -------------------------------------------------------------------- */
/* Header / navigation                                                   */
/* -------------------------------------------------------------------- */
.lm-header {
    position: relative;
    z-index: 900;
    background: var(--lm-bg);
    /* No border-bottom, ever: nothing draws a line under the header/menu.
       The only separation is the soft shadow below, which is blurred, not a rule. */
    transition: background var(--lm-transition), box-shadow var(--lm-transition);
}

.lm-has-hero .lm-header {
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
/* When the header is not sticky it overlays the top of the hero. It used to
   do that with position: absolute; top: 0, which measures from the top of the
   PAGE — so a topbar above it (e.g. a logo module in topbar-left) ended up
   underneath the menu. Instead the header stays in normal flow, directly
   below the topbar, and a negative bottom margin pulls the hero up beneath
   it. (--lm-header-actual is the measured height, set by js/template.js;
   88px, the minimum header height, until it runs.) */
.lm-has-hero:not(.lm-sticky) .lm-header {
    position: relative;
    margin-bottom: calc(-1 * var(--lm-header-actual, var(--lm-header-h)));
}

.lm-sticky .lm-header {
    position: sticky;
    top: 0;
}

.lm-header.is-scrolled,
body:not(.lm-has-hero) .lm-header {
    background: var(--lm-bg);
    box-shadow: 0 2px 24px rgba(0,0,0,0.18);
}

.lm-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 32px;
    min-height: var(--lm-header-h);
    padding: 8px 0;
}
/* Three zones. The two side zones share leftover space equally
   (flex: 1 1 0) so whatever sits in the centre zone is centred on the
   header itself; a side zone only grows past its half if its content
   genuinely needs the room. Everything in a zone is centred vertically,
   and the zones themselves are centred on the header's midline. */
.lm-header-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 32px;
    flex: 1 1 0;
}
.lm-header-zone--left { justify-content: flex-start; }
/* Centre zone stacks its contents: a centred logo with a centred menu
   gives the classic centred-logo header (logo, then menu beneath it), and
   a lone centred item is simply centred. */
.lm-header-zone--center { flex: 0 1 auto; flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 10px; }
.lm-header-zone--right { justify-content: flex-end; }

/* Nothing may draw a line along the header's edges. (This template adds
   none; the rule is here so an outside stylesheet can't add one either.) */
html body header.lm-header,
html body header.lm-header > .lm-container,
html body header.lm-header .lm-header-inner,
html body header.lm-header .lm-header-zone {
    border: 0 !important;
}

/* A zone never gets less room than its content needs. Without this a logo
   image (whose min-content width counts as zero because of max-width:
   100%) lets its zone collapse to nothing, and the logo is either crushed
   or spills underneath the menu. */
@media (min-width: 901px) {
    .lm-header-zone { min-width: max-content; }
}

/* When the zones can't all fit on one row (a wide logo plus a long menu),
   js/template.js adds .is-compact: logo and buttons on the first row, the
   menu on a second row of its own, still centred on the header. While it
   measures, it adds .is-measuring to read each zone's natural width. */
.lm-header-inner.is-measuring { flex-wrap: nowrap; }
.lm-header-inner.is-measuring .lm-header-zone { flex: 0 0 auto; min-width: 0; flex-wrap: nowrap; }
@media (min-width: 901px) {
    .lm-header-inner.is-compact {
        display: grid;
        /* Both columns are sized to their content, and when there isn't room for
           both they share it fairly: each grows toward its content width and the
           smaller one stops first, so a logo is never squeezed by a crowded
           other side (whichever side that is). Spare room goes between them. */
        grid-template-columns: minmax(0, max-content) minmax(0, max-content);
        justify-content: space-between;
        grid-template-areas: "left right" "center center";
        gap: 8px 32px;
    }
    .lm-header-inner.is-compact .lm-header-zone { min-width: 0; }
    .lm-header-inner.is-compact .lm-header-zone--left { grid-area: left; }
    .lm-header-inner.is-compact .lm-header-zone--right { grid-area: right; }
    .lm-header-inner.is-compact .lm-header-zone--center { grid-area: center; }
}

/* Logo stack: the main logo with the secondary logo position directly
   beneath it. The stack is only as wide as its widest logo and is placed
   in the header zone named by Logo Alignment; each logo is then aligned
   within the stack by its own alignment option. */
.lm-logo-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.lm-logo,
.lm-logo-secondary {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    max-width: 100%;
}
.lm-logo-align-left { align-self: flex-start; align-items: flex-start; text-align: left; }
.lm-logo-align-center { align-self: center; align-items: center; text-align: center; }
.lm-logo-align-right { align-self: flex-end; align-items: flex-end; text-align: right; }
.lm-logo > a { display: flex; flex-direction: column; align-items: inherit; }
/* Module output usually arrives as <p><img></p>. Kill the paragraph margin
   and the inline-image baseline gap, which otherwise push the logo up off
   the header's vertical centre. */
.lm-logo-stack p,
.lm-logo-stack h1, .lm-logo-stack h2, .lm-logo-stack h3,
.lm-logo-stack ul { margin: 0; padding: 0; }
.lm-logo-stack img { display: block; max-width: 100%; height: auto; }
.lm-logo-secondary img { max-height: 40px; width: auto; }
/* The text logo and tagline are never underlined or ruled. When Use Logo
   Text / Use Tagline is off they are not output at all; this is the
   belt-and-braces for anything that does render. */
.lm-logo a, .lm-logo-secondary a,
.lm-logo-text, .lm-logo-tagline {
    text-decoration: none;
    border: 0;
    box-shadow: none;
}
.lm-logo-text:empty, .lm-logo-tagline:empty { display: none; }
.lm-logo-text {
    font-family: var(--lm-font-serif);
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    color: var(--lm-text);
}
.lm-logo-tagline {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lm-accent);
    margin-top: 2px;
}

.lm-mainnav { flex: 0 1 auto; display: flex; justify-content: center; }
.lm-mainnav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 36px;
    margin: 0;
    padding: 0;
}
.lm-mainnav > ul > li > a { white-space: nowrap; }
.lm-mainnav a {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 0;
    position: relative;
}
.lm-mainnav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--lm-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--lm-transition);
}
/* ONE line, and only while the item is hovered, focused or pressed. A
   parent item keeps its line while its sub-menu is being hovered. */
.lm-mainnav li:hover > a::after,
.lm-mainnav a:focus-visible::after,
.lm-mainnav a:active::after { transform: scaleX(1); }
/* The current page is marked by colour, not by a permanent line. */
.lm-mainnav li.current > a,
.lm-mainnav li.active > a { color: var(--lm-accent); }
/* Optional (Template options → Underline Current Menu Item). */
.lm-menu-current-line .lm-mainnav li.current > a::after,
.lm-menu-current-line .lm-mainnav li.active > a::after { transform: scaleX(1); }

/* Belt and braces for the desktop menu: whatever else is loaded on the
   page (a module's own CSS, a plugin, a browser extension's injected
   styles), the items get no box, border, shadow, blur or second
   pseudo-element line — so the single line above is the only one. Not
   applied to the phone menu or the drop-down panels, which have their
   own borders on purpose. */
@media (min-width: 901px) {
    /* Selectors are deliberately long, and use descendant (not child)
       combinators: an outside rule such as
       ".mod-menu li.current > a { border-bottom: 3px … !important }" has to
       lose to these, and it must not matter whether the menu module
       adds a wrapper element around its list. With both marked !important
       the more specific selector wins. Items at every depth lose any box;
       the drop-down PANEL keeps its own background and border. */
    html body .lm-header .lm-mainnav.lm-mainnav li,
    html body .lm-header .lm-mainnav.lm-mainnav a,
    html body .lm-header .lm-mainnav.lm-mainnav .lm-menu-heading {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        text-decoration: none !important;
    }
    html body .lm-header .lm-mainnav.lm-mainnav a::before { content: none !important; }
    /* Our one line: nothing else may restyle it. */
    html body .lm-header .lm-mainnav.lm-mainnav a::after {
        border: 0 !important;
        box-shadow: none !important;
        height: 2px !important;
        background: var(--lm-accent) !important;
    }
    .lm-mainnav a:focus { outline: none; }
    .lm-mainnav a:focus-visible { outline: 2px dotted var(--lm-accent); outline-offset: 6px; }
}
/* Top-level list only (its own rule: a browser that can't parse :not()
   with a complex argument would otherwise drop the rule above too). */
@media (min-width: 901px) {
    html body .lm-header .lm-mainnav.lm-mainnav ul:not(ul ul) {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }
}

.lm-mainnav ul ul {
    position: absolute;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    flex-direction: column;
    gap: 0;
    min-width: 220px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--lm-transition), transform var(--lm-transition), visibility var(--lm-transition);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.lm-mainnav li { position: relative; }
.lm-menu-heading {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
    cursor: default;
}
.lm-mainnav li:hover > ul {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.lm-mainnav ul ul a { display: block; padding: 10px 20px; }
.lm-mainnav ul ul a::after { display: none; }

.lm-header-tools { display: flex; align-items: center; gap: 16px; }

.lm-search-toggle, .lm-nav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--lm-text);
    padding: 8px;
}

.lm-icon-search::before { content: "\25CE"; font-size: 1.1rem; }

.lm-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 28px;
}
.lm-nav-toggle span {
    display: block;
    height: 1px;
    background: currentColor;
    width: 100%;
    transition: transform var(--lm-transition), opacity var(--lm-transition);
}

.lm-search-panel {
    background: var(--lm-bg-alt);
    border-bottom: 1px solid var(--lm-border);
    padding: 20px 0;
}
.lm-search-panel[hidden] { display: none; }
/* Search box and footer logo each sit alone in a full-width band, so
   "left/center/right" has to move the block itself (flex), not just
   its text. The .lm-align-* class is already on the container. */
.lm-search-panel .lm-container,
.lm-footer-logo-band .lm-container { display: flex; }
.lm-search-panel .lm-container.lm-align-left,
.lm-footer-logo-band .lm-container.lm-align-left { justify-content: flex-start; }
.lm-search-panel .lm-container.lm-align-center,
.lm-footer-logo-band .lm-container.lm-align-center { justify-content: center; }
.lm-search-panel .lm-container.lm-align-right,
.lm-footer-logo-band .lm-container.lm-align-right { justify-content: flex-end; }

.lm-footer-logo-band { padding: 40px 0 0; }
.lm-footer-logo-band img { display: block; max-height: 64px; width: auto; max-width: 100%; }
.lm-footer-logo-band p { margin: 0; }

/* -------------------------------------------------------------------- */
/* Hero                                                                  */
/* -------------------------------------------------------------------- */
/* The hero's height is driven entirely by the modules published inside
   it (hero-top, hero, hero-row-1, hero-cta, hero-row-2) plus padding —
   there is deliberately no min-height here, so the video/image backdrop
   never extends past the last module and leaves an empty band. The
   backdrop layers below are absolutely positioned with inset: 0, so they
   stretch to whatever height the in-flow content produces. Content is
   anchored to the top (align-items: flex-start) and stacks downwards in
   DOM order. */
.lm-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    color: #fff;
}

.lm-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lm-hero-slideshow { position: absolute; inset: 0; }
.lm-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1400ms ease;
}
.lm-hero-slide.is-active { opacity: 1; }

.lm-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(6,6,7,0.62) 0%, rgba(6,6,7,0.38) 50%, rgba(6,6,7,0.6) 100%);
}

/* The video/slideshow and the dark overlay live in one wrapper so the bottom
   blend (below) can fade all of them together without touching the text. */
.lm-hero-backdrop {
    position: absolute;
    inset: 0;
}
/* Bottom space = whichever is larger: room for the scroll-down arrow (or a
   smaller margin if the arrow is off) and three quarters of the blend height,
   so hero content always sits above the strongest part of the fade. */
.lm-hero { --lm-cue-space: 88px; --lm-blend-h: 0px; }
.lm-hero--no-cue { --lm-cue-space: 40px; }
.lm-hero--blend-short { --lm-blend-h: 80px; }
.lm-hero--blend-medium { --lm-blend-h: 120px; }
.lm-hero--blend-tall { --lm-blend-h: 180px; }
.lm-hero-content {
    position: relative;
    width: 100%;
    padding-top: 56px;
    padding-bottom: max(var(--lm-cue-space), calc(var(--lm-blend-h) * 0.75));
}

/* Hero bottom blend. The backdrop is faded to transparent over its last
   --lm-blend-h pixels, so the hero merges into whatever is behind it — the
   page background, which is dark in dark mode and light in light mode. A mask
   (not a coloured gradient) is used so the fade can never be the wrong colour
   for the mode. The eased stops give a smooth merge rather than a visible band. */
.lm-hero--blend .lm-hero-backdrop {
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0,
        #000 calc(100% - var(--lm-blend-h)),
        rgba(0, 0, 0, 0.82) calc(100% - var(--lm-blend-h) * 0.75),
        rgba(0, 0, 0, 0.5) calc(100% - var(--lm-blend-h) * 0.5),
        rgba(0, 0, 0, 0.18) calc(100% - var(--lm-blend-h) * 0.25),
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        #000 0,
        #000 calc(100% - var(--lm-blend-h)),
        rgba(0, 0, 0, 0.82) calc(100% - var(--lm-blend-h) * 0.75),
        rgba(0, 0, 0, 0.5) calc(100% - var(--lm-blend-h) * 0.5),
        rgba(0, 0, 0, 0.18) calc(100% - var(--lm-blend-h) * 0.25),
        transparent 100%);
}
/* The arrow sits inside the faded strip. In light mode that strip is light, so
   the white arrow would vanish: draw it in the text colour instead. */
.lm-mode-light .lm-hero--blend .lm-hero-scroll {
    color: var(--lm-text);
    border-color: rgba(28, 27, 25, 0.45);
}
/* When the header is not sticky it floats over the top of the hero, so
   push the content below it. A sticky header sits in normal flow. */
.lm-has-hero:not(.lm-sticky) .lm-hero-content {
    padding-top: calc(var(--lm-header-actual, var(--lm-header-h)) + 40px);
}
/* Vertical rhythm between the hero's stacked pieces — the optional
   hero-top row, the heading, the optional hero-row-1, the CTA buttons,
   and the optional hero-row-2 — so published rows don't collide with
   the heading or each other. */
.lm-hero-content > .lm-container > * + * {
    margin-top: 28px;
}

.lm-hero-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--lm-accent);
    margin-bottom: 18px;
}

.lm-hero-title {
    font-size: clamp(2.6rem, 6vw, 5.4rem);
    max-width: 16ch;
    margin-bottom: 0.3em;
}
/* The heading is width-capped, so text-align alone would only centre the
   text inside a box that stays on the left. Auto margins move the box. */
.lm-align-center .lm-hero-title { margin-left: auto; margin-right: auto; }
.lm-align-right .lm-hero-title { margin-left: auto; margin-right: 0; }

.lm-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.lm-hero-cta-align-left { justify-content: flex-start; }
.lm-hero-cta-align-center { justify-content: center; }
.lm-hero-cta-align-right { justify-content: flex-end; }

.lm-hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lm-bounce 2.4s infinite;
}
.lm-icon-chevron::before { content: "\2193"; }
.lm-icon-up::before { content: "\2191"; }

@keyframes lm-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* -------------------------------------------------------------------- */
/* Breaking / announcement strip                                        */
/* -------------------------------------------------------------------- */
.lm-breaking {
    background: var(--lm-accent);
    color: #14140f;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    padding: 10px 0;
}

/* -------------------------------------------------------------------- */
/* Mosaic showcase grid                                                  */
/* -------------------------------------------------------------------- */
.lm-mosaic { padding: 96px 0; background: var(--lm-bg); }

.lm-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(220px, auto));
    gap: 4px;
}

.lm-mosaic-cell {
    position: relative;
    background: var(--lm-bg-alt);
    overflow: hidden;
}
.lm-mosaic-large { grid-column: span 2; grid-row: span 2; }
.lm-mosaic-wide { grid-column: span 2; }

.lm-mosaic-cell .moduletable,
.lm-mosaic-cell .module { height: 100%; }

/* -------------------------------------------------------------------- */
/* Card module chrome (lm_card / lm_sidebar / lm_footer / lm_hero)       */
/* -------------------------------------------------------------------- */
.lm-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
    padding: 28px;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    color: var(--lm-text);
    background-size: cover;
    background-position: center;
    transition: transform var(--lm-transition);
}
.lm-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0) 60%);
    opacity: 0;
    transition: opacity var(--lm-transition);
}
.lm-card.has-image::before { opacity: 1; }
.lm-card > * { position: relative; z-index: 1; }
.lm-card:hover { transform: translateY(-4px); }
.lm-card-title {
    font-family: var(--lm-font-serif);
    font-size: 1.4rem;
    margin-bottom: 8px;
}
.lm-card-text { font-size: 0.9rem; color: var(--lm-text-muted); }

/* Glass chrome (lm_glass) — used only inside the hero/video-backdrop
   rows (hero-top, hero-row-1, hero-row-2). The background is fully
   transparent and nothing (no blur, no tint) is applied to the video
   behind it, so the backdrop is seen exactly as it plays. Legibility of
   the overlaid text comes from the hero's dark overlay layer plus a soft
   text-shadow, not from a box behind the module. */
.lm-glass {
    background: transparent;
    border: 0;
    padding: 0;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.lm-glass {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* Everything inside a hero module is placed by the row's alignment, not just
   text and images: a column flex container positions each child block
   (a fixed-width embed or form, a button group made with display:flex, a
   table, an image) by align-items, which text-align and image margins can't. */
.lm-glass-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.lm-glass-body > * { max-width: 100%; }
.lm-row-align-left .lm-glass, .lm-row-align-left .lm-glass-body { align-items: flex-start; }
.lm-row-align-center .lm-glass, .lm-row-align-center .lm-glass-body { align-items: center; }
.lm-row-align-right .lm-glass, .lm-row-align-right .lm-glass-body { align-items: flex-end; }
.lm-glass-title {
    font-family: var(--lm-font-serif);
    font-size: 1.15rem;
    margin-bottom: 6px;
    color: #fff;
}
.lm-glass-body {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}
.lm-glass-body a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------------------- */
/* Showcase row — column count and alignment come from the admin's      */
/* Showcase Row Columns/Alignment options via the generic .lm-row       */
/* system above; this section only needs its own background/padding.   */
/* -------------------------------------------------------------------- */
.lm-showcase { padding: 80px 0; background: var(--lm-bg-alt); }

/* -------------------------------------------------------------------- */
/* After-header / before-footer utility bands (new, general-purpose     */
/* rows "throughout the template" — not tied to the hero)               */
/* -------------------------------------------------------------------- */
.lm-after-header {
    background: var(--lm-bg-alt);
    border-bottom: 1px solid var(--lm-border);
    padding: 20px 0;
}
.lm-before-footer {
    padding: 56px 0;
    background: var(--lm-surface);
    border-bottom: 1px solid var(--lm-border);
}

/* -------------------------------------------------------------------- */
/* Main content / layout                                                 */
/* -------------------------------------------------------------------- */
.lm-main { padding: 80px 0; }

.lm-layout {
    display: grid;
    gap: 56px;
}
.lm-layout--none { grid-template-columns: 1fr; }
.lm-layout--left { grid-template-columns: 280px 1fr; }
.lm-layout--right { grid-template-columns: 1fr 280px; }
.lm-layout--both { grid-template-columns: 260px 1fr 260px; }

.lm-component article :is(h1, h2, h3) { font-family: var(--lm-font-serif); }

.lm-sidebar .lm_sidebar {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--lm-border);
}
.lm-sidebar .lm_sidebar:last-child { border-bottom: none; }
.lm-sidebar h3 {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lm-accent);
    margin-bottom: 16px;
}

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */
.lm-footer { background: var(--lm-bg-alt); border-top: 1px solid var(--lm-border); }

.lm-footer-columns { padding: 72px 0 48px; }

/* Column count/alignment for the footer row come from the admin's
   Footer Columns/Alignment options via .lm-row above. Each published
   module is wrapped in .lm-footer-module by the lm_footer chrome
   (html/modules.php) — that's the element these rules style, since the
   old fixed .lm-footer-col wrapper no longer exists now that "footer"
   is a single flexible position instead of four fixed ones. */
.lm-footer-columns h3 {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lm-accent);
    margin-bottom: 18px;
}
.lm-footer-columns ul { list-style: none; margin: 0; padding: 0; }
.lm-footer-columns li { margin-bottom: 10px; }
.lm-footer-columns a { color: var(--lm-text-muted); font-size: 0.88rem; }
/* text-align does nothing to a list that is a flex container (which is what
   a menu list becomes under many stylesheets: a horizontal row of links),
   so the row's alignment is also applied as justify-content. */
html body .lm-footer-columns ul { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body .lm-footer-columns .lm-row-align-left ul { justify-content: flex-start !important; align-items: flex-start; }
html body .lm-footer-columns .lm-row-align-center ul { justify-content: center !important; align-items: center; }
html body .lm-footer-columns .lm-row-align-right ul { justify-content: flex-end !important; align-items: flex-end; }
.lm-footer-columns a:hover { color: var(--lm-accent); }

/* Joomla's own "outline" style (what you see when module positions are
   previewed with ?tp=1) wraps each module in a labelled box. It is a
   preview aid, not part of the page, but it sits inside the row — so
   keep it tidy and make sure it takes part in the row's alignment. */
.mod-preview { border: 1px dashed rgba(255, 255, 255, 0.35); }
.mod-preview-info { font-size: 0.7rem; line-height: 1.4; padding: 2px 6px; opacity: 0.75; text-align: left; }
.mod-preview-wrapper { padding: 6px; }

.lm-footer-bottom { border-top: 1px solid var(--lm-border); padding: 22px 0; }
.lm-footer-bottom-inner {
    font-size: 0.78rem;
    color: var(--lm-text-muted);
}
/* "bottom": a duplicate of the copyright position, directly above it, with its
   own alignment. A column flex container positions any module content (text,
   images, fixed-width blocks) by the alignment option. */
.lm-bottom {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    font-size: 0.78rem;
    color: var(--lm-text-muted);
}
.lm-bottom.lm-align-left { align-items: flex-start; }
.lm-bottom.lm-align-center { align-items: center; }
.lm-bottom.lm-align-right { align-items: flex-end; }
.lm-bottom > * { max-width: 100%; }

/* One zone in use: a plain block, so a lone left/centre/right item is
   aligned across the whole bar. */
.lm-footer-bottom-inner--single { display: block; }
.lm-footer-bottom-inner--single > * { margin: 0; }
.lm-footer-bottom-inner--single > * + * { margin-top: 12px; }
/* Two or more zones in use: left / centre / right columns. The side
   columns are equal, so the centre column is on the true centre. An item
   goes in the column its alignment names; two items in one column stack. */
.lm-footer-bottom-inner--zones {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 24px;
}
.lm-zone-left { grid-column: 1; justify-self: start; text-align: left; }
.lm-zone-center { grid-column: 2; justify-self: center; text-align: center; }
.lm-zone-right { grid-column: 3; justify-self: end; text-align: right; }
.lm-footer-bottom-inner--single .lm-zone-left { text-align: left; }
.lm-footer-bottom-inner--single .lm-zone-center { text-align: center; }
.lm-footer-bottom-inner--single .lm-zone-right { text-align: right; }
.lm-social { display: flex; gap: 16px; flex-wrap: wrap; }
.lm-social-align-left { justify-content: flex-start; }
.lm-social-align-center { justify-content: center; }
.lm-social-align-right { justify-content: flex-end; }

/* -------------------------------------------------------------------- */
/* Back to top                                                           */
/* -------------------------------------------------------------------- */
.lm-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--lm-border);
    background: var(--lm-surface);
    color: var(--lm-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--lm-transition), transform var(--lm-transition), visibility var(--lm-transition);
    z-index: 800;
}
.lm-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.lm-back-to-top:hover { border-color: var(--lm-accent); color: var(--lm-accent); }

/* -------------------------------------------------------------------- */
/* Error / offline screens                                               */
/* -------------------------------------------------------------------- */
.lm-error-screen, .lm-offline-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}
.lm-error-inner, .lm-offline-inner { max-width: 480px; }
.lm-error-code {
    font-family: var(--lm-font-serif);
    font-size: 5rem;
    color: var(--lm-accent);
    margin: 0;
}
.lm-error-title, .lm-offline-title { margin-top: 8px; }
.lm-error-debug {
    text-align: left;
    margin-top: 24px;
    padding: 16px;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    font-size: 0.78rem;
    overflow: auto;
    max-height: 240px;
}
.lm-offline-login { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; text-align: left; }
.lm-input {
    padding: 12px 14px;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border);
    color: var(--lm-text);
    border-radius: var(--lm-radius);
}

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .lm-layout--both { grid-template-columns: 1fr; }
    .lm-layout--both .lm-sidebar { order: 2; }
    .lm-mosaic-grid { grid-template-columns: repeat(2, 1fr); }
    .lm-mosaic-large { grid-column: span 2; grid-row: span 1; }

    /* Any row configured for 3 to 6 columns steps down to 2 on tablet,
       regardless of what the admin chose for desktop — a 4-up row
       crammed into a narrow tablet viewport stops being legible. */
    .lm-row-cols-3 > *, .lm-row-cols-4 > *, .lm-row-cols-5 > *, .lm-row-cols-6 > * {
        flex-basis: calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (max-width: 900px) {
    .lm-layout--left, .lm-layout--right { grid-template-columns: 1fr; }
    .lm-sidebar { order: 2; }

    .lm-nav-toggle { display: flex; }

    .lm-mainnav {
        position: fixed;
        inset: 0;
        top: var(--lm-header-actual, var(--lm-header-h));
        background: var(--lm-bg);
        padding: 24px var(--lm-container-pad);
        transform: translateX(100%);
        transition: transform var(--lm-transition);
        overflow-y: auto;
        z-index: 950;
    }
    .lm-mainnav.is-open { transform: translateX(0); }
    .lm-mainnav ul { flex-direction: column; gap: 0; }
    .lm-mainnav ul ul {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        border: none;
        background: none;
        box-shadow: none;
        padding-left: 16px;
        display: none;
    }
    .lm-mainnav li.is-expanded > ul { display: block; }
    .lm-mainnav a { padding: 14px 0; border-bottom: 1px solid var(--lm-border); }

}

@media (max-width: 640px) {
    :root { --lm-container-pad: 20px; }
    .lm-header-inner, .lm-header-zone { gap: 12px; }
    .lm-mosaic-grid { grid-template-columns: 1fr; }
    .lm-mosaic-large, .lm-mosaic-wide { grid-column: span 1; }
    .lm-hero-title { font-size: 2.4rem; }

    /* Every row — whatever column count the admin picked — stacks to a
       single column on phones. */
    .lm-row > * { flex-basis: 100% !important; max-width: 100% !important; }
    .lm-topbar .lm-row { grid-template-columns: max-content; }
    .lm-topbar-inner { flex-direction: column; align-items: stretch; }
    .lm-footer-bottom-inner--zones { grid-template-columns: minmax(0, 1fr); }
    .lm-zone-left, .lm-zone-center, .lm-zone-right { grid-column: 1; }
}

/* Last resort (js/template.js adds .is-stacked only if the logo and the menu
   are measured overlapping after everything else has been applied — which
   can only happen if outside CSS positions them): everything stacks in
   normal flow, each zone keeping its left / centre / right alignment. */
@media (min-width: 901px) {
    html body .lm-header .lm-header-inner.is-stacked { display: flex !important; flex-direction: column; align-items: stretch; }
    html body .lm-header .lm-header-inner.is-stacked .lm-header-zone,
    html body .lm-header .lm-header-inner.is-stacked .lm-logo-stack,
    html body .lm-header .lm-header-inner.is-stacked .lm-mainnav {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none !important;
        flex: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}

/* -------------------------------------------------------------------- */
/* Phone / tablet header (the menu is the slide-in panel here)           */
/* -------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* One row, always: the button must never wrap beneath the logo. */
    .lm-header-inner, .lm-header-zone { flex-wrap: nowrap; }

    /* The empty centre zone must not take a share of the row. */
    .lm-header-zone--center { flex: 0 1 auto; }

    /* A logo at the left (or right) gets all the room the menu button
       leaves, instead of only half of it; the opposite zone shrinks to its
       content. A centred logo keeps the equal-sided layout so it sits on
       the true centre. */
    .lm-logo-zone-left .lm-header-zone--left,
    .lm-logo-zone-right .lm-header-zone--right { flex: 1 1 auto; min-width: 0; }
    .lm-logo-zone-left .lm-header-zone--right,
    .lm-logo-zone-right .lm-header-zone--left { flex: 0 0 auto; }

    /* Whatever a module puts on a logo image (an inline max-width: none,
       say), it may never be wider than the screen. */
    .lm-logo-stack img { max-width: 100% !important; }
}