/* =====================================================================
   Labioservice — site.css
   One stylesheet, tokens in :root. Flat: no shadows, no gradients, no
   rounded corners. The character is the measuring instrument:
     - the graduated scale (.scale): tick strips that close bands and head sections;
     - mono «readouts» (IBM Plex Mono): indexes, brands, counts, labels;
     - viewfinder corners on card images (.card__img); brand logos on a flat white plate;
     - the dial in the home hero, needle on the years of experience.
   Colours only from the tokens. Green text on white is --green-700 (6.5:1);
   the brand green (--green-500) is a fill with ink text, never text on white.
   ===================================================================== */

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-wght.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --ink: #15200F;
  --ink-2: #3F4B38;
  --muted: #5B6653;
  --paper: #FFFFFF;
  --mint: #F1F6EA;
  --mint-2: #E3EED6;
  --line: #D3DDC8;
  --green-950: #0F2209;
  --green-900: #173A0E;
  --green-800: #1F4A13;
  --green-700: #2F6A19;
  --green-500: #5FAE2C;
  --lime: #9BDD4E;
  --lime-2: #C8F08F;
  --warn: #B04A12;

  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --sticky-h: 112px;
  --tick: 8px;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--sticky-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans); font-optical-sizing: auto;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.scroll-locked { position: fixed; left: 0; right: 0; overflow: hidden; padding-right: var(--sbw, 0); }
body.scroll-locked .site-header { position: fixed; top: 0; left: 0; right: var(--sbw, 0); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.15; font-weight: 650; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); }
h4 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
strong { font-weight: 650; }
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: .6rem 1rem; background: var(--lime); color: var(--ink); font-weight: 600; }
.skip-link:focus { top: 12px; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* mono labels */
.kicker, .readout {
  font: 500 .76rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green-700);
  margin: 0 0 .9rem;
}
.kicker::before { content: ""; display: inline-block; width: 18px; height: 2px; background: currentColor; vertical-align: middle; margin-right: .6em; transform: translateY(-1px); }
.kicker--light { color: var(--lime); }
.readout { margin: 0; color: inherit; opacity: .75; }

/* ---------------------------------------------------------------- the graduated scale */
/* Minor tick every --tick, a longer one every 5, the longest every 10: three gradients. */
.scale {
  --c: var(--green-700);
  position: relative; height: 16px; margin: 1.1rem 0 1.6rem;
  border-bottom: 2px solid var(--c);
  background:
    repeating-linear-gradient(90deg, var(--c) 0 2px, transparent 2px calc(var(--tick) * 10)) left bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--c) 0 1px, transparent 1px calc(var(--tick) * 5)) left bottom / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--c) 0 1px, transparent 1px var(--tick)) left bottom / 100% 6px no-repeat;
  opacity: .9;
}
.scale--light { --c: rgba(201, 240, 143, .55); }
.scale__reading {
  position: absolute; right: 0; bottom: 6px; padding: 0 0 0 .7rem; background: var(--paper);
  font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green-700);
}
.section--mint .scale__reading { background: var(--mint); }
.scale--light .scale__reading { background: var(--green-900); color: var(--lime); }

