/*
 * Martin Audio, 2026 design refresh.
 *
 * Loaded after dist/style.css as an additive layer: it never changes markup
 * and removing the <link> rolls it back completely. Black and white stay the
 * core palette and Trade Gothic stays the only typeface. It adds rounded
 * corners, soft depth and gradients, calmer motion, and accessibility fixes
 * (visible keyboard focus, keyboard-openable menus, reduced motion).
 */

/* ---------------------------------------------------------------- tokens */

:root {
    --ma-black: #000;
    --ma-ink: #0b0b0c;
    --ma-surface-dark: #141416;
    --ma-surface-dark-2: #1c1c1f;
    --ma-white: #fff;
    --ma-paper: #f6f6f7;
    --ma-line-light: rgba(0, 0, 0, .08);
    --ma-line-dark: rgba(255, 255, 255, .1);
    --ma-text-muted-dark: #a3a3a3;   /* 7.8:1 on --ma-ink */
    --ma-text-muted-light: #555;     /* 6.7:1 on #f2f2f2 */

    /* 3:1 or better on white, #f2f2f2 and black (WCAG 2.4.11 / 1.4.11) */
    --ma-focus: #1f6feb;

    --ma-radius-xs: 4px;
    --ma-radius-sm: 6px;
    --ma-radius: 14px;
    --ma-radius-lg: 18px;

    --ma-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .06);
    --ma-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 24px -6px rgba(0, 0, 0, .14);
    --ma-shadow-lg: 0 4px 8px rgba(0, 0, 0, .06), 0 22px 48px -12px rgba(0, 0, 0, .28);
    --ma-shadow-dark: 0 0 0 1px var(--ma-line-dark), 0 18px 40px -16px rgba(0, 0, 0, .9);

    --ma-ease: cubic-bezier(.2, .7, .2, 1);
    --ma-fast: .18s;
    --ma-slow: .45s;

    /* Film grain: white noise at very low alpha, tiled. Inline SVG, no request. */
    --ma-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

    /* Black button gradient, shared by solid black buttons, black outline
       buttons on hover, series-card hovers and the dark hover of white,
       silver and green buttons (v40: lighter top so the sheen reads). */
    --ma-grad-black: linear-gradient(180deg, #57575e 0%, #242428 46%, #070707 100%);
    --ma-grad-black-hover: linear-gradient(180deg, #686870 0%, #2e2e33 50%, #0e0e10 100%);

    --ma-font: "Trade Gothic LT W01 Roman", "Helvetica Neue", Arial, sans-serif;
    --ma-font-bold: "Trade Gothic LT W01 Bold No-_2", "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------- base type */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 96px; /* in-page anchors land below the fixed nav */
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.heading1, .heading2, .heading3, .heading4, .heading5, .heading6 {
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

::selection {
    background: #000;
    color: #fff;
}

.black-bg ::selection,
footer.pagefoot ::selection {
    background: #fff;
    color: #000;
}

/* Form controls were falling back to Arial. */
button, input, select, textarea {
    font-family: var(--ma-font);
}

.button, button {
    font-family: var(--ma-font-bold);
}

/* ----------------------------------------------------- keyboard focus */
/* The base sheet sets outline:0 on buttons and inputs, which hides focus
   from keyboard users (WCAG 2.4.7). :focus-visible shows it for keyboard
   use only, so mouse clicks look the same as before. */

:focus-visible {
    outline: 3px solid var(--ma-focus) !important;
    outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-offset: 1px;
}

input[type=checkbox]:focus-visible + label span {
    outline: 3px solid var(--ma-focus);
    outline-offset: 2px;
}

/* ---------------------------------------------------------- mobile menu */
/* The closed overlay was only opacity 0 / z-index -1, and closed sections
   only max-height 0, so their links stayed in the tab order at every screen
   size. Hide them properly, after the close animations (480ms / 280ms). */
.mobile-overlay[data-menu-hidden="true"] {
    visibility: hidden;
    transition: visibility 0s linear .48s;
}

.mobile-overlay[data-menu-hidden="false"] {
    visibility: visible;
    transition: visibility 0s;
}

.mobile-overlay .snap-drawer .drop {
    visibility: hidden;
    transition: max-height 280ms, visibility 0s linear 280ms;
}

.mobile-overlay .snap-drawer .drop.active {
    visibility: visible;
    transition: max-height 280ms, visibility 0s;
}

/* The logo and "Return to Site" are floated and the list didn't clear them,
   so the first item's box (and its centred chevron background) started
   behind them: the Products arrow sat under "Return to Site". (Pre-existing.) */
.mobile-overlay #snap-menu {
    clear: both;
}

/* Menu opened by touch/mouse: focus moves in, but no ring until a key is
   pressed (mobile.php adds and removes .mm-no-ring). */
.mobile-overlay #snap-drawer-close.mm-no-ring:focus-visible {
    outline: none !important;
}

/* Visible focus inside the drawer (the base styles set outline: 0). */
.mobile-overlay #snap-drawer-close:focus-visible,
.mobile-overlay .snap-drawer li > a:focus-visible {
    outline: 3px solid var(--ma-focus) !important;
    outline-offset: -3px;
}

/* ----------------------------------------------------------- skip link */
/* First focusable element on every page (base.php). Off-screen until it
   gets keyboard focus, then a white pill at the top left. */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10002;
    padding: 12px 18px;
    border-radius: var(--ma-radius-sm);
    background: #fff;
    color: #000 !important;
    font-family: var(--ma-font-bold);
    font-size: 15px;
    text-decoration: none;
    box-shadow: var(--ma-shadow-lg);
    transform: translateY(-200%);
    transition: transform var(--ma-fast) var(--ma-ease);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
}

