/* ==========================================================================
   Murella Site Builder — front end
   --------------------------------------------------------------------------
   Contents
     1.  Tokens
     2.  Reset & base
     3.  Layout: container, section, grid
     4.  Typography
     5.  Buttons
     6.  Header, utility bar, drawer
     7.  Footer
     8.  Hero
     9.  Panels
     10. Cards & grids
     11. Carousel
     12. Gallery & lightbox
     13. Benefits, steps, timeline
     14. Quotes & CTA bands
     15. Accordion, tabs, filters
     16. Single item pages
     17. Forms
     18. Video
     19. Utilities & motion
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */

.murella-site,
.murella-lightbox {
    /* Palette. Overridden per-site by the inline block in wp_head.
       These six are the canonical brand colours and the ONLY pink and blue on
       the site — there are deliberately no darkened, lightened or desaturated
       variants of Bright Rose or Electric Cobalt. Anything that is meant to be
       pink uses --murella-rose; anything blue uses --murella-cobalt. */
    --murella-rose: #FE5E9C;
    --murella-olive: #4F4F40;
    --murella-noir: #2B2B2B;
    --murella-terracotta: #B77F6C;
    --murella-cobalt: #356DFE;
    /* The one sanctioned tint of the brand cobalt, for the CTA band that sits
       directly above the now-cobalt footer. Declared twice on purpose: the
       fixed value is the fallback, and the colour-mix that follows keeps the
       tint tracking --murella-cobalt if the palette is ever edited in the
       admin. There is deliberately no second blue beyond this one. */
    --murella-cobalt-light: #CDDBFF;
    --murella-cobalt-light: color-mix(in srgb, var(--murella-cobalt) 25%, #FFFFFF);
    --murella-white: #FFFFFF;
    --murella-rose-rgb: 254, 94, 156;
    --murella-cobalt-rgb: 53, 109, 254;
    --murella-noir-rgb: 43, 43, 43;

    /* What sits on top of a filled brand swatch. White on both, by brand
       direction. */
    --murella-on-rose: var(--murella-white);
    --murella-on-cobalt: var(--murella-white);

    /* Derived surfaces */
    --murella-ink: var(--murella-noir);
    --murella-ink-soft: #5c5c53;
    --murella-surface: var(--murella-white);
    --murella-surface-tint: #f7f5f2;
    /* A near-white the client specified by hex for the Street Art Inspiration /
       Benefits transition. A neutral, not a tint of either brand accent, so it
       does not conflict with the "one pink, one blue" rule above. */
    --murella-surface-soft: #FCFBFA;
    --murella-surface-dark: var(--murella-noir);
    --murella-line: #e6e3dc;

    /* Type */
    --murella-font-fallback: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --murella-font-body: "Poppins", var(--murella-font-fallback);
    --murella-font-display: "Momo Trust Display", "Poppins", var(--murella-font-fallback);

    /* Fluid type. Minimum and maximum are stated in pixels so the two ends of
       every heading are unambiguous at a glance; only the fluid middle term is
       viewport-relative. Structure is always clamp(px, fluid, px). */
    --murella-text-xs: 13px;
    --murella-text-sm: 15px;
    --murella-text-base: 16px;
    --murella-text-lg: clamp(17px, 0.4vw + 15.7px, 19px);
    --murella-text-h4: clamp(18px, 0.6vw + 16px, 22px);
    --murella-text-h3: clamp(22px, 1.2vw + 17.6px, 30px);
    --murella-text-h2: clamp(28px, 2.2vw + 19.2px, 44px);
    --murella-text-h1: clamp(34px, 4vw + 17.6px, 60px);

    --murella-leading-tight: 1.14;
    --murella-leading-snug: 1.3;
    --murella-leading-body: 1.65;

    /* Spacing scale — every gap on the site comes from these six steps. */
    --murella-space-3xs: 0.25rem;
    --murella-space-2xs: 0.5rem;
    --murella-space-xs: 0.75rem;
    --murella-space-sm: 1rem;
    --murella-space-md: 1.5rem;
    --murella-space-lg: 2.25rem;
    --murella-space-xl: 3.5rem;
    --murella-space-2xl: 5rem;

    /* Layout. One container token drives every major section; components that
       genuinely need a shorter measure use --murella-container-narrow or a
       ch-based max-width on the text itself, never a second pixel value. */
    --murella-container: 1400px;
    --murella-container-narrow: 880px;
    --murella-gutter: clamp(1.25rem, 4vw, 3rem);
    --murella-section-space: clamp(3rem, 6vw, 5.5rem);
    --murella-section-space-sm: clamp(2rem, 4vw, 3rem);
    --murella-section-space-lg: clamp(4rem, 8vw, 7.5rem);
    --murella-grid-gap: clamp(1.25rem, 2.2vw, 2rem);

    /* Shape & motion */
    --murella-radius-sm: 6px;
    --murella-radius: 12px;
    --murella-radius-lg: 20px;
    --murella-radius-pill: 999px;
    /* The only elevation on the site. Reserved for elements that genuinely
       float above the page — the sticky header and the nav dropdown. Cards,
       panels, tiles and images use spacing, borders and colour instead. */
    --murella-shadow: 0 10px 30px rgba(var(--murella-noir-rgb), 0.08);
    --murella-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --murella-duration: 240ms;

    /* Entrance animation. One curve, two durations and two distances for the
       whole site — a component chooses a direction, never its own timing. The
       easing decelerates hard at the end, which is what makes a 20px move read
       as settling rather than sliding. */
    --murella-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --murella-anim-duration: 600ms;
    --murella-anim-duration-lg: 750ms;
    --murella-anim-shift: 20px;
    --murella-anim-shift-x: 24px;
    --murella-anim-step: 100ms;

    --murella-control-height: 3rem;
    --murella-focus: 0 0 0 3px var(--murella-white), 0 0 0 5px var(--murella-rose);

    /* Measured by frontend.js so overlay heroes can clear the fixed header.
       The fallback covers utility bar + header before the script runs. */
    --murella-header-h: 7.5rem;
}

/* ── 2. Reset & base ───────────────────────────────────────────────────── */

/* The builder renders the whole document on the pages it owns, so no theme
   stylesheet is loaded to reset the browser's default `body { margin: 8px }`.
   That default was the thin white border running around the outside of every
   page. Cleared at the source rather than compensated for further in. */
html:has(> body.murella-standalone),
body.murella-standalone,
body.murella-active {
    margin: 0;
    padding: 0;
}

.murella-site,
.murella-site *,
.murella-site *::before,
.murella-site *::after { box-sizing: border-box; }

.murella-site {
    font-family: var(--murella-font-body);
    font-size: var(--murella-text-base);
    line-height: var(--murella-leading-body);
    color: var(--murella-ink);
    background: var(--murella-surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* :where() keeps these defaults at zero specificity so component rules such as
   the cover images in sliders and cards win without needing !important. */
.murella-site :where(img, svg) { max-width: 100%; height: auto; display: block; }

/* Zero specificity so a component that declares `margin: 0` on its own
   paragraph actually gets it. At (0,1,1) this base rule silently beat every
   single-class component rule — which is where the stray 16px underneath the
   utility bar text came from. */
.murella-site :where(p) { margin: 0 0 var(--murella-space-sm); }
.murella-site :where(p:last-child) { margin-bottom: 0; }

.murella-site ul,
.murella-site ol { margin: 0; padding: 0; list-style: none; }

/* Zero specificity again, so button and component colours are not outranked
   by this base link rule. */
.murella-site :where(a) {
    color: inherit;
    text-decoration-color: rgba(var(--murella-rose-rgb), 0.5);
    text-underline-offset: 0.18em;
}
.murella-site :where(a:hover) { text-decoration-color: var(--murella-rose); }

.murella-site :focus-visible,
.murella-lightbox :focus-visible {
    outline: none;
    box-shadow: var(--murella-focus);
    border-radius: var(--murella-radius-sm);
}

/* Zero specificity, for the same reason as the link rule above: at (0,1,1)
   this outranked every single-class component rule, so `.primary-cta`,
   the filter chips and the lightbox controls all silently fell back to the
   inherited colour — which is how the lightbox icons ended up Deep Noir on a
   near-black backdrop. */
.murella-site :where(button) { font: inherit; color: inherit; }

/* Components that set their own `display` would otherwise beat the browser's
   [hidden] rule, leaving hidden controls on screen. One selector at (0,1,1)
   outranks every single-class component rule, so `hidden` always means hidden. */
.murella-site [hidden],
.murella-lightbox [hidden] { display: none; }

.murella-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--murella-noir);
    color: var(--murella-white);
    padding: var(--murella-space-xs) var(--murella-space-md);
    border-radius: 0 0 var(--murella-radius) 0;
}
.murella-skip:focus { left: 0; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Neutralise the host theme's page padding where Murella owns the page. */
body.murella-active #Content,
body.murella-active .section_wrapper,
body.murella-active .the_content_wrapper,
body.murella-active .sections_group,
body.murella-active .entry-content { margin: 0; padding: 0; max-width: none; width: 100%; }
body.murella-active .mcb-section .mcb-wrap-inner { padding: 0; }

/* ── 3. Layout ─────────────────────────────────────────────────────────── */

.murella-container {
    width: 100%;
    max-width: calc(var(--murella-container) + (var(--murella-gutter) * 2));
    margin-inline: auto;
    padding-inline: var(--murella-gutter);
}
.murella-container--narrow { max-width: calc(var(--murella-container-narrow) + (var(--murella-gutter) * 2)); }

.murella-section {
    position: relative;
    padding-block: var(--murella-section-space);
}
.murella-section--space-sm { padding-block: var(--murella-section-space-sm); }
.murella-section--space-lg { padding-block: var(--murella-section-space-lg); }

.murella-section--light { background: var(--murella-surface); color: var(--murella-ink); }
.murella-section--tint  { background: var(--murella-surface-tint); color: var(--murella-ink); }
.murella-section--dark  { background: var(--murella-surface-dark); color: var(--murella-white); }
/* The exact brand cobalt. The same value now carries the footer. */
.murella-section--cobalt { background: var(--murella-cobalt); color: var(--murella-on-cobalt); }

/* The cobalt tint, for the CTA band immediately above the footer. White would
   sit at 1.4:1 on this ground, so the band takes ink — 10.2:1 — which is both
   more readable and a deliberate step away from the solid footer below it. */
.murella-section--cobalt-light { background: var(--murella-cobalt-light); color: var(--murella-ink); }

/* Plain links inherit the band's ink; buttons must not. :where() keeps these
   at (0,1,0) so `.primary-cta` — declared later — still wins, instead of a
   tone rule silently repainting every CTA label on a coloured section. */
.murella-section--dark :where(a) { color: var(--murella-white); }
.murella-section--cobalt :where(a) { color: var(--murella-on-cobalt); }
.murella-section--cobalt-light :where(a) { color: var(--murella-ink); }

/* Consecutive bands of the same tone share one boundary instead of doubling.
   Benefits is a `light` section that paints its own near-white, so it is
   excluded at both ends: collapsing the boundary there would put a colour
   change hard against the next block's first line. Exclusion rather than an
   add-back rule, so a section keeps whichever space modifier it declared. The
   exclusions are wrapped in :where() so this rule stays at (0,2,0) — exactly
   what it was before — and the later `.murella-reviews + …` spacing rules keep
   winning on source order rather than being silently outranked. */
.murella-section--light:where(:not(.murella-benefits)) + .murella-section--light:where(:not(.murella-benefits)) { padding-block-start: 0; }
.murella-section--tint + .murella-section--tint { padding-block-start: 0; }

.murella-grid {
    display: grid;
    gap: var(--murella-grid-gap);
    grid-template-columns: repeat(var(--murella-grid-columns, 3), minmax(0, 1fr));
}
.murella-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.murella-grid__cell { min-width: 0; }

@media (max-width: 1024px) {
    .murella-grid { grid-template-columns: repeat(min(var(--murella-grid-columns, 3), 3), minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .murella-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .murella-grid { grid-template-columns: minmax(0, 1fr); }
}

.murella-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--murella-space-2xs);
    margin-bottom: var(--murella-space-lg);
}
.murella-section-head--center { align-items: center; text-align: center; margin-inline: auto; max-width: 62ch; }
.murella-section-head--left { align-items: flex-start; text-align: left; }

/* A reading measure belongs on the prose, not on the heading. Applying one
   figure to the whole block squeezed long headings into a narrow column on the
   left of a wide page; `em` lets the heading's measure scale with its own size
   so it wraps on two or three lines at any viewport. */
.murella-section-head--left .murella-heading { max-width: 16em; }
.murella-section-head__text { color: var(--murella-ink-soft); max-width: 62ch; }
.murella-section--dark .murella-section-head__text { color: rgba(255, 255, 255, 0.78); }

.murella-section-actions { margin-top: var(--murella-space-lg); }
.murella-section-actions--center { display: flex; justify-content: center; }

.murella-empty {
    padding: var(--murella-space-xl) 0;
    text-align: center;
    color: var(--murella-ink-soft);
}

/* ── 4. Typography ─────────────────────────────────────────────────────── */

.murella-site h1, .murella-site h2, .murella-site h3,
.murella-site h4, .murella-site h5, .murella-site h6 {
    font-family: var(--murella-font-display);
    font-weight: 600;
    line-height: var(--murella-leading-tight);
    letter-spacing: -0.012em;
    margin: 0 0 var(--murella-space-sm);
    color: inherit;
    text-wrap: balance;
}
.murella-site h1 { font-size: var(--murella-text-h1); }
.murella-site h2 { font-size: var(--murella-text-h2); }
.murella-site h3 { font-size: var(--murella-text-h3); line-height: var(--murella-leading-snug); }
.murella-site h4 { font-size: var(--murella-text-h4); line-height: var(--murella-leading-snug); }

.murella-heading { margin-bottom: 0; }

.murella-eyebrow {
    margin: 0;
    font-family: var(--murella-font-body);
    font-size: var(--murella-text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--murella-rose);
}

/* ── Component-scoped headings ─────────────────────────────────────────────
   Headings keep their correct semantic level; only their *size* is scaled to
   the component they sit in. Each selector below is (0,2,0) so it outranks the
   (0,1,1) `.murella-site hN` baseline — without that extra class the baseline
   won on specificity and every one of these rendered at full section-heading
   size. That is what made the FAQ questions enormous. */
.murella-site .murella-benefit__title,
.murella-site .murella-step__title,
.murella-site .murella-timeline__title,
.murella-site .murella-payment__title,
.murella-site .murella-single__h2 { font-size: var(--murella-text-h4); }

/* The offset panels are the site's biggest editorial statement, so their
   heading sits between the H3 and H2 steps rather than at H4. Same clamp(px,
   fluid, px) structure as the scale itself — one rule, no breakpoint list. */
.murella-site .murella-panel__heading {
    font-size: clamp(26px, 1.6vw + 20.2px, 36px);
    line-height: var(--murella-leading-snug);
}

.murella-site .murella-accordion__heading {
    font-family: var(--murella-font-body);
    font-size: clamp(16px, 0.5vw + 14.4px, 19px);
    font-weight: 600;
    line-height: var(--murella-leading-snug);
    letter-spacing: 0;
    margin: 0;
}

.murella-prose { max-width: 72ch; }
.murella-prose h2 { font-size: var(--murella-text-h3); margin-top: var(--murella-space-lg); }
.murella-prose h3 { font-size: var(--murella-text-h4); margin-top: var(--murella-space-md); }
.murella-prose > :first-child { margin-top: 0; }
.murella-prose ul,
.murella-prose ol { margin: 0 0 var(--murella-space-sm); padding-left: 1.35em; }
.murella-prose ul { list-style: disc; }
.murella-prose ol { list-style: decimal; }
.murella-prose li { margin-bottom: var(--murella-space-3xs); }
.murella-prose a { color: var(--murella-rose); text-underline-offset: 0.2em; }

/* ── 5. Buttons ────────────────────────────────────────────────────────── */

.murella-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--murella-space-2xs);
    min-height: var(--murella-control-height);
    padding: 0 var(--murella-space-lg);
    border: 1px solid transparent;
    border-radius: var(--murella-radius-pill);
    font-family: var(--murella-font-body);
    font-size: var(--murella-text-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--murella-duration) var(--murella-ease),
                color var(--murella-duration) var(--murella-ease),
                border-color var(--murella-duration) var(--murella-ease),
                transform var(--murella-duration) var(--murella-ease);
}
.murella-cta:hover { transform: translateY(-1px); text-decoration: none; }
.murella-cta:active { transform: translateY(0); }

