/* ==========================================================================
   COMPONENTS — shared pieces used on every page: header + nav, buttons / pills, hero, marquees, stats, footer.
   A component defines only LAYOUT and BEHAVIOR. Font size, radius, fill and image fitting come from the presets
   (presets.css) applied in the markup:  e.g.  <a class="pill pill-2 fill-liquid text-ui">.
   The only radius exception in the whole site is the sliding nav pill (see .nav__pill).
   ========================================================================== */


/* ---------- Header + nav ---------- */
/* logo.svg embedded as a data URI: a mask image from a separate file is blocked when the page is opened from disk (file://) */
:root { --logo-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzYzLjggNDgwLjMiPjxwYXRoIGQ9Ik03MDkuNiwxNDEuNmMtOC45LDMtMTIuOCwxMC41LTE1LjUsMTguNWMtMi44LDguNy0xMS45LDM3LjgtMTQuNCw1My42Yy0wLjUsMy4zLTIuMiwxMS00LjEsMTUuNSBjLTEuOSw0LjUtOC41LDMzLjQtOC4yLDQxLjJzMyw0LjksNi4yLDE2LjVjMy4yLDExLjYsMTUuNSw3LjIsMTUuNSw3LjJzNS4zLTEuNiw4LjIsNy4yYzQuMiwxMi42LDE3LjQsMTEuMywyMi43LDQuMSBjNC40LTUuOSwxLjUtMTUuOSwxLTI1LjhjLTEuMy0yOC4zLDQuMS0xMDYuMSwxMC4zLTEwOS4yYzYuMi0zLjEsNS4zLTIwLjcsMy4xLTIzLjdDNzMyLjEsMTQzLjgsNzMyLjUsMTMzLjksNzA5LjYsMTQxLjZ6IE03NTAuOCw2MS4zYzAsMC05LjctMi0yMS42LDFjLTguNCwyLjEtMTkuNSw2LjgtMjMuNywxMy40Yy05LjEsMTQuNC0yLjksMzAuNiw4LjIsMzkuMWM5LjMsNy4xLDE2LjQsMTAuMiwyMC42LDEwLjMgYzEzLDAuNCwxNi41LTE0LjQsMTYuNS0xNC40czMuNS05LjQsNi4yLTExLjNzOS43LTQuMywxMi40LTkuM2M1LjMtOS42LTIuOC0xNC4zLTYuMi0yMC42Uzc1MC44LDYxLjMsNzUwLjgsNjEuM3ogTTkyMy45LDI3Ny42IGMtNi02LjMtOC0xMy40LTExLjMtMTMuNGMtMy43LDAtMTEuNSw5LjctMjcuOCwxMi40Yy0zOC44LDYuNC03Ni40LTEyLjctNzEuMS01MS41YzEuMy05LjQsNC4xLTIxLDguMi0yOC44IGMwLjgtMS42LDMuMi0yLjcsNC4xLTQuMWMxLjMtMS45LDEuMS00LjEsMi41LTUuN2MxLTEuMiwyLjYtMC40LDMuNy0xLjVjMS40LTEuNCwyLjItNC41LDMuNy01LjZjMTcuMS0xMy42LDM3LjUtMTEuOSwzNy41LTExLjkgczUuNy0wLjMsOC4yLTQuMWMyLjYtMy45LDQuMy01LjksMC0xMC4zYy00LjMtNC40LDMuMS0xNi40LTIwLjYtMTkuNmMtMTIuMS0xLjYtNjIuMSwxNC40LTc5LjMsNTEuNWMtMy45LDguMy05LjksMjUuMi04LjIsNDIuMiBjMywzMS4yLDE0LjQsNDUuNyw0Ni40LDYzLjljMTguOSwxMC43LDM3LjIsMTMuNCwzOS4xLDEzLjRjMiwwLDMuOS0xLjIsNi4yLDFjMi4zLDIuMiw1LjksNC44LDQwLjIsMi4xYzE2LjEtMS4zLDI4LjUtMi45LDMwLjktNS4yIGMyLjQtMi4yLDQuMy03LjUsMC0xNS41QzkzNC42LDI4My45LDkyNy40LDI4MS4zLDkyMy45LDI3Ny42eiBNMTExNC40LDE1NWMyLjctNi44LTIuMy03LjEtMy4xLTkuM2MtMC44LTIuMiw0LjMtNiwzLjEtNy4yIGMtMS40LTEuNC02LjMtMS4yLTkuMywwYy0yLjksMS4yLTYuNCwzLjQtOC4yLDQuMWMtMi42LDAuOS04LjMsMS4zLTE1LjUsMy4xYy03LjEsMS43LTI1LjUsOS42LTQ2LjQsMTkuNiBjLTEyLjQsNS45LTIxLjYsMTQuNC0yMS42LDE0LjRzLTIuNS0xNC42LTQuMS0xNi41Yy0xLjYtMS45LTMuNi0zLjUtNC4xLTguMmMtMC42LTUuMi03LjktMTIuNC05LjMtMTMuNGMtMi4yLTEuNi0xLjktNS0zLjEtNy4yIGMtMS4yLTIuMi0xNC41LTE4LjItMjkuOS0xNi41Yy0xMiwxLjQtMS45LDM2LjEsMSw0NS4zYzEuOSw1LjksNS41LDExLjksNy4yLDE3LjVjMS42LDUuMSwxLjgsOC41LDMuMSwxMi40IGMyLjIsNi4zLDMuMiw4LjIsNS4yLDguMmMxLjksMCwzLjEtMC4xLDUuMiwxYzEuNCwwLjgsOC40LDExLjIsMTEuMywxMy40YzEuMiwwLjktMi4xLDkuMy0yLjEsOS4zcy0xNy42LDMxLjEtMjEuNiw2NC45IGMtMy43LDMxLjQsMTMuNCw0NC44LDE0LjQsNDUuM2MxLDAuNSwyLjUsMS45LDQuMSwxYzEuNi0wLjksMy43LTguNiw4LjItMTMuNGMxLjYtMS43LDMsNS43LDQuMSwzLjFjMy40LTguMSw5LjctMTIuNywxMy40LTE2LjUgYzMuOS00LDEuMy0xNi4xLDUuMi0zMS45YzYtMjQuNSwxNS41LTUzLjYsMTUuNS01My42czIuOS0xMSw4LjItMTguNWM4LjEtMTEuMywxMC4zLTgsNDAuMi0yOC44IEMxMDkwLjEsMTczLjUsMTExMi42LDE1OS41LDExMTQuNCwxNTV6IE0yMDIuOCw0OC45Yy0xNS4zLTUuMy0zMC4xLDIyLjItMzQsMjUuOGMtMi43LDIuNS01LjQsMC4xLTE1LjUsMjAuNiBjLTYuMSwxMi40LTEzLjQsMjcuNC0xOS42LDM5LjFjLTUuMiw5LjktMTAuMywxNy41LTEwLjMsMTcuNXMtMi4xLDEtMi4xLTIuMWMwLTMsMTAuNC02MC41LTExLjMtNjIuOCBjLTIxLjctMi4zLTMyLjMsMzQuOS00Mi4yLDU5LjdjLTYuNiwxNi40LTE1LjMsMzUuMi0yMC42LDU0LjZjLTMuOSwxNC41LTgsMjguNi0xMS4zLDQwLjJjLTIuNiw5LjEtMTEuMSwzMS44LTE2LjUsMzQgYy0xLjQsMC42LTMsMi4yLTcuMi0xYzIuNSwxLjksMy4xLDguMiwzLjEsOC4ycy0wLjEsMTMuNyw1LjIsMTcuNWM2LjYsNC44LDI5LjEtMSwzMy0xOS42YzEuMy02LjItMS42LTExLjctMy4xLTE3LjUgYzAuMywxLjMtOC0xMS40LDkuMy03Ny4zYzcuOS0zMCwyMi43LTU3LjcsMjIuNy01Ny43cy0wLjEsMTUuMi0yLjEsMjkuOWMtMi4xLDE1LjctNS4yLDMzLTUuMiwzM3MtNi41LDI1LjgsMTQuNCwzMC45IGM5LjEsMi4yLDI1LjcsMC43LDM0LTI0LjdjMy45LTEyLDE2LjEtMzUuMywyOS45LTYwLjhjMzctNjguMyw2OS4yLTEyMC4zLDE4LjUsNzQuOWMtNS4zLDIwLjUtMTIuNywzNi40LTE3LjUsNTMuOCBjLTUuNCwxOS45LTE5LDYzLjgtMTkuNiw4MC4zYy0xLjMsNDAuOS0xNi44LDg1LjEtMTYuNiw4NS42YzAsMCwwLjEtMC4xLDAuMS0wLjFjLTAuMSwwLjEtMC4xLDAuMS0wLjEsMC4xIGMtNy4xLDguMSwyMS4zLDEyLjQsMjguOSwxNy40YzYsNCwxNS4zLDMuNSwyMi43LDIuMWM3LjUtMS41LDQuMS0xNi41LDQuMS0xNi41czMuOS0zLjYsNC4xLTEwLjNjMS42LTQwLjUsNi43LTcwLjYsNi4yLTY3IGMxLjQtOS4zLDUuMS0zOS4xLDkuMy01NS42YzMuNi0xNC4yLDkuMy0yOS45LDkuMy0yOS45czE3LjItNTIuNSwyNC43LTk1LjhDMjM1LjQsMTMwLjYsMjQxLjYsNjIuNCwyMDIuOCw0OC45eiBNMzgwLDE1MyBjLTExLjYtNC42LTIwLjEsMy4xLTIxLjYsNi4yYy0xLjUsMy4xLTYuMiwzLjQtOC4yLDYuMmMtMiwyLjgsMSwxMC4yLDAsMTMuNGMtMSwzLjItMjQuNyw5Ny42LTQzLjMsMTExLjIgYy02LjYsNC44LTcuNiwxLjQtMTMuNCw3LjJjLTguNSw4LjYtOC4yLTIxLjQtOC45LTI2LjNzLTcuNC0yMS4zLTcuNC0zOS4xYzAtNy42LDguOC0xOS44LDE0LjYtMzguM2MxMS42LTM3LjQsOC40LTQ0LjQsNC45LTQ0LjcgYzAsMC0yLjgtMC41LTYuMiwxYy03LjUsMy4zLTE3LjIsMi42LTI4LjYsMTYuNmMtMTMuNCwxNi40LTI2LjYsNTUuNC0yOC4xLDc3LjFjLTEuOSwyOC4zLTMsNzAuMywyMy43LDc5LjNjNy4xLDIuNCwxOS42LDEsMTkuNiwxIHMzMywyMC4zLDYzLjktMTYuNWMzMS43LTM3LjgsNDcuNC0xMjcuNyw0Ny40LTEyNy43UzM5MS42LDE1Ny41LDM4MCwxNTN6IE01MDEuNSwyNzguNmMtOS44LDQuNS0zNC42LDAuOS00OC40LDEgYy03LjQsMC4xLTE1LDIuOC04LjItMTAuM2M0LjItOC4yLDIzLjktMjguMywzMS45LTQ2LjRjMy45LTguNywxMS4xLTkuOSwxMy40LTIwLjZjMS00LjksMzMuOS0yNi44LDQzLjMtMjguOCBjMTcuNC0zLjgsMTcuMy03LDIyLjctMTEuM2M2LjEtNS04LjctMTQuNy0xMS4zLTE3LjVjLTIuMy0yLjUtNi41LTEwLjUtMTYuNS0xMC4zYy0xNC40LDAuMy01Ny4zLDkuNi04NS41LDE1LjUgYy00LjcsMS04LjEtMC44LTExLjMsMGMtMy4yLDAuOC03LjcsNC4zLTguOSw0LjdjLTMwLDkuOCwyMS4yLDE4LjksMjEuMywxOWMwLDAsNy40LDcuNCwxMi40LDcuMmM1LTAuMi0yLjEsNi4yLTIuMSw2LjIgcy0xNy40LDE1LjMtMzUsMzVjLTIxLjgsMjQuNS00Ni40LDUwLjQtMjIuNyw3NC4yYzEuNiwxLjYsNC4xLDAsNC4xLDBzNy43LTMuMywxNC40LDBjMy4yLDEuNiwxOS42LDcuNywzNi4xLDkuMyBjMTguOSwxLjgsMzEuNiwwLjcsNDEuMi0zLjFjNS45LTIuNCw3LjIsMi4zLDEzLjQtOC4yYzEuNS0yLjYsNi43LTUsOC4yLTcuMkM1MTkuNiwyNzguNyw1MTguOSwyNzAuNyw1MDEuNSwyNzguNnogTTY3NS42LDI5OS4yIGMtMy41LTMuNi03LTguMi0xMS4zLTEyLjRjLTUuNi01LjQtNi40LTguNi0xMS4zLTguMmMtMy4xLDAuMi0yLjUsMS43LTcuMiw0LjFjLTMuOSwyLTguOCwzLjgtMTAuMiw0LjFjMC4xLDAsMC4xLDAtMC4yLDAgYzAsMCwwLjEsMCwwLjIsMGMtMSwwLjItMTIsMi0xNi42LDIuMWMtNS4zLDAuMS04LjEtMC4yLTEwLjMsMGMtOCwwLjctMTIuNi0wLjEtMTcuNS0xYy0xLjgtMC4zLTguNywwLjgtMTYuNS0yLjEgYy0yLjQtMC45LTExLjUtMC42LTEyLjQtOC4yYy0xLjEtOS40LDE3LjctMzYuNywyNS44LTQ1LjNjOC45LTkuNSwyMi43LTIxLjYsMzEuOS0yOS45YzkuNi04LjcsMTMuOS0xMC4xLDE0LjQtMTIuNCBjMC41LTIuMywxLjQtNC42LDIuMy01LjZjMC45LTAuOSwzLjUtMi45LDUuMy0zLjJjMS44LTAuMywyOS44LTEzLjksMTguMS0zMC4zYy00LjItNS45LTkuNS02LjktMTIuNC05LjNjLTIuOS0yLjQtNS4yLTUuOC04LjItNy4yIGMtNy45LTMuNi0xMy40LTMuNi0xNy41LTMuMWMtNC4xLDAuNS02LjEsMS44LTE3LjUsMWMtMTEuMi0wLjgtMTkuMy0zLjItMjIuNy00LjFzLTQuMi0zLjEtOC4yLTIuMWMtMy42LDEtNC41LDMuOC03LjIsNS4yIGMtMi43LDEuMy04LjcsNC45LTcuMiwxMC4zYzIuMyw4LjIsMTEuNiw4LjUsMTUuNSwxMC4zYzMuOSwxLjgsMTAuOCw2LjUsMjAuNiw1LjJjNS43LTAuOCwxMS01LjgsMTUuNS04LjJjNS4zLTIuOSw2LjgtMi43LDguMi0zLjEgYzItMC42LDMtMS40LDQuMS0xYzEuMSwwLjQsMi4yLDYuMiw2LjIsOS4zYzQuNCwzLjQsNi43LDguOCw2LjIsMTEuM2MtMC42LDIuNywzLjEsMy44LTE5LjYsMjAuNmMtMTEuOCw4LjgtMjkuMSwyMC43LTMxLjksMjIuNyBjLTEyLjYsOC41LTMxLjIsMTkuMS00My4zLDMwLjljLTE0LjgsMTQuNS0yMi41LDMxLjQtMjEuNiw0MS4yYzAuMiwyLjQsMi43LDUsMy4xLDcuMmMwLjIsMS4xLTAuNSwwLjYsMCwzLjEgYzAuNSwyLjQsNy40LDExLjEsMTguNSwxNi41YzQuMiwyLDkuNCwzLjIsMTIuNCw1LjJjMywyLDQuOCw0LjEsNi4yLDUuMmMxLjMsMS4xLDExLjIsMi4yLDI1LjgsMi4xYzE0LjktMC4yLDM0LjItMy43LDQ3LjQtNC4xIGMyMi4zLTAuNywyMi40LDIuMywyNy44LDIuMWM1LjQtMC4yLDYuOC0xLjgsOC4yLTIuMWMxLjUtMC4yLDIuMiwxLjIsMy4xLDFjMS41LTAuMywyLjEtMy4yLDQuMS0zLjFjMiwwLjEsMy4zLDAuNCw1LjItMSBjMS43LTEuNCwyLjUtNC4zLDIuMS02LjJDNjgyLjYsMzA1LjUsNjc5LjEsMzAyLjgsNjc1LjYsMjk5LjJ6IE0xMjE2LjQsMjc5LjdjLTEtMC4xLTQuNSwyLjEtOS4zLDQuMWMtMTMuNyw1LjgtMTcsMi42LTE4LjUsMy4xIGMtNC45LDEuNS03LjUsNi4zLTE2LjUsNi4yYy0xLjksMC0xLjgtNS0zLjEtNi4yYy0xLjMtMS4yLTgtMi4xLTE0LjQtMTIuNGMtMi4yLTMuNS00LjUtOC4xLTUuMi0xMy40Yy0wLjctNS44LDAuMy0xMi4zLDEtMTcuNSBjNC4yLTI4LjYsMzYuMS02MC44LDM2LjEtNjAuOHMyLjQtNSw3LjItOC4yYzcuMi00LjgsMjguNy0yLjEsMzAuOS0yLjFzNy40LTEuNyw4LjItNC4xYzAuNy0yLjItNS45LTYuOC00LjEtNy4yIGM5LjItMS45LTYuNi0xMy4xLTEwLjMtMjAuNmMtMC45LTEuOC0zLjYsMS43LTguMiwxcy0xMC03LjktMTMuNC04LjJjLTMuMi0wLjMtMTcsMS4zLTM2LjEsMTIuNGMtMjcuMywxNS45LTQ3LjUsNDAuMS01NS42LDYyLjggYy01LjEsMTQuNC01LjgsMjAuOC01LjIsMjUuOGMwLjYsNSwyLjMsNi44LDMuMSwxMi40YzAuNiw0LjItMC4xLDEyLjcsMSwxNy41YzEuMSw0LjgsMy4yLDYuNyw1LjIsOS4zYzEuOSwyLjYsMi44LDUsNC4xLDguMiBjMC42LDEuNSw3LjgsMTAuMSwxNi41LDE1LjVjOS41LDUuOCwxNy41LDcuOCwyMC42LDguMmMzLjIsMC40LDcuNC0wLjUsOS4zLDFzMS42LDMuNCw1LjIsNC4xYzEuNywwLjMsMTIuMywzLjgsMjIuNyw1LjIgYzExLjksMS42LDIxLDAuNSwyMi43LDBzMy0yLjEsNS4yLTIuMWMyLjEsMCwyLjMsMS44LDQuMSwyLjFjMC45LDAuMSw5LjYsMC45LDE0LjQtMWM5LjktMy45LDIuMy0xMC01LjItMTguNSBDMTIyMi4zLDI4OC44LDEyMTguNywyODAsMTIxNi40LDI3OS43eiBNMTM5OS43LDI5MmMtMS0xLjMsMC45LTUuMSwxLTcuMmMwLjEtMi4xLTMuOS02LjEtOS4zLTMuMWMtNS40LDMtMTkuNSwyLjItMjEuNiw0LjEgYy0yLjUsMi4zLTUuNCwwLjktNy4yLDFjLTUuOCwwLjQtNi44LTEuMS0xNC40LTFjLTMxLjcsMC4yLTQzLjctNi41LTQ4LjQtMjkuOWMtMS44LTguOC0wLjgtMjEuNS0xLTIzLjdjLTAuMy0yLjIsMS4xLTUuMiwxLTguMiBjLTAuMS0zLjQtMS4zLTYuNi0xLTguNWMwLjgtNC43LDEuNy04LjksMi0xMi4xYzAuNC00LjMtMS4xLTUuNy0xLTcuMmMwLjEtMS41LDIuMS04LjIsMi4xLTguMnM0LjEtMTUuMSwyLjEtMzAuOSBjLTItMTUuOC0xMi45LTExLjYtMTYuNS04LjJjLTIuOCwyLjYtMy4zLDEuOC02LjIsNC4xYy0yLjgsMi4zLTMuNCwyLjktNC4xLDYuMmMtMC44LDMuMy04LjIsMzguOS0xMyw2Ny44IGMtMy42LDIxLjItMS44LDQ1LjIsOC45LDU5LjljMTQuNCwxOS43LDQ0LjYsMjIuOCw3MS4xLDI0LjdjMjguMiwyLjEsNDAuNCwyLjMsNDcuNCwyLjFjMS4yLDAsMy4zLTEuMSw0LjEtMWMxLjksMC4yLDAuMywyLjQsNS4yLDAgYzEuNy0wLjksNi02LjgsNy4yLTkuM2MxLjgtNS42LTMuMS0xMy40LTMuMS0xMy40UzE0MDAuOCwyOTMuMywxMzk5LjcsMjkyeiBNMTc1MCwyNDQuNmMtMC41LTYuMy0zLjgtMjMuMi00My4zLTM2LjEgYy00LTEuMy05LTIuMy0xNC41LTMuMmMtNi0xLTEzLjgtMS0xNi40LTEuOWMtMi42LTAuOS01LjktMi03LjItMi4xYy0yLjktMC4yLTQuMy0wLjctOS4zLTFjLTcuOC0wLjUtMTcuOC0yLjMtMjIuNy00LjEgYy05LjctMy43LTEzLjUtOC42LTE0LTEyYy0wLjYtNC4xLTEuMi0xMi41LDkuOC0xOC45YzYuOS00LDEzLjktNS4zLDE1LjUtNS4yYzEuNiwwLjIsNC4zLTAuNCw1LjItMWMwLjktMC42LDUuOC01LjUsOC4yLTcuMiBjMi40LTEuNyw4LjctMy42LDE3LjUtNy4yYzEyLjEtNC45LDIyLjItOS45LDE5LjYtMTcuNWMtMS45LTUuNi03LTEwLTExLjMtMTEuM2MtNC4zLTEuMy0yMy41LTEuNy00NC4zLDQuMSBjLTE0LjcsNC4xLTYyLjEsMTkuOS02NC45LDUwLjVjLTEuNCwxNiw0LjUsMjQuNSwyNy44LDM1YzEwLjYsNC44LDMzLjksNy4zLDM3LjksNy4xYzYuMS0wLjIsMTMuNCwyLjcsMTUuNiwzLjIgYzIuMywwLjUsMTEuMSwxLjIsMTYuNSwyLjFjNS45LDAuOSwyOS45LDExLjEsMjkuOSwxOC41YzAsMy41LTEyLjksMTYuOS00Mi4yLDI0LjdjLTMzLjcsOS01NS4yLDkuMy02My45LDkuMyBjLTguNiwwLTI2LjQsMi0yOC44LDMuMWMtMi40LDEuMS0zLjQsMS43LTUuMiwyLjFjLTEuNiwwLjMtNC4yLDAuNi01LjIsMWMtMywxLjYtMi44LDMuNi00LjEsNC4xYy0xLjcsMC43LTMuNS0xLjEtNC44LTAuNSBjLTIsMS0zLjUsMS45LTQuNSwyLjZjLTIuNiwxLjctMTcuNCw1LjQtMzMsNS4yYy02NC40LTEtNjEuOC00My4zLTYxLjgtNDMuM3MyNi4xLDExLjksNDcuNCwzLjFjMTMuNi01LjYsMTYuNS0yMi44LDE2LjUtMjUuOCBjMC0zLTEtNS42LTEtMTEuM2MwLTUuNiwzLjYtMTIuNywyLjEtMTMuNGMtMS41LTAuNy03LjMsMS44LTE3LjUsMy4xYy02LjMsMC44LTE1LjMsMC43LTIxLjYsMi4xYy0xMCwyLjItMjAuMyw3LjMtMjAuNiw4LjIgYzMuOS0xMi44LDkuNy0yOC40LDE3LjUtMzcuMWMzLjQtMy43LDEwLjIsMS43LDEzLjQsMi4xczEwLjMtMC43LDIwLjYtMWM0LjgtMC4yLDkuNCwwLjUsMTMuNCwwYzExLTEuMywxMi40LTYuNiwxMi40LTkuMyBjMC0zLjMtMS02LjItMS03LjJjMC0yLjEsMi4xLTEuNywyLjEtMy4xczAuNy0yLjMsMS0zLjFjMS0yLjEsNi40LDIuNyw5LjMtNS4yYzAuMi0wLjcsMS4yLTQuNiwyLjEtNy4yYzAuOS0yLjcsMS43LTUsMi4xLTguMiBjMS04LjUtNC4zLTEzLjYtNi4yLTE1LjVjLTEuOC0xLjgtNC40LTItNi4yLTFjLTEuMywwLjctNS44LDkuMS0xMy40LDEzLjRjLTIuOSwxLjctMi42LTEuOC03LjItMWMtMTYuMywyLjctMjEuMSw3LjQtMzEuOSw3LjIgYy04LjktMC4xLTguMy0zLjEtMTAuMy00LjFjLTEuOS0wLjktNC4xLDAtNC4xLDBzLTE0LjksNy43LTI2LjgsMjguOGMtMTAuNiwxOC45LTE5LjIsNDYuNy0yMi41LDU2LjhjLTEuMSwzLjUtMC4xLDYtMC4xLDguMSBjMCwyLjktMi4yLDEuNC0zLjEsOC4yYy0xLjYsMTIuOCwwLjMsMjguMSw2LjIsNDQuM2MxMi43LDM0LjgsNjMuOCwzOS42LDgzLjQsMzcuMWM3LjMtMC45LDE0LjgtNS45LDE2LjUtNi4yIGM0LjEtMC43LDEuOCwxLjUsNC4xLDIuMWMxLjcsMC40LDEuMy0xLjIsMy4xLTJjMy4yLTEuNSwyLjUsMS41LDYuMiwyYzEuOSwwLjMsMy4xLTAuMywzLjEtMy4xYzAtOC4yLDguMi0xMS44LDExLjMtMTQuNCBjMi42LTIuMSwxNC4xLDIwLjcsMTUuNSwyMC42YzMtMC4zLDcuNS02LjMsNS4yLDBjLTAuNSwxLjItMSwxLjgtMSw3LjJjMCwyLjcsMy45LDIuMyw1LjIsNC4xYzEuMiwxLjgsMSw1LjIsMSw1LjIgczE5LjIsMS44LDQ1LjMtMy4xYzI3LjMtNS4xLDg0LjMtMjguMiwxMDItNDAuMkMxNzUwLjQsMjY4LjgsMTc1MC43LDI1NC41LDE3NTAsMjQ0LjZ6Ii8+PC9zdmc+"); }

.site-header {
  position: absolute; z-index: 30; inset: 12px 12px auto;
  padding: clamp(0.9rem, 2.4vw, 3rem) clamp(1.25rem, 5vw, 7rem);
}
.site-header__bar { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
/* the wordmark keeps the height of the main menu (it is centered against it, as before) and the language menu sits under it */
.site-header__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.site-header__logo { display: flex; align-items: center; line-height: 0; min-height: calc(var(--fs-1) * 2.38); }

/* ---------- Language menu (renderLangMenu): the main menu in miniature — a small blue bar of three flags with a white pill that slides to the
   hovered / focused flag and rests on the current language (initSlidingPill, like the main menu). Brasil = Português, Reino Unido = English, Uruguai = Español. ---------- */
.lang { --nav-r: calc(var(--pill-2) - 0.2em); font-size: var(--lang-fs); padding: 0.2em; }
.lang ul { position: relative; display: flex; gap: 0.12em; margin: 0; padding: 0; list-style: none; }
.lang__link { position: relative; z-index: 1; display: block; padding: 0.25em 0.35em; border-radius: var(--nav-r); line-height: 0; }
.lang__flag { display: block; width: 1.1em; height: 1.1em; object-fit: contain; }   /* + .pill-3 */
:root { --lang-fs: max(var(--fs-0), 0.95rem); }   /* size of the language menu (never below a finger-friendly 0.95rem); it sits over the Home's hero, so no page needs room for it */   /* the language menu's height + its gap: pages without a hero start below it */
/* the wordmark is a mask: it takes any FILL preset — white over a dark first block (.fill-white), liquid blue over a
   white page (.fill-liquid). */
.logo {
  display: block; height: clamp(28px, 4vw, 72px); aspect-ratio: 1763.8 / 480.3;
  -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat;
}

/* The white pill that slides between links is the ONE exception to the pill standard: it is a separate shape with
   its own, rounder radius — concentric with the nav (pill 2 minus the nav padding), so it never looks pointy. */
.nav { --nav-r: calc(var(--pill-2) - 0.2em); padding: 0.2em; }
.nav ul { position: relative; display: flex; gap: 0.12em; margin: 0; padding: 0; list-style: none; }
.nav a {
  position: relative; z-index: 1; display: block; padding: var(--btn-m) 0.72em; border-radius: var(--nav-r);
  color: var(--color-white); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-color) var(--ease-out);
}
.nav__pill, .tabs__pill {          /* + .fill-white (menu) / .fill-liquid (tabs) in the markup (JS: initSlidingPill) */
  position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 0; border-radius: var(--nav-r);
  opacity: 0; pointer-events: none;
  transition: transform var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.nav__pill.is-ready, .tabs__pill.is-ready { opacity: 1; }
.nav a.is-under { color: var(--blue-500); }

/* Menu button: three dots, horizontal at rest, vertical on hover / when the menu is open (+ .flood .flood-white) */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0; border: 0; cursor: pointer;
}
.dots { display: flex; gap: 0.28em; transition: transform var(--dur-2) var(--ease-soft); }
.dots i { display: block; width: 0.32em; height: 0.32em; background: currentColor; }   /* + .pill-3 */
.nav-toggle:is(.is-flooded, :focus-visible) .dots,
.nav-toggle[aria-expanded="true"] .dots { transform: rotate(90deg); }

/* At sketch proportions the nav needs ~90% of the width, so it collapses into the menu button below 720px */
@media (max-width: 719px) {
  /* the menu stays put while the page scrolls: the button (and the dropdown under it) are fixed to the window at the spot they rest in;
     the wordmark stays with the page (it is white over the dark first block and would vanish on a white page) */
  .site-header { --menu-top: calc(12px + clamp(0.9rem, 2.4vw, 3rem)); --menu-right: calc(12px + clamp(1.25rem, 5vw, 7rem)); }
  .site-header__bar { min-height: 2.5rem; }
  .site-header__logo { min-height: 2.5rem; }
  .site-header .nav-toggle { display: inline-flex; position: fixed; z-index: 31; top: var(--menu-top); right: var(--menu-right); }   /* (.flood, further down, sets position: relative) */
  .site-header .nav {
    position: fixed; z-index: 31; top: calc(var(--menu-top) + 2.5rem + 0.5rem); right: var(--menu-right); min-width: 11rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), visibility 0s linear var(--dur-1);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav ul { flex-direction: column; }
  .nav a { padding: 0.6em 0.64em; }
}


/* ---------- Buttons: Lusion "Our Approach" hover ----------
   A shape WITH a knob (pills, footer CTA): the knob expands (scale N) and floods the button with its color.
   A shape WITHOUT a knob (COMPRE, Instagram, menu button): the fill opens as a circle from the CURSOR position
   (JS sets --fx/--fy and toggles .is-flooded). Either way a --rim of the original button stays visible around the
   flood, text and arrow change color, and the arrow slides in. Flat: no shadow, glow or scale. */

/* cursor-origin flood: add .flood to any shape without a knob. The radius --r comes from the shape preset, the color
   of the flood from .flood-liquid / .flood-white (presets.css), the rim from --rim (.flood-flush removes it).
   White shapes flood blue and their text turns white; blue shapes flood white and their text turns blue. */
.flood {
  --fx: 50%; --fy: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  transition: color var(--dur-color) var(--ease-out);
}
.flood::before {
  content: ""; position: absolute; inset: var(--rim); z-index: -1;
  border-radius: calc(var(--r) - var(--rim));
  clip-path: circle(0% at calc(var(--fx) - var(--rim)) calc(var(--fy) - var(--rim)));
  transition: clip-path var(--dur-2) var(--ease-out);
}
.flood.no-anim::before { transition: none; }
.flood:is(.is-flooded, :focus-visible)::before {
  clip-path: circle(160% at calc(var(--fx) - var(--rim)) calc(var(--fy) - var(--rim)));
}
.fill-white.flood:is(.is-flooded, :focus-visible) { color: var(--color-white); }
.fill-liquid.flood:is(.is-flooded, :focus-visible) { color: var(--blue-500); }

/* sliding arrow (renderArrow), parked outside the edge at rest */
.arrow {
  position: absolute; top: 50%; right: var(--arrow-right, 0.3em); z-index: 1;
  display: grid; place-items: center;
  width: var(--arrow-size, 0.75em); height: var(--arrow-size, 0.75em); margin-top: calc(var(--arrow-size, 0.75em) / -2);
  transform: translateX(3em);
  transition: transform var(--dur-2) var(--ease-arrow);
}
.arrow svg { width: 100%; height: 100%; }

/* icon buttons (Instagram, YouTube): .btn .btn--icon .pill-2 .fill-white .text-xl-button .flood .flood-liquid — white with a blue icon, flood blue on hover.
   The large COMPRE button is a .cta (below) at the same text size. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.33em; padding: 0.18em 0.68em; border: 0;
  text-decoration: none; cursor: pointer;
}
.btn--icon { width: 1.33em; padding: 0; }
.btn--icon svg { width: 0.8em; height: 0.8em; }

/* knob shapes: the knob and arrow live in a clipped "well" inset by the rim, so the flood never covers the border */
.well {
  position: absolute; inset: var(--rim); z-index: 0; overflow: hidden; pointer-events: none;
  border-radius: calc(var(--r) - var(--rim));
}
.knob {                             /* + .pill-3 and .fill-white / .fill-liquid */
  position: absolute; top: 50%; width: 1.1em; height: 1.1em; margin-top: -0.55em;
  transition: transform var(--dur-2) var(--ease-out);
}

/* a vertical group of pills that all take the width of the widest one (e.g. Sobre / Modelos), right-aligned */
.pill-stack { display: grid; justify-content: end; align-content: start; grid-template-columns: max-content; gap: 0.5em; } /* align-content:start — never stretch the rows, every pill keeps its own height */

/* pill with knob (renderPill): .pill .pill-2 .fill-liquid .text-ui */
.pill {
  --arrow-size: 1.1em; --arrow-right: calc(var(--btn-m) - var(--rim));
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center;
  /* knob 1.1em with --btn-m of margin on every side; --btn-pad-x before the label; the same margin between label and knob */
  min-width: 5.8em; min-height: calc(1.1em + 2 * var(--btn-m));
  padding: 0.2em calc(1.1em + 2 * var(--btn-m)) 0.2em var(--btn-pad-x);
  border: 0; cursor: pointer; text-decoration: none;   /* a link, or a button that opens a pop-up */
  transition: color var(--dur-color) var(--ease-out);
}
/* hover: the text slides to where the knob was (right) and the arrow comes in from the LEFT, landing where the text
   started; --label-shift is measured in JS (initKnobScale) */
.pill__label { position: relative; z-index: 1; transition: transform var(--dur-2) var(--ease-out); }
.pill .knob { right: calc(var(--btn-m) - var(--rim)); }
.pill .arrow { right: auto; left: calc(var(--btn-pad-x) - var(--rim)); transform: translateX(-3.5em); }
.pill .arrow svg { width: 70%; height: 70%; }

/* call-to-action button (.cta): <a> or <button> + .pill-2 .fill-white .text-ui-bold — white, blue text, a blue knob at the
   left that floods it with the liquid gradient on hover. Used for the footer bar and for form submit buttons.
   Markup: .cta > (span.cta__label + span.well > (span.knob.pill-3.fill-liquid + arrow)) */
.cta {
  --arrow-size: 1.1em; --arrow-right: calc(var(--btn-m) - var(--rim));
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  /* knob at the left with --btn-m of margin; the label starts after it, with a little more than one margin between */
  min-height: calc(1.1em + 2 * var(--btn-m));
  padding: 0.2em var(--btn-pad-x) 0.2em calc(1.1em + 2.2 * var(--btn-m));
  border: 0; cursor: pointer; text-align: left; text-decoration: none;   /* also works on a <button> */
  transition: color var(--dur-color) var(--ease-out);
}
.footer__cta { grid-column: span 12; align-self: start; }   /* the footer's bar: layout only */
/* hover: the text slides left to where the knob was and the arrow still comes in from the right */
.cta__label { position: relative; z-index: 1; transition: transform var(--dur-2) var(--ease-out); }
.cta .knob { left: calc(var(--btn-m) - var(--rim)); }
.cta .arrow svg { width: 70%; height: 70%; }

/* knob shapes: hover / focus */
@media (hover: hover) {
  .pill:hover { color: var(--blue-500); }
  .cta:hover { color: var(--color-white); }
  :is(.pill, .cta):hover .knob { transform: scale(var(--knob-scale, 20)); }
  :is(.pill, .cta):hover .arrow { transform: translateX(0); }
  .pill:hover .pill__label { transform: translateX(var(--label-shift, 1.54em)); }
  .cta:hover .cta__label { transform: translateX(calc(-1.1em - 1.2 * var(--btn-m))); }
}
.pill:focus-visible { color: var(--blue-500); }
.cta:focus-visible { color: var(--color-white); }
:is(.pill, .cta):focus-visible .knob { transform: scale(var(--knob-scale, 20)); }
:is(.pill, .cta):focus-visible .arrow { transform: translateX(0); }
.pill:focus-visible .pill__label { transform: translateX(var(--label-shift, 1.54em)); }
.cta:focus-visible .cta__label { transform: translateX(calc(-1.1em - 1.2 * var(--btn-m))); }

/* large call-to-action (.cta.cta--xl + .text-xl-button, the Home's COMPRE): the ORIGINAL height of the large buttons (1.33em, the
   same as the icon button beside it) with a smaller knob at the RIGHT and the label left-aligned; the button is only wider by the
   knob's room. Knob on the right = the pill behavior (§7.1): the label slides right to where the knob was, the arrow comes in from the left. */
.cta--xl {
  --knob: 0.85em; --knob-m: 0.24em;                      /* knob + 2 margins = the button's height (1.33em) */
  --arrow-size: var(--knob);
  min-height: 1.33em;
  padding: 0.18em calc(var(--knob) + 1.9 * var(--knob-m)) 0.18em var(--knob-m);   /* the label's left margin = the knob's right margin */
}
.cta--xl .knob { left: auto; right: calc(var(--knob-m) - var(--rim)); width: var(--knob); height: var(--knob); margin-top: calc(var(--knob) / -2); }
.cta--xl .arrow { right: auto; left: calc(var(--knob-m) - var(--rim)); transform: translateX(-3.5em); }
@media (hover: hover) { .cta--xl:hover .cta__label { transform: translateX(calc(var(--knob) + 0.9 * var(--knob-m))); } }
.cta--xl:focus-visible .cta__label { transform: translateX(calc(var(--knob) + 0.9 * var(--knob-m))); }

/* Knob card (.kcard): a card-shaped <button> or <a> (+ .pill-2 and .fill-white / .fill-liquid) with a knob in its BOTTOM-RIGHT corner — the Lusion knob button on a
   card. Hover / focus: the knob (pill 3, the opposite fill) grows and floods the card, a rim of the original stays visible around it, the text turns to the
   contrasting color and the arrow slides in where the knob was (from the right). Markup: .kcard > (.kcard__body + span.well > (span.knob.pill-3 + .arrow)). */
.kcard {
  --arrow-size: 1.1em; --arrow-right: calc(var(--btn-m) - var(--rim));
  position: relative; isolation: isolate; overflow: hidden; display: block; width: 100%;
  border: 0; cursor: pointer; text-align: left; text-decoration: none;
  transition: color var(--dur-color) var(--ease-out);
}
.kcard__body { position: relative; z-index: 1; }
.kcard .knob { top: auto; right: calc(var(--btn-m) - var(--rim)); bottom: calc(var(--btn-m) - var(--rim)); margin-top: 0; }
.kcard .arrow { top: auto; right: calc(var(--btn-m) - var(--rim)); bottom: calc(var(--btn-m) - var(--rim)); margin-top: 0; }
.kcard .arrow svg { width: 70%; height: 70%; }
@media (hover: hover) {
  .kcard:hover .knob { transform: scale(var(--knob-scale, 20)); }
  .kcard:hover .arrow { transform: translateX(0); }
  .fill-white.kcard:hover { color: var(--color-white); }
  .fill-liquid.kcard:hover { color: var(--blue-500); }
}
.kcard:focus-visible .knob { transform: scale(var(--knob-scale, 20)); }
.kcard:focus-visible .arrow { transform: translateX(0); }
.fill-white.kcard:focus-visible { color: var(--color-white); }
.fill-liquid.kcard:focus-visible { color: var(--blue-500); }

/* Roll button (.rollbtn + .pill-3 + .fill-white / .fill-liquid + .text-body + .roll-host): a one-line link or button whose label rolls up (the .roll window,
   like the Acervo's "Abrir o PDF") on hover / focus; nothing changes color. Without a target yet it is aria-disabled: same look, no pointer. */
.rollbtn { display: block; padding: 0.3em 0.75em; border: 0; text-decoration: none; text-align: left; cursor: pointer; }
.rollbtn[aria-disabled="true"] { cursor: default; }


/* ---------- Carousel: .carousel .window .pill-2 ----------
   A looping strip of slides (placeholder boxes or `<img class="img">`) with two step buttons. Loop = clones of the
   last and first slide at the ends; JS jumps back to the real slide without a transition. */
.carousel { position: relative; touch-action: pan-y; }
.carousel__track {
  display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.carousel__track.is-jumping { transition: none; }
.carousel__slide { flex: 0 0 100%; height: 100%; display: grid; place-items: center; }
/* step buttons: .carousel__btn .pill-circle .fill-white .text-body .flood .flood-liquid .flood-flush — white circle with a
   blue chevron; on hover the liquid blue floods it from the cursor (no rim) and the chevron turns white */
.carousel__btn {
  position: absolute; top: 43%; z-index: 3; width: 1.45em; height: 1.45em; margin-top: -0.725em; padding: 0; border: 0;
  display: grid; place-items: center; cursor: pointer;
}
.carousel__btn--prev { left: var(--card-inset); }
.carousel__btn--next { right: var(--card-inset); }
.carousel__btn svg { width: 0.5em; height: 0.5em; }

/* rolling step buttons (.step, inside renderStepInner): the circle clips a track of two copies of the arrow; "next" rests on the
   second copy and slides right on hover (the arrow leaves forward, a new one arrives from behind), "prev" mirrors it. Nothing
   changes color on the button's own hover — used by the lightbox and by the product cards. */
.step { display: block; overflow: hidden; }
.step__track { position: absolute; top: 0; left: 0; display: flex; width: 200%; height: 100%; transition: transform var(--dur-2) var(--ease-out); }   /* absolute: a <button> would center a child wider than itself */
.step__cell { flex: 0 0 50%; display: grid; place-items: center; }
.carousel__btn--next .step__track { transform: translateX(-50%); }
@media (hover: hover) {
  .carousel__btn--next:hover .step__track { transform: translateX(0); }
  .carousel__btn--prev:hover .step__track { transform: translateX(-50%); }
}
.carousel__btn--next:focus-visible .step__track { transform: translateX(0); }
.carousel__btn--prev:focus-visible .step__track { transform: translateX(-50%); }

/* ---------- Plate: a white label on a photo (product cards): .plate .pill-3 .fill-white .flood .flood-liquid .flood-flush ----------
   Sits on the bottom of its card, inset by --card-inset; on hover the liquid blue floods it from the cursor (no rim)
   and all its blue text turns white. */
.plate {
  position: absolute; left: var(--card-inset); right: var(--card-inset); bottom: var(--card-inset); z-index: 2;
  display: grid; gap: 0.25em; padding: var(--btn-m) calc(var(--btn-m) * 1.2); text-decoration: none;
}
.plate > span { display: block; }


/* ---------- Page structure: pages whose first block is NOT a hero ----------
   The header overlays the top of the page (absolute), so the content starts just below the menu: 8vw + 12px (the header's own bottom padding is left overlapped)
   (never less than 5rem). .page-title = a gradient heading (text-title fill-liquid text-liquid) above the content. */
.page { padding-top: clamp(5rem, calc(8vw + 12px), 13rem); }
.page-title { margin-bottom: calc(clamp(1rem, 2vw, 2.5rem) - var(--descent, 0em)); }   /* = the grid gap (minus the gradient's descent padding, see .text-liquid) */
.page-body { padding-bottom: clamp(2.5rem, 6vw, 8rem); }   /* room before the footer */

/* ---------- Accordion: .acc .pill-2 .fill-liquid .text-ui ----------
   A blue pill holding a question (button, text-ui-bold) and a white knob with a "+" (pill 3); clicking opens the answer
   inside the same pill and the "+" turns into a "−" (the vertical bar rotates onto the horizontal one). Any number of
   items can be open. Hover / focus: the question is underlined (grows from the left) and the icon spins half a turn.
   Markup: .acc > h2.acc__head > button.acc__trigger[aria-expanded] > (span.link-line + .acc__knob.knob.pill-3.fill-white > svg.acc__icon)
           + .acc__panel[inert] > .acc__inner > .acc__body.text-body (paragraphs) */
.acc__head { margin: 0; }
.acc__trigger {
  position: relative; display: block; width: 100%; margin: 0; border: 0; background: none; color: inherit; cursor: pointer;
  text-align: left; border-radius: inherit;
  /* the knob is 1.1em with --btn-m around it; the padding tops up whatever the line-height (--lh) leaves short of that 1.1em, so the text stays centered on the knob at any --lh */
  min-height: calc(1.1em + 2 * var(--btn-m));
  padding: calc(var(--btn-m) + (1.1em - var(--lh) * 1em) / 2) calc(1.1em + 3 * var(--btn-m)) calc(var(--btn-m) + (1.1em - var(--lh) * 1em) / 2) var(--btn-pad-x);
}
.acc__knob { top: var(--btn-m); right: var(--btn-m); margin-top: 0; display: grid; place-items: center; pointer-events: none; }
.acc__icon, .more__icon { width: 70%; height: 70%; transition: transform var(--dur-2) var(--ease-soft); }
.acc__v { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-2) var(--ease-soft); }
.acc.is-open .acc__v { transform: rotate(90deg); }

/* the answer: height animates 0 → its natural height (grid row 0fr → 1fr); hidden from focus and screen readers while closed */
.acc__panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.acc.is-open .acc__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.acc__inner { min-height: 0; overflow: hidden; }
.acc__body { padding: 0 var(--btn-m) calc(var(--btn-m) + (1.1em - var(--lh) * 1em) / 2) var(--btn-pad-x); }   /* right edge = the knob's right edge */
.acc__body p { max-width: none; }

@media (hover: hover) {
  .acc__trigger:hover .link-line { background-size: 100% 0.07em; }
  .acc__trigger:hover .acc__icon, .more:hover .more__icon { transform: rotate(180deg); }
  .more:hover .link-line { background-size: 100% 0.07em; }
}
.acc__trigger:focus-visible { outline: none; }
.acc:has(.acc__trigger:focus-visible) { outline: 2px solid var(--blue-500); outline-offset: 3px; }
.acc__trigger:focus-visible .link-line { background-size: 100% 0.07em; }
.acc__trigger:focus-visible .acc__icon, .more:focus-visible .more__icon { transform: rotate(180deg); }
.more:focus-visible .link-line { background-size: 100% 0.07em; }

/* ---------- Content box + form field ----------
   .box: a padded blue panel that holds text, fields and buttons — .box .pill-1 .fill-liquid .text-ui .on-dark; the fields and
   buttons inside are pill 2 (a pill inside a pill 1), their knobs pill 3.
   .field: a text field — <textarea|input class="field pill-2 fill-white text-body">: white, blue text, no border. */
.box { padding: var(--box-pad); }
.field { display: block; width: 100%; margin: 0; padding: 0.6em 0.8em; border: 0; resize: none; }

/* ---------- Underlined link: .link-line ----------
   Any text link or label (any size, any color): no underline at rest; on hover / focus a line grows from the left.
   Works across wrapped lines. A parent (like the accordion button) can light it up with its own hover rule. */
.link-line {
  color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 0.07em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--dur-2) var(--ease-out);
}
@media (hover: hover) { .link-line:hover { background-size: 100% 0.07em; } }
.link-line:focus-visible { background-size: 100% 0.07em; }