/* ---------------------------------------------------------------- buttons */
.btn {
  --bg: var(--green-700); --fg: #fff; --bd: var(--green-700);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .7rem 1.25rem; border: 2px solid var(--bd); border-radius: 0;
  background: var(--bg); color: var(--fg); font: 600 .98rem/1.1 var(--sans); text-decoration: none;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { --bg: var(--green-900); --bd: var(--green-900); color: #fff; }
.btn--primary { --bg: var(--green-700); }
.btn--lime { --bg: var(--lime); --fg: var(--ink); --bd: var(--lime); }
.btn--lime:hover { --bg: var(--lime-2); --bd: var(--lime-2); color: var(--ink); }
.btn--line { --bg: transparent; --fg: var(--green-700); --bd: var(--green-700); }
.btn--line:hover { --bg: var(--green-700); --bd: var(--green-700); color: #fff; }
.btn--ghost-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.55); }
.btn--ghost-light:hover { --bg: #fff; --bd: #fff; color: var(--ink); }
.btn--lg { min-height: 54px; padding: .85rem 1.5rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.linklike { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header.is-scrolled { border-bottom-color: var(--green-700); }
.topbar { background: var(--green-950); color: #DCEFC6; font: 500 .78rem/1.2 var(--mono); letter-spacing: .03em; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 36px; }
.topbar p { margin: 0; }
.topbar .readout { color: var(--lime); opacity: 1; margin-right: .4rem; }
.topbar__links { display: flex; gap: 1.4rem; }
.topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.topbar a:hover { color: var(--lime); }
.topbar svg { width: 14px; height: 14px; }
@media (max-width: 759.98px) { .topbar__where { display: none; } .topbar__inner { justify-content: center; } }
@media (max-width: 419.98px) { .topbar__links a:first-child span { display: none; } }

.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.brand { flex: none; display: block; }
.brand__img { width: clamp(180px, 22vw, 250px); height: auto; }
.brand__text { font-weight: 700; font-size: 1.4rem; color: var(--green-700); }

.nav-toggle {
  display: none; margin-left: auto; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .9rem;
  border: 2px solid var(--green-700); background: var(--paper); color: var(--green-700);
  font: 500 .8rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.nav { margin-left: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 76px; padding: 0 .85rem;
  color: var(--ink); font-weight: 560; font-size: .98rem; text-decoration: none; position: relative;
}
.nav__link svg { width: 11px; height: 7px; transition: transform .15s; }
.nav__link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 22px; height: 2px; background: transparent; }
.nav__item.is-active > .nav__link::after, .nav__link:hover::after { background: var(--green-500); }
.nav__link:hover { color: var(--green-700); }
.nav__sub-toggle { display: none; }
.nav__cta { display: none; }
.header-cta { flex: none; }

/* desktop dropdowns (hover and keyboard focus) */
@media (min-width: 1100px) {
  .nav__sub {
    position: absolute; top: 100%; left: 0; z-index: 60; min-width: 280px; margin: 0; padding: .5rem 0; list-style: none;
    background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--green-500);
    visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility 0s .15s;
  }
  .nav__item--has-sub:hover > .nav__sub, .nav__item--has-sub:focus-within > .nav__sub { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__item--has-sub:hover > .nav__link svg { transform: rotate(180deg); }
  .nav__sub a { display: flex; gap: .7rem; align-items: baseline; padding: .55rem 1.1rem; color: var(--ink); text-decoration: none; font-size: .95rem; }
  .nav__sub a:hover, .nav__sub a[aria-current] { background: var(--mint); color: var(--green-700); }
  .nav__sub-overview a { font-weight: 650; color: var(--green-700); border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
  /* the catalogue: a two-column parts list */
  .nav__item--mega { position: static; }
  .nav__item--mega > .nav__sub {
    left: 50%; transform: translate(-50%, 6px); width: min(var(--wrap) - 2 * var(--gut), 940px);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .8rem;
  }
  .nav__item--mega:hover > .nav__sub, .nav__item--mega:focus-within > .nav__sub { transform: translate(-50%, 0); }
  .nav__item--mega .nav__sub-overview { grid-column: 1 / -1; }
  .nav__idx { font: 500 .72rem/1.6 var(--mono); color: var(--green-500); flex: none; }
  .nav__sub-label small { display: block; font: 500 .68rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: .15rem; }
}
@media (min-width: 1100px) and (max-width: 1259.98px) {
  .nav__link { padding: 0 .6rem; font-size: .94rem; }
  .header-cta { display: none; }
}

/* mobile drawer */
@media (max-width: 1099.98px) {
  .site-header__inner { min-height: 66px; gap: 1rem; }
  .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--sticky-h) 0 0 0; z-index: 49; margin: 0; overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); border-top: 2px solid var(--green-700); padding: .5rem var(--gut) 2rem;
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; }
  .nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav__link { flex: 1; min-height: 56px; padding: 0; font-size: 1.08rem; }
  .nav__link svg, .nav__link::after { display: none; }
  .nav__sub-toggle {
    display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-left: 1px solid var(--line);
    background: none; color: var(--green-700); cursor: pointer;
  }
  .nav__sub-toggle svg { width: 13px; transition: transform .2s; }
  .nav__item.is-expanded .nav__sub-toggle svg { transform: rotate(180deg); }
  .nav__sub { display: none; width: 100%; list-style: none; margin: 0 0 .6rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--green-500); }
  .nav__item.is-expanded .nav__sub { display: block; }
  .nav__sub a { display: flex; gap: .6rem; align-items: baseline; width: 100%; padding: .65rem 0; color: var(--ink); text-decoration: none; }
  .nav__sub a[aria-current] { color: var(--green-700); font-weight: 650; }
  .nav__sub-overview a { font-weight: 650; color: var(--green-700); }
  .nav__idx { font: 500 .72rem/1 var(--mono); color: var(--green-500); }
  .nav__sub-label small { display: none; }
  .nav__cta { display: grid; gap: .7rem; margin-top: 1.4rem; }
}

/* ---------------------------------------------------------------- band (page header) */
.band { background: var(--green-900); color: #fff; padding: clamp(1.4rem, 3vw, 2.1rem) 0; }
.band__inner { display: grid; gap: 1.2rem 3rem; align-items: center; }
@media (min-width: 900px) { .band--brand .band__inner { grid-template-columns: minmax(0, 1fr) 300px; } }
.band h1 { color: #fff; font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.55rem); margin-bottom: .25em; max-width: 30ch; }
.band .kicker { margin-bottom: .6rem; }
.band__sub { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); color: var(--lime-2); margin: 0; max-width: 56ch; }
.band__tag { color: #D7E8C6; max-width: 66ch; margin: .5rem 0 0; font-size: .98rem; }
.band__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; }
.band__actions .btn { min-height: 42px; padding: .55rem 1rem; font-size: .93rem; }
/* the brand: its logo on a flat white plate */
.brand-plate { margin: 0; background: #fff; display: grid; place-items: center; padding: 1.1rem 1.4rem; min-height: 110px; }
.brand-plate img { max-height: 90px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 899.98px) { .brand-plate { justify-self: start; min-height: 0; padding: .8rem 1rem; } .brand-plate img { max-height: 56px; } }
.crumbs { font: 500 .74rem/1.5 var(--mono); letter-spacing: .04em; margin: 0 0 .9rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .5rem; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.crumbs a { color: var(--green-700); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs--light { color: #C9DDB6; }
.crumbs--light a { color: var(--lime); }
.crumbs [aria-current] { opacity: .85; }

/* card images: white field, viewfinder corners */
.card__img { position: relative; background: #fff; }
.card__img::before, .card__img::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--green-500); pointer-events: none; z-index: 1;
}
.card__img::before { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; }
.card__img::after { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------------------------------------------------------------- page body */
.page-body { padding: clamp(2rem, 5vw, 3.6rem) 0; }
.page-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .page-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 4rem; align-items: start; } }

.prose { max-width: 74ch; min-width: 0; }
.prose--wide { max-width: 90ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2.2rem; padding-top: .9rem; border-top: 2px solid var(--mint-2); }
.prose h3 { margin-top: 1.8rem; color: var(--green-800); }
.prose h4, .prose h5, .prose h6 { margin-top: 1.4rem; font-size: 1.05rem; }
.prose .hx-3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); border-top: 0; padding-top: 0; }
.prose .hx-4, .prose .hx-5, .prose .hx-6 { font-size: 1.05rem; border-top: 0; padding-top: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.prose li { margin: .3em 0; }
.prose ul > li::marker { color: var(--green-500); content: "▪  "; font-size: .9em; }
.prose img { height: auto; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.prose th { background: var(--mint); font-weight: 650; }
.prose blockquote { margin: 1.4rem 0; padding: .8rem 1.2rem; border-left: 4px solid var(--green-500); background: var(--mint); }
.prose details { border: 1px solid var(--line); margin: .8rem 0; }
.prose summary { cursor: pointer; padding: .8rem 1rem; font-weight: 650; background: var(--mint); }
.prose details > :not(summary) { padding: 0 1rem; }
.figure { margin: 1.6rem 0; display: block; max-width: 100%; }
.figure img { max-width: 100%; max-height: 560px; object-fit: contain; }
.figure a { display: block; }
.prose .cta { margin: 1.4rem 0; }
.prose a[data-doc]:not(.btn):not(:has(img))::before { content: "PDF"; font: 500 .66rem/1 var(--mono); letter-spacing: .06em; border: 1px solid currentColor; padding: .15rem .3rem; margin-right: .4rem; vertical-align: .15em; }
.prose .btn[data-doc]::after { content: "PDF"; font: 500 .66rem/1 var(--mono); border: 1px solid currentColor; padding: .15rem .3rem; }
.prose--light, .prose--light h2, .prose--light h3 { color: #fff; }
.prose--light h2 { border-top-color: rgba(255,255,255,.18); }
.prose--light a:not(.btn) { color: var(--lime); }
.prose--legal { max-width: 80ch; font-size: 1rem; }
.prose--legal h2 { font-size: 1.35rem; }

/* sidebar */
.aside { display: grid; gap: 1.2rem; align-content: start; }
/* Sticky only when short enough to fit a window (playbook: a sidebar taller than the window must not stick). */
@media (min-width: 1000px) and (min-height: 760px) { .aside--sticky { position: sticky; top: calc(var(--sticky-h) + 1.2rem); } }
.aside__box { padding: 1.4rem; border: 1px solid var(--line); background: var(--paper); }
.aside__box--deep { background: var(--green-900); border-color: var(--green-900); color: #DDEDCB; display: grid; gap: .7rem; }
.aside__box--deep p { margin: 0; font-size: .96rem; }
.aside__box--deep .kicker { margin: 0; }
.aside__title { margin: 0 0 .3rem; font-size: 1.25rem; color: #fff; }
.aside__title--small { color: var(--ink); font: 500 .76rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .8rem; }
.aside__list { list-style: none; margin: 0; padding: 0; counter-reset: a; }
.aside__list li { counter-increment: a; border-top: 1px solid var(--line); }
.aside__list a { display: flex; gap: .7rem; padding: .6rem 0; color: var(--ink); text-decoration: none; font-size: .95rem; line-height: 1.35; }
.aside__list a::before { content: counter(a, decimal-leading-zero); font: 500 .7rem/1.9 var(--mono); color: var(--green-500); flex: none; }
.aside__list a:hover { color: var(--green-700); }
.aside__list a[aria-current] { color: var(--green-700); font-weight: 650; }
.aside__list a[aria-current]::before { color: var(--green-700); content: "▶"; }

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(2.8rem, 7vw, 5.5rem) 0; }
.section--mint { background: var(--mint); }
.section--deep { background: var(--green-900); color: #DDEDCB; }
.section__head { margin-bottom: 1.6rem; max-width: 760px; }
.section__head h2 { margin-bottom: .2rem; }
.section__head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; max-width: none; margin-bottom: 0; }
.split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }

/* ---------------------------------------------------------------- cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.card { min-width: 0; }
.card__link {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: border-color .15s;
}
.card__link:hover { border-color: var(--green-700); color: var(--ink); }
.card__img { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); display: grid; place-items: center; }
.card__img img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; transition: transform .3s; }
.card__link:hover .card__img img { transform: scale(1.04); }
.card__img--empty { background: var(--mint-2); }
.card__mono { font: 500 2.6rem/1 var(--mono); color: var(--green-700); letter-spacing: .04em; }
.card__body { padding: 1rem 1.1rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card__meta { display: flex; gap: .7rem; align-items: baseline; margin: 0 0 .5rem; font: 500 .72rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.card__idx { color: var(--green-500); }
.card__kicker { color: var(--muted); }
.card__title { font-size: 1.12rem; margin: 0 0 .5rem; line-height: 1.25; }
.card__text { font-size: .94rem; color: var(--ink-2); margin: 0 0 .8rem; }
.card__more { margin: auto 0 0; display: flex; align-items: center; gap: .4rem; justify-content: flex-end; font-weight: 600; font-size: .92rem; color: var(--green-700); }
.card__more span { margin-right: auto; font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.card__more svg { width: 16px; transition: transform .15s; }
.card__link:hover .card__more svg { transform: translateX(4px); }
/* the card's own scale: ticks along the bottom, the reading slides across on hover */
.card__scale {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 6px);
}
.card__scale::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 22%; height: 3px; background: var(--green-500);
  transition: width .35s cubic-bezier(.3, .7, .2, 1);
}
.card__link:hover .card__scale::after, .card__link:focus-visible .card__scale::after { width: 100%; }

/* ---------------------------------------------------------------- home hero */
.hero { background: var(--green-900); color: #fff; padding: clamp(2.4rem, 6vw, 4.8rem) 0 0; overflow: hidden; }
.hero__inner { display: grid; gap: 2rem 3rem; align-items: center; }
@media (min-width: 940px) { .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); } }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem); max-width: 17ch; margin-bottom: .4em; }
.hero__sub { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); color: var(--lime-2); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 0; }
.error-page .hero__actions { justify-content: center; }

