/* M&A Signs & Print — site styles, ported from the approved design preview. Every colour, font, text size, signature size, radius and shadow is a custom property printed in :root by MASP_Tokens (dashboard: Colours & fonts, Sizes & spacing); fonts come from MASP_Tokens::font_face_css(). */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 var(--fs-body) / var(--lh-body) var(--font-body);
  color: var(--text);
  background: var(--paper);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
  margin: 0 0 0.5em;
  text-wrap: balance;
  overflow-wrap: anywhere; /* a very long word (owner's text) breaks instead of widening the page */
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { margin: 0 0 1em; overflow-wrap: anywhere; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius); }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 1000;
  background: var(--gold); color: var(--ink); padding: 0.6rem 1rem; font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius); text-decoration: none;
}
.skip:focus { top: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section--band { background: var(--grey-1); }
.section--ink { background: var(--ink); color: var(--ink-text); }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: var(--space-block);
}
.section__head h2 { margin: 0; }
.section__head p { margin: 0; color: var(--muted); max-width: var(--measure); }
.section--ink .section__head p { color: var(--ink-muted); }
.section__link { font-weight: 600; white-space: nowrap; }
.lead { font-size: var(--fs-lead); color: var(--muted); max-width: var(--measure); }
.muted { color: var(--muted); }

/* ---------- Buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--control-h); padding: 0.6rem 1.25rem;
  border: var(--border-strong) solid transparent; border-radius: var(--radius);
  font-weight: 600; text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn--ink { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink-3); border-color: var(--ink-3); }
.btn--ghost { background: transparent; color: var(--ink-text); border-color: var(--ink-muted); }
.btn--ghost:hover { border-color: var(--ink-text); }
.btn--outline { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--grey-1); }
.btn--sm { min-height: var(--control-h-sm); padding: 0.4rem 1rem; font-size: var(--fs-small); }
.btn--block { width: 100%; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { scroll-margin-top: var(--scroll-offset); }
.chip {
  display: inline-flex; align-items: center; min-height: var(--chip-h); padding: 0.35rem 0.9rem;
  border: var(--border-control) solid var(--grey-2); border-radius: var(--radius-pill); background: var(--paper);
  font-size: var(--fs-small); font-weight: 600; text-decoration: none; color: var(--text);
}
.chip:hover { border-color: var(--ink); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
.chip.is-active::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold); margin-right: 0.5rem; }

/* ---------- Search ---------- */
.search { position: relative; display: flex; }
.search__field {
  flex: 1; min-width: 0; min-height: var(--control-h); padding: 0.5rem 1rem;
  border: var(--border-strong) solid var(--grey-2); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--paper); color: var(--text);
}
.search__field::placeholder { color: var(--muted); }
.search__field:focus-visible { box-shadow: none; border-color: var(--ink); }
.search__field::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-width: var(--control-h); padding: 0 1rem; border: var(--border-strong) solid var(--ink);
  background: var(--ink); color: var(--ink-text); border-radius: 0 var(--radius) var(--radius) 0; font-weight: 600;
}
.search__btn svg { width: 1.25rem; height: 1.25rem; }
.search__btn:hover { background: var(--ink-3); }
.search--gold .search__btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.search--gold .search__btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.search--big .search__field { min-height: var(--control-h-lg); font-size: var(--fs-lead); border-color: var(--ink); }
.search--big .search__btn { min-width: var(--control-h-lg); padding: 0 1.5rem; font-size: var(--fs-h4); }
.search--big .search__btn span { display: none; }
@media (min-width: 560px) { .search--big .search__btn span { display: inline; } }

.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  background: var(--paper); color: var(--text); border: 1px solid var(--grey-2); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); overflow: hidden; text-align: left;
}
.suggest[hidden] { display: none; }
.suggest li { border-top: 1px solid var(--grey-1); }
.suggest li:first-child { border-top: 0; }
.suggest a {
  display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; text-decoration: none; min-height: 3.25rem;
}
.suggest a img { width: 3.5rem; height: 2.625rem; object-fit: cover; border-radius: var(--radius-xs); background: var(--grey-1); }
.suggest a strong { font-weight: 600; display: block; line-height: 1.2; }
.suggest a small { color: var(--muted); font-size: var(--fs-tiny); }
.suggest a .price-tab { font-size: var(--fs-tiny); }
.suggest li.is-active a, .suggest a:hover { background: var(--grey-1); }
.suggest .suggest__all a { grid-template-columns: 1fr; font-weight: 600; color: var(--ink); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--ink-text); }
.bar--top { border-bottom: 1px solid var(--ink-3); }
.bar__in { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); padding-block: 0.5rem; }
.logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; flex: none; }
.logo img { width: auto; height: var(--logo-h); }
.logo__txt { display: none; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h4); line-height: 1; letter-spacing: -0.01em; }
.logo__txt small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-tiny); color: var(--ink-muted); margin-top: 0.3rem; letter-spacing: 0; }
/* No logo image: the business name stands in (header and footer). */
.logo__name { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h4); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink-text); }
.footer-brand .logo__name { display: block; margin-bottom: 0.75rem; }
.search--header { flex: 1 1 18rem; max-width: 34rem; }
.search--header .search__field { border-color: var(--ink-3); }
.search--header .search__field:focus-visible { border-color: var(--gold); }
.search--header .search__btn { background: var(--ink-3); border-color: var(--ink-3); }
.search--header .search__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.contact { display: none; align-items: center; gap: 0.75rem; margin-left: auto; flex: none; }
.contact > div:first-child { display: flex; flex-direction: column; line-height: 1.25; }
.contact__tel { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-emph); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.contact__tel:hover { color: var(--gold); }
.contact__hours { font-size: var(--fs-tiny); color: var(--ink-muted); white-space: nowrap; }
.actions { display: none; gap: 0.5rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm);
  border: 0; background: transparent; color: var(--ink-text); border-radius: var(--radius); flex: none;
}
.icon-btn svg { width: 1.5rem; height: 1.5rem; }
.icon-btn:hover { background: var(--ink-3); }
.icon-btn--phone { text-decoration: none; margin-left: auto; }
.js-nav-toggle, .js-search-toggle { display: none; }
@media (max-width: 899px) { .js .js-nav-toggle { display: inline-flex; } }
@media (max-width: 639px) { .js .js-search-toggle { display: inline-flex; } }
.mobile-search { display: none; padding: 0.5rem 0 0.75rem; }
.mobile-search .search__field { border-color: var(--ink-3); }
.site-header.search-open .mobile-search { display: block; }
.site-header.search-open .js-search-toggle { background: var(--ink-3); color: var(--gold); }

