*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
button:disabled{opacity:.6;cursor:wait}

:root{--deep:#0e2924;--forest:#12322b;--sea:#2b8a72;--mint:#93d3bd;--gold:#e6b54f;--goldd:#b8861f;--cream:#f6f0e4;--cream2:#efe6d4;--ink:#12322b;--mid:#4f5f57;--soft:#b8d2c8;--dim:#7fa496;--ship:#2563eb;--truck:#b45309;color-scheme:light}
*{box-sizing:border-box}
html,body{background:var(--cream)}
body{margin:0;color:var(--ink);font:19px/1.65 Outfit,system-ui,sans-serif}
a{color:inherit}
svg{display:block}
[hidden]{display:none!important}
.in{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.big{font-weight:600;font-size:clamp(34px,4.4vw,58px);line-height:1.06;letter-spacing:-.025em;margin:0;text-wrap:balance}

/* the dark top (the part he likes) and the dark contact at the end */
.dark{position:relative;background:#0e2924 var(--roofs);color:#f4efe4}
.dark>.in{position:relative}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:26px}
.top .logo svg{height:42px;width:auto}
.top a.mail{font-size:16px;color:#dfeee8;text-underline-offset:4px}
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:30px;align-items:center;padding-block:clamp(40px,8vw,110px) clamp(60px,9vw,130px)}
.hero h1{font-weight:600;font-size:clamp(44px,7vw,104px);line-height:.98;letter-spacing:-.035em;margin:0 0 30px;max-width:11ch;text-wrap:balance}
.hero p{margin:0;color:var(--soft);max-width:30ch;font-size:clamp(18px,1.7vw,21px)}
.hero .w{display:flex;justify-content:center}
.hero .w svg{width:min(300px,100%);height:auto;overflow:visible}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero .w{order:-1;justify-content:flex-start}.hero .w svg{width:110px}}
.lightsbg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.lit{opacity:0;animation:lit 8s ease-in-out infinite}
@keyframes lit{0%,100%{opacity:0}35%,62%{opacity:.9}}


/* the top: logo and contact in the corners; headline, description and one link on the left; The place on the right */
.in.corners4{max-width:1440px}
.corners4{display:grid;grid-template-rows:auto auto;padding-bottom:clamp(56px,7vw,100px)}
.corners4 .mid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,4vw,64px);align-items:center;padding-top:clamp(28px,5vw,72px)}
.corners4 h1{font-weight:600;font-size:clamp(40px,4.2vw,64px);line-height:1.02;letter-spacing:-.035em;margin:0;max-width:13ch;text-wrap:balance}
.corners4 .lede{margin:clamp(18px,2vw,26px) 0 0;max-width:34ch;color:var(--soft);font-size:clamp(17px,1.5vw,20px);line-height:1.55}
.corners4 .go{display:inline-block;margin-top:clamp(22px,2.4vw,32px);color:#fbf8f2;font-weight:600;font-size:17px;text-underline-offset:6px;text-decoration-color:#e6b54f;text-decoration-thickness:2px}
.corners4 .art{box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
@media (max-width:860px){.corners4 .mid{grid-template-columns:minmax(0,1fr)}}
/* sections with an illustration */
.scene{padding-block:clamp(50px,7vw,90px)}
.scene .big{max-width:22ch;margin-bottom:clamp(22px,3vw,34px)}
.art{border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(18,50,43,.55)}
.art svg{display:block;width:100%;height:auto}
.opt{padding-block:clamp(70px,9vw,120px)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* A. the loop, louder: dark band, big ring, glowing gold trail, icons, ripples */
.oa{background:#0e2924 var(--roofs);color:#f4efe4}
.oa .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,70px);align-items:center}
.loop{position:relative;max-width:560px;margin:0 auto;width:100%}
.loop svg{width:100%;height:auto;overflow:visible}
.loop .stop{cursor:pointer;outline:none}
.loop .stop .disc{fill:#12322b;stroke:#2f6b5a;stroke-width:4;transition:fill .4s,stroke .4s}
.loop .stop .ico{stroke:#93d3bd;transition:stroke .4s}
.loop .stop text{font:700 19px Outfit,system-ui,sans-serif;fill:#cfe2db;text-anchor:middle;transition:fill .4s}
.loop .stop.on .disc{fill:#e6b54f;stroke:#fff3cf}
.loop .stop.on .ico{stroke:#12322b}
.loop .stop.on text{fill:#12322b}
.loop .stop:focus-visible .disc{stroke:#fff;stroke-width:6}
.loop .ripple{fill:none;stroke:#e6b54f;stroke-width:3;opacity:0}
.loop .ripple.go{animation:ripple 1.1s ease-out}
@keyframes ripple{0%{opacity:.8;r:62px}100%{opacity:0;r:104px}}
.loop .roof{transition:stroke .4s,filter .4s}
.loop .roof.glow{stroke:#ffd66b;filter:drop-shadow(0 0 10px rgba(230,181,79,.9))}
.detail h3{margin:0 0 12px;font-size:clamp(40px,4.6vw,64px);letter-spacing:-.03em;color:#fbf8f2;line-height:1}
.detail h3 span{color:#e6b54f}
.detail p{margin:0;color:#cfe2db;max-width:30em;min-height:5.2em;font-size:clamp(18px,1.6vw,21px);transition:opacity .3s}
.detail p.swap{opacity:0}
.detail .hint{margin-top:18px;font-size:14.5px;color:#7fa496}
.detail .steps{display:flex;gap:8px;margin-top:22px}
.detail .steps i{display:block;width:34px;height:5px;border-radius:3px;background:#2f6b5a;transition:background .4s}
.detail .steps i.on{background:#e6b54f}
@media (max-width:820px){.oa .grid{grid-template-columns:1fr}}


/* WardenIQ: a warm product panel in its own colors, the product running off the edge */
.wq2{padding-block:clamp(70px,9vw,120px)}
.wq2-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(26px,3.4vw,44px)}
.wq2-head .big{margin:0}
.wq2-sub{margin:0;color:var(--mid);max-width:36ch;font-size:clamp(17px,1.5vw,20px)}
.wq2-panel{position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,3vw,44px);align-items:center;border-radius:28px;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%,#ffd9b0 0%,rgba(255,217,176,0) 55%),linear-gradient(160deg,#fff4e6 0%,#fde3c6 100%);padding:clamp(24px,4.4vw,60px);
  box-shadow:0 30px 70px -45px rgba(140,60,10,.55)}
.wq2-text .wiqword{height:clamp(36px,3.6vw,48px);width:auto;display:block;margin-bottom:clamp(18px,2vw,26px)}
.wq2-tag{margin:0 0 10px;font-weight:700;font-size:clamp(26px,2.8vw,38px);line-height:1.1;letter-spacing:-.02em;color:#1c1917}
.wq2-what{margin:0 0 18px;color:#57463a;max-width:34ch}
.wq2-text ul{list-style:none;margin:0 0 24px;padding:0}
.wq2-text li{position:relative;padding:0 0 10px 30px;color:#3d2f26;font-size:17px;line-height:1.5}
.wq2-text li::before{content:"";position:absolute;left:3px;top:.42em;width:13px;height:7px;border:solid #e8730a;border-width:0 0 3px 3px;transform:rotate(-45deg)}
.wq2-go{font-weight:600;color:#1c1917;text-underline-offset:5px;text-decoration-color:#e8730a;text-decoration-thickness:2px}
.wq2-shot{margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.wq2-shot img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 30px 60px -30px rgba(80,30,0,.5);border:1px solid #f0d2b0;transform:rotate(-1.2deg)}
.wq2-shot figcaption{font-size:13px;color:#8a6a52;margin-top:10px}
@media (max-width:860px){
  .wq2-head{grid-template-columns:minmax(0,1fr)}
  .wq2-panel{grid-template-columns:minmax(0,1fr)}
  .wq2-shot img{transform:none;border-radius:12px}
}
/* contact */
.contact{padding-block:clamp(80px,10vw,130px) 40px}
.contact .big{color:#fbf8f2;max-width:14ch;margin-bottom:22px}
.contact p{color:var(--soft);max-width:40ch;margin:0 0 28px}
.addr{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.addr code{font:600 clamp(24px,3.4vw,40px)/1.1 Outfit,system-ui,sans-serif;color:#fbf8f2;user-select:all}
.addr button{background:transparent;color:#dfeee8;border:1px solid rgba(255,255,255,.32);border-radius:8px;padding:7px 14px;font:500 14px Outfit,system-ui,sans-serif;cursor:pointer}
.addr button:hover{background:rgba(255,255,255,.1)}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:clamp(60px,8vw,100px);padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:var(--dim)}


/* Lights on sits in its own night band */
.scene.night{background:#0b211c;color:#f4efe4}
.scene.night .big{color:#fbf8f2}
.scene.night .art{border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}

/* contact: words and the address on the left, the form on the right */
.ct-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:start}
.ct-words .big{max-width:13ch}
.ct-words .ct-or{margin:0 0 10px;color:var(--dim);font-size:15px}
.ct-form{display:grid;gap:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:clamp(18px,2.6vw,30px)}
.ct-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.ct-form label{display:grid;gap:7px;font-size:15px;font-weight:600;color:#e7f0ec}
.ct-form label .lb span{font-weight:400;color:var(--dim)}
.ct-form input,.ct-form textarea{font:400 16px/1.5 Outfit,system-ui,sans-serif;color:#fbf8f2;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:11px 13px;width:100%}
.ct-form textarea{resize:vertical;min-height:120px}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:#7fa496}
.ct-form input:focus,.ct-form textarea:focus{outline:none;border-color:#e6b54f;box-shadow:0 0 0 3px rgba(230,181,79,.2)}
.ct-form .bad{border-color:#f2a33a}
.ct-send{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ct-form button{font:600 16px Outfit,system-ui,sans-serif;color:#12322b;background:#f4efe4;border:0;border-radius:10px;padding:13px 22px;cursor:pointer}
.ct-form button:hover{background:#fff}
.ct-note{margin:0;font-size:14.5px;color:#f2c27a}
.ct-done{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:clamp(22px,3vw,34px)}
.ct-thanks{margin:0 0 10px;font-weight:600;font-size:clamp(20px,2vw,24px);color:#fbf8f2}
.ct-preview{margin:0 0 18px;font-size:14.5px;color:#f2c27a}
.ct-done button{font:600 15px Outfit,system-ui,sans-serif;color:#dfeee8;background:transparent;border:1px solid rgba(255,255,255,.32);border-radius:10px;padding:9px 16px;cursor:pointer}
@media (max-width:860px){.ct-grid{grid-template-columns:minmax(0,1fr)}.ct-two{grid-template-columns:minmax(0,1fr)}}

/* the loop band in warm cream, so it does not run into the dark top */
.oa{background:#efe6d4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='30'%3E%3Cpath d='M4 22 L18 11 L32 22' fill='none' stroke='%2312322b' stroke-opacity='.07' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-14 7 L0 -4 L14 7 M22 7 L36 -4 L50 7' fill='none' stroke='%2312322b' stroke-opacity='.035' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");color:#12322b}
.loop .stop .disc{fill:#fffdf8;stroke:#d8ccb1}
.loop .stop .ico{stroke:#2b8a72}
.loop .stop text{fill:#12322b}
.loop .stop.on .disc{fill:#e6b54f;stroke:#c9922f}
.loop .stop.on .ico{stroke:#12322b}
.detail h3{color:#12322b}
.detail h3 span{color:#c9922f}
.detail p{color:#3d4f48}
.detail .hint{color:#6b7a74}
.detail .steps i{background:#dccfb2}
.detail .steps i.on{background:#e6b54f}

/* the form as a solid cream card, so the fields are easy to see */
.ct-form,.ct-done{background:#f6f0e4;border:0;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.ct-form label{color:#12322b}
.ct-form label .lb span{color:#6b7a74}
.ct-form input,.ct-form textarea{color:#12322b;background:#fffdf8;border:1.5px solid #d3c6a8}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:#8f998f}
.ct-form input:focus,.ct-form textarea:focus{border-color:#2b8a72;box-shadow:0 0 0 3px rgba(43,138,114,.2)}
.ct-form .bad{border-color:#c2410c;background:#fff7f0}
.ct-form button{color:#fbf8f2;background:#12322b}
.ct-form button:hover{background:#1d4a3f}
.ct-note{color:#b45309}
.ct-thanks{color:#12322b}
.ct-preview{color:#b45309}
.ct-done button{color:#12322b;border-color:#c9bb9a}

/* phones: the 7:48 PM tag sits under the night picture instead of on top of it */
@media (max-width:620px){
  .scene.night #art2 .clock2{position:static;border-radius:0;box-shadow:none;padding:10px 14px;font-size:14px}
  .scene.night #art2 .clock2 span{font-size:13px}
}

/* How we help: heading and intro, then the loop with a fuller panel */
.oa-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.oa-head .big{margin:0;color:#12322b}
.oa-intro{margin:0;color:#3d4f48;max-width:42ch;font-size:clamp(17px,1.5vw,20px)}
.detail .dstep{margin:0 0 6px;min-height:0;font-size:14px;font-weight:600;color:#2b8a72}
.detail .dwhat{min-height:8.6em}
.detail .dbox{margin-top:18px;background:#fffdf8;border:1px solid #e3d6b8;border-radius:16px;padding:16px 20px 6px}
.detail .dbox p{min-height:0;max-width:none;font-size:16.5px;line-height:1.5;color:#12322b;margin:0 0 12px;transition:opacity .3s}
.detail .dbox p.swap{opacity:0}
.detail .dbox .dlab{margin:0 0 2px;font-size:13.5px;font-weight:700;color:#a8781f}
.detail .dbox #dget,.detail .dbox #dex{min-height:3em}
.detail .hint{min-height:0}
@media (max-width:820px){.oa-head{grid-template-columns:minmax(0,1fr)}.detail .dwhat{min-height:0}}

/* How we help, laid out: heading and intro as one block; the loop left; one card right with tabs */
.oa-head{display:block;margin-bottom:clamp(28px,3.6vw,48px)}
.oa-head .big{margin:0 0 14px}
.oa-intro{max-width:52ch}
.oa .grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center}
.loop{max-width:480px}
.hcard{background:#fffdf8;border:1px solid #e3d6b8;border-radius:22px;box-shadow:0 24px 60px -36px rgba(18,50,43,.4);overflow:hidden}
.htabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #ece2cc}
.htabs button{font:600 16px Outfit,system-ui,sans-serif;color:#6b7a74;background:none;border:0;padding:16px 10px 14px;cursor:pointer;display:flex;gap:9px;align-items:center;justify-content:center;border-bottom:3px solid transparent;margin-bottom:-1px}
.htabs button span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#efe6d4;color:#6b7a74;font-size:13px}
.htabs button:hover{color:#12322b}
.htabs button.on{color:#12322b;border-bottom-color:#e6b54f}
.htabs button.on span{background:#e6b54f;color:#12322b}
.hbody{padding:clamp(20px,2.6vw,32px) clamp(20px,2.8vw,36px) clamp(22px,2.6vw,30px)}
.detail .dstep{display:none}
.detail h3{font-size:clamp(34px,3.6vw,48px);margin:0 0 10px}
.detail .dwhat{max-width:none;min-height:7.4em}
.detail .dbox{margin-top:18px;background:none;border:0;border-top:1px solid #ece2cc;border-radius:0;padding:18px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.detail .dbox p{margin:0}
.detail .dbox .dlab{margin:0 0 4px}
.detail .dbox #dget,.detail .dbox #dex{min-height:6em}
.hcard .steps{display:none}
.hcard .hint{margin:0;max-width:none;padding:12px clamp(20px,2.8vw,36px) 16px;border-top:1px solid #ece2cc;background:#f8f2e6;font-size:14.5px;color:#6b7a74}
@media (max-width:820px){.hbody{min-height:var(--hb,0px)}.oa .grid{grid-template-columns:minmax(0,1fr)}.loop{max-width:340px}.detail .dbox{grid-template-columns:minmax(0,1fr);gap:14px}.detail .dwhat{min-height:0}.detail .dbox #dget,.detail .dbox #dex{min-height:0}.htabs button{font-size:15px;padding:14px 6px 12px}}

/* first frame: no transitions while the pictures set up */
.art.boot,.art.boot *{transition:none!important}