/* home.css — H5a (Hero + About + Clients). Owned by H5a; do not add rules for other
   sections here (H5b/H5c/H5d own their own files). */

/* ---------- Clients: R5/D18 side text matches About's side paragraph -------------
   The template styled Clients' side text with a smaller preset (`framer-styles-preset-1mi1ap`,
   18px) in a narrower 278px column than About's side paragraph (`framer-styles-preset-12lbhhy`,
   38px desktop/tablet, 22px phone, 920px column). clients.njk already swaps the text preset
   class so font-size/line-height match; this widens the column to match too, instead of the
   template's narrower one. */
[data-section="clients"] .framer-rf3xnr {
  max-width: 920px;
}
@media (max-width: 809.98px) {
  [data-section="clients"] .framer-rf3xnr {
    max-width: unset;
    width: 100%;
  }
}

/* ---------- Clients + Partners: logo grid — grayscale by default, colour on hover (D26) -----
   The template drove this via a Framer-JS `.hover` class on the <a>; clients.njk uses a plain
   <div> (no <a>, no JS layer), so the grayscale/colour states are real CSS here instead. */
[data-section="clients"] .framer-eus7an,
[data-section="partners"] .framer-eus7an {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  transition: filter 200ms ease;
}
[data-section="clients"] .framer-yrmZF:hover .framer-eus7an,
[data-section="partners"] .framer-yrmZF:hover .framer-eus7an {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-section="clients"] .framer-eus7an,
  [data-section="partners"] .framer-eus7an {
    transition: none;
  }
}
/* Operantra's wordmark is a single light amber (#E8A855); grayscaled it reads ~2:1 on the card.
   Darken it at rest (the wrapper's grayscale still applies on top) and restore it on hover, where the
   wrapper shows the logo in colour. Touch devices keep the resting state (no stuck :hover). */
[data-section="partners"] img[src$="/operantra-wordmark-1c-amber.svg"] {
  filter: brightness(0.45);
  transition: filter 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-section="partners"] .framer-yrmZF:hover img[src$="/operantra-wordmark-1c-amber.svg"] {
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-section="partners"] img[src$="/operantra-wordmark-1c-amber.svg"] { transition: none; }
}