<!doctype html><html lang="en"><head><style>html{background:#0b1d33}</style><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Do Well Together</title><meta name="claude:viewport-fit-sides" content="cover"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;1,8..60,400&display=swap"><style>:root{--bg:#ffffff; --fg:#1f2328; --muted:#5b6672; --mist:#eef4fa; --line:#dbe4ee;--blue:#0096ff; --blue-ink:#0072c4;--navy:#0b1d33; --navy-2:#13304f; --on-navy:#ffffff; --on-navy-muted:#a9bdd3;--display:"Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;--serif:"Source Serif 4", Georgia, "Times New Roman", serif;}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);font-family:var(--display);font-size:17px;line-height:1.6}.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}h1,h2,h3{line-height:1.1;text-wrap:balance;margin:0;font-weight:600;letter-spacing:-.02em}p{margin:0}a{color:inherit}.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.4em;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;text-decoration:none;border:0;font:inherit;font-weight:600;cursor:pointer}.btn:hover{filter:brightness(1.08)}.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.o{color:var(--blue)}.header-rod9x2g54t {position:relative;z-index:9;background:var(--navy);color:var(--on-navy);border-bottom:1px solid rgba(255,255,255,.08)}.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}.mark{font-weight:600;font-size:1.35rem;letter-spacing:-.03em;text-decoration:none}.links{display:flex;gap:28px;font-size:.95rem;color:var(--on-navy-muted)}.links a{text-decoration:none}.links a:hover{color:#fff}@media (max-width:760px){.links{display:none}}.hero{position:relative;overflow:hidden;background:var(--navy);color:var(--on-navy)}.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8}.hero .wrap{position:relative;padding-block:clamp(72px,11vw,140px) clamp(56px,8vw,110px);display:grid;gap:28px}.hero-copy{display:grid;gap:24px;min-width:0;max-width:40rem;position:relative}.big{font-size:clamp(4rem,12vw,8.5rem);letter-spacing:-.05em;line-height:.9}#period{transition:opacity .4s}.sub{font-size:clamp(1.8rem,4.4vw,3rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;min-height:1.1em}@media (max-width:820px){.ringpos{width:110vw;right:-55vw;top:42%;opacity:.45}}.hgrid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"title wheel" "panel wheel";align-items:center;column-gap:clamp(24px,4vw,56px);row-gap:28px}.htitle{grid-area:title;align-self:end}.htitle .big{font-size:clamp(3.4rem,8vw,6.4rem)}.wheel{grid-area:wheel;position:relative;height:var(--wh);--wh:640px;--R:290px;--rw:116px;--ir:232px;--cx:calc(100% + 130px);--ic:46px}.disk{position:absolute;left:calc(var(--cx) - var(--R));top:calc(50% - var(--R));width:calc(var(--R)*2);height:calc(var(--R)*2);border-radius:50%;background:conic-gradient(var(--blue) 0 200deg,rgba(0,150,255,.12) 270deg,var(--blue) 340deg);-webkit-mask:radial-gradient(circle,transparent calc(var(--R) - var(--rw)),#000 calc(var(--R) - var(--rw) + 1px));mask:radial-gradient(circle,transparent calc(var(--R) - var(--rw)),#000 calc(var(--R) - var(--rw) + 1px))}.witem{position:absolute;left:var(--cx);top:50%;width:var(--ic);height:var(--ic);margin:calc(var(--ic)/-2) 0 0 calc(var(--ic)/-2);background:none;border:0;padding:0;color:var(--on-navy-muted);cursor:pointer;transition:color .4s}.pip{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:var(--navy);border:2px solid #fff;transform:translate(-50%,-50%);transition:all .5s}.witem.on .pip{width:20px;height:20px;background:#fff}.witem .lbl{position:absolute;right:calc(50% + var(--R) - var(--ir) + 26px);text-align:right;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:1.15rem;font-weight:500;letter-spacing:-.01em;transition:font-size .5s,color .4s}.witem .lbl small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);height:0;opacity:0;overflow:hidden;transition:opacity .4s}.witem.on .lbl small{height:auto;opacity:1;margin-bottom:2px}.witem.on{color:#fff}.witem.on .lbl{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:-.03em}.warrow{position:absolute;left:calc(var(--cx) - var(--R) - 60px);top:50%;width:40px;height:40px;margin-left:0;border:0;background:none;color:var(--blue);font-size:1.5rem;line-height:1;cursor:pointer}.warrow.up{transform:translateY(calc(-50% - 62px))}.warrow.down{transform:translateY(calc(-50% + 62px)) rotate(180deg)}.panel-box{grid-area:panel;position:relative;border:1px solid rgba(0,150,255,.5);border-radius:6px;padding:clamp(22px,3.5vw,40px);background:rgba(11,29,51,.55);min-width:0}.panel-box::before{display:none !important;content:"";position:absolute;left:-9px;top:50%;width:16px;height:16px;background:var(--navy);border-left:1px solid rgba(0,150,255,.5);border-bottom:1px solid rgba(0,150,255,.5);transform:translateY(-50%) rotate(45deg)}.pb-in{display:grid;gap:22px;transition:opacity .35s}.pb-intro{color:#cfdbe8;font-size:1.05rem;max-width:40rem}.pb-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.pb-cols h3{color:var(--blue);font-size:1.15rem;margin-bottom:8px}.pb-cols p{color:#cfdbe8;font-size:.97rem}@media (max-width:900px){.hgrid{grid-template-columns:1fr;grid-template-areas:"title" "wheel" "panel"}.warrow{display:none}.wheel{--wh:380px;--R:175px;--rw:70px;--ir:140px;--cx:calc(100% + 80px);--ic:34px}.witem .lbl{font-size:.8rem}.witem.on .lbl{font-size:.9rem}.warrow.up{transform:translateY(calc(-50% - 46px))}.warrow.down{transform:translateY(calc(-50% + 46px)) rotate(180deg)}.panel-box::before{left:40px;top:-9px;transform:rotate(135deg)}.pb-cols{grid-template-columns:1fr}}.htitle .big{display:grid;gap:.08em}.phrases{display:grid;font-size:.42em;letter-spacing:-.03em;line-height:1.1;font-weight:600}.phrases > span{grid-area:1/1;opacity:0;transform:translateY(.35em);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.phrases > span.on{opacity:1;transform:none}.phrases > span.out{opacity:0;transform:translateY(-.35em)}.panel-box{display:grid}.panel-box > .pb-in{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}.panel-box > .pb-in.on{opacity:1;visibility:visible;transition:opacity .6s ease .15s,visibility 0s}.breaks{background:var(--mist)}.breaks-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}.breaks-copy{display:grid;gap:18px;min-width:0}.breaks-copy h2{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.04em}.breaks-copy > p{color:var(--muted);font-size:1.1rem;max-width:36rem}.loop-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0}.loop-steps li{display:grid;grid-template-columns:12rem 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line);color:var(--muted);transition:color .4s}.loop-steps li b{font-weight:600;font-size:1.15rem;color:var(--muted)}.loop-steps li span{min-width:0}.loader{width:100%;max-width:420px;justify-self:center;transform:rotate(-90deg)}.loader circle{fill:none;stroke-width:34}.ld-track{stroke:var(--line)}.ld-fill{stroke:var(--blue);stroke-dasharray:100 100;stroke-dashoffset:0}@media (prefers-reduced-motion:no-preference){.ld-fill{animation:load 7.5s cubic-bezier(.45,.05,.35,1) infinite}.ls1 b{animation:l1 7.5s infinite}.ls2 b{animation:l2 7.5s infinite}.ls3 b{animation:l3 7.5s infinite}}@media (prefers-reduced-motion:reduce){.loop-steps li b{color:var(--fg)}}@keyframes load{0%{stroke-dashoffset:100;opacity:1}70%{stroke-dashoffset:0;opacity:1}88%{stroke-dashoffset:0;opacity:1}97%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}@keyframes l1{0%,88%{color:var(--blue-ink)}95%,100%{color:var(--muted)}}@keyframes l2{0%,22%{color:var(--muted)}26%,88%{color:var(--blue-ink)}95%,100%{color:var(--muted)}}@keyframes l3{0%,46%{color:var(--muted)}50%,88%{color:var(--blue-ink)}95%,100%{color:var(--muted)}}@media (max-width:820px){.breaks-grid{grid-template-columns:1fr}.loader{max-width:240px;justify-self:start;order:-1}.loop-steps li{grid-template-columns:1fr;gap:4px}}.dwell{border-top:1px solid var(--line)}.stage{padding-block:clamp(40px,7vw,80px);overflow:hidden}.word{font-weight:600;font-size:clamp(3.6rem,15vw,10rem);letter-spacing:-.045em;line-height:1.05;white-space:nowrap;display:flex;align-items:baseline;margin:0}.word .ow,.word .sp{display:inline-block}.word .ow{width:.62em}.word .sp{width:.25em}.word .ow span{display:inline-block;color:var(--blue);transform-origin:50% 55%}.word.play .ow span{animation:rolloff 1.3s cubic-bezier(.5,0,.75,0) .5s forwards}.word.play .ow{animation:close 1s cubic-bezier(.65,0,.35,1) 1.9s forwards}.word.play .sp{animation:close 1s cubic-bezier(.65,0,.35,1) 1.9s forwards}@keyframes rolloff{0%{transform:translate(0,0) rotate(0);opacity:1}20%{transform:translate(-.04em,-.08em) rotate(-20deg)}100%{transform:translate(.9em,1.6em) rotate(320deg);opacity:0}}@keyframes close{to{width:0}}@media (prefers-reduced-motion:reduce){.word.play .ow span,.word.play .ow,.word.play .sp{animation-duration:.01s;animation-delay:0s}}.replay{background:none;border:1px solid var(--line);color:var(--muted);font:inherit;font-size:.92rem;padding:.55em 1.1em;border-radius:999px;cursor:pointer}.replay:hover{color:var(--fg)}.hero .lede{max-width:34rem;font-size:clamp(1.05rem,2vw,1.2rem);color:#dce6f1}.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.ghost{color:#fff;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}section{padding-block:clamp(64px,9vw,112px)}.statement{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,6vw,80px);align-items:start}.statement h2{font-size:clamp(2rem,4.4vw,3.2rem)}.statement .body{display:grid;gap:18px;color:var(--muted);font-size:1.08rem;min-width:0}.statement .body strong{color:var(--fg);font-weight:600}.forwho{padding-top:18px;border-top:1px solid var(--line)}@media (max-width:820px){.statement{grid-template-columns:1fr}}.head{display:grid;gap:12px;max-width:44rem}.head h2{font-size:clamp(2rem,4.4vw,3rem)}.head p{color:var(--muted);font-size:1.08rem}@media (max-width:820px){.cycle-grid{grid-template-columns:1fr}}.panel{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,64px);padding-top:40px;align-items:center}@media (max-width:820px){.panel{grid-template-columns:1fr}}.verse{background:var(--navy);color:var(--on-navy);text-align:left}.verse blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.3;max-width:46rem;font-style:italic}.verse cite{display:block;margin-top:22px;font-style:normal;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-muted)}.verse .gloss{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 40px;margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);font-size:1.15rem}.verse .gloss span{color:var(--on-navy-muted);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;display:block}@media (max-width:640px){.verse .gloss{grid-template-columns:1fr}}.rowhead{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}.arrows{display:flex;gap:8px}.arrows button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:1.2rem;cursor:pointer}.track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:36px;padding-bottom:8px;scrollbar-width:thin}.card{scroll-snap-align:start;border-radius:18px;overflow:hidden;background:var(--mist);display:grid;grid-template-rows:200px auto}.card .art{background:var(--navy-2);position:relative;display:grid;place-items:center;color:var(--on-navy-muted);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}.card .art::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;border:14px solid var(--blue);opacity:.9}.card .art em{position:absolute;bottom:12px;left:14px;font-style:normal}.card .txt{padding:22px;display:grid;gap:8px;align-content:start}.card .tag{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink)}.card h3{font-size:1.3rem}.card p{color:var(--muted);font-size:.98rem}.join{background:var(--mist)}.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,72px);align-items:start}.join h2{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.035em}.join p{color:var(--muted);margin-top:16px;font-size:1.08rem}form{display:grid;gap:14px;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:28px}label{font-size:.85rem;font-weight:500;display:grid;gap:6px}input,textarea,select{font:inherit;font-size:1rem;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);width:100%}.done{color:var(--blue-ink);font-weight:500}@media (max-width:820px){.join-grid{grid-template-columns:1fr}}.footer-rod9x2g54t {background:var(--navy);color:var(--on-navy-muted);padding-block:48px}.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:end}.foot .mark{color:#fff;font-size:2rem}.foot nav{display:flex;flex-wrap:wrap;gap:22px;font-size:.95rem}.foot nav a{text-decoration:none}.fine{margin-top:28px;font-size:.82rem}</style><body style="margin:0;"><div class="header-rod9x2g54t"><div class="wrap nav"><a class="mark" href="#top">d<span class="o">o</span> well.</a><nav class="links" aria-label="Main"><a href="#heart">The Heart</a><a href="#top">Do Well In</a><a href="#unity">Unity</a><a href="#join">Join</a></nav><a class="btn" href="#join" style="padding:.6em 1.1em; font-size:.92rem;">Do well together</a></div></div><main id="top"><section class="hero" style="padding:0;"><canvas id="rings" aria-hidden="true"></canvas><div class="wrap hgrid"><div class="htitle"><h1 class="big"><span>d<span class="o">o</span> well</span><span class="phrases" id="phrases" aria-live="polite"></span></h1></div><div class="wheel" id="wheel"><div class="disk" id="disk" aria-hidden="true"></div><svg class="marker" id="marker" aria-hidden="true"><path></path></svg><div id="items" role="tablist" aria-label="Do well in"></div><button type="button" class="warrow up" id="wup" aria-label="Previous">⌃</button><button type="button" class="warrow down" id="wdown" aria-label="Next">⌃</button></div><div class="panel-box" id="pbox" role="tabpanel" aria-live="polite"></div></div></section><section class="breaks" id="cycle"><div class="wrap breaks-grid"><div class="breaks-copy"><p class="eyebrow">The Cycle</p><h2>Break the <span class="o">cycle.</span></h2><p>Good seasons and bad, everyone is living in a cycle. Pride, ego and jealousy keep it spinning and pull us apart from the people we're meant to stand with. Here's how it breaks.</p><ol class="loop-steps"><li class="ls1"><b>Remove yourself</b><span>Set aside pride, ego and jealousy. Make room for someone besides yourself.</span></li><li class="ls2"><b>Dwell together</b><span>Live in harmony with the people right next to you. That's where unity is tested.</span></li><li class="ls3"><b>Re-enter</b><span>Step back in changed, and do well in every season.</span></li></ol></div><svg class="loader" viewBox="0 0 200 200" aria-hidden="true"><circle cx="100" cy="100" r="70" class="ld-track"></circle><circle cx="100" cy="100" r="70" class="ld-fill" pathLength="100"></circle></svg></div></section><section id="heart"><div class="wrap statement"><div><p class="eyebrow">The Heart</p><h2 style="margin-top:14px;">Complementing, not competing.</h2></div><div class="body"><p><strong>Everyone is living in a cycle.</strong> Good seasons and hard ones, wins and losses. The O in our name is that circle. It's also the self that keeps the cycle spinning: our pride, our ego, our jealousy.</p><p>Breaking the cycle starts with removing ourselves. When we do, "do well" becomes <strong>dwell</strong>, and we can finally live together in unity.</p><p>Then we step back in, changed. That's when we <strong>do well</strong>. Not at someone else's expense. Alongside them.</p><p class="forwho"><strong>Do Well Together is for men and boys.</strong> We believe healthy families, businesses and communities start with healthy men.</p></div></div></section><section class="dwell" id="dwell"><div class="wrap"><div class="head"><p class="eyebrow">From do well to dwell</p><h2>Less of me. More of us.</h2><p>Remove yourself, and "do well" becomes "dwell." When pride steps aside, there's finally room to live together.</p></div><div class="stage"><p class="word" id="word" aria-label="do well becomes dwell"><span>d</span><span class="ow"><span>o</span></span><span class="sp"></span><span>well</span><span class="o">.</span></p></div><button type="button" class="replay" id="replay">↻ Play again</button></div></section><section class="verse" id="unity"><div class="wrap"><p class="eyebrow" style="margin-bottom:22px;">Where the name comes from</p><blockquote>How wonderful and pleasant it is when brothers live together in harmony!</blockquote><cite>Psalm 133:1 · NLT</cite><div class="gloss"><div><span>Do well together</span>=</div><div><span>Dwell together</span>=</div><div><span>The result</span>Unity & harmony</div></div></div></section><section><div class="wrap"><div class="rowhead"><div class="head"><p class="eyebrow">What's Coming</p><h2>Ways to do well together</h2></div><div class="arrows"><button type="button" id="prev" aria-label="Previous">←</button><button type="button" id="next" aria-label="Next">→</button></div></div><div class="track" id="track"><article class="card"><div class="art"><em>Photo</em></div><div class="txt"><span class="tag">Gatherings</span><h3>Table talks</h3><p>Men, from business owners to dads to young guys, sharing a meal and the honest stuff.</p></div></article><article class="card"><div class="art"><em>Photo</em></div><div class="txt"><span class="tag">Business</span><h3>Collab, not compete</h3><p>Local businesses cross-promoting and lifting each other up.</p></div></article><article class="card"><div class="art"><em>Photo</em></div><div class="txt"><span class="tag">Family</span><h3>Home first</h3><p>Simple practices for dwelling well with the people under your roof.</p></div></article><article class="card"><div class="art"><em>Photo</em></div><div class="txt"><span class="tag">Apparel</span><h3>Wear the O</h3><p>Pieces that start the conversation: do well, dwell, together.</p></div></article><article class="card"><div class="art"><em>Photo</em></div><div class="txt"><span class="tag">Stories</span><h3>Seen on @dowelltogether</h3><p>Real men choosing unity over ego, shared every week.</p></div></article></div></div></section><section class="join" id="join"><div class="wrap join-grid"><div><p class="eyebrow">Join</p><h2 style="margin-top:14px;">Let's d<span class="o">o</span> well together.</h2><p>For men and boys who want to do well together. Be first to hear about gatherings, collaborations and what's next. Follow along on Instagram at <strong>@dowelltogether</strong>.</p></div><form id="f"><label for="name">Name<input id="name" required autocomplete="name"></label><label for="email">Email<input id="email" type="email" required autocomplete="email"></label><label for="area">Where do you want to do well? <select id="area"><option>Business</option><option>Family</option><option>Relationships</option><option>All of it</option></select></label><button class="btn" type="submit">Count me in</button><p class="done" id="done" hidden>Thanks — you're on the list. (Preview only: this form isn't connected yet.)</p></form></div></section></main><div class="footer-rod9x2g54t"><div class="wrap"><div class="foot"><a class="mark" href="#top">d<span class="o">o</span> well.</a><nav aria-label="Footer"><a href="#heart">The Heart</a><a href="#top">Do Well In</a><a href="#unity">Unity</a><a href="https://www.instagram.com/dowelltogether/">Instagram</a></nav></div><p class="fine">© 2026 Do Well Together. Complementing, not competing.<br>Made by <a id="cp-link" href="#" style="color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4);">CALLED Presentations</a></p></div></div><script> const tr=document.getElementById('track'); document.getElementById('prev').onclick=()=>tr.scrollBy({left:-300,behavior:'smooth'}); document.getElementById('next').onclick=()=>tr.scrollBy({left:300,behavior:'smooth'}); const word=document.getElementById('word'); function play(){word.classList.remove('play');void word.offsetWidth;word.classList.add('play')} document.getElementById('replay').onclick=play; if('IntersectionObserver' in window){const io=new IntersectionObserver(es=>{if(es[0].isIntersecting){play();io.disconnect()}},{threshold:.6});io.observe(word)}else play(); document.getElementById('f').addEventListener('submit',e=>{e.preventDefault();document.getElementById('done').hidden=false}); // concentric ring pattern (the cycle) const still=matchMedia('(prefers-reduced-motion: reduce)').matches; const ic=(d)=>`<svg viewBox="0 0 24 24" aria-hidden="true">${d}</svg>`; const W=[ {k:'Family',ph:'in your <span class="o">family.</span>',p:'The hardest place to dwell together is under the same roof. That’s exactly where it matters most.', c:[['Lay down being right','Winning the argument isn’t worth losing the people.'],['Listen first','Hear them out before you lead them.'],['Make home safe','Build a place where everyone can be fully known.']]}, {k:'Business',ph:'in your <span class="o">business.</span>',p:'Success that doesn’t need someone else to lose. Build something that makes the whole community stronger.', c:[['Complement, don’t compete','Partner with the shop next door instead of fighting it.'],['Share the win','Celebrate a competitor’s success like it’s your own.'],['Lead with humility','Serve your team before you ask them to serve you.']]}, {k:'Relationships',ph:'in your <span class="o">relationships.</span>',p:'Friendships, marriages, neighbors. Trade jealousy for joy in someone else’s good news.', c:[['Show up','Be there when it’s inconvenient, not just when it’s easy.'],['Forgive quickly','Don’t let the cycle of offense keep turning.'],['Speak life','Use your words to build people up.']]}, {k:'Together',ph:'<span class="o">together.</span>',p:'Do well together means dwell together. Unity and harmony, the kind Psalm 133 calls wonderful and pleasant.', c:[['Do well together','The way we live and work, side by side.'],['Dwell together','The posture underneath it: humility and unity.'],['Unity & harmony','The result, in every part of life.']]} ]; const n=W.length,SP=360/n,HOLD=3200,GLIDE=1700,itemsEl=document.getElementById('items'),wheel=document.getElementById('wheel'),pbox=document.getElementById('pbox'); let cur=-1,pos=0,from=0,to=0,t0=0,gliding=false,lastStop=performance.now(),paused=false,resumeAt=0; const btns=W.map((w,i)=>{const b=document.createElement('button');b.type='button';b.className='witem';b.setAttribute('role','tab');b.innerHTML=`<span class="pip"></span><span class="lbl">${w.k}</span>`;b.onclick=()=>select(i,true);itemsEl.appendChild(b);return b}); function cssPx(v){return parseFloat(getComputedStyle(wheel).getPropertyValue(v))} const ease=t=>t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2; let ir=cssPx('--ir'); function layout(){btns.forEach((b,i)=>{const a=180+(i-pos)*SP,d=Math.abs(((a-180)%360+540)%360-180),op=Math.max(0,1-d/125); b.style.transform=`rotate(${a}deg) translateX(${ir}px) rotate(${-a}deg)`;b.style.opacity=op.toFixed(3);b.style.visibility=op<.02?'hidden':'visible'}); const c=((Math.round(pos)%n)+n)%n;if(c!==cur){cur=c;btns.forEach((b,i)=>{b.classList.toggle('on',i===cur);b.setAttribute('aria-selected',i===cur);b.tabIndex=i===cur?0:-1});render()}} const phEl=document.getElementById('phrases'); phEl.innerHTML=W.map(w=>`<span>${w.ph}</span>`).join(''); pbox.innerHTML=W.map(w=>`<div class="pb-in"><p class="pb-intro">${w.p}</p><div class="pb-cols">${w.c.map(c=>`<div><h3>${c[0]}</h3><p>${c[1]}</p></div>`).join('')}</div></div>`).join(''); const phs=[...phEl.children],pbs=[...pbox.children]; function render(){phs.forEach((e,i)=>{const was=e.classList.contains('on');e.classList.toggle('on',i===cur);e.classList.toggle('out',was&&i!==cur);if(i===cur)e.classList.remove('out')}); pbs.forEach((e,i)=>e.classList.toggle('on',i===cur))} function glideTo(target,dur){from=pos;to=target;t0=performance.now();gliding=dur;if(still){pos=to;gliding=false;layout()}} function select(i,user){let d=((i-cur)%n+n)%n;if(d>n/2)d-=n;if(user){resumeAt=performance.now()+9000}glideTo(Math.round(pos)+d,900)} function tick(now){ if(gliding){const t=Math.min(1,(now-t0)/gliding);pos=from+(to-from)*ease(t);if(t>=1){gliding=false;pos=to;lastStop=now}} else if(!paused&&now>resumeAt&&now-lastStop>HOLD){glideTo(Math.round(pos)+1,GLIDE)} layout();requestAnimationFrame(tick)} wheel.addEventListener('pointerenter',()=>{paused=true}); wheel.addEventListener('pointerleave',()=>{paused=false;lastStop=performance.now()}); document.getElementById('wup').onclick=()=>select(cur-1,true); document.getElementById('wdown').onclick=()=>select(cur+1,true); itemsEl.addEventListener('keydown',e=>{if(e.key==='ArrowDown'||e.key==='ArrowRight'){select(cur+1,true);e.preventDefault()}if(e.key==='ArrowUp'||e.key==='ArrowLeft'){select(cur-1,true);e.preventDefault()}}); layout(); if(still){paused=true;layout()}else requestAnimationFrame(tick); addEventListener('resize',()=>{ir=cssPx('--ir');layout()}); const c=document.getElementById('rings'),x=c.getContext('2d'); function draw(t){const r=c.getBoundingClientRect(),dpr=devicePixelRatio||1; if(c.width!==r.width*dpr){c.width=r.width*dpr;c.height=r.height*dpr} x.setTransform(dpr,0,0,dpr,0,0);x.clearRect(0,0,r.width,r.height); const rp=document.getElementById('disk').getBoundingClientRect();const cx=rp.left-r.left+rp.width/2,cy=rp.top-r.top+rp.height/2; for(let i=1;i<18;i++){const rad=i*46+((t/60)%46); x.beginPath();x.arc(cx,cy,rad,0,Math.PI*2); x.strokeStyle=`rgba(0,150,255,${Math.max(0,.5-i*.028)})`;x.lineWidth=1.2;x.stroke()} if(!still)requestAnimationFrame(draw)} requestAnimationFrame(draw);addEventListener('resize',()=>{if(still)draw(0)}); </script><script>document.addEventListener('click',function(e){var a=e.target.closest('a[href^="#"]');if(!a)return;var id=a.getAttribute('href').slice(1),el=id?document.getElementById(id):document.body;if(!el)return;e.preventDefault();try{var f=window.frameElement,r=f.getBoundingClientRect();parent.scrollTo({top:parent.scrollY+r.top+el.getBoundingClientRect().top,behavior:'smooth'})}catch(_){el.scrollIntoView({behavior:'smooth'})}});</script><script>(function(){function fit(){try{var f=frameElement,h=document.body.scrollHeight;if(h>f.offsetHeight){f.style.height=h+"px";var p=f.parentElement;if(p)p.style.height=h+"px"}}catch(e){}}addEventListener("load",fit);addEventListener("resize",fit);setTimeout(fit,600)})()</script></html>