.bar--nav { background: var(--ink-2); position: relative; }
.nav { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav > li > a {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: var(--control-h-sm); padding: 0.4rem 0.9rem;
  text-decoration: none; font-weight: 600; font-size: var(--fs-small); white-space: nowrap;
  border-bottom: var(--rule-accent) solid transparent; margin-bottom: -1px;
}
.nav > li > a:hover, .nav > li > a[aria-current="page"], .has-mega.is-open > a { border-bottom-color: var(--gold); }
.nav > li:first-child > a { padding-left: 0; }
.chev { width: 1rem; height: 1rem; flex: none; transition: transform 0.15s; }
.has-mega.is-open .chev { transform: rotate(180deg); }
.nav-extra { display: none; }

/* Products mega menu — the nav bar's own surface extending down; gold-headed columns like the footer */
.mega__h { margin: 0 0 0.4rem; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h4); letter-spacing: -0.01em; color: var(--gold); }
.mega__note { margin: -0.25rem 0 0.5rem; font-size: var(--fs-tiny); color: var(--ink-muted); }
.mega__col ul { display: grid; gap: 0.1rem; }
.mega__col a { display: inline-flex; align-items: center; min-height: 2rem; text-decoration: none; font-size: var(--fs-small); color: var(--ink-text); }
.mega__col a:hover { color: var(--gold); text-decoration: underline; text-decoration-thickness: 2px; }
.mega__all { font-weight: 600; margin-top: 0.35rem; }
.mega__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-3); }
.mega__pitch { margin: 0; flex: 1 1 18rem; font-size: var(--fs-small); color: var(--ink-muted); }
.mega__pitch strong { display: block; color: var(--ink-text); font-family: var(--font-head); font-size: var(--fs-card); letter-spacing: -0.01em; }
.mega__foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mega__foot .mega__all--products { margin: 0 0 0 auto; color: var(--ink-text); text-decoration: none; font-weight: 600; font-size: var(--fs-small); }
.mega__foot .mega__all--products:hover { color: var(--gold); text-decoration: underline; }
@media (min-width: 900px) {
  .nav { overflow: visible; }
  .mega {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
    background: var(--ink-2); color: var(--ink-text); border-top: 1px solid var(--ink-3); border-bottom: var(--rule-accent) solid var(--gold);
    box-shadow: var(--shadow-pop);
  }
  .js .has-mega.is-open .mega, html:not(.js) .has-mega:hover .mega, html:not(.js) .has-mega:focus-within .mega { display: block; }
  .mega__in { padding: 1.75rem 0 1.5rem; }
  .mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
}
@media (min-width: 1100px) { .mega__cols { grid-template-columns: repeat(var(--mega-cols), minmax(0, 1fr)); gap: 1.25rem; } }

