/* Theme Name: fpm-international-water Template: hello-elementor Version: 1.0.0 Text Domain: hello-elementor-child */ /* Project components only: spacing, type and colour belong to native controls and the kit; ec-base.css owns the resets. */ /* ==================================================================== motion: copied verbatim from the Home v2 comp (lines 26-56) and the Mobile comp (lines 28-32). .iwg-water / .iwg-bubbles / .iwg-rail-* are the comp's classes; the .iwg-wbtn selectors pair each .iwg-water rule with the of an Elementor Button widget, whose class lands on the widget wrapper (.iwg-wbtn + .iwg-wbtn--aqua|deep|pale|ink). Under prefers-reduced-motion the comp's own rule cuts every animation and transition. ==================================================================== */ /* ---- Water hover system (must live in CSS: inline camelCase bg props are ignored) ---- */ .iwg-water, .iwg-wbtn > .elementor-button, .gform_wrapper.gform-theme button.iwg-water { --iwg-h: 0px; position: relative; overflow: hidden; background-repeat: repeat-x; background-position: 0 100%; background-size: 120px var(--iwg-h); transition: background-size 900ms cubic-bezier(.25,.8,.3,1), color 300ms linear, background-color 200ms linear; animation: iwgWaveX 7s linear infinite; } .iwg-water:hover, .iwg-water:focus-visible, .iwg-wbtn > .elementor-button:hover, .iwg-wbtn > .elementor-button:focus-visible, .gform_wrapper.gform-theme button.iwg-water:hover, .gform_wrapper.gform-theme button.iwg-water:focus-visible { --iwg-h: 26%; } .iwg-water--aqua, .iwg-wbtn--aqua > .elementor-button, .gform_wrapper.gform-theme button.iwg-water--aqua { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2260%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2012%20Q%2015%202%2C%2030%2012%20T%2060%2012%20T%2090%2012%20T%20120%2012%20L120%2060%20L0%2060%20Z%22%20fill%3D%22%2357c5e0%22%2F%3E%3Cpath%20d%3D%22M0%2012%20Q%2015%202%2C%2030%2012%20T%2060%2012%20T%2090%2012%20T%20120%2012%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2234%22%20r%3D%222.4%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%2226%22%20r%3D%221.7%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.17%22%2F%3E%3Ccircle%20cx%3D%2283%22%20cy%3D%2242%22%20r%3D%222.1%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.15%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2230%22%20r%3D%221.5%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.13%22%2F%3E%3C%2Fsvg%3E"); } .iwg-water--deep, .iwg-wbtn--deep > .elementor-button, .gform_wrapper.gform-theme button.iwg-water--deep { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2260%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2012%20Q%2015%202%2C%2030%2012%20T%2060%2012%20T%2090%2012%20T%20120%2012%20L120%2060%20L0%2060%20Z%22%20fill%3D%22%23004274%22%2F%3E%3Cpath%20d%3D%22M0%2012%20Q%2015%202%2C%2030%2012%20T%2060%2012%20T%2090%2012%20T%20120%2012%22%20fill%3D%22none%22%20stroke%3D%22%23a9dced%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2234%22%20r%3D%222.4%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%2226%22%20r%3D%221.7%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.17%22%2F%3E%3Ccircle%20cx%3D%2283%22%20cy%3D%2242%22%20r%3D%222.1%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.15%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2230%22%20r%3D%221.5%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.13%22%2F%3E%3C%2Fsvg%3E"); } .iwg-water--pale, .iwg-wbtn--pale > .elementor-button, .gform_wrapper.gform-theme button.iwg-water--pale { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2260%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2012%20Q%2015%202%2C%2030%2012%20T%2060%2012%20T%2090%2012%20T%20120%2012%20L120%2060%20L0%2060%20Z%22%20fill%3D%22%23a9dced%22%2F%3E%3Cpath%20d%3D%22M0%2012%20Q%2015%202%2C%2030%2012%20T%2060%2012%20T%2090%2012%20T%20120%2012%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2234%22%20r%3D%222.4%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%2226%22%20r%3D%221.7%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.17%22%2F%3E%3Ccircle%20cx%3D%2283%22%20cy%3D%2242%22%20r%3D%222.1%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.15%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2230%22%20r%3D%221.5%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.13%22%2F%3E%3C%2Fsvg%3E"); } .iwg-water--ink, .iwg-wbtn--ink > .elementor-button, .gform_wrapper.gform-theme button.iwg-water--ink { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2260%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2012%20Q%2015%202%2C%2030%2012%20T%2060%2012%20T%2090%2012%20T%20120%2012%20L120%2060%20L0%2060%20Z%22%20fill%3D%22%2308222f%22%2F%3E%3Cpath%20d%3D%22M0%2012%20Q%2015%202%2C%2030%2012%20T%2060%2012%20T%2090%2012%20T%20120%2012%22%20fill%3D%22none%22%20stroke%3D%22%2357c5e0%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2234%22%20r%3D%222.4%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%2226%22%20r%3D%221.7%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.17%22%2F%3E%3Ccircle%20cx%3D%2283%22%20cy%3D%2242%22%20r%3D%222.1%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.15%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2230%22%20r%3D%221.5%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.13%22%2F%3E%3C%2Fsvg%3E"); } @keyframes iwgWaveX { from { background-position-x: -120px; } to { background-position-x: 0; } } .iwg-rail-item { position: relative; } .iwg-rail-label { opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity 200ms linear, transform 240ms cubic-bezier(.16,.9,.24,1); } .iwg-rail-item:hover .iwg-rail-label, .iwg-rail-item:focus-visible .iwg-rail-label { opacity: 1; transform: translateX(0); } /* Bubbles: hidden at rest, rising only while hovered. */ .iwg-bubbles { position: relative; background-image: none !important; } .iwg-bubbles::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-repeat: repeat-x; background-size: 230px 620px; background-position: 0 130%; opacity: 0; transition: opacity 420ms linear; } .iwg-bubbles:hover::before, .iwg-bubbles:focus-visible::before { opacity: 1; animation: iwgBubbleUp 5.5s linear infinite; } @keyframes iwgBubbleUp { from { background-position-y: -30%; } to { background-position-y: 130%; } } .iwg-bubbles--light::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22230%22%20height%3D%22620%22%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%22596%22%20r%3D%224.5%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.16%22%2F%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%22548%22%20r%3D%223%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.13%22%2F%3E%3Ccircle%20cx%3D%2297%22%20cy%3D%22584%22%20r%3D%225.5%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.14%22%2F%3E%3Ccircle%20cx%3D%22131%22%20cy%3D%22520%22%20r%3D%222.6%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%22168%22%20cy%3D%22566%22%20r%3D%223.8%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.11%22%2F%3E%3Ccircle%20cx%3D%22204%22%20cy%3D%22536%22%20r%3D%222.2%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22472%22%20r%3D%222.4%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.13%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%22438%22%20r%3D%224.2%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%22486%22%20r%3D%223%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%22152%22%20cy%3D%22424%22%20r%3D%225%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.13%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%22462%22%20r%3D%222.6%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.11%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22372%22%20r%3D%223.6%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22336%22%20r%3D%222.4%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22388%22%20r%3D%224.6%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.11%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%22330%22%20r%3D%223%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%22188%22%20cy%3D%22366%22%20r%3D%222.8%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.09%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%22268%22%20r%3D%224%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.11%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22232%22%20r%3D%222.6%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%22126%22%20cy%3D%22284%22%20r%3D%223.4%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%22166%22%20cy%3D%22240%22%20r%3D%224.4%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.09%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%22276%22%20r%3D%222.4%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%22168%22%20r%3D%223%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%2276%22%20cy%3D%22128%22%20r%3D%224.2%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.09%22%2F%3E%3Ccircle%20cx%3D%22116%22%20cy%3D%22180%22%20r%3D%222.6%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.11%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22136%22%20r%3D%223.6%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.08%22%2F%3E%3Ccircle%20cx%3D%22198%22%20cy%3D%22172%22%20r%3D%222.8%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.09%22%2F%3E%3Ccircle%20cx%3D%2256%22%20cy%3D%2272%22%20r%3D%223.4%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.09%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2236%22%20r%3D%222.4%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.08%22%2F%3E%3Ccircle%20cx%3D%22144%22%20cy%3D%2284%22%20r%3D%224%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.08%22%2F%3E%3Ccircle%20cx%3D%22186%22%20cy%3D%2244%22%20r%3D%222.6%22%20fill%3D%22%2357c5e0%22%20fill-opacity%3D%220.07%22%2F%3E%3C%2Fsvg%3E"); } .iwg-bubbles--dark::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22230%22%20height%3D%22620%22%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%22596%22%20r%3D%224.5%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.16%22%2F%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%22548%22%20r%3D%223%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.13%22%2F%3E%3Ccircle%20cx%3D%2297%22%20cy%3D%22584%22%20r%3D%225.5%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.14%22%2F%3E%3Ccircle%20cx%3D%22131%22%20cy%3D%22520%22%20r%3D%222.6%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%22168%22%20cy%3D%22566%22%20r%3D%223.8%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.11%22%2F%3E%3Ccircle%20cx%3D%22204%22%20cy%3D%22536%22%20r%3D%222.2%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22472%22%20r%3D%222.4%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.13%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%22438%22%20r%3D%224.2%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%22486%22%20r%3D%223%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%22152%22%20cy%3D%22424%22%20r%3D%225%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.13%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%22462%22%20r%3D%222.6%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.11%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22372%22%20r%3D%223.6%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22336%22%20r%3D%222.4%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22388%22%20r%3D%224.6%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.11%22%2F%3E%3Ccircle%20cx%3D%22148%22%20cy%3D%22330%22%20r%3D%223%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%22188%22%20cy%3D%22366%22%20r%3D%222.8%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.09%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%22268%22%20r%3D%224%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.11%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22232%22%20r%3D%222.6%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%22126%22%20cy%3D%22284%22%20r%3D%223.4%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.12%22%2F%3E%3Ccircle%20cx%3D%22166%22%20cy%3D%22240%22%20r%3D%224.4%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.09%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%22276%22%20r%3D%222.4%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%2234%22%20cy%3D%22168%22%20r%3D%223%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%2276%22%20cy%3D%22128%22%20r%3D%224.2%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.09%22%2F%3E%3Ccircle%20cx%3D%22116%22%20cy%3D%22180%22%20r%3D%222.6%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.11%22%2F%3E%3Ccircle%20cx%3D%22156%22%20cy%3D%22136%22%20r%3D%223.6%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.08%22%2F%3E%3Ccircle%20cx%3D%22198%22%20cy%3D%22172%22%20r%3D%222.8%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.09%22%2F%3E%3Ccircle%20cx%3D%2256%22%20cy%3D%2272%22%20r%3D%223.4%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.09%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%2236%22%20r%3D%222.4%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.08%22%2F%3E%3Ccircle%20cx%3D%22144%22%20cy%3D%2284%22%20r%3D%224%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.08%22%2F%3E%3Ccircle%20cx%3D%22186%22%20cy%3D%2244%22%20r%3D%222.6%22%20fill%3D%22%23a9dced%22%20fill-opacity%3D%220.07%22%2F%3E%3C%2Fsvg%3E"); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Mobile comp: touch has no hover, so presses carry the interaction (phone tier only). */ @media (max-width: 767px) { /* Touch feedback: mobile has no hover, so press states carry the interaction. */ .iwg-tap { transition: background-color 160ms linear; } .iwg-tap:active { background-color: #eef4f8 !important; } .iwg-tap-dark:active { background-color: #0d3552 !important; } .iwg-water:active, .iwg-wbtn > .elementor-button:active, .gform_wrapper.gform-theme button.iwg-water:active { --iwg-h: 30%; } } /* ==================================================================== icon masks (header glyphs follow currentColor) ==================================================================== */ :root { --iwg-icon-arrow: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%2012h14%27/%3E%3Cpath%20d=%27m12%205%207%207-7%207%27/%3E%3C/svg%3E"); --iwg-wave: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-0.6%20-0.6%2023.2%2017.2%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.2%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M0%203%20C%203.7%200.6000000000000001%2C%207.3%205.4%2C%2011%203%20C%2014.7%200.6000000000000001%2C%2018.3%205.4%2C%2022%203%27/%3E%3Cpath%20d=%27M0%208%20C%203.7%205.6%2C%207.3%2010.4%2C%2011%208%20C%2014.7%205.6%2C%2018.3%2010.4%2C%2022%208%27/%3E%3Cpath%20d=%27M0%2013%20C%203.7%2010.6%2C%207.3%2015.4%2C%2011%2013%20C%2014.7%2010.6%2C%2018.3%2015.4%2C%2022%2013%27/%3E%3C/svg%3E"); --iwg-wave-m: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-0.6%20-0.6%2023.2%2017.2%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.4%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M0%203%20C%203.7%200.6000000000000001%2C%207.3%205.4%2C%2011%203%20C%2014.7%200.6000000000000001%2C%2018.3%205.4%2C%2022%203%27/%3E%3Cpath%20d=%27M0%208%20C%203.7%205.6%2C%207.3%2010.4%2C%2011%208%20C%2014.7%205.6%2C%2018.3%2010.4%2C%2022%208%27/%3E%3Cpath%20d=%27M0%2013%20C%203.7%2010.6%2C%207.3%2015.4%2C%2011%2013%20C%2014.7%2010.6%2C%2018.3%2015.4%2C%2022%2013%27/%3E%3C/svg%3E"); --iwg-icon-search: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2711%27%20cy=%2711%27%20r=%278%27/%3E%3Cpath%20d=%27m21%2021-4.3-4.3%27/%3E%3C/svg%3E"); --iwg-icon-x: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M18%206%206%2018%27/%3E%3Cpath%20d=%27m6%206%2012%2012%27/%3E%3C/svg%3E"); } /* ==================================================================== kit type steps for theme-printed markup (drawer, search panel): the same variables a bound widget uses ==================================================================== */ html body .iwg-type-micro_label { font-family: var(--e-global-typography-intwater_micro_label-font-family); font-size: var(--e-global-typography-intwater_micro_label-font-size); font-weight: var(--e-global-typography-intwater_micro_label-font-weight); text-transform: var(--e-global-typography-intwater_micro_label-text-transform); line-height: var(--e-global-typography-intwater_micro_label-line-height); letter-spacing: var(--e-global-typography-intwater_micro_label-letter-spacing); } html body .iwg-type-drawer_label { font-family: var(--e-global-typography-intwater_drawer_label-font-family); font-size: var(--e-global-typography-intwater_drawer_label-font-size); font-weight: var(--e-global-typography-intwater_drawer_label-font-weight); text-transform: var(--e-global-typography-intwater_drawer_label-text-transform); line-height: var(--e-global-typography-intwater_drawer_label-line-height); letter-spacing: var(--e-global-typography-intwater_drawer_label-letter-spacing); } html body .iwg-type-drawer_item { font-family: var(--e-global-typography-intwater_drawer_item-font-family); font-size: var(--e-global-typography-intwater_drawer_item-font-size); font-weight: var(--e-global-typography-intwater_drawer_item-font-weight); text-transform: var(--e-global-typography-intwater_drawer_item-text-transform); line-height: var(--e-global-typography-intwater_drawer_item-line-height); letter-spacing: var(--e-global-typography-intwater_drawer_item-letter-spacing); } html body .iwg-type-drawer_note { font-family: var(--e-global-typography-intwater_drawer_note-font-family); font-size: var(--e-global-typography-intwater_drawer_note-font-size); font-weight: var(--e-global-typography-intwater_drawer_note-font-weight); text-transform: var(--e-global-typography-intwater_drawer_note-text-transform); line-height: var(--e-global-typography-intwater_drawer_note-line-height); letter-spacing: var(--e-global-typography-intwater_drawer_note-letter-spacing); } html body .iwg-type-drawer_utility { font-family: var(--e-global-typography-intwater_drawer_utility-font-family); font-size: var(--e-global-typography-intwater_drawer_utility-font-size); font-weight: var(--e-global-typography-intwater_drawer_utility-font-weight); text-transform: var(--e-global-typography-intwater_drawer_utility-text-transform); line-height: var(--e-global-typography-intwater_drawer_utility-line-height); letter-spacing: var(--e-global-typography-intwater_drawer_utility-letter-spacing); } html body .iwg-type-drawer_title { font-family: var(--e-global-typography-intwater_drawer_title-font-family); font-size: var(--e-global-typography-intwater_drawer_title-font-size); font-weight: var(--e-global-typography-intwater_drawer_title-font-weight); text-transform: var(--e-global-typography-intwater_drawer_title-text-transform); line-height: var(--e-global-typography-intwater_drawer_title-line-height); letter-spacing: var(--e-global-typography-intwater_drawer_title-letter-spacing); } html body .iwg-type-drawer_name { font-family: var(--e-global-typography-intwater_drawer_name-font-family); font-size: var(--e-global-typography-intwater_drawer_name-font-size); font-weight: var(--e-global-typography-intwater_drawer_name-font-weight); text-transform: var(--e-global-typography-intwater_drawer_name-text-transform); line-height: var(--e-global-typography-intwater_drawer_name-line-height); letter-spacing: var(--e-global-typography-intwater_drawer_name-letter-spacing); } html body .iwg-type-utility_nav { font-family: var(--e-global-typography-intwater_utility_nav-font-family); font-size: var(--e-global-typography-intwater_utility_nav-font-size); font-weight: var(--e-global-typography-intwater_utility_nav-font-weight); text-transform: var(--e-global-typography-intwater_utility_nav-text-transform); line-height: var(--e-global-typography-intwater_utility_nav-line-height); letter-spacing: var(--e-global-typography-intwater_utility_nav-letter-spacing); } html body .iwg-type-link_cta { font-family: var(--e-global-typography-intwater_link_cta-font-family); font-size: var(--e-global-typography-intwater_link_cta-font-size); font-weight: var(--e-global-typography-intwater_link_cta-font-weight); text-transform: var(--e-global-typography-intwater_link_cta-text-transform); line-height: var(--e-global-typography-intwater_link_cta-line-height); letter-spacing: var(--e-global-typography-intwater_link_cta-letter-spacing); } html body .iwg-type-btn_doc { font-family: var(--e-global-typography-intwater_btn_doc-font-family); font-size: var(--e-global-typography-intwater_btn_doc-font-size); font-weight: var(--e-global-typography-intwater_btn_doc-font-weight); text-transform: var(--e-global-typography-intwater_btn_doc-text-transform); line-height: var(--e-global-typography-intwater_btn_doc-line-height); letter-spacing: var(--e-global-typography-intwater_btn_doc-letter-spacing); } html body .iwg-type-search_header { font-family: var(--e-global-typography-intwater_search_header-font-family); font-size: var(--e-global-typography-intwater_search_header-font-size); font-weight: var(--e-global-typography-intwater_search_header-font-weight); text-transform: var(--e-global-typography-intwater_search_header-text-transform); line-height: var(--e-global-typography-intwater_search_header-line-height); letter-spacing: var(--e-global-typography-intwater_search_header-letter-spacing); } html body .iwg-type-section_intro { font-family: var(--e-global-typography-intwater_section_intro-font-family); font-size: var(--e-global-typography-intwater_section_intro-font-size); font-weight: var(--e-global-typography-intwater_section_intro-font-weight); text-transform: var(--e-global-typography-intwater_section_intro-text-transform); line-height: var(--e-global-typography-intwater_section_intro-line-height); letter-spacing: var(--e-global-typography-intwater_section_intro-letter-spacing); } html body .iwg-type-card_title { font-family: var(--e-global-typography-intwater_card_title-font-family); font-size: var(--e-global-typography-intwater_card_title-font-size); font-weight: var(--e-global-typography-intwater_card_title-font-weight); text-transform: var(--e-global-typography-intwater_card_title-text-transform); line-height: var(--e-global-typography-intwater_card_title-line-height); letter-spacing: var(--e-global-typography-intwater_card_title-letter-spacing); } html body .iwg-type-btn_primary { font-family: var(--e-global-typography-intwater_btn_primary-font-family); font-size: var(--e-global-typography-intwater_btn_primary-font-size); font-weight: var(--e-global-typography-intwater_btn_primary-font-weight); text-transform: var(--e-global-typography-intwater_btn_primary-text-transform); line-height: var(--e-global-typography-intwater_btn_primary-line-height); letter-spacing: var(--e-global-typography-intwater_btn_primary-letter-spacing); } /* ==================================================================== components ==================================================================== */ /* Accordion panels measure themselves: iwg.js writes the pixel max-height, this only stops the first-paint animation. */ html body .iwg-acc__panel.iwg-no-transition, html body .iwg-fcol__body.iwg-no-transition { transition: none; } /* ---- header ----------------------------------------------------- */ /* Optimized markup leaves a line-box strut under an inline-block button, so the widget is taller than its button and the bar centres the wrong box. Zero line-height on the widget removes it without a display rule (a display rule would outrank Elementor's per-tier hide classes). */ .elementor-location-header .iwg-header .elementor-widget-button { line-height: 0; } /* Utility bar: the current section's item is blue (News comp:135) through the menu's active colour; the Customer portal item is blue (Home v2:164); the menu item carries the class. */ .elementor-location-header.elementor .elementor-element .elementor-nav-menu--main .iwg-util-portal > .elementor-item { color: var(--intwater-blue); } /* Menu button: the three-wave glyph (Home v2:169-173) drawn as a mask so it follows the button's colour and hover. */ html body .iwg-menu-toggle .elementor-button-content-wrapper { display: flex; align-items: center; gap: 16px; } html body .iwg-menu-toggle .elementor-button-content-wrapper::before { content: ''; flex: none; width: 29.5px; height: 21.5px; margin: -0.75px; background-color: currentColor; -webkit-mask: var(--iwg-wave) center / contain no-repeat; mask: var(--iwg-wave) center / contain no-repeat; } html body .iwg-menu-toggle--m .elementor-button-content-wrapper { flex-direction: column; gap: 5px; } /* Fixed touch targets of the Mobile comp header (Menu 52x52, search 48x48); a Button widget has no width or height control. */ html body .iwg-menu-toggle--m .elementor-button { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; } html body .iwg-search-icon .elementor-button { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; } html body .iwg-menu-toggle--m .elementor-button-content-wrapper::before { width: 27.4px; height: 20.2px; margin: -0.7px; -webkit-mask-image: var(--iwg-wave-m); mask-image: var(--iwg-wave-m); } /* Search button: lucide search, swapped for x while the panel is open (Home v2:182-185). */ html body .iwg-search-toggle .elementor-button-content-wrapper { display: flex; align-items: center; gap: 10px; } html body .iwg-search-toggle .elementor-button-content-wrapper::before, html body .iwg-search-icon .elementor-button-content-wrapper::before { content: ''; flex: none; width: 19px; height: 19px; background-color: currentColor; -webkit-mask: var(--iwg-icon-search) center / contain no-repeat; mask: var(--iwg-icon-search) center / contain no-repeat; } html body .iwg-search-toggle .elementor-button.is-active .elementor-button-content-wrapper::before { -webkit-mask-image: var(--iwg-icon-x); mask-image: var(--iwg-icon-x); } /* Mobile search: an icon-only square, its label kept for assistive tech. */ html body .iwg-search-icon .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html body .iwg-search-icon .elementor-button-content-wrapper::before { width: 21px; height: 21px; } /* Mobile header (Mobile comp:133): glass over the page while it sticks. */ @media (max-width: 767px) { .elementor-location-header .iwg-header { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-top: env(safe-area-inset-top); } } /* ---- header search panel ---------------------------------------- */ html body .iwg-search { overflow: hidden; max-height: 0; border-top: 1px solid transparent; background-color: var(--intwater-white); transition: max-height 320ms cubic-bezier(.16, .9, .24, 1), border-color 320ms linear; } html body .iwg-search.is-open, html body .iwg-search:target { max-height: 640px; border-top-color: var(--intwater-hairline); } html body .iwg-search__inner { max-width: 1440px; margin: 0 auto; padding: 0 40px 34px; } html body .iwg-search__bar { display: flex; align-items: center; gap: 16px; padding: 26px 0 18px; border-bottom: 1px solid var(--intwater-border-strong); } /* Header and drawer search keep the comp's hairline on focus (Home v2:190, Mobile comp); the field itself carries the visible focus state, a 2px ink ring, so it is never left with none. */ html body .iwg-search__bar .iwg-search__input:focus, html body .iwg-drawer__search-bar .iwg-drawer__search-input:focus { outline: none; box-shadow: none; } html body .iwg-search__bar .iwg-search__input:focus-visible, html body .iwg-drawer__search-bar .iwg-drawer__search-input:focus-visible { outline: 2px solid var(--intwater-ink); outline-offset: 2px; box-shadow: none; } html body .iwg-search__icon { display: flex; flex: none; color: var(--intwater-muted); } html body .iwg-search__input { flex: 1; min-width: 0; appearance: none; border: 0; outline: none; background: transparent; padding: 0; color: var(--intwater-ink); } html body .iwg-search__esc { appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--intwater-muted); transition: color 180ms linear; } html body .iwg-search__esc:hover { background-color: transparent; color: var(--intwater-blue); } html body .iwg-search__caption { margin: 22px 0 0; color: var(--intwater-muted); } html body .iwg-search__list { margin-top: 6px; max-height: 420px; overflow-y: auto; } html body .iwg-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 170px) 20px; gap: 24px; align-items: center; padding: 14px 12px; margin: 0 -12px; border-bottom: 1px solid var(--intwater-border-row); color: var(--intwater-ink); transition: background-color 180ms linear; } html body .iwg-result:hover, html body .iwg-result:focus-visible { background-color: var(--intwater-tint-hover); color: var(--intwater-ink); } html body .iwg-result__text { min-width: 0; } html body .iwg-result__title { display: block; } html body .iwg-result__meta { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--intwater-secondary); } html body .iwg-result__group { color: var(--intwater-blue); } html body .iwg-result__arrow { display: flex; justify-content: flex-end; color: var(--intwater-muted); } html body .iwg-search__none { margin: 26px 0 0; color: var(--intwater-secondary); } /* ---- drawer ----------------------------------------------------- */ html body .iwg-drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; opacity: 0; transition: opacity 200ms linear, visibility 0s linear 340ms; } /* :target is the no-script fallback for the header link href="#iwg-drawer". */ html body .iwg-drawer.is-open, html body .iwg-drawer:target { visibility: visible; pointer-events: auto; opacity: 1; transition: opacity 200ms linear, visibility 0s; } html body .iwg-drawer__scrim { position: absolute; inset: 0; background: var(--intwater-scrim); } html body .iwg-drawer__main { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; display: flex; flex-direction: column; width: min(460px, 52vw); min-width: 300px; box-sizing: border-box; background: var(--intwater-white); border-right: 1px solid var(--intwater-drawer-c); transform: translateX(-101%); transition: transform 320ms cubic-bezier(.16, .84, .2, 1); } html body .iwg-drawer.is-open .iwg-drawer__main, html body .iwg-drawer:target .iwg-drawer__main { transform: translateX(0); } html body .iwg-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 26px 30px; border-bottom: 1px solid var(--intwater-hairline); } html body .iwg-drawer__logo { display: flex; align-items: center; } html body .iwg-drawer__logo-img { display: block; height: 52px; width: auto; } html body .iwg-drawer__close { appearance: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 18px; background: transparent; border: 0; border-left: 1px solid var(--intwater-hairline); color: var(--intwater-ink); cursor: pointer; transition: background-color 180ms linear, color 180ms linear; } /* The comp draws the fill on hover only (Home v2:67); keyboard focus keeps the rest look plus the site focus ring. */ html body .iwg-drawer__close:hover { background-color: var(--intwater-tint-hover); color: var(--intwater-blue); } html body .iwg-drawer__search { display: none; } html body .iwg-drawer__nav { flex: 1; min-height: 0; overflow-y: auto; } html body .iwg-acc { border-bottom: 1px solid var(--intwater-hairline); } html body .iwg-acc__toggle { appearance: none; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: baseline; width: 100%; padding: 24px 30px; background: transparent; border: 0; border-radius: 0; cursor: pointer; text-align: left; color: var(--intwater-ink); } html body .iwg-acc__toggle:hover, html body .iwg-acc__toggle:focus-visible { background: var(--intwater-drawer-b); color: var(--intwater-ink); } html body .iwg-acc__caret { display: flex; justify-content: flex-end; color: var(--intwater-muted); transition: transform 240ms ease; } html body .iwg-acc.is-open .iwg-acc__caret { transform: rotate(180deg); } html body .iwg-acc__panel { overflow: hidden; max-height: 0; transition: max-height 300ms cubic-bezier(.16, .84, .2, 1); } /* Without iwg.js every section stays open. */ html:not(.iwg-js) .iwg-acc__panel { max-height: none; } html body .iwg-acc__inner { display: flex; flex-direction: column; padding: 0 30px 28px; } html body .iwg-acc__link { display: block; margin: 0 -12px; padding: 11px 12px; border-top: 1px solid var(--intwater-border-row); color: var(--intwater-nav); transition: background-color 180ms linear, color 180ms linear; } html body .iwg-acc__link:hover, html body .iwg-acc__link:focus-visible, html body .iwg-acc__link.is-active { background-color: var(--intwater-tint-hover); color: var(--intwater-blue); } html body .iwg-acc__link.is-active { background-color: var(--intwater-drawer-b); } html body .iwg-acc__link--cat { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: calc(100% + 24px); } html body .iwg-acc__chev { display: flex; flex: none; padding-right: 4px; } html body .iwg-acc__note { box-sizing: content-box; max-width: 34ch; margin: 18px 0 0; padding-left: 14px; border-left: 1px solid var(--intwater-note-rule); color: var(--intwater-faint); } html body .iwg-drawer__utility { display: none; } html body .iwg-drawer__foot { display: flex; flex-wrap: wrap; gap: 18px; padding: 22px 30px; border-top: 1px solid var(--intwater-hairline); } html body .iwg-drawer__portals { display: flex; flex-wrap: wrap; gap: 18px; } html body .iwg-drawer__portal { margin: -8px -12px; padding: 8px 12px; color: var(--intwater-blue); transition: background-color 180ms linear; } html body .iwg-drawer__portal:hover, html body .iwg-drawer__portal:focus-visible { background-color: var(--intwater-tint-hover); color: var(--intwater-blue); } html body .iwg-drawer__cta { display: none; } /* Above phones the foot holds only the portal buttons: with the portals hidden it is not drawn. */ @media (min-width: 768px) { html body .iwg-drawer__foot:not(:has(.iwg-drawer__portals)) { display: none; } } /* ---- drawer: product sub-panel (desktop only) -------------------- */ html body .iwg-drawer__sub { position: absolute; top: 0; bottom: 0; left: min(460px, 52vw); z-index: 1; display: flex; flex-direction: column; width: min(420px, calc(100vw - min(460px, 52vw) - 12px)); min-width: 260px; background: var(--intwater-drawer-a); border-right: 1px solid var(--intwater-drawer-c); transform: translateX(-101%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform 340ms cubic-bezier(.16, .84, .2, 1), opacity 240ms linear, visibility 0s linear 340ms; } html body .iwg-drawer__sub.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; visibility: visible; transition: transform 340ms cubic-bezier(.16, .84, .2, 1), opacity 240ms linear, visibility 0s; } html body .iwg-sub__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px; border-bottom: 1px solid var(--intwater-hairline); background: var(--intwater-white); } html body .iwg-sub__heading { min-width: 0; } html body .iwg-sub__kicker { margin: 0 0 6px; color: var(--intwater-orange); } html body .iwg-sub__title { margin: 0; color: var(--intwater-ink); } html body .iwg-sub__close { appearance: none; display: flex; align-items: center; flex: none; padding: 8px 12px 8px 16px; background: transparent; border: 0; border-left: 1px solid var(--intwater-hairline); color: var(--intwater-ink); cursor: pointer; transition: background-color 180ms linear, color 180ms linear; } html body .iwg-sub__close:hover, html body .iwg-sub__close:focus-visible { background-color: var(--intwater-tint-hover); color: var(--intwater-blue); } html body .iwg-sub__body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; } html body .iwg-sub__group { margin: 0; padding: 22px 0 10px; border-bottom: 1px solid var(--intwater-hairline); color: var(--intwater-muted); } html body .iwg-sub__product { display: flex; align-items: center; gap: 14px; margin: 0 -12px; padding: 13px 12px; border-bottom: 1px solid var(--intwater-hairline); color: var(--intwater-ink); transition: background-color 180ms linear, color 180ms linear; } html body .iwg-sub__product:hover, html body .iwg-sub__product:focus-visible { background-color: var(--intwater-tint-hover); color: var(--intwater-blue); } html body .iwg-sub__thumb { position: relative; display: block; flex: none; width: 64px; height: 56px; overflow: hidden; background: var(--intwater-placeholder); border: 1px solid var(--intwater-border-soft); } html body .iwg-sub__thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; } html body .iwg-sub__text { flex: 1; min-width: 0; } html body .iwg-sub__name, html body .iwg-sub__note { display: block; } html body .iwg-sub__note { margin-top: 3px; line-height: 1.5; color: var(--intwater-faint); } html body .iwg-sub__arrow { display: flex; flex: none; color: var(--intwater-muted); } html body .iwg-sub__foot { padding: 18px 24px; border-top: 1px solid var(--intwater-hairline); background: var(--intwater-white); } html body .iwg-sub__all { display: inline-flex; align-items: center; gap: 10px; margin: -8px -12px; padding: 8px 12px; color: var(--intwater-blue); transition: background-color 180ms linear, color 180ms linear; } html body .iwg-sub__all:hover, html body .iwg-sub__all:focus-visible { background-color: var(--intwater-band); color: var(--intwater-ink); } /* ---- drawer: phone (Mobile comp:52-130) --------------------------- */ @media (max-width: 767px) { html body .iwg-drawer__scrim { background: rgb(from var(--intwater-scrim) r g b / .5); } html body .iwg-drawer__main { width: 100%; min-width: 0; border-right: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } html body .iwg-drawer__sub { display: none; } html body .iwg-drawer__head { padding: calc(14px + env(safe-area-inset-top)) 20px 14px; flex: none; } html body .iwg-drawer__logo-img { height: 40px; } html body .iwg-drawer__close { justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--intwater-border-section); } html body .iwg-drawer__close-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } html body .iwg-drawer__close svg { width: 20px; height: 20px; } html body .iwg-drawer__search { display: block; flex: none; padding: 16px 20px; border-bottom: 1px solid var(--intwater-hairline); background: var(--intwater-drawer-a); } html body .iwg-drawer__search-bar { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--intwater-border-strong); } html body .iwg-drawer__search-icon { display: flex; flex: none; color: var(--intwater-muted); } html body .iwg-drawer__search-input { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; border: 0; outline: none; background: transparent; padding: 8px 0; font-family: var(--e-global-typography-intwater_body-font-family); font-size: 16px; color: var(--intwater-ink); } html body .iwg-drawer__search-clear { appearance: none; flex: none; padding: 8px 0; background: transparent; border: 0; cursor: pointer; color: var(--intwater-muted); } html body .iwg-drawer__search-results { max-height: 38svh; margin-top: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; } html body .iwg-drawer__search-caption { margin: 0 0 4px; color: var(--intwater-muted); } html body .iwg-drawer__result { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 13px 0; border-bottom: 1px solid var(--intwater-hairline); color: var(--intwater-ink); } html body .iwg-drawer__result-title { line-height: 1.4; } html body .iwg-drawer__result-group { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--intwater-muted); } html body .iwg-drawer__search-none { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--intwater-secondary); } html body .iwg-drawer__nav { -webkit-overflow-scrolling: touch; } html body .iwg-acc__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 18px 20px; } html body .iwg-acc__caret { flex: none; } html body .iwg-acc__caret svg { width: 18px; height: 18px; } html body .iwg-acc__inner { padding: 0 20px 18px; } html body .iwg-acc__link, html body .iwg-acc__link--cat { display: flex; align-items: center; width: auto; min-height: 46px; margin: 0; padding: 13px 0; } html body .iwg-acc__link:hover, html body .iwg-acc__link:focus-visible { background-color: transparent; color: var(--intwater-nav); } html body .iwg-acc__chev { display: none; } html body .iwg-acc__note { max-width: none; margin: 14px 0 0; padding-left: 12px; border-left-width: 2px; } html body .iwg-drawer__utility { display: flex; flex-direction: column; padding: 20px; border-bottom: 1px solid var(--intwater-hairline); } html body .iwg-drawer__utility-link { display: flex; align-items: center; min-height: 46px; padding: 13px 0; border-bottom: 1px solid var(--intwater-border-row); color: var(--intwater-ink); } html body .iwg-drawer__foot { flex-direction: column; flex: none; flex-wrap: nowrap; gap: 10px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--intwater-page); } html body .iwg-drawer__portals { flex-wrap: nowrap; gap: 10px; } html body .iwg-drawer__portal { display: flex; flex: 1; align-items: center; justify-content: center; height: 48px; margin: 0; padding: 0 10px; border: 1px solid var(--intwater-outline); text-align: center; letter-spacing: var(--e-global-typography-intwater_btn_doc-letter-spacing); } html body .iwg-drawer__portal:hover, html body .iwg-drawer__portal:focus-visible { background-color: transparent; } html body .iwg-drawer__cta { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 20px; background-color: var(--intwater-blue); color: var(--intwater-white); text-align: center; } html body .iwg-drawer__cta:hover { color: var(--intwater-white); } } /* ---- footer ----------------------------------------------------- */ /* Book band form (Home v2:432-447, Mobile comp:348-361): the email field and the button joined on one rule. */ body .gform_wrapper.gform-theme.iwg-book-form_wrapper { margin: 0; } body .gform_wrapper.gform-theme.iwg-book-form_wrapper form.iwg-book-form { display: flex; align-items: stretch; gap: 0; margin: 0; border-bottom: 1px solid var(--intwater-white-34); } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gform_body { flex: 1; min-width: 0; } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gform_fields { display: block; } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gfield { margin: 0; padding: 0; } /* The field keeps its real label for assistive tech; the comp shows the placeholder only. */ body .gform_wrapper.gform-theme.iwg-book-form_wrapper .hidden_label > .gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gfield input[type="email"] { appearance: none; box-sizing: border-box; width: 100%; min-height: 0; margin: 0; padding: 16px 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none; font-family: var(--e-global-typography-intwater_body-font-family); font-size: 18px; line-height: normal; color: var(--intwater-white); } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gfield input[type="email"]::placeholder { color: var(--intwater-muted); opacity: 1; } /* Focus: the rule brightens to white and the field takes a 2px accent ring drawn inside its own box (a ring outside the form was clipped by the band's overflow at desktop), at every width. */ body .gform_wrapper.gform-theme.iwg-book-form_wrapper form.iwg-book-form:focus-within { border-bottom-color: var(--intwater-white); } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gfield input[type="email"]:focus-visible { outline: 2px solid var(--intwater-orange); outline-offset: -2px; } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gform_footer { display: flex; flex: none; margin: 0; padding: 0; } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gform_footer button.gform_button { appearance: none; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 16px 26px; background-color: var(--intwater-white); border: 0; border-radius: 0; color: var(--intwater-navy); cursor: pointer; font-family: var(--e-global-typography-intwater_btn_primary-font-family); font-size: var(--e-global-typography-intwater_btn_primary-font-size); font-weight: var(--e-global-typography-intwater_btn_primary-font-weight); text-transform: var(--e-global-typography-intwater_btn_primary-text-transform); line-height: var(--e-global-typography-intwater_btn_primary-line-height); letter-spacing: var(--e-global-typography-intwater_btn_primary-letter-spacing); } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gform_footer button.gform_button:hover { color: var(--intwater-navy); } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gfield_validation_message, body .gform_wrapper.gform-theme.iwg-book-form_wrapper .validation_message { margin: 8px 0 0; padding: 0; background: transparent; border: 0; font-size: 12.5px; line-height: 1.6; color: var(--intwater-white); } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gform_validation_errors { display: none; } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gfield_required { display: none; } .gform_confirmation_wrapper:has(.gform_confirmation_message) { margin: 0; } .gform_confirmation_wrapper .gform_confirmation_message { margin: 14px 0 0; font-family: var(--e-global-typography-intwater_book_note-font-family); font-size: var(--e-global-typography-intwater_book_note-font-size); line-height: var(--e-global-typography-intwater_book_note-line-height); color: var(--intwater-white); } /* Search fields: no native cancel X (the design has Esc and Clear only); one rule for the header panel, the catalogue field and the drawer field. */ .iwg-search__input::-webkit-search-cancel-button, .iwg-search__input::-webkit-search-decoration, .iwg-p-search__input::-webkit-search-cancel-button, .iwg-p-search__input::-webkit-search-decoration, .iwg-drawer__search-input::-webkit-search-cancel-button, .iwg-drawer__search-input::-webkit-search-decoration { display: none; -webkit-appearance: none; } /* Gravity Forms' theme sets `transition: all .15s` on its submit; the water buttons use the comp's three timings (Home v2:30). */ html body .gform_wrapper.gform-theme.gform-theme--framework button.gform_button.iwg-water { transition: background-size 900ms cubic-bezier(.25, .8, .3, 1), color 300ms linear, background-color 200ms linear; } /* Gravity Forms paints its own blue ring on the submit; it takes the site's two-tone ring like every other water button. */ html body .gform_wrapper.gform-theme.gform-theme--framework button.gform_button.iwg-water:focus-visible { outline: 2px solid var(--intwater-ink); outline-offset: 0; box-shadow: 0 0 0 4px var(--intwater-white); } /* Header Search is colour 180ms linear and Menu changes instantly (Home v2:168, 181); the Button widget default is `all .3s`. */ html body .iwg-search-toggle .elementor-button, html body .iwg-search-icon .elementor-button { transition: color 180ms linear; } html body .iwg-menu-toggle .elementor-button { transition: none; } /* Home alone (Home v2:421, 441): the footer carries an orange 3px top rule and orange column titles; every sub-page comp draws neither. */ html body.home .elementor .iwg-footer { border-top: 3px solid var(--intwater-orange); } html body.home .elementor .iwg-fcol__title .elementor-heading-title { color: var(--intwater-orange); } /* Footer brand block spans the row at tablet so its blurb keeps a readable measure (QA R4); the three link columns share the row beneath it. */ @media (min-width: 768px) and (max-width: 1024px) { html body .elementor .iwg-footer-grid > .iwg-footer-brand { grid-column: 1 / -1; } } /* Footer columns: accordions on the phone only (Mobile comp:366-385); iwg.js adds .iwg-fcol-on. */ html body .iwg-fcol__caret { display: none; } @media (max-width: 767px) { html body .iwg-fcol { border-top: 1px solid var(--intwater-white-16); } html.iwg-fcol-on .iwg-fcol__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 17px 0; cursor: pointer; } html.iwg-fcol-on .iwg-fcol__caret { display: flex; flex: none; color: var(--intwater-white); transition: transform 240ms ease; } html.iwg-fcol-on .iwg-fcol.is-open .iwg-fcol__caret { transform: rotate(180deg); } html.iwg-fcol-on .iwg-fcol__body { overflow: hidden; max-height: 0; transition: max-height 300ms cubic-bezier(.16, .84, .2, 1); } body .gform_wrapper.gform-theme.iwg-book-form_wrapper form.iwg-book-form { flex-direction: column; gap: 12px; border-bottom: 0; } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gfield input[type="email"] { min-height: 52px; padding: 14px 0; border-bottom: 1px solid var(--intwater-white-42); font-size: 16px; -webkit-appearance: none; } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gfield input[type="email"]:focus-visible { border-bottom-color: var(--intwater-white); } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gform_footer, body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gform_footer button.gform_button { width: 100%; } body .gform_wrapper.gform-theme.iwg-book-form_wrapper .gform_footer button.gform_button { justify-content: center; height: 48px; padding: 0 20px; } } /* ---- section rail (Home v2:148-155) ------------------------------- */ html body .iwg-rail { position: fixed; top: 50%; right: 26px; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px 12px; background: color-mix(in srgb, var(--intwater-white) 60%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(14px); transition: opacity 320ms linear, transform 320ms cubic-bezier(.16, .9, .24, 1), background 260ms linear; } html body .iwg-rail.is-visible { opacity: 1; pointer-events: auto; transform: translateY(-50%); } html body .iwg-rail.is-dark { background: color-mix(in srgb, var(--intwater-navy) 60%, transparent); } html body .iwg-rail-item { display: flex; align-items: center; justify-content: center; width: 18px; padding: 2px 0; text-decoration: none; } html body .iwg-rail-label { position: absolute; right: 26px; top: 50%; margin-top: -9px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--intwater-faint); } html body .iwg-rail-item.is-active .iwg-rail-label { color: var(--intwater-ink); } html body .iwg-rail.is-dark .iwg-rail-label { color: var(--intwater-white); } html body .iwg-rail-tick { display: block; width: 0; height: 22px; border-left: 4px dashed var(--intwater-tick); transition: height 240ms cubic-bezier(.16, .9, .24, 1), border-color 200ms linear; } html body .iwg-rail.is-dark .iwg-rail-tick { border-left-color: var(--intwater-white-42); } html body .iwg-rail-item.is-active .iwg-rail-tick, html body .iwg-rail.is-dark .iwg-rail-item.is-active .iwg-rail-tick { height: 40px; border-left-color: var(--intwater-orange); } /* The comp's 26px offset puts the 42px rail over the 40px page gutter and the end of full-width rows (QA D8). Below 1512px the content reaches within 76px of the edge, so the rail hugs the edge (30px wide, inside the 40px gutter); from 1512px up the content leaves 8px or more and the rail keeps the comp position. */ @media (min-width: 768px) and (max-width: 1511px) { html body .iwg-rail { right: 4px; padding: 20px 6px; } } @media (max-width: 767px) { html body .iwg-rail { display: none; } } /* ==================================================================== home page (Home v2 sections, Mobile comp tier) ==================================================================== */ /* Elementor sets button/heading colour and type at (0,3-4,0): these rules carry `.elementor` plus the html/body prefix to outrank them. */ /* Arrow glyph after a label (lucide arrow-right): widgets carry .iwg-arrow, the size is --iwg-arrow. */ html body .iwg-arrow { --iwg-arrow: 14px; --iwg-arrow-gap: 10px; } html body .iwg-arrow-13 { --iwg-arrow: 13px; --iwg-arrow-gap: 8px; } html body .iwg-arrow-16 { --iwg-arrow: 16px; } html body .iwg-hero__buttons .iwg-arrow { --iwg-arrow-gap: 12px; } html body .elementor .iwg-arrow .elementor-heading-title { display: inline-flex; align-items: center; gap: var(--iwg-arrow-gap); } html body .elementor .iwg-arrow .elementor-button-content-wrapper { gap: var(--iwg-arrow-gap); } html body .elementor .iwg-arrow .elementor-button-content-wrapper::after, html body .elementor .iwg-arrow .elementor-heading-title::after { content: ''; flex: none; width: var(--iwg-arrow); height: var(--iwg-arrow); background-color: currentColor; -webkit-mask: var(--iwg-icon-arrow) center / contain no-repeat; mask: var(--iwg-icon-arrow) center / contain no-repeat; } @media (min-width: 768px) { html body .elementor .iwg-arrow-phone .elementor-button-content-wrapper::after { display: none; } } /* A card's phone-only trailing arrow: the label stays for assistive tech, only the glyph shows. */ html body .elementor .elementor-element.iwg-cta--only-arrow .elementor-heading-title { font-size: 0; line-height: 0; gap: 0; } /* Outlined phone row links ("Full product catalogue", "All news"): label left, arrow right. */ html body .elementor .iwg-row-link .elementor-button { display: flex; width: 100%; } html body .elementor .iwg-row-link .elementor-button-content-wrapper { width: 100%; justify-content: space-between; } /* The comp's 1px rules between cards: the grid is painted in the rule colour and the cards cover it, with a 1px gap. Phone cards stand alone. */ html body .iwg-lines--hairline { --iwg-line: var(--intwater-hairline); } html body .iwg-lines--soft { --iwg-line: var(--intwater-border-soft); } html body .iwg-lines--dark { --iwg-line: var(--intwater-white-16); } /* An odd last route tile spans the row, so the 2-column 404 grid shows no empty painted cell. */ html body .elementor .iwg-routes > :last-child:nth-child(odd) { grid-column: 1 / -1; } @media (min-width: 768px) { html body .elementor .iwg-lines { background-color: var(--iwg-line); border: 1px solid var(--iwg-line); } /* Proof strip has no outer border (Home v2:244). */ html body .elementor .iwg-proof .iwg-lines { border: 0; } } @media (min-width: 768px) and (max-width: 1024px) { html body .elementor .iwg-sys-grid > .iwg-sys:last-child { grid-column: 1 / -1; } } /* Tiles (proof, quality, support, news): fill, orange top rule and hover are state, so they live here on the kit colours. */ html body .elementor .iwg-tile { border-top: 3px solid transparent; transition: background-color 220ms linear, border-color 200ms linear; } html body .elementor .iwg-tile > .e-con { min-width: 0; } html body .elementor .iwg-tile--dark { background-color: var(--intwater-navy); } html body .elementor .iwg-tile--light { background-color: var(--intwater-white); } html body .elementor .iwg-tile--dark:hover, html body .elementor .iwg-tile--dark:focus-visible { background-color: var(--intwater-midnavy); border-top-color: var(--intwater-orange); } html body .elementor .iwg-tile--light:hover, html body .elementor .iwg-tile--light:focus-visible { background-color: var(--intwater-tint-hover); border-top-color: var(--intwater-orange); } /* hero (Home v2:222-247): the two comp gradients are one ::after (the container's ::before is Elementor's overlay). */ html body .elementor .iwg-hero { position: relative; } html body .elementor .iwg-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(3, 22, 38, .55) 0%, rgba(3, 22, 38, 0) 26%, rgba(3, 22, 38, 0) 62%, rgba(3, 22, 38, .5) 100%), linear-gradient(100deg, rgba(3, 22, 38, .93) 0%, rgba(3, 22, 38, .72) 44%, rgba(3, 22, 38, .24) 84%), linear-gradient(var(--intwater-hero-scrim), var(--intwater-hero-scrim)); } /* The comp's image slot v2-hero-aero is stored cropped (.image-slots.state.json: s 2.0652, x 53.2595, y 4.0550). image-slot.js draws the picture cover-fitted to the frame, scaled by s about its centre, and moves the centre by x/y percent of the frame: the same as this transform on a frame-sized cover image. */ html body .elementor .iwg-hero .iwg-hero__photo { position: absolute; inset: 0; z-index: 0; margin: 0; } html body .elementor .iwg-hero .iwg-hero__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translate(53.2595%, 4.055%) scale(2.0651899557); } /* The comp's button pair is a stretched flex row: the borderless button grows to the bordered one's height. */ html body .elementor .iwg-hero__buttons .iwg-wbtn .elementor-button { display: flex; align-items: center; height: 100%; box-sizing: border-box; } html body .elementor .iwg-hero .iwg-hero__inner { position: relative; z-index: 1; } /* Heading measures are in the heading's own font size (ch on the widget wrapper would use the body size). */ html body .elementor .iwg-hero__h1 .elementor-heading-title { max-width: 26ch; } html body .elementor .iwg-pos-lead .elementor-heading-title { max-width: 19ch; text-wrap: balance; } /* Comp text-wrap: balance on both desktop statements, pretty on the phone statement, balance on the phone H1. */ html body .elementor .iwg-pos-copy .elementor-widget-text-editor p { text-wrap: balance; } @media (min-width: 768px) { html body .elementor .iwg-hero__h1 .iwg-br { display: block; } } /* systems (Home v2:262-290): the active card takes the tint, orange marker and blue CTA; iwg.js moves .is-active on hover or focus. */ html body .elementor .iwg-sys { background-color: var(--intwater-white); transition: background-color 220ms linear, border-color 200ms linear; } html body .elementor .iwg-sys.is-active { background-color: var(--intwater-tint-hover); } html body .elementor .iwg-sys__marker { background-color: transparent; transition: background-color 200ms linear; } html body .elementor .iwg-sys.is-active .iwg-sys__marker { background-color: var(--intwater-orange); } html body .elementor .iwg-sys .iwg-sys__cta .elementor-heading-title { transition: color 200ms linear; } html body .elementor .iwg-sys.is-active .iwg-sys__cta .elementor-heading-title { color: var(--intwater-blue); } /* position (Home v2:296-325, Mobile comp:228-262) */ html body .elementor .iwg-pos-word { transition: color 260ms linear; } html body .elementor .iwg-pos-word.is-active { color: var(--intwater-orange); } html body .elementor .iwg-block { display: block; } html body .elementor .iwg-pane { display: none; } html body .elementor .iwg-pane.is-active { display: flex; } html body .elementor .iwg-pane .iwg-wbtn { margin-top: auto; } html body .elementor .iwg-tab .elementor-button { display: inline-flex; align-items: center; transition: border-color 200ms linear, color 200ms linear, background-color 200ms linear; } @media (min-width: 768px) { html body .elementor .iwg-pos-card { background-color: var(--intwater-white); } /* Desktop tabs: 12.5px, regular until active, 3px rule (native border, bottom only) that sits on the card's 2px rule; the rule is clear until active. */ html body .elementor .iwg-pos-tabs .elementor-element.iwg-tab .elementor-button, html body .elementor .iwg-pos-tabs .elementor-element.iwg-tab .elementor-button:hover, html body .elementor .iwg-pos-tabs .elementor-element.iwg-tab .elementor-button:focus { border-bottom-color: transparent; } html body .elementor .iwg-pos-tabs .elementor-element.iwg-tab.is-active .elementor-button, html body .elementor .iwg-pos-tabs .elementor-element.iwg-tab.is-active .elementor-button:hover, html body .elementor .iwg-pos-tabs .elementor-element.iwg-tab.is-active .elementor-button:focus { border-bottom-color: var(--intwater-orange); color: var(--intwater-orange); font-weight: 800; } } @media (max-width: 767px) { /* The Mobile comp's chips are 800 whether active or not (Mobile comp:243); the bound Position tab step is the desktop 400, so this rule carries the widget's own class to outrank it. */ html body .elementor .elementor-element.iwg-tab .elementor-button { display: inline-flex; min-height: 44px; font-weight: 800; } html body .elementor .elementor-element.iwg-tab.is-active .elementor-button, html body .elementor .elementor-element.iwg-tab.is-active .elementor-button:hover, html body .elementor .elementor-element.iwg-tab.is-active .elementor-button:focus { background-color: var(--intwater-blue); border-color: var(--intwater-blue); color: var(--intwater-white); } html body .elementor .iwg-hero__h1 .elementor-heading-title { text-wrap: balance; } html body .elementor .iwg-pos-copy .elementor-widget-text-editor p { text-wrap: pretty; } /* Mobile hero: one vertical gradient (Mobile comp:143). */ html body .elementor .iwg-hero::after { background: linear-gradient(180deg, rgba(3, 22, 38, .72) 0%, rgba(3, 22, 38, .42) 40%, rgba(3, 22, 38, .86) 100%), linear-gradient(rgb(from var(--intwater-hero-scrim) r g b / .5), rgb(from var(--intwater-hero-scrim) r g b / .5)); } html body .elementor .iwg-hero__buttons .iwg-wbtn--pale .elementor-button { border-color: var(--intwater-white-42); } /* Proof, quality, support become list rows; systems and news become stacked cards. */ html body .elementor .iwg-tile { border-top: 0; } html body .elementor .iwg-proof .iwg-tile { border-left: 3px solid var(--intwater-orange); border-bottom: 1px solid var(--intwater-white-16); } html body .elementor .iwg-quality__grid { border-top: 1px solid var(--intwater-white-16); } html body .elementor .iwg-quality__tile { border-bottom: 1px solid var(--intwater-white-16); } html body .elementor .iwg-support__grid { border-top: 1px solid var(--intwater-border-section); } html body .elementor .iwg-support__tile { border-bottom: 1px solid var(--intwater-hairline); } html body .elementor .iwg-sys { border: 1px solid var(--intwater-border-pale); background-color: var(--intwater-white); } html body .elementor .iwg-sys .iwg-sys__marker { background-color: var(--intwater-orange); } html body .elementor .iwg-sys .iwg-sys__cta .elementor-heading-title { color: var(--intwater-blue); } html body .elementor .iwg-news__card { border: 1px solid var(--intwater-border-soft); } } /* ---- Long words stay inside their box (QA D2-D5): break only when a word would overflow; hyphenate where the language allows it. ---- */ html body .elementor-widget-heading .elementor-heading-title, html body .elementor-widget-text-editor, html body .iwg-s404__title, html body .iwg-s404__group, html body .iwg-post-body :is(p, li, h2, h3, h4, blockquote, figcaption), html body .iwg-prose :is(p, li, h2, h3, h4) { overflow-wrap: break-word; } /* Narrow columns at tablet widths (Systems titles, catalogue rows, event rows, 404 list) hyphenate instead of running past their box; phones and desktop keep whole words. */ @media (min-width: 768px) and (max-width: 1100px) { html body .iwg-sys .elementor-heading-title, html body .iwg-p-row .elementor-widget-text-editor, html body .iwg-p-row .elementor-heading-title, html body .iwg-event .elementor-heading-title, html body .iwg-s404__title, html body .iwg-s404__group { hyphens: auto; } } /* A URL or hash in imported copy has no break points: it wraps anywhere rather than widen the page. */ html body .iwg-post-body :is(p, li, blockquote, figcaption), html body .iwg-prose :is(p, li) { overflow-wrap: anywhere; } /* Focus ring, two-tone so it shows on light and dark grounds and on any button colour: a dark ring inside a white one, from the kit. Same selector and specificity as ec-base.css's ring, loaded after it. */ :where(body.ec-site) :is([tabindex]:not([tabindex="-1"]), a, button, input, select, textarea):focus-visible { outline: 2px solid var(--intwater-ink); outline-offset: 0; box-shadow: 0 0 0 4px var(--intwater-white); } /* Phone: a CTA label is the comp's inline-flex span (line-height normal); the widget wrapper's inherited 27px line box made every proof row and Systems card about 14px taller. */ @media (max-width: 767px) { html body .elementor .elementor-widget.iwg-cta { line-height: 0; } } /* Theme-rendered