/* The skip target is focused programmatically; no ring around the page. */
#main-content:focus,
#main-content:focus-visible {
    outline: none !important;
}

/* ------------------------------------------------------------- buttons */

/* Lift, press and icon-nudge effects apply to the site's own buttons
   (.button, and <button class="solid">) only. Plain <button>s belong to
   widgets such as the Slick slider arrows, which are positioned with
   transform: translateY(-50%); a hover transform would replace that and
   make them jump. */
.button, button {
    border-radius: var(--ma-radius-sm);
}

.button, button.solid {
    transition:
        background-color var(--ma-fast) var(--ma-ease),
        color var(--ma-fast) var(--ma-ease),
        border-color var(--ma-fast) var(--ma-ease),
        box-shadow var(--ma-fast) var(--ma-ease),
        transform var(--ma-fast) var(--ma-ease);
}

.button:active, button.solid:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Solid buttons: a soft top-lit gradient over whatever colour they already
   have (black, silver, green, blue...), an inner highlight and a small drop
   shadow, so they read as pressable rather than flat blocks.
   :is() + :not(.disabled) lifts specificity to match the base sheet's
   colour rules (e.g. ".button.silver.solid { background: ... }"), which
   would otherwise wipe the gradient. Disabled buttons stay flat. */
:is(.button, button).solid:not(.disabled) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .1) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 1px 2px rgba(0, 0, 0, .18),
        0 4px 10px -4px rgba(0, 0, 0, .3);
}

:is(.button, button).solid.black:not(.disabled) {
    background-image: var(--ma-grad-black);
    border-color: #0b0b0c;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 1px 2px rgba(0, 0, 0, .25),
        0 6px 14px -6px rgba(0, 0, 0, .55);
}

:is(.button, button).solid.white:not(.disabled) {
    background-image: linear-gradient(180deg, #fff 0%, #ececef 100%);
    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 2px rgba(0, 0, 0, .12),
        0 6px 14px -6px rgba(0, 0, 0, .3);
}

/* Outline buttons get a faint fill so they aren't just a drawn rectangle. */
.button:not(.solid) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
}

/* Black outline buttons (e.g. "View Series" on /products/series) sit on light
   backgrounds: give them the same raised look as the solid buttons. */
.button.black:not(.solid):not(.disabled) {
    background-color: #fff;
    background-image: linear-gradient(180deg, #fff 0%, #f1f1f3 100%);
    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 2px rgba(0, 0, 0, .12),
        0 6px 14px -6px rgba(0, 0, 0, .3);
}

/* The base sheet turns them black (with #dde1e2 text) on hover, focus,
   press and .active. Match those states, or the white fill above would sit
   behind light text. Not hover-only, so a sticky tap state stays readable. */
.button.black:not(.solid):not(.disabled):is(:hover, :focus, :active, .active) {
    background-color: #000;
    background-image: var(--ma-grad-black);
    border-color: #000;
    color: #fff;
}

/* Series cards (/products/series): the base sheet turns the button black
   (background #000 !important) whenever the card is hovered. Keep that,
   with the same black gradient as the other buttons. */
.deck .card.series-card:hover .button.black:not(.solid) {
    background-image: var(--ma-grad-black) !important;
    border-color: #000;
}

/* White outline buttons (e.g. "Get Project Advice" on dark banners): a faint
   inner highlight and a shadow; the base hover still fills them white. */
.button.white:not(.solid):not(.disabled) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 6px 16px -8px rgba(0, 0, 0, .7);
}

