/* Page CSS scoped to :where(.wst-s-brands) (build/scope_css_apply.py): content rules apply only inside this
   page's template or its blocks, so blocks from different pages can share a page. :where() keeps specificity unchanged.
   Chrome rules stay global. */
/* Brands — design <helmet> CSS verbatim (html/body background moved to site.css). */
    html,body{margin:0;}
    *{box-sizing:border-box;}
    a{color:#c7361d;text-decoration:none;}
    a:hover{color:#e44125;}
    @keyframes wstDraw{to{stroke-dashoffset:0;}}
    @media (prefers-reduced-motion: reduce){:where(.wst-s-brands) .wst-draw{animation:none !important;stroke-dashoffset:0 !important;}}
    [data-m="burger"]{display:none;}
    [data-m="burger"] summary{list-style:none;}
    [data-m="burger"] summary::-webkit-details-marker{display:none;}
    @media (max-width:820px){
      [data-m="nav"]{display:none !important;}
      [data-m="burger"]{display:block;}
      :where(.wst-s-brands) [data-m="toc"]{display:none !important;}
      :where(.wst-s-brands) [data-m="clients"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 24px !important;}
      :where(.wst-s-brands) [data-m="clients"] img{max-width:100% !important;max-height:56px !important;}
      :where(.wst-s-brands) [data-m="hero-space"]{height:280px !important;}
      :where(.wst-s-brands) [data-m="hero-mark"]{top:auto !important;bottom:0 !important;height:300px !important;width:100% !important;}
      :where(.wst-s-brands) [data-m="hero-p"]{width:auto !important;}
    }
    @media (min-width:821px) and (max-width:1084px){
      :where(.wst-s-brands) [data-m="hero-space"]{height:298px !important;}
      :where(.wst-s-brands) [data-m="hero-mark"]{top:auto !important;bottom:0 !important;height:520px !important;width:100% !important;}
      :where(.wst-s-brands) [data-m="hero-p"]{width:auto !important;}
    }
    @media (max-width:820px){
      :where(.wst-s-brands) [data-m="hero-space"]{height:280px !important;}
      :where(.wst-s-brands) [data-m="hero-mark"]{height:360px !important;}
      :where(.wst-s-brands) [data-p="sec"]{padding-top:56px !important;padding-bottom:56px !important;}
      :where(.wst-s-brands) [data-p="hero"]{padding-top:56px !important;padding-bottom:48px !important;}
      :where(.wst-s-brands) [data-p="band"]{padding-top:32px !important;padding-bottom:32px !important;}
      :where(.wst-s-brands) [data-p="card"]{padding:20px !important;}
      [data-p="footer"]{padding-top:56px !important;padding-bottom:32px !important;}
    }
    @media (max-width:480px){
      :where(.wst-s-brands) [data-m="hero-space"]{height:220px !important;}
      :where(.wst-s-brands) [data-m="hero-mark"]{height:300px !important;}
    }
    @media (max-width:1010px){:where(.wst-s-brands) [data-m="stick"]{position:static !important;}}
    @media (max-width:640px){[data-t="label"]{letter-spacing:.12em !important;}}
    @media (hover:none){:where(.wst-s-brands) [data-m="clients"] img{opacity:1 !important;}}

    /* ---- converted style-hover / dynamic states ---- */
    /* Brand button wrapper: inline --fg-ink (brand colour) → gradient on hover. */
    :where(.wst-s-brands) .wst-brandbtn:hover{--fg-ink:var(--fg-gradient) !important;}
    /* Inline <strong style="font-weight:700;color:#0f1216;"> and copy links in the brand text. */
    :where(.wst-s-brands) .wst-brandcopy strong,:where(.wst-s-brands) .wst-brandcopy b{color:#0f1216;}
    :where(.wst-s-brands) .wst-rt.wst-brandcopy a{color:#ee6a24;text-decoration:underline;text-decoration-color:rgba(238,106,36,.4);text-underline-offset:3px;}
    :where(.wst-s-brands) .wst-rt.wst-brandcopy a:hover{color:#ef4137 !important;text-decoration-color:#ef4137 !important;}

    /* ---- hero mark under the text (≤1084px), per client request 2026-10-22 ----
       Centred under the text (24px gap, as on phones) and cropped: 15% of the mark hangs below the
       section's bottom edge (section overflow:hidden), and the spacer fits the visible 85% (client chose 15% over 25%).
       spacer = 0.85·mark − 32px − bottom padding   (24px gap − 56px grid row-gap). Desktop (>1084px) unchanged. */
    @media (max-width:1084px){
      :where(.wst-s-brands) [data-m="hero-mark"] svg{width:auto !important;max-width:100%;aspect-ratio:173.56/200.41;margin:0 auto;}
    }
    @media (min-width:821px) and (max-width:1084px){
      :where(.wst-s-brands) [data-m="hero-mark"]{top:auto !important;bottom:calc(-0.15 * 520px) !important;}
      :where(.wst-s-brands) [data-m="hero-space"]{height:calc(0.85 * 520px - 32px - 96px) !important;}
    }
    @media (max-width:820px){
      :where(.wst-s-brands) [data-m="hero-mark"]{bottom:-54px !important;}
      :where(.wst-s-brands) [data-m="hero-space"]{height:226px !important;}
    }
    @media (max-width:480px){
      :where(.wst-s-brands) [data-m="hero-mark"]{bottom:-45px !important;}
      :where(.wst-s-brands) [data-m="hero-space"]{height:175px !important;}
    }