/* Mobile header: only when JS is present do we collapse the nav into a panel; Products becomes an accordion */
@media (max-width: 899px) {
  .js .bar--nav {
    display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--ink-2);
    overflow-y: auto; padding-bottom: 5rem;
  }
  .js .bar--nav.is-open { display: block; }
  .js .bar--nav .nav { flex-direction: column; gap: 0; padding-top: 0.5rem; overflow: visible; }
  .js .bar--nav .nav > li > a { width: 100%; justify-content: space-between; font-size: var(--fs-lead); min-height: 3.25rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ink-3); margin: 0; }
  .js .bar--nav .nav > li > a:hover, .js .bar--nav .nav > li > a[aria-current="page"], .js .has-mega.is-open > a { color: var(--gold); border-bottom-color: var(--ink-3); }
  .js .has-mega .chev { width: 1.35rem; height: 1.35rem; }
  .mega { display: none; }
  .js .has-mega.is-open .mega { display: block; padding: 0.75rem 0 1rem; border-bottom: 1px solid var(--ink-3); }
  .mega__in { width: 100%; }
  .mega__cols { display: grid; gap: 1.1rem; }
  .mega__col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  .mega__col a { min-height: 2.75rem; }
  .mega__foot { margin-top: 1.25rem; padding-top: 1rem; }
  .js .nav-extra { display: grid; gap: 0.75rem; padding-top: 1.25rem; }
  .js .nav-extra .btn { justify-content: center; }
  .js .nav-extra p { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); }
  .js .nav-extra p a { color: var(--ink-text); font-weight: 600; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 639px) {
  .js .search--header { display: none; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .js-search-toggle, .mobile-search { display: none !important; }
  .search--header { flex: 1 1 10rem; max-width: none; margin-right: auto; }
}
@media (min-width: 900px) {
  .js-nav-toggle, .js-search-toggle, .icon-btn--phone, .mobile-search { display: none !important; }
  .contact { display: flex; }
  .actions { display: flex; }
  .search--header { flex: 1 1 9rem; min-width: 8rem; }
}
@media (min-width: 1100px) {
  .logo__txt { display: block; }
  .search--header { flex-basis: 22rem; }
}

/* ---------- Social links (Instagram, Facebook — symbols defined once per page, reused with <use>) ---------- */
.social { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.social a { display: inline-flex; align-items: center; gap: 0.45rem; min-width: var(--control-h-sm); min-height: var(--control-h-sm); padding: 0 0.5rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: var(--fs-small); }
.social svg { width: 1.35rem; height: 1.35rem; flex: none; }
.social--icons { flex-wrap: nowrap; }
.contact .social { display: none; }
@media (min-width: 1100px) { .contact .social { display: flex; } }
.social--icons a { justify-content: center; padding: 0; }
.site-header .social a:hover { background: var(--ink-3); color: var(--gold); }
.site-footer .social { margin-top: 0.75rem; margin-left: -0.5rem; }
.site-footer .social a:hover { text-decoration: none; }
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 1.25rem; font-size: var(--fs-small); }
.follow > span { color: var(--muted); font-weight: 600; }
.follow .social a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }

/* ---------- Breadcrumbs & page head ---------- */
.crumbs { padding: 1rem 0 0; font-size: var(--fs-small); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.crumbs li + li::before { content: var(--crumb-sep); margin-right: 0.35rem; color: var(--grey-2); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }
.page-head { padding: 1rem 0 var(--space-block); }
.page-head h1 { font-size: var(--fs-h1-page); }
.page-head .search--big { margin: 1.25rem 0 1rem; max-width: 46rem; }
.cat-note { margin: 0.75rem 0 0; font-size: var(--fs-small); color: var(--muted); max-width: 70ch; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-hero) var(--space-section); }
.hero__in { display: grid; gap: 2rem; align-items: center; }
.hero h1 { margin-bottom: 0.6em; }
.hero .lead { margin-bottom: 1.5rem; }
.hero .search--big { max-width: 40rem; }
.popular { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0 0; font-size: var(--fs-small); color: var(--muted); }
.popular .chip { min-height: 2.25rem; padding-block: 0.25rem; }
/* Hero slideshow: slides stack in the frame and crossfade; without JS (or with reduced motion) only the first shows */
.hero__media { position: relative; margin: 0; aspect-ratio: var(--ratio-hero); overflow: hidden; border-radius: var(--radius-lg); background: var(--grey-1); }
.hero__media .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--slide-fade) ease; }
.hero__media .slide.is-active { opacity: 1; }
.hero__media figcaption {
  position: absolute; left: 1rem; bottom: 1rem; max-width: calc(100% - 13rem); background: var(--ink); color: var(--ink-text);
  font-size: var(--fs-tiny); padding: 0.35rem 0.6rem; border-radius: var(--radius);
}
.slides__dots { display: none; position: absolute; right: 0.5rem; bottom: 0.5rem; }
.slides__dots:not(:empty) { display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 1rem); }
.slides__dots button { width: var(--control-h-sm); height: var(--control-h-sm); padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.slides__dots button::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--paper); opacity: 0.6; box-shadow: 0 0 0 1px var(--shade); transition: transform 0.2s; }
.slides__dots button:hover::before { opacity: 1; }
.slides__dots button[aria-current="true"]::before { background: var(--gold); opacity: 1; transform: scale(1.4); }
.slides__dots button:focus-visible { box-shadow: none; }
.slides__dots button:focus-visible::before { box-shadow: var(--focus-ring), 0 0 0 calc(var(--focus-width) + 1px) var(--ink); }
/* Pause / play button (R8, shown by site.js while the photos change by themselves): first in the dots row with the dots' target and focus ring; two bars, a triangle while paused. The row is one target wider, so the caption stops short of the pause glyph (the default captions keep their line breaks) and the row sits above the caption so the whole target stays clickable. */
.slides__dots .slides__pause::before { width: 0.6rem; height: 0.7rem; border-radius: 0; background: linear-gradient(90deg, var(--paper) 35%, transparent 35% 65%, var(--paper) 65%); box-shadow: none; filter: drop-shadow(0 0 1px var(--shade)); }
.slides__dots .slides__pause.is-paused::before { width: 0; height: 0; background: none; border-style: solid; border-width: 0.35rem 0 0.35rem 0.6rem; border-color: transparent transparent transparent var(--paper); }
.hero__media:has(.slides__pause:not([hidden])) figcaption { max-width: calc(100% - 14.25rem); }
.hero__media:has(.slides__pause:not([hidden])) .slides__dots { z-index: 1; }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, var(--split-main)) minmax(0, var(--split-aside)); gap: 3rem; align-items: stretch; }
  .hero__media { aspect-ratio: auto; min-height: 22rem; }
}