.button.white:not(.solid):not(.disabled):is(:hover, :focus, :active, .active) {
    background-image: linear-gradient(180deg, #fff 0%, #ececef 100%);
}

@media (hover: hover) and (pointer: fine) {
    .button:hover, button.solid:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55);
    }

    /* Solid buttons without a known colour (e.g. "Order by") keep a light
       sheen on hover, so their dark text stays readable. */
    :is(.button, button).solid:not(.disabled):hover {
        background-image: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 60%);
    }

    /* The base sheet turns white, silver and green solid buttons black on
       hover, keeping their colour as the text. Match that with a dark sheen;
       a light gradient here would put white text on white. */
    :is(.button, button).solid:is(.white, .silver, .green):not(.disabled):hover {
        background-image: var(--ma-grad-black-hover);
        border-color: #000;
    }

    /* Black solid buttons do the opposite (as in the base sheet): light grey
       with black text, so black and grey buttons swap on hover. */
    :is(.button, button).solid.black:not(.disabled):hover {
        background-color: #dde1e2;
        background-image: linear-gradient(180deg, #eef0f1 0%, #dde1e2 100%);
        border-color: #dde1e2;
        color: #000;
        box-shadow: inset 0 1px 0 #fff, 0 10px 22px -10px rgba(0, 0, 0, .45);
    }

    /* Icons inside buttons nudge forward. */
    .button i, button.solid i {
        transition: transform var(--ma-fast) var(--ma-ease);
    }

    .button:hover i, button.solid:hover i {
        transform: translateX(2px);
    }
}

/* Where to Buy results: "View details" is a.viewlink > span.view, styled
   inline on that template as a flat black box with a red hover. Match it
   to .button.solid.black.small, keeping the red hover. */
a.viewlink {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: var(--ma-radius-sm);
    text-decoration: none;
}

a.viewlink > span.view {
    display: inline-block;
    padding: 12px 16px;
    font-family: var(--ma-font-bold);
    font-size: 12.8px;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background-color: #000;
    background-image: var(--ma-grad-black);
    border: 2px solid #000;
    border-radius: var(--ma-radius-sm);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 1px 2px rgba(0, 0, 0, .25),
        0 6px 14px -6px rgba(0, 0, 0, .55);
    transition:
        background-image var(--ma-fast) var(--ma-ease),
        box-shadow var(--ma-fast) var(--ma-ease),
        transform var(--ma-fast) var(--ma-ease);
}

a.viewlink > span.view i {
    transition: transform var(--ma-fast) var(--ma-ease);
}

/* Red on hover, as the template intended. #e30613 (the base sheet's red)
   rather than #ff0000, which gives white text only 4.0:1; this is 4.9:1. */
a.viewlink:hover > span.view,
a.viewlink:focus-visible > span.view {
    background-color: #e30613;
    background-image: linear-gradient(180deg, #e30613 0%, #c8000f 100%);
    border-color: #c8000f;
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 1px 2px rgba(0, 0, 0, .2),
        0 8px 18px -8px rgba(200, 0, 15, .55);
}

@media (hover: hover) and (pointer: fine) {
    a.viewlink:hover > span.view {
        transform: translateY(-1px);
    }

    a.viewlink:hover > span.view i {
        transform: translateX(2px);
    }
}

a.viewlink:active > span.view {
    transform: translateY(1px);
    box-shadow: none;
}

/* Slider dots and arrows are round. */
.qs-dot, .qs-arrow { border-radius: 50%; }

/* --------------------------------------------------------------- forms */

input[type=date], input[type=email], input[type=password],
input[type=tel], input[type=text], input[type=search],
input[type=number], input[type=url], textarea,
.selectwrap {
    border-radius: var(--ma-radius-sm);
}

input[type=date], input[type=email], input[type=password],
input[type=tel], input[type=text], input[type=search],
input[type=number], input[type=url], textarea {
    transition: border-color var(--ma-fast) var(--ma-ease), box-shadow var(--ma-fast) var(--ma-ease);
}

input[type=date]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=tel]:focus, input[type=text]:focus, input[type=search]:focus, textarea:focus,
.selectwrap:focus-within {
    box-shadow: 0 0 0 4px rgba(31, 111, 235, .18), 0 8px 24px -12px rgba(0, 0, 0, .35);
    border-color: var(--ma-focus);
}

/* Search bars: field and button read as one rounded control. */
input + .button, input + button {
    border-radius: var(--ma-radius-sm);
}

input[type=checkbox] + label span {
    border-radius: var(--ma-radius-xs);
}

/* ------------------------------------------------------------ navigation */

/* Frosted glass bar once the page scrolls. */
.fixed-nav nav {
    background-color: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    box-shadow: 0 1px 0 var(--ma-line-dark);
}

.fixed-nav nav.atTop {
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fixed-nav nav { background-color: rgba(0, 0, 0, .95); }
}

/* Plain top-level links get a sliding underline. Items with a dropdown
   rotate their chevron instead, so the two cues don't compete. */
.fixed-nav nav ul.mobiletablethide > li:not(:has(> div.dropdown)) > a::after {
    content: "";
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    bottom: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ma-fast) var(--ma-ease);
}

.fixed-nav nav ul.mobiletablethide > li > a:hover::after,
.fixed-nav nav ul.mobiletablethide > li:focus-within > a::after {
    transform: scaleX(1);
}