.hero__gauge { position: relative; max-width: 460px; width: 100%; justify-self: center; }
.dial { width: 100%; overflow: visible; }
.dial__arc { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 2; }
.dial__base { stroke: rgba(255,255,255,.35); stroke-width: 2; }
.dial__tick { stroke: rgba(255,255,255,.28); stroke-width: 2; }
.dial__tick.is-major { stroke-width: 3; }
.dial__tick.is-on { stroke: var(--lime); }
.dial__num { fill: #C9DDB6; font: 500 13px var(--mono); }
.dial__needle { transform-origin: 160px 160px; transform: rotate(var(--deg)); animation: needle 1.6s cubic-bezier(.25, 1.4, .4, 1) .2s backwards; }
.dial__needle line { stroke: #fff; stroke-width: 4; stroke-linecap: square; }
.dial__needle circle { fill: var(--lime); stroke: var(--green-900); stroke-width: 4; }
@keyframes needle { from { transform: rotate(0deg); } }
.hero__readout { margin: .6rem 0 0; text-align: center; display: grid; justify-items: center; gap: .3rem; }
.hero__value { font: 500 clamp(2.4rem, 1.6rem + 3vw, 3.6rem)/1 var(--mono); color: #fff; letter-spacing: -.02em; }
.hero__unit { font: 500 .78rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }

.readouts { list-style: none; margin: clamp(2rem, 5vw, 3.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.18); }
@media (min-width: 820px) { .readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.readouts li { padding: 1.1rem 1rem 1.3rem 0; display: grid; gap: .2rem; border-right: 1px solid rgba(255,255,255,.12); padding-left: 1rem; position: relative; }
.readouts li::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 3px; background: var(--lime); }
.readouts__v { font: 500 1.5rem/1.1 var(--mono); color: #fff; }
.readouts__k { font-size: .88rem; color: #C9DDB6; }

/* home intro + promo */
.intro { display: grid; gap: 1rem 4rem; }
@media (min-width: 960px) { .intro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.intro__head h2 { max-width: 20ch; }
.notice { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.6rem; padding: 1.1rem 1.2rem; border: 2px solid var(--green-500); background: var(--mint); }
.notice p { margin: 0 0 .4rem; }
.notice__tag { flex: none; font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--green-500); color: var(--ink); padding: .4rem .5rem; }
.notice__link { font-weight: 650; display: inline-flex; gap: .4rem; align-items: center; }
.notice__link svg { width: 16px; }

/* numbered services */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.step a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-left: 4px solid var(--green-500);
  color: var(--ink); text-decoration: none; background: var(--paper); transition: border-color .15s, background-color .15s;
}
.step a:hover { border-color: var(--green-700); background: var(--mint); color: var(--ink); }
.step__n { font: 500 1.6rem/1 var(--mono); color: var(--green-700); }
.step__body { display: grid; gap: .25rem; }
.step__body strong { font-size: 1.08rem; line-height: 1.3; }
.step__body span { font-size: .93rem; color: var(--ink-2); }
.step svg { width: 20px; color: var(--green-700); }

/* LAT badge */
.split--badge { align-items: center; }
@media (min-width: 960px) { .split--badge { grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); } }
.badge { aspect-ratio: 1; max-width: 300px; width: 100%; justify-self: center; display: grid; place-content: center; text-align: center; gap: .6rem; border: 2px solid var(--lime); position: relative; outline: 1px solid rgba(155,221,78,.35); outline-offset: 10px; }
.badge__code { font: 500 clamp(3.4rem, 2.4rem + 4vw, 5rem)/1 var(--mono); color: var(--lime); letter-spacing: .04em; }
.badge__line { font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #DDEDCB; max-width: 18ch; margin-inline: auto; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.6rem 0 0; }
.chips a { padding: .5rem .9rem; border: 1px solid var(--green-700); font: 500 .8rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.chips a:hover { background: var(--green-700); color: #fff; }

/* ---------------------------------------------------------------- posts */
.posts { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.post-card { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; background: var(--paper); border: 1px solid var(--line); }
.post-card:hover { border-color: var(--green-700); color: var(--ink); }
.post-card__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mint-2); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; }
.post-card__meta { margin: 1rem 1.1rem .4rem; font: 500 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.post-card__title { margin: 0 1.1rem .5rem; font-size: 1.1rem; line-height: 1.3; }
.post-card__text { margin: 0 1.1rem 1.2rem; font-size: .93rem; color: var(--ink-2); }
.pager { display: flex; gap: .4rem; margin-top: 2rem; font-family: var(--mono); }
.pager a, .pager span { min-width: 42px; min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line); text-decoration: none; }
.pager span { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.post-cover { margin: 0 0 1.8rem; }
.post-cover img { width: 100%; max-height: 460px; object-fit: contain; background: #fff; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 2px solid var(--mint-2); }
.post-nav a { display: grid; gap: .2rem; text-decoration: none; font-weight: 600; line-height: 1.3; }
.post-nav small { font: 500 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.post-nav__next { text-align: right; }

/* ---------------------------------------------------------------- catalogue register */
.register { list-style: none; margin: 0; padding: 0; columns: 1; }
@media (min-width: 900px) { .register { columns: 2; column-gap: 3.5rem; } }
.register__line { break-inside: avoid; margin: 0 0 1.8rem; }
.register__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; padding: .5rem 0; border-bottom: 2px solid var(--green-700); color: var(--ink); text-decoration: none; }
.register__head:hover .register__name { color: var(--green-700); }
.register__name { font-weight: 650; font-size: 1.12rem; }
.register__kicker { margin-left: auto; font: 500 .7rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.register__idx { font: 500 .74rem/1.6 var(--mono); color: var(--green-500); flex: none; min-width: 2.6em; }
.register__items { list-style: none; margin: 0; padding: 0; }
.register__items li { border-bottom: 1px dashed var(--line); }
.register__items a { display: flex; gap: .8rem; padding: .45rem 0; color: var(--ink-2); text-decoration: none; font-size: .95rem; line-height: 1.4; }
.register__items a:hover { color: var(--green-700); }
.register__items--sub { padding-left: 1.6rem; }
.register__items--sub li { border-bottom: 0; }
.register__items--sub a { font-size: .9rem; padding: .25rem 0; }

/* ---------------------------------------------------------------- contact page */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; } }
.directory { margin: 0 0 2rem; }
.directory__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1.2rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.directory dt { font-size: .95rem; color: var(--ink-2); }
.directory dd { margin: 0; font: 500 1.05rem/1.3 var(--mono); text-align: right; }
.directory dd a { text-decoration: none; }
@media (max-width: 479.98px) { .directory__row { grid-template-columns: 1fr; } .directory dd { text-align: left; } }
.address-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 2rem; }
.address-card { padding: 1.2rem; background: var(--mint); border-left: 4px solid var(--green-500); }
.address-card p:last-child { margin-bottom: 0; }
.address-card a { display: inline-flex; gap: .35rem; align-items: center; font-weight: 600; }
.address-card svg { width: 15px; }
.form-panel { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line); border-top: 4px solid var(--green-700); }
.form-panel__intro { color: var(--ink-2); }

/* ---------------------------------------------------------------- contact band + form */
.contact-band { background: var(--green-900); color: #DDEDCB; padding: clamp(2.8rem, 7vw, 5rem) 0; }
.contact-band__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .contact-band__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4.5rem; } }
.contact-band h2 { color: #fff; }
.contact-band__quick { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.contact-band__quick li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.contact-band__quick .readout { color: var(--lime); opacity: 1; }
.contact-band__quick a { color: #fff; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-band__quick a:hover { color: var(--lime); }
.contact-band__more { margin-top: 1.2rem; }
.contact-band__more a { color: var(--lime); display: inline-flex; gap: .4rem; align-items: center; }
.contact-band__more svg { width: 16px; }
.contact-band__form { background: var(--paper); color: var(--ink); padding: clamp(1.3rem, 3vw, 2.2rem); }

.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { display: grid; gap: .35rem; align-content: start; }
.field__label { font: 500 .74rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.req { color: var(--warn); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem; border: 1px solid #B7C4AA; border-bottom: 2px solid var(--green-700);
  background: #FBFCF9; color: var(--ink); font: 400 1rem/1.4 var(--sans); border-radius: 0;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green-700); background: #fff; box-shadow: inset 0 -2px 0 var(--green-500); }
.field--check { grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; font-size: .92rem; }
.field--check input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--green-700); }
.field--captcha__row { display: flex; gap: .8rem; align-items: center; }
.field--captcha__row input { max-width: 6.5rem; }
.field--captcha__row small { color: var(--muted); font-size: .84rem; }
.alert { padding: 1rem 1.2rem; margin-bottom: 1rem; border-left: 4px solid; }
.alert--ok { background: var(--mint); border-color: var(--green-700); color: var(--ink); }
.alert--err { background: #FCEFE6; border-color: var(--warn); color: #4A1C04; }
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--green-950); color: #C9DDB6; padding: 2rem 0 1.5rem; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--lime); text-decoration: underline; }
.footer__grid { display: grid; gap: 2.2rem; padding: 1.4rem 0 2.2rem; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, .8fr); gap: 3rem; } }
.footer__logo { width: 220px; margin-bottom: 1rem; }
.footer__claim { font: 500 .76rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.footer__contacts { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .7rem; }
.footer__contacts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .7rem; align-items: start; }
.footer__contacts svg { width: 16px; margin-top: .25rem; color: var(--lime); }
.footer__title { font: 500 .76rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); margin: 0 0 1rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
@media (min-width: 560px) { .footer__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; } }
.footer__legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.2rem; font-size: .84rem; color: #A9C292; }
.footer__legal p { margin: 0 0 .4rem; }
.footer__legal strong { color: #fff; font-weight: 600; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; margin-top: 1rem; }
.footer__bottom .linklike { color: #A9C292; text-decoration: none; }
.footer__bottom .linklike:hover { color: var(--lime); }

/* ---------------------------------------------------------------- cookie bar */
.cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--paper); border-top: 3px solid var(--green-700); padding: 1rem 0; }
.cookiebar__inner { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 900px) { .cookiebar__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; } }
.cookiebar__title { font: 500 .76rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); margin: 0 0 .4rem; }
.cookiebar__text p { margin: 0; font-size: .92rem; }
.cookiebar__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cookiebar__btn { min-width: 9.5rem; }
body.cookiebar-open .wa-float { bottom: calc(var(--cookiebar-h, 0px) + 16px); }

/* ---------------------------------------------------------------- dialogs (privacy sheet) */
.sheet { border: 0; padding: 0; width: min(760px, 100vw - 24px); max-height: 88svh; background: #fff; color: var(--ink); animation: sheet-in .2s ease-out backwards; }
.sheet::backdrop { background: rgba(15, 34, 9, .65); }
.sheet__box { display: flex; flex-direction: column; max-height: 88svh; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 3px solid var(--green-700); }
.sheet__title { margin: 0; font-size: 1.2rem; }
.sheet__close { width: 40px; height: 40px; border: 0; background: var(--mint); cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.sheet__close svg { width: 16px; }
.sheet__body { overflow-y: auto; padding: 1.2rem 1.3rem; }
.sheet__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.3rem; border-top: 1px solid var(--line); font-size: .9rem; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 699.98px) { .sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; } }

/* ---------------------------------------------------------------- whatsapp, errors */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 70; width: 54px; height: 54px; display: grid; place-items: center;
  background: #1F8F4E; color: #fff; border: 2px solid #fff; transition: bottom .2s;
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { background: var(--green-900); color: #fff; }
.error-page { text-align: center; }
.error-page .container { max-width: 720px; }
.error-page__code { font: 500 clamp(5rem, 3rem + 10vw, 9rem)/1 var(--mono); color: var(--green-700); margin: 0; }

@media print {
  .site-header, .site-footer, .contact-band, .aside, .wa-float, .cookiebar { display: none !important; }
  .band, .hero, .section--deep { background: none; color: var(--ink); }
}

/* ---------------------------------------------------------------- catalogue pages (no sidebar) */
.page-body--catalog { padding: clamp(1.8rem, 4vw, 3rem) 0; }
.prose--catalog { max-width: 980px; }
.prose--catalog > p, .prose--catalog > ul, .prose--catalog > ol, .prose--catalog > h2, .prose--catalog > h3, .prose--catalog > h4 { max-width: 74ch; }


/* a heading + text + picture section → picture beside the text */
.spec { display: grid; gap: 1rem 2.4rem; align-items: start; margin: 2rem 0; padding-top: 1.6rem; border-top: 2px solid var(--mint-2); }
.prose--catalog > .spec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 760px) { .spec { grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); } }
.spec__media .figure { margin: 0 0 1rem; }
.spec__media img { max-height: 300px; }
.spec__text > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.spec__text > :last-child { margin-bottom: 0; }