/* ---------- Category tiles ---------- */
.tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { position: relative; display: block; text-decoration: none; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); }
.tile img { width: 100%; aspect-ratio: var(--ratio-card); object-fit: cover; }
.tile:hover img { opacity: 0.85; }
.tile__label {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 0.85rem 1rem;
  background: linear-gradient(to top, var(--shade), transparent);
  color: var(--ink-text); display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
}
.tile__label strong { font-family: var(--font-head); font-size: var(--fs-tile); font-weight: var(--fw-head); letter-spacing: var(--ls-head); line-height: 1.1; }
.tile__label > span { font-size: var(--fs-tiny); white-space: nowrap; }
.nb { white-space: nowrap; }
.tile:focus-visible { box-shadow: var(--focus-ring); }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .tile__label { flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.65rem 0.75rem; }
  .tile__label strong { font-size: var(--fs-lead); }
}

/* ---------- Steps ---------- */
.steps { display: grid; gap: var(--gap); counter-reset: step; }
.step { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; align-items: start; padding: 1.5rem; background: var(--paper); border: 1px solid var(--grey-2); border-radius: var(--radius-lg); }
.step__icon { width: 3.25rem; height: 3.25rem; border-radius: var(--radius); background: var(--ink); color: var(--gold); display: grid; place-items: center; position: relative; }
.step__icon svg { width: 1.6rem; height: 1.6rem; }
.step__num { font-family: var(--font-head); font-weight: 800; color: var(--muted); font-size: var(--fs-small); margin: 0 0 0.25rem; }
.step h3 { margin-bottom: 0.35rem; }
.step p { margin: 0; color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Feature band (commercial awnings): the photo hangs under a gold scalloped valance ---------- */
.feature__in { display: grid; gap: 2rem; align-items: center; }
.feature__media { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.feature__media img { width: 100%; aspect-ratio: var(--ratio-hero); object-fit: cover; }
.feature__media::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.25rem; z-index: 1;
  background: linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 0.6rem no-repeat,
    radial-gradient(circle at 50% 0, var(--gold) 0 0.55rem, transparent 0.6rem) 0 0.6rem / 1.25rem 0.65rem repeat-x;
}
.feature__copy p { color: var(--ink-muted); max-width: 46ch; }
.feature__copy .feature__eyebrow { margin: 0 0 0.75rem; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h4); letter-spacing: -0.01em; color: var(--gold); }
.feature h2 { font-size: var(--fs-h2-feature); margin-bottom: 0.75rem; }
.feature .btn { margin-top: 0.5rem; }
.feature__media--plain::before { content: none; }
@media (min-width: 900px) {
  .feature__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3.5rem; }
  .feature--flip .feature__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .feature--flip .feature__media { order: 2; }
}

/* ---------- Product cards ---------- */
.grid--cards { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .grid--cards { grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); } }
.card {
  position: relative; display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--grey-2); border-radius: var(--radius-lg); overflow: hidden;
}
.card:hover { border-color: var(--ink); }
.card[hidden] { display: none; }
.card__media { width: 100%; aspect-ratio: var(--ratio-card); object-fit: cover; background: var(--grey-1); }
.card__body { padding: 0.9rem 1rem 0.5rem; flex: 1; }
.card__cat { margin: 0 0 0.2rem; font-size: var(--fs-tiny); color: var(--muted); }
.card__name { font-size: var(--fs-card); margin: 0 0 0.35rem; }
.card__name a { text-decoration: none; }
/* the name link stretches over the whole card (image included); the quote rail sits above it so its button stays its own target */
.card__name a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__name a { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.card__rail { position: relative; z-index: 1; }
.card__spec { margin: 0; font-size: var(--fs-tiny); color: var(--muted); }
.card__rail {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.75rem 1rem 1rem; border-top: 1px dashed var(--grey-2);
}
.card__rail .price-tab { flex: none; }
.card__rail .btn { flex: 1 1 7.5rem; }
.price-tab {
  display: inline-flex; align-items: center; min-height: 1.9rem; padding: 0.15rem 0.6rem;
  background: var(--gold); color: var(--ink); border-radius: var(--radius);
  font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-md); letter-spacing: -0.01em; white-space: nowrap;
}
.price-tab--quote { background: var(--grey-1); color: var(--muted); border: 1px solid var(--grey-2); font-weight: 600; font-family: var(--font-body); font-size: var(--fs-small); }
@media (max-width: 480px) {
  .card__body { padding: 0.75rem 0.75rem 0.4rem; }
  .card__name { font-size: var(--fs-md); }
  .card__rail { flex-direction: column; align-items: stretch; padding: 0.6rem 0.75rem 0.75rem; }
  .card__rail .btn { flex: 0 0 auto; width: 100%; }
  .card__rail .price-tab { align-self: flex-start; }
}

/* ---------- Why ---------- */
.why { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.why li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.85rem; align-items: start; }
.why svg { width: 2.5rem; height: 2.5rem; color: var(--gold); }
.why strong { display: block; font-family: var(--font-head); font-size: var(--fs-lead); font-weight: var(--fw-head); letter-spacing: -0.015em; margin-bottom: 0.2rem; }
.why p { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); }

