/* =====================================================================
   site.css - MVS Valves (P4, v2 "modern"), on top of the trimmed Bootstrap
   (assets/css/bootstrap-site.css).

   Deep navy and white with the logo red; rounded cards with soft depth; the
   factory video full width under a transparent header; an engineering grid
   behind the dark sections. Plus Jakarta Sans throughout.

   Class names (mvs-*) are written in the page files at the site root and in
   includes/ (header, footer, cards, partials). Sections carry mvs-sec--{kind}
   (hero, intro, facts, categories, range, features, clients, contact, plain).
   ===================================================================== */

@font-face {
  font-family: "Jakarta";
  src: url("../fonts/jakarta/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --surface: #f5f7fa;
  --surface-2: #eaeff5;
  --plate: linear-gradient(160deg, #f8fafc 0%, #e8edf3 100%);
  --ink: #0b1424;
  --navy: #0f1d33;
  --text: #1f2a37;
  --muted: #5b6676;
  --line: #e3e8ef;
  --accent: #e31e24;
  --accent-ink: #d0161c;
  --accent-hover: #ae1117;
  --accent-soft: #fdecec;
  --accent-on-dark: #ff6b70;
  --on-dark: #ffffff;
  --on-dark-muted: #a9b6c6;
  --dark-line: rgb(255 255 255 / 10%);
  --font: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --radius: var(--r-sm);
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 5%), 0 2px 8px -2px rgb(16 24 40 / 8%);
  --shadow: 0 2px 4px rgb(16 24 40 / 4%), 0 18px 40px -16px rgb(16 24 40 / 22%);
  --shadow-lg: 0 40px 80px -24px rgb(11 20 36 / 40%);
  --glow: radial-gradient(720px 420px at 85% 0%, rgb(227 30 36 / 22%), transparent 70%);
  --grid: linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  --sec-pad: clamp(4rem, 8vw, 7rem);
  --topbar-h: 2.25rem;      /* measured by site.js */
  --bar-h: 4.75rem;
  --header-h: 7rem;         /* measured by site.js */
  --pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");

  --bs-body-font-family: var(--font);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--line);
  --bs-link-color-rgb: 208, 22, 28;
  --bs-link-hover-color-rgb: 174, 17, 23;
}
@media (max-width: 991.98px) { :root { --header-h: 7.5rem; } }

/* ---------------------------------------------------------------- base */
/* wide gutters only where the container leaves room for their negative margins (a wider row
   than the screen would let phones zoom the whole page out) */