/* The primary CTA is Bright Rose with a white label, moving to Electric Cobalt
   on hover. Both are the exact brand colours — no darkened variants. */
.primary-cta {
    background: var(--murella-rose);
    color: var(--murella-on-rose);
    border-color: var(--murella-rose);
}
.primary-cta:hover,
.primary-cta:focus-visible {
    background: var(--murella-cobalt);
    border-color: var(--murella-cobalt);
    color: var(--murella-on-cobalt);
}

.secondary-cta { background: var(--murella-white); color: var(--murella-noir); border-color: var(--murella-white); }
.secondary-cta:hover { background: transparent; color: var(--murella-white); border-color: var(--murella-white); }
.murella-section--light .secondary-cta,
.murella-section--tint .secondary-cta,
.murella-section--cobalt-light .secondary-cta { background: var(--murella-olive); color: var(--murella-white); border-color: var(--murella-olive); }
.murella-section--light .secondary-cta:hover,
.murella-section--tint .secondary-cta:hover,
.murella-section--cobalt-light .secondary-cta:hover { background: var(--murella-noir); border-color: var(--murella-noir); }

.tertiary-cta { background: transparent; color: var(--murella-olive); border-color: var(--murella-line); }
.tertiary-cta:hover { border-color: var(--murella-rose); color: var(--murella-rose); }
.murella-section--dark .tertiary-cta { color: var(--murella-white); border-color: rgba(255, 255, 255, 0.4); }
.murella-section--dark .tertiary-cta:hover { border-color: var(--murella-rose); color: var(--murella-rose); }

/* ── 6. Header ─────────────────────────────────────────────────────────────
   One header component, three states expressed as modifiers on the same
   markup — there is no second header in the DOM.

     .murella-header                  solid white, in normal flow
     .murella-header--sticky          sticks to the top of the viewport
     .murella-header--overlay         lifted out of flow and drawn over an
                                      image hero: transparent, inverted
     .is-scrolled                     the solid appearance, whichever state
     .is-nav-open                     drawer open, so always solid

   An overlay header is `fixed` rather than `sticky` precisely so it never
   occupies flow space: the hero starts at the very top of the document and
   runs underneath it, and nothing moves when the state changes.
   ────────────────────────────────────────────────────────────────────────── */

.murella-header {
    position: relative;
    z-index: 60;
    background: var(--murella-white);
    border-bottom: 1px solid var(--murella-line);
    transition: background-color var(--murella-duration) var(--murella-ease),
                border-color var(--murella-duration) var(--murella-ease),
                box-shadow var(--murella-duration) var(--murella-ease);
}
.murella-header--sticky { position: sticky; top: 0; }
/* The one place depth is genuinely functional: a bar floating over content. */
.murella-header.is-scrolled { box-shadow: 0 2px 14px rgba(var(--murella-noir-rgb), 0.06); }

.murella-header--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}
.murella-header--overlay.is-scrolled,
.murella-header--overlay.is-nav-open {
    background: var(--murella-white);
    border-bottom-color: var(--murella-line);
}
.murella-header--overlay.is-nav-open { box-shadow: none; }

/* Inverted content, only while the header is genuinely over the hero. */
.murella-header--overlay:not(.is-scrolled):not(.is-nav-open) {
    --murella-header-ink: var(--murella-white);
    --murella-header-ink-soft: rgba(255, 255, 255, 0.82);
    --murella-header-hover: var(--murella-white);
    --murella-header-line: rgba(255, 255, 255, 0.3);
    --murella-header-wash: rgba(255, 255, 255, 0.14);
}
.murella-header {
    --murella-header-ink: var(--murella-olive);
    --murella-header-ink-soft: var(--murella-ink-soft);
    --murella-header-hover: var(--murella-rose);
    --murella-header-line: var(--murella-line);
    --murella-header-wash: var(--murella-surface-tint);
}