/* ---------- Google reviews ---------- */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.stars svg { width: 7.5rem; height: 1.5rem; fill: var(--gold); display: block; }
.stars .is-off { fill: var(--grey-2); }
.rating strong { color: var(--text); font-family: var(--font-head); font-size: var(--fs-lead); }
.reviews__more { margin: var(--space-block) 0 0; }
.quotes { display: grid; gap: var(--gap); }
@media (min-width: 720px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 1.3.0: three, five or six reviews sit three to a row on wide screens (four stay two by two). */
@media (min-width: 1000px) { .quotes:has(> .quote:nth-child(3)):not(:has(> .quote:nth-child(4):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote { margin: 0; padding: 1.75rem; border: 1px solid var(--grey-2); border-left: var(--accent-bar) solid var(--gold); border-radius: var(--radius-lg); background: var(--paper); }
.quote p { font-family: var(--font-head); font-size: var(--fs-quote); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 0.75rem; }
.quote footer { color: var(--muted); font-size: var(--fs-small); }

/* ---------- Visit ---------- */
.visit { display: grid; gap: var(--space-block); }
@media (min-width: 900px) { .visit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.visit address { font-style: normal; }
.visit .hours { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: var(--fs-small); max-width: 22rem; }
.visit .hours th, .visit .hours td { text-align: left; padding: 0.45rem 0; border-bottom: 1px solid var(--grey-2); font-weight: 500; }
.visit .hours td { text-align: right; }
.visit .hours .closed td { color: var(--muted); }
.visit__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.map {
  position: relative; min-height: 18rem; height: 100%; border-radius: var(--radius-lg); overflow: hidden;
  background:
    linear-gradient(var(--grey-2) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(90deg, var(--grey-2) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    var(--grey-1);
  border: 1px solid var(--grey-2);
  display: grid; place-items: center; text-align: center; padding: 2rem;
}
.map svg { width: 3rem; height: 3rem; color: var(--ink); }
.map strong { display: block; font-family: var(--font-head); font-size: var(--fs-emph); margin-top: 0.5rem; }
.map p { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--fs-small); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--ink-text); padding-block: var(--space-section) 2rem; font-size: var(--fs-small); }
.site-footer a { color: var(--ink-text); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; } }
.footer-grid h2 { font-size: var(--fs-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; margin-bottom: 0.75rem; color: var(--gold); }
.footer-grid li { margin-bottom: 0.45rem; }
.footer-grid address { font-style: normal; color: var(--ink-muted); line-height: 1.6; }
.footer-grid address a { color: var(--ink-text); }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-brand { grid-column: auto; } }
.footer-brand img { width: auto; height: var(--logo-footer-h); margin-bottom: 0.75rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: var(--ink-muted); font-size: var(--fs-tiny);
}
.footer-bottom p { margin: 0; }

/* ---------- Catalogue ---------- */
.catalogue { display: grid; gap: var(--space-block); padding-bottom: var(--space-section); }
@media (min-width: 900px) { .catalogue { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; } }
.filters { border: 1px solid var(--grey-2); border-radius: var(--radius-lg); background: var(--paper); }
.filters__head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1rem; border-bottom: 1px solid var(--grey-2); }
.filters__head h2 { font-size: var(--fs-h4); margin: 0; }
.filters__close { display: none; color: var(--text); }
.filters fieldset { border: 0; padding: 0.9rem 1rem; margin: 0; border-bottom: 1px solid var(--grey-1); }
.filters fieldset:last-of-type { border-bottom: 0; }
.filters legend { font-weight: 600; font-size: var(--fs-small); padding: 0; margin-bottom: 0.5rem; }
.filters label { display: flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; font-size: var(--fs-small); cursor: pointer; }
.filters input[type="checkbox"], .filters input[type="radio"] { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--ink); }
.filters__foot { padding: 0.9rem 1rem; border-top: 1px solid var(--grey-2); display: grid; gap: 0.5rem; }
.results__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: var(--gap); }
.results__bar .count { margin: 0; font-weight: 600; }
.results__bar .count span { font-family: var(--font-head); font-size: var(--fs-quote); font-weight: 800; }
.results__tools { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.results__tools label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: 600; }
.select { min-height: var(--control-h-sm); padding: 0.35rem 2rem 0.35rem 0.75rem; border: var(--border-control) solid var(--grey-2); border-radius: var(--radius); background: var(--paper); font-size: var(--fs-small); appearance: none; -webkit-appearance: none;
  background-image: var(--chevron); background-repeat: no-repeat; background-position: right 0.7rem center; }
.js-filters-toggle { display: none; }
.empty { padding: 3rem 1.5rem; text-align: center; border: 1px dashed var(--grey-2); border-radius: var(--radius-lg); }
.empty[hidden] { display: none; }
.empty h2 { font-size: var(--fs-h2-sm); }
.empty p { color: var(--muted); }
.pitch { display: grid; gap: 1rem; padding: 1.5rem; margin-bottom: var(--gap); background: var(--grey-1); border-left: var(--accent-bar) solid var(--gold); border-radius: var(--radius-lg); }
.pitch[hidden] { display: none; }
.pitch h2 { font-size: var(--fs-h2-panel); margin-bottom: 0.35rem; }
.pitch p { margin: 0; color: var(--muted); max-width: 60ch; font-size: var(--fs-small); }
.pitch__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (min-width: 720px) { .pitch { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .pitch__actions { flex-direction: column; align-items: stretch; } }
@media (max-width: 899px) {
  .js .filters { display: none; position: fixed; inset: 0; z-index: 70; overflow-y: auto; border: 0; border-radius: 0; padding-bottom: 5rem; }
  .js .filters.is-open { display: block; }
  .js .filters__close { display: inline-flex; }
  .js .js-filters-toggle { display: inline-flex; }
  body.filters-open { overflow: hidden; }
}

/* ---------- Product page ---------- */
.product { display: grid; gap: var(--space-block); padding-bottom: var(--space-section); }
@media (min-width: 900px) { .product { grid-template-columns: minmax(0, var(--split-main)) minmax(0, var(--split-aside)); gap: 3rem; align-items: start; } }
.product__head h1 { font-size: var(--fs-h1-page); margin-bottom: 0.4rem; }
.product__price { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.product__price .price-tab { font-size: var(--fs-lead); min-height: 2.25rem; padding-inline: 0.75rem; }
.product__price span { color: var(--muted); }
.product__price .ok { color: var(--ok); font-weight: 600; }
.gallery { margin: 0 0 1.5rem; }
.gallery__main { width: 100%; aspect-ratio: var(--ratio-card); object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--grey-2); background: var(--grey-1); }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.thumbs button { padding: 0; border: var(--border-strong) solid var(--grey-2); border-radius: var(--radius); background: var(--grey-1); overflow: hidden; }
.thumbs button img { aspect-ratio: var(--ratio-card); object-fit: cover; width: 100%; }
.thumbs button[aria-pressed="true"] { border-color: var(--gold); }
.thumbs button:hover { border-color: var(--ink); }
.spec { width: 100%; border-collapse: collapse; margin: 1rem 0 1.25rem; font-size: var(--fs-small); }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 0.55rem 0; border-bottom: 1px solid var(--grey-2); }
.spec th { width: 8.5rem; font-weight: 600; color: var(--muted); padding-right: 1rem; }
.note { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.85rem 1rem; background: var(--grey-1); border-radius: var(--radius); font-size: var(--fs-small); margin-bottom: 1.25rem; }
.note svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--ok); margin-top: 0.1rem; }
.trust { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: var(--fs-small); color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.trust svg { width: 1rem; height: 1rem; color: var(--ok); }

.quote-panel { border: 1px solid var(--grey-2); border-radius: var(--radius-lg); background: var(--paper); }
@media (min-width: 900px) { .quote-panel { position: sticky; top: calc(var(--header-h) + 1rem); } }
.quote-panel__head { padding: 1.25rem 1.25rem 0; }
.quote-panel__head h2 { font-size: var(--fs-h2-panel); margin-bottom: 0.25rem; }
.quote-panel__head p { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.quote-form { padding: 1.25rem; display: grid; gap: 0.9rem; }
.field { display: grid; gap: 0.35rem; }
.field label, .field > span { font-size: var(--fs-small); font-weight: 600; }
.field label small, .field > span small { font-weight: 400; color: var(--muted); }
.field input:not([type="checkbox"]):not([type="file"]), .field select, .field textarea {
  width: 100%; min-height: var(--control-h); padding: 0.55rem 0.8rem;
  border: var(--border-control) solid var(--grey-2); border-radius: var(--radius); background: var(--paper);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 2rem;
  background-image: var(--chevron); background-repeat: no-repeat; background-position: right 0.7rem center; }
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--ink); box-shadow: var(--focus-ring); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 480px) { .field--row { grid-template-columns: 1fr; } }
.field--size { display: grid; grid-template-columns: 1fr auto 1fr 5.5rem; align-items: end; gap: 0.5rem; }
.field--size .x { padding-bottom: 0.8rem; color: var(--muted); font-weight: 600; text-align: center; }
.field--size .field label { font-weight: 500; color: var(--muted); }
.drop {
  position: relative; display: grid; gap: 0.35rem; justify-items: center; text-align: center; padding: 1.25rem 1rem;
  border: var(--border-strong) dashed var(--grey-2); border-radius: var(--radius); background: var(--grey-1); font-size: var(--fs-small); color: var(--muted);
}
.drop.is-over { border-color: var(--gold); background: var(--paper); }
.drop svg { width: 1.75rem; height: 1.75rem; color: var(--ink); }
.drop strong { color: var(--text); }
.drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop input[type="file"]:focus-visible + .drop__hint { text-decoration: underline; }
.drop:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.drop__list { position: relative; z-index: 1; width: 100%; text-align: left; display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.drop__list:empty { display: none; }
.drop__list li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.6rem; background: var(--paper); border: 1px solid var(--grey-2); border-radius: var(--radius); color: var(--text); font-size: var(--fs-tiny); }
.drop__list li span:last-child { color: var(--muted); white-space: nowrap; }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-tiny); color: var(--muted); }
.consent input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--ink); flex: none; }
.quote-form .btn--gold { font-size: var(--fs-h4); }
.talk { margin: 0; text-align: center; font-size: var(--fs-small); color: var(--muted); }
.talk a { font-weight: 700; color: var(--text); text-decoration: none; }
.talk a:hover { text-decoration: underline; }