/* ---------- Tabs: .tabs .pill-2 .fill-white .text-ui ----------
   Sized like the main menu (.text-nav, same paddings and gaps). A white bar of text tabs; a blue pill (.tabs__pill .fill-liquid, made by initSlidingPill) slides to the hovered tab and
   rests on the selected one — the menu's behavior with the colors swapped. The tab under the pill turns white.
   Markup: .tabs > .tabs__list[role=tablist] > button.tabs__tab[role=tab][aria-selected] */
.tabs { --nav-r: calc(var(--pill-2) - 0.2em); display: inline-block; max-width: 100%; padding: 0.2em; }
.tabs__list { position: relative; display: flex; gap: 0.12em; }
.tabs__tab {
  position: relative; z-index: 1; display: block; margin: 0; padding: var(--btn-m) 0.72em; border: 0; background: none;
  border-radius: var(--nav-r); color: inherit; cursor: pointer; white-space: nowrap;
  transition: color var(--dur-color) var(--ease-out);
}
.tabs__tab.is-under { color: var(--color-white); }
.tabs__tab:focus-visible { outline-offset: -2px; }
@media (max-width: 639px) {
  .tabs { display: block; }
  .tabs__list { width: 100%; }
  .tabs__tab { flex: 1 1 auto; padding-inline: 0.4em; }
}
@media (max-width: 359px) { .tabs__tab { padding-inline: 0.2em; } }   /* the smallest phones: the three labels still fit the bar */