@media (min-width: 1200px) {
  :is(.mvs--home, .mvs--page) .mvs-sec--intro .row,
  .mvs--page .mvs-sec--contact .row { --bs-gutter-x: 4rem; }
  .mvs--product main > .mvs-sec:nth-child(2) .row,
  .mvs--post main > .mvs-sec:nth-child(2) .row { --bs-gutter-x: 3.5rem; }
}
html, body { overflow-x: clip; }
body { font-family: var(--font); font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 800; color: var(--ink); letter-spacing: -.022em; }
a { color: var(--accent-ink); text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
.mvs-ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.mvs-skip { position: absolute; z-index: 1100; padding: .5rem 1rem; background: #fff; }

/* ================================================================ the UI system (approved 27 Oct 2026)
   Three kinds of button - nothing else on the site looks like a button:
     primary    .btn.btn-primary   the main action of a section (red pill, white disc with an arrow)
     secondary  .btn.mvs-btn-sec   the choice beside it (white pill, dark disc; glass on dark grounds)
     tertiary   .mvs-link          a text link in cards and lists (text, small red disc)
   Sizes: .btn-lg (hero), default (sections), .btn-sm (cards). The disc turns on hover.
   One section label (a short red line, then the label in spaced capitals) and one heading style
   (bold, not heavy; the last words of the big headings in solid red - .mvs-accent, set by
   accent_heading()). Both chosen 28 Oct 2026, after the glow badge + gradient words.
   Dark grounds set the custom properties below, so the parts follow them without extra classes. */
:root {
  --arrow-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0161c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  --ico-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E");
  --arrow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1424' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --arrow-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a8e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  /* light grounds */
  --sec-bg: #fff; --sec-fg: var(--ink); --sec-border: var(--line); --sec-disc: var(--ink); --sec-arrow: var(--arrow-white);
  --sec-bg-h: #fff; --sec-border-h: var(--ink);
  --lnk-fg: var(--ink); --lnk-fg-h: var(--accent-ink); --lnk-disc: var(--accent-soft); --lnk-arrow: var(--arrow-red);
  --lab-fg: #4b5563; --lab-line: linear-gradient(90deg, var(--accent), rgb(227 30 36 / 15%));
  --acc-fg: var(--accent);
}
/* dark grounds */
:is(.mvs-hero, .mvs-pagehead, .mvs--product main > .mvs-sec:first-child, .mvs--post main > .mvs-sec:first-child,
    .mvs--location main > .mvs-sec:first-child,
    :is(.mvs--home, .mvs--page) .mvs-sec--features,
    .mvs-footer, .mvs-drawer, .mvs-mega__photo, .mvs-mega__help, .mvs-export) {
  --sec-bg: rgb(255 255 255 / 8%); --sec-fg: #fff; --sec-border: rgb(255 255 255 / 22%); --sec-disc: #fff; --sec-arrow: var(--arrow-ink);
  --sec-bg-h: rgb(255 255 255 / 14%); --sec-border-h: rgb(255 255 255 / 55%);
  --lnk-fg: #fff; --lnk-fg-h: #ff8a8e; --lnk-disc: rgb(227 30 36 / 24%); --lnk-arrow: var(--arrow-pink);
  --lab-fg: #c9d4e2; --lab-line: linear-gradient(90deg, #ff4148, rgb(255 65 72 / 25%));
  --acc-fg: var(--accent-on-dark);
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: .375rem .375rem .375rem 1.25rem; border-radius: 999px; border: 1.5px solid transparent;
  font-size: .9375rem; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s; }
.btn::after { content: ""; flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--btn-arrow) center / 42% no-repeat, var(--btn-disc); transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.btn:hover::after, .btn:focus-visible::after { transform: rotate(45deg); }
.btn-lg { gap: .9rem; padding: .4375rem .4375rem .4375rem 1.5rem; font-size: 1rem; }
.btn-lg::after { width: 2.5rem; height: 2.5rem; }
.btn-sm { gap: .6rem; padding: .25rem .25rem .25rem .875rem; font-size: .8125rem; }
.btn-sm::after { width: 1.625rem; height: 1.625rem; }
.btn-primary { --btn-disc: #fff; --btn-arrow: var(--arrow-red); background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; box-shadow: 0 10px 22px -10px rgb(208 22 28 / 70%); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary:active { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; transform: translateY(1px); }
.mvs-btn-sec { --btn-disc: var(--sec-disc); --btn-arrow: var(--sec-arrow); background: var(--sec-bg); border-color: var(--sec-border); color: var(--sec-fg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mvs-btn-sec:hover, .mvs-btn-sec:focus-visible { background: var(--sec-bg-h); border-color: var(--sec-border-h); color: var(--sec-fg); }
.mvs-btn-sec:hover::after { background-color: var(--accent-ink); background-image: var(--arrow-white); }
/* call and WhatsApp: tinted with their own colour, their own sign on it in place of the arrow,
   which stays still; on hover the tint deepens and the border takes the colour */
.mvs-btn--call { --btn-disc: #1f6feb; --btn-arrow: var(--ico-phone); background: #eef4ff; border-color: #cddcfb; color: #0d3b8c; }
.mvs-btn--wa { --btn-disc: #1fb855; --btn-arrow: var(--ico-wa); background: #eafaf0; border-color: #c2ecd2; color: #0b5a2b; }
:is(.mvs-btn--call, .mvs-btn--wa)::after { background-size: 50%; }
:is(.mvs-btn--call, .mvs-btn--wa):is(:hover, :focus-visible)::after { transform: none; background-color: var(--btn-disc); background-image: var(--btn-arrow); }
.mvs-btn--call:is(:hover, :focus-visible) { background: #e1ebff; border-color: var(--btn-disc); color: #0d3b8c; }
.mvs-btn--wa:is(:hover, :focus-visible) { background: #d9f5e3; border-color: var(--btn-disc); color: #0b5a2b; }
/* LinkedIn (the author box), the same way in its blue */
.mvs-btn--in { --btn-disc: #0a66c2; --btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Cpath d='M2 9h4v12H2z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
  background: #eaf2fb; border-color: #c7dcf3; color: #0a3d75; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mvs-btn--in::after { background-size: 46%; }
.mvs-btn--in:is(:hover, :focus-visible) { background: #dce9f8; border-color: var(--btn-disc); color: #0a3d75; }
.mvs-btn--in:is(:hover, :focus-visible)::after { transform: none; background-color: var(--btn-disc); background-image: var(--btn-arrow); }
.mvs-btn { margin: .25rem .25rem .25rem 0; }

/* tertiary: a text link with a small disc */
.mvs-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--lnk-fg); font-size: .875rem; font-weight: 700; line-height: 1.3; text-decoration: none; transition: color .2s; }
.mvs-link::after { content: ""; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--lnk-arrow) center / 52% no-repeat, var(--lnk-disc); transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.mvs-link:hover, .mvs-link:focus-visible { color: var(--lnk-fg-h); }
.mvs-link:hover::after, .mvs-link:focus-visible::after { transform: rotate(45deg); background-color: var(--accent-ink); background-image: var(--arrow-white); }

/* section labels: a short red line fading out, then the label in spaced capitals */
.mvs-sechead .mvs-h--h5, .mvs-sechead .mvs-h--h6, .mvs-hero__subtitle, .mvs-faq__eyebrow, .mvs-posts__label, .mvs-footer__label, .mvs-clients__label, .mvs-related__title, .mvs-process__label, .mvs-note__label {
  display: inline-flex; align-items: flex-start; gap: .75rem; margin: 0 0 1.1rem; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--lab-fg); font-family: var(--font); font-size: .75rem; font-weight: 700; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; }
:is(.mvs-sechead .mvs-h--h5, .mvs-sechead .mvs-h--h6, .mvs-hero__subtitle, .mvs-faq__eyebrow, .mvs-posts__label, .mvs-footer__label, .mvs-clients__label, .mvs-related__title, .mvs-process__label, .mvs-note__label)::before {
  content: ""; flex: none; width: 2.375rem; height: 1.5px; margin-top: calc(.6em - .75px); border-radius: 2px; background: var(--lab-line); transform: none; }  /* on the first line when a label wraps */

/* headings: four steps, bold but not heavy; the last words of the big ones in solid red */
.mvs-hero__title { font-size: clamp(2.6rem, 5.4vw, 3.75rem); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; }
.mvs-pagehead__title, .mvs-h--h1 { font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; }
.mvs-sechead .mvs-h--h2, .mvs-sechead .mvs-h--h3, .mvs-h--h2, .mvs-h--h3, .mvs-faq__title, .mvs-404 h2 {
  font-size: clamp(1.85rem, 3.1vw, 2.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
/* a little air under the big headings, where the red bar used to be */
:is(.mvs-sechead .mvs-h--h2, .mvs-sechead .mvs-h--h3, .mvs-h--h2, .mvs-h--h3, .mvs-faq__title, .mvs-404 h2, .mvs-pagehead__title, .mvs-h--h1) { padding-bottom: .625rem; }
.mvs-h--sub, .mvs-product__tables .mvs-h--h4 { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.mvs-accent { color: var(--acc-fg); }

/* ---------------------------------------------------------------- header
   Fixed over every page: an announcement strip, then a floating glass bar (the "island").
   Scrolling slides the strip away; scrolling down hides the bar, scrolling up brings it back
   (site.js). The header itself lets clicks through around the island. */
.mvs-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; color: #fff; pointer-events: none; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.mvs-header > * { pointer-events: auto; }
.mvs-header.is-scrolled { transform: translateY(calc(-1 * var(--topbar-h))); }
.mvs-header.is-hidden { transform: translateY(calc(-100% - 12px)); }
html { scroll-padding-top: calc(var(--bar-h) + 2rem); }

/* the strip, the bar and the panels share one width, a little wider than the page */
.mvs-wide { width: min(100% - 2rem, 1480px); margin-inline: auto; }

/* announcement strip */
.mvs-topbar { background: var(--ink); color: var(--on-dark-muted); font-size: .8125rem; border-bottom: 1px solid var(--dark-line); }
.mvs-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: .25rem 2rem; min-height: 2.4rem; padding-block: .3rem; }
.mvs-topbar__text { display: flex; align-items: center; gap: .75rem; min-width: 0; margin: 0; }
.mvs-topbar__tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvs-topbar__right { display: flex; flex: none; align-items: center; gap: 1.5rem; }
.mvs-topbar__right a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.mvs-topbar__right .mvs-ico { width: 15px; height: 15px; color: #ff8a8e; }
.mvs-topbar a { color: var(--on-dark-muted); text-decoration: none; transition: color .15s; }
.mvs-topbar a:hover { color: #fff; }
@media (max-width: 991.98px) {
  .mvs-topbar__right { display: none; }
  .mvs-topbar__tag { white-space: normal; font-size: .75rem; line-height: 1.35; }
}
@media (max-width: 767.98px) { .mvs-topbar { display: none; } }   /* phones: no announcement strip (Krunal) */

/* the island: logo | menu (centred) | actions */
.mvs-bar { position: relative; padding-top: .65rem; pointer-events: none; }
.mvs-bar__inner { position: relative; display: flex; align-items: center; gap: 1rem; min-height: var(--bar-h); padding: 0 .6rem 0 1.1rem; border-radius: 22px; pointer-events: auto;
  background: rgb(11 20 36 / 94%); border: 1px solid rgb(255 255 255 / 12%); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / 60%), inset 0 1px 0 rgb(255 255 255 / 8%); transition: min-height .35s, background-color .35s, border-color .35s, box-shadow .35s; }
@media (max-width: 575.98px) { .mvs-bar__inner { width: calc(100% - 1.25rem); padding-left: .85rem; } }
.mvs-header.is-scrolled .mvs-bar__inner { min-height: 4.1rem; background: rgb(11 20 36 / 88%); }
/* until the page scrolls, the header is see-through over pages that open dark (home video, title
   bands); pages that open white keep the solid bar */
html:not(.mega-open) body:is(.mvs--home, .mvs--product, .mvs--post, .mvs--location, :has(> main > .mvs-pagehead:first-child)) .mvs-header:not(.is-scrolled) .mvs-bar__inner {
  min-height: 5.75rem; background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body:is(.mvs--home, .mvs--product, .mvs--post, .mvs--location, :has(> main > .mvs-pagehead:first-child)) .mvs-header:not(.is-scrolled) .mvs-topbar { background: transparent; }
.mvs-logo { flex: none; }
.mvs-logo img { display: block; height: 64px; width: auto; transition: height .35s; }
.mvs-header.is-scrolled .mvs-logo img { height: 46px; }
@media (max-width: 991.98px) {
  .mvs-logo img { height: 54px; }
  .mvs-header.is-scrolled .mvs-logo img { height: 44px; }
}

/* the menu: centred, with a red line that slides under the item being pointed at; the other
   items dim while one is pointed at */
.mvs-nav { position: relative; display: none; flex: 1; justify-content: center; min-width: 0; }
.mvs-nav__glide { position: absolute; left: 0; bottom: 4px; width: 0; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px 1px rgb(227 30 36 / 75%); opacity: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), width .4s cubic-bezier(.2, .7, .2, 1), opacity .2s; }
.mvs-nav__glide.is-on { opacity: 1; }
.mvs-nav__list { position: relative; display: flex; align-items: center; gap: .35rem; margin: 0; }
.mvs-nav__item { position: relative; display: flex; align-items: center; transition: opacity .2s; }
.mvs-nav__list:hover > .mvs-nav__item:not(:hover):not(.is-open) { opacity: .62; }
.mvs-nav__link { display: flex; align-items: center; gap: .3rem; padding: .7rem .1rem .7rem .7rem; color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; }
.mvs-nav__link:hover { color: #fff; }
html:not(.js) .mvs-nav__item:hover .mvs-nav__link { text-decoration: underline 2px var(--accent); text-underline-offset: .5em; }
.mvs-nav__btn { padding-right: .7rem; background: none; border: 0; }
.mvs-nav__btn .mvs-ico { width: 16px; height: 16px; color: var(--on-dark-muted); transition: transform .25s; }
.mvs-nav__item.is-open .mvs-nav__btn .mvs-ico { transform: rotate(180deg); color: #fff; }
.mvs-nav__toggle { display: grid; place-items: center; width: 26px; height: 30px; margin-right: .2rem; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--on-dark-muted); }
.mvs-nav__toggle .mvs-ico { width: 16px; height: 16px; transition: transform .25s; }
.mvs-nav__item.is-open .mvs-nav__toggle { color: #fff; }
.mvs-nav__item.is-open .mvs-nav__toggle .mvs-ico { transform: rotate(180deg); }
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .mvs-nav__link { font-size: .9375rem; padding-left: .55rem; }
  .mvs-nav__list { gap: .15rem; }
}

/* "Company": a short list under its menu item, with the same caret as the product menus. Centred
   by margin, not transform, which the opening animation uses. */
.mvs-drop { position: absolute; top: calc(100% + 1.1rem); left: 50%; z-index: 5; display: none; width: 236px; margin-left: -118px; padding: .45rem; border-radius: 20px; background: #fff; color: var(--text); box-shadow: 0 40px 80px -24px rgb(6 12 22 / 55%), 0 0 0 1px rgb(16 24 40 / 6%); }
.mvs-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.2rem; }   /* keeps the pointer inside on the way down */
.mvs-drop > .mvs-mega__caret { left: 50%; }
.mvs-nav__item.is-open > .mvs-drop, html:not(.js) .mvs-nav__item:hover > .mvs-drop, .mvs-nav__item.has-drop:focus-within > .mvs-drop { display: block; animation: mvs-drop .22s cubic-bezier(.2, .7, .2, 1); }
.mvs-drop ul { margin: 0; }
.mvs-drop__item { display: flex; align-items: center; gap: .75rem; padding: .45rem .6rem .45rem .45rem; border-radius: 14px; color: var(--ink); font-size: .9375rem; font-weight: 700; text-decoration: none; transition: background-color .15s, color .15s; }
.mvs-drop__item:hover { background: var(--surface); color: var(--accent-ink); }
.mvs-drop__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); transition: background-color .15s, color .15s; }
.mvs-drop__item:hover .mvs-drop__ico { background: var(--accent-ink); color: #fff; }
.mvs-drop__ico .mvs-ico { width: 18px; height: 18px; }
.mvs-drop__text { flex: 1; }
.mvs-drop__item > .mvs-ico { width: 14px; height: 14px; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.mvs-drop__item:hover > .mvs-ico { opacity: 1; transform: none; }

/* search, phone, quotation, menu */
.mvs-bar__actions { display: flex; flex: none; align-items: center; gap: .55rem; margin-left: auto; }
.mvs-bar__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 12%); color: #fff; transition: background-color .15s, border-color .15s; }
.mvs-bar__icon:hover { background: rgb(255 255 255 / 16%); color: #fff; }
.mvs-bar__call:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.mvs-bar__icon .mvs-ico { width: 19px; height: 19px; }
.mvs-bar__quote { position: relative; display: none; overflow: hidden; }
.mvs-bar__quote::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / 38%), transparent); transform: skewX(-20deg); animation: mvs-shine 5s ease-in-out infinite; }
@keyframes mvs-shine { 0%, 72% { left: -60%; } 100% { left: 130%; } }
@media (min-width: 576px) { .mvs-bar__quote { display: inline-flex; } }
@media (min-width: 1280px) {
  .mvs-nav { display: flex; }
  .mvs-nav + .mvs-bar__actions { margin-left: 0; }   /* the centred menu takes the free space */
  .mvs-burger { display: none; }
}
@media (min-width: 1280px) and (max-width: 1439.98px) { .mvs-bar__call { display: none; } }

/* product menus: each item has its own panel under it, with a caret pointing at the item -
   a header row (category, count, "View all"), the products as a compact two-column list, a dark
   help strip, and a photo of the products in service with "Explore all". Closed it is
   display:none, so its pictures load only when it first opens; site.js keeps it inside the
   window and places the caret. Corners follow the bar: the panel as round as the island, the
   photo and strip inside it concentric. */
.mvs-mega { position: absolute; top: calc(100% + 1.1rem); left: 0; z-index: 5; display: none; color: var(--text); }
.mvs-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.2rem; }   /* keeps the pointer inside on the way down */
.mvs-nav__item.is-open > .mvs-mega, html:not(.js) .mvs-nav__item:hover > .mvs-mega { display: block; animation: mvs-drop .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes mvs-drop { from { opacity: 0; transform: translateY(-10px); } }
.mvs-mega__caret { position: absolute; top: -6px; left: var(--caret-x, 60px); z-index: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 3px 0 0 0; background: var(--accent); transform: rotate(45deg); clip-path: polygon(0 0, 100% 0, 0 100%); }   /* only its upper half: a tip above the panel */
.mvs-mega__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: .75rem; width: min(1060px, calc(100vw - 2rem)); padding: .5rem; border-radius: 22px; overflow: hidden;
  background: radial-gradient(520px 280px at 0% 0%, rgb(227 30 36 / 7%), transparent 70%), #fff;
  box-shadow: 0 50px 90px -30px rgb(6 12 22 / 60%), 0 0 0 1px rgb(16 24 40 / 6%); }
.mvs-mega__inner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, rgb(227 30 36 / 35%) 45%, transparent 75%); }
.mvs-mega__inner.is-plain { grid-template-columns: minmax(0, 1fr); width: min(760px, calc(100vw - 2rem)); }
.mvs-mega__body { position: relative; display: flex; flex-direction: column; gap: .85rem; padding: .85rem .35rem .35rem .65rem; }
/* a faint dot grid behind the list, fading out */
.mvs-mega__body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgb(16 24 40 / 9%) 1px, transparent 1.2px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 60%); mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 60%); }

/* header row */
.mvs-mega__head { display: flex; align-items: center; gap: .85rem; padding: 0 .35rem .85rem; border-bottom: 1px solid var(--line); }
.mvs-mega__head-pic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -10px rgb(16 24 40 / 35%); }
.mvs-mega__head-img { width: 40px; height: 40px; object-fit: contain; }
.mvs-mega__title { margin: 0; color: var(--ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.mvs-mega__all { margin-left: auto; white-space: nowrap; }

/* the products: two columns, hairlines between rows and columns; items rise in one after another */
.mvs-mega__list { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 0; }
.mvs-mega__list::before { content: ""; position: absolute; top: .35rem; bottom: .35rem; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent); }
.mvs-mega__list > li { padding-block: .2rem; }
.mvs-mega__list > li + li + li { border-top: 1px solid; border-image: linear-gradient(90deg, transparent, var(--line) 10%, var(--line) 90%, transparent) 1; }
.mvs-nav__item.is-open .mvs-mega__list > li { animation: mvs-rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms + 60ms); }
@keyframes mvs-rise { from { opacity: 0; transform: translateY(10px); } }
.mvs-mega__item { position: relative; display: flex; align-items: center; gap: .8rem; padding: .42rem .55rem .42rem .7rem; border-radius: 12px; color: var(--ink); font-size: .875rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color .2s, color .2s; }
.mvs-mega__item::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 3px; background: var(--accent); transform: translateY(-50%); transition: height .25s cubic-bezier(.2, .7, .2, 1); }
.mvs-mega__item:hover { background: linear-gradient(90deg, var(--surface), rgb(245 247 250 / 0%)); color: var(--accent-ink); }
.mvs-mega__item:hover::before { height: 60%; }
.mvs-mega__item-pic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgb(16 24 40 / 35%); transition: transform .25s, box-shadow .25s; }
.mvs-mega__item:hover .mvs-mega__item-pic { transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(227 30 36 / 30%), 0 10px 18px -8px rgb(227 30 36 / 45%); }
.mvs-mega__item-img { width: 34px; height: 34px; object-fit: contain; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.mvs-mega__item:hover .mvs-mega__item-img { transform: scale(1.12) rotate(-4deg); }
.mvs-mega__item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* one line each */
.mvs-mega__item > .mvs-ico { width: 14px; height: 14px; margin-left: auto; flex: none; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.mvs-mega__item:hover > .mvs-ico { opacity: 1; transform: none; }

/* help strip */
/* help strip: one link to the quotation form */
.mvs-mega__help { display: flex; align-items: center; gap: .8rem; margin-top: auto; padding: .55rem 1rem .55rem .55rem; border-radius: 14px; color: var(--on-dark-muted); font-size: .875rem; text-decoration: none;
  background-color: var(--navy); background-image: radial-gradient(360px 120px at 100% 0%, rgb(227 30 36 / 28%), transparent 70%), var(--grid); background-size: auto, 28px 28px, 28px 28px; }
.mvs-mega__help:hover { color: #fff; }
.mvs-mega__help-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #ef3a40 0%, #a3121a 100%); box-shadow: 0 10px 20px -10px rgb(227 30 36 / 70%); }
.mvs-mega__help-ico .mvs-ico { width: 18px; height: 18px; }
.mvs-mega__help-text { flex: 1; min-width: 0; }
.mvs-mega__help-text strong { color: #fff; font-weight: 700; }
.mvs-mega__help > .mvs-ico { width: 16px; height: 16px; color: #fff; transition: transform .2s; }
.mvs-mega__help:hover > .mvs-ico { transform: translate(2px, -2px); }

/* the photo of the products in service */
.mvs-mega__photo { position: relative; display: block; min-height: 300px; border-radius: 14px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: var(--navy); }
.mvs-mega__photo::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(8 15 28 / 10%) 0%, rgb(8 15 28 / 0%) 30%, rgb(8 15 28 / 90%) 100%); }
.mvs-mega .mvs-mega__photo-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.mvs-nav__item.is-open .mvs-mega__photo-img { animation: mvs-settle 1.4s cubic-bezier(.2, .7, .2, 1); }
@keyframes mvs-settle { from { transform: scale(1.1); } }
.mvs-mega__photo[data-crop="top"] .mvs-mega__photo-img { top: auto; bottom: 0; height: 135%; object-position: center bottom; }   /* the printed title stays above the frame */
.mvs-mega__photo[data-crop="tall"] .mvs-mega__photo-img { object-position: center 22%; }   /* a portrait photo made for the menu: the top (a handwheel) kept, its dark foot under the text */
.mvs-mega__photo:hover .mvs-mega__photo-img { transform: scale(1.06); }
.mvs-mega__photo-text { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.05rem; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.mvs-mega__photo-text strong { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.mvs-mega__photo:hover .mvs-mega__explore { background: var(--accent-hover); border-color: var(--accent-hover); }
.mvs-mega__photo:hover .mvs-mega__explore::after { transform: rotate(45deg); }
/* the page behind an open menu is dimmed */
.mvs-scrim { position: fixed; inset: 0; z-index: 1025; background: rgb(6 12 22 / 42%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility 0s linear .25s; }
html.mega-open .mvs-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* search: a palette over the page */
.mvs-search { width: min(680px, 94vw); max-width: none; max-height: min(640px, 80vh); margin: 11vh auto auto; padding: 0; border: 0; border-radius: 24px; background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; color: var(--text); }
.mvs-search[open] { animation: mvs-pop .22s cubic-bezier(.2, .7, .2, 1); }
@keyframes mvs-pop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.mvs-search::backdrop { background: rgb(6 12 22 / 58%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.mvs-search__box { display: flex; flex-direction: column; max-height: min(640px, 80vh); }
.mvs-search__field { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.mvs-search__field > .mvs-ico { width: 22px; height: 22px; color: var(--muted); }
.mvs-search__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1.125rem; font-weight: 500; }
.mvs-search__field input::-webkit-search-cancel-button { display: none; }
.mvs-search__close { padding: .25rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: .75rem; font-weight: 700; }
.mvs-search__list { flex: 1; overflow-y: auto; margin: 0; padding: .5rem; }
.mvs-search__item { display: flex; align-items: center; gap: .85rem; padding: .55rem .65rem; border-radius: 14px; color: var(--ink); text-decoration: none; }
.mvs-search__item:hover, [aria-selected="true"] > .mvs-search__item { background: var(--surface); color: var(--ink); }
[aria-selected="true"] > .mvs-search__item { box-shadow: inset 3px 0 0 var(--accent); }
.mvs-search__pic { display: grid; place-items: center; flex: none; overflow: hidden; width: 48px; height: 48px; border-radius: 12px; background: var(--plate); }
.mvs-search__pic img { width: 100%; height: 100%; object-fit: cover; }
.mvs-search__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mvs-search__text strong { font-weight: 700; }
.mvs-search__text span { font-size: .8125rem; color: var(--muted); }
.mvs-search mark { padding: 0; background: none; color: var(--accent-ink); }
.mvs-search__empty { padding: 1.25rem; color: var(--muted); }
.mvs-search__foot { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .75rem 1.25rem; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .8125rem; }
.mvs-search__all { font-weight: 700; }

/* phone menu: full screen, items rise in one after another */
.mvs-drawer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 1rem 1.25rem 1.5rem; border: 0; border-radius: 0; overflow-y: auto; color: #fff;
  background-color: var(--ink); background-image: var(--glow), var(--grid); background-size: auto, 48px 48px, 48px 48px; }
.mvs-drawer[open] { display: flex; flex-direction: column; gap: 1.25rem; animation: mvs-fadein .25s ease; }
@keyframes mvs-fadein { from { opacity: 0; } }
.mvs-drawer::backdrop { background: rgb(4 10 18 / 60%); }
.mvs-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.mvs-drawer__head img { height: 44px; width: auto; }
.mvs-drawer__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: rgb(255 255 255 / 9%); border: 1px solid rgb(255 255 255 / 14%); border-radius: 50%; color: #fff; }
.mvs-drawer__search { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .85rem 1rem; border: 1px solid rgb(255 255 255 / 14%); border-radius: 14px; background: rgb(255 255 255 / 6%); color: var(--on-dark-muted); font-size: 1rem; text-align: left; }
.mvs-drawer__search .mvs-ico { width: 20px; height: 20px; }
.mvs-drawer__menu { margin: 0; }
.mvs-drawer__menu > li { border-bottom: 1px solid var(--dark-line); }
.mvs-drawer[open] .mvs-drawer__menu > li { animation: mvs-rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms + 60ms); }
@keyframes mvs-rise { from { opacity: 0; transform: translateY(14px); } }
.mvs-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mvs-drawer__row a { flex: 1; padding: .9rem 0; color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.mvs-drawer__more { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid rgb(255 255 255 / 14%); border-radius: 50%; background: rgb(255 255 255 / 6%); color: #fff; }
.mvs-drawer__more .mvs-ico { width: 18px; height: 18px; transition: transform .25s; }
.mvs-drawer__more[aria-expanded="true"] .mvs-ico { transform: rotate(180deg); }
.mvs-drawer__sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: 0 0 1rem; }
.mvs-drawer__sub[hidden] { display: none; }
.mvs-drawer__sub a { display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: 12px; background: rgb(255 255 255 / 5%); color: var(--on-dark-muted); font-size: .8125rem; font-weight: 600; line-height: 1.25; text-decoration: none; }
.mvs-drawer__thumb { width: 40px; height: 40px; flex: none; padding: 3px; border-radius: 10px; background: #fff; object-fit: contain; }
.mvs-drawer__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: auto; padding-top: 1rem; }
.mvs-drawer__action { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem; border-radius: 14px; background: rgb(255 255 255 / 8%); color: #fff; font-weight: 700; text-decoration: none; }
.mvs-drawer__action:hover { color: #fff; }
.mvs-drawer__action .mvs-ico { width: 19px; height: 19px; }
.mvs-drawer__contact .btn { grid-column: 1 / -1; --bs-btn-padding-y: .9rem; }

/* call / WhatsApp / quotation bar on phones: floats above the page */
.mvs-dock { position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 1020; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; overflow: hidden; border: 1px solid rgb(255 255 255 / 12%); border-radius: 20px; background: rgb(11 20 36 / 92%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 40px -12px rgb(0 0 0 / 55%); }
.mvs-dock a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .5rem .3rem; color: #fff; font-size: clamp(.75rem, 3.4vw, .8125rem); font-weight: 700; text-decoration: none; white-space: nowrap; }   /* the sign beside the word, a low bar (Krunal) */
.mvs-dock .mvs-ico { flex: none; width: 18px; height: 18px; }
/* each in its own colour (Krunal): call blue, WhatsApp green with its sign, the quotation red; a
   hairline of the bar between them */
.mvs-dock { gap: 1px; }
.mvs-dock__call { background: #1f6feb; }
.mvs-dock__wa { background: #15924a; }
.mvs-dock__wa-ico { flex: none; width: 18px; height: 18px; background: var(--ico-wa) center / contain no-repeat; }
.mvs-dock__quote { background: var(--accent-ink); }
@media (max-width: 359.98px) { .mvs-dock :is(.mvs-ico, .mvs-dock__wa-ico) { display: none; } }   /* (the smallest phones: the words only) */
/* (the room it takes at the page's end is the footer's own: .mvs-footer__base, below) */
@media (min-width: 992px) { .mvs-dock { display: none; } }

/* ---------------------------------------------------------------- title band (pages, listings) and the templates' first section
   The fixed header lies over the top of every page, so the first block makes room for it. */
/* every title band, the same on every page: the plant photo (assets/img), deep navy on the left
   where the title sits, darker under the header, the red glow in the corner, and the drawing grid
   over all of it (--ph-grid, stronger than the sections' grid so it shows on the photo); phones get
   the photo's right part. The pages' and listings' band (.mvs-pagehead) is taller; the products',
   articles' and city pages' first sections stay compact, so what follows comes into view sooner. */
.mvs-pagehead,
.mvs--product main > .mvs-sec:first-child,
.mvs--post main > .mvs-sec:first-child,
.mvs--location main > .mvs-sec:first-child { --ph-grid: linear-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 7%) 1px, transparent 1px);
  padding-block: calc(var(--header-h) + clamp(2rem, 4vw, 3.25rem)) clamp(2rem, 4vw, 3rem); background-color: var(--navy); color: var(--on-dark-muted);
  background-image: var(--ph-grid), linear-gradient(180deg, rgb(8 15 33 / 72%) 0%, rgb(8 15 33 / 0%) 45%),
    linear-gradient(90deg, rgb(11 21 51 / 95%) 0%, rgb(11 21 51 / 84%) 32%, rgb(11 21 51 / 36%) 62%, rgb(11 21 51 / 10%) 100%),
    var(--glow), url("../img/pagehead-bg.webp");
  background-size: 56px 56px, 56px 56px, auto, auto, auto, cover; background-position: center top, center top, 0 0, 0 0, 0 0, right center; background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.mvs-pagehead { padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 6.5rem)) clamp(3rem, 7vw, 6.5rem); }
@media (max-width: 767.98px) {
  .mvs-pagehead,
  .mvs--product main > .mvs-sec:first-child,
  .mvs--post main > .mvs-sec:first-child,
  .mvs--location main > .mvs-sec:first-child { background-image: var(--ph-grid), linear-gradient(180deg, rgb(8 15 33 / 78%) 0%, rgb(8 15 33 / 0%) 55%),
      linear-gradient(90deg, rgb(11 21 51 / 92%) 0%, rgb(11 21 51 / 70%) 55%, rgb(11 21 51 / 35%) 100%),
      var(--glow), url("../img/pagehead-bg-sm.webp"); background-size: 40px 40px, 40px 40px, auto, auto, auto, cover; background-position: center top, center top, 0 0, 0 0, 0 0, center; }
}
main > .mvs-sec:first-child { padding-top: calc(var(--header-h) + var(--sec-pad)); }
main > .mvs-sec--hero:first-child { padding-top: 0; }
/* the title takes the band's full width, on one line while it fits (Krunal, 30 Oct) */
.mvs-pagehead__title, .mvs-h--h1 { margin: 0 0 1.1rem; text-wrap: pretty; color: #fff; text-shadow: 0 2px 18px rgb(8 15 33 / 45%); }
.mvs-crumbs { font-size: .875rem; color: var(--on-dark-muted); }
.mvs-crumbs a { color: var(--on-dark-muted); text-decoration: none; }
.mvs-crumbs a:hover { color: #fff; }
.mvs-crumbs [aria-current] span { color: #fff; }
.mvs-crumbs__sep { margin: 0 .45rem; opacity: .5; }
/* on phones a long trail shows Home, "…" and the page itself (the middle steps are in the schema
   and one tap away on the page); the page's own name may take two lines */
@media (max-width: 575.98px) {
  .mvs-crumbs li:not(:first-child):not(:last-child) { display: none; }
  .mvs-crumbs li:nth-last-child(n + 3):first-child::after { content: "…"; margin-right: .45rem; opacity: .7; }
  .mvs-crumbs [aria-current] span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

/* ---------------------------------------------------------------- sections and builder elements */
.mvs-sec { padding-block: var(--sec-pad); }
.mvs-sec--hero { padding: 0; }
.mvs-h { line-height: 1.15; }
.mvs-h--h4 { font-size: 1.25rem; }
.mvs-h--h5 { font-size: .9375rem; }
.mvs-h--p { font-weight: 400; letter-spacing: 0; color: var(--muted); }
.mvs-sechead { margin-bottom: 1.4rem; }
.mvs-sechead .mvs-h--h2, .mvs-sechead .mvs-h--h3 { margin: 0; max-width: 22ch; }
.mvs-sechead + .mvs-h--p { font-size: 1.125rem; margin: -.4rem 0 1.5rem; }
.mvs-text p, .mvs-text li { max-width: 72ch; }
.mvs-text table, .mvs-table table, .mvs-article table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.mvs-text th, .mvs-text td, .mvs-article th, .mvs-article td { border: 1px solid var(--line); padding: .6rem .85rem; vertical-align: top; }
.mvs-figure { margin: 0; }
.mvs-figure img, .mvs-text img, .mvs-article img { max-width: 100%; height: auto; }
.mvs-article .aligncenter { display: block; margin-left: auto; margin-right: auto; }  /* the articles' centred pictures (54 articles) */
.mvs-iconbox { height: 100%; }
.mvs-iconbox__img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 1rem; }
.mvs-iconbox__title { font-size: 1.125rem; margin: 0 0 .5rem; letter-spacing: -.015em; }
.mvs-iconbox__desc { font-size: .9375rem; color: var(--muted); }
.mvs-iconbox__link { color: inherit; text-decoration: none; display: block; }
.mvs-divider { border-top: 1px solid var(--line); margin: 1.5rem 0; text-align: center; }
.mvs-divider span { position: relative; top: -.8em; padding: 0 1rem; background: var(--bg); color: var(--muted); }
.mvs-map iframe { width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- home hero: the plant photo full width, ranges overlapping the next section */
.mvs-hero { position: relative; display: flex; flex-direction: column; min-height: min(calc(100svh - 4.5rem), 880px); padding-top: var(--header-h); background: var(--ink); color: #fff; }
.mvs-hero__media { position: absolute; inset: 0; overflow: hidden; }
.mvs-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgb(8 15 28 / 92%) 0%, rgb(8 15 28 / 72%) 42%, rgb(8 15 28 / 22%) 78%), linear-gradient(0deg, rgb(8 15 28 / 90%) 0%, rgb(8 15 28 / 0%) 46%), linear-gradient(180deg, rgb(8 15 28 / 70%) 0%, rgb(8 15 28 / 0%) 22%); }
.mvs-hero__media picture { position: absolute; inset: 0; }
.mvs-hero .mvs-hero__poster { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }   /* the hero sits in a .mvs-text */
.mvs-hero .mvs-hero__poster { object-position: 70% 50%; }   /* the valve (right of centre) stays in view on narrower screens */
@media (max-width: 768px) { .mvs-hero .mvs-hero__poster { object-position: 50% 100%; } }   /* (the portrait photo: the valve at its foot) */
/* the text fills the height between the header and the range cards, centred top to bottom */
.mvs-hero__body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.mvs-hero__content { max-width: 760px; }
.mvs-hero__title { margin: 0; color: #fff; }
.mvs-hero__lead { margin: 1.5rem 0 0; max-width: 48ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: #c9d4e2; }
.mvs-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
@media (max-width: 575.98px) { .mvs-hero__cta .btn { flex: 1 1 100%; justify-content: space-between; } }   /* phones: both the full width */
/* Photo ranges (selected 31 Oct 2026): the range's in-service photo, its name on one line (Krunal:
   no product count; the size follows the card's width, 100cqi), the site's arrow disc (white, the
   red arrow, turning red on hover; over the photo's corner on phones), rounded corners and, as on the
   site's other cards, a red line that runs in along the foot on hover (Krunal: no standing red line). Home overlaps the drawing
   paper; 404 stays in normal flow. A shared overlap value also reserves room in the next section. */
.mvs--home { --mvs-range-overlap: 5rem; }
.mvs-hero__ranges { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: calc(-1 * var(--mvs-range-overlap, 0px)); }
.mvs-hero__ranges.container { width: calc(100% - clamp(1.5rem, 4.7vw, 6rem)); max-width: 120rem; padding-inline: 0; }
.mvs-hero__range { --tx-pad: 4.85rem; position: relative; isolation: isolate; container-type: inline-size; display: flex; align-items: end; width: 100%; min-width: 0; min-height: 220px; aspect-ratio: 8 / 7; overflow: hidden; border-radius: 16px; background: var(--ink); color: #fff; text-decoration: none; text-align: left;
  box-shadow: 0 8px 22px -18px rgb(11 20 36 / 32%); transition: transform .3s ease, box-shadow .3s ease; }
.mvs-hero__range::before { content: ""; position: absolute; inset: 45% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgb(7 18 33 / 98%) 0%, rgb(7 18 33 / 90%) 30%, rgb(7 18 33 / 48%) 65%, rgb(7 18 33 / 0%) 100%); }
.mvs-hero__range::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.mvs-hero__range:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.mvs-hero__range-pic { position: absolute; inset: 0; display: block; overflow: hidden; }
.mvs-hero__range-pic img, .mvs-hero .mvs-hero__range-pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%; transition: transform .5s ease; }
.mvs-hero__range--ptfe-lined-valve .mvs-hero__range-pic img { object-position: 55% 45%; }
.mvs-hero__range-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .35rem; width: 100%; min-width: 0; padding: 1rem 3.75rem 1.15rem 1.1rem; }
/* one line: the card's width (100cqi) less the text's side padding (--tx-pad), .087 = 15px over the
   longest name at 15px ("PTFE Lined Pipe Fittings", 169px), at most 1rem */
.mvs-hero__range-text strong { display: block; overflow: hidden; color: #fff; font-size: min(1rem, calc((100cqi - var(--tx-pad)) * .087)); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.mvs-hero__range-go { position: absolute; right: 1rem; bottom: 1.15rem; z-index: 2; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: #fff; color: var(--accent-ink);
  transition: background-color .2s, color .2s; }
.mvs-hero__range-go .mvs-ico { width: 15px; height: 15px; stroke-width: 2.4; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.mvs-hero__range:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--accent); }
.mvs-hero__range:is(:hover, :focus-visible) .mvs-hero__range-go { background: var(--accent-ink); color: #fff; }
.mvs-hero__range:is(:hover, :focus-visible) .mvs-hero__range-go .mvs-ico { transform: rotate(45deg); }   /* as every button's disc */
@media (hover: hover) {
  .mvs-hero__range:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 16px 28px -20px rgb(11 20 36 / 38%); }
  .mvs-hero__range:hover .mvs-hero__range-pic img { transform: scale(1.04); }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .mvs--home { --mvs-range-overlap: 7.5rem; }
  .mvs-hero__range { aspect-ratio: 8 / 5; max-height: 16.25rem; }
}
@media (min-width: 992px) {
  .mvs--home { --mvs-range-overlap: max(110px, (100vw - clamp(1.5rem, 4.7vw, 6rem) - 3rem) * 7 / 64); }   /* half a card: the row centred on the hero's edge */
  .mvs-hero__ranges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
/* Compact desktop ranges (Krunal: narrower): the row at most 68rem wide, centred, about 260px a card;
   half of it in the hero, half over the next section (Krunal: the cards centred on the hero's edge) -
   a card is (row - 3 gaps) / 4 wide and 7/8 of that tall */
@media (min-width: 1200px) {
  .mvs--home { --mvs-range-overlap: calc((min(68rem, 100vw - clamp(3rem, 12vw, 12rem)) - 3rem) * 7 / 64); }
  .mvs--home .mvs-hero__ranges.container { width: min(68rem, 100% - clamp(3rem, 12vw, 12rem)); max-width: none; }
}
@media (max-width: 575.98px) {
  .mvs-hero__ranges { gap: .625rem; }
  .mvs-hero__range::before { inset: 20% 0 0; }
  .mvs-hero__range { --tx-pad: 1.5rem; border-radius: 12px; }
  .mvs-hero__range-text { padding: .875rem .75rem; }
  .mvs-hero__range-go { top: .55rem; right: .55rem; bottom: auto; width: 1.75rem; height: 1.75rem; }   /* (the name gets the card's width) */
  .mvs-hero__range-go .mvs-ico { width: 13px; height: 13px; }
  .mvs-hero__range--pvdf-valve .mvs-hero__range-pic img { object-position: 65% 45%; }
}
@media (max-width: 359.98px) {
  .mvs-hero__ranges { grid-template-columns: minmax(0, 1fr); }
  .mvs-hero__range { aspect-ratio: 3 / 2; min-height: 200px; }
}
.mvs-sec--hero + .mvs-sec { padding-top: calc(var(--sec-pad) + var(--mvs-range-overlap, 0px)); }

/* ---------------------------------------------------------------- page sections by kind (home, About and the other fixed pages) */
:is(.mvs--home, .mvs--page) .mvs-sec--intro .row { align-items: center; }
:is(.mvs--home, .mvs--page) .mvs-sec--intro .mvs-text { color: var(--muted); font-size: 1.0625rem; }
.mvs--page .mvs-sec--intro > .container > .row > .mvs-wrap--image:first-of-type .mvs-figure { position: relative; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-xl); background: radial-gradient(circle at 35% 25%, #fff 0%, #eef2f7 55%, #e2e8f0 100%); }

/* home "Know About MVS": valve drawings on faint grid paper (a big ball valve under the text, three
   small ones around; .mvs-drawing below); on wide screens the picture stays in view beside the text */
.mvs--home .mvs-sec--intro { position: relative; overflow: clip; }
.mvs--home .mvs-sec--intro::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(16 24 40 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 6%) 1px, transparent 1px),
    linear-gradient(rgb(16 24 40 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 3%) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; background-position: center top;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.mvs--home .mvs-sec--intro > .container { position: relative; z-index: 1; }   /* the drawing behind the picture goes under it, not under the section */
.mvs--home .mvs-sec--intro .row { align-items: flex-start; }
.mvs--home .mvs-sec--intro .mvs-wrap--heading { position: relative; }
.mvs--home .mvs-sec--intro .mvs-text { color: var(--text); text-align: justify; }
@media (max-width: 575.98px) { .mvs--home .mvs-sec--intro .mvs-text { -webkit-hyphens: auto; hyphens: auto; } }   /* narrow lines: no wide gaps */
@media (min-width: 992px) { .mvs--home .mvs-sec--intro .mvs-wrap--image { position: sticky; top: calc(var(--bar-h) + 2rem); } }
@media (min-width: 1200px) {   /* the text two thirds, the picture one third */
  .mvs--home .mvs-sec--intro .mvs-wrap--heading { width: 66.6667%; }
  .mvs--home .mvs-sec--intro .mvs-wrap--image { width: 33.3333%; }
}
/* the cutaway valve (a transparent picture) stands on the grid paper with a soft shadow under it */
.mvs--home .mvs-sec--intro .mvs-wrap--image .mvs-figure { max-width: 420px; margin-inline: auto; }
.mvs--home .mvs-sec--intro .mvs-wrap--image .mvs-figure img { display: block; width: 100%; filter: drop-shadow(0 28px 32px rgb(16 24 40 / 22%)); }
.mvs--home .mvs-sec--intro .mvs-btn { margin-top: 1rem; }

/* "Read more" on phones: the paragraphs after the first wait behind the button (site.js adds .js-more) */
.mvs-more-btn { display: none; }
@media (max-width: 767.98px) {
  .js-more:not(.is-open) > p:not(:first-child) { display: none; }
  .js-more + .mvs-more-btn { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 1rem; padding: 0; border: 0; background: none; color: var(--accent-ink); font-size: .9375rem; font-weight: 700; }
  .mvs-more-btn .mvs-ico { width: 18px; height: 18px; transition: transform .25s; }
  .mvs-more-btn[aria-expanded="true"] .mvs-ico { transform: rotate(180deg); }
}

/* valve drawings (partials/valve-drawing.php): thin navy lines; once in view (site.js: .is-pending,
   then .is-drawn) the outlines draw in turn, then the fine lines fade in and the flow starts */
.mvs-drawing { position: absolute; height: auto; color: rgb(16 24 40 / 16%); pointer-events: none; }
.mvs-drawing path { stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.mvs-drawing .d { stroke-width: 1.6; }
.mvs-drawing .f path { stroke-width: 1.1; stroke-opacity: .7; }
.mvs-drawing text { fill: currentColor; font-family: var(--font); font-size: 14px; font-weight: 600; font-style: italic; }
.mvs-drawing .mvs-drawing__flow { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 10 18; stroke-opacity: .45; animation: mvs-flow 1.6s linear infinite; }
.mvs-drawing.is-pending .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mvs-drawing.is-pending :is(.f, .mvs-drawing__flow) { opacity: 0; }
.mvs-drawing.is-drawn .d { animation: mvs-draw-line 1.4s cubic-bezier(.55, .1, .3, 1) forwards; animation-delay: calc(var(--i, 0) * .2s); }
.mvs-drawing.is-drawn .f { animation: mvs-draw-fade 1s ease-out 1.5s forwards; }
.mvs-drawing.is-drawn .mvs-drawing__flow { animation: mvs-draw-fade 1s ease-out 1.8s forwards, mvs-flow 1.6s linear infinite; }
@keyframes mvs-draw-line { to { stroke-dashoffset: 0; } }
@keyframes mvs-draw-fade { to { opacity: 1; } }
@keyframes mvs-flow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .mvs-drawing .mvs-drawing__flow { animation: none; } }
/* their places in "Know About MVS": big and faint under the text (a little above its middle), at
   the top right edge, and under the text and the picture */
.mvs-drawing--under-text { top: 50%; left: 50%; z-index: -1; width: 110%; color: rgb(16 24 40 / 9%); transform: translate(-50%, -58%); }
.mvs-drawing--under-text .mvs-drawing__flow { stroke-opacity: .12; }   /* runs under a line of text */
.mvs-drawing--top-right { top: 4.5rem; right: -4rem; width: clamp(170px, 18vw, 260px); }
.mvs-drawing--bottom-mid { bottom: -1.5rem; left: 30%; width: clamp(220px, 21vw, 300px); }
.mvs-drawing--bottom-right { right: 2%; bottom: 1.5rem; width: clamp(160px, 15vw, 230px); }
@media (max-width: 991.98px) { .mvs-drawing--bottom-mid, .mvs-drawing--bottom-right { display: none; } }
/* About: "Our Vision" and "Our Mission" side by side under the text */
.mvs--page .mvs-sec--intro .mvs-wrap--icon_box_2 { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 768px) { .mvs--page .mvs-sec--intro .mvs-wrap--icon_box_2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mvs--page .mvs-sec--intro .mvs-wrap--icon_box_2 .mvs-iconbox { padding: 1.5rem 1.6rem; border-radius: var(--r-lg); background: var(--surface); }

/* About, who MVS is (about.php): the text (justified, the body colour) and, as wide beside it and
   kept in view, a gate valve drawn, then made: its engineering drawing (ChatGPT's) on the
   blueprint grid, the finished valve over it from the laser line (--cut) to the right edge. site.js
   [data-make] moves the line from right to left as the visitor scrolls (--p, 0..1, the line fading
   at both ends); without it the two halves stand side by side. Then vision and mission as MVS's two
   nameplates, the kind riveted on every valve: vision on navy anodised aluminium with silver
   letters, mission on brushed stainless with dark ones, each with its stamped strip, its mark (the
   eye, the target) pressed into a round well and filled red, the line pressed round it and a rivet
   in each corner. Once in view ([data-reveal]) a plate comes down into place, its mark is stamped,
   its rivets go in one by one and a gleam runs over the metal; on hover the gleam runs again. */
.mvs--page .mvs-sec--about-intro .mvs-text { color: var(--text); text-align: justify; }
@media (max-width: 575.98px) { .mvs--page .mvs-sec--about-intro .mvs-text { -webkit-hyphens: auto; hyphens: auto; } }
.mvs-sec--about-intro .row { align-items: flex-start; }
@media (min-width: 992px) { .mvs-sec--about-intro .mvs-wrap--image { position: sticky; top: calc(var(--bar-h) + 2rem); } }
.mvs--page .mvs-sec--about-intro .mvs-wrap--image .mvs-figure.mvs-make { --cut: 50%; --p: .5; position: relative; overflow: hidden; margin: 0 0 0 auto; padding: 0; aspect-ratio: 1; border-radius: 24px;
  width: min(100%, calc(100svh - var(--bar-h) - 4rem));   /* all of it on the screen while it stays there */
  background-color: var(--navy); background-image: var(--grid), var(--grid); background-size: 12px 12px, 12px 12px, 60px 60px, 60px 60px; box-shadow: 0 32px 60px -36px rgb(11 20 36 / 65%); }
.mvs-make img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.mvs-make__made { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 0 0 var(--cut)); }
.mvs-make__tag { position: absolute; top: 16px; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border-radius: 999px; color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .14em; line-height: 1; text-transform: uppercase; }
.mvs-make__tag b { color: var(--accent-on-dark); font-weight: 800; letter-spacing: .04em; }
.mvs-make__tag--design { left: 16px; border: 1px dashed rgb(219 231 245 / 45%); color: #dbe7f5; }
.mvs-make__tag--made { right: 16px; border: 1px solid rgb(255 255 255 / 16%); background: rgb(11 20 36 / 55%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mvs-make__laser { position: absolute; top: 0; bottom: 0; left: var(--cut); z-index: 2; width: 2px; margin-left: -1px; background: #ff4045; pointer-events: none;
  box-shadow: 0 0 6px 1px rgb(255 64 69 / 90%), 0 0 24px 4px rgb(227 30 36 / 45%); opacity: clamp(0, min(var(--p), 1 - var(--p)) * 25, 1); }
.mvs-make__laser::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1px; width: 56px; background: linear-gradient(90deg, rgb(227 30 36 / 18%), transparent); }   /* the heat just behind the line */
.mvs-make__laser::after { content: ""; position: absolute; top: 0; bottom: 0; left: -6px; width: 14px;   /* the line's carriage, top and foot */
  background: linear-gradient(#ff4045, #ff4045) top / 14px 3px no-repeat, linear-gradient(#ff4045, #ff4045) bottom / 14px 3px no-repeat; }

.mvs--page .mvs-sec--about-intro .mvs-wrap--icon_box_2 { gap: 1.5rem; margin-top: calc(2.5rem + var(--bs-gutter-y)); }   /* its row starts a gutter higher */
.mvs--page .mvs-sec--about-intro .mvs-wrap--icon_box_2 .mvs-plate { --plate-r: 14px; position: relative; overflow: hidden; height: auto; padding: 2.6rem 2.75rem 2.5rem; border-radius: var(--plate-r); }
.mvs--page .mvs-sec--about-intro .mvs-wrap--icon_box_2 .mvs-plate--vision { color: #c9d4e2;   /* navy anodised aluminium */
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / 2.5%) 0 1px, transparent 1px 3px), linear-gradient(125deg, #213658 0%, #12223b 38%, #1b2d4a 55%, #0c1729 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 -2px 0 rgb(0 0 0 / 35%), 0 1px 2px rgb(0 0 0 / 30%), 0 34px 50px -34px rgb(11 20 36 / 70%); }
.mvs--page .mvs-sec--about-intro .mvs-wrap--icon_box_2 .mvs-plate--mission { color: #2b3542;   /* brushed stainless */
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / 40%) 0 1px, transparent 1px 3px), linear-gradient(125deg, #f4f6f8 0%, #d3d9e0 36%, #eef1f4 54%, #c6cdd6 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgb(16 24 40 / 14%), 0 1px 2px rgb(16 24 40 / 20%), 0 34px 50px -34px rgb(16 24 40 / 45%); }
.mvs-plate::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgb(0 0 0 / 38%); border-radius: calc(var(--plate-r) - 6px); pointer-events: none;   /* the line pressed round it */
  box-shadow: 0 1px 0 rgb(255 255 255 / 9%), inset 0 1px 0 rgb(255 255 255 / 9%); }
.mvs-plate--mission::before { border-color: rgb(16 24 40 / 22%); box-shadow: 0 1px 0 rgb(255 255 255 / 75%), inset 0 1px 0 rgb(255 255 255 / 75%); }
.mvs-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%);   /* the gleam */
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 16%) 48%, rgb(255 255 255 / 4%) 54%, transparent 62%); }
.mvs-plate--mission::after { background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 80%) 48%, rgb(255 255 255 / 20%) 54%, transparent 62%); }
.mvs-plate.is-in::after { animation: mvs-gleam 1.3s 1.05s cubic-bezier(.4, 0, .2, 1) both; }
.mvs-plate.is-in:hover::after { animation: mvs-gleam-again 1.1s cubic-bezier(.4, 0, .2, 1) both; }   /* another name, so it runs again */
@keyframes mvs-gleam { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes mvs-gleam-again { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.mvs-plate__rivets i { --k: 0; position: absolute; top: 20px; left: 20px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, #d3d9e0 28%, #8e99a7 68%, #5b6573 100%); box-shadow: 0 1px 1.5px rgb(0 0 0 / 50%), 0 0 0 2px rgb(0 0 0 / 10%); }
.mvs-plate__rivets i:nth-child(2) { --k: 1; left: auto; right: 20px; }
.mvs-plate__rivets i:nth-child(3) { --k: 3; top: auto; bottom: 20px; left: auto; right: 20px; }
.mvs-plate__rivets i:nth-child(4) { --k: 2; top: auto; bottom: 20px; }
.mvs-plate__strip { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.15rem; padding-bottom: .85rem; border-bottom: 1px solid rgb(0 0 0 / 35%); box-shadow: 0 1px 0 rgb(255 255 255 / 8%);
  color: rgb(201 212 226 / 72%); font-size: .6875rem; font-weight: 800; letter-spacing: .22em; line-height: 1; text-transform: uppercase; }
.mvs-plate__strip b { padding-left: .85rem; border-left: 1px solid currentColor; color: var(--accent-on-dark); font-weight: 800; }
.mvs-plate__strip span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }
.mvs-plate--mission .mvs-plate__strip { border-bottom-color: rgb(16 24 40 / 20%); box-shadow: 0 1px 0 rgb(255 255 255 / 75%); color: #5d6876; }
.mvs-plate--mission .mvs-plate__strip b { color: var(--accent-ink); }
.mvs-plate__head { display: flex; align-items: center; gap: 1rem; margin-bottom: .85rem; }
.mvs-plate__mark { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--accent-on-dark);   /* pressed in, filled red */
  background: radial-gradient(circle at 50% 30%, #0a1527, #1b2d4a 75%); box-shadow: inset 0 3px 6px rgb(0 0 0 / 65%), inset 0 -1px 0 rgb(255 255 255 / 12%), 0 1px 0 rgb(255 255 255 / 10%); }
.mvs-plate__mark::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 50%; }
.mvs-plate__mark .mvs-ico { width: 26px; height: 26px; stroke-width: 2.2; filter: drop-shadow(0 1px 0 rgb(0 0 0 / 70%)); }
.mvs-plate--mission .mvs-plate__mark { color: var(--accent-ink);
  background: radial-gradient(circle at 50% 30%, #c0c8d1, #e9edf1 75%); box-shadow: inset 0 3px 6px rgb(16 24 40 / 35%), inset 0 -1px 0 #fff, 0 1px 0 #fff; }
.mvs-plate--mission .mvs-plate__mark::before { border-color: rgb(16 24 40 / 12%); }
.mvs-plate--mission .mvs-plate__mark .mvs-ico { filter: drop-shadow(0 1px 0 rgb(255 255 255 / 85%)); }
.mvs--page .mvs-sec--about-intro .mvs-plate .mvs-iconbox__title { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }   /* the letters pressed in */
.mvs--page .mvs-sec--about-intro .mvs-plate--vision .mvs-iconbox__title { color: #e8eef5; text-shadow: 0 -1px 0 rgb(0 0 0 / 55%), 0 1px 0 rgb(255 255 255 / 8%); }
.mvs--page .mvs-sec--about-intro .mvs-plate--mission .mvs-iconbox__title { color: #1a2330; text-shadow: 0 1px 0 rgb(255 255 255 / 85%), 0 -1px 0 rgb(0 0 0 / 8%); }
.mvs--page .mvs-sec--about-intro .mvs-plate .mvs-iconbox__desc { font-size: 1rem; line-height: 1.7; }
.mvs--page .mvs-sec--about-intro .mvs-plate--vision .mvs-iconbox__desc { color: #c9d4e2; }
.mvs--page .mvs-sec--about-intro .mvs-plate--mission .mvs-iconbox__desc { color: #263040; text-shadow: 0 1px 0 rgb(255 255 255 / 55%); }
/* hidden at once, then in with the timing (only on the way in, so a quick scroll still sees it) */
html.js .mvs-plate:not(.is-in) { opacity: 0; transform: translateY(-26px); }
html.js .mvs-plate:not(.is-in) .mvs-plate__rivets i { opacity: 0; transform: scale(2.2); }
html.js .mvs-plate:not(.is-in) .mvs-plate__mark .mvs-ico { opacity: 0; transform: scale(1.5); }
.mvs-plate.is-in .mvs-plate__mark .mvs-ico { transition: transform .4s cubic-bezier(.3, 1.4, .5, 1) .3s, opacity .25s .3s; }   /* stamped, before the rivets */
.mvs-plate.is-in { transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.mvs-plate--mission.is-in { transition-delay: .12s; }   /* the mission plate just after */
.mvs-plate.is-in .mvs-plate__rivets i { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1) calc(.45s + var(--k) * .12s), opacity .2s calc(.45s + var(--k) * .12s); }
@media (prefers-reduced-motion: reduce) { .mvs-plate::after { animation: none !important; } }
@media (max-width: 767.98px) {
  .mvs--page .mvs-sec--about-intro .mvs-wrap--icon_box_2 .mvs-plate { padding: 2.2rem 1.75rem 2.1rem; }
  .mvs-plate__rivets i { width: 12px; height: 12px; top: 17px; left: 17px; }
  .mvs-plate__rivets i:nth-child(2), .mvs-plate__rivets i:nth-child(3) { right: 17px; }
  .mvs-plate__rivets i:nth-child(3), .mvs-plate__rivets i:nth-child(4) { bottom: 17px; }
  .mvs-plate__mark { width: 50px; height: 50px; }
  .mvs-plate__mark .mvs-ico { width: 23px; height: 23px; }
  .mvs--page .mvs-sec--about-intro .mvs-wrap--icon_box_2 { margin-top: calc(1.5rem + var(--bs-gutter-y)); }
}

/* the four facts as a process line, from the factory to the world (partials/facts.php). site.js
   draws a PTFE lined pipeline in cut-away from where the cards are and fills it as the visitor
   scrolls: from 992px a main line weaves between the cards (two above it, two below; an S-bend,
   a step with two elbows and a 45-degree offset), with an MVS ball valve, sight glass and bellows
   on it and a tee with a pressure gauge feeding a branch to each card; below 992px the main line
   comes down the left side with a branch to each card. Each card's --q (0..1, how full its branch
   is) brings the card out of its branch and then its parts one after another; without the script
   --q is not set and everything shows. */
.mvs-sec--facts { padding-block: clamp(3.5rem, 6vw, 5rem); background: var(--surface); overflow: clip; }
.mvs--page .mvs-sec--facts { background: #fff; }   /* About: the clients register (grey, as on the home page) comes straight after it */
.mvs-process { --pipe: 24px; position: relative; }
.mvs-process__steps { position: relative; z-index: 1; display: grid; gap: 1.5rem; margin: 0; padding: 0; }
.mvs-process__pipe { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; pointer-events: none; }
/* the pipe in layers along one path: navy shell, a lighter band (the round of it), the white
   lining, the bore; the flow and its moving glints run in the bore */
.mvs-process__pipe path { fill: none; stroke-linejoin: round; }
.mvs-pipe__shell { stroke: #0b1533; stroke-width: var(--pipe); }
.mvs-pipe__shade { stroke: #24376e; stroke-width: calc(var(--pipe) * .78); }
.mvs-pipe__lining { stroke: #f4f6fa; stroke-width: calc(var(--pipe) * .44); }
.mvs-pipe__bore { stroke: #c9d0db; stroke-width: calc(var(--pipe) * .28); }
.mvs-pipe__flow { stroke: #e31e24; stroke-width: calc(var(--pipe) * .28); stroke-dasharray: 1; filter: drop-shadow(0 0 4px rgb(227 30 36 / 65%)); }
.mvs-pipe__flow-mask { stroke: #fff; stroke-width: calc(var(--pipe) * .3); stroke-dasharray: 1; }
.mvs-pipe__glint { stroke: rgb(255 255 255 / 50%); stroke-width: calc(var(--pipe) * .1); stroke-dasharray: 10 38; animation: mvs-pipe-glint 1s linear infinite; }
@keyframes mvs-pipe-glint { to { stroke-dashoffset: -48; } }
.mvs-pipe__flange { fill: #1a2a5c; stroke: #4a5f97; stroke-width: 1; }
.mvs-pipe__tee { stroke: rgb(255 255 255 / 12%); stroke-width: 1; filter: drop-shadow(0 6px 6px rgb(16 24 40 / 35%)); }
.mvs-pipe__bolt { fill: #e3e8ee; stroke: #6f7a88; stroke-width: .8; }
.mvs-pipe__lever { fill: #e31e24; stroke: #a8121a; stroke-width: 1; }
.mvs-pipe__window { fill: #c9d0db; stroke: #b9c2ce; stroke-width: 3; transition: fill .3s; }
.mvs-pipe__glass.is-wet .mvs-pipe__window { fill: #e31e24; }
/* the pressure gauge on each tee: metal bezel, white face with a scale and a red zone, the needle */
.mvs-pipe__face { fill: #fff; }
.mvs-pipe__tick { stroke: #5b6676; stroke-width: 1.4; }
.mvs-pipe__zone { fill: none; stroke: #e31e24; stroke-width: 3.5; }
.mvs-pipe__needle { fill: #e31e24; transition: transform .15s linear; }
.mvs-pipe__cap { fill: #0b1533; stroke: #8f9aa8; stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .mvs-pipe__glint { animation: none; } }

/* a card: an icon tile and the reading, then the title and the text; it comes out of its branch
   (from below for the cards over the line, from above for those under it) as --q goes from 0 to 1,
   and its parts follow one another: the head from a fifth, the title from two fifths, the text from
   three fifths */
.mvs-process__card { position: relative; overflow: hidden; height: 100%; padding: 1.5rem 1.6rem 1.6rem; border-radius: var(--r-lg); background: #fff;
  box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 18px 40px -22px rgb(16 24 40 / 35%);
  opacity: var(--q, 1); transform: translateY(calc((1 - var(--q, 1)) * var(--from, 28px))) scale(calc(.94 + var(--q, 1) * .06)); transform-origin: 50% var(--origin, 100%); }
.mvs-process__card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), rgb(227 30 36 / 0%)); }
.mvs-process__head, .mvs-process__title, .mvs-process__text { opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 12px)); }
.mvs-process__head { --t: clamp(0, calc(var(--q, 1) * 3 - .6), 1); display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.mvs-process__title { --t: clamp(0, calc(var(--q, 1) * 3 - 1.2), 1); margin: 0 0 .5rem; font-size: 1.2rem; letter-spacing: -.015em; }
.mvs-process__text { --t: clamp(0, calc(var(--q, 1) * 3 - 1.8), 1); color: var(--muted); font-size: .9375rem; }
.mvs-process__text p:last-child { margin-bottom: 0; }
.mvs-process__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #ef3a40 0%, #a3121a 100%); box-shadow: 0 12px 24px -10px rgb(227 30 36 / 60%); }
.mvs-process__icon .mvs-ico { width: 28px; height: 28px; stroke-width: 2; }
.mvs-process__reading { display: flex; flex-direction: column; margin: 0; line-height: 1.1; }
.mvs-process__reading strong { color: var(--accent); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.mvs-process__reading span { margin-top: .3rem; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* below 992px: the main line comes down the left side; the cards to its right */
@media (max-width: 991.98px) {
  .mvs-sec--facts { padding-bottom: 5rem; }   /* room for the line leaving under the last card */
  .mvs-sec--facts .mvs-process__label { padding-left: 3.25rem; }
  .mvs-process__steps { padding-left: 3.25rem; }
  .mvs-process__card { --from: 0px; transform: translateX(calc((1 - var(--q, 1)) * -24px)) scale(calc(.96 + var(--q, 1) * .04)); transform-origin: 0 2.75rem; }
}

/* from 992px: nine columns, three rows; each card spans three columns, two columns on from the last
   one, alternately over the main line (row 1) and under it (row 3); the line runs in row 2 */
@media (min-width: 992px) {
  .mvs-process { --pipe: 28px; }
  .mvs-process__steps { grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: auto 210px auto; gap: 0 1.25rem; }
  .mvs-process__step { grid-row: 1; grid-column: span 3 / 4; align-self: end; }
  .mvs-process__step:nth-child(2) { grid-row: 3; grid-column: 3 / span 3; align-self: start; }
  .mvs-process__step:nth-child(3) { grid-row: 1; grid-column: 5 / span 3; }
  .mvs-process__step:nth-child(4) { grid-row: 3; grid-column: 7 / span 3; align-self: start; }
  .mvs-process__step:nth-child(even) .mvs-process__card { --from: -28px; --origin: 0%; }
}

/* a row that swipes sideways on phones, one card at a time, with dots under it (site.js) */
.mvs-dots { display: none; }
@media (max-width: 575.98px) {
  [data-swipe] { flex-wrap: nowrap; gap: .75rem; margin: 0 -.75rem; padding: .25rem .75rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: .75rem; scrollbar-width: none; }
  [data-swipe]::-webkit-scrollbar { display: none; }
  [data-swipe] > *, [data-swipe] > * > * { scroll-snap-align: start; }
  .mvs-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .25rem; }
  .mvs-dots span { width: 7px; height: 7px; border-radius: 99px; background: rgb(16 24 40 / 18%); transition: width .25s, background-color .25s; }
  .mvs-dots span.is-on { width: 22px; background: var(--accent); }
}

/* "Why choose" (partials/why-boxes.php): a test & inspection report lying on the dark grid. A white
   sheet: its head (the document's name, the company's facts), column heads, a row per check (number,
   title and text, result, status) and a foot with the summary seal. A row's red "Verified" stamp is
   put down as it comes into view (.is-stamped, site.js [data-report]); the seal follows the last. */
:is(.mvs--home, .mvs--page) .mvs-sec--features { background-color: var(--navy); background-image: var(--glow), var(--grid); background-size: auto, 56px 56px, 56px 56px; color: var(--on-dark-muted); }
:is(.mvs--home, .mvs--page) .mvs-sec--features .mvs-sechead { margin-bottom: 2.25rem; }
:is(.mvs--home, .mvs--page) .mvs-sec--features .mvs-h { color: #fff; }
.mvs-report { position: relative; overflow: hidden; border-radius: 18px; background: #fff; color: var(--text); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 80%);
  background-image: linear-gradient(rgb(16 24 40 / 3.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 3.5%) 1px, transparent 1px); background-size: 16px 16px; }
.mvs-report::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(16 24 40 / 14%); border-radius: 10px; pointer-events: none; }   /* the sheet's frame line */
.mvs-report__head { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 1rem 2rem; padding: 1.75rem 2rem 1.4rem; border-bottom: 2px solid var(--ink); }
.mvs-report__name { display: flex; flex-direction: column; justify-content: center; gap: .3rem; }
.mvs-report__doc { color: var(--ink); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: .06em; line-height: 1.1; text-transform: uppercase; }
.mvs-report__sub { color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mvs-report__meta { display: grid; grid-template-columns: repeat(4, auto); margin: 0; border: 1px solid rgb(16 24 40 / 16%); border-radius: 8px; background: #fff; }
.mvs-report__meta div { padding: .5rem .9rem; }
.mvs-report__meta div + div { border-left: 1px solid rgb(16 24 40 / 16%); }
.mvs-report__meta dt { color: var(--muted); font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mvs-report__meta dd { margin: .15rem 0 0; color: var(--ink); font-size: .875rem; font-weight: 800; white-space: nowrap; }

/* the table: column heads, then the rows */
.mvs-report__cols, .mvs-report__row { display: grid; grid-template-columns: 3.5rem minmax(0, 1.55fr) minmax(0, 1fr) 9.5rem; align-items: center; column-gap: 1.75rem; padding-inline: 2rem; }
.mvs-report__cols { padding-block: .7rem; border-bottom: 1px solid rgb(16 24 40 / 14%); background: var(--surface); color: var(--muted); font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mvs-report__cols span:last-child { text-align: center; }
.mvs-report__row { position: relative; padding-block: 1.35rem; border-bottom: 1px dashed rgb(16 24 40 / 18%); transition: background-color .4s; }
.mvs-report__row:has(+ .mvs-report__foot) { border-bottom: 0; }
.mvs-report__row.is-stamped { background: linear-gradient(90deg, rgb(227 30 36 / 4%), transparent 40%); }
.mvs-report__no { align-self: start; color: rgb(16 24 40 / 30%); font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; transition: color .4s; }
.mvs-report__row.is-stamped .mvs-report__no { color: var(--accent); }
.mvs-report__title { margin: 0 0 .35rem; color: var(--ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.mvs-report__text { color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.mvs-report__text p { margin: 0; }
.mvs-report__result strong { color: var(--ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.mvs-report__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.mvs-report__chips li { padding: .2rem .5rem; border: 1px solid rgb(16 24 40 / 18%); border-radius: 6px; background: #fff; color: var(--ink); font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
/* the stamp: a red outlined, slightly turned mark that comes down on the paper */
.mvs-report__stamp { justify-self: center; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border: 2px solid var(--accent); border-radius: 8px; color: var(--accent);
  font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-8deg); box-shadow: inset 0 0 0 2px rgb(227 30 36 / 15%); }
.mvs-report__stamp .mvs-ico { width: 16px; height: 16px; stroke-width: 2.25; }
.mvs-report__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 2rem 1.4rem; border-top: 2px solid var(--ink); color: var(--ink); font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mvs-report__seal { display: block; flex: none; width: 156px; height: 156px; margin: -1.75rem .25rem -1.25rem 0; color: #cf1a22; font-family: var(--font); mix-blend-mode: multiply; transform: rotate(-14deg); }
html.js .mvs-report:not(.is-done) .mvs-report__row:not(.is-stamped) .mvs-report__stamp,
html.js .mvs-report:not(.is-done) .mvs-report__seal { opacity: 0; }
.mvs-report__row.is-stamped .mvs-report__stamp { animation: mvs-stamp .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.mvs-report.is-done .mvs-report__seal { animation: mvs-stamp .5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes mvs-stamp { from { opacity: 0; transform: rotate(-20deg) scale(2.2); } 70% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mvs-report__stamp, .mvs-report__seal { animation: none !important; } }

/* below 992px: a row is the number and the stamp over the title, the text, the result */
@media (max-width: 991.98px) {
  .mvs-report__cols { display: none; }
  .mvs-report__head { padding: 1.4rem 1.25rem 1.1rem; }
  /* the company's name across the top, the three facts in a row under it */
  .mvs-report__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .mvs-report__meta div:first-child { grid-column: 1 / -1; border-bottom: 1px solid rgb(16 24 40 / 16%); }
  .mvs-report__meta div:nth-child(2) { border-left: 0; }
  .mvs-report__meta div { padding: .45rem .7rem; }
  .mvs-report__meta dd { font-size: .8125rem; }
  /* a row: the number beside the title and text, then the result with the stamp at the end */
  .mvs-report__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no check check" "no result stamp"; row-gap: .75rem; column-gap: .8rem; padding: 1.1rem 1.1rem 1.2rem; align-items: start; }
  .mvs-report__no { grid-area: no; font-size: 1.35rem; }
  .mvs-report__check { grid-area: check; }
  .mvs-report__result { grid-area: result; align-self: center; }
  .mvs-report__result strong { font-size: 1.05rem; }
  .mvs-report__stamp { grid-area: stamp; align-self: center; padding: .25rem .45rem; font-size: .6875rem; letter-spacing: .1em; }
  .mvs-report__stamp .mvs-ico { width: 12px; height: 12px; }
  .mvs-report__title { font-size: 1.05rem; }
  .mvs-report__text { font-size: .875rem; }
  .mvs-report__foot { padding: 1rem 1.25rem 1.25rem; font-size: .6875rem; }
  .mvs-report__seal { width: 104px; height: 104px; margin: -1rem 0 -.75rem; }
}

/* clients as a register (cards.php clients_register): on light grey drawing paper, a line about them
   with the count, then a card per client: the logo in full colour on white, under it the company's
   name, on two conveyor belts running opposite ways across the whole width (as the industries on
   the product pages, .mvs-belt; site.js data-belt stops them off the screen; Krunal, 30 Oct). On
   hover the belt stops, a red line runs along the card's top and it lifts, as the other cards on the
   page. The cards go up one by one once in view (.is-in; .is-settled then drops the delays). */
@keyframes mvs-marquee { to { transform: translateX(-100%); } }   /* the footer's moving phrases */
.mvs-sec--clients { padding-block: var(--sec-pad); overflow-x: clip; background-color: var(--surface);
  background-image: linear-gradient(rgb(16 24 40 / 4.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 4.5%) 1px, transparent 1px); background-size: 80px 80px; background-position: center top; }
.mvs-register__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: 2.25rem; }
.mvs-register__head .mvs-clients__label { margin-bottom: .9rem; }
.mvs-register__lead { margin: 0 0 .6rem; color: var(--ink); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.mvs-register__sub { max-width: 46rem; margin: 0; color: var(--text); font-size: 1.0625rem; }
/* the count: a card with the number (counting up once in view, site.js) and what it counts */
.mvs-register__stat { position: relative; display: flex; align-items: center; gap: 1.1rem; margin: 0; padding: 1rem 1.6rem 1rem 1.3rem; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 16px 32px -24px rgb(16 24 40 / 55%); line-height: 1; }
.mvs-register__stat::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--accent); }
.mvs-register__stat strong { display: flex; align-items: flex-start; color: var(--ink); font-size: clamp(2.75rem, 4.5vw, 3.5rem); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mvs-register__stat em { margin-left: .05em; color: var(--accent); font-size: .6em; font-style: normal; line-height: 1.1; }
.mvs-register__stat > span { color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; line-height: 1.45; text-transform: uppercase; }
.mvs-belt.mvs-belt--clients { --tile: 210px; --gap: 1.1rem; margin-inline: calc(50% - 50vw); }
.mvs-belt--clients .mvs-belt__row { margin-block: -.75rem -1.75rem; padding-block: .75rem 1.75rem; }   /* room for a lifted card and its shadow */
.mvs-belt--clients .mvs-belt__track { animation-duration: 60s; }
.mvs-belt--clients .mvs-belt__row--back .mvs-belt__track { animation-duration: 68s; }
.mvs-belt--clients .mvs-belt__set { margin: 0; padding: 0 var(--gap) 0 0; }
.mvs-belt--clients .mvs-register__card { flex: none; width: var(--tile); }
.mvs-register__card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 16px 32px -26px rgb(16 24 40 / 55%); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, opacity .5s; }
.mvs-register__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.mvs-register__card:hover { transform: translateY(-5px); box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 26px 44px -26px rgb(16 24 40 / 65%); }
.mvs-register__card:hover::before { transform: scaleX(1); }
.mvs-register__pic { flex: none; display: grid; place-items: center; aspect-ratio: 1.6; padding: 10% 12%; background: #fff; }   /* the same height in every card, whatever the name */
.mvs-register__logo { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.mvs-register__card:hover .mvs-register__logo { transform: scale(1.05); }
.mvs-register__name { display: -webkit-box; margin: 0 1rem .9rem; padding-top: .75rem; overflow: hidden; border-top: 1px dashed rgb(16 24 40 / 16%); color: var(--ink); font-size: .875rem; font-weight: 700; line-height: 1.3;
  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
html.js .mvs-register:not(.is-in) .mvs-register__card { opacity: 0; transform: translateY(24px); }
.mvs-register.is-in:not(.is-settled) .mvs-register__card { transition-delay: calc(var(--i, 0) * 45ms); }
@media (max-width: 991.98px) { .mvs-belt.mvs-belt--clients { --tile: 180px; --gap: .85rem; } }
@media (max-width: 575.98px) {
  .mvs-register__head { flex-direction: column; align-items: flex-start; margin-bottom: 1.5rem; }
  .mvs-register__stat { padding: .8rem 1.3rem .8rem 1.1rem; }
  .mvs-belt.mvs-belt--clients { --tile: 150px; --gap: .65rem; }
  .mvs-register__card { border-radius: 14px; }
  .mvs-register__name { margin: 0 .75rem .75rem; font-size: .8125rem; }
}

/* ---------------------------------------------------------------- home */
.mvs--home .mvs-sec--range + .mvs-sec--features + .mvs-sec--range { background: var(--surface); }

/* product ranges: the heading, text and button on the left (a third), the products on the right
   running out to the screen's edge (--edge: from the container's content to the screen's edge);
   phones: the text first (its later paragraphs behind "Read more"), the row under it */
:is(.mvs--home :is(.mvs-sec--range, .mvs-sec--blog), .mvs--location .mvs-sec--range, .mvs--post .mvs-sec--related-posts) { --edge: .75rem; overflow-x: clip; }
.mvs--home .mvs-sec--categories + .mvs-sec--range { background: var(--surface); }
@media (min-width: 576px) { :is(.mvs--home :is(.mvs-sec--range, .mvs-sec--blog), .mvs--location .mvs-sec--range, .mvs--post .mvs-sec--related-posts) { --edge: calc((100vw - 516px) / 2); } }
@media (min-width: 768px) { :is(.mvs--home :is(.mvs-sec--range, .mvs-sec--blog), .mvs--location .mvs-sec--range, .mvs--post .mvs-sec--related-posts) { --edge: calc((100vw - 696px) / 2); } }
@media (min-width: 992px) {
  :is(.mvs--home :is(.mvs-sec--range, .mvs-sec--blog), .mvs--location .mvs-sec--range, .mvs--post .mvs-sec--related-posts) { --edge: calc((100vw - 936px) / 2); }
  .mvs--home .mvs-sec--range .row { --bs-gutter-x: 3rem; }
  .mvs--home .mvs-sec--range .mvs-wrap--heading { width: 40%; container-type: inline-size; }
  .mvs--home .mvs-sec--range .mvs-wrap--shop { width: 60%; }
  .mvs--home .mvs-sec--range .mvs-wrap--heading > .mvs-text { -webkit-hyphens: auto; hyphens: auto; }   /* a narrow justified column */
  /* .mvs-sec--flip (thermoplastic valves), the mirror of the rows above: the text on the right; the
     row runs right to left, its first card by the text, the others off the screen's left edge
     (site.js measures it from its start). The bar mirrored too: the count on the right, the scale
     filling leftwards, the button that brings more on the left with its arrow pointing left. */
  .mvs--home .mvs-sec--range.mvs-sec--flip .mvs-wrap--heading { order: 1; }
  .mvs--home .mvs-sec--flip .mvs-rail__track { direction: rtl; margin-left: calc(-1 * var(--edge)); margin-right: -.75rem; padding-left: var(--edge); padding-right: .75rem; scroll-padding-inline: .75rem var(--edge); }
  .mvs--home .mvs-sec--flip :is(.mvs-rcard, .mvs-related__more) { direction: ltr; }
  .mvs--home .mvs-sec--flip :is(.mvs-rail__bar, .mvs-rail__nav) { flex-direction: row-reverse; }
  .mvs--home .mvs-sec--flip .mvs-rail__btn .mvs-ico { transform: scaleX(-1); }
  .mvs--home .mvs-sec--flip .mvs-rail__fill { left: auto; right: 0; }
  /* the text mirrored as well: set to the right, the label's line after it, fading leftwards */
  .mvs--home .mvs-sec--flip .mvs-wrap--heading { text-align: right; }
  .mvs--home .mvs-sec--flip .mvs-wrap--heading > .mvs-text { text-align-last: right; }
  .mvs--home .mvs-sec--flip .mvs-wrap--heading > .mvs-btn { margin: .25rem 0 .25rem .25rem; }   /* flush with the text's right edge */
  .mvs--home .mvs-sec--flip .mvs-sechead .mvs-h--h5 { flex-direction: row-reverse; }
  .mvs--home .mvs-sec--flip .mvs-sechead .mvs-h--h5::before { background: linear-gradient(270deg, var(--accent), rgb(227 30 36 / 15%)); }
  /* "Manufacturer & Exporter" stays on one line: the heading's size follows the column (11.9em wide) */
  .mvs--home .mvs-sec--range .mvs-wrap--heading .mvs-h--h3 { font-size: min(2.5rem, 100cqi / 11.9); }
  .mvs--home .mvs-sec--range .mvs-wrap--heading .mvs-h--h3 .mvs-accent { display: block; }   /* a line of its own, never split */
}
/* the city pages' ranges the same way, but only from 1200px: below it a range is its text, then its
   row (a 40% column at 992-1199px is too narrow for their long texts) */
@media (min-width: 992px) and (max-width: 1199.98px) { .mvs--location .mvs-sec--range :is(.mvs-wrap--heading, .mvs-wrap--shop) { width: 100%; } }
@media (min-width: 1200px) {
  .mvs--location .mvs-sec--range .row { --bs-gutter-x: 3rem; }
  .mvs--location .mvs-sec--range .mvs-wrap--heading { width: 40%; container-type: inline-size; }
  .mvs--location .mvs-sec--range .mvs-wrap--shop { width: 60%; }
  .mvs--location .mvs-sec--range .mvs-wrap--heading > .mvs-text { -webkit-hyphens: auto; hyphens: auto; }   /* a narrow justified column */
  .mvs--location .mvs-sec--range.mvs-sec--flip .mvs-wrap--heading { order: 1; }
  .mvs--location .mvs-sec--flip .mvs-rail__track { direction: rtl; margin-left: calc(-1 * var(--edge)); margin-right: -.75rem; padding-left: var(--edge); padding-right: .75rem; scroll-padding-inline: .75rem var(--edge); }
  .mvs--location .mvs-sec--flip :is(.mvs-rcard, .mvs-related__more) { direction: ltr; }
  .mvs--location .mvs-sec--flip :is(.mvs-rail__bar, .mvs-rail__nav) { flex-direction: row-reverse; }
  .mvs--location .mvs-sec--flip .mvs-rail__btn .mvs-ico { transform: scaleX(-1); }
  .mvs--location .mvs-sec--flip .mvs-rail__fill { left: auto; right: 0; }
}
@media (min-width: 1200px) { :is(.mvs--home :is(.mvs-sec--range, .mvs-sec--blog), .mvs--location .mvs-sec--range, .mvs--post .mvs-sec--related-posts) { --edge: calc((100vw - 1116px) / 2); } }
@media (min-width: 1400px) { :is(.mvs--home :is(.mvs-sec--range, .mvs-sec--blog), .mvs--location .mvs-sec--range, .mvs--post .mvs-sec--related-posts) { --edge: calc((100vw - 1296px) / 2); } }
.mvs--home .mvs-sec--range .mvs-wrap--heading { order: -1; }
.mvs--home .mvs-sec--range .mvs-wrap--heading > .mvs-text { color: var(--text); font-size: 1.0625rem; text-align: justify; }   /* like "Know About MVS" */
@media (max-width: 575.98px) { .mvs--home .mvs-sec--range .mvs-wrap--heading > .mvs-text { -webkit-hyphens: auto; hyphens: auto; } }
.mvs--home .mvs-sec--range .mvs-wrap--heading > .mvs-text p:last-child { margin-bottom: 1rem; }

/* industrial valves (home), on drawing paper (a faint grid) with drawings of other valves than
   "Know About MVS" has (gate, diaphragm, plug) that draw themselves: the label and heading with
   "Explore All" beside them, then the text beside a row of cards (cards.php category_rail, moved
   on by site.js data-rail), three at a time. Below 1200px the text stands under the heading, then
   "Explore All", then the row: three cards to 992px, two to 576px, on phones one and the next's edge. */
.mvs-sec--categories { position: relative; overflow: hidden; background: #fff; }
.mvs-sec--categories::before { content: ""; position: absolute; inset: 0; pointer-events: none;   /* drawing paper, as behind "Know About MVS" */
  background-image: linear-gradient(rgb(16 24 40 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 6%) 1px, transparent 1px),
    linear-gradient(rgb(16 24 40 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 3%) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; background-position: center top;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.mvs-cats__drawings { position: absolute; inset: 0; pointer-events: none; }
.mvs-cats__drawings .mvs-drawing { color: rgb(16 24 40 / 13%); }
.mvs-drawing--cats1 { left: 58%; top: 2%; width: clamp(220px, 20vw, 320px); }
.mvs-drawing--cats2 { left: -2%; bottom: -5%; width: clamp(240px, 22vw, 340px); }
.mvs-drawing--cats3 { right: -2%; bottom: 3%; width: clamp(220px, 20vw, 320px); }
.mvs-cats { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 3rem; }
.mvs-cats > .mvs-sechead { margin: 0; }
.mvs-cats > .mvs-btn { justify-self: start; margin: 0; }
.mvs-cats__intro { color: var(--text); font-size: 1.0625rem; text-align: justify; }
.mvs-cats__intro p:last-child { margin-bottom: 0; }
.mvs-cats__rail { min-width: 0; margin-top: .75rem; }
@media (max-width: 575.98px) { .mvs-cats__intro { -webkit-hyphens: auto; hyphens: auto; } }
@media (min-width: 1200px) {
  .mvs-cats { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); align-items: start; }
  .mvs-cats > .mvs-sechead { grid-column: 1 / -1; grid-row: 1; }
  .mvs-cats > .mvs-btn { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; }
  .mvs-cats__intro { grid-column: 1; grid-row: 2; margin-top: .75rem; -webkit-hyphens: auto; hyphens: auto; }   /* a narrow justified column, level with the cards */
  .mvs-cats__rail { grid-column: 2; grid-row: 2; }
}

/* a card: the picture (its number on a dark tab, the drawing's corner marks), then the name, a
   sentence and a foot with how many products and the arrow; on hover it lifts, a red line runs
   along its top and the arrow turns red */
.mvs-ccard { position: relative; flex: none; display: flex; flex-direction: column; width: calc((100% - 2.5rem) / 3); overflow: hidden; border: 1px solid var(--line); border-radius: 0; background: #fff;
  box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 28px 50px -34px rgb(16 24 40 / 55%); scroll-snap-align: start; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, opacity .6s; }
.mvs-ccard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.mvs-ccard:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 36px 60px -34px rgb(16 24 40 / 65%); }
.mvs-ccard:hover::before { transform: scaleX(1); }
.mvs-ccard__pic { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--plate); }
.mvs-ccard__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.mvs-ccard:hover .mvs-ccard__pic img { transform: scale(1.06); }
.mvs-ccard__pic::after { content: ""; position: absolute; inset: 12px; pointer-events: none; --c: rgb(227 30 36 / 85%);   /* three corners; the number's tab is the fourth */
  background: linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px;
  background-repeat: no-repeat; }
.mvs-ccard__tag { position: absolute; left: 0; bottom: 0; padding: .45rem .8rem .4rem 1rem; border-radius: 0 14px 0 0; background: var(--ink); color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.mvs-ccard__tag small { margin-left: .15rem; color: rgb(255 255 255 / 55%); font-size: .7rem; font-weight: 700; }
.mvs-ccard__body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.35rem .95rem; }
.mvs-ccard__title { margin: 0 0 .4rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.mvs-ccard__title a { color: var(--ink); text-decoration: none; }
.mvs-ccard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card opens the category */
.mvs-ccard__desc { display: -webkit-box; margin: 0 0 .75rem; overflow: hidden; color: var(--muted); font-size: .9rem; line-height: 1.5; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.mvs-ccard__more { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .7rem; border-top: 1px dashed rgb(16 24 40 / 16%);
  color: var(--ink); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.mvs-ccard__more .mvs-ico { box-sizing: content-box; width: 14px; height: 14px; padding: 9px; border-radius: 50%; background: var(--surface); stroke-width: 2.25; transition: background-color .25s, color .25s, transform .35s; }
.mvs-ccard:hover .mvs-ccard__more .mvs-ico { background: var(--accent); color: #fff; transform: rotate(45deg); }
@media (min-width: 1200px) and (max-width: 1399.98px) {   /* the narrowest three */
  .mvs-ccard__body { padding-inline: 1.1rem; }
  .mvs-ccard__title { font-size: 1.2rem; }
}
@media (max-width: 991.98px) { .mvs-ccard { width: calc((100% - 1.25rem) / 2); } }
@media (max-width: 575.98px) { .mvs-ccard { width: 78vw; } }

/* the newest articles (index.php, cards.php blog_rail): the label and heading with "View All
   Articles" beside them, then a row of article cards like the product rows, out to the screen's
   right edge: the picture with its date on a tab, the category, the title, two lines from the
   article and "Read article". */
.mvs-blog__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 2rem; }
.mvs-blog__top .mvs-sechead { margin: 0; }
.mvs-blog__top .mvs-h--h3 { color: var(--ink); }   /* a paragraph, coloured as the heading tags are */
.mvs-blog__top .mvs-btn { margin: 0; }
.mvs-bcard { position: relative; flex: none; display: flex; flex-direction: column; width: clamp(290px, 25vw, 360px); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff;
  box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 24px 44px -32px rgb(16 24 40 / 55%); scroll-snap-align: start; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, opacity .6s; }
.mvs-bcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.mvs-bcard:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 34px 56px -32px rgb(16 24 40 / 65%); }
.mvs-bcard:hover::before { transform: scaleX(1); }
/* the article pictures are 16:9 with words on them: shown whole (never cropped, no zoom) */
.mvs-bcard__pic { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }
.mvs-bcard__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mvs-bcard__date { position: absolute; left: 0; bottom: 0; padding: .45rem .8rem .4rem .95rem; border-radius: 0 13px 0 0; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.mvs-bcard__body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.25rem 1.1rem; }
.mvs-bcard__cat { margin-bottom: .45rem; color: var(--accent); font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mvs-bcard__title { display: -webkit-box; margin: 0 0 .5rem; overflow: hidden; font-size: 1.125rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.mvs-bcard__title a { color: var(--ink); text-decoration: none; }
.mvs-bcard__title a:hover { color: var(--accent-ink); }
.mvs-bcard__text { display: -webkit-box; margin: 0 0 1rem; overflow: hidden; color: var(--muted); font-size: .875rem; line-height: 1.55; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.mvs-bcard__body .mvs-link { margin-top: auto; padding-top: .8rem; border-top: 1px dashed rgb(16 24 40 / 16%); }
@media (max-width: 575.98px) { .mvs-bcard { width: 80vw; } }

/* the blog's listings (blogs.php, category.php: cards.php blog_listing, blog_topics): the topics
   as chips (.mvs-ranges--types, as the product listings' types), then the blog cards three to a
   row (two below 992px); on a phone a card is a row - the picture on the left, the date, the
   category and the title beside it */
.mvs-topics { margin: 1.5rem 0 2rem; }
.mvs-sec:not(:has(.mvs-h--h2)) .mvs-topics { margin-top: 0; }   /* (the archives: straight under the title band) */
/* a row of chips on one line (site.js [data-chiprow]): it scrolls sideways, fading at the edge that
   has more (.at-start / .at-end); round previous / next buttons beside it, gone when it all fits (.is-fit) */
.mvs-chiprow { display: flex; align-items: center; gap: .6rem; }
.mvs-chiprow > .mvs-ranges { flex: 1; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.mvs-chiprow > .mvs-ranges::-webkit-scrollbar { display: none; }
.mvs-chiprow.at-start > .mvs-ranges { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.mvs-chiprow.at-end > .mvs-ranges { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%); mask-image: linear-gradient(90deg, transparent, #000 4%); }
.mvs-chiprow.is-fit > .mvs-ranges { -webkit-mask-image: none; mask-image: none; }
.mvs-chiprow__btn { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); transition: background-color .15s, color .15s, opacity .15s; }
.mvs-chiprow__btn .mvs-ico { width: 18px; height: 18px; }
.mvs-chiprow__btn:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: #fff; }
.mvs-chiprow__btn:disabled { opacity: .3; cursor: default; }
.mvs-chiprow.is-fit .mvs-chiprow__btn, html:not(.js) .mvs-chiprow__btn { display: none; }
@media (max-width: 767.98px) { .mvs-chiprow__btn { display: none; } }   /* (a finger swipes it) */
.mvs-bcard__cat a { color: inherit; text-decoration: none; }
.mvs-bcard__cat a:hover { color: var(--accent-ink); }
.mvs-posts.mvs-posts--sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }   /* (over .mvs-posts' auto-fill, later in this file) */
.mvs-posts--sheet .mvs-bcard { width: auto; }
@media (max-width: 991.98px) { .mvs-posts.mvs-posts--sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .mvs-topics { margin: 1.1rem 0 1.4rem; }
  .mvs-posts.mvs-posts--sheet { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .mvs-posts--sheet .mvs-bcard { flex-direction: row; align-items: stretch; border-radius: 16px; }
  .mvs-posts--sheet .mvs-bcard__pic { flex: none; align-self: center; width: 42%; margin-left: .55rem; border-radius: 10px; }
  .mvs-posts--sheet .mvs-bcard__date { padding: .25rem .5rem .2rem .55rem; border-radius: 0 8px 0 0; font-size: .6875rem; }
  .mvs-posts--sheet .mvs-bcard__body { min-width: 0; padding: .75rem .85rem .8rem; }
  .mvs-posts--sheet .mvs-bcard__cat { margin-bottom: .25rem; font-size: .6875rem; }
  .mvs-posts--sheet .mvs-bcard__title { margin: 0; font-size: .9375rem; -webkit-line-clamp: 3; line-clamp: 3; }
  .mvs-posts--sheet .mvs-bcard__text, .mvs-posts--sheet .mvs-bcard__body .mvs-link { display: none; }   /* (the title and the picture link to it) */
}

/* ---------------------------------------------------------------- product cards and rows */
.mvs-products { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mvs-pcard { display: flex; flex-direction: column; background: #fff; border-radius: 0; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.mvs-pcard:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
/* the product pictures carry their own ground (the MVS mark behind the product): they fill their box */
.mvs-pcard__img { display: block; margin: .6rem .6rem 0; border-radius: 0; background: var(--plate); overflow: hidden; }   /* product cards square, site-wide (Krunal, 30 Oct) */
.mvs-pcard__img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .45s; }
.mvs-pcard:hover .mvs-pcard__img img { transform: scale(1.06); }
.mvs-pcard__body { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: 1.1rem 1.25rem 1.25rem; }
.mvs-pcard__title { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.mvs-pcard__title a { color: var(--ink); text-decoration: none; }
.mvs-pcard__title a:hover { color: var(--accent-ink); }
.mvs-pcard__text { font-size: .9rem; color: var(--muted); }
.mvs-pcard__text p:last-child { margin-bottom: 0; }
/* "View product" and the quote button share a line when the card is wide enough (about 290px);
   in narrower cards the button takes the line below, full width */
.mvs-pcard__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; margin-top: auto; padding-top: .6rem; }
.mvs-pcard__more { white-space: nowrap; }
.mvs-pcard__actions .btn { flex: 1 0 auto; justify-content: space-between; max-width: 100%; }

/* home ranges (cards.php product_rail): a row of datasheet cards that scrolls sideways, out to the
   screen's right edge; it can be dragged with the mouse. The cards rise in one after another when
   the row comes into view (.is-in, site.js). Under it a bar: the count, a scale (a tick per
   product, the red line filling as the row scrolls) and the previous / next buttons. */
.mvs-rail { position: relative; }
.mvs-rail__track { display: flex; gap: 1.25rem; margin: -.75rem calc(-1 * var(--edge, .75rem)) 0 -.75rem; padding: .75rem var(--edge, .75rem) 1.75rem .75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: .75rem; scrollbar-width: none; overscroll-behavior-x: contain; }
.mvs-rail__track::-webkit-scrollbar { display: none; }
.mvs-rail__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.mvs-rail__track.is-dragging a { pointer-events: none; }
@media (max-width: 991.98px) { .mvs-rail__track { margin-left: calc(-1 * var(--edge, .75rem)); padding-left: var(--edge, .75rem); scroll-padding-inline: var(--edge, .75rem); } }

/* a datasheet card: picture (number tab, three drawing corner marks), name, key specifications
   with dotted leaders, "View product" and a small quote button; hover as the category cards */
.mvs-rcard { position: relative; flex: none; display: flex; flex-direction: column; width: clamp(280px, 21vw, 310px); overflow: hidden; border: 1px solid var(--line); border-radius: 0; background: #fff;
  box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 24px 44px -32px rgb(16 24 40 / 55%); scroll-snap-align: start; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, opacity .6s; }
.mvs-rcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.mvs-rcard:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 34px 56px -32px rgb(16 24 40 / 65%); }
.mvs-rcard:hover::before { transform: scaleX(1); }
.mvs-rcard__pic { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--plate); }
.mvs-rcard__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.mvs-rcard:hover .mvs-rcard__pic img { transform: scale(1.06); }
.mvs-rcard__pic::after { content: ""; position: absolute; inset: 12px; pointer-events: none; --c: rgb(227 30 36 / 85%);
  background: linear-gradient(var(--c), var(--c)) 0 0 / 16px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 16px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 16px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 16px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 16px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 16px;
  background-repeat: no-repeat; }
.mvs-rcard__no { position: absolute; left: 0; bottom: 0; padding: .4rem .75rem .35rem .9rem; border-radius: 0 13px 0 0; background: var(--ink); color: #fff; font-size: .95rem; font-weight: 800; line-height: 1; }
.mvs-rcard__no small { margin-left: .1rem; color: rgb(255 255 255 / 55%); font-size: .65rem; font-weight: 700; }
.mvs-rcard__body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.2rem 1rem; }
.mvs-rcard__title { margin: 0 0 .7rem; font-size: 1.125rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.mvs-rcard__title a { color: var(--ink); text-decoration: none; }
.mvs-rcard__title a:hover { color: var(--accent-ink); }
.mvs-rcard__specs { display: grid; gap: .35rem; margin: 0 0 .9rem; }
.mvs-rcard__specs div { display: flex; align-items: baseline; gap: .4rem; min-width: 0; font-size: .8125rem; line-height: 1.35; }
.mvs-rcard__specs dt { flex: none; color: var(--muted); font-weight: 600; }
.mvs-rcard__specs div::after { content: ""; order: 1; flex: 1 0 1rem; border-bottom: 1px dotted rgb(16 24 40 / 25%); transform: translateY(-3px); }   /* the leader between the name and the value */
.mvs-rcard__specs dd { order: 2; flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.mvs-rcard__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .8rem; border-top: 1px dashed rgb(16 24 40 / 16%); }
.mvs-rcard__foot .mvs-link { white-space: nowrap; }
.mvs-rcard__quote { flex: none; padding: .45rem .9rem; border-radius: 99px; background: var(--accent-ink); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; transition: background-color .2s, transform .2s; }
.mvs-rcard__quote:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); }
/* coming into view: one card after another */
html.js .mvs-rail:not(.is-in) .mvs-rail__track > * { opacity: 0; transform: translateY(36px); }
html.js .mvs-rail.is-in .mvs-rail__track > * { transition-delay: calc(var(--i, 0) * 70ms), 0s, calc(var(--i, 0) * 70ms); }   /* transform, shadow, opacity */
html.js .mvs-rail.is-in .mvs-rail__track > :hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { html.js .mvs-rail:not(.is-in) .mvs-rail__track > * { opacity: 1; transform: none; } }

/* the bar under the row */
.mvs-rail__bar { display: flex; align-items: center; gap: 1.5rem; margin-top: .25rem; }
.mvs-rail__count { flex: none; min-width: 4.5rem; color: var(--muted); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mvs-rail__count b { color: var(--ink); font-size: 1.35rem; font-weight: 800; }
.mvs-rail__scale { position: relative; flex: 1; height: 2px; background: rgb(16 24 40 / 16%); }
.mvs-rail__scale::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 10px;   /* a tick per product */
  background: repeating-linear-gradient(90deg, rgb(16 24 40 / 30%) 0 2px, transparent 2px 100%) 0 0 / calc(100% / var(--seg, 7)) 100%; }
.mvs-rail__scale::after { content: ""; position: absolute; right: 0; top: -4px; width: 2px; height: 10px; background: rgb(16 24 40 / 30%); }
.mvs-rail__fill { position: absolute; top: -1px; left: 0; height: 4px; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: var(--accent); }
.mvs-rail__nav { display: flex; flex: none; gap: .6rem; }
.mvs-rail.is-static .mvs-rail__bar { display: none; }
.mvs-rail__btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); transition: background-color .15s, color .15s, opacity .15s; }
.mvs-rail__btn:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.mvs-rail__btn:disabled { opacity: .35; cursor: default; }
html:not(.js) .mvs-rail__bar { display: none; }
@media (max-width: 575.98px) { .mvs-rcard { width: 78vw; } .mvs-rail__nav { display: none; } }

/* rows of picture + name (related products, city pages) */
.mvs-products--row { gap: 1rem; }
.mvs-products--row .mvs-pcard__body { padding: .9rem 1.1rem 1.1rem; }
.mvs-products--row .mvs-pcard__title { font-size: .975rem; }
@media (min-width: 1200px) { .mvs-products--row:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 992px) { .mvs-related .mvs-products--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* product pages: the template's "Related Valves" heading comes before WooCommerce's "Related
   products"; the tag is shown above the heading, like every other section head (the HTML order
   stays the live site's) */
.row:has(> .mvs-wrap--product_related) { flex-direction: column; flex-wrap: nowrap; }
.mvs-wrap--product_related, .mvs-wrap--product_related > .mvs-related { display: contents; }
.mvs-wrap--product_related .mvs-related__title { order: -1; align-self: flex-start; margin: var(--bs-gutter-y) 0 0 calc(var(--bs-gutter-x) * .5); }
.row:has(> .mvs-wrap--product_related) > .mvs-wrap--product_reviews { margin-top: 1.1rem; }
.mvs-wrap--product_related .mvs-products { margin: 2rem calc(var(--bs-gutter-x) * .5) 0; }
@media (max-width: 767.98px) { .mvs-wrap--product_related .mvs-products--row { margin: 1.75rem 0 0; } }
/* the related products as datasheet cards, then a navy card for the product's whole range (its
   category: how many, its name, "View the range"); two to a row below 1200px, a row to swipe on a phone */
.mvs-products--related { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.mvs-products--related .mvs-rcard { width: auto; }
@media (max-width: 1199.98px) { .mvs-products--related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .mvs-wrap--product_related .mvs-products--related { margin: 1.5rem 0 0; }
  .mvs-products--related { grid-template-columns: none; grid-auto-columns: 80%; grid-auto-flow: column; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;   /* (its row reaches the screen's edges already) */
    margin-inline: 0 !important; padding: .25rem calc(var(--bs-gutter-x, 1.5rem) * .5) 1rem; scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); }
  .mvs-products--related > * { scroll-snap-align: start; }
}
/* the range card: a product card's shape - a photo of such valves in service (square, the drawing's
   corner marks), then "Complete range", its name, how many and a red "View all" bar */
.mvs-related__more { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 24px 44px -32px rgb(16 24 40 / 55%); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.mvs-related__more:hover { color: var(--ink); transform: translateY(-6px); box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 34px 56px -32px rgb(16 24 40 / 65%); }
.mvs-related__pic { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--ink); }
.mvs-related__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.mvs-related__pic::after { content: ""; position: absolute; inset: 12px; pointer-events: none; --c: rgb(255 255 255 / 85%);   /* the corner marks, light on the photo */
  background: linear-gradient(var(--c), var(--c)) 0 0 / 16px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 16px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 16px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 16px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 16px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 16px;
  background-repeat: no-repeat; }
.mvs-related__more:hover .mvs-related__pic img { transform: scale(1.06); }
.mvs-related__body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.2rem 1.2rem; }
.mvs-related__label { margin-bottom: .35rem; color: var(--accent-ink); font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mvs-related__name { font-size: 1.125rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.mvs-related__text { margin: .3rem 0 1rem; color: var(--muted); font-size: .875rem; }
.mvs-related__go { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding: .55rem .55rem .55rem 1rem; border-radius: 999px; background: var(--accent-ink); color: #fff; font-size: .875rem; font-weight: 700; transition: background-color .2s; }
.mvs-related__go .mvs-ico { flex: none; width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: #fff; color: var(--accent-ink); transition: transform .35s; }
.mvs-related__more:hover .mvs-related__go { background: var(--accent-hover); }
.mvs-related__more:hover .mvs-related__go .mvs-ico { transform: rotate(45deg); }
@media (max-width: 767.98px) {
  .mvs-products--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; gap: .9rem;
    overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: .25rem calc(var(--bs-gutter-x, 1.5rem) * .5) 1rem; scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); }
  .mvs-products--row .mvs-pcard { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- product page
   The pictures, kept in view on wide screens: the big one, square, with the drawing's corner marks
   and the counter of which picture it is (it opens over the page); under it a small one of each,
   the one shown marked red, the others faded (site.js [data-gallery]). Beside them the name, the
   categories as chips, the key specifications as a strip, the buttons (call and WhatsApp with their
   own signs) and the description ("Read more" on phones). Under all of it, full width, the
   datasheet: its title block, then the specification and material tables, their rows coming in
   once in view (site.js [data-rows]). */
@media (min-width: 992px) { .mvs--product .mvs-wrap--product_images { position: sticky; top: calc(var(--bar-h) + 1.5rem); align-self: flex-start; } }
.mvs-product__gallery { position: relative; }
.mvs-product__stage { position: relative; }
.mvs-product__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: rgb(255 255 255 / 92%); color: var(--ink); box-shadow: var(--shadow-sm); transform: translateY(-50%); transition: background-color .2s, border-color .2s, color .2s; }
.mvs-product__nav--prev { left: .9rem; }
.mvs-product__nav--next { right: .9rem; }
.mvs-product__nav:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.mvs-product__nav .mvs-ico { width: 20px; height: 20px; }
/* the time to the next picture, filling while the gallery goes round by itself (.is-playing) */
.mvs-product__timer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 3px; background: rgb(16 24 40 / 8%); pointer-events: none; }
.mvs-product__timer::after { content: ""; display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.mvs-product__gallery.is-playing .mvs-product__timer::after { animation: mvs-gallery-timer var(--slide, 4.5s) linear forwards; }
@keyframes mvs-gallery-timer { to { transform: scaleX(1); } }
.mvs-product__gallery a { position: relative; display: block; overflow: hidden; background: var(--plate); }
.mvs-product__gallery .mvs-gallery__item { border-radius: 0; box-shadow: 0 0 0 1px var(--line); cursor: zoom-in; }   /* square, as a datasheet's picture */
.mvs-product__gallery .mvs-gallery__item::after { content: ""; position: absolute; inset: 14px; pointer-events: none; --c: rgb(227 30 36 / 85%);
  background: linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px;
  background-repeat: no-repeat; }
.mvs-product__gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }   /* the picture's own ground fills the box */
.mvs-product__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.mvs-product__thumb::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; transition: border-color .2s; }
.mvs-product__thumb img { opacity: .55; transition: opacity .2s; }
.mvs-product__thumb:hover img, .mvs-product__thumb.is-on img { opacity: 1; }
.mvs-product__thumb:hover::after { border-color: rgb(16 24 40 / 35%); }
.mvs-product__thumb.is-on::after { border-color: var(--accent); }
.mvs-product__count { position: absolute; left: 0; top: 0; z-index: 1; padding: .5rem .85rem .45rem 1rem; border-radius: 0 0 12px 0; background: var(--ink); color: rgb(255 255 255 / 55%);
  font-size: .7rem; font-weight: 700; line-height: 1; pointer-events: none; }
.mvs-product__count b { margin-right: .1rem; color: #fff; font-size: 1rem; font-weight: 800; }
.mvs-product__summary { container-type: inline-size; }
/* the name on one line while it fits: the size follows the column and the name's length (--len),
   down to 1.6rem; longer names then wrap */
.mvs-product__summary > .mvs-h--h2 { margin: 0 0 .9rem; font-size: clamp(1.6rem, 100cqi / (var(--len, 30) * .56), 2.75rem); text-wrap: wrap; }
.mvs--product .mvs-product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1.4rem; color: var(--muted); font-size: .875rem; }
.mvs--product .mvs-product__meta .posted_in { margin-right: .2rem; }
.mvs--product .mvs-product__meta a { padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .8125rem; font-weight: 700; text-decoration: none; transition: border-color .2s, color .2s; }
.mvs--product .mvs-product__meta a:hover { border-color: var(--accent); color: var(--accent-ink); }
.mvs-product__keys { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0 0 1.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.mvs-product__keys div { min-width: 0; padding: .85rem 1.1rem .9rem; }
.mvs-product__keys div + div { border-left: 1px solid var(--line); }
.mvs-product__keys dt { margin-bottom: .3rem; color: var(--muted); font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mvs-product__keys dd { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink); font-size: .9375rem; font-weight: 800; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mvs-product__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
.mvs-product__actions .mvs-btn { margin: 0; }
.mvs--product .mvs-product__intro { padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: justify; }
.mvs-product__intro p { max-width: 72ch; }
@media (max-width: 575.98px) {
  .mvs-product__keys { grid-auto-flow: row; }
  .mvs-product__keys div + div { border-top: 1px solid var(--line); border-left: 0; }
  .mvs-product__keys div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem 1rem; }
  .mvs-product__keys dt { flex: none; margin: 0; }
  .mvs-product__keys dd { text-align: right; }
  .mvs-product__actions { display: grid; grid-template-columns: 1fr 1fr; }   /* the enquiry its own line, call and WhatsApp side by side */
  .mvs-product__actions .btn-primary { grid-column: 1 / -1; justify-content: space-between; }
  .mvs-product__actions .mvs-btn-sec { justify-content: space-between; gap: .5rem; min-height: 48px; padding-left: .95rem; font-size: .875rem; }
  .mvs-product__actions .mvs-btn-sec::after { width: 2rem; height: 2rem; }
  .mvs-btn__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* "Quote on" heard, not shown: no room */
  .mvs--product .mvs-product__intro { -webkit-hyphens: auto; hyphens: auto; }   /* narrow lines: no wide gaps */
}
/* the datasheet: a sheet with a navy head (the name, a quote button), then its parts - the
   specification and the material of construction - as numbered tabs, a red line under the one shown
   (site.js [data-tabs] sets --x and --w; without it the parts stand one under the other). A part's
   rows run in two columns on wide screens, each a small card - the name in small capitals on a grey
   key cell, the value on white (on a phone the key a strip over the value); they come in one after
   another, on view and on a change of tab.
   A table's header row ("Specification | Details") is kept out of sight: the tab names the part. */
.mvs-datasheet { margin-top: clamp(2.5rem, 5vw, 4rem); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -46px rgb(16 24 40 / 50%); }
.mvs-datasheet__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.4rem 1.75rem;
  background-color: var(--navy); background-image: var(--glow), var(--grid); background-size: auto, 28px 28px, 28px 28px; }
.mvs-datasheet__title { margin: 0; }
.mvs-datasheet__title span { display: block; margin-bottom: .3rem; color: var(--accent-on-dark); font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mvs-datasheet__title b { color: #fff; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.mvs-datasheet__head .mvs-btn { margin: 0; }
.mvs-datasheet__tabs { position: relative; display: flex; gap: .25rem; padding: 0 1.25rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.mvs-datasheet__tabs .mvs-h--h4 { margin: 0; font-size: inherit; letter-spacing: normal; }
.mvs-datasheet__tab { display: inline-flex; align-items: center; gap: .65rem; padding: 1.05rem .9rem 1rem; border: 0; background: none; color: var(--muted); font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; text-align: left; cursor: pointer; transition: color .2s; }
.mvs-datasheet__tab:hover, .mvs-datasheet__tab[aria-selected="true"] { color: var(--ink); }
.mvs-datasheet__tab:focus { outline: none; }
.mvs-datasheet__tab:focus-visible { border-radius: 10px; outline: 2px solid var(--accent); outline-offset: -6px; }
.mvs-datasheet__no { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: rgb(16 24 40 / 7%); color: var(--muted); font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.mvs-datasheet__tab[aria-selected="true"] .mvs-datasheet__no { background: var(--accent); color: #fff; }
.mvs-datasheet__tabs::after { content: ""; position: absolute; bottom: -1px; left: var(--x, 0); width: var(--w, 0); height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
  transition: left .35s cubic-bezier(.2, .7, .2, 1), width .35s cubic-bezier(.2, .7, .2, 1); }
.mvs-datasheet:not(.is-tabbed) .mvs-datasheet__tabs::after { display: none; }
.mvs-datasheet__part { min-width: 0; padding: .75rem 1.75rem 1.4rem; }
.mvs-datasheet__part[hidden] { display: none; }
.mvs-datasheet:not(.is-tabbed) .mvs-datasheet__part + .mvs-datasheet__part { border-top: 1px solid var(--line); }
/* the rows (.mvs-table's own th / td rules come later in this file; these outrank them; the imported
   tables carry Bootstrap's "table table-striped", whose stripes are an inset shadow on the cells) */
.mvs-datasheet .mvs-table { overflow: visible; border-radius: 0; box-shadow: none; }
.mvs-datasheet .mvs-table :is(table, tbody) { display: block; margin: 0; font-size: .9375rem; }
/* each row a small card: the name on a grey key cell, ruled off from the value on white */
.mvs-datasheet .mvs-table tbody { display: grid; gap: .6rem; padding-top: .65rem; }
@media (min-width: 992px) { .mvs-datasheet .mvs-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; } }
.mvs-datasheet .mvs-table tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.mvs-datasheet .mvs-table :is(th, td) { display: block; width: auto; padding: .8rem 1rem; border: 0; background: none; box-shadow: none; color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.5; text-align: left; }
.mvs-datasheet .mvs-table :is(th, td):first-child { width: auto; padding: .9rem 1rem .8rem; border-right: 1px solid var(--line); background: var(--surface); color: #4b5563; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; line-height: 1.55; text-transform: uppercase; }
.mvs-datasheet .mvs-table tr:has(> th + th) { display: none; }
.mvs-datasheet.is-waiting tr { opacity: 0; transform: translateX(-14px); }
.mvs-datasheet.is-rising tr { transition: opacity .45s, transform .45s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--r, 0) * 45ms); }
.mvs-datasheet__part.is-switching tr { animation: mvs-row-in .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--r, 0) * 35ms); }
@keyframes mvs-row-in { from { opacity: 0; transform: translateX(-14px); } }
@media (prefers-reduced-motion: reduce) { .mvs-datasheet__part.is-switching tr { animation: none; } }
@media (max-width: 575.98px) {
  .mvs-datasheet__head { padding: 1.2rem 1.25rem; }
  .mvs-datasheet__head .mvs-btn { justify-content: space-between; width: 100%; }
  .mvs-datasheet__tabs { padding: 0 .5rem; }
  .mvs-datasheet__tabs .mvs-h--h4 { flex: 1 1 0; }
  .mvs-datasheet__tab { gap: .5rem; width: 100%; padding: .9rem .6rem; font-size: .9375rem; }
  .mvs-datasheet__no { width: 1.7rem; height: 1.7rem; }
  .mvs-datasheet__part { padding: .5rem 1.25rem 1.1rem; }
  .mvs-datasheet .mvs-table tr { grid-template-columns: minmax(0, 1fr); }   /* the key cell a strip over the value */
  .mvs-datasheet .mvs-table :is(th, td):first-child { padding: .55rem .9rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .mvs-datasheet .mvs-table :is(th, td) { padding: .65rem .9rem; }
}
.mvs-table { border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.mvs-table table { margin: 0; font-size: .9375rem; }
.mvs-table th, .mvs-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.mvs-table tr:last-child td { border-bottom: 0; }
.mvs-table th { background: var(--ink); color: #fff; font-weight: 700; }
.mvs-table td:first-child { width: 42%; background: var(--surface); color: var(--ink); font-weight: 600; }
/* application industries */
/* two conveyor belts of photo tiles running opposite ways across the screen, slowly, each its tiles
   twice over (the second set the copy) so it loops without a seam; pointing at a belt stops it and
   lifts that tile's photo; off the screen they stop (site.js [data-belt] .is-off). With reduced
   motion each belt is a row to swipe, without its copy. */
.mvs-sec--industries { overflow: clip; background: var(--surface); }
.mvs-sec--industries .mvs-h--h3 { margin-bottom: 1.75rem; }
.mvs-belt { --tile: 260px; --gap: 1rem; display: grid; gap: var(--gap);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.mvs-belt__row { overflow: hidden; }
.mvs-belt__track { display: flex; width: max-content; animation: mvs-belt 75s linear infinite; }
.mvs-belt__row--back .mvs-belt__track { animation-duration: 85s; animation-direction: reverse; }
.mvs-belt__row:hover .mvs-belt__track, .mvs-belt.is-off .mvs-belt__track { animation-play-state: paused; }
@keyframes mvs-belt { to { transform: translateX(-50%); } }
.mvs-belt__set { display: flex; gap: var(--gap); padding-right: var(--gap); }
.mvs-belt__tile { position: relative; flex: none; width: var(--tile); margin: 0; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 14px; background: var(--ink); }
.mvs-belt__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.mvs-belt__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(8 15 33 / 0%) 35%, rgb(8 15 33 / 88%) 100%); pointer-events: none; }
.mvs-belt__tile:hover img { transform: scale(1.08); }
.mvs-belt__no { position: absolute; top: .6rem; left: .6rem; z-index: 1; padding: .22rem .45rem; border-radius: 6px; background: rgb(11 20 36 / 72%); color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; line-height: 1; }
.mvs-belt__name { position: absolute; right: .85rem; bottom: .7rem; left: .85rem; z-index: 1; margin: 0; color: #fff; font-size: .9375rem; font-weight: 700; letter-spacing: -.005em; line-height: 1.3; text-wrap: balance; }
@media (max-width: 575.98px) { .mvs-belt { --tile: 190px; --gap: .75rem; } .mvs-belt__name { right: .65rem; bottom: .55rem; left: .65rem; font-size: .8125rem; } }
@media (prefers-reduced-motion: reduce) {
  .mvs-belt__track { animation: none; }
  .mvs-belt__row { overflow-x: auto; scrollbar-width: none; }
  .mvs-belt__set[aria-hidden] { display: none; }
}
/* related products and the export countries */

/* the export countries: a navy panel - the heading with the count beside it, then a rule, then the
   countries A-Z on three lines moving as the footer's phrases (mvs-marquee), the middle one the other
   way, red dots between; pointing at a line stops it. Once in view (site.js [data-reveal]) the lines
   come in one after another. With reduced motion the lines simply wrap, without their copies. */
.mvs-export { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 2.5rem; width: auto; margin: 3rem calc(var(--bs-gutter-x) * .5) 0; padding: clamp(1.75rem, 3.5vw, 2.5rem) !important; border-radius: 24px;   /* lined up with the cards (not col-12's 100%) */
  background-color: var(--navy); background-image: var(--glow), var(--grid); background-size: auto, 40px 40px, 40px 40px; color: var(--on-dark-muted); }
.mvs-export__head { display: contents; }
.mvs-export .mvs-h--h3 { margin: 0; max-width: 22ch; color: #fff; }
/* the count as the clients register's "18+": the number, a small red "+" up by it, the label in two
   lines of small capitals beside it, a red rule on its left */
.mvs-export__count { display: flex; align-items: center; gap: 1rem; margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--accent); }
.mvs-export__count b { display: flex; align-items: flex-start; color: #fff; font-size: clamp(2.75rem, 4.5vw, 3.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.mvs-export__count em { margin-left: .04em; color: var(--accent-on-dark); font-size: .85em; font-style: normal; line-height: 1; }
.mvs-export__count span { color: var(--on-dark-muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; line-height: 1.45; text-transform: uppercase; }
.mvs-export__list { display: grid; grid-column: 1 / -1; gap: .7rem; min-width: 0; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 12%); }
.mvs-export__row { display: flex; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.mvs-export__names { display: flex; flex: none; margin: 0; padding: 0; list-style: none; white-space: nowrap; animation: mvs-marquee 55s linear infinite; }
.mvs-export__row:nth-child(2) .mvs-export__names { animation-duration: 62s; animation-direction: reverse; }
.mvs-export__row:nth-child(3) .mvs-export__names { animation-duration: 50s; }
.mvs-export__row:hover .mvs-export__names { animation-play-state: paused; }
.mvs-export__names li { display: inline-flex; align-items: center; color: #dbe3ee; font-size: 1rem; font-weight: 600; }
.mvs-export__names li::after { content: ""; width: 5px; height: 5px; margin: 0 1.1rem; border-radius: 50%; background: var(--accent); }
html.js .mvs-export:not(.is-in) .mvs-export__row { opacity: 0; transform: translateY(10px); }
.mvs-export.is-in .mvs-export__row { transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .2, 1); }
.mvs-export.is-in .mvs-export__row:nth-child(2) { transition-delay: .12s; }
.mvs-export.is-in .mvs-export__row:nth-child(3) { transition-delay: .24s; }
@media (max-width: 767.98px) { .mvs-export { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
@media (max-width: 575.98px) { .mvs-export__list { gap: .55rem; } .mvs-export__names li { font-size: .875rem; } .mvs-export__names li::after { margin: 0 .8rem; } }
@media (prefers-reduced-motion: reduce) {
  .mvs-export__row { -webkit-mask-image: none; mask-image: none; }
  .mvs-export__names { flex-wrap: wrap; white-space: normal; row-gap: .3rem; animation: none; }
  .mvs-export__names[aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------- product category and shop pages */
.mvs--product_category main > .mvs-sec:nth-of-type(1) .mvs-h--h2,
.mvs--shop main > .mvs-sec:nth-of-type(1) .mvs-h--h2 { margin: 0; }
.mvs-count { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--muted); }
@media (min-width: 992px) { .mvs-wrap--shop_products { width: 100%; } }   /* the live sidebar column is empty */

/* the ranges above the grid (cards.php product_ranges): the top categories as tabs on a track,
   the page's own dark; the result count at the end of that line; under them the types of the range
   as chips, the page's own red; each with its number of products. On a phone a row scrolls
   sideways, its marked one brought into view (site.js [data-chips]). */
.mvs-shopbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.5rem; margin: 1.75rem 0 2.25rem; }
.mvs-shopbar .mvs-count { margin: 0; font-size: .875rem; white-space: nowrap; }
.mvs-ranges { position: relative; display: flex; gap: .4rem; min-width: 0; }
.mvs-ranges--tabs { justify-self: start; max-width: 100%; padding: 5px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mvs-ranges--types { grid-column: 1 / -1; flex-wrap: wrap; gap: .5rem; }
.mvs-ranges__item { display: inline-flex; flex: none; align-items: center; gap: .5rem; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.mvs-ranges__item span { min-width: 1.55rem; padding: .14rem .42rem; border-radius: 99px; font-size: .6875rem; font-weight: 800; line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums; transition: inherit; }
.mvs-ranges--tabs .mvs-ranges__item { padding: .55rem .6rem .55rem 1.05rem; color: var(--ink); font-size: .875rem; font-weight: 700; }
.mvs-ranges--tabs .mvs-ranges__item span { background: #fff; color: var(--muted); box-shadow: 0 0 0 1px var(--line); }
.mvs-ranges--tabs .mvs-ranges__item:hover { background: #fff; color: var(--ink); }
.mvs-ranges--tabs .mvs-ranges__item.is-on { background: var(--ink); color: #fff; box-shadow: 0 10px 20px -12px rgb(11 20 36 / 80%); }
.mvs-ranges--tabs .mvs-ranges__item.is-on span { background: rgb(255 255 255 / 14%); color: #fff; box-shadow: none; }
.mvs-ranges--types .mvs-ranges__item { padding: .45rem .5rem .45rem .9rem; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: .8125rem; font-weight: 600; }
.mvs-ranges--types .mvs-ranges__item span { background: var(--surface); color: var(--muted); }
.mvs-ranges--types .mvs-ranges__item:hover { border-color: var(--ink); color: var(--ink); }
.mvs-ranges--types .mvs-ranges__item.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.mvs-ranges--types .mvs-ranges__item.is-on span { background: var(--accent); color: #fff; }
@media (max-width: 767.98px) {
  .mvs-shopbar { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 1.25rem 0 1.5rem; }
  .mvs-shopbar .mvs-count { grid-row: 3; }
  .mvs-ranges { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mvs-ranges::-webkit-scrollbar { display: none; }
  .mvs-ranges--types { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 88%, transparent); }
}

/* the grid of datasheet cards (product_rail_card with $sheet); the description is all in the page,
   the card shows its first two lines. The cards below the screen when the page opens wait out of
   sight and rise in as they come into view, a row's one after another (site.js [data-sheet]). */
.mvs-products--sheet { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
@media (min-width: 1200px) { .mvs-products--sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mvs-products--sheet .mvs-rcard { width: auto; scroll-snap-align: none; }
.mvs-rcard__text { max-height: 3.1em; margin: -.3rem 0 .85rem; overflow: hidden; color: var(--muted); font-size: .875rem; line-height: 1.55;
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.mvs-rcard__text p { margin: 0; }
[data-sheet] > .is-waiting { opacity: 0; transform: translateY(32px); transition: none; }   /* (the product pages' related cards too) */
[data-sheet] > .is-rising { transition-delay: calc(var(--d, 0) * 80ms), 0s, calc(var(--d, 0) * 80ms); }   /* transform, shadow, opacity */
@media (max-width: 575.98px) {   /* a row each: the picture on the left */
  .mvs-products--sheet { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .mvs-products--sheet .mvs-rcard { flex-direction: row; }
  .mvs-products--sheet .mvs-rcard__pic { flex: none; align-self: center; width: 38%; margin-left: .6rem; }   /* square, so no valve is cut */
  .mvs-products--sheet .mvs-rcard__pic::after { inset: 8px; }
  .mvs-products--sheet .mvs-rcard__no { padding: .3rem .55rem .25rem .65rem; border-radius: 0 10px 0 0; font-size: .75rem; }
  .mvs-products--sheet .mvs-rcard__body { min-width: 0; padding: .8rem .9rem .8rem; }
  .mvs-products--sheet .mvs-rcard__title { margin-bottom: .35rem; font-size: 1rem; }
  .mvs-products--sheet .mvs-rcard__text { margin: 0 0 .5rem; font-size: .8125rem; }
  .mvs-products--sheet .mvs-rcard__specs { gap: .2rem; margin-bottom: .55rem; }
  .mvs-products--sheet .mvs-rcard__specs div { font-size: .75rem; }
  .mvs-products--sheet .mvs-rcard__specs div:nth-child(n + 3) { display: none; }
  .mvs-products--sheet .mvs-rcard__foot { justify-content: flex-start; padding-top: .55rem; }
  .mvs-products--sheet .mvs-rcard__foot .mvs-link { display: none; }   /* no room beside the button; the name and the picture link to it */
}

/* the pages under the grid (pagination 'bar'): the page number, the pages as stations on a scale
   (those before this one filled, --done) and the round previous / next buttons of the home rails */
.mvs-pager--bar { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.75rem; }
.mvs-pager__count { flex: none; color: var(--muted); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mvs-pager__count b { color: var(--ink); font-size: 1.35rem; font-weight: 800; }
.mvs-pager__pages { position: relative; display: flex; flex: 1; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.mvs-pager__pages::before, .mvs-pager__pages::after { content: ""; position: absolute; left: 17px; top: 50%; border-radius: 2px; transform: translateY(-50%); }
.mvs-pager__pages::before { right: 17px; height: 2px; background: rgb(16 24 40 / 16%); }
.mvs-pager__pages::after { width: calc((100% - 34px) * var(--done, 0)); height: 4px; background: var(--accent); }
.mvs-pager__pages li { position: relative; z-index: 1; }
.mvs-pager__page { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid rgb(16 24 40 / 18%); border-radius: 50%; background: #fff; color: var(--ink); font-size: .8125rem; font-weight: 800; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
a.mvs-pager__page:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.mvs-pager__page.is-done { border-color: var(--accent); color: var(--accent-ink); }
.mvs-pager__page.is-on { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 0 0 5px rgb(227 30 36 / 15%); }
.mvs-pager__page.is-gap { border-color: transparent; background: transparent; }
.mvs-pager__nav { display: flex; flex: none; gap: .6rem; }
.mvs-pager__nav .is-off { opacity: .35; pointer-events: none; }
@media (max-width: 575.98px) { .mvs-pager--bar { gap: 1rem; margin-top: 2rem; } .mvs-pager__count { display: none; } }
.mvs-article { max-width: 76ch; }

/* the category description as an engineering note (product-category.php): white grid paper, so the
   grey FAQ under it stands apart; on the left the valve's drawing on a sheet with its title block
   (MVS Valves, the category, its number of products), drawing itself once in view and kept in view
   on wide screens; on the right a label, the text in its writer's paragraphs (justified, the first
   larger), "Read more" on phones, then a line and the quote button */
.mvs-sec--note { position: relative; overflow: clip; background: #fff; }
.mvs-sec--note::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(16 24 40 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 6%) 1px, transparent 1px),
    linear-gradient(rgb(16 24 40 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 3%) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; background-position: center top;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.mvs-sec--note > .container { position: relative; z-index: 1; }
.mvs-sec--note .row { align-items: flex-start; }
@media (min-width: 992px) { .mvs-sec--note .mvs-wrap--drawing { position: sticky; top: calc(var(--bar-h) + 2rem); } }
.mvs-note { margin: 0; overflow: hidden; border: 1px solid rgb(16 24 40 / 14%); border-radius: 20px; background: rgb(255 255 255 / 88%); box-shadow: 0 30px 60px -42px rgb(16 24 40 / 50%); }
.mvs-drawing--note { position: relative; display: block; width: 100%; padding: 1.75rem 1.5rem .75rem; color: rgb(16 24 40 / 70%); }
.mvs-drawing--note .mvs-drawing__flow { stroke-opacity: .6; }
.mvs-note__block { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; border-top: 1px solid rgb(16 24 40 / 14%); background: rgb(16 24 40 / 3%);
  color: var(--muted); font-size: .6875rem; font-weight: 800; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.mvs-note__block > * { padding: .85rem 1.1rem; }
.mvs-note__block > * + * { border-left: 1px solid rgb(16 24 40 / 14%); }
.mvs-note__block b { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.mvs-note__block span:last-child { color: var(--accent-ink); white-space: nowrap; }
.mvs-sec--note .mvs-text { color: var(--text); text-align: justify; }
.mvs-sec--note .mvs-text > p:first-child { color: var(--ink); font-size: 1.1875rem; line-height: 1.7; }
.mvs-note__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 2rem; padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 16px 16px 0; background: #fff; }
.mvs-note__cta p { flex: 1 1 18rem; margin: 0; color: var(--ink); font-weight: 700; line-height: 1.45; }
.mvs-note__cta .mvs-btn { flex: none; margin: 0; }
@media (max-width: 991.98px) { .mvs-sec--note .mvs-wrap--drawing { max-width: 480px; } }
@media (max-width: 575.98px) {
  .mvs-sec--note .mvs-text { -webkit-hyphens: auto; hyphens: auto; }
  .mvs-sec--note .mvs-text > p:first-child { font-size: 1.0625rem; }
  .mvs-drawing--note { padding: 1.25rem 1rem .5rem; }
  .mvs-note__block > * { padding: .7rem .8rem; }
  .mvs-note__cta { margin-top: 1.25rem; padding: 1.1rem; }
}

/* ---------------------------------------------------------------- long text: articles, category descriptions */
.mvs-article, .mvs-sec--note .mvs-text { font-size: 1.0625rem; line-height: 1.75; }
.mvs-article h2, .mvs-sec--note .mvs-text h2 { margin: 2.25rem 0 .9rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.mvs-article h3, .mvs-sec--note .mvs-text h3 { margin: 2rem 0 .75rem; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.mvs-article h4, .mvs-sec--note .mvs-text h4 { margin: 1.5rem 0 .6rem; font-size: 1.15rem; }
.mvs-article ul, .mvs-article ol { padding-left: 1.25rem; }
.mvs-article li { margin-bottom: .35rem; }
.mvs-article table { font-size: .9375rem; }
.mvs-article th { background: var(--ink); color: #fff; border-color: var(--ink); }
.mvs-article blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: var(--r); background: var(--surface); border-left: 4px solid var(--accent); }
/* the articles' own parts (post.php article_tidy took their inline styles out): the "Key
   Takeaways" box with red ticks, tables as the datasheets (the first row their heads, light
   stripes, rounded), lists with red markers, red links, and the FAQ as the site's: numbered
   (Q.01 …), a card each, the open one with a red rule and a "-", one open at a time (site.js) */
.mvs-article :is(h2, h3) { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }   /* "In this article" lands under the header */
.mvs-article :is(h1, h2, h3, h4, h5, h6) { text-align: left !important; }   /* (some carry Word's inline "justify": wide gaps in a heading) */
.mvs-article p { text-align: justify; }   /* the text justified (Krunal, 30 Oct); not lists (short lines open wide gaps) or tables */
.mvs-article :is(th, td) :is(p, li) { text-align: left; }
@media (max-width: 575.98px) { .mvs-article :is(p, li) { -webkit-hyphens: auto; hyphens: auto; } }
.mvs-article a:not(.btn) { color: var(--accent-ink); text-decoration-color: rgb(208 22 28 / 35%); text-underline-offset: 3px; }
.mvs-article a:not(.btn):hover { text-decoration-color: currentColor; }
.mvs-article ul li::marker { color: var(--accent); }
.mvs-article .ph-key-takeaways { margin: 0 0 2rem; padding: 1.4rem 1.6rem 1.2rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 16px; background: var(--surface); }
.mvs-article .ph-key-takeaways > .phabf-section-heading { margin: 0 0 .75rem; color: var(--ink); font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mvs-article .ph-key-takeaways ul { margin: 0; padding: 0; list-style: none; }
.mvs-article .ph-key-takeaways li { position: relative; margin: .5rem 0; padding-left: 1.85rem; color: var(--text); line-height: 1.6; }
.mvs-article .ph-key-takeaways li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 62% no-repeat; }
.mvs-article .wp-block-table, .mvs-article figure:has(> table) { margin: 1.5rem 0; overflow-x: auto; }
.mvs-article table { width: 100%; margin: 1.5rem 0; overflow: hidden; border: 1px solid var(--line); border-collapse: separate; border-spacing: 0; border-radius: 14px; font-size: .9375rem; }
.mvs-article figure > table { margin: 0; }
.mvs-article :is(th, td) { padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.mvs-article :is(th, td) + :is(th, td) { border-left: 1px solid var(--line); }
.mvs-article tr:last-child > :is(th, td) { border-bottom: 0; }
.mvs-article tr:nth-child(even) > td { background: var(--surface); }
.mvs-article :is(th, tr:first-child > td) { background: var(--navy); border-color: rgb(255 255 255 / 12%); color: #fff; font-weight: 700; }
.mvs-article :is(th, td) p { margin: 0; }
.mvs-article blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: var(--r); background: var(--surface); border-left: 4px solid var(--accent); }
.mvs-article .phabf-faq { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); counter-reset: q; }
.mvs-article .phabf-faq > .phabf-section-heading { margin: 0 0 1.1rem; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.mvs-article details { position: relative; margin: 0 0 .7rem; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); counter-increment: q; transition: box-shadow .3s; }
.mvs-article details::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); transform: scaleY(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.mvs-article details[open] { box-shadow: 0 0 0 1px var(--line), 0 22px 40px -30px rgb(16 24 40 / 45%); }
.mvs-article details[open]::before { transform: scaleY(1); }
.mvs-article summary { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 26px; align-items: start; gap: .6rem; padding: 1rem 1.15rem; color: var(--ink); font-weight: 700; line-height: 1.45; cursor: pointer; list-style: none; }
.mvs-article summary::-webkit-details-marker { display: none; }
.mvs-article summary::before { content: "Q." counter(q, decimal-leading-zero); padding-top: .15rem; color: var(--accent-ink); font-size: .75rem; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.mvs-article summary::after { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1424' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 13px no-repeat; transition: transform .3s, background-color .25s; }
.mvs-article details[open] > summary::after { background-color: var(--accent-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.mvs-article details > div { padding: 0 1.15rem 1.1rem 4.35rem; color: var(--text); }
.mvs-article details > div p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- articles (post.php)
   The picture and a line of what the article is (date, its categories as chips, the author); beside
   it all, kept in view on wide screens, "In this article" (its headings, the one being read marked,
   site.js [data-toc]) and a navy quote card; a red reading bar along the top of the screen. On a
   phone one column: picture, outline (closed), article, quote card. */
.mvs-post { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "head side" "body side"; column-gap: 3.5rem; }
.mvs-post__head { grid-area: head; }
.mvs-post__body { grid-area: body; min-width: 0; }
.mvs-post__side { grid-area: side; display: flex; flex-direction: column; gap: 1.25rem; align-self: start; position: sticky; top: calc(var(--bar-h) + 1.5rem); max-height: calc(100vh - var(--bar-h) - 3rem); }
.mvs-post__head .mvs-figure img { display: block; width: 100%; height: auto; border-radius: 20px; }
.mvs-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 1.15rem 0 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.mvs-post__meta .mvs-h--p { margin: 0; color: var(--ink); font-size: .9375rem; font-weight: 700; }
.mvs-post__cat { padding: .25rem .7rem; border: 1px solid rgb(227 30 36 / 30%); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.mvs-post__cat:hover { border-color: var(--accent); color: var(--accent-ink); }
.mvs-post__by { color: var(--muted); font-size: .9375rem; }
.mvs-post__by::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 .75rem 0 .1rem; border-radius: 50%; background: rgb(16 24 40 / 30%); vertical-align: middle; }
.mvs-outline { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 24px 44px -36px rgb(16 24 40 / 45%); }
.mvs-outline summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; list-style: none; }
.mvs-outline summary::-webkit-details-marker { display: none; }
.mvs-outline summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-3px) rotate(45deg); transition: transform .25s; }
.mvs-outline[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.mvs-outline:not([open]) summary { border-bottom: 0; }
.mvs-outline ol { min-height: 0; margin: 0; padding: .6rem 0 .75rem; overflow-y: auto; list-style: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent); }   /* fades out where it goes on */
.mvs-outline li a { display: block; padding: .4rem 1.2rem .4rem 1.1rem; border-left: 3px solid transparent; color: var(--muted); font-size: .875rem; font-weight: 600; line-height: 1.4; text-decoration: none; transition: color .2s, border-color .2s, background-color .2s; }
.mvs-outline li.mvs-outline__l3 a { padding-left: 2rem; font-size: .8125rem; font-weight: 500; }
.mvs-outline li a:hover { color: var(--ink); }
.mvs-outline li.is-active a { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.mvs-post__quote { flex: none; padding: 1.4rem 1.4rem 1.5rem; border-radius: 18px; background-color: var(--navy); background-image: var(--glow), var(--grid); background-size: auto, 28px 28px, 28px 28px; color: #c9d4e2; }
.mvs-post__quote-title { margin: 0 0 .35rem; color: #fff; font-size: 1.125rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.mvs-post__quote-text { margin: 0 0 1rem; font-size: .875rem; line-height: 1.55; }
.mvs-post__quote .mvs-btn { margin: 0; }
.mvs-readbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; height: 3px; background: var(--accent); transform: scaleX(var(--read, 0)); transform-origin: left; pointer-events: none; }
.mvs-ai { margin: 2rem 0; padding: 1.4rem 1.6rem; border-radius: var(--r-lg); background: var(--surface); }
.mvs-ai__label { font-weight: 700; color: var(--ink); }
.mvs-ai__btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
@media (max-width: 991.98px) {
  .mvs-post { display: flex; flex-direction: column; }
  .mvs-post__side { display: contents; }
  .mvs-post__head { order: 1; }
  .mvs-outline { order: 2; margin-bottom: 1.5rem; }
  .mvs-post__body { order: 3; }
  .mvs-post__quote { order: 4; margin-top: 1rem; }
  .mvs-outline ol { max-height: 60vh; }
}
@media (max-width: 575.98px) {
  .mvs-article details > div { padding-left: 1.15rem; }
  .mvs-article summary { grid-template-columns: 2.2rem minmax(0, 1fr) 26px; }
  .mvs-post__by { flex-basis: 100%; }
  .mvs-post__by::before { display: none; }   /* (on a line of its own) */
}
/* the related articles, a row of the home page's blog cards, close under the article */
.mvs--post .mvs-sec--related-posts { padding-top: 0; overflow-x: clip; }
/* the author box, right after the FAQ: a navy plate (the drawing grid, the red glow) with the
   initials in a ring and "Written by", beside it the name, the designation in red capitals, the
   bio justified and the two buttons; on a phone the plate becomes a band across the top */
.mvs-author { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin: 2.75rem 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 30px 56px -44px rgb(16 24 40 / 55%); }
.mvs-author__plate { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 2rem 1rem;
  background-color: var(--navy); background-image: var(--glow), var(--grid); background-size: auto, 28px 28px, 28px 28px; }
.mvs-author__plate::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: var(--accent); }
.mvs-author__initials { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(145deg, #1b2a4d, #0b1424); color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 14%), 0 0 0 7px rgb(227 30 36 / 85%), 0 18px 30px -12px rgb(0 0 0 / 60%); }
.mvs-author__tag { color: #c9d4e2; font-size: .6875rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.mvs-author__body { padding: 1.75rem 2rem 1.9rem; }
.mvs-author__name { margin: 0; color: var(--ink); font-size: 1.375rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.mvs-author__desig { margin: .3rem 0 0; color: var(--accent-ink); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mvs-author__bio { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--text); font-size: .9688rem; line-height: 1.7; text-align: justify; }
.mvs-author__btns { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-top: 1.25rem; }
.mvs-author__btns .mvs-btn { margin: 0; }
@media (max-width: 575.98px) {
  .mvs-author { grid-template-columns: 1fr; }
  .mvs-author__plate { flex-direction: row; justify-content: flex-start; padding: 1.1rem 1.25rem; }
  .mvs-author__plate::after { top: auto; left: 0; width: auto; height: 3px; }
  .mvs-author__initials { width: 64px; height: 64px; font-size: 1.35rem; box-shadow: 0 0 0 2px rgb(255 255 255 / 14%), 0 0 0 5px rgb(227 30 36 / 85%); }
  .mvs-author__body { padding: 1.35rem 1.25rem 1.5rem; }
  .mvs-author__bio { -webkit-hyphens: auto; hyphens: auto; }
}

/* ---------------------------------------------------------------- article listings (blogs, categories, tags, search) */
.mvs-posts { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mvs-postcard { display: flex; flex-direction: column; gap: .5rem; background: #fff; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.mvs-postcard:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.mvs-postcard__img { display: block; overflow: hidden; }
.mvs-postcard__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .45s; }
.mvs-postcard:hover .mvs-postcard__img img { transform: scale(1.04); }
.mvs-postcard__meta, .mvs-postcard__title, .mvs-postcard__more { margin-inline: 1.2rem; }
.mvs-postcard__meta { margin-top: .5rem; font-size: .8125rem; color: var(--muted); }
.mvs-postcard__meta a { color: var(--muted); }
.mvs-postcard__title { margin-bottom: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.mvs-postcard__title a { color: var(--ink); text-decoration: none; }
.mvs-postcard__title a:hover { color: var(--accent-ink); }
.mvs-postcard__more { align-self: flex-start; margin-top: auto; margin-bottom: 1.2rem; padding-top: .4rem; }
.mvs--blogs .mvs-sec .mvs-h--h2 { margin-bottom: 2rem; }

/* pagination */
.mvs-pager { margin-top: 2.5rem; }
.mvs-pager .pagination { --bs-pagination-color: var(--ink); --bs-pagination-border-color: var(--line); --bs-pagination-hover-color: var(--ink); --bs-pagination-hover-bg: var(--surface); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-border-color: var(--ink); --bs-pagination-padding-x: 1rem; --bs-pagination-padding-y: .5rem; gap: .4rem; }
.mvs-pager .page-link { border-radius: 999px !important; margin: 0 !important; font-weight: 700; }

/* ---------------------------------------------------------------- city pages */
.mvs--location main > .mvs-sec:first-child { padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 2.5rem); }   /* (room for the ranges bar over its edge) */
/* the ranges bar: a white glass bar half over the title band's edge, the label, the ranges as chips
   on one line, then the two quote buttons; it stays under the header while the ranges go by (higher
   when the header has slid away) and stops with the last range. The range being read is marked
   (site.js data-spy). On a phone only the chips: the dock at the bottom has the quote buttons. */
.mvs-cityranges { position: relative; }
.mvs-citynav { position: sticky; z-index: 20; top: calc(var(--bar-h) + 1.25rem); margin: -2.15rem 0; pointer-events: none; transition: top .4s cubic-bezier(.2, .7, .2, 1); }
body:has(.mvs-header.is-hidden) .mvs-citynav { top: .75rem; }
.mvs-citynav__bar { display: flex; align-items: center; gap: 1.1rem; min-height: 4.3rem; padding: .55rem .6rem .55rem 1.35rem; border: 1px solid rgb(16 24 40 / 10%); border-radius: 20px; pointer-events: auto;
  background: rgb(255 255 255 / 92%); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); box-shadow: 0 24px 48px -28px rgb(16 24 40 / 55%), 0 2px 6px -2px rgb(16 24 40 / 10%); }
.mvs-citynav__label { flex: none; margin: 0; padding-right: 1.1rem; border-right: 1px solid var(--line); color: var(--muted); font-size: .6875rem; font-weight: 800; letter-spacing: .14em; line-height: 1.45; text-transform: uppercase; }
.mvs-citynav__label span { display: block; color: var(--accent-ink); }
.mvs-citynav .mvs-chiprow { flex: 1; min-width: 0; }
.mvs-citynav .mvs-chiprow__btn { width: 36px; height: 36px; box-shadow: none; }
.mvs-citynav .mvs-ranges__item { padding: .5rem .95rem; font-size: .8438rem; }
.mvs-citynav__cta { display: flex; flex: none; gap: .4rem; padding-left: 1rem; border-left: 1px solid var(--line); }
.mvs-citynav__cta .mvs-btn { margin: 0; }
@media (max-width: 1199.98px) { .mvs-citynav__label { display: none; } }
.mvs-cityranges > .mvs-citynav + .mvs-sec--range { padding-top: calc(clamp(3rem, 6vw, 4.5rem) + 2.15rem); }
.mvs--location .mvs-sec--range { scroll-margin-top: 1.5rem; }   /* (on top of the page's own room for the header) */
@media (max-width: 767.98px) {
  .mvs-citynav { top: calc(var(--bar-h) + .75rem); }
  .mvs-citynav__bar { min-height: 0; padding: .45rem; border-radius: 16px; }
  .mvs-citynav__cta { display: none; }
  .mvs-citynav .mvs-ranges__item { padding: .45rem .8rem; font-size: .8125rem; }
}
.mvs--location .mvs-sec--range:nth-child(odd) { background: var(--surface); }
/* a range (city.php, laid out as the home page's ranges above): the heading and the text, justified,
   on the left; the datasheet cards and the range card running out to the screen's edge; every
   second range mirrored. Phones: the text, then the row to swipe. */
.mvs--location .mvs-sec--range { padding-block: clamp(3rem, 6vw, 4.5rem); }
.mvs--location .mvs-sec--range .mvs-h { margin: 0 0 1.1rem; font-size: clamp(1.6rem, 2.6vw, 2.125rem); }
.mvs--location .mvs-sec--range .mvs-text { color: var(--text); font-size: 1.0625rem; text-align: justify; }
.mvs--location .mvs-sec--range .mvs-text p:last-child { margin-bottom: 0; }
@media (min-width: 1200px) { .mvs--location .mvs-sec--range .row { align-items: center; } }
@media (max-width: 1199.98px) { .mvs--location .mvs-sec--range .mvs-wrap--shop { margin-top: 1rem; } }
@media (max-width: 575.98px) { .mvs--location .mvs-sec--range .mvs-text { font-size: 1rem; -webkit-hyphens: auto; hyphens: auto; } }
/* the range card in a row: a datasheet card's width, rising in after the products */
.mvs-rail__track > .mvs-related__more { flex: none; width: clamp(280px, 21vw, 310px); scroll-snap-align: start; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, opacity .6s; }
@media (max-width: 575.98px) { .mvs-rail__track > .mvs-related__more { width: 78vw; } }
/* the close (city.php): light grey drawing paper (a faint grid, as behind "Know About MVS"; the
   gallery page's section too), the heading and the city's text on the left, the export desk card on
   the right (Krunal: not navy) */
:is(.mvs--location main > .mvs-sec:last-child, .mvs-sec--gallery) { position: relative; overflow: clip; background: var(--surface); }
:is(.mvs--location main > .mvs-sec:last-child, .mvs-sec--gallery)::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(16 24 40 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 6%) 1px, transparent 1px),
    linear-gradient(rgb(16 24 40 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 3%) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; background-position: center top;
  -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
:is(.mvs--location main > .mvs-sec:last-child, .mvs-sec--gallery) > .container { position: relative; z-index: 1; }
.mvs--location main > .mvs-sec:last-child .mvs-text { color: var(--text); font-size: 1.0625rem; text-align: justify; }
@media (max-width: 575.98px) { .mvs--location main > .mvs-sec:last-child .mvs-text { -webkit-hyphens: auto; hyphens: auto; } }
.mvs--location main > .mvs-sec:last-child .mvs-text p:last-child { margin-bottom: 0; }
.mvs-sec--desk .row { align-items: center; }
@media (min-width: 992px) { .mvs-sec--desk .row { --bs-gutter-x: 3rem; } }
/* the export desk: a white card on the navy close - the city's label in red capitals, the title, then
   call / WhatsApp / email as rows (a disc in each one's colour, what it is, the number or address,
   an arrow that turns), "Get Quotation" across the card and the company's standing under it */
.mvs-desk { position: relative; padding: 1.75rem 1.6rem 1.4rem; overflow: hidden; border-radius: 22px; background: #fff; color: var(--text);
  border: 1px solid var(--line); box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 36px 64px -40px rgb(16 24 40 / 50%); }
.mvs-desk::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), rgb(227 30 36 / 25%)); }
.mvs-desk__label { margin: 0 0 .3rem; color: var(--accent-ink); font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mvs-desk__title { margin: 0 0 1.1rem; color: var(--ink); font-size: 1.375rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.mvs-desk__ways { display: grid; gap: .55rem; margin: 0 0 1.1rem; }
.mvs-desk .mvs-desk__way { display: flex; align-items: center; gap: .9rem; padding: .7rem .8rem .7rem .7rem; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color .2s, background-color .2s, transform .25s cubic-bezier(.2, .7, .2, 1); }
.mvs-desk .mvs-desk__way:hover { border-color: var(--d); background: var(--soft); color: var(--ink); transform: translateX(3px); }
.mvs-desk__way--call { --d: #1f6feb; --soft: #eef4ff; }
.mvs-desk__way--wa { --d: #1fb855; --soft: #eafaf0; }
.mvs-desk__way--mail { --d: var(--accent-ink); --soft: var(--accent-soft); }
.mvs-desk__ico { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--d); color: #fff; }
.mvs-desk__ico .mvs-ico { width: 20px; height: 20px; }
.mvs-desk__way--wa .mvs-desk__ico { background: var(--d) var(--ico-wa) center / 22px no-repeat; }
.mvs-desk__what { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.mvs-desk__what b { font-size: .9375rem; font-weight: 800; }
.mvs-desk__what span { overflow: hidden; color: var(--muted); font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }
.mvs-desk__go { flex: none; width: 30px; height: 30px; padding: 8px; border-radius: 50%; background: var(--surface); color: var(--ink); transition: transform .35s, background-color .2s, color .2s; }
.mvs-desk__way:hover .mvs-desk__go { background: var(--d); color: #fff; transform: rotate(45deg); }
.mvs-desk .mvs-desk__quote { display: flex; justify-content: space-between; width: 100%; margin: 0; }
.mvs-desk__note { margin: .9rem 0 0; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
@media (max-width: 575.98px) { .mvs-desk { padding: 1.4rem 1.1rem 1.2rem; border-radius: 18px; } }

/* ---------------------------------------------------------------- contact page
   The three ways to reach MVS as a row of white cards - call & WhatsApp, mail, the address: the sign
   in a coloured disc, the title, the text and what it does, a red line along the top on hover. Under
   them the form on a sheet (its fields as the quote popup's, see .mvs-quote below) under a navy
   head, and beside it the map as tall as the form, grey until pointed at, "Get directions" on it. */
.mvs--page .mvs-sec--contact .mvs-h--h2 { margin: 0 0 1.75rem; }
.mvs--page .mvs-sec--contact .mvs-contact__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.mvs--page .mvs-sec--contact .mvs-contact__way { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: auto; margin: 0; padding: 1.5rem 1.5rem 1.4rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--text); text-decoration: none;
  box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 24px 44px -34px rgb(16 24 40 / 50%); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.mvs-contact__way::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.mvs--page .mvs-sec--contact .mvs-contact__way:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 32px 52px -34px rgb(16 24 40 / 60%); }
.mvs-contact__way:hover::before { transform: scaleX(1); }
.mvs-contact__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; border-radius: 14px; color: #fff; }
.mvs-contact__ico .mvs-ico { width: 22px; height: 22px; }
.mvs-contact__ico--call { background: linear-gradient(135deg, #3b82f6, #1f5fd1); box-shadow: 0 10px 20px -10px rgb(31 95 209 / 80%); }
.mvs-contact__ico--mail { background: linear-gradient(135deg, #ef3a40, #b5141a); box-shadow: 0 10px 20px -10px rgb(227 30 36 / 80%); }
.mvs-contact__ico--pin { background: linear-gradient(135deg, #f59e0b, #c2700a); box-shadow: 0 10px 20px -10px rgb(194 112 10 / 80%); }
.mvs--page .mvs-sec--contact .mvs-contact__way .mvs-iconbox__title { margin: 0 0 .35rem; color: var(--ink); font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
.mvs--page .mvs-sec--contact .mvs-contact__way .mvs-iconbox__desc { color: var(--text); font-size: .9375rem; line-height: 1.6; }
.mvs--page .mvs-sec--contact .mvs-contact__way .mvs-iconbox__desc a { color: var(--ink); font-weight: 700; text-decoration: none; }
.mvs--page .mvs-sec--contact .mvs-contact__way .mvs-iconbox__desc a:hover { color: var(--accent-ink); }
.mvs-contact__act { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1rem; color: var(--accent-ink); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.mvs-contact__act .mvs-ico { width: 14px; height: 14px; transition: transform .3s; }
:is(a.mvs-contact__way:hover, .mvs-contact__act:hover) .mvs-ico { transform: rotate(45deg); }
.mvs-contact__act--wa { margin-top: auto; padding: .45rem .85rem .45rem .75rem; border: 1px solid #c2ecd2; border-radius: 999px; background: #eafaf0; color: #0b5a2b; }
.mvs-contact__way > .mvs-iconbox__desc + .mvs-contact__act--wa { margin-top: 1rem; }
.mvs-contact__act--wa::before { content: ""; width: 15px; height: 15px; background: #1fb855 var(--ico-wa) center / 70% no-repeat; border-radius: 50%; }
.mvs-contact__act--wa:hover { border-color: #1fb855; background: #d9f5e3; color: #0b5a2b; }
.mvs-contact__main { align-items: stretch; }
.mvs-contact__sheet { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -44px rgb(16 24 40 / 45%); }
.mvs-contact__head { padding: 1.1rem 1.6rem; background-color: var(--navy); background-image: var(--glow), var(--grid); background-size: auto, 28px 28px, 28px 28px; }
.mvs--page .mvs-sec--contact .mvs-contact__head .mvs-h--h5 { display: flex; align-items: center; gap: .65rem; margin: 0; color: #fff; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
.mvs--page .mvs-sec--contact .mvs-contact__head .mvs-h--h5::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-on-dark); box-shadow: 0 0 0 4px rgb(227 30 36 / 25%); }
.mvs-contact__sheet .mvs-form { padding: 1.6rem; }
.mvs-contact__sheet .mvs-form [type="submit"] { margin: .25rem 0 0; }
.mvs-contact__map { position: relative; }
.mvs--page .mvs-sec--contact .mvs-map { overflow: hidden; border-radius: 20px; box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 992px) {   /* the map as tall as the form beside it */
  .mvs-contact__map { display: flex; flex-direction: column; }
  .mvs--page .mvs-sec--contact .mvs-contact__map .mvs-map { flex: 1; min-height: 320px; }
  .mvs-contact__map .mvs-map::before { display: none; }
}
.mvs-contact__map iframe { filter: grayscale(.85) contrast(1.05); transition: filter .5s; }
.mvs-contact__map:hover iframe { filter: none; }
.mvs-contact__directions { position: absolute; right: calc(var(--bs-gutter-x) * .5 + 1rem); bottom: 1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: .8125rem; font-weight: 700; text-decoration: none; box-shadow: 0 10px 22px -10px rgb(11 20 36 / 80%); transition: background-color .2s; }
.mvs-contact__directions .mvs-ico { width: 15px; height: 15px; }
.mvs-contact__directions:hover { background: var(--accent-ink); color: #fff; }
@media (max-width: 991.98px) { .mvs--page .mvs-sec--contact .mvs-contact__ways { grid-template-columns: minmax(0, 1fr); gap: .9rem; } }
@media (max-width: 575.98px) {
  .mvs-contact__sheet .mvs-form { padding: 1.15rem; }
  .mvs-contact__head { padding: 1rem 1.15rem; }
  .mvs-contact__sheet .mvs-form [type="submit"] { width: 100%; justify-content: space-between; }
  .mvs--page .mvs-sec--contact .mvs-contact__way { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: .9rem; padding: 1.15rem; }
  .mvs--page .mvs-sec--contact .mvs-contact__way > :not(.mvs-contact__ico) { grid-column: 2; }
  .mvs-contact__ico { grid-row: 1 / span 3; width: 42px; height: 42px; margin: 0; border-radius: 12px; }
  .mvs-contact__act, .mvs-contact__way > .mvs-iconbox__desc + .mvs-contact__act--wa { justify-self: start; margin-top: .6rem; padding-top: 0; }
  .mvs-contact__act--wa { padding-top: .45rem; }
}

/* (pages' intro pictures in a white mount) */
.mvs--page .mvs-sec--intro .mvs-wrap--image .mvs-figure { padding: 1rem; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.mvs--page .mvs-sec--intro .mvs-wrap--image .mvs-h--h5 { margin: 1.25rem 0 0; text-align: center; font-size: .9375rem; }
/* certificates (certificates.php): the heading on the left (5/12), the two certificates side by
   side on the right (7/12) - two to a row at every width - each in a white mount that lifts on
   hover, a zoom disc in its corner; a click opens it over the page (site.js lightbox, one set) */
.mvs-certs-row { align-items: center; }
.mvs-certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
.mvs-cert .mvs-figure { margin: 0; padding: .9rem; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 30px 56px -38px rgb(16 24 40 / 55%); transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.mvs-cert .mvs-figure:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--line), 0 40px 64px -36px rgb(16 24 40 / 65%); }
.mvs-cert__pic { position: relative; display: block; overflow: hidden; border-radius: 10px; cursor: zoom-in; }
.mvs-cert__pic img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.mvs-cert__pic:hover img { transform: scale(1.03); }
.mvs-cert__zoom { position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff;
  box-shadow: 0 10px 22px -10px rgb(11 20 36 / 70%); transition: background-color .2s, transform .3s; }
.mvs-cert__zoom .mvs-ico { width: 18px; height: 18px; }
.mvs-cert__pic:hover .mvs-cert__zoom { background: var(--accent-ink); transform: scale(1.08); }
.mvs-cert .mvs-h--h5 { margin: 1.1rem 0 0; font-size: .9375rem; text-align: center; }
@media (max-width: 991.98px) { .mvs-certs { max-width: 760px; } }
@media (max-width: 575.98px) {
  .mvs-certs { gap: .9rem; }
  .mvs-cert .mvs-figure { padding: .5rem; border-radius: 14px; }
  .mvs-cert__pic { border-radius: 7px; }
  .mvs-cert__zoom { right: .45rem; bottom: .45rem; width: 32px; height: 32px; }
  .mvs-cert__zoom .mvs-ico { width: 15px; height: 15px; }
  .mvs-cert .mvs-h--h5 { margin-top: .75rem; font-size: .8125rem; }
}

/* gallery */
.mvs-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
@media (min-width: 768px) { .mvs-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mvs-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mvs-gallery__item { display: block; border-radius: var(--r-lg); background: var(--plate); overflow: hidden; }
.mvs-gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .45s; }
.mvs-gallery__item:hover img { transform: scale(1.05); }
/* the gallery page (gallery.php), on drawing paper: a line saying a click enlarges a photo; then
   each photo a square print in a white mount (no rounding, as the product cards), its number on a
   dark tab; on hover the mount lifts, the photo zooms slowly inside it, the
   drawing's red corner marks come in and a zoom disc shows in the middle (a click opens the
   lightbox); on touch screens the disc sits small in a corner. They rise in as they come into view
   (site.js data-sheet). */
.mvs-gallery__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; margin: 2rem 0 0; padding: 0 0 .9rem;
  border-bottom: 1px dashed rgb(16 24 40 / 18%); color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mvs-sec--gallery .mvs-sechead .mvs-h--h2 { max-width: none; text-wrap: pretty; }   /* on one line while it fits (Krunal) */
.mvs-gallery__bar span { display: inline-flex; align-items: center; gap: .5rem; }
.mvs-gallery__bar .mvs-ico { width: 16px; height: 16px; color: var(--accent-ink); }
.mvs-gallery { gap: 1.25rem; margin-top: 1.5rem; }
.mvs-gallery > .mvs-gallery__item { position: relative; padding: .55rem; overflow: visible; border: 1px solid rgb(16 24 40 / 10%); border-radius: 0; background: #fff; cursor: zoom-in;
  box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 24px 44px -34px rgb(16 24 40 / 55%); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, opacity .6s; }
.mvs-gallery > .mvs-gallery__item:hover { transform: translateY(-5px); box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 34px 56px -32px rgb(16 24 40 / 65%); }
.mvs-gallery__pic { position: relative; display: block; overflow: hidden; background: var(--plate); }
.mvs-gallery > .mvs-gallery__item img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.mvs-gallery > .mvs-gallery__item:hover img { transform: scale(1.07); }
.mvs-gallery__pic::after { content: ""; position: absolute; inset: 10px; pointer-events: none; --c: rgb(227 30 36 / 90%); opacity: 0; transform: scale(1.04); transition: opacity .3s, transform .4s cubic-bezier(.2, .7, .2, 1);
  background: linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px;
  background-repeat: no-repeat; }
.mvs-gallery__item:is(:hover, :focus-visible) .mvs-gallery__pic::after { opacity: 1; transform: none; }
.mvs-gallery__no { position: absolute; left: 0; bottom: 0; padding: .4rem .75rem .35rem .9rem; border-radius: 0 13px 0 0; background: var(--ink); color: #fff; font-size: .875rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mvs-gallery__zoom { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgb(255 255 255 / 94%); color: var(--ink);
  box-shadow: 0 14px 30px -12px rgb(11 20 36 / 60%); opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.mvs-gallery__zoom .mvs-ico { width: 22px; height: 22px; }
.mvs-gallery__item:is(:hover, :focus-visible) .mvs-gallery__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) {
  .mvs-gallery__zoom { left: auto; top: auto; right: .5rem; bottom: .5rem; width: 34px; height: 34px; opacity: 1; transform: none; }
  .mvs-gallery__item:is(:hover, :focus-visible) .mvs-gallery__zoom { transform: none; }
  .mvs-gallery__zoom .mvs-ico { width: 16px; height: 16px; }
}
@media (max-width: 575.98px) {
  .mvs-gallery { gap: .75rem; }
  .mvs-gallery > .mvs-gallery__item { padding: .35rem; }
  .mvs-gallery__no { padding: .3rem .55rem .25rem .65rem; border-radius: 0 10px 0 0; font-size: .75rem; }
  .mvs-gallery__bar { margin-top: 1.5rem; font-size: .6875rem; }
}
/* the picture over the page: square, in the middle; the close button a glass disc in the corner
   that turns red on hover; a ring only for the keyboard */
.mvs-lightbox { inset: 0; width: fit-content; height: fit-content; max-width: min(1100px, 94vw); max-height: 92vh; margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; outline: none; }
.mvs-lightbox::backdrop { background: rgb(4 10 18 / 88%); backdrop-filter: blur(4px); }
.mvs-lightbox img { display: block; max-width: 100%; max-height: 88vh; margin: 0 auto; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 70%); }
.mvs-lightbox__close { position: fixed; top: 1.25rem; right: 1.25rem; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgb(255 255 255 / 28%); border-radius: 50%;
  background: rgb(255 255 255 / 10%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background-color .2s, border-color .2s, transform .3s; }
.mvs-lightbox__close svg { width: 20px; height: 20px; }
.mvs-lightbox__close:hover { border-color: var(--accent-ink); background: var(--accent-ink); transform: rotate(90deg); }
.mvs-lightbox__close:focus { outline: none; }
.mvs-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* with more than one picture (.has-many): previous / next at the screen's sides, the count under */
.mvs-lightbox__nav { position: fixed; top: 50%; display: none; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgb(255 255 255 / 28%); border-radius: 50%;
  background: rgb(255 255 255 / 10%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transform: translateY(-50%); transition: background-color .2s, border-color .2s; }
.mvs-lightbox__nav svg { width: 22px; height: 22px; }
.mvs-lightbox__nav--prev { left: 1.25rem; }
.mvs-lightbox__nav--next { right: 1.25rem; }
.mvs-lightbox__nav:hover { border-color: #fff; background: #fff; color: var(--ink); }
.mvs-lightbox__nav:focus { outline: none; }
.mvs-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mvs-lightbox__count { position: fixed; left: 50%; bottom: 1.1rem; display: none; padding: .4rem .9rem; border-radius: 999px; background: rgb(255 255 255 / 10%); color: #fff;
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.mvs-lightbox.has-many .mvs-lightbox__nav { display: grid; }
.mvs-lightbox.has-many .mvs-lightbox__count { display: block; }
@media (max-width: 575.98px) {   /* the buttons beside the count, under the picture */
  .mvs-lightbox__nav { top: auto; bottom: .75rem; width: 46px; height: 46px; transform: none; }
  .mvs-lightbox__nav--prev { left: calc(50% - 7.5rem); }
  .mvs-lightbox__nav--next { right: calc(50% - 7.5rem); }
  .mvs-lightbox__count { bottom: 1.3rem; }
}

/* ---------------------------------------------------------------- FAQ (products, categories)
   Beside the questions (kept in view on wide screens) "Ask our engineers": a navy card with the
   contact note and its "Contact us" link. The questions are numbered
   (Q.01 …); the open one stands out with a red rule on its left and a "-"; one is open at a time
   and the answer slides (site.js [data-faq]; .is-closing while it shuts). */
.mvs-faq { padding-block: var(--sec-pad); background: var(--surface); }
.mvs-faq__grid { display: grid; gap: 2rem; }
@media (min-width: 992px) { .mvs-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 4rem; } .mvs-faq__head { position: sticky; top: calc(var(--bar-h) + 2rem); align-self: start; } }
.mvs-faq__title { margin: 0 0 1.25rem; }
.mvs-faq__note { color: var(--muted); }
.mvs-faq__ask { position: relative; overflow: hidden; margin-top: 1.75rem; padding: 1.6rem 1.6rem 1.75rem; border-radius: 20px; background-color: var(--navy); background-image: var(--glow), var(--grid);
  background-size: auto, 24px 24px, 24px 24px; color: #c9d4e2; box-shadow: 0 30px 50px -34px rgb(11 20 36 / 70%); }
.mvs-faq__ask-title { margin: 0 0 .5rem; color: #fff; font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.mvs-faq__ask .mvs-faq__note { margin: 0; color: #c9d4e2; font-size: .9375rem; line-height: 1.6; }
.mvs-faq__ask .mvs-faq__note a { color: #fff; font-weight: 700; text-decoration-color: var(--accent-on-dark); text-underline-offset: 3px; }
.mvs-faq__list { display: flex; flex-direction: column; gap: .75rem; }
.mvs-faq__item { position: relative; border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .3s; }
.mvs-faq__item::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); transform: scaleY(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.mvs-faq__item[open]:not(.is-closing) { box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 26px 44px -30px rgb(16 24 40 / 45%); }
.mvs-faq__item[open]:not(.is-closing)::before { transform: scaleY(1); }
.mvs-faq__q { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: start; gap: 1rem; padding: 1.15rem 1.35rem; cursor: pointer; list-style: none; }
.mvs-faq__q::-webkit-details-marker { display: none; }
.mvs-faq__no { padding-top: .22rem; color: var(--accent-ink); font-size: .75rem; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.mvs-faq__q h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; transition: color .2s; }
.mvs-faq__q:hover h3 { color: var(--accent-ink); }
.mvs-faq__mark { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); transition: background-color .25s; }
.mvs-faq__mark::before, .mvs-faq__mark::after { content: ""; position: absolute; left: 8px; top: 13px; width: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s, background-color .25s; }
.mvs-faq__mark::after { transform: rotate(90deg); }
.mvs-faq__item[open]:not(.is-closing) .mvs-faq__mark { background: var(--accent-ink); }
.mvs-faq__item[open]:not(.is-closing) .mvs-faq__mark::before, .mvs-faq__item[open]:not(.is-closing) .mvs-faq__mark::after { background: #fff; }
.mvs-faq__item[open]:not(.is-closing) .mvs-faq__mark::after { transform: rotate(0); }
.mvs-faq__a { overflow: hidden; padding: 0 1.35rem 1.35rem calc(1.35rem + 3.5rem); color: var(--text); }   /* under the question, past its number */
.mvs-faq__a p { max-width: 70ch; }
.mvs-faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .mvs-faq__ask { margin-top: 1.25rem; padding: 1.35rem 1.25rem 1.4rem; }
  .mvs-faq__q { grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: .7rem; padding: 1rem 1.1rem; }
  .mvs-faq__q h3 { font-size: 1rem; }
  .mvs-faq__a { padding: 0 1.1rem 1.15rem; }
}

/* ---------------------------------------------------------------- forms and the "Get Quotation" popup */
.mvs-form .form-control { padding: .8rem 1rem; font-size: 1rem; border-color: var(--line); border-radius: 12px; background: #fff; }
.mvs-form .form-control:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 4px rgb(208 22 28 / 12%); }
.mvs-form__hp { position: absolute; left: -9999px; }
.mvs-form__status { margin: .5rem 0 0; color: var(--accent-ink); }
.mvs-form__status.is-ok, .mvs-form__status.is-error { padding: .7rem 1rem; border-radius: 12px; font-weight: 600; }
.mvs-form__status.is-ok { color: #135a32; background: #e6f4ec; }
.mvs-form__status.is-error { color: #9b1c17; background: #fdecea; }
.mvs-form textarea.form-control { min-height: 7.5rem; resize: vertical; font-family: inherit; line-height: 1.5; }
.mvs-form .form-control.is-invalid { border-color: #c62828; }
.mvs-form__err { display: block; margin-top: .35rem; color: #b3261e; font-size: .875rem; }
.mvs-form.is-busy [type="submit"] { opacity: .65; pointer-events: none; }
.mvs-form__rc { margin: .5rem 0 0; color: var(--muted); font-size: .75rem; }
.mvs-dialog { border: 0; border-radius: var(--r-xl); padding: 2.25rem; width: min(660px, 94vw); box-shadow: var(--shadow-lg); }
.mvs-dialog::backdrop { background: rgb(4 10 18 / 62%); backdrop-filter: blur(4px); }
.mvs-dialog__close { position: absolute; right: 1.25rem; top: 1.25rem; }
.mvs-dialog .mvs-sec { padding: 0; }

/* the "Get Quotation" popup (footer.php): two panels. Left, on the dark drawing grid with a faint
   valve drawing: the kicker, the heading, the intro, three steps, the direct lines and the company's
   facts. Right: the form, each field with its icon, the product (when the button carried one) as a
   red-tinted chip, the button full width. It opens with a lift; phones get a sheet from the bottom
   with the side panel cut down to the heading, the intro and the direct lines. */
.mvs-quote { width: min(1000px, 94vw); max-height: min(92vh, 900px); max-height: min(92dvh, 900px); padding: 0; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 50px 100px -30px rgb(4 10 18 / 70%); }
.mvs-quote[open] { animation: mvs-quote-in .45s cubic-bezier(.2, .8, .2, 1); }
.mvs-quote[open]::backdrop { animation: mvs-fadein .3s ease-out; }
@keyframes mvs-quote-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.mvs-quote .mvs-dialog__close { z-index: 3; right: 1rem; top: 1rem; }
.mvs-quote__x { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, transform .3s; }
.mvs-quote__x:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.mvs-quote__x:focus { outline: none; }
.mvs-quote__x:focus-visible { outline: 2px solid rgb(227 30 36 / 45%); outline-offset: 2px; }
.mvs-quote__x .mvs-ico { width: 18px; height: 18px; }
.mvs-quote__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); max-height: inherit; }

/* the side panel */
.mvs-quote__side { position: relative; overflow: hidden; padding: 2.5rem 2.25rem 2.25rem; background-color: var(--navy); background-image: var(--glow), var(--grid); background-size: auto, 40px 40px, 40px 40px; color: var(--on-dark-muted); }
.mvs-quote__side > * { position: relative; }
.mvs-drawing--quote { position: absolute !important; right: -22%; bottom: 4%; width: 95%; color: rgb(255 255 255 / 9%); }
.mvs-drawing--quote .mvs-drawing__flow { stroke-opacity: .5; }
.mvs-quote__kicker { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; color: #ff8a8e; font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mvs-quote__kicker::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ff4148, rgb(255 65 72 / 25%)); }
.mvs-quote__side .mvs-h--h4 { margin: 0 0 .6rem; color: #fff; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.mvs-quote__intro { color: #d5dde8; font-size: 1rem; }
.mvs-quote__intro p { margin: 0; }
.mvs-quote__steps { display: grid; gap: .9rem; margin: 1.75rem 0 1.6rem; padding: 0; }
.mvs-quote__steps li { display: flex; align-items: flex-start; gap: .85rem; }
.mvs-quote__steps b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 10px; background: rgb(255 255 255 / 6%); color: #ff8a8e; font-size: .75rem; font-weight: 800; }
.mvs-quote__steps span { display: flex; flex-direction: column; color: #aebbd0; font-size: .8125rem; line-height: 1.4; }
.mvs-quote__steps strong { color: #fff; font-size: .9375rem; font-weight: 700; }
.mvs-quote__direct { display: grid; gap: .45rem; padding-top: 1.25rem; border-top: 1px dashed rgb(255 255 255 / 18%); }
.mvs-quote__direct p { margin: 0 0 .2rem; color: #fff; font-size: .8125rem; font-weight: 700; }
.mvs-quote__direct a { display: inline-flex; align-items: center; gap: .6rem; width: fit-content; color: #d5dde8; font-size: .875rem; font-weight: 600; text-decoration: none; transition: color .2s; }
.mvs-quote__direct a:hover { color: #fff; }
.mvs-quote__direct .mvs-ico { box-sizing: content-box; width: 15px; height: 15px; padding: 7px; border-radius: 50%; background: rgb(227 30 36 / 22%); color: #ff8a8e; transition: background-color .2s, color .2s; }
.mvs-quote__direct a:hover .mvs-ico { background: var(--accent); color: #fff; }
.mvs-quote__trust { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.4rem 0 0; padding: 0; }
.mvs-quote__trust li { padding: .3rem .65rem; border: 1px solid rgb(255 255 255 / 16%); border-radius: 99px; color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; }
/* the panel's parts come in one after another as it opens */
.mvs-quote[open] :is(.mvs-quote__kicker, .mvs-h--h4, .mvs-quote__intro, .mvs-quote__steps li, .mvs-quote__direct, .mvs-quote__trust) { animation: mvs-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.mvs-quote[open] .mvs-h--h4 { animation-delay: .05s; }
.mvs-quote[open] .mvs-quote__intro { animation-delay: .1s; }
.mvs-quote[open] .mvs-quote__steps li:nth-child(1) { animation-delay: .16s; }
.mvs-quote[open] .mvs-quote__steps li:nth-child(2) { animation-delay: .22s; }
.mvs-quote[open] .mvs-quote__steps li:nth-child(3) { animation-delay: .28s; }
.mvs-quote[open] .mvs-quote__direct { animation-delay: .34s; }
.mvs-quote[open] .mvs-quote__trust { animation-delay: .4s; }

/* the form panel: fields with an icon each */
.mvs-quote__main { display: flex; flex-direction: column; overflow-y: auto; padding: 2.5rem 2.25rem 2rem; overscroll-behavior: contain; }
/* centred while it fits; taller than the box it starts at its top and scrolls (justify-content: center would put its top out of reach) */
.mvs-quote__main > :first-child { margin-top: auto; }
.mvs-quote__main > :last-child { margin-bottom: auto; }
.mvs-quote__formhead { display: flex; flex-direction: column; gap: .2rem; margin: 0 3.5rem 1.25rem 0; }   /* clear of the close button */
.mvs-quote__formhead strong { color: var(--ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -.015em; }
.mvs-quote__formhead span { color: var(--muted); font-size: .8125rem; }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form .row { --bs-gutter-y: .85rem; }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form .form-control { height: 52px; padding: .75rem 1rem .75rem 2.85rem; border: 1.5px solid var(--line); border-radius: 12px; background: #f8fafc var(--ico) 1rem center / 18px no-repeat; color: var(--ink); font-size: .9rem;
  transition: border-color .2s, background-color .2s, box-shadow .2s; }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form .form-control::placeholder { color: #7a8494; }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form .form-control:focus { border-color: var(--accent-ink); background-color: #fff; box-shadow: 0 0 0 4px rgb(208 22 28 / 10%); }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form textarea.form-control { height: auto; min-height: 7rem; background-position: 1rem 1rem; }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form [name="your-name"]       { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8494' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form [name="your-phone"]      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8494' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form [name="your-email"]      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8494' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E"); }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form [name="company-name"]    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8494' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z'/%3E%3C/svg%3E"); }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form [name="dynamic_text-500"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8494' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7v10l9.5-5zM21.5 7v10L12 12z'/%3E%3Cpath d='M12 12V4.5M8.5 4.5h7'/%3E%3C/svg%3E"); }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form [name="qty"]             { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8494' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form [name="your-message"]    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8494' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z'/%3E%3C/svg%3E"); }
.mvs-contact__sheet .mvs-form [name="your-subject"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8494' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E"); }   /* (the contact form only) */
/* the product list: its own arrow; once a product is chosen it turns red-tinted and bold */
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form select.form-control { padding-right: 2.6rem; overflow: hidden; color: #7a8494; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: var(--ico), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1424' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: 1rem center, right 1rem center; background-size: 18px, 14px; background-repeat: no-repeat; }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form select.form-control:valid { border-color: rgb(227 30 36 / 45%); background-color: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form select.form-control :is(option, optgroup) { color: var(--ink); background: #fff; font-weight: 500; }
:is(.mvs-quote, .mvs-contact__sheet) .mvs-form select.form-control optgroup { font-weight: 800; }
html.js .mvs-form [data-when]:not(.is-on) { display: none; }   /* asked only for some enquiries (site.js) */

/* the product list drawn over the select (site.js [data-pick]): a button like the other fields,
   and a panel fixed beside it - a search field, then the products in their groups (the category in
   red capitals, its parent and the count), each with its picture; the chosen one ticked */
.mvs-pick { position: relative; }
.mvs-pick__native { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.mvs-pick__btn { position: relative; display: flex; align-items: center; width: 100%; height: 52px; padding: .75rem 2.6rem .75rem 2.85rem; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8494' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7v10l9.5-5zM21.5 7v10L12 12z'/%3E%3Cpath d='M12 12V4.5M8.5 4.5h7'/%3E%3C/svg%3E") 1rem center / 18px no-repeat;
  color: #7a8494; font: inherit; font-size: .9rem; text-align: left; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.mvs-pick__btn::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 14px; height: 14px; margin-top: -7px; transition: transform .25s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1424' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.mvs-pick__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvs-pick.is-chosen .mvs-pick__btn { border-color: rgb(227 30 36 / 45%); background-color: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.mvs-pick__btn:focus-visible, .mvs-pick.is-open .mvs-pick__btn { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 4px rgb(208 22 28 / 10%); }
.mvs-pick.is-open .mvs-pick__btn::after { transform: rotate(180deg); }
.mvs-pick:has(+ .is-invalid) .mvs-pick__btn { border-color: #c62828; }
.mvs-pick__panel { position: fixed; z-index: 20; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -20px rgb(4 10 18 / 45%), 0 0 0 1px rgb(16 24 40 / 3%);
  animation: mvs-pick-in .22s cubic-bezier(.2, .8, .2, 1); transform-origin: top center; }
.mvs-pick__panel.is-up { transform-origin: bottom center; }
@keyframes mvs-pick-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.mvs-pick__search { display: block; width: calc(100% - 1.2rem); height: 42px; margin: .6rem; padding: .5rem .8rem .5rem 2.4rem; border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); font: inherit; font-size: .875rem;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='m21 21-4.6-4.6'/%3E%3C/svg%3E") .8rem center / 16px no-repeat; }
.mvs-pick__search:focus { outline: none; border-color: var(--accent-ink); background-color: #fff; }
.mvs-pick__list { max-height: var(--pick-h, 300px); margin: 0; padding: 0 .45rem .5rem; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; }
.mvs-pick__group { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: .45rem; margin-top: .25rem; padding: .55rem .55rem .35rem; background: #fff; border-bottom: 1px dashed rgb(16 24 40 / 12%); }
.mvs-pick__group b { color: var(--accent); font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mvs-pick__group small { color: var(--muted); font-size: .6875rem; font-weight: 600; }
.mvs-pick__group em { margin-left: auto; padding: .05rem .45rem; border-radius: 99px; background: var(--surface); color: var(--muted); font-size: .6875rem; font-style: normal; font-weight: 700; }
.mvs-pick__opt { position: relative; display: flex; align-items: center; gap: .7rem; margin: .15rem 0; padding: .35rem 2.2rem .35rem .4rem; border-radius: 10px; color: var(--ink); font-size: .875rem; font-weight: 600; line-height: 1.3; cursor: pointer; }
.mvs-pick__opt img, .mvs-pick__noimg { flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--plate); object-fit: cover; }
.mvs-pick__noimg { display: grid; place-items: center; border: 1.5px dashed rgb(16 24 40 / 20%); background: #fff; }
.mvs-pick__opt--other { margin-top: .4rem; padding-top: .55rem; border-top: 1px dashed rgb(16 24 40 / 12%); border-radius: 0 0 10px 10px; color: var(--muted); }
.mvs-pick__opt.is-active { background: var(--surface); }
.mvs-pick__opt[aria-selected="true"] { color: var(--accent-ink); }
.mvs-pick__opt[aria-selected="true"]::after { content: ""; position: absolute; right: .8rem; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0161c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.mvs-pick__empty { margin: 0; padding: .3rem 1rem .9rem; color: var(--muted); font-size: .8125rem; }
.mvs-quote .mvs-form [type="submit"] { width: 100%; justify-content: space-between; margin: .4rem 0 0; padding-block: .5rem; font-size: 1rem; }
.mvs-quote .mvs-form [type="submit"]::after { width: 2.5rem; height: 2.5rem; }
.mvs-quote .mvs-form__rc { text-align: center; }

@media (max-width: 767.98px) {
  /* (dvh: the height with the browser's own bars showing; 100vh runs under them) */
  .mvs-quote { width: 100vw; max-width: 100vw; max-height: 94vh; max-height: 94dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .mvs-quote[open] { animation-name: mvs-quote-up; }
  @keyframes mvs-quote-up { from { transform: translateY(100%); } }
  .mvs-quote__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-height: 94vh; max-height: 94dvh; }
  /* the form gets the room: the dark head is only the title and the direct lines */
  .mvs-quote__side { padding: 1rem 1.25rem .8rem; }
  .mvs-quote__steps, .mvs-quote__trust, .mvs-quote__intro, .mvs-quote__direct p, .mvs-drawing--quote { display: none; }
  .mvs-quote__kicker { margin-bottom: .3rem; }
  .mvs-quote__side .mvs-h--h4 { margin-bottom: 0; font-size: 1.45rem; }
  .mvs-quote__direct { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .6rem; padding-top: .6rem; }
  .mvs-quote__direct a:last-child { display: none; }   /* the e-mail address: too long for the line */
  .mvs-quote__main { padding: 1rem 1.25rem 1.25rem; }
  .mvs-quote__formhead { margin-bottom: .75rem; }
  .mvs-quote .mvs-form .row { --bs-gutter-y: .6rem; }
  .mvs-quote .mvs-form .form-control { height: 48px; }
  .mvs-quote .mvs-form textarea.form-control { height: auto; min-height: 4.75rem; }
  .mvs-quote .mvs-dialog__close { right: .75rem; top: .75rem; }
  .mvs-quote__x { width: 38px; height: 38px; border-color: rgb(255 255 255 / 25%); background: rgb(255 255 255 / 10%); color: #fff; }
}

/* ---------------------------------------------------------------- 404 */
/* 404 ("line blocked"): on light drawing paper, the big 404 over a pipeline drawn across the page -
   the flow (red dashes) runs to a closed valve (its ball shut, a red bar across the bore) and stops;
   then the message, the home page and the quotation form, a search field (the header's palette) and
   the four product ranges as under the home hero */
.mvs-404 { position: relative; overflow: clip; padding-bottom: clamp(3.5rem, 8vw, 6rem); background: var(--surface); }   /* (its top: main > .mvs-sec:first-child, room for the header) */
.mvs-404::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(16 24 40 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 6%) 1px, transparent 1px),
    linear-gradient(rgb(16 24 40 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 3%) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; background-position: center top;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.mvs-404 > .container { position: relative; z-index: 1; }
.mvs-404__code { position: relative; z-index: 1; margin: 0; font-size: clamp(5.5rem, 16vw, 10rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; background: linear-gradient(135deg, var(--ink) 30%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mvs-404__line { display: block; width: min(100%, 980px); height: auto; margin: -.75rem auto 1.75rem; overflow: visible; }
.mvs-404__line path, .mvs-404__line circle { stroke-linecap: round; stroke-linejoin: round; }
.mvs-404__axis { stroke: rgb(16 24 40 / 22%); stroke-width: 1; stroke-dasharray: 22 5 3 5; }
.mvs-404__pipe { stroke: rgb(16 24 40 / 55%); stroke-width: 1.6; fill: #fff; }
.mvs-404__body { stroke: var(--ink); stroke-width: 1.8; fill: #fff; }
.mvs-404__ball { stroke: rgb(16 24 40 / 55%); stroke-width: 1.2; stroke-dasharray: 6 5; fill: none; }
.mvs-404__shut { stroke: var(--accent); stroke-width: 6; }
.mvs-404__flow { stroke: var(--accent); stroke-width: 4; stroke-dasharray: 12 16; stroke-opacity: .75; animation: mvs-flow 1.4s linear infinite; }
.mvs-404 h2 { margin-bottom: 1rem; }
.mvs-404 h4 { margin-bottom: 1.5rem; font-size: 1.125rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.mvs-404__ways { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 2rem; }
.mvs-404__ways .check { margin-right: .4rem; }
.mvs-404 .mvs-btn { margin: 0; }
.mvs-404__search { display: flex; align-items: center; gap: .75rem; width: min(100%, 560px); margin: 0 auto 3rem; padding: .9rem 1.2rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: .9375rem; text-align: left;
  box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 20px 40px -30px rgb(16 24 40 / 55%); transition: border-color .2s, box-shadow .2s; }
.mvs-404__search:hover, .mvs-404__search:focus-visible { border-color: var(--ink); box-shadow: 0 1px 0 rgb(16 24 40 / 4%), 0 26px 46px -28px rgb(16 24 40 / 60%); }
.mvs-404__search .mvs-ico { flex: none; width: 20px; height: 20px; color: var(--accent-ink); }
.mvs-404__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvs-404__label { margin: 0 0 1rem; color: #4b5563; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mvs-404__ranges { margin-bottom: 0; text-align: left; }
@media (max-width: 575.98px) {
  .mvs-404__line { width: 100%; height: 96px; margin: -.25rem auto 1.25rem; }   /* (the drawing cropped to its middle: the valve stays big) */
  .mvs-404__ways { flex-direction: column; gap: .5rem; }
  .mvs-404__ways .check { margin: 0 0 .4rem; }
  .mvs-404__ways .mvs-btn { justify-content: space-between; width: min(100%, 300px); }
  .mvs-404__search { margin-bottom: 2.25rem; padding: .8rem 1rem; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .mvs-404__flow { animation: none; } }

/* ---------------------------------------------------------------- footer
   Compact, over a dark photo of valves in a plant (navy over it, red light from a corner): four
   columns, the export map beside the running lists of products and locations, the copyright. */
.mvs-footer { position: relative; overflow: hidden; isolation: isolate; color: var(--on-dark-muted); font-size: .9375rem;
  background-color: var(--ink);
  background-image: radial-gradient(700px 380px at 0% 0%, rgb(227 30 36 / 14%), transparent 70%),
                    linear-gradient(90deg, rgb(11 20 36 / 96%) 0%, rgb(11 20 36 / 84%) 40%, rgb(11 20 36 / 52%) 100%),
                    url("../../media/2025/05/sub-header.png");
  background-size: auto, auto, cover; background-position: 0 0, 0 0, right center; }
.mvs-footer a:not(.btn):not(.mvs-link) { color: #fff; text-decoration: none; transition: color .15s; }
.mvs-footer a:not(.btn):not(.mvs-link):hover { color: #fff; }

/* the four columns */
.mvs-footer__main { display: grid; gap: 2rem 3rem; padding-block: clamp(2.75rem, 5vw, 3.75rem) clamp(2rem, 4vw, 2.5rem); }
@media (min-width: 768px) { .mvs-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .mvs-footer__main { grid-template-columns: minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, 1.3fr) minmax(0, 1.15fr); } }
@media (min-width: 992px) and (max-width: 1199.98px) { .mvs-footer__main { column-gap: 2rem; } .mvs-footer__col--2 { column-gap: 1rem; } }
.mvs-footer__logo img { height: 58px; width: auto; }
.mvs-footer__tagline { margin: 1rem 0 1.25rem; max-width: 32ch; font-size: .875rem; line-height: 1.6; }
.mvs-footer__social { display: flex; gap: .5rem; }
.mvs-footer__social .mvs-iconbox { height: auto; }
.mvs-footer__social .mvs-iconbox__link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 14%); background: rgb(255 255 255 / 6%); color: #fff; transition: background-color .2s, border-color .2s, transform .2s; }
.mvs-footer__social .mvs-iconbox__link:hover { background: var(--accent-ink); border-color: var(--accent-ink); transform: translateY(-2px); }
.mvs-footer__social .mvs-ico { width: 17px; height: 17px; }
.mvs-footer .mvs-h--h5, .mvs-footer__head { position: relative; margin: 0 0 1.1rem; padding-bottom: .7rem; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: #fff; }
.mvs-footer .mvs-h--h5::after, .mvs-footer__head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; border-radius: 2px; background: var(--accent); }
.mvs-footer .mvs-menu { margin: 0; }
.mvs-footer .mvs-menu a:not(.btn) { display: inline-flex; align-items: center; gap: 0; padding: .25rem 0; color: var(--on-dark-muted); font-size: .9rem; transition: color .2s; }
.mvs-footer .mvs-menu a:not(.btn)::before { content: ""; width: 0; height: 2px; margin-right: 0; border-radius: 2px; background: var(--accent); transition: width .2s, margin-right .2s; }
.mvs-footer .mvs-menu a:not(.btn):hover { color: #fff; }
.mvs-footer .mvs-menu a:not(.btn):hover::before { width: 9px; margin-right: .45rem; }
.mvs-footer__col--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-content: start; }
.mvs-footer__col--2 .mvs-h { grid-column: 1 / -1; }
@media (max-width: 991.98px) { .mvs-footer__col--1 .mvs-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }

/* contact */
.mvs-footer__contact ul { display: flex; flex-direction: column; gap: .65rem; margin: 0; }
.mvs-footer__contact li > a, .mvs-footer__address { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; font-weight: 600; line-height: 1.45; }
.mvs-footer__contact .mvs-ico { flex: none; width: 17px; height: 17px; margin-top: .15rem; color: #ff8a8e; }
.mvs-footer__contact li > a:hover { color: #ff8a8e; }
.mvs-footer__address { font-weight: 400; font-size: .85rem; color: var(--on-dark-muted); }
.mvs-footer__address p { margin: 0; }
.mvs-footer__address p:first-of-type { color: #fff; font-weight: 600; }
.mvs-footer__maps { margin-top: .5rem; font-size: .8125rem; }

/* global presence: title and region tabs | the export map, the chosen region glowing | that
   region's locations. All locations are in the page; the lists share one grid cell, so the block
   keeps the height of the longest and does not jump between tabs. Then the product range as a
   moving strip. Without JavaScript every region shows. */
.mvs-footer__export { padding-block: 1.75rem; border-top: 1px solid var(--dark-line); }
.mvs-footer__world { display: grid; gap: 1.5rem 2rem; align-items: center; }
.mvs-footer__world > *, .mvs-footer__places > * { min-width: 0; }   /* the scrolling tab row must not widen the grid */
@media (min-width: 1200px) { .mvs-footer__world { grid-template-columns: minmax(0, 3.2fr) minmax(0, 3.6fr) minmax(0, 5.2fr); } }
@media (min-width: 768px) and (max-width: 1199.98px) {
  .mvs-footer__world { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mvs-footer__world-intro { grid-column: 1 / -1; }
  .mvs-footer__export-title { font-size: 1.75rem; }
  .mvs-footer__world .mvs-footer__regions { display: flex; flex-wrap: wrap; max-width: none; }
}
@media (max-width: 1199.98px) { html.js .mvs-footer__cities:not(.is-active) { display: none; } }   /* (the list may change height) */
.mvs-footer__label { margin-bottom: .7rem; letter-spacing: .1em; }  /* one line in its narrow column */
.mvs-footer .mvs-footer__label::before { width: 1.75rem; }
.mvs-footer__world-intro { container-type: inline-size; }
/* one line: the size follows the column's width (cqi), up to 1.75rem */
.mvs-footer__export-title { margin: 0 0 1rem; color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-size: min(1.75rem, 7.2cqi); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; white-space: nowrap; }
.mvs-footer__regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; max-width: 330px; }
.mvs-footer__region { padding: .45rem .85rem; border-radius: 999px; text-align: center; white-space: nowrap; border: 1px solid rgb(255 255 255 / 14%); background: rgb(255 255 255 / 4%); color: #cfd8e3; font-size: .8125rem; font-weight: 700; transition: background-color .2s, border-color .2s, color .2s; }
.mvs-footer__region:hover { border-color: rgb(255 255 255 / 30%); color: #fff; }
.mvs-footer__region[aria-selected="true"] { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; box-shadow: 0 8px 18px -10px rgb(227 30 36 / 80%); }

/* the map, with a glow over the chosen region */
.mvs-footer__globe { position: relative; margin: 0; }
.mvs-footer__globe img { display: block; width: 100%; height: auto; }
.mvs-footer__glow { position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); width: 34%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgb(227 30 36 / 38%), rgb(227 30 36 / 10%) 55%, transparent); transition: left .6s cubic-bezier(.2, .7, .2, 1), top .6s cubic-bezier(.2, .7, .2, 1); }
.mvs-footer__glow::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; border: 1px solid rgb(255 107 112 / 70%); animation: mvs-ping 2.2s ease-out infinite; }
@keyframes mvs-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.mvs-footer__world { --rx: 64%; --ry: 37%; }

/* the locations of the chosen region */
.mvs-footer__places { display: grid; align-self: center; }
.mvs-footer__cities .is-long { grid-column: span 2; }   /* "United States of America" on one line */
@media (min-width: 1400px) { .mvs-footer__export .mvs-footer__citylist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mvs-footer__cities { grid-area: 1 / 1; }
.mvs-footer__citylist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; align-content: start; gap: 0 1rem; margin: 0; }
html.js .mvs-footer__cities:not(.is-active) { visibility: hidden; opacity: 0; }
html.js .mvs-footer__cities.is-active { animation: mvs-fadein .35s ease; }
html:not(.js) .mvs-footer__places { gap: 1rem; }
html:not(.js) .mvs-footer__cities { grid-area: auto; }
.mvs-footer__cities a:not(.btn) { display: flex; align-items: center; gap: .45rem; padding: .17rem 0; color: #d5dde7; font-size: .84rem; line-height: 1.3; }
.mvs-footer__cities a:not(.btn)::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / 30%); transition: background-color .2s, transform .2s; }
.mvs-footer__cities a:not(.btn):hover { color: #fff; }
.mvs-footer__cities a:not(.btn):hover::before { background: var(--accent); transform: scale(1.6); }

/* the product range: a strip that moves slowly, pauses under the pointer, and stands still (wrapped)
   for reduced motion */
.mvs-footer__range { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding: .55rem .55rem .55rem 1rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / 9%); background: rgb(255 255 255 / 3%); }
.mvs-footer__range-title { flex: none; margin: 0; color: #fff; font-size: .8125rem; font-weight: 700; }
.mvs-footer__ticker { display: flex; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.mvs-footer__phrases { display: flex; flex: none; gap: 0; margin: 0; padding-right: 1.25rem; white-space: nowrap; animation: mvs-marquee 110s linear infinite; }
.mvs-footer__ticker:hover .mvs-footer__phrases { animation-play-state: paused; }
.mvs-footer__phrases li { display: inline-flex; align-items: center; color: #d5dde7; font-size: .82rem; }
.mvs-footer__phrases li::after { content: ""; width: 5px; height: 5px; margin: 0 1rem; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .mvs-footer__range { align-items: flex-start; border-radius: 18px; }
  .mvs-footer__ticker { -webkit-mask-image: none; mask-image: none; }
  .mvs-footer__phrases { flex-wrap: wrap; white-space: normal; row-gap: .3rem; animation: none; }
  .mvs-footer__phrases[aria-hidden="true"] { display: none; }
}

@media (max-width: 767.98px) {
  .mvs-footer__globe { max-width: 520px; }
}
@media (max-width: 575.98px) {
  .mvs-footer__regions { display: flex; max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }   /* the row goes on: it fades at the right */
  .mvs-footer__regions::-webkit-scrollbar { display: none; }
  .mvs-footer__region { flex: none; }
  .mvs-footer__citylist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .6rem; }
  html.js .mvs-footer__cities:not(.is-active) { display: none; }   /* on a phone the list may change height */
  .mvs-footer__export .mvs-footer__cities a:not(.btn) { font-size: .75rem; gap: .3rem; }
  .mvs-footer__globe { max-width: 420px; }
  .mvs-footer__range { flex-direction: column; align-items: stretch; gap: .4rem; border-radius: 16px; padding: .6rem .8rem; }
}

/* copyright */
.mvs-footer__base { padding-block: 1.15rem; border-top: 1px solid var(--dark-line); }
.mvs-footer .mvs-h--h6 { margin: 0; font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--on-dark-muted); }
.mvs-footer .mvs-h--h6 a:not(.btn) { color: #fff; }
.mvs-footer .mvs-h--h6 a:not(.btn):hover { color: #ff8a8e; }
@media (max-width: 575.98px) { .mvs-footer .mvs-h--h6 { line-height: 1.6; text-align: center; } .mvs-footer__sep { display: block; height: 0; overflow: hidden; } }
@media (max-width: 991.98px) { .mvs-footer__base { padding-bottom: 5.25rem; } }   /* room for the phone bar */

/* back to top: floats in once the page has scrolled; its ring fills as the page is read */
.mvs-totop { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1019; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; color: #fff;
  background: rgb(11 20 36 / 86%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 30px -12px rgb(0 0 0 / 55%);
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.7); transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .45s, background-color .2s; }
.mvs-totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mvs-totop:hover { background: var(--accent-ink); }
.mvs-totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mvs-totop__ring circle { fill: none; stroke: rgb(255 255 255 / 14%); stroke-width: 2.5; }
.mvs-totop__ring .mvs-totop__bar { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--read, 0) * 100); transition: stroke-dashoffset .15s linear; }
.mvs-totop:hover .mvs-totop__bar { stroke: #fff; }
.mvs-totop__arrow { position: relative; display: grid; place-items: center; overflow: hidden; width: 22px; height: 22px; }
.mvs-totop__arrow .mvs-ico { width: 20px; height: 20px; }
.mvs-totop:hover .mvs-totop__arrow .mvs-ico { animation: mvs-lift .7s cubic-bezier(.4, 0, .2, 1); }
@keyframes mvs-lift { 0% { transform: none; } 45% { transform: translateY(-120%); } 46% { transform: translateY(120%); } 100% { transform: none; } }
@media (max-width: 991.98px) { .mvs-totop { right: .9rem; bottom: calc(4.6rem + env(safe-area-inset-bottom)); width: 44px; height: 44px; } }

/* ---------------------------------------------------------------- every width (responsive pass, 30 Oct 2026)
   Each page looked at 360 / 768 / 1024px and measured at 320-1920px; what fixed the fit. */

/* text: short labels and card titles break into even lines, never one word alone; subtitles get air;
   justified text hyphenates where columns are narrow, so no wide gaps */
:is(.mvs-sechead .mvs-h--h5, .mvs-clients__label, .mvs-report__foot, .mvs-rcard__title, .mvs-ccard__title, .mvs-bcard__title, .mvs-faq__q, .mvs-article summary,
    .mvs--page .mvs-sec--contact .mvs-contact__way .mvs-iconbox__title, .mvs-report__title) { text-wrap: balance; }
.mvs-h--p { line-height: 1.5; }
@media (max-width: 1199.98px) { main :is(p, li) { -webkit-hyphens: auto; hyphens: auto; } }

/* datasheet cards: a value may take two lines (the buyer's detail, not an ellipsis); in a row the
   titles keep two lines' room, so the specs line up from card to card */
.mvs-rcard__specs dd { display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: clip; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mvs-rail .mvs-rcard__title { min-height: 2.5em; }

/* home: a range heading's red words on a line of their own at every width; "Corrosion-Resistant" kept whole (index.php) */
.mvs--home .mvs-sec--range .mvs-wrap--heading .mvs-h--h3 .mvs-accent { display: block; }
.mvs-nowrap { white-space: nowrap; }
.js-more + .mvs-more-btn { vertical-align: middle; }

/* the inspection report (home, About): the facts box across the head below 1200px; on phones the
   facts two to a row with "Quality system" on its own, the stamp under the result, the footer
   lines stacked */
@media (min-width: 992px) and (max-width: 1199.98px) {   /* the name across the top, the three facts under it */
  .mvs-report__meta { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mvs-report__meta div:first-child { grid-column: 1 / -1; border-bottom: 1px solid rgb(16 24 40 / 16%); }
  .mvs-report__meta div:nth-child(2) { border-left: 0; }
}
@media (max-width: 575.98px) {
  .mvs-report__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .mvs-report__meta div { border-left: 0 !important; border-top: 1px solid rgb(16 24 40 / 16%); }
  .mvs-report__meta div:first-child { border-top: 0; }
  .mvs-report__meta div:nth-child(3) { grid-column: 1 / -1; }
  .mvs-report__meta div:nth-child(4) { border-left: 1px solid rgb(16 24 40 / 16%) !important; }
  .mvs-report__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "no check" "no result" "no stamp"; }
  .mvs-report__stamp { justify-self: start; }
  .mvs-report__foot { flex-direction: column; align-items: flex-start; }
}

/* About: the nameplates' stamped strip on one line */
.mvs-plate__strip > * { white-space: nowrap; }
@media (max-width: 991.98px) { .mvs-plate__strip { gap: .6rem; letter-spacing: .08em; } }

/* certificates and gallery: the heading across the width below 992px; the gallery four to a row
   from 768px (sixteen photos, no lone one) */
@media (max-width: 991.98px) { .mvs-certs-row .mvs-sechead .mvs-h--h2 { max-width: none; } }
@media (min-width: 768px) { .mvs-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* contact: below 992px the three ways as rows - the sign on the left, the words beside it (as on
   phones); on wide screens every card's action at its foot */
@media (min-width: 576px) and (max-width: 991.98px) {
  .mvs--page .mvs-sec--contact .mvs-contact__ways { grid-template-columns: minmax(0, 1fr); }
  .mvs--page .mvs-sec--contact .mvs-contact__way { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; align-items: start; }
  .mvs--page .mvs-sec--contact .mvs-contact__way > :not(.mvs-contact__ico) { grid-column: 2; }
  .mvs--page .mvs-sec--contact .mvs-contact__way .mvs-contact__ico { grid-row: 1 / span 4; margin-bottom: 0; }
  .mvs-contact__way > .mvs-iconbox__desc + .mvs-contact__act--wa, .mvs-contact__act { justify-self: start; }
}
@media (min-width: 992px) { .mvs-contact__way > .mvs-iconbox__desc + .mvs-contact__act--wa { margin-top: auto; } .mvs-contact__way > .mvs-iconbox__desc { margin-bottom: 1rem; } }

/* 404: on phones the sentence, then the button under it */
@media (max-width: 575.98px) { .mvs-404 .check__or { display: none; } }

/* blog listings: at two to a row a last lone card stands in the middle */
@media (min-width: 576px) and (max-width: 991.98px) {
  .mvs-posts.mvs-posts--sheet > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .75rem); }
}

/* the product listings: the result count on a line of its own below 1280px, the range tabs a row
   that scrolls inside its box; the engineering note's title block may wrap */
@media (max-width: 1279.98px) {
  .mvs-shopbar { grid-template-columns: minmax(0, 1fr); }
  .mvs-shopbar .mvs-count { grid-row: 3; }
  .mvs-ranges--tabs { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mvs-ranges--tabs::-webkit-scrollbar { display: none; }
}
.mvs-note__block b, .mvs-note__block span:last-child { white-space: normal; }

/* product: the gallery stays in view beside a long description (992px up); 768-991px the gallery
   and the facts side by side; below 1200px the key specs as rows (the name left, the value right)
   and the three buttons as on phones (the enquiry across, call and WhatsApp side by side, "Quote
   on" not shown); the datasheet one column of rows below 1200px; on phones its tabs share the width */
@media (min-width: 992px) { .mvs--product .mvs-wrap--product_images > * { position: sticky; top: calc(var(--bar-h) + 1.5rem); } }
@media (min-width: 768px) and (max-width: 991.98px) {
  .mvs--product .mvs-wrap--product_images { flex: 0 0 auto; width: 44%; }
  .mvs--product .mvs-product__summary { flex: 0 0 auto; width: 56%; }
  .mvs--product .mvs-wrap--product_images > * { position: sticky; top: calc(var(--bar-h) + 1rem); }
}
@media (max-width: 1199.98px) {
  .mvs-product__keys { grid-auto-flow: row; }
  .mvs-product__keys div + div { border-top: 1px solid var(--line); border-left: 0; }
  .mvs-product__keys div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem 1rem; }
  .mvs-product__keys dt { flex: none; margin: 0; }
  .mvs-product__keys dd { text-align: right; -webkit-line-clamp: 3; }
  .mvs-product__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .mvs-product__actions .btn-primary { grid-column: 1 / -1; justify-content: space-between; }
  .mvs-product__actions .mvs-btn-sec { justify-content: space-between; gap: .5rem; min-height: 48px; padding-left: .95rem; font-size: .875rem; }
  .mvs-btn__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mvs-datasheet .mvs-table tbody { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .mvs-datasheet__tabs { padding: 0 .5rem; }
  .mvs-datasheet__tab { flex: 1 1 0; min-width: 0; gap: .5rem; padding: .9rem .4rem .85rem; font-size: .9375rem; }
}

/* city pages: "Read More" whole; below 992px the bar only the chips (the phone bar has the quote
   buttons) */
.mvs--location .mvs-sec--range .mvs-text a:last-child { white-space: nowrap; }
@media (max-width: 991.98px) { .mvs-citynav__cta { display: none; } }

/* the title bands below 1200px: darker behind the full-width title */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .mvs-pagehead, .mvs--product main > .mvs-sec:first-child, .mvs--post main > .mvs-sec:first-child, .mvs--location main > .mvs-sec:first-child {
    background-image: var(--ph-grid), linear-gradient(180deg, rgb(8 15 33 / 72%) 0%, rgb(8 15 33 / 0%) 45%),
      linear-gradient(90deg, rgb(11 21 51 / 95%) 0%, rgb(11 21 51 / 88%) 45%, rgb(11 21 51 / 62%) 75%, rgb(11 21 51 / 40%) 100%),
      var(--glow), url("../img/pagehead-bg.webp"); }
}

/* articles: the author box stacked below 1200px; its buttons and the AI buttons even on phones */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .mvs-author { grid-template-columns: 1fr; }
  .mvs-author__plate { flex-direction: row; justify-content: flex-start; padding: 1.1rem 1.5rem; }
  .mvs-author__plate::after { top: auto; left: 0; width: auto; height: 3px; }
  .mvs-author__initials { width: 64px; height: 64px; font-size: 1.35rem; box-shadow: 0 0 0 2px rgb(255 255 255 / 14%), 0 0 0 5px rgb(227 30 36 / 85%); }
}
@media (min-width: 576px) and (max-width: 1199.98px) { .mvs-author__btns { flex-wrap: nowrap; } .mvs-author__btns .mvs-btn { flex: 1 1 0; justify-content: space-between; } }
@media (max-width: 575.98px) {
  .mvs-author__btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .mvs-author__btns .mvs-btn { justify-content: space-between; }
  .mvs-ai__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mvs-ai__btns .mvs-btn { justify-content: space-between; margin: 0; }
}

/* footer: on phones the copyright clears the back-to-top button */
@media (max-width: 575.98px) { .mvs-footer__base { padding-bottom: 7.75rem; } }

/* ---------------------------------------------------------------- touch screens and small text
   On a finger-driven screen every link and button outside running text is at least about 40px
   tall (the footer's lists, breadcrumbs, chips, pagination, card links, small buttons); and no
   text is smaller than 11px. Measured page by page at 320-1920px (scratchpad resp/audit.cjs). */
.mvs-bcard__date, .mvs-bcard__cat, .mvs-report__meta dt { font-size: max(.6875rem, 11px); }
@media (pointer: coarse) {
  .btn-sm { min-height: 40px; }
  .mvs-chiprow__btn, .mvs-citynav .mvs-chiprow__btn { width: 40px; height: 40px; }
  .mvs-ranges--types .mvs-ranges__item, .mvs-citynav .mvs-ranges__item { min-height: 40px; }
  .mvs-pager__page { width: 40px; height: 40px; }
  .mvs-more-btn { min-height: 40px; }
  .mvs-crumbs a { display: inline-block; padding-block: .55rem; }
  .mvs-bcard__cat a { display: inline-block; padding-block: .5rem; margin-block: -.5rem; }
  .mvs-bcard__body .mvs-link, .mvs-rcard__foot .mvs-link { min-height: 40px; }
  .mvs-rcard__quote { display: inline-flex; align-items: center; min-height: 38px; }
  .mvs-post__cat { display: inline-flex; align-items: center; min-height: 36px; }
  .mvs-outline li a { padding-block: .6rem; }
  .mvs--product .mvs-product__meta a { display: inline-flex; align-items: center; min-height: 40px; }
  .mvs-contact__way .mvs-iconbox__desc a { display: inline-block; padding-block: .45rem; }
  .mvs-contact__act--wa { min-height: 40px; }
  .mvs-footer .mvs-menu a:not(.btn) { padding-block: .55rem; }
  .mvs-footer__contact li > a { padding-block: .45rem; }   /* (still flex: the sign keeps its gap) */
  .mvs-footer__contact ul { gap: .2rem; }
  .mvs-footer__cities a:not(.btn) { padding-block: .55rem; }
  .mvs-footer__region { min-height: 40px; }
  .mvs-footer__social .mvs-iconbox__link { width: 44px; height: 44px; }
  .mvs-footer__maps { min-height: 40px; }
}

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