.sticky-quote {
  display: none; position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(1rem + var(--cookie-banner-h, 0px)); z-index: 40; /* sits above the cookie banner while it is open */
  box-shadow: var(--shadow-pop);
}
@media (max-width: 899px) { .sticky-quote { display: inline-flex; } .product__quote { scroll-margin-top: calc(var(--header-h) + 0.5rem); } }

/* ---------- Art work page ---------- */
.art-hero { background: var(--ink); color: var(--ink-text); padding-block: var(--space-band); margin-top: 1rem; }
.art-hero__in { display: grid; gap: 2rem; align-items: center; }
.art-hero h1 { font-size: var(--fs-h1-band); }
.art-hero .lead { color: var(--ink-muted); margin-bottom: 1.5rem; }
.art-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.art-hero__media { position: relative; margin: 0; }
.art-hero__media img { width: 100%; aspect-ratio: var(--ratio-card); object-fit: cover; border-radius: var(--radius-lg); }
.art-hero__media figcaption a { color: inherit; text-decoration: none; }
.art-hero__media figcaption a:hover { text-decoration: underline; }
.art-hero__media figcaption { position: absolute; left: 1rem; bottom: 1rem; background: var(--gold); color: var(--ink); font-size: var(--fs-tiny); font-weight: 600; padding: 0.35rem 0.6rem; border-radius: var(--radius); }
@media (min-width: 900px) { .art-hero__in { grid-template-columns: minmax(0, var(--split-main)) minmax(0, var(--split-aside)); gap: 3rem; } }
.product--art { padding-top: var(--space-block); }
.product--art h2 { font-size: var(--fs-h2-art); }
.help { display: grid; gap: 0.75rem; margin: 0 0 var(--space-block); }
.help li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: start; padding: 1.1rem 1.25rem; border: 1px solid var(--grey-2); border-radius: var(--radius-lg); scroll-margin-top: var(--scroll-offset); }
.help li:target { border-color: var(--gold); box-shadow: inset var(--accent-bar) 0 0 var(--gold); }
.help svg { width: 2.75rem; height: 2.75rem; padding: 0.55rem; background: var(--ink); color: var(--gold); border-radius: var(--radius); }
.help h3 { margin-bottom: 0.2rem; }
.help p { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.help p a { color: var(--text); font-weight: 600; }
.how { margin-bottom: 1.25rem; }
.how p { max-width: 62ch; color: var(--muted); }
.how strong { color: var(--text); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 100;
  max-width: min(92vw, 30rem); padding: 0.85rem 1.1rem; background: var(--ink); color: var(--ink-text);
  border-left: var(--accent-bar) solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: var(--fs-small);
}
.toast[hidden] { display: none; }

/* ---------- Motion (1.3.0) ----------
   Menus and panels fade and slide in and out. Opening starts from @starting-style; closing keeps the
   element shown until the fade ends (display … allow-discrete). Browsers without these features just
   open and close instantly. */
.btn, .chip, .icon-btn, .card, .nav > li > a, .suggest a, .linklike { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
@media (min-width: 900px) {
  .mega { opacity: 0; translate: 0 -0.5rem; pointer-events: none; transition: opacity 0.2s ease, translate 0.2s ease, display 0.2s allow-discrete; }
  .js .has-mega.is-open .mega, html:not(.js) .has-mega:hover .mega, html:not(.js) .has-mega:focus-within .mega { opacity: 1; translate: 0 0; pointer-events: auto; }
  @starting-style {
    .js .has-mega.is-open .mega, html:not(.js) .has-mega:hover .mega, html:not(.js) .has-mega:focus-within .mega { opacity: 0; translate: 0 -0.5rem; }
  }
}
@media (max-width: 899px) {
  .js .bar--nav { opacity: 0; translate: 0 -0.75rem; pointer-events: none; transition: opacity 0.22s ease, translate 0.22s ease, display 0.22s allow-discrete; }
  .js .bar--nav.is-open { opacity: 1; translate: 0 0; pointer-events: auto; }
  /* Products accordion: fades in; closes at once (a fading close would hold its height, then jump). */
  .js .has-mega.is-open .mega { opacity: 1; translate: 0 0; transition: opacity 0.2s ease, translate 0.2s ease; }
  .js .filters { opacity: 0; translate: 0 1.5rem; pointer-events: none; transition: opacity 0.25s ease, translate 0.25s ease, display 0.25s allow-discrete; }
  .js .filters.is-open { opacity: 1; translate: 0 0; pointer-events: auto; }
  @starting-style {
    .js .bar--nav.is-open { opacity: 0; translate: 0 -0.75rem; }
    .js .has-mega.is-open .mega { opacity: 0; translate: 0 -0.35rem; }
    .js .filters.is-open { opacity: 0; translate: 0 1.5rem; }
  }
}
.mobile-search { opacity: 0; translate: 0 -0.5rem; pointer-events: none; transition: opacity 0.2s ease, translate 0.2s ease, display 0.2s allow-discrete; }
.site-header.search-open .mobile-search { opacity: 1; translate: 0 0; pointer-events: auto; }
/* Suggestions: open only (closing empties the list first, so it just goes). */
.suggest:not([hidden]) { transition: opacity 0.15s ease, translate 0.15s ease; }
.toast, .cookie-banner { transition: opacity 0.25s ease, translate 0.25s ease, display 0.25s allow-discrete; }
.toast[hidden], .cookie-banner[hidden] { opacity: 0; translate: 0 1rem; pointer-events: none; }
@starting-style {
  .site-header.search-open .mobile-search { opacity: 0; translate: 0 -0.5rem; }
  .suggest:not([hidden]) { opacity: 0; translate: 0 -0.35rem; }
  .toast:not([hidden]), .cookie-banner:not([hidden]) { opacity: 0; translate: 0 1rem; }
}
/* Catalogue: cards rise in as filters show them; product gallery: the big photo fades on change. */
#results > .card:not([hidden]) { animation: masp-rise 0.3s ease both; }
.gallery__main.is-swap { animation: masp-fade 0.3s ease; }
@keyframes masp-rise { from { opacity: 0; translate: 0 0.75rem; } to { opacity: 1; translate: 0 0; } }
@keyframes masp-fade { from { opacity: 0; } to { opacity: 1; } }
/* Pages: a short crossfade between pages of this website (opted in by MASP_Front::page_transitions()). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Forced colours (Windows High Contrast): box-shadow focus rings are not drawn there (R8) ---------- */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; }
}