/* ---------- "Ver mais": .more .pill-2 .fill-white .text-ui ----------
   A white pill with the label in blue and a blue knob (.more__knob .pill-3 .fill-liquid) holding a white "+". Hover / focus:
   the label is underlined (grows from the left) and the "+" spins half a turn — the accordion's hover, colors inverted. */
.more {
  display: flex; align-items: center; justify-content: space-between; gap: 1em; width: min(100%, max(16rem, 35vw)); margin: 0 auto;
  min-height: calc(1.1em + 2 * var(--btn-m)); padding: 0.2em var(--btn-m) 0.2em var(--btn-pad-x);
  border: 0; cursor: pointer; text-align: left;
}
.more__knob { flex: 0 0 auto; display: grid; place-items: center; width: 1.1em; height: 1.1em; }

/* ---------- Text roll: .roll ----------
   A one-line window holding two copies of the same text; when its host (.roll-host: a row, a button) is hovered or
   focused the column slides up one line, so the text rolls out and the same text rolls in from below. Nothing changes
   color. line-height 1.2 here (not .9) so accents are not clipped by the window. */
.roll { display: block; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.roll__track { display: grid; transition: transform var(--dur-2) var(--ease-out); }
.roll__track > span { display: block; height: 1.2em; white-space: nowrap; }
@media (hover: hover) { .roll-host:hover .roll__track { transform: translateY(-50%); } }
.roll-host:focus-within .roll__track { transform: translateY(-50%); }

/* ---------- Press list: .press > li.press__row .pill-2 .fill-white .text-ui .roll-host ----------
   logo (a 4em slot) · title · "Abrir o PDF" button (.press__link .pill-3 .fill-liquid .text-body with a .roll inside). The link is
   stretched over the whole row, so the row opens the PDF (in a new tab) and hovering anywhere on it rolls the label. */
.press { display: grid; gap: var(--marquee-gap); margin: 0; padding: 0; list-style: none; }
.press__row {
  position: relative; display: grid; grid-template-columns: 4em minmax(0, 1fr) auto; align-items: center; column-gap: calc(var(--btn-m) * 1.4);
  padding: calc(var(--btn-m) * 0.7) calc(var(--btn-m) * 0.7) calc(var(--btn-m) * 0.7) var(--btn-pad-x);
}
.press__logo { display: block; width: 4em; height: 1.3em; object-fit: contain; object-position: left center; }
.press__title { margin: 0; min-width: 0; max-width: none; }
.press__link { display: block; padding: 0.3em 0.75em; text-decoration: none; }
.press__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Photo grid + tile: .photos > li > button.tile .window .pill-2 [data-tilt] ---------- */
.photos, .videos { display: grid; gap: var(--marquee-gap); margin: 0; padding: 0; list-style: none; }
.photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .photos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile { display: block; width: 100%; aspect-ratio: 1.08; padding: 0; border: 0; background: none; cursor: pointer; }

/* 3D tilt (initTilt): leans up to 5° away from the pointer and grows 2% (arrives in 90ms, leaves in 260ms, so a fast sweep over the tiles feels like a shuffle),
   catches a soft white reflection on its surface and casts a shadow to the side it leans away from (--lift-color, measured in --marquee-gap so every tile gets
   the same one). The reflection belongs to the tile, not to the pointer: it is a fixed light, a diagonal band that slides across the tile as it turns
   (--tx / --ty = the lean), so the more it leans the more or less of the photo the band covers. One of the two places with a shadow, and the only one with a
   reflection over a photo. Needs .window + a pill radius. */
[data-tilt] { position: relative; transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0;
  background-image:
    linear-gradient(115deg, rgb(255 255 255 / 0) 32%, rgb(255 255 255 / 0.18) 50%, rgb(255 255 255 / 0) 68%),
    linear-gradient(135deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 45%);
  background-size: 260% 260%, 100% 100%;
  background-repeat: no-repeat;
  background-position: calc(50% + var(--tx, 0) * 38%) calc(50% + var(--ty, 0) * 38%), 0 0;   /* the band runs to the side that turns toward you (away from the pointer) */
  transition: opacity 260ms var(--ease-out), background-position 160ms var(--ease-out);   /* the band glides with the lean instead of jumping */
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-tilt].is-tilting {
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02);
    box-shadow: calc(var(--sx, 0) * var(--marquee-gap) * 0.5) calc(var(--marquee-gap) * (0.55 + var(--sy, 0) * 0.35)) calc(var(--marquee-gap) * 1.4) calc(var(--marquee-gap) * -0.2) var(--lift-color);
    z-index: 3;   /* above its neighbours, so the shadow falls on them */
    transition-duration: 90ms;
  }
  [data-tilt].is-tilting::after { opacity: 1; transition-duration: 90ms; }
}
/* ---------- Videos: .videos > li.video .window .pill-2 ----------
   A YouTube facade: the thumbnail and a play button (.video__play .pill-3 .fill-white, floods blue like the card
   controls); the player is only loaded when it is clicked. The whole tile is a flood group. */