/* A soft gradient keeps white navigation legible over a light photograph
   without putting a visible band across the top of the hero. */
.murella-header--overlay::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 180%;
    background: linear-gradient(to bottom, rgba(var(--murella-noir-rgb), 0.5), transparent);
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--murella-duration) var(--murella-ease);
}
.murella-header--overlay.is-scrolled::before,
.murella-header--overlay.is-nav-open::before { opacity: 0; }
.murella-header--overlay > * { position: relative; }

/* Utility bar */

.murella-utility {
    background: var(--murella-surface-tint);
    border-bottom: 1px solid var(--murella-line);
    font-size: var(--murella-text-xs);
    transition: background-color var(--murella-duration) var(--murella-ease),
                border-color var(--murella-duration) var(--murella-ease);
}
.murella-header--overlay:not(.is-scrolled):not(.is-nav-open) .murella-utility {
    background: transparent;
    border-bottom-color: var(--murella-header-line);
}
/* Every child is centred on one row; the flex `align-items: center` does the
   vertical centring and the paragraph carries no margin of its own. */
.murella-utility__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--murella-space-2xs) var(--murella-space-md);
    min-height: 2.5rem;
    padding-block: var(--murella-space-2xs);
}
.murella-utility__text,
.murella-utility__links,
.murella-utility__links li { margin: 0; padding: 0; line-height: 1.4; }
.murella-utility__text { color: var(--murella-header-ink-soft); }
.murella-utility__text a { color: inherit; }
.murella-utility__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--murella-space-md); }
.murella-utility__links a { text-decoration: none; color: var(--murella-header-ink-soft); }
.murella-utility__links a:hover { color: var(--murella-header-hover); }
@media (max-width: 640px) { .murella-utility { display: none; } }

/* Masthead */

.murella-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--murella-space-md);
    min-height: 5rem;
}

/* Both lockups occupy the same box and cross-fade, so switching between the
   primary and secondary artwork cannot shift the layout. */
.murella-header__logo { display: inline-flex; align-items: center; flex: none; position: relative; }
.murella-header__logo-mark {
    display: inline-flex;
    align-items: center;
    transition: opacity var(--murella-duration) var(--murella-ease);
}
.murella-header__logo-mark--overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.murella-header--overlay:not(.is-scrolled):not(.is-nav-open) .murella-header__logo-mark--overlay { opacity: 1; }
.murella-header--overlay:not(.is-scrolled):not(.is-nav-open) .murella-header__logo-mark--solid { opacity: 0; }
.murella-header__logo-img { width: auto; height: 2.5rem; }
.murella-header__logo-text { font-family: var(--murella-font-display); font-size: 1.25rem; font-weight: 700; }

.murella-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
.murella-menu { display: flex; align-items: center; gap: clamp(0.75rem, 1.8vw, 1.75rem); }
.murella-menu a {
    display: inline-block;
    padding: var(--murella-space-2xs) 0;
    font-size: var(--murella-text-sm);
    font-weight: 500;
    text-decoration: none;
    color: var(--murella-header-ink);
    transition: color var(--murella-duration) var(--murella-ease);
    position: relative;
}
.murella-menu a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--murella-rose);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--murella-duration) var(--murella-ease);
}
.murella-menu a:hover::after,
.murella-menu .current-menu-item > a::after,
.murella-menu .current-menu-ancestor > a::after { transform: scaleX(1); }
.murella-menu .current-menu-item > a { color: var(--murella-header-ink); font-weight: 600; }
/* The dropdown is always a white panel, so its links keep the solid ink. */
.murella-menu .sub-menu a { color: var(--murella-olive); }

.murella-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    background: var(--murella-white);
    border: 1px solid var(--murella-line);
    border-radius: var(--murella-radius);
    box-shadow: var(--murella-shadow);
    padding: var(--murella-space-2xs);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--murella-duration) var(--murella-ease), transform var(--murella-duration) var(--murella-ease), visibility var(--murella-duration);
    z-index: 5;
}
.murella-menu > li { position: relative; }
.murella-menu > li:hover > .sub-menu,
.murella-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.murella-menu .sub-menu a { display: block; padding: var(--murella-space-2xs) var(--murella-space-xs); }
.murella-menu .sub-menu a::after { display: none; }

.murella-header__actions { display: flex; align-items: center; gap: var(--murella-space-2xs); flex: none; }
.murella-header__icon {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--murella-header-ink);
    transition: background-color var(--murella-duration) var(--murella-ease), color var(--murella-duration) var(--murella-ease);
}
.murella-header__icon:hover { background: var(--murella-header-wash); color: var(--murella-header-hover); }

.murella-burger {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--murella-header-line);
    border-radius: var(--murella-radius-sm);
    cursor: pointer;
    transition: border-color var(--murella-duration) var(--murella-ease);
}
.murella-burger__bars { display: grid; gap: 4px; width: 20px; }
.murella-burger__bars span {
    display: block;
    height: 2px;
    background: var(--murella-header-ink);
    border-radius: 2px;
    transition: transform var(--murella-duration) var(--murella-ease), opacity var(--murella-duration) var(--murella-ease), background-color var(--murella-duration) var(--murella-ease);
}
.murella-burger[aria-expanded="true"] .murella-burger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.murella-burger[aria-expanded="true"] .murella-burger__bars span:nth-child(2) { opacity: 0; }
.murella-burger[aria-expanded="true"] .murella-burger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
    .murella-header__nav { display: none; }
    .murella-burger { display: inline-flex; }
    .murella-header__cta { display: none; }
    .murella-header__inner { min-height: 4.25rem; }
    .murella-header__logo-img { height: 2.125rem; }
}

.murella-drawer {
    position: fixed;
    inset: 0;
    top: var(--murella-drawer-top, 4.25rem);
    background: var(--murella-white);
    z-index: 80;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: murella-drawer-in var(--murella-duration) var(--murella-ease);
}
@keyframes murella-drawer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.murella-drawer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--murella-space-lg);
    padding: var(--murella-space-lg) var(--murella-gutter) var(--murella-space-2xl);
}
.murella-drawer__menu { display: flex; flex-direction: column; }
.murella-drawer__menu > li { border-bottom: 1px solid var(--murella-line); }
.murella-drawer__menu a {
    display: block;
    padding: var(--murella-space-sm) 0;
    font-family: var(--murella-font-display);
    font-size: 1.25rem;
    text-decoration: none;
}
.murella-drawer__menu .sub-menu { padding: 0 0 var(--murella-space-sm) var(--murella-space-sm); }
.murella-drawer__menu .sub-menu a { font-size: 1rem; padding: var(--murella-space-2xs) 0; font-family: var(--murella-font-body); }
.murella-drawer__menu .sub-menu li { border: 0; }
.murella-drawer__cta { align-self: flex-start; }
.murella-drawer__contact { display: grid; gap: var(--murella-space-2xs); }
.murella-drawer__contact a { display: inline-flex; align-items: center; gap: var(--murella-space-2xs); text-decoration: none; color: var(--murella-ink-soft); }
body.murella-nav-open { overflow: hidden; }

/* ── 7. Footer ─────────────────────────────────────────────────────────── */

/* Electric Cobalt footer: a solid brand block closing every page, and the
   ground the secondary (white-wordmark) Murella lockup is drawn for.
   White is the highest-contrast text available on this colour at 4.4:1, so
   nothing in here is allowed to be translucent — a wash would drop it into
   the threes. */
.murella-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--murella-cobalt);
    color: var(--murella-on-cobalt);
    padding-block: var(--murella-space-2xl) var(--murella-space-xl);
}
.murella-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--murella-space-lg);
    text-align: center;
}
.murella-footer__logo { width: auto; height: 4.5rem; }
.murella-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--murella-space-sm) var(--murella-space-lg);
}
.murella-footer__links a { font-weight: 600; text-decoration: none; }
/* Rose on cobalt is 1.5:1, so the hover cannot be a colour change here. An
   underline carries it instead — a non-colour affordance that reads at any
   contrast. */
.murella-footer__links a:hover {
    color: var(--murella-on-cobalt);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}
.murella-footer__brand { position: relative; z-index: 1; }
/* Solid white and a step up in size: at 13px in a translucent white this text
   was the weakest thing on the page once the ground became cobalt. */
.murella-footer__legal,
.murella-footer__copyright {
    max-width: 68ch;
    font-size: var(--murella-text-sm);
    line-height: 1.7;
    color: var(--murella-on-cobalt);
}
.murella-footer__copyright { margin: 0; }

.murella-socials { display: flex; gap: var(--murella-space-2xs); }
.murella-socials a {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--murella-line);
    color: var(--murella-olive);
    background: var(--murella-white);
    transition: background-color var(--murella-duration) var(--murella-ease), color var(--murella-duration) var(--murella-ease), border-color var(--murella-duration) var(--murella-ease);
}
.murella-socials a:hover { background: var(--murella-rose); border-color: var(--murella-rose); color: var(--murella-on-rose); }
/* On cobalt the outline needs to be a good deal stronger than it was on noir,
   and the hover inverts to a white disc rather than going rose — rose on
   cobalt is 1.5:1 and the glyph would all but disappear. */
.murella-footer__socials a {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--murella-on-cobalt);
}
.murella-footer__socials a:hover {
    background: var(--murella-white);
    border-color: var(--murella-white);
    color: var(--murella-cobalt);
}
/* Labelled pills that sit side by side. `inline-grid` put the glyph and the
   label in two grid rows, which is what made these stack; the row direction
   has to be explicit. They wrap only when there is genuinely no room. */
.murella-socials--inline { flex-wrap: wrap; gap: var(--murella-space-2xs); }
.murella-socials--inline a {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    padding: 0 var(--murella-space-md);
    gap: var(--murella-space-2xs);
    border-radius: var(--murella-radius-pill);
    font-size: var(--murella-text-sm);
    font-weight: 600;
    white-space: nowrap;
}
.murella-socials--inline a > svg { flex: none; }