.fixed-nav nav ul.mobiletablethide > li > :is(a, button) > i.fa {
    display: inline-block;
    transition: transform var(--ma-fast) var(--ma-ease);
}

.fixed-nav nav ul.mobiletablethide > li:hover > :is(a, button) > i.fa,
.fixed-nav nav ul.mobiletablethide > li.is-open > button > i.fa {
    transform: rotate(180deg);
}

/* Dropdown parents are <button class="nav-toggle"> (desktop.php, Oct 2026).
   Reset the base sheet's generic button styling (border, padding, uppercase,
   margins) and match the top-level links exactly. */
.fixed-nav nav ul.mobiletablethide > li > button.nav-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    width: auto;
    height: 65px;
    margin: 0;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    color: inherit;
    font-family: var(--ma-font-bold);
    font-size: 1em;
    font-weight: inherit;
    line-height: 65px;
    letter-spacing: .01rem;
    text-transform: none;
    cursor: pointer;
    transition: height .18s ease-in, line-height .18s ease-in;
}

.fixed-nav nav.atTop ul.mobiletablethide > li > button.nav-toggle {
    height: 84px;
    line-height: 89px;
}

.fixed-nav nav ul.mobiletablethide > li > button.nav-toggle i {
    margin: 0;
}

.fixed-nav nav ul.mobiletablethide > li > button.nav-toggle:focus-visible {
    outline-offset: -3px;
}

/* Dropdown panels: dark frosted glass that hangs off the black bar, with
   rounded lower corners, instead of a white box floating beneath it. Also
   openable from the keyboard (the base sheet opened them on hover only). */
.fixed-nav nav ul li div.dropdown {
    width: 280px;
    padding: 8px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 40%),
        rgba(14, 14, 16, .94);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border: 1px solid var(--ma-line-dark);
    border-top: 0;
    border-radius: 0 0 var(--ma-radius) var(--ma-radius);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7);
    transform: translateY(-6px);
    /* Closed dropdowns are also hidden from keyboard and screen readers, so
       Tab no longer walks through links you can't see. visibility switches
       after the fade-out. */
    visibility: hidden;
    transition: transform .18s ease-in, opacity .18s ease-in, visibility 0s linear .18s;
}

.fixed-nav nav ul li div.dropdown ul li a {
    border-radius: var(--ma-radius-sm);
    padding-left: 12px;
    padding-right: 12px;
    color: #fff !important;
    transition: background-color var(--ma-fast) var(--ma-ease);
}

.fixed-nav nav ul li div.dropdown ul li a i {
    color: #8a8a8f;
    transition: transform var(--ma-fast) var(--ma-ease), color var(--ma-fast) var(--ma-ease);
}

.fixed-nav nav ul li div.dropdown span {
    color: var(--ma-text-muted-dark);
    padding-left: .7em; /* aligns with the link text after the caret */
}

/* The base sheet turns every hovered nav <li> near-white with dark text
   (#f8f8f8 / #111), made for the old white dropdown. That also hits the
   items inside the dark panel, leaving white text on white. Keep the
   top-level item dark (a faint lift) and the inner items transparent. */
.fixed-nav nav ul.mobiletablethide > li:hover,
.fixed-nav nav ul.mobiletablethide > li.is-open,
.fixed-nav nav ul.mobiletablethide > li:focus-within {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}

.fixed-nav nav ul.mobiletablethide > li:hover > :is(a, button) > i,
.fixed-nav nav ul.mobiletablethide > li.is-open > button > i,
.fixed-nav nav ul.mobiletablethide > li:focus-within > :is(a, button) > i {
    color: #fff;
}

.fixed-nav nav ul li div.dropdown ul li:hover {
    background-color: transparent;
    color: #fff;
}

.fixed-nav nav ul li div.dropdown ul li a:hover,
.fixed-nav nav ul li div.dropdown ul li a:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #fff !important;
}

.fixed-nav nav ul li div.dropdown ul li a:hover i,
.fixed-nav nav ul li div.dropdown ul li a:focus-visible i {
    color: #fff;
    transform: translateX(3px);
}

.fixed-nav nav ul li div.dropdown ul li a:hover span {
    color: #c8c8cc !important;
}

/* Open: on mouse hover (as before), when toggled by its button (.is-open),
   and while focus is inside it. */
.fixed-nav nav ul li:hover > div.dropdown,
.fixed-nav nav ul li.is-open > div.dropdown,
.fixed-nav nav ul li div.dropdown:focus-within {
    transform: translateY(0);
    opacity: 1;
    left: 0;
    z-index: 99;
    visibility: visible;
    transition-delay: 0s;
}

.fixed-nav nav ul li div.dropdown ul li a:focus-visible {
    outline-offset: -3px;
}

/* -------------------------------------------------------- cards / tiles */