.videos { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.video { position: relative; aspect-ratio: 16 / 9; cursor: pointer; }
.video__play {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 2.6em; height: 1.8em; padding: 0; border: 0; cursor: pointer; text-decoration: none;
}
.video__play svg { width: 0.7em; height: 0.7em; margin-left: 0.08em; }
.video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Lightbox: one <dialog> (built by openLightbox) ----------
   The dialog is a transparent full-screen layer over a pure blur of the page (no color); the photo sits in a pill-2 window
   with white controls on it (X in the top-right corner, step buttons at the sides). The controls never change color:
   on hover the X spins half a turn (like the "+" of "Ver mais") and the arrow rolls horizontally out of its circle
   while a copy rolls in from the other side. Each control reacts on its own. */
html.is-locked { overflow: hidden; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.lightbox__img { display: block; width: auto; height: auto; max-width: 92vw; max-height: 86dvh; min-width: min(60vw, 18rem); min-height: 12rem; object-fit: contain; }
.lightbox .carousel__btn { top: 50%; }
.lightbox__frame:focus { outline: none; }
.lightbox__close {
  position: absolute; top: var(--card-inset); right: var(--card-inset); z-index: 3; width: 1.45em; height: 1.45em; padding: 0; border: 0;
  display: grid; place-items: center; cursor: pointer;
}
.lightbox__close svg { width: 0.5em; height: 0.5em; transition: transform var(--dur-2) var(--ease-soft); }
@media (hover: hover) { .lightbox__close:hover svg { transform: rotate(180deg); } }
.lightbox__close:focus-visible svg { transform: rotate(180deg); }

/* ---------- Viewer: one full-screen <dialog> (built by openViewer) ----------
   Over a pure blur of the page: the photo as large as the screen allows WITH its controls on it (X in the corner, round step
   buttons at the sides — blue, because the geometry chart is white), and small thumbnails of the photos at the bottom. Stepping slides
   the photo out sideways and the next one in (the gallery's movement). Click the photo: zoom 2.5× with the pointer choosing the
   visible area; click again: back. */
.viewer { --thumb-h: clamp(2.4rem, 4.4vw, 4.2rem); width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: hidden; }
.viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.viewer::backdrop { background: transparent; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.viewer--single { --thumb-h: 0px; }
.viewer__stage { display: grid; place-items: center; min-height: 0; padding: var(--card-inset); }
.viewer__stage:focus { outline: none; }
.viewer__pic { position: relative; display: grid; max-width: 100%; max-height: 100%; cursor: zoom-in; touch-action: pan-y; --zx: 50%; --zy: 50%; }
.viewer__pic.is-zoomed { cursor: zoom-out; touch-action: none; }
.viewer__slides { display: grid; }
.viewer__slide { grid-area: 1 / 1; display: grid; place-items: center; }   /* the leaving and the arriving photo share the cell while they slide */
.viewer__slide.is-leaving { pointer-events: none; }
.viewer__media {
  display: block; max-width: calc(100vw - 2 * var(--card-inset)); max-height: calc(100dvh - var(--thumb-h) - 4 * var(--card-inset));
  object-fit: contain; transform-origin: var(--zx) var(--zy); transition: transform var(--dur-2) var(--ease-out);
}
.viewer__pic.is-zoomed .viewer__media { transform: scale(2.5); }
.viewer__media--placeholder {
  display: grid; place-items: center; aspect-ratio: 1.51;
  width: min(calc(100vw - 2 * var(--card-inset)), calc((100dvh - var(--thumb-h) - 4 * var(--card-inset)) * 1.51));
}
.viewer .carousel__btn { top: 50%; }
.viewer__thumbs { display: flex; justify-content: safe center; gap: calc(var(--marquee-gap) * 0.7); margin: 0; padding: 0 var(--card-inset) var(--card-inset); list-style: none; overflow-x: auto; }
.viewer__thumbs > li { flex: 0 0 auto; }
.viewer__thumb { position: relative; display: grid; place-items: center; height: var(--thumb-h); aspect-ratio: 1.51; padding: 0; border: 0; cursor: pointer; }
/* the current thumbnail: a blue ring drawn INSIDE it (over the photo's edge), so the row's overflow can never cut it */
.viewer__thumb::after { content: ""; position: absolute; inset: 0; border: calc(var(--rim) * 1.4) solid transparent; border-radius: inherit; pointer-events: none; transition: border-color var(--dur-1) var(--ease-out); }
.viewer__thumb.is-current::after { border-color: var(--blue-500); }

/* the blur behind a photo pop-up comes with the photo as it grows out of its thumbnail, and goes with it when it shrinks back (main.js: popIn / closePop) */
.lightbox[open]::backdrop, .viewer[open]::backdrop, .sheet[open]::backdrop { animation: backdrop-in var(--dur-3) var(--ease-out); }
.lightbox.is-closing::backdrop, .viewer.is-closing::backdrop, .sheet.is-closing::backdrop { animation: backdrop-out var(--dur-2) var(--ease-out) forwards; }
@keyframes backdrop-in { from { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes backdrop-out { to { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .lightbox::backdrop, .viewer::backdrop, .sheet::backdrop { animation: none !important; } }

/* ---------- Sheet: a text pop-up (built by openSheet) ----------
   A blue pill-2 panel over a pure blur, as wide as the page's content (the same width as .container = content column + gap + buy panel): a wide
   photo (pill 3) with the X (pill 3) beside it, an opening sentence in bold, and the features run together with bullets. */
.sheet { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: hidden; }
.sheet[open] { display: grid; place-items: center; }
.sheet::backdrop { background: transparent; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.sheet__panel { position: relative; width: min(100% - 2 * var(--gutter), max(var(--container-share), 40rem), var(--container-max)); max-height: calc(100dvh - 2 * var(--edge)); overflow: hidden; display: grid; }
.sheet__body { overflow-y: auto; max-height: calc(100dvh - 2 * var(--edge)); padding: var(--box-pad); display: grid; gap: var(--box-pad); align-content: start; }
.sheet__body:focus { outline: none; }
.sheet__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--box-pad); align-items: start; }
.sheet__top .lightbox__close { position: static; }   /* the X sits beside the photo, not over it */
.sheet__fig { aspect-ratio: 1646 / 926; }   /* the WHOLE photo (its own proportion, never cropped), across the full width beside the X; the panel scrolls if it is taller than the window */
.sheet__lead { margin: 0; }
.sheet__list { margin: 0; padding: 0; list-style: none; }
.sheet__list li { display: inline; }
.sheet__list li:not(:last-child)::after { content: "\00a0•"; }   /* a bullet closes each item, so a line never starts with one */
/* Article pop-up (openArticle, .sheet.sheet--article): the same panel, with a big SQUARE photo fixed at the left (~42%) while the title + text scroll at the right;
   one column on phones (the photo on top). The X sits in the panel's top-right corner. */
.sheet--article .sheet__body { display: block; }
.article { display: grid; gap: var(--box-pad); }
.article__fig { aspect-ratio: 1; }
.article__text { display: grid; gap: 0.9em; align-content: start; min-width: 0; }
.article__text > * { margin: 0; }
.article__title { padding-right: 2.4em; }   /* room for the X */
.article__author { margin-top: 0.4em; }
@media (min-width: 900px) {
  .article { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); align-items: start; }
  .article__fig { position: sticky; top: 0; }
}
@media (max-width: 899px) { .article__fig { max-width: 26rem; } }
/* on phones and tablets the pop-up keeps the desktop look, like the product page (same values as .pd / .viewer in produto-detalhe.css): ~20px radii and larger text floors */
@media (max-width: 1024px) {
  .sheet {
    --pill-2: clamp(18px, 5.3vw, 22px); --pill-3: calc(var(--pill-2) / 2);
    --fs-0: clamp(0.95rem, 1.5vw, 1.1rem); --fs-1: clamp(1.05rem, 2.6vw, 1.35rem); --fs-2: clamp(1.15rem, 2.8vw, 1.5rem);
    --fs-3: clamp(1.45rem, 3.4vw, 1.9rem); --fs-4: clamp(1.9rem, 4.6vw, 2.6rem);
  }
  .sheet .lightbox__close { font-size: 1.3rem; }
}

/* ---------- Choice options: .opt (a button in a [data-choice] group) + .swatch (a color) ----------
   .opt .pill-3 .fill-white .flood .flood-liquid .flood-select (pill 3: it sits in a blue pill-2 panel): white with blue text; hovering only underlines the text (.link-host);
   choosing it opens the blue flood from the click (initChoice), the rim stays white, the text turns white.
   .swatch .pill-capsule: a product color, a tall capsule (≈ 1 : 3.2) in one row of --sw-cols (8) equal columns.
   Hover: a thin white ring; chosen: the same ring, thicker. */
.opt { display: grid; align-content: start; justify-items: start; width: 100%; aspect-ratio: 1; padding: 0.3em 0.35em; border: 0; text-align: left; cursor: pointer; }
.opt > span { display: block; }
.opt--line { display: block; aspect-ratio: auto; padding: 0.45em 0.6em; }   /* the sizes: "Aro 26" on one line, a short button (the gears keep the two-line square) */
.opt--line > span { display: inline; }
.opt--card { display: grid; gap: 0.05em; aspect-ratio: auto; padding: 0.25em 0.36em 0.4em; }   /* a model: a full-width card, a bold title over its text (the Quadro's models) */
.flood-select:not(.is-flooded):focus-visible::before { clip-path: circle(0% at calc(var(--fx) - var(--rim)) calc(var(--fy) - var(--rim))); }   /* keyboard focus alone does not flood a choice */
.fill-white.flood-select:not(.is-flooded):focus-visible { color: var(--blue-500); }
.swatches { --sw-cols: 8; display: grid; grid-template-columns: repeat(var(--sw-cols), minmax(0, 1fr)); column-gap: calc(var(--marquee-gap) * 0.7); }   /* one row of tall pills; fewer colors keep the same width */
.swatch { position: relative; width: 100%; aspect-ratio: 29 / 92; padding: 0; border: 0; cursor: pointer; }   /* proportion measured on the sketch */
.swatch:focus-visible { outline: none; }   /* the ring below is its focus mark */
/* Two rings drawn around the color and animated only with opacity + scale (smooth — an outline width would step pixel by pixel):
   ::before = the thin hover ring, ::after = the thick ring of the chosen color, which contracts onto the color as it appears. */
.swatch::before, .swatch::after {
  content: ""; position: absolute; border-radius: var(--pill-capsule); pointer-events: none; opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.swatch::before { inset: calc(var(--rim) * -1.7); border: calc(var(--rim) * 0.5) solid var(--color-white); transform: scale(0.9); }
.swatch::after { inset: calc(var(--rim) * -2.4); border: calc(var(--rim) * 1.2) solid var(--color-white); transform: scale(0.84); }
@media (hover: hover) { .swatch:hover::before { opacity: 1; transform: none; } }
.swatch:focus-visible::before { opacity: 1; transform: none; }
.swatch[aria-checked="true"]::before { opacity: 0; }
.swatch[aria-checked="true"]::after { opacity: 1; transform: none; }

/* Pop: a small window that opens inside its container from a button (.pop .pill-3 .fill-white .text-fine; the container is position: relative,
   the window sits under the button). Fades and grows in from the button's corner (--dur-2 --ease-out); while closed it is out of the tab order and
   the accessibility tree (visibility). The button toggles .is-open. */
.pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.4em); z-index: 6; padding: 0.8em 0.95em;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-0.4em) scale(0.97); transform-origin: top right;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.pop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.pop p { margin: 0 0 0.35em; max-width: none; }
.pop p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .pop { transition: none; } }

/* a label that lights its .link-line when the whole button / tile is hovered or focused (text-only hover) */
@media (hover: hover) { .link-host:hover .link-line { background-size: 100% 0.07em; } }
.link-host:focus-visible .link-line { background-size: 100% 0.07em; }

/* the icon of a call-to-action label (the WhatsApp button) and the one glow of the site */
.cta__label--icon { display: inline-flex; align-items: center; gap: 0.4em; }
.cta__label--icon svg { flex: none; width: 1.1em; height: 1.1em; }
.cta--glow { box-shadow: var(--glow); }

/* the WhatsApp buy button (.cta.cta--wa.cta--glow.flood-liquid + .pill-3 .fill-white .text-ui-bold — pill 3, it sits in the blue pill-2 panel; ≈ 1.85em tall, as in the sketch; renderWhatsappCtaInner): no knob — the
   WhatsApp mark at the left plays it. Hover: the blue flood is born at the mark's handset (a fixed-origin circle, the gradient comes from
   .flood-liquid), the handset swells, everything turns white, the label slides to where the mark was and a second mark slides in from the
   right where the arrow would. */
.cta--wa { --wa: 0.95em; min-height: calc(var(--wa) + 2 * var(--btn-m)); padding-left: calc(var(--wa) + 2.2 * var(--btn-m)); }
.cta--wa .wa-logo { position: absolute; left: calc(var(--btn-m) - var(--rim)); top: 50%; width: var(--wa); height: var(--wa); margin-top: calc(var(--wa) / -2); }
.cta--wa .wa-logo svg { display: block; width: 100%; height: 100%; }
.cta--wa .arrow { --arrow-size: var(--wa); }
.cta--wa .arrow svg { width: 100%; height: 100%; }
.cta--wa::before {
  content: ""; position: absolute; inset: var(--rim); z-index: -1; border-radius: calc(var(--r) - var(--rim));
  clip-path: circle(0% at calc(var(--btn-m) + var(--wa) / 2 - var(--rim)) 50%);
  transition: clip-path var(--dur-2) var(--ease-out);
}
.cta--wa .wa-logo { transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .cta--wa:hover::before { clip-path: circle(160% at calc(var(--btn-m) + var(--wa) / 2 - var(--rim)) 50%); }
  .cta--wa:hover .wa-logo { transform: scale(2.4); opacity: 0; }   /* the mark swells into the flood, and the label takes its place */
  .cta--wa:hover .cta__label { transform: translateX(calc(-1 * (var(--wa) + 1.2 * var(--btn-m)))); }
}
.cta--wa:focus-visible::before { clip-path: circle(160% at calc(var(--btn-m) + var(--wa) / 2 - var(--rim)) 50%); }
.cta--wa:focus-visible .wa-logo { transform: scale(2.4); opacity: 0; }
.cta--wa:focus-visible .cta__label { transform: translateX(calc(-1 * (var(--wa) + 1.2 * var(--btn-m)))); }


/* ---------- Hero: .hero .pill-1 .fill-black .on-dark ---------- */
.hero {
  position: relative; display: grid; isolation: isolate; overflow: hidden;
  /* the hero always ends inside the first screen: at most the window minus a 12px margin above and below */
  min-height: clamp(30rem, 52vw, calc(100svh - 24px)); margin: 12px 12px 0;
}
.hero__media { position: absolute; inset: -6% 0; z-index: -1; will-change: transform; }   /* parallax layer */
.hero__media .img { object-position: 50% 45%; }
.hero__inner {
  container-type: inline-size; /* lets the title size itself from the space it actually has (cqw) */
  align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem 2rem;
  padding: 8rem clamp(1.25rem, 5vw, 7rem) clamp(1.25rem, 3.5vw, 4.5rem);
}
/* .hero__title + .text-display .text-upper. Always two lines: the widest line of any headline phrase
   ("SUSTENTÁVEL DO MUNDO") is ~12.74em, so the display size is capped at (space available) / 12.9 —
   the full row on small screens, or the row minus the COMPRE + Instagram buttons (~7.7 × --fs-4) on desktop */
.hero__title {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: calc(var(--lh) * 2em); max-width: 14em;
  font-size: min(var(--fs-5), calc(100cqw / 12.9));
}
@media (min-width: 1025px) {
  .hero__inner { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .hero__title { font-size: min(var(--fs-5), calc((100cqw - 7.7 * var(--fs-4) - 2rem) / 12.9)); }
}
.hero__title-text { display: block; }
.hero__cta { display: flex; align-items: center; flex: 0 0 auto; gap: clamp(0.4rem, 0.8vw, 1rem); }

/* rotating phrase ("polimérica" → "ecológica" → …); the visible window is one line tall (tracks --lh); padding/negative
   margin still reserve clip room for accents beyond that line, cancelled out of the layout */
.rotator {
  position: relative; display: inline-block; overflow: hidden; vertical-align: bottom;
  height: calc(var(--lh) * 1em); padding: 0.14em 0 0.1em; margin: -0.14em 0 -0.1em; box-sizing: content-box;
  transition: width var(--dur-2) var(--ease-out);
}
.rotator__word {
  position: absolute; left: 0; top: 0.14em; white-space: nowrap;
  transform: translateY(130%);
  transition: transform var(--dur-2) var(--ease-out);
}
.rotator__word.is-in { transform: translateY(0); }
.rotator__word.is-out { transform: translateY(-130%); }

/* on-load stagger */
.js .hero [data-hero-in] {
  animation: rise var(--dur-3) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 120ms + 100ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }


/* ---------- Marquees (feature pills and photos) ---------- */
.marquee { overflow: hidden; }
.marquee + .marquee { margin-top: var(--marquee-gap); }   /* rows are spaced with the same value as the items */
.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-dur, 40s) linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; gap: var(--marquee-gap); margin: 0; padding: 0 var(--marquee-gap) 0 0; list-style: none; }
@keyframes marquee { to { transform: translateX(calc(var(--marquee-dist) * -1)); } }

/* .feature-pill + .pill-2 .fill-liquid .text-ui-bold .text-center */
.feature-pill { display: grid; place-items: center; flex: 0 0 auto; width: 15em; min-height: 3.6em; padding: 0.6em 1em; }
/* .photo + .window .pill-2 (a post of the Instagram strip, built by renderPhoto): the photo fills it and an invisible link covers it, so the whole card opens
   the post; a plain white Instagram mark (.photo__ig, not a button, no motion) sits at its top right; without a photo yet it is a red placeholder
   (+ .fill-placeholder .text-small). */
.photo { position: relative; flex: 0 0 auto; width: clamp(10rem, 21.5vw, 32rem); aspect-ratio: 1.08; }
.photo.fill-placeholder { display: grid; place-items: center; }
.photo__link { position: absolute; inset: 0; z-index: 1; }
.photo__ig { position: absolute; top: var(--card-inset); right: var(--card-inset); z-index: 2; width: max(1em, 1.4rem); height: max(1em, 1.4rem); color: var(--color-white); pointer-events: none; }
.photo__ig svg { display: block; width: 100%; height: 100%; }

/* ---------- Stats panel: .stats .pill-1 .fill-liquid ----------
   Rows alternate as in the sketch: 1st, 3rd, 5th, 7th are white pills (.fill-white) with blue text;
   2nd, 4th, 6th are plain white text straight on the blue panel (no fill). */
.stats { display: grid; gap: clamp(0.4rem, 0.9vw, 1.2rem); padding: clamp(0.6rem, 1.3vw, 1.8rem); }
.stat {                             /* + .pill-2 .text-ui */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.15em 1em; padding: 0.3em 0.8em;
}
.stat__value { font-variant-numeric: tabular-nums; }   /* + .text-display */
.stat__label { text-align: right; }
@media (max-width: 639px) {         /* mobile: number on top, its text underneath, both left-aligned */
  .stat { flex-direction: column; align-items: flex-start; gap: 0.1em; }
  .stat__label { text-align: left; }
}
/* a table (.stats--table: the components list of a product; the panel is pill 2, the white rows pill 3): every row has the same height and
   the rows touch, so a white row is as tall as the plain space between two white rows — a rounded rectangle, not a capsule. One line per
   row, part left and maker right, no counters, no motion — on phones too */
.stats--table { gap: 0; padding: clamp(0.5rem, 1vw, 1.2rem); }
.stats--table .stat { align-items: center; min-height: max(1.7em, 2.6rem); padding-block: 0; }
@media (max-width: 639px) {
  .stats--table .stat { flex-direction: row; align-items: center; gap: 0.15em 1em; }
  .stats--table .stat__label { text-align: right; }
}
/* the one-row variant (.stat--text): a paragraph instead of part + maker, wrapping over as many lines as it needs */
.stats--table .stat--text { display: block; padding-block: var(--btn-m); }
.stats--table .stat--text p { margin: 0; text-align: left; max-width: none; }


/* ---------- Footer: .site-footer .pill-1-top .fill-liquid .text-small .on-dark ---------- */
.site-footer { margin-top: clamp(1rem, 1vw, 2rem); padding: clamp(2rem, 5vw, 6rem) 0 1.5rem; }
.footer__nav { grid-column: span 12; display: flex; gap: 2em; }
.footer__nav ul { display: grid; gap: 0.3em; margin: 0; padding: 0; list-style: none; align-content: start; }
.footer__nav a {
  text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size var(--dur-2) var(--ease-out);
}
@media (hover: hover) { .footer__nav a:hover { background-size: 100% 1px; } }
.footer__brand { display: grid; justify-items: center; gap: 1em; margin-top: clamp(2rem, 6vw, 8rem); text-align: center; }
.footer__brand img { width: min(80%, 55vw); height: auto; filter: brightness(0) invert(1); }
@media (min-width: 640px) {
  .footer__cta { grid-column: span 7; }
  .footer__nav { grid-column: span 5; justify-content: flex-end; }
}
@media (min-width: 1025px) {
  .footer__cta { grid-column: 1 / span 7; }
  .footer__nav { grid-column: 9 / span 4; justify-content: flex-start; }
}


/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-3) var(--ease-out) var(--reveal-delay, 0ms), transform var(--dur-3) var(--ease-out) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* The children of a reveal group are hidden from the very first paint (before JS marks them with data-reveal), so there is no flash
   of visible content that then disappears and fades in again. If the script never runs, a failsafe shows them after 3s. */
.js [data-reveal-group] > :not([data-reveal]) { opacity: 0; transform: translateY(24px); animation: reveal-failsafe 1ms 3s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-group] > :not([data-reveal]) { opacity: 1; transform: none; transition: none; animation: none; }
  .js .hero [data-hero-in] { animation: none; }
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .pill, .cta, .kcard, .knob, .arrow, .btn, .pill__label, .cta__label, .link-line, .roll__track, .tabs__tab, .more__icon, [data-tilt], .nav a, .nav__pill, .dots, .footer__nav a,
  .flood, .flood::before, .carousel__track, .step__track, .lightbox__close svg, .viewer__media, .acc__icon, .acc__v, .acc__panel { transition: none; }
}