/* The brand icon as a restrained watermark. Applied only where it is asked
   for, never as blanket decoration. */
.murella-watermark { position: relative; isolation: isolate; }
.murella-watermark::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: calc(var(--murella-gutter) * -1);
    bottom: -12%;
    width: clamp(180px, 26vw, 380px);
    aspect-ratio: 1;
    background: var(--murella-watermark-image) no-repeat center / contain;
    opacity: 0.05;
    pointer-events: none;
}
.murella-section--dark.murella-watermark::after { opacity: 0.08; }
@media (max-width: 700px) { .murella-watermark::after { display: none; } }

/* ── 8. Hero ───────────────────────────────────────────────────────────── */

.murella-hero {
    position: relative;
    display: grid;
    align-items: center;
    isolation: isolate;
    color: var(--murella-white);
    background: var(--murella-olive);
    overflow: hidden;
}
/* Short / Medium / Tall are the three options in the admin; only the height
   they resolve to is set here. Each is min(fluid-target, share-of-viewport):
   the clamp carries the intended desktop figure — Tall 800–900px, Medium
   650–700px, Short 500–560px at laptop widths — and the vh term keeps an
   unusually short window from turning the hero into a full-page scroll. */
.murella-hero--short  { min-height: min(clamp(360px, 24vw + 210px, 560px), 70vh); }
.murella-hero--medium { min-height: min(clamp(420px, 32vw + 240px, 700px), 82vh); }
.murella-hero--tall   { min-height: min(clamp(520px, 40vw + 300px, 880px), 92vh); }

.murella-hero__bg { position: absolute; inset: 0; z-index: -2; }
.murella-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to right,
        rgba(var(--murella-noir-rgb), calc(var(--murella-hero-overlay, 0.45) + 0.12)),
        rgba(var(--murella-noir-rgb), var(--murella-hero-overlay, 0.45))
    );
}
.murella-hero__inner { padding-block: var(--murella-section-space); width: 100%; }

/* An overlaid header is out of flow, so the first hero on the page reserves
   its measured height. Applied to the hero rather than the page so nothing
   else on the page has to know the header exists. */
.murella-hero--under-header .murella-hero__inner {
    padding-block-start: calc(var(--murella-header-h) + var(--murella-section-space));
}

/* Width is a share of the container rather than a character count, so the
   heading wraps naturally instead of being squeezed into a narrow column. The
   figure was tight enough that the About heading broke over three lines at
   every desktop width; 54rem takes it back to two without letting it run the
   full width of a 1400px container. A reading measure belongs on the body copy
   underneath, not on the display heading — see .murella-hero__sub below. */
.murella-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--murella-space-sm);
    max-width: min(54rem, 74%);
}
.murella-hero--center .murella-hero__content {
    max-width: min(54rem, 88%);
    margin-inline: auto;
    text-align: center;
    align-items: center;
}
@media (max-width: 860px) {
    .murella-hero__content,
    .murella-hero--center .murella-hero__content { max-width: none; }
}
.murella-hero__heading { margin: 0; color: inherit; }

/* Home only. The front page heading runs to 90px rather than the 60px every
   other H1 tops out at, on a tighter leading so the lines stack as one block
   instead of reading as separate sentences. Same clamp(px, fluid, px) shape as
   the rest of the scale, and the lower bound is unchanged, so a phone gets the
   size it always did — this is a desktop statement, not a global change.
   At (0,3,0) it outranks the `.murella-site h1` baseline; scoping it to
   .murella-hero--home is what keeps every other H1 exactly as it was. */
.murella-site .murella-hero--home .murella-hero__heading {
    /* The `min(…, 11vh)` term only bites on an unusually short window, where a
       90px heading over three lines would otherwise push the hero past the
       viewport guard the hero heights already respect. On any normal display
       the width term wins and the heading is the full 90px. */
    font-size: clamp(34px, min(6vw + 12px, 11vh), 90px);
    line-height: 1.03;
}
.murella-hero__sub { color: rgba(255, 255, 255, 0.9); font-size: var(--murella-text-lg); max-width: 62ch; }
.murella-hero__actions { margin-top: var(--murella-space-2xs); }
.murella-eyebrow--hero { color: var(--murella-white); opacity: 0.9; }

.murella-hero--plain,
.murella-hero--noimage {
    background: var(--murella-surface-tint);
    color: var(--murella-ink);
}
/* Without a photograph there is nothing to fill a full-height band, so the
   minimums come down rather than leaving a large empty tinted area. They still
   step up with the rest of the system, just from a lower base. */
.murella-hero--plain.murella-hero--medium,
.murella-hero--noimage.murella-hero--medium { min-height: min(clamp(280px, 18vw + 150px, 400px), 60vh); }
.murella-hero--plain.murella-hero--tall,
.murella-hero--noimage.murella-hero--tall { min-height: min(clamp(320px, 22vw + 170px, 480px), 68vh); }
.murella-hero--plain .murella-hero__sub,
.murella-hero--noimage .murella-hero__sub { color: var(--murella-ink-soft); }
.murella-hero--plain .murella-eyebrow--hero,
.murella-hero--noimage .murella-eyebrow--hero { color: var(--murella-rose); opacity: 1; }

/* The slider is always a fill layer behind its container's content, in both
   the hero and the offset panels. */
.murella-bgslider { position: absolute; inset: 0; overflow: hidden; }
.murella-bgslider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 900ms var(--murella-ease);
}
.murella-bgslider__slide.is-active { opacity: 1; }
.murella-bgslider__slide:only-child { opacity: 1; }
.murella-bgslider__img { width: 100%; height: 100%; object-fit: cover; }

/* ── 9. Panels ─────────────────────────────────────────────────────────── */

.murella-panel__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
}
.murella-panel__media {
    grid-column: 4 / -1;
    grid-row: 1;
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--murella-radius);
    overflow: hidden;
}
.murella-panel__media .murella-bgslider,
.murella-panel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Electric Cobalt, straight from the brand variable — the panel is the one
   place on a light page that carries a full brand colour. `isolation` gives the
   watermark below a stacking context of its own so a z-index of -1 lands above
   the card's own background but under every child; `overflow: hidden` is what
   crops the oversized icon at the card edge. */
.murella-panel__card {
    grid-column: 1 / 6;
    grid-row: 1;
    z-index: 2;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--murella-space-sm);
    background: var(--murella-cobalt);
    border: 1px solid var(--murella-cobalt);
    border-radius: var(--murella-radius);
    padding: var(--murella-space-lg);
    color: var(--murella-on-cobalt);
}

/* The brand icon as an exaggerated watermark: far wider than the card, hung
   off one edge so it is deliberately cropped, and pinned behind the content.
   Same asset and same custom property as the footer watermark — the light
   (white) brand icon from Global Settings — at the 0.2 the brief specifies. */
.murella-panel__card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    /* Sized against the card's width so it is always larger than the panel it
       sits in, whatever that panel's copy makes it — the crop is the point. */
    width: clamp(300px, 118%, 620px);
    aspect-ratio: 1;
    translate: 0 -50%;
    background: var(--murella-watermark-image) no-repeat center / contain;
    opacity: 0.2;
    pointer-events: none;
}
/* Alternate the crop with the layout the panel already declares: when the card
   sits on the left of the photograph the icon runs off the left edge, and when
   the panel is flipped it runs off the right. No new markup, no new modifier. */
.murella-panel__card::before { right: -26%; }
.murella-panel--flip .murella-panel__card::before { right: auto; left: -26%; }

.murella-panel--flip .murella-panel__media { grid-column: 1 / 10; }
.murella-panel--flip .murella-panel__card { grid-column: 8 / -1; }
/* Everything inside the card is on cobalt, so the light-ground ink colours are
   replaced rather than left to inherit. */
.murella-panel__text { color: var(--murella-on-cobalt); }
.murella-panel__card .murella-eyebrow { color: var(--murella-on-cobalt); opacity: 0.85; }
.murella-panel__actions { margin-top: var(--murella-space-2xs); }

/* The panel CTA keeps the site's button architecture — it is still a
   .murella-cta with its chosen style class — and is only re-coloured for this
   ground, because Cobalt-on-cobalt (the usual primary hover) would vanish and
   Charcoal Olive (the usual secondary) would go muddy. Bright Rose in, white
   out, with a Deep Noir label so the hover state stays plainly readable. */
.murella-panel__card .murella-cta {
    background: var(--murella-rose);
    color: var(--murella-on-rose);
    border-color: var(--murella-rose);
}
.murella-panel__card .murella-cta:hover,
.murella-panel__card .murella-cta:focus-visible {
    background: var(--murella-white);
    color: var(--murella-noir);
    border-color: var(--murella-white);
}

/* A hard 50/50 vertical split, not a blend: both stops are doubled at 50% so
   there is no interpolation between them. Stated in percentages, so the split
   stays on the halfway line whatever the section ends up measuring. The lower
   half is the same near-white the Benefits section below is painted in, which
   is what makes the two read as one continuous ground. */
.murella-section.murella-panel--feature {
    background: linear-gradient(
        to bottom,
        var(--murella-white) 0%,
        var(--murella-white) 50%,
        var(--murella-surface-soft) 50%,
        var(--murella-surface-soft) 100%
    );
}

@media (max-width: 860px) {
    .murella-panel__grid { grid-template-columns: minmax(0, 1fr); }
    .murella-panel__media,
    .murella-panel--flip .murella-panel__media { grid-column: 1; grid-row: 1; aspect-ratio: 3 / 2; }
    .murella-panel__card,
    .murella-panel--flip .murella-panel__card {
        grid-column: 1;
        grid-row: 2;
        margin-top: calc(var(--murella-space-lg) * -1);
        margin-inline: var(--murella-space-sm);
    }
}

/* ── 10. Cards ─────────────────────────────────────────────────────────── */

/* Team / artist grids hold a variable number of people. Tracks are sized to
   the card rather than to the container, so two members stay card-sized
   instead of stretching to half the page — and the row fills from the start,
   leaving the spare space at the end. `start` rather than `center` so an
   incomplete row lines up with everything else on the page; this holds for
   one member or for ten, with no count-specific rules. */