.section--flush { padding-top: 0; }
.drop__rm { border: 0; background: transparent; color: var(--muted); font-size: var(--fs-md); line-height: 1; padding: 0 0.25rem; min-width: 1.5rem; }
.drop__rm:hover { color: var(--text); }
.field [aria-invalid="true"] { border-color: var(--error) !important; }
.results[hidden] { display: none; }
/* Quote form outcome line (live form: sending / sent / not sent) */
.quote-form__status { margin: 0.75rem 0 0; font-size: var(--fs-small); color: var(--muted); }
.quote-form__status[hidden] { display: none; }
.quote-form__status.is-ok { color: var(--ok); }
.quote-form__status.is-error { color: var(--error); }
/* Map modes (1.3.2): the picture from this website shows at once; the live map (OpenStreetMap, or
   Google after consent) fades in over it once it has loaded. The picture is drawn at its own size
   (street names as on the live map), centred on the pin, and only grows when the card is bigger. */
.map--live { padding: 0; }
.map--card { padding: 2rem; }
.map--card.map--consent { place-items: start center; } /* The address card above the Google notice bar. */
.map__picture { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: var(--radius-lg); }
.map__picture img { position: absolute; left: 50%; top: 50%; width: max(100%, 768px); height: max(100%, 512px); max-width: none; object-fit: cover; translate: -50% -50%; filter: saturate(0.85) contrast(1.02); }
.map--consent .map__picture img { translate: -50% calc(-50% - 3rem); } /* site.js fine-tunes it to the bar */
.map__picture:focus-visible { box-shadow: inset var(--focus-ring); border-radius: var(--radius-lg); }
.map__credit { position: absolute; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 0.1rem 0.45rem; font-size: var(--fs-tiny); line-height: 1.5; background: var(--paper); border-top-left-radius: var(--radius); }
.map__credit a { color: var(--muted); }
.map__note { font-size: var(--fs-tiny); }
.map--live iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.4s ease; }
.map--live.is-live iframe { opacity: 1; }
.map.is-live .map__credit { display: none; }
.map__consent { font-size: var(--fs-tiny); }
.map__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 0.75rem; }
.map__open { font-size: var(--fs-small); color: var(--text); }
.map__bar { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 1.5rem; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1rem; padding: 0.5rem 0.75rem; background: var(--paper); border: 1px solid var(--grey-2); border-radius: var(--radius); box-shadow: var(--shadow-pop); text-align: center; }
.map__bar .map__consent { margin: 0; color: var(--muted); flex: 1 1 14rem; }
.map__bar .map__actions { margin-top: 0; }
/* Other pages: page not found, search results, plain page content */
.page-404__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search-results { display: grid; gap: 0.5rem; font-size: var(--fs-lead); }
.page-content__body { max-width: var(--measure); }