/* horizontal cards (line pages, related pages): image beside the text */
.cards--row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.cards--row .card__link { flex-direction: row; }
.cards--row .card__img { flex: 0 0 38%; aspect-ratio: auto; min-height: 170px; border-bottom: 0; border-right: 1px solid var(--line); }
.cards--row .card__img img { position: absolute; inset: 0; }
.cards--row .card__body { padding: 1rem 1.1rem 1.3rem; }
@media (max-width: 479.98px) {
  .cards--row .card__img { flex-basis: 34%; min-height: 120px; }
  .cards--row .card__img img { padding: .5rem; }
  .cards--row .card__text { display: none; }
}

.section--tight { padding: 1.6rem 0 2rem; }
.others__title { font: 500 .78rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; }
.others__title a { color: var(--green-700); }
.others { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.others a { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .93rem; line-height: 1.3; }
.others a:hover { border-color: var(--green-700); color: var(--green-700); }
.others svg { width: 14px; color: var(--green-500); }
/* band on phones: logo first and small, the two buttons on one row */
@media (max-width: 899.98px) {
  .band--brand .brand-plate { order: -1; padding: .5rem .8rem; }
  .band--brand .brand-plate img { max-height: 40px; }
}
@media (max-width: 479.98px) {
  .hide-sm { display: none; }
  .band__actions { flex-wrap: nowrap; }
  .band__actions .btn { padding: .5rem .75rem; font-size: .88rem; white-space: nowrap; }
}
.prose h2 + .spec { border-top: 0; padding-top: 0; margin-top: 1rem; }
@media (max-width: 759.98px) { .spec__media img { max-height: 200px; margin-inline: auto; } }

/* product pages: the product picture floats right, the text runs beside it as long as it lasts */
.prose--catalog.has-float { max-width: 1180px; }
.product-float { float: right; width: min(42%, 460px); margin: .3rem 0 1.6rem 2.6rem; background: #fff; }
.product-float img { width: 100%; max-height: 520px; object-fit: contain; }
/* blocks beside the float shrink to the free width (their rules and markers stay clear of the picture) */
.has-float > h2, .has-float > h3, .has-float > h4, .has-float > ul, .has-float > ol,
.has-float > details, .has-float > table, .has-float > blockquote, .has-float > .cta { display: flow-root; }
.has-float > .spec, .has-float > .figure { clear: both; }
@media (max-width: 759.98px) {
  .product-float { float: none; width: 100%; margin: 0 0 1.4rem; }
  .product-float img { max-height: 280px; }
}

/* the one picture of a text page, on top of the sidebar; the contact photo on top of its column */
.aside__media .figure { margin: 0; }
.aside__media img { width: 100%; max-height: 300px; object-fit: cover; }
.figure--contact { margin: 0 0 1.8rem; }
.figure--contact img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.figure--top { display: none; margin: 0 0 1.6rem; }
.figure--top img { width: 100%; max-height: 260px; object-fit: cover; }
@media (max-width: 999.98px) { .aside__media { display: none; } .figure--top { display: block; } }

/* ---------------------------------------------------------------- brand logos strip (home) */
.brands { background: var(--paper); border-bottom: 1px solid var(--line); padding: .9rem 0; overflow: hidden; }
.brands__viewport { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.brands__track { display: flex; width: max-content; animation: brands-loop 55s linear infinite; }
.brands:hover .brands__track, .brands:focus-within .brands__track { animation-play-state: paused; }
.brands__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.brands__list li { flex: none; padding: 0 2.2rem; }
.brands__list a { display: grid; place-items: center; height: 54px; }
.brands__logo { height: auto; max-height: 46px; width: auto; max-width: 150px; object-fit: contain; }
@keyframes brands-loop { to { transform: translateX(-50%); } }
@media (max-width: 599.98px) { .brands__list li { padding: 0 1.3rem; } .brands__logo { max-height: 36px; max-width: 120px; } }
@media (prefers-reduced-motion: reduce) {
  .brands__viewport { overflow-x: auto; mask-image: none; }
  .brands__track { animation: none; }
  .brands__list[aria-hidden] { display: none; }
}

/* product-line (brand) pages: the intro uses the whole container (PM, 06/11/2026) */
.prose--catalog.prose--full, .prose--full > p, .prose--full > ul, .prose--full > ol,
.prose--full > h2, .prose--full > h3, .prose--full > h4 { max-width: none; }

/* a quote's last paragraph: no bottom margin inside the box */
.prose blockquote > :last-child { margin-bottom: 0; }
.prose blockquote > :first-child { margin-top: 0; }