.murella-team .murella-grid,
.murella-artists .murella-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 22rem));
    justify-content: start;
}

.murella-card { height: 100%; }
.murella-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--murella-space-sm);
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.murella-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--murella-radius);
    background: var(--murella-surface-tint);
    aspect-ratio: 4 / 3;
}
.murella-card__media--portrait { aspect-ratio: 3 / 4; }
.murella-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--murella-ease);
}
.murella-card__link:hover .murella-card__img { transform: scale(1.04); }
.murella-card__placeholder { display: block; width: 100%; height: 100%; background: var(--murella-surface-tint); }
.murella-card__badge {
    position: absolute;
    top: var(--murella-space-2xs);
    left: var(--murella-space-2xs);
    padding: 0.25rem 0.7rem;
    border-radius: var(--murella-radius-pill);
    background: rgba(var(--murella-noir-rgb), 0.72);
    color: var(--murella-white);
    font-size: var(--murella-text-xs);
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.murella-card__body { display: flex; flex-direction: column; gap: var(--murella-space-3xs); }
.murella-card__body--center { text-align: center; align-items: center; }
.murella-card__title { font-family: var(--murella-font-display); font-size: var(--murella-text-h4); font-weight: 600; line-height: var(--murella-leading-snug); }
.murella-card__meta { font-size: var(--murella-text-sm); color: var(--murella-ink-soft); }
.murella-card__meta--accent { color: var(--murella-rose); font-weight: 600; }
.murella-card__text { font-size: var(--murella-text-sm); color: var(--murella-ink-soft); }
.murella-card__more {
    margin-top: auto;
    padding-top: var(--murella-space-2xs);
    font-size: var(--murella-text-sm);
    font-weight: 600;
    color: var(--murella-rose);
}
.murella-card__link:hover .murella-card__more { text-decoration: underline; }

/* ── 11. Carousel ──────────────────────────────────────────────────────── */

.murella-carousel { position: relative; }
.murella-carousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Bleed to the viewport edge so cards run off-screen rather than stopping short. */
    margin-inline: calc(var(--murella-gutter) * -1);
    padding-inline: var(--murella-gutter);
    padding-block: var(--murella-space-3xs);
}
.murella-carousel__viewport::-webkit-scrollbar { display: none; }
.murella-carousel__track {
    display: flex;
    gap: var(--murella-grid-gap);
    width: max-content;
    max-width: none;
}
.murella-carousel__item {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: var(--murella-carousel-item, 300px);
}
.murella-carousel--sm { --murella-carousel-item: 240px; }
.murella-carousel--md { --murella-carousel-item: 300px; }
.murella-carousel--lg { --murella-carousel-item: min(560px, 82vw); }
/* Catalogue cards. Sized so the imagery carries real presence: roughly 3.5–4
   across the desktop container, stepping down to 2–3 on a tablet and just
   over one on a phone, where the fraction of the next card is what says the
   row scrolls. The container tops out at 1400px, so the upper bound of the
   clamp holds the count steady on very wide screens. */
.murella-carousel--cards { --murella-carousel-item: clamp(260px, 28vw, 350px); }
.murella-carousel.is-single .murella-carousel__item { width: min(100%, 640px); }

/* ── Whole-card carousel ───────────────────────────────────────────────────
   The variants above size a card and let the next one run off the edge, which
   is the right cue for a catalogue row. The showcase asks for the opposite: a
   fixed number of *complete* cards and no sliver at the edge.

   The card width is solved from the carousel's own inline size rather than a
   pixel figure, so N cards and N-1 gaps always add up to exactly the available
   width. `container-type: inline-size` is what makes 1cqi mean "1% of the
   carousel", which a plain percentage cannot do here — the track is
   `width: max-content`, so a percentage on the item would resolve against an
   indefinite width. The column count is the only thing the breakpoints change;
   the size follows from it. */
.murella-carousel--fit {
    container-type: inline-size;
    --murella-carousel-cols: 4;
    --murella-carousel-item: calc(
        (100cqi - (var(--murella-carousel-cols) - 1) * var(--murella-grid-gap)) / var(--murella-carousel-cols)
    );
}
/* No bleed on this variant: the row has to stop at the container edge for the
   last visible card to be whole. */
.murella-carousel--fit .murella-carousel__viewport { margin-inline: 0; padding-inline: 0; }

@media (max-width: 1199px) { .murella-carousel--fit { --murella-carousel-cols: 3; } }
@media (max-width: 899px)  { .murella-carousel--fit { --murella-carousel-cols: 2; } }
@media (max-width: 559px)  { .murella-carousel--fit { --murella-carousel-cols: 1; } }

/* Without container queries `cqi` is not a length, which would leave the item
   width invalid rather than merely imprecise. Fall back to the fixed-size
   behaviour of the other variants. */
@supports not (container-type: inline-size) {
    .murella-carousel--fit { --murella-carousel-item: clamp(240px, 30vw, 340px); }
}

/* One control row: section action at the start, arrows at the end. It wraps
   only if there is genuinely no room for both. */
.murella-carousel__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--murella-space-sm) var(--murella-space-md);
    margin-top: var(--murella-space-md);
}
.murella-carousel__actions { margin-inline-end: auto; }
.murella-carousel__arrows { display: flex; gap: var(--murella-space-2xs); }
.murella-carousel__arrow {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--murella-line);
    border-radius: 50%;
    background: var(--murella-white);
    color: var(--murella-olive);
    cursor: pointer;
    transition: background-color var(--murella-duration) var(--murella-ease), color var(--murella-duration) var(--murella-ease), border-color var(--murella-duration) var(--murella-ease);
}
.murella-carousel__arrow:hover:not(:disabled) { background: var(--murella-rose); border-color: var(--murella-rose); color: var(--murella-white); }
.murella-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.murella-section--dark .murella-carousel__arrow { background: transparent; color: var(--murella-white); border-color: rgba(255, 255, 255, 0.35); }

.murella-carousel--quotes .murella-carousel__item { display: flex; }

/* The same hard 50/50 device as the panel section, in brand cobalt. The lower
   half runs straight into the cobalt footer, which is why the section's bottom
   padding is removed: the blue should meet the footer rather than trail off
   into a band of empty white. Internal spacing under the controls keeps that
   from looking like a mistake. */
.murella-section.murella-showcase {
    background: linear-gradient(
        to bottom,
        var(--murella-white) 0%,
        var(--murella-white) 50%,
        var(--murella-cobalt) 50%,
        var(--murella-cobalt) 100%
    );
    padding-block-end: 0;
}
.murella-showcase .murella-carousel__nav { margin-bottom: var(--murella-space-lg); }
/* Controls that land on the cobalt half. */
.murella-showcase .murella-carousel__arrow { border-color: rgba(255, 255, 255, 0.55); }

.murella-showcase__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--murella-space-md);
    margin-bottom: var(--murella-space-lg);
}
.murella-showcase__text { color: var(--murella-ink-soft); max-width: 52ch; }
.murella-showcase__item {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: var(--murella-radius);
    overflow: hidden;
}
.murella-showcase__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 600ms var(--murella-ease); }
.murella-showcase__item:hover .murella-showcase__img { transform: scale(1.04); }

/* ── 12. Gallery & lightbox ────────────────────────────────────────────── */

.murella-gallery {
    display: grid;
    gap: var(--murella-space-2xs);
    grid-template-columns: repeat(var(--murella-gallery-columns, 3), minmax(0, 1fr));
}
@media (max-width: 860px) { .murella-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .murella-gallery { grid-template-columns: minmax(0, 1fr); } }

.murella-gallery__item { position: relative; }
.murella-gallery__trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: var(--murella-radius-sm);
    position: relative;
}
.murella-gallery__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 600ms var(--murella-ease), filter var(--murella-duration) var(--murella-ease);
}
.murella-gallery__trigger:hover .murella-gallery__img { transform: scale(1.05); filter: brightness(0.92); }
.murella-gallery__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: var(--murella-space-sm) var(--murella-space-xs) var(--murella-space-2xs);
    background: linear-gradient(to top, rgba(var(--murella-noir-rgb), 0.72), transparent);
    color: var(--murella-white);
    font-size: var(--murella-text-xs);
    text-align: left;
}

.murella-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
}
.murella-lightbox[hidden] { display: none; }
.murella-lightbox__backdrop { position: absolute; inset: 0; background: rgba(15, 15, 14, 0.92); border: 0; }
.murella-lightbox__panel {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--murella-space-sm);
    width: min(1200px, 94vw);
    padding: var(--murella-space-md);
}
.murella-lightbox__figure { grid-column: 2; margin: 0; text-align: center; }
.murella-lightbox__img {
    max-width: 100%;
    max-height: 78vh;
    margin-inline: auto;
    border-radius: var(--murella-radius-sm);
    object-fit: contain;
}
.murella-lightbox__caption { margin-top: var(--murella-space-2xs); color: rgba(255, 255, 255, 0.85); font-size: var(--murella-text-sm); }
.murella-lightbox__count {
    grid-column: 2;
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--murella-text-xs);
}
/* White on the dark backdrop. These previously inherited Deep Noir from the
   base button rule and vanished against it, which is why the controls looked
   like empty circles. */
.murella-lightbox__close,
.murella-lightbox__nav {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--murella-white);
    cursor: pointer;
    line-height: 1;
    transition: background-color var(--murella-duration) var(--murella-ease), border-color var(--murella-duration) var(--murella-ease);
}
.murella-lightbox__close > svg,
.murella-lightbox__nav > svg {
    display: block;
    color: inherit;
    stroke: currentColor;
}
.murella-lightbox__close:hover,
.murella-lightbox__nav:hover {
    background: var(--murella-rose);
    border-color: var(--murella-rose);
    color: var(--murella-on-rose);
}
.murella-lightbox__close { position: absolute; top: 0; right: 0; }
.murella-lightbox__nav--prev { grid-column: 1; }
.murella-lightbox__nav--next { grid-column: 3; }
@media (max-width: 640px) {
    .murella-lightbox__panel { grid-template-columns: minmax(0, 1fr); padding-top: var(--murella-space-xl); }
    .murella-lightbox__figure,
    .murella-lightbox__count { grid-column: 1; }
    .murella-lightbox__nav--prev,
    .murella-lightbox__nav--next { grid-column: 1; position: absolute; bottom: var(--murella-space-md); }
    .murella-lightbox__nav--prev { left: var(--murella-space-md); }
    .murella-lightbox__nav--next { right: var(--murella-space-md); }
}

