body{margin:0;background:#fff;color:#14171a;font-family:'Inter',Arial,sans-serif;-webkit-font-smoothing:antialiased} a{color:#1D79A0;text-decoration:none}a:hover{color:#DF1A22} html.ls-loaded{scroll-behavior:smooth} @keyframes lsFadeUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}} @keyframes lsFadeLeft{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:translateX(0)}} @keyframes lsBottleIn{0%{opacity:0;transform:translateY(60px) rotate(4deg)}60%{opacity:1}100%{opacity:1;transform:translateY(0) rotate(0deg)}} @keyframes lsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes lsBarGrow{from{width:0}to{width:120px}} @keyframes lsStarPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} /* Content is VISIBLE BY DEFAULT. The hidden pre-reveal state applies only once site.js has booted and stamped `js-anim` on — so a page with broken, blocked or absent JS still shows everything. site.js also force- reveals anything still hidden shortly after load as a belt-and-braces. */ .ls-reveal,.ls-reveal-l,.ls-reveal-r,.ls-stagger>*{opacity:1} .js-anim .ls-reveal{opacity:0;transform:translateY(36px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1)} .js-anim .ls-reveal.ls-in{opacity:1;transform:translateY(0)} .js-anim .ls-reveal-l{opacity:0;transform:translateX(-48px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1)} .js-anim .ls-reveal-l.ls-in{opacity:1;transform:translateX(0)} .js-anim .ls-reveal-r{opacity:0;transform:translateX(48px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1)} .js-anim .ls-reveal-r.ls-in{opacity:1;transform:translateX(0)} .js-anim .ls-stagger>*{opacity:0;transform:translateY(28px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1)} .js-anim .ls-stagger.ls-in>*{opacity:1;transform:translateY(0)} .ls-stagger.ls-in>*:nth-child(1){transition-delay:0s}.ls-stagger.ls-in>*:nth-child(2){transition-delay:0.1s}.ls-stagger.ls-in>*:nth-child(3){transition-delay:0.2s}.ls-stagger.ls-in>*:nth-child(4){transition-delay:0.3s}.ls-stagger.ls-in>*:nth-child(5){transition-delay:0.4s}.ls-stagger.ls-in>*:nth-child(6){transition-delay:0.5s}.ls-stagger.ls-in>*:nth-child(7){transition-delay:0.6s}.ls-stagger.ls-in>*:nth-child(8){transition-delay:0.7s} @media (prefers-reduced-motion:reduce){.ls-reveal,.ls-reveal-l,.ls-reveal-r,.ls-stagger>*{opacity:1!important;transform:none!important;transition:none!important}} /* ==================== LOUD LAYER ==================== */ :root{ /* Brand tricolor — for bars, blocks, rules, fills and icons. NEVER use these for text on a light background: measured on #F5F7F8 green is 1.90:1 and blue 2.44:1, well under WCAG AA. */ --ls-green:#8DC63F;--ls-blue:#29ABE2;--ls-red:#ED1C24;--ls-ink:#14171a;--ls-char:#0c0e10; /* Accessible text tiers, computed against #F5F7F8 (harder than white). -lg = large display type, >=24px or >=18.66px bold (AA 3:1) -txt = body copy, eyebrows, tags, links (AA 4.5:1) */ --ls-green-lg:#6F9C32; --ls-green-txt:#577B27; /* 3.00:1 / 4.59:1 */ --ls-blue-lg:#2498C9; --ls-blue-txt:#1D79A0; /* 3.04:1 / 4.53:1 */ --ls-red-lg:#ED1C24; --ls-red-txt:#DF1A22; /* 4.08:1 / 4.54:1 */ --ls-gold-txt:#986716; /* 4.56:1 */ } /* --- tricolor marquee ticker --- */ .ls-marquee{background:#fff;overflow:hidden;position:relative;padding:34px 0;user-select:none} .ls-marquee::before,.ls-marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none} .ls-marquee::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))} .ls-marquee::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))} .ls-marquee-track{display:flex;width:max-content;animation:lsMarquee 38s linear infinite} .ls-marquee-track>span{display:inline-flex;align-items:center;gap:30px;padding-right:30px;color:#2b3036;font-family:'Space Grotesk','Inter','Helvetica Neue',Arial,sans-serif;font-style:normal;font-size:29px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap} .ls-marquee-track b{font-weight:500} .ls-marquee-track i{display:block;width:11px;height:11px;border-radius:3px;flex:none} .ls-marquee:hover .ls-marquee-track{animation-play-state:paused} @keyframes lsMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* --- loud CTA buttons --- */ .ls-btn{display:inline-block;transition:transform 0.25s cubic-bezier(0.16,1,0.3,1),box-shadow 0.25s cubic-bezier(0.16,1,0.3,1)} .ls-btn:hover{transform:translateY(-3px)} .ls-btn-red:hover{box-shadow:0 14px 30px rgba(237,28,36,0.36)} .ls-btn-green:hover{box-shadow:0 14px 30px rgba(141,198,63,0.36)} .ls-btn-dark:hover{box-shadow:0 14px 30px rgba(20,23,26,0.3)} /* --- giant display numeral --- */ .ls-huge{font-weight:300;letter-spacing:-0.05em;line-height:0.82;font-variant-numeric:tabular-nums} /* --- full-bleed section break --- */ .ls-break{position:relative;overflow:hidden;padding:130px 64px;text-align:center;color:#fff} .ls-break h2{font-weight:300;letter-spacing:-0.03em;line-height:1;margin:0} .ls-break .ser{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500} .ls-break-rule{display:flex;height:6px;width:120px;border-radius:3px;overflow:hidden;margin:0 auto 30px} .ls-break-rule span{flex:1} /* Supporting-beat variant for inner pages (see build.js, product page). The full 130px padding belongs to the homepage statement banner only. */ .ls-break-tight{padding:74px 64px} .ls-break-tight .ls-break-rule{margin-bottom:24px} /* --- header lift on scroll (scroll-driven, no JS; applies to every page) --- */ @supports (animation-timeline:scroll()){ header{animation:lsHeadShadow linear both;animation-timeline:scroll();animation-range:0 140px} @keyframes lsHeadShadow{from{box-shadow:0 0 0 rgba(12,14,16,0)}to{box-shadow:0 8px 30px rgba(12,14,16,0.13)}} } /* --- stat counters --- */ .ls-statnum{font-variant-numeric:tabular-nums} /* --- Ken Burns drift for the "Wherever fire risk lives" scene --- */ @keyframes lsKenBurns{ from{transform:scale(1) translate(0,0)} to{transform:scale(1.12) translate(-1.8%,-1.2%)} } .ls-kenburns{animation:lsKenBurns 28s ease-in-out infinite alternate;transform-origin:62% 42%;will-change:transform} @media (prefers-reduced-motion:reduce){.ls-kenburns{animation:none}} /* --- full-bleed video plate (replaces the Ken Burns still) --- VISIBLE FROM FIRST PAINT. The poster is the clip's own first frame, so there is nothing to fade in from and no flash when playback starts. Do NOT gate visibility on a JS-set attribute: this node is materialised by the Claude Design runtime, which inserts it *after* site.js boots — an opacity:0 default meant the whole section rendered empty in production. Under reduced motion site.js pauses it and the poster simply stays put, which is exactly what this rule already shows. */ .ls-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Inline variant — the plate sits inside a split layout like an ordinary image instead of filling a full-bleed section. It keeps the .ls-plate class so site.js still re-asserts muted/loop and wires lazy playback; only the box model differs. */ .ls-plate-inline{position:static;inset:auto;width:100%;height:auto;object-fit:contain;display:block}