/* Home page events, press and promo tiles. */
.event-item .inner {
    border-radius: var(--ma-radius);
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, var(--ma-paper) 100%);
    box-shadow: var(--ma-shadow-dark);
    transition: transform var(--ma-slow) var(--ma-ease), box-shadow var(--ma-slow) var(--ma-ease);
}

.event-item .event-image {
    transition: transform .8s var(--ma-ease), filter .8s var(--ma-ease);
}

.event-item .inner > a {
    display: block;
    overflow: hidden;
    border: 0; /* a.modal has a 2px transparent border in the base sheet,
                  which framed the image inside the rounded card */
}

/* Product cards on series pages. */
.card,
.card.scard {
    border-radius: var(--ma-radius);
    overflow: hidden;
    box-shadow: var(--ma-shadow);
    border: 1px solid var(--ma-line-light);
    background: linear-gradient(180deg, #fff 0%, var(--ma-paper) 100%);
    transition: transform var(--ma-slow) var(--ma-ease), box-shadow var(--ma-slow) var(--ma-ease);
}

.card .product-image img,
.card figure img {
    transition: transform .8s var(--ma-ease);
}

/* Dark tiles: a thin highlight along the top edge, brightest in the middle,
   as if lit from above, and a faint glow where the text panel begins. */
.event-item .inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0));
    z-index: 3;
    pointer-events: none;
    transition: left var(--ma-slow) var(--ma-ease), right var(--ma-slow) var(--ma-ease), opacity var(--ma-slow) var(--ma-ease);
    opacity: .75;
}

.event-item .event-descrption {
    background: radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

@media (hover: hover) and (pointer: fine) {
    .event-item .inner:hover::before {
        left: 0;
        right: 0;
        opacity: 1;
    }
}

/* Product line-up grid (/products, category pages): the image and the
   black title bar become one rounded card. drop-shadow follows the card's
   shape, so it works without wrapping the two in a new element. */
.product-block {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .06)) drop-shadow(0 10px 18px rgba(0, 0, 0, .1));
    transition: transform var(--ma-slow) var(--ma-ease), filter var(--ma-slow) var(--ma-ease);
}

.product-block > a:first-child {
    display: block;
    overflow: hidden;
    border-radius: var(--ma-radius) var(--ma-radius) 0 0;
    background: #fff;
}

.product-block > a:first-child img {
    display: block;
    transition: transform .8s var(--ma-ease);
}

.product-block > a.button {
    border-radius: 0 0 var(--ma-radius) var(--ma-radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    transform: none !important;
}

/* News listing thumbnails and images inside articles. */
.press-item .img-container,
article img {
    border-radius: var(--ma-radius);
}

.press-item .img-container {
    overflow: hidden;
    box-shadow: var(--ma-shadow);
    transition: transform var(--ma-slow) var(--ma-ease), box-shadow var(--ma-slow) var(--ma-ease);
}

.press-item .img-container img {
    display: block;
    transition: transform .8s var(--ma-ease);
}

@media (hover: hover) and (pointer: fine) {
    .press-item .thumbContainer a:hover .img-container {
        transform: translateY(-3px);
        box-shadow: var(--ma-shadow-lg);
    }

    .press-item .thumbContainer a:hover .img-container img {
        transform: scale(1.05);
    }
}

/* Support hub tiles (/support), styled inline in support/support.php. */
.ma-hub__tile {
    border-radius: var(--ma-radius);
    box-shadow: var(--ma-shadow);
    border: 1px solid var(--ma-line-light) !important;
    transition: transform var(--ma-slow) var(--ma-ease), box-shadow var(--ma-slow) var(--ma-ease);
}

@media (hover: hover) and (pointer: fine) {
    .ma-hub__tile:hover {
        transform: translateY(-4px);
        box-shadow: var(--ma-shadow-lg);
    }
}

.ma-hub__tile:focus-within {
    transform: translateY(-4px);
}

/* Components found by the all-pages audit (12 Oct). Edge-to-edge feature
   images, product cut-outs on plain backgrounds and logo banners are left
   square on purpose. */

/* Product pages: the white bordered image tiles (inline-styled .gutter). */
.promo-bg > div > .gutter {
    border-radius: var(--ma-radius);
    overflow: hidden;
}

/* Case-study quote panels on application pages. No overflow clipping: the
   quote-mark icon is positioned 30px outside the top-left corner. */
.first-quote {
    border-radius: var(--ma-radius);
}

.first-quote > img {
    border-radius: var(--ma-radius-sm);
}

/* Press release hero slider. It is pulled up into the black header band,
   and Slick gives its list, track and slides a white background, so a photo
   narrower than the slider sat in a square white block (with the arrows
   inside it). Drop that white so only the rounded photo shows, and let the
   arrows sit on the page beside it. */
/* Slick clips its list (overflow: hidden) only ~5px below the photo, which
   cut the photo's shadow off square. Extra bottom padding gives the shadow
   room; content-box keeps Slick's inline height for the photo, and the
   negative margin keeps the page layout where it was. */
.article-slider .slick-list {
    box-sizing: content-box;
    padding-bottom: 48px;
    margin-bottom: -48px;
}

.article-slider .slick-list,
.article-slider .slick-track,
.article-slider .slick-slide,
.article-slider .slick-slide > div,
.article-slider .slick-slide > div > div {
    background: transparent !important;
}

/* The base sheet's ".modal:hover" sets opacity .95, a white background and a
   white border.
   With the slider now transparent, that showed the header through the photo
   and a white band across the link (wider than the photo). Neutralise it
   here; a slight brighten is the hover cue instead. */
.article-slider a.modal,
.article-slider a.modal:hover {
    opacity: 1 !important;
    background-color: transparent !important;
    border-color: transparent !important; /* it also turned a 2px border white */
}

.article-slider .slick-slide img {
    transition: filter var(--ma-fast) var(--ma-ease);
}

.article-slider a.modal:hover img {
    filter: brightness(1.06);
}

/* A white frame keeps the photo from merging into the black header band;
   the hairline and shadow define it where it sits on the white page. */
.article-slider .slick-slide img {
    border: 4px solid #fff;
    border-radius: var(--ma-radius);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .08),
        0 2px 6px rgba(0, 0, 0, .1),
        0 24px 50px -20px rgba(0, 0, 0, .5);
}