/* ── 13. Benefits, steps, timeline ─────────────────────────────────────── */

/* Benefits carries the same near-white as the lower half of the panel section
   above it, so the two meet without a visible seam. */
.murella-section.murella-benefits { background: var(--murella-surface-soft); }

/* `auto-fit` produced an uneven 3 + 1 at intermediate widths. The column count
   is now chosen per set by murella_balanced_columns(), which steps it down
   until the last row holds more than one card — so four steps run 4 / 2×2 / 1
   and never anything in between, and a five-item set runs 5 / 3+2 / 2 / 1.
   Breakpoints follow the width at which a card still has room to breathe. */
.murella-steps__list,
.murella-benefits__list {
    grid-template-columns: repeat(var(--murella-grid-columns, 4), minmax(0, 1fr));
    align-items: stretch;
}
@media (max-width: 1080px) {
    .murella-steps__list,
    .murella-benefits__list { grid-template-columns: repeat(var(--murella-grid-columns-md, 2), minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .murella-steps__list,
    .murella-benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .murella-steps__list,
    .murella-benefits__list { grid-template-columns: minmax(0, 1fr); }
}

/* Benefits and steps are one card treatment. Their content differs, so they
   stay separate components, but the surface — faint border, radius, padding,
   no shadow — is shared so the two clearly belong to the same system.
   Separation comes from the border and the whitespace, never from depth. */
.murella-benefit,
.murella-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--murella-space-2xs);
    text-align: center;
    height: 100%;
    padding: var(--murella-space-lg) var(--murella-space-md);
    border: 1px solid var(--murella-line);
    border-radius: var(--murella-radius);
    background: var(--murella-surface);
    transition: border-color var(--murella-duration) var(--murella-ease);
}
.murella-benefit:hover,
.murella-step:hover { border-color: rgba(var(--murella-rose-rgb), 0.45); }

.murella-benefit__icon,
.murella-step__icon { color: var(--murella-olive); margin-bottom: var(--murella-space-3xs); }
.murella-benefit__label,
.murella-step__label {
    font-size: var(--murella-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--murella-rose);
}
.murella-benefit__title,
.murella-step__title { margin: 0; }
.murella-benefit__text,
.murella-step__text { margin: 0; font-size: var(--murella-text-sm); color: var(--murella-ink-soft); max-width: 34ch; }

/* The timeline is an <ol>, and the list reset at `.murella-site ol` is (0,1,1)
   — so this component's own `margin-inline: auto` at (0,1,0) was silently
   losing to `margin: 0` and the whole timeline sat against the left edge of a
   1400px container while the spine drew itself down the middle of the 960px
   block. Same specificity trap as the component headings above, and the same
   remedy: one `.murella-site` prefix so the component wins, rather than an
   !important or a second wrapper element. */
.murella-timeline {
    position: relative;
    display: grid;
    gap: var(--murella-space-lg);
    max-width: 960px;
    counter-reset: murella-step;
}
.murella-site .murella-timeline { margin-inline: auto; }
.murella-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1rem;
    width: 2px;
    background: var(--murella-line);
}
.murella-timeline__item { position: relative; padding-left: 3.25rem; }
.murella-timeline__marker {
    position: absolute;
    left: 0.375rem;
    top: 1.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--murella-white);
    border: 2px solid var(--murella-rose);
}
.murella-timeline__card {
    background: var(--murella-white);
    border: 1px solid var(--murella-line);
    border-radius: var(--murella-radius);
    padding: var(--murella-space-md);
}
.murella-timeline__label {
    display: block;
    font-size: var(--murella-text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--murella-rose);
    margin-bottom: var(--murella-space-3xs);
}
.murella-timeline__title { margin: 0 0 var(--murella-space-2xs); font-size: var(--murella-text-h4); }
.murella-timeline__text { color: var(--murella-ink-soft); font-size: var(--murella-text-sm); }

@media (min-width: 861px) {
    .murella-timeline::before { left: 50%; transform: translateX(-1px); }
    .murella-timeline__item { padding-left: 0; width: calc(50% - var(--murella-space-lg)); }
    .murella-timeline__item:nth-child(even) { margin-left: auto; }
    .murella-timeline__marker { left: auto; right: calc(var(--murella-space-lg) * -1 - 0.625rem); }
    .murella-timeline__item:nth-child(even) .murella-timeline__marker { right: auto; left: calc(var(--murella-space-lg) * -1 - 0.625rem); }
}

.murella-payment { position: relative; isolation: isolate; }
.murella-payment__bg { position: absolute; inset: 0; z-index: -2; }
.murella-payment__img { width: 100%; height: 100%; object-fit: cover; }
.murella-payment__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(var(--murella-noir-rgb), 0.72); }
.murella-payment__option {
    text-align: center;
    padding: var(--murella-space-md);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--murella-radius);
    background: rgba(255, 255, 255, 0.06);
}
.murella-payment__title { margin: 0 0 var(--murella-space-2xs); font-size: var(--murella-text-h4); }
.murella-payment__text { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: var(--murella-text-sm); }

/* ── 14. Quotes, testimonials & CTA bands ──────────────────────────────── */

.murella-quote {
    display: flex;
    flex-direction: column;
    gap: var(--murella-space-sm);
    margin: 0;
    padding: var(--murella-space-lg);
    background: var(--murella-surface-tint);
    border-radius: var(--murella-radius);
    height: 100%;
}
.murella-quote__mark { color: var(--murella-rose); }
.murella-quote__text { margin: 0; font-size: var(--murella-text-lg); line-height: 1.55; }
.murella-quote__by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.murella-quote__name { font-style: normal; font-weight: 600; }
.murella-quote__role { font-size: var(--murella-text-sm); color: var(--murella-ink-soft); }
.murella-quote--feature {
    max-width: 60ch;
    margin-inline: auto;
    text-align: center;
    align-items: center;
    padding: var(--murella-space-xl);
}

/* ── Testimonials ──────────────────────────────────────────────────────────
   One shared component. Home and About use the same markup, the same script
   and the same styles; the only difference between them is the `overlap`
   argument passed by the renderer.

     · one review visible at a time
     · the wrapper takes the height of the *active* review and transitions
       between heights, so a short quote does not leave a hole and a long one
       is never cropped
     · `--overlap` lifts the tile over the bottom of the hero above it, on a
       transparent section so the hero shows through
   ────────────────────────────────────────────────────────────────────────── */

.murella-testimonials { position: relative; }

.murella-testimonials__viewport {
    position: relative;
    transition: height 420ms var(--murella-ease);
}
/* Inactive reviews are taken out of flow, which is what lets the viewport
   size itself to whichever one is showing. */
.murella-testimonials__slide {
    position: absolute;
    inset: 0 0 auto 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms var(--murella-ease);
}
.murella-testimonials__slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
}
.murella-testimonials .murella-quote {
    height: auto;
    padding: clamp(1.75rem, 3vw, 3rem);
}
/* 18–20px. Large enough to carry the quote, small enough that a long review
   does not force the card to grow tall — which, with the wider card below, is
   what keeps the overlap in proportion. The attribution stays a clear step
   below at 16px semibold / 15px muted. */
.murella-testimonials .murella-quote__text { font-size: clamp(18px, 0.35vw + 15.8px, 20px); }

.murella-testimonials__nav {
    display: flex;
    align-items: center;
    gap: var(--murella-space-sm);
    margin-top: var(--murella-space-md);
}
.murella-testimonials__dots { display: flex; align-items: center; gap: var(--murella-space-3xs); margin-inline-end: auto; }
.murella-testimonials__dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--murella-line);
    cursor: pointer;
    transition: background-color var(--murella-duration) var(--murella-ease), width var(--murella-duration) var(--murella-ease);
}
.murella-testimonials__dot.is-active { background: var(--murella-rose); width: 1.5rem; border-radius: var(--murella-radius-pill); }
.murella-testimonials__arrows { display: flex; gap: var(--murella-space-2xs); }

/* The review section hands its lower spacing to whatever follows: its own
   bottom padding plus the next section's top padding added up to a double gap.
   Only the bottom goes — the top padding, and the negative top margin the
   overlap depends on, are untouched. */
.murella-reviews { padding-block-end: 0; }

/* Consecutive same-tone sections normally drop the second one's top padding.
   With the review section no longer contributing any, that collapse would
   leave no gap at all, so the neighbour keeps whichever spacing it asked for. */
.murella-reviews + .murella-section--space-sm { padding-block-start: var(--murella-section-space-sm); }
.murella-reviews + .murella-section--space-md { padding-block-start: var(--murella-section-space); }
.murella-reviews + .murella-section--space-lg { padding-block-start: var(--murella-section-space-lg); }

/* Hero overlap. The section itself carries no background so the hero above
   remains visible behind the tile; only the tile is tinted. */
.murella-reviews--overlap {
    --murella-testimonial-overlap: clamp(2.5rem, 8vw, 8rem);
    position: relative;
    z-index: 3;
    background: transparent;
    padding-block-start: 0;
    margin-block-start: calc(var(--murella-testimonial-overlap) * -1);
}
/* A modest widening — the copy gets more room horizontally, so a long review
   is shorter and the tile stays better proportioned against the hero. Still a
   long way short of the full container. */
.murella-reviews--overlap .murella-testimonials {
    max-width: 48rem;
    margin-inline-start: auto;
}
.murella-reviews--overlap .murella-section-head { margin-inline-start: auto; }
@media (max-width: 860px) {
    .murella-reviews--overlap {
        --murella-testimonial-overlap: 2rem;
    }
    .murella-reviews--overlap .murella-testimonials { max-width: none; }
}