/* ---------- Legal: footer small print, cookie banner, quote-form privacy line (1.2.0) ---------- */
.footer-legal a, .footer-legal .linklike { color: var(--ink-muted); }
.footer-legal a:hover, .footer-legal .linklike:hover { color: var(--ink-text); }
.footer-company { flex-basis: 100%; }
.linklike { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.cookie-banner {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); z-index: 90;
  max-width: 44rem; margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center;
  background: var(--ink); color: var(--ink-text); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  font-size: var(--fs-small);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; flex: 1 1 18rem; }
.cookie-banner a { color: var(--gold); }
.cookie-banner__actions { display: flex; gap: 0.5rem; }
.cookie-banner .btn--ghost { color: var(--ink-text); border-color: var(--ink-text); }
.quote-form__privacy { margin: 0.25rem 0 0; font-size: var(--fs-tiny); color: var(--muted); }
/* Long text pages (privacy, cookies, any WordPress page): readable headings, bulleted lists. */
.page-content__body { max-width: 46rem; }
.page-content__body h2 { font-size: var(--fs-h2-panel); margin: 2em 0 0.5em; }
.page-content__body ul, .page-content__body ol { margin: 0 0 1em; padding-left: 1.25rem; }
.page-content__body li { list-style: disc; margin: 0 0 0.4em; }
.page-content__body ol li { list-style: decimal; }
.page-content__body a { color: inherit; }
.page-content__body code { font-size: var(--fs-small); }