/* Photo carousels: the "prints" collage on application pages takes a small
   radius; the About page carousel photos take the card radius. */
.carousel-cell1 img {
    border-radius: var(--ma-radius-sm);
}

.carousel-cell figure img {
    border-radius: var(--ma-radius);
}

/* Photos in content columns (news, coffee table book, worship, environment). */
.text-left > img,
.text-left > a > img,
.text-left > p > img {
    border-radius: var(--ma-radius);
}

/* FAQ panel (applications/worship) and the enquiry thank-you card. */
section.faq,
.enquiry-card {
    border-radius: var(--ma-radius);
}

/* HubSpot form on /mydesign (rendered in the page, not an iframe). */
.hsfc-TextInput,
.hsfc-TextareaInput,
.hsfc-DropdownInput,
.hsfc-PhoneInput,
.hsfc-Button {
    border-radius: var(--ma-radius-sm) !important;
}

/* Testimonial cards. */
.qs-card {
    border-radius: var(--ma-radius-lg);
    overflow: hidden;
    box-shadow: var(--ma-shadow);
}

/* Application grid tiles. */
.grid .grid-item.promo {
    border-radius: var(--ma-radius);
    overflow: hidden;
}

/* Hover lift, only where a real pointer exists. */
@media (hover: hover) and (pointer: fine) {
    .event-item .inner:hover,
    .card:hover {
        transform: translateY(-4px);
    }

    .event-item .inner:hover {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 28px 56px -20px rgba(0, 0, 0, 1);
    }

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

    .product-block:hover {
        transform: translateY(-5px);
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .08)) drop-shadow(0 22px 30px rgba(0, 0, 0, .18));
    }

    .product-block:hover > a:first-child img {
        transform: scale(1.05);
    }

    /* Hovering anywhere on the panel turns the title bar light grey with
       dark text. The base sheet did that only when hovering the photo
       (".product-block a:hover + a"); hovering the bar itself got the dark
       button hover, so the two didn't match. */
    .product-block:hover > a.button.lookup {
        background: linear-gradient(180deg, #eef0f1 0%, #dde1e2 100%) !important;
        border-color: #dde1e2 !important;
        color: #1a1a1a !important;
    }

    .event-item .inner:hover .event-image,
    .card:hover .product-image img,
    .card:hover figure img {
        transform: scale(1.04);
    }
}

/* Keyboard users get the same lift as hover. */
.event-item .inner:focus-within,
.card:focus-within,
.product-block:focus-within {
    transform: translateY(-4px);
}

/* ------------------------------------------------------- scroll reveal */
/* Cards, sliders, videos and section headings fade and rise once as they
   come into view, then stay put. base.php adds html.ma-reveal and .ma-in
   (IntersectionObserver), skipping it entirely for reduced motion or no
   JavaScript, so content is never left hidden.
   This replaced a scroll-linked version (animation-timeline: view()) in
   v33: that tied each card's offset to the scroll position, so cards kept
   shifting against the page as you scrolled, which read as judder. */

@keyframes ma-rise {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
}

@media screen {
    .ma-reveal :is(.product-block, .card, .qs-slider, .grid .grid-item, .responsive-video, section h2, section .heading2):not(.ma-in) {
        opacity: 0;
    }

    .ma-reveal .ma-in {
        animation: ma-rise .5s var(--ma-ease) both;
    }
}

/* ---------------------------------------------------------- media, misc */