.murella-cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--murella-space-sm);
    text-align: center;
    max-width: 56ch;
    margin-inline: auto;
}
/* The band sits on the cobalt tint, so its copy is ink — 10.2:1 — rather than
   the white it used when the band itself was solid cobalt. */
.murella-cta-band__text { color: var(--murella-ink); }
.murella-cta-band__actions { margin-top: var(--murella-space-2xs); }

/* ── 15. Accordion, tabs, filters ──────────────────────────────────────── */

.murella-accordion { max-width: 860px; margin-inline: auto; display: grid; gap: var(--murella-space-2xs); }
.murella-accordion__heading { margin: 0; font-size: inherit; font-family: var(--murella-font-body); }
.murella-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--murella-space-sm);
    padding: var(--murella-space-sm) var(--murella-space-md);
    background: var(--murella-white);
    border: 1px solid var(--murella-line);
    border-radius: var(--murella-radius);
    text-align: left;
    font-size: var(--murella-text-base);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--murella-duration) var(--murella-ease);
}
.murella-accordion__trigger:hover { border-color: var(--murella-rose); }
.murella-accordion__sign { position: relative; width: 14px; height: 14px; flex: none; }
.murella-accordion__sign::before,
.murella-accordion__sign::after {
    content: "";
    position: absolute;
    background: var(--murella-rose);
    transition: transform var(--murella-duration) var(--murella-ease), opacity var(--murella-duration) var(--murella-ease);
}
.murella-accordion__sign::before { top: 6px; left: 0; width: 14px; height: 2px; }
.murella-accordion__sign::after  { top: 0; left: 6px; width: 2px; height: 14px; }
.murella-accordion__trigger[aria-expanded="true"] .murella-accordion__sign::after { transform: rotate(90deg); opacity: 0; }
.murella-accordion__body {
    padding: var(--murella-space-sm) var(--murella-space-md) var(--murella-space-md);
    color: var(--murella-ink-soft);
}

/* ── Tab row ───────────────────────────────────────────────────────────────
   One row treatment shared by the gallery tabs and the catalogue filters, so
   there is a single implementation rather than a second, near-identical one
   for the catalogue. Wraps on wide screens; below the width at which it still
   fits, it stays on one line and scrolls sideways instead of stacking into a
   vertical list, with the drawn indicator beneath it.
   ────────────────────────────────────────────────────────────────────────── */

.murella-tabrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--murella-space-2xs);
    margin-bottom: var(--murella-space-lg);
}

@media (max-width: 780px) {
    .murella-tabrow {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* The platform scrollbar is suppressed in favour of the drawn one
           below, so there is exactly one indicator and it is always visible. */
        scrollbar-width: none;
        margin-bottom: var(--murella-space-2xs);
        /* Bleed to the gutter so the last item runs off the edge rather than
           stopping short, which is itself a scroll affordance. */
        margin-inline: calc(var(--murella-gutter) * -1);
        padding-inline: var(--murella-gutter);
    }
    .murella-tabrow::-webkit-scrollbar { display: none; }
    .murella-tabrow > * {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

/* Drawn scroll indicator. Shown by the script only when the row it belongs to
   actually overflows; the thumb is sized and moved from the scroll position. */
.murella-scrollhint {
    height: 3px;
    border-radius: var(--murella-radius-pill);
    background: var(--murella-line);
    overflow: hidden;
}
.murella-scrollhint__thumb {
    display: block;
    height: 100%;
    width: 30%;
    border-radius: inherit;
    background: var(--murella-rose);
    transform-origin: left center;
    transition: transform 120ms linear;
}
.murella-scrollhint--row { margin-bottom: var(--murella-space-lg); }
/* Above the breakpoint the row wraps and there is nothing to indicate. */
@media (min-width: 781px) {
    .murella-scrollhint--row { display: none; }
}

.murella-tabs__tab,
.murella-filters__chip {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--murella-line);
    border-radius: var(--murella-radius-pill);
    background: var(--murella-white);
    font-size: var(--murella-text-sm);
    font-weight: 500;
    color: var(--murella-ink-soft);
    cursor: pointer;
    transition: background-color var(--murella-duration) var(--murella-ease), color var(--murella-duration) var(--murella-ease), border-color var(--murella-duration) var(--murella-ease);
}
.murella-tabs__tab:hover,
.murella-filters__chip:hover { border-color: var(--murella-rose); color: var(--murella-rose); }
.murella-tabs__tab.is-active,
.murella-filters__chip.is-active {
    background: var(--murella-olive);
    border-color: var(--murella-olive);
    color: var(--murella-white);
}
/* Layout comes from .murella-tabrow; the chips share .murella-tabs__tab's
   appearance in the rule above, so filters and tabs are one visual system. */
.murella-filters { justify-content: flex-start; }

/* ── 16. Single item pages ─────────────────────────────────────────────── */

.murella-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--murella-space-2xs);
    margin-bottom: var(--murella-space-lg);
    font-size: var(--murella-text-sm);
    color: var(--murella-ink-soft);
}
.murella-breadcrumb a { text-decoration: none; }
.murella-breadcrumb a:hover { color: var(--murella-rose); }

.murella-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--murella-space-xl);
    align-items: start;
}
@media (max-width: 900px) { .murella-single__grid { grid-template-columns: minmax(0, 1fr); gap: var(--murella-space-lg); } }

.murella-single__img { width: 100%; border-radius: var(--murella-radius); }
.murella-single__body { display: flex; flex-direction: column; gap: var(--murella-space-sm); }
.murella-single__title { margin: 0; }
.murella-single__subtitle { margin: 0; font-size: var(--murella-text-lg); color: var(--murella-ink-soft); }
.murella-single__subtitle--accent { color: var(--murella-rose); font-weight: 600; }
.murella-single__meta { margin: 0; color: var(--murella-ink-soft); font-size: var(--murella-text-sm); }

/* ── Artist detail ─────────────────────────────────────────────────────────
   Same two-column composition as before — image left, information right —
   with the spacing deliberately grouped rather than an even gap between every
   element: name/role/location read as one identity block, then the tags, then
   the biography, then the profiles.
   ────────────────────────────────────────────────────────────────────────── */

.murella-single--artist { padding-block: var(--murella-section-space-lg) var(--murella-section-space); }

.murella-single__grid--artist {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: clamp(2rem, 4.5vw, 4.5rem);
}
@media (max-width: 900px) {
    .murella-single__grid--artist { grid-template-columns: minmax(0, 1fr); }
}

/* Spacing is carried by the children so the groups can differ. */
.murella-single--artist .murella-single__body { gap: 0; }
.murella-single--artist .murella-single__title { margin-bottom: var(--murella-space-2xs); }
.murella-single--artist .murella-single__subtitle--accent { margin-bottom: var(--murella-space-3xs); }
.murella-single--artist .murella-single__meta { margin-bottom: var(--murella-space-lg); }
.murella-single--artist .murella-pills { margin-bottom: var(--murella-space-lg); gap: var(--murella-space-2xs); }
.murella-single--artist .murella-single__bio { max-width: 62ch; }
.murella-single--artist .murella-single__bio p { margin-bottom: var(--murella-space-md); }
.murella-single--artist .murella-socials--inline { margin-top: var(--murella-space-lg); }

/* ── Split detail layout ───────────────────────────────────────────────────
   Shared by the artist and mural detail pages: media one side, information the
   other, both occupying the same band so the pair reads as one component. If
   the information runs longer than that band it scrolls inside its own column
   rather than stretching the layout.

   Desktop only. Below 900px both pages are ordinary document flow — no
   max-height, no internal scrollbar, no fade.
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 901px) {
    /* Fallback band height. The artist page keeps this fixed clamp and crops
       its portrait to fit; the mural page has its own height published by the
       script from the real height of the artwork, so nothing is cropped. */
    .murella-single__grid--split { --murella-split-h: clamp(30rem, 62vh, 42rem); }

    .murella-single__body--scroll {
        max-height: var(--murella-split-h);
        overflow-y: auto;
        /* Room after the last element so the final control can scroll clear of
           the fade instead of ending underneath it, and inline room so a focus
           ring is not clipped by the scroll container. The negative margin
           keeps the content visually aligned with the column edge. */
        padding-block-end: var(--murella-space-2xl);
        padding-inline: 5px var(--murella-space-md);
        margin-inline-start: -5px;
        scrollbar-width: thin;
        scrollbar-color: var(--murella-line) transparent;
    }
    .murella-single__body--scroll::-webkit-scrollbar { width: 4px; }
    .murella-single__body--scroll::-webkit-scrollbar-thumb {
        background: var(--murella-line);
        border-radius: var(--murella-radius-pill);
    }
    /* Only applied once the script has confirmed the column actually overflows,
       and removed again the moment it is scrolled to the end or something
       inside it takes focus — otherwise the fade sits permanently over the
       last thing in the panel. */
    .murella-single__body--scroll.is-scrollable:not(.is-at-end) {
        mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
    }

    /* Artist: the portrait fills the band. */
    .murella-single--artist .murella-single__media { height: var(--murella-split-h); }
    .murella-single--artist .murella-single__img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}
.murella-single__summary { color: var(--murella-ink-soft); }
.murella-single__h2 { font-size: var(--murella-text-h4); margin: 0 0 var(--murella-space-2xs); }
.murella-single__actions { margin-top: var(--murella-space-2xs); }

/* ── Mural detail ──────────────────────────────────────────────────────────
   The artwork is the point of the page, so it takes appreciably more of the
   row than the information beside it. Its natural proportions are kept — the
   image is never cropped — and the information column matches its height.
   ────────────────────────────────────────────────────────────────────────── */

.murella-single__grid--mural {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 900px) {
    .murella-single__grid--mural { grid-template-columns: minmax(0, 1fr); }
}
.murella-single__grid--mural .murella-single__img { height: auto; }

/* The accordion sits inside the information column, under the CTA, so it uses
   the column's full width rather than the centred measure of the FAQ page. */
.murella-accordion--inline {
    max-width: none;
    margin-inline: 0;
    margin-top: var(--murella-space-md);
}
.murella-accordion--inline .murella-accordion__trigger {
    padding: var(--murella-space-xs) var(--murella-space-sm);
}
.murella-accordion--inline .murella-accordion__body {
    padding: var(--murella-space-xs) var(--murella-space-sm) var(--murella-space-sm);
    font-size: var(--murella-text-sm);
}

.murella-facts { display: grid; gap: var(--murella-space-2xs); margin: 0; }
.murella-facts__row {
    display: flex;
    justify-content: space-between;
    gap: var(--murella-space-sm);
    padding-bottom: var(--murella-space-2xs);
    border-bottom: 1px solid var(--murella-line);
}
.murella-facts dt { color: var(--murella-ink-soft); font-size: var(--murella-text-sm); margin: 0; }
.murella-facts dd { margin: 0; font-weight: 600; }

.murella-pills { display: flex; flex-wrap: wrap; gap: var(--murella-space-2xs); }
.murella-pill {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--murella-line);
    border-radius: var(--murella-radius-pill);
    font-size: var(--murella-text-sm);
}
.murella-pill span { color: var(--murella-ink-soft); }

.murella-case-intro__inner { max-width: 62ch; margin-inline: auto; text-align: center; }
.murella-case-intro__title { margin: 0 0 var(--murella-space-2xs); }
.murella-case-intro__meta { margin: 0 0 var(--murella-space-sm); color: var(--murella-rose); font-weight: 600; font-size: var(--murella-text-sm); }
.murella-case-intro__summary { color: var(--murella-ink-soft); }

/* ── 17. Forms ─────────────────────────────────────────────────────────── */

.murella-form-public { max-width: 760px; margin-inline: auto; }
.murella-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.murella-fieldset { border: 0; padding: 0; margin: 0 0 var(--murella-space-xl); }
.murella-fieldset__legend {
    font-family: var(--murella-font-display);
    font-size: var(--murella-text-h3);
    font-weight: 600;
    text-align: center;
    width: 100%;
    margin-bottom: var(--murella-space-2xs);
}
.murella-fieldset__intro { text-align: center; color: var(--murella-ink-soft); margin-bottom: var(--murella-space-lg); }

.murella-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--murella-space-md);
}
@media (max-width: 640px) { .murella-form-grid { grid-template-columns: minmax(0, 1fr); } }
.murella-field-public { margin: 0; display: flex; flex-direction: column; gap: var(--murella-space-3xs); }
.murella-field-public--wide { grid-column: 1 / -1; }
.murella-field-public label { font-size: var(--murella-text-sm); font-weight: 600; }
.murella-field-public input,
.murella-field-public select,
.murella-field-public textarea {
    width: 100%;
    min-height: var(--murella-control-height);
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--murella-line);
    border-radius: var(--murella-radius-sm);
    background: var(--murella-white);
    font: inherit;
    font-size: var(--murella-text-sm);
    color: var(--murella-ink);
}
.murella-field-public textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.murella-field-public input:focus,
.murella-field-public select:focus,
.murella-field-public textarea:focus { outline: none; border-color: var(--murella-rose); box-shadow: 0 0 0 3px rgba(var(--murella-rose-rgb), 0.16); }
.murella-required { color: var(--murella-rose); }
.murella-consent label { display: flex; gap: var(--murella-space-2xs); align-items: flex-start; font-weight: 400; }
.murella-consent input { width: auto; min-height: 0; margin-top: 0.3rem; }

.murella-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--murella-space-md);
    max-width: 640px;
    margin-inline: auto;
}
.murella-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.murella-choice label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--murella-space-sm);
    padding: var(--murella-space-lg) var(--murella-space-md);
    border: 1px solid var(--murella-line);
    border-radius: var(--murella-radius);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--murella-duration) var(--murella-ease), background-color var(--murella-duration) var(--murella-ease);
}
.murella-choice label:hover { border-color: var(--murella-rose); }
.murella-choice input:checked + label { border-color: var(--murella-rose); background: rgba(var(--murella-rose-rgb), 0.06); }
.murella-choice input:focus-visible + label { box-shadow: var(--murella-focus); }
.murella-choice__media {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--murella-surface-tint);
    color: var(--murella-olive);
    overflow: hidden;
}
.murella-choice__img { width: 100%; height: 100%; object-fit: cover; }
/* The label is a choice, not an accent — it reads as ink until the option is
   actually selected, at which point the brand rose marks the selection. */
.murella-choice__label { font-weight: 600; color: var(--murella-ink); }
.murella-choice input:checked + label .murella-choice__label { color: var(--murella-rose); }
.murella-choice input:checked + label .murella-choice__media { background: rgba(var(--murella-rose-rgb), 0.12); color: var(--murella-rose); }

.murella-steps-bar {
    display: flex;
    gap: var(--murella-space-2xs);
    justify-content: center;
    margin-bottom: var(--murella-space-xl);
    counter-reset: murella-bar;
}
.murella-steps-bar li {
    display: flex;
    align-items: center;
    gap: var(--murella-space-2xs);
    font-size: var(--murella-text-xs);
    color: var(--murella-ink-soft);
    counter-increment: murella-bar;
}
.murella-steps-bar li::before {
    content: counter(murella-bar);
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--murella-line);
    font-weight: 600;
}
.murella-steps-bar li.is-active { color: var(--murella-ink); font-weight: 600; }
.murella-steps-bar li.is-active::before { background: var(--murella-rose); border-color: var(--murella-rose); color: var(--murella-white); }
.murella-steps-bar li.is-done::before { background: var(--murella-olive); border-color: var(--murella-olive); color: var(--murella-white); }
@media (max-width: 560px) { .murella-steps-bar li span { display: none; } }

.murella-form-public__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--murella-space-2xs);
    justify-content: center;
}

.murella-alert {
    padding: var(--murella-space-md);
    border-radius: var(--murella-radius);
    margin-bottom: var(--murella-space-lg);
}
.murella-alert--error { background: rgba(var(--murella-rose-rgb), 0.08); border: 1px solid var(--murella-rose); }
.murella-alert ul { list-style: disc; padding-left: 1.35em; margin-top: var(--murella-space-2xs); }

.murella-enquiry__done { text-align: center; max-width: 52ch; margin-inline: auto; }
.murella-enquiry__done-text { margin-top: var(--murella-space-sm); color: var(--murella-ink-soft); }

/* ── 18. Video ─────────────────────────────────────────────────────────── */

.murella-video { position: relative; border-radius: var(--murella-radius); overflow: hidden; background: var(--murella-noir); }
.murella-video__play {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}
.murella-video__poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.murella-video__icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--murella-noir);
    transition: transform var(--murella-duration) var(--murella-ease), background-color var(--murella-duration) var(--murella-ease);
}
.murella-video__play:hover .murella-video__icon { transform: scale(1.06); background: var(--murella-rose); color: var(--murella-white); }
.murella-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ── 19. Utilities & motion ────────────────────────────────────────────── */

.murella-edit-link {
    position: absolute;
    top: var(--murella-space-2xs);
    right: var(--murella-space-2xs);
    z-index: 20;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--murella-noir-rgb), 0.7);
    color: var(--murella-white);
    font-size: 0.85rem;
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--murella-duration) var(--murella-ease);
}
.murella-section:hover > .murella-edit-link,
.murella-hero:hover > .murella-edit-link,
.murella-edit-link:focus-visible { opacity: 1; }

/* ── Entrance animation ────────────────────────────────────────────────────
   One system for the whole site, replacing the earlier `.murella-reveal`
   class. A renderer marks a piece of content with data-animate="…" and nothing
   else; the prepared state, the reveal, the stagger and the reduced-motion
   behaviour all live here and in frontend.js. There is deliberately no
   per-page or per-section animation CSS anywhere else in this file.

   Everything hangs off `.murella-anim` on <html>, which the head bootstrap adds
   before first paint — and only when the browser can actually run the reveal
   and the visitor has not asked for reduced motion. Without that class not one
   rule below matches, so the page is simply the page. That is what makes this
   progressive enhancement rather than a stack of hidden content waiting on a
   script, and what avoids the "visible, then hidden, then animated" flash.

   Only opacity and transform are animated — both composited, neither causing
   layout. Nothing here alters a dimension, a position or a spacing value, so
   the resting design is exactly what it was. */

.murella-anim [data-animate] {
    opacity: 0;
    transform: translateY(var(--murella-anim-shift));
}
.murella-anim [data-animate="fade"]       { transform: none; }
.murella-anim [data-animate="fade-left"]  { transform: translateX(calc(var(--murella-anim-shift-x) * -1)); }
.murella-anim [data-animate="fade-right"] { transform: translateX(var(--murella-anim-shift-x)); }

.murella-anim [data-animate].is-inview {
    opacity: 1;
    transform: none;
    transition: opacity var(--murella-anim-duration) var(--murella-anim-ease),
                transform var(--murella-anim-duration) var(--murella-anim-ease);
    /* Set per element by the script where a group should arrive in sequence;
       everything else keeps the default of no wait at all. */
    transition-delay: var(--murella-anim-delay, 0ms);
}
/* Photography and other large blocks take the longer curve: at the standard
   duration a big image reads as a snap rather than a reveal. Independent of
   the direction, so an image can come in from its own side and still be slow. */
.murella-anim [data-animate][data-animate-slow].is-inview {
    transition-duration: var(--murella-anim-duration-lg);
}

/* Sideways movement is a desktop device. On a phone the columns it belongs to
   have already stacked, so the same content simply rises like everything else
   — no horizontal travel inside a viewport with none to spare. */
@media (max-width: 860px) {
    .murella-anim [data-animate="fade-left"],
    .murella-anim [data-animate="fade-right"] { transform: translateY(var(--murella-anim-shift)); }
}

@media (prefers-reduced-motion: reduce) {
    .murella-site *,
    .murella-lightbox * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* The head bootstrap already declines to add `.murella-anim` when reduced
       motion is set, so normally none of the rules above are live at all. This
       is for the visitor who turns the setting on after the page has loaded:
       every prepared element is released immediately, with no movement and no
       stagger left to wait out. */
    .murella-anim [data-animate],
    .murella-anim [data-animate].is-inview {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0ms;
    }
    .murella-bgslider__slide { transition: none; }
}