.responsive-video,
.responsive-video iframe {
    border-radius: var(--ma-radius);
    overflow: hidden;
}

img.box-shadow {
    border-radius: var(--ma-radius-sm);
    box-shadow: var(--ma-shadow);
}

.accordion .item {
    border-radius: var(--ma-radius-sm);
}

/* Sections that sit on white get a soft top-to-bottom wash. */
section.white-bg.padded-section {
    background: linear-gradient(180deg, #fff 0%, var(--ma-paper) 100%);
}

/* Dark sections get a faint spotlight so flat black reads as depth. */
section.black-bg {
    background:
        var(--ma-grain),
        radial-gradient(120% 70% at 50% 0%, #1a1a1d 0%, rgba(0, 0, 0, 0) 60%),
        #000;
}

/* Cookie/info bar becomes a floating rounded panel. */
#notification {
    left: 16px;
    right: 16px;
    bottom: 16px;
    border-radius: var(--ma-radius);
    background: rgba(12, 12, 14, .9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--ma-shadow-dark);
}

#notification #notification-close {
    border-radius: var(--ma-radius-sm);
}

/* Grain on the black page itself (home page, dark landing pages). White
   sections sit on top of it, so it only shows where the page is black. */
body {
    background-image: var(--ma-grain);
}

/* ---------------------------------------------------------------- footer */
/* Restyled without markup changes: small spaced-caps headings, muted links
   that brighten on hover, round social buttons, a quieter legal list, the
   sign-up block as a card, and a hairline above the copyright. */

footer.pagefoot {
    position: relative;
    overflow: hidden;
    background:
        var(--ma-grain),
        radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, var(--ma-ink) 0%, #000 100%) !important;
    padding-top: 72px;
    padding-bottom: 48px !important;
}

/* Hairline across the top, brightest in the middle. */
footer.pagefoot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0));
}

/* Column headings: small spaced caps, so the links carry the weight. */
footer.pagefoot h4 {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8f8f95;
    margin: 0 0 18px;
}

footer.pagefoot h4 i {
    margin-right: 6px;
}

/* Link lists. */
footer.pagefoot ul li a {
    font-size: 14px;
    padding: 6px 0;
    margin-bottom: 2px;
    border: 0;
    color: rgba(255, 255, 255, .72);
    transition: color var(--ma-fast) var(--ma-ease), transform var(--ma-fast) var(--ma-ease);
}

footer.pagefoot ul li a:hover {
    color: #fff;
}

@media (hover: hover) and (pointer: fine) {
    footer.pagefoot ul li a:hover {
        transform: translateX(3px);
    }
}

/* Social: round outlined buttons that fill white on hover. */
footer.pagefoot .footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

footer.pagefoot .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
    color: #fff;
    transition: background-color var(--ma-fast) var(--ma-ease), color var(--ma-fast) var(--ma-ease), border-color var(--ma-fast) var(--ma-ease), transform var(--ma-fast) var(--ma-ease);
}

footer.pagefoot .footer-social a i.fa-2x {
    font-size: 17px;
}

footer.pagefoot .footer-social a:hover,
footer.pagefoot .footer-social a:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #000;
}

@media (hover: hover) and (pointer: fine) {
    footer.pagefoot .footer-social a:hover {
        transform: translateY(-2px);
    }
}

/* Legal and utility links under the social icons: quieter, smaller. */
footer.pagefoot a.col-white.gutter {
    font-size: 13px;
    color: rgba(255, 255, 255, .62) !important;
    transition: color var(--ma-fast) var(--ma-ease);
}

footer.pagefoot a.col-white.gutter i {
    width: 1.3em;
    color: #6f6f75;
    transition: color var(--ma-fast) var(--ma-ease);
}

footer.pagefoot a.col-white.gutter:hover,
footer.pagefoot a.col-white.gutter:hover i {
    color: #fff !important;
}

/* Icon links (Privacy, Cookies, Accessibility, Brand Hub) and the
   merchandise link slide 3px on hover, like the menu lists. inline-block so
   the transform applies; the focus ring follows. */
footer.pagefoot a.col-white.gutter,
footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) .padTop-2x a {
    display: inline-block;
    transition: color var(--ma-fast) var(--ma-ease), transform var(--ma-fast) var(--ma-ease);
}

@media (hover: hover) and (pointer: fine) {
    footer.pagefoot a.col-white.gutter:hover,
    footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) .padTop-2x a:hover {
        transform: translateX(3px);
    }
}

/* Sign-up column becomes a card: the footer's call to action. */
footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) > .gutter {
    padding: 26px 24px;
    border-radius: var(--ma-radius);
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 60%),
        rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -24px rgba(0, 0, 0, .8);
}

footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) h4 {
    color: #fff;
    font-size: 13px;
}

footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) .button {
    background: #fff;
    border-color: #fff;
    color: #000;
    padding-left: 28px;
    padding-right: 28px;
}

footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) .button:hover {
    background: #e9e9ec;
    border-color: #e9e9ec;
}

footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) .padTop-2x {
    margin-top: 22px;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Merchandise link. It has the base sheet's .col-white (color #fff
   !important), so the muted colour needs !important too, or there is
   nothing for the hover to brighten from. */
footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) .padTop-2x a {
    font-size: 13px;
    color: rgba(255, 255, 255, .72) !important;
}

footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) .padTop-2x a:hover {
    color: #fff !important;
}

/* Copyright row: hairline above, smaller type. */
footer.pagefoot > .wrap > .row:last-child .module {
    margin-top: 48px;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

footer.pagefoot p {
    font-size: 12px;
    line-height: 1.75;
    color: #8f8f95; /* 6.3:1 on black */
}

/* Mid widths: four (or three) narrow columns. Smaller social circles so all
   five stay on one line. */
@media only screen and (min-width: 735px) and (max-width: 1350px) {
    footer.pagefoot .footer-social {
        gap: 8px;
        flex-wrap: nowrap;
    }

    footer.pagefoot .footer-social a {
        width: 38px;
        height: 38px;
        flex: none;
    }

    footer.pagefoot .footer-social a i.fa-2x {
        font-size: 15px;
    }
}

/* Tablet (735-1020px): the grid has three columns, so the sign-up column
   wraps onto its own row. Give it the full row and lay the card out as one
   horizontal strip instead of a narrow block. */
@media only screen and (min-width: 735px) and (max-width: 1020px) {
    footer.pagefoot .footer-social a {
        width: 36px;
        height: 36px;
    }

    footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) {
        width: 100% !important;
        margin-top: 24px;
    }

    footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) > .gutter {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px 28px;
        padding: 20px 24px;
    }

    footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) h4 {
        margin: 0;
    }

    footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) .padTop-2x {
        margin: 0 0 0 auto;
        padding: 0 0 0 28px !important;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, .1);
    }
}

/* Phones (to 735px, the base sheet's breakpoint): columns are centred. */
@media only screen and (max-width: 735px) {
    footer.pagefoot .footer-social {
        justify-content: center;
    }

    footer.pagefoot > .wrap > .row:first-child > div:nth-child(4) > .gutter {
        margin: 0 16px;
    }

    footer.pagefoot ul li a:hover {
        transform: none;
    }

    footer.pagefoot > .wrap > .row:first-child > div {
        margin-bottom: 36px;
    }

    footer.pagefoot > .wrap > .row:last-child .module,
    footer.pagefoot > .wrap > .row:last-child .module p {
        margin-top: 8px;
        text-align: center !important;
    }
}

/* ------------------------------------------------------- body text links */
/* Links inside running text: a fine underline set clear of descenders
   that thickens on hover. Underlining (not colour alone) also meets
   WCAG 1.4.1. Buttons and image links are left alone. */

article p a:not(.button),
article li a:not(.button),
.lead a:not(.button),
section p a:not(.button):not(:has(img)) {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    transition: text-decoration-thickness var(--ma-fast) var(--ma-ease), text-decoration-color var(--ma-fast) var(--ma-ease), text-underline-offset var(--ma-fast) var(--ma-ease);
}

article p a:not(.button):hover,
article li a:not(.button):hover,
.lead a:not(.button):hover,
section p a:not(.button):not(:has(img)):hover {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
    text-underline-offset: .18em;
}

/* ------------------------------------------------- reading progress bar */
/* News articles: a thin blue line across the top fills as you read.
   base.php adds <div class="read-progress"> on press releases and sets its
   scaleX once per frame on scroll (passive listener + requestAnimationFrame).
   Replaced the CSS scroll-driven version (animation-timeline: scroll() on
   body::after) in v35, which juddered in Chrome. */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10001;
    pointer-events: none;
    background: #00befe; /* Martin Audio blue */
    transform-origin: 0 50%;
    transform: scaleX(0);
    will-change: transform;
}

@media print {
    .read-progress { display: none; }
}

/* ------------------------------------------------------------ performance */
/* Off-screen news listings and the footer are skipped by the browser until
   they near the viewport, which speeds up first paint on long pages.
   contain-intrinsic-size keeps the scrollbar stable meanwhile. */

.press-container .press-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

footer.pagefoot {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .event-item .inner:hover,
    .event-item .inner:focus-within,
    .card:hover,
    .card:focus-within,
    .ma-hub__tile:hover,
    .ma-hub__tile:focus-within {
        transform: none;
    }
}

/* ---------------------------------------------------- forced colours */
/* Windows High Contrast: keep focus and card edges visible. */

@media (forced-colors: active) {
    :focus-visible { outline-color: Highlight !important; }
    .event-item .inner, .card, .qs-card { border: 1px solid CanvasText; }
}