@import url('/brands/pupple/assets/fonts/fonts.css');
:root{--green:#c8ed6d;--green-soft:#ddf4a4;--red:#c53023;--dark:#253222;--line:#94b94b;--ease:cubic-bezier(.22,.75,.2,1);color:var(--dark);background:var(--green);font-family:'DM Sans',Arial,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0}html{scroll-behavior:smooth;scroll-padding-top:30px}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:7px}::selection{background:var(--red);color:var(--green)}p,h1,h2,h3{margin:0}.skip{position:fixed;top:-100px;left:20px;padding:15px;z-index:20;background:var(--red);color:var(--green)}.skip:focus{top:10px}header{max-width:1800px;height:90px;margin:auto;padding:15px 4%;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo,.footer-logo{font-family:'Titan One',sans-serif;color:var(--red);letter-spacing:-.045em;line-height:1}.logo{font-size:43px;display:inline-flex;align-items:center}.logo>span{font:22px 'DM Sans';align-self:flex-start;margin-left:3px;transform:rotate(-15deg)}nav{display:flex;align-items:center;gap:35px;font-size:16px;font-weight:600}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;border:0;border-radius:50px;min-height:52px;background:var(--red);color:#fcfaee;padding:15px 26px;white-space:nowrap;font-size:17px;font-weight:600;transition:transform .35s cubic-bezier(.2,1.55,.45,1),background .25s}.button:hover{transform:rotate(-2deg) translateY(-3px)}.button:active{transform:scale(.96)}.button>span{font-size:23px;line-height:1}.button.light{background:var(--green);color:var(--dark)}.hero{max-width:1800px;margin:auto;padding:25px 4% 0}.hero-top{display:grid;grid-template-columns:1fr 3fr;align-items:end;gap:40px;padding:10px 0 26px}.hero-top p{font-size:17px;line-height:1.5;padding-bottom:10px}h1,h2,h3,.big-copy{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;letter-spacing:-.015em;line-height:.88;color:var(--red)}h1{font-size:clamp(74px,8.4vw,153px);text-align:right}h1 br{display:none}h1{max-width:1100px}.hero-photo{position:relative;height:min(580px,48vw);min-height:420px;overflow:hidden;border-radius:10px 10px 130px 10px;background:#749942}.hero-photo>img{width:100%;height:100%;object-fit:cover;object-position:center 57%;transition:transform 1.2s var(--ease)}.hero-photo:hover>img{transform:scale(1.025)}.hero-photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#15201488,transparent 55%)}.photo-copy{position:absolute;left:4%;top:15%;z-index:1;color:#fcfaee}.photo-copy p{font-family:'Barlow Condensed';font-size:clamp(40px,5vw,85px);font-weight:800;line-height:.94;letter-spacing:-.015em;margin-bottom:32px}.good-dog{position:absolute;right:4%;bottom:28px;z-index:2;background:var(--green);color:var(--dark);border:0;width:130px;height:130px;border-radius:50%;transform:rotate(8deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14px;padding:16px;transition:transform .5s cubic-bezier(.22,1.4,.3,1)}.good-dog>span:first-child{font-size:36px;color:var(--red);line-height:1.2}.good-dog:hover{transform:rotate(-7deg) scale(1.05)}.good-dog:active{transform:scale(.93)}.heart-pop{position:absolute;right:11%;bottom:130px;z-index:3;font-size:80px;color:var(--red);opacity:0;pointer-events:none}.heart-pop.pop{animation:heart-pop .9s var(--ease)}@keyframes heart-pop{0%{opacity:0;transform:translateY(0) scale(.4) rotate(-15deg)}30%{opacity:1;transform:translateY(-55px) scale(1.2) rotate(10deg)}100%{opacity:0;transform:translateY(-150px) scale(.8) rotate(-5deg)}}.why{max-width:1600px;margin:auto;padding:110px 7% 100px}.big-copy{font-size:clamp(54px,6.6vw,110px);font-weight:700;line-height:.98;color:var(--dark)}.big-copy span{color:var(--red)}.why-bottom{display:grid;grid-template-columns:1.3fr 1fr;gap:12%;align-items:end;margin-top:45px}.why-bottom p{font-size:20px;line-height:1.6;max-width:510px}.underlined{font-size:17px;font-weight:600;border-bottom:1px solid var(--dark);padding-bottom:12px;display:flex;justify-content:space-between;gap:20px}.underlined span{font-size:24px}.personality{max-width:1800px;padding:75px 4% 95px;margin:auto;border-top:1px solid var(--line)}.personality-heading{margin-bottom:50px}h2{font-size:clamp(55px,6.8vw,112px)}.personality-heading p{font-size:20px;line-height:1.6;margin-top:24px}.personality-picker{display:grid;grid-template-columns:1.05fr 1fr;gap:7%}.choice-list{display:flex;flex-direction:column;justify-content:center}.choice-list button{background:transparent;text-align:left;border:0;border-bottom:1px solid var(--line);color:var(--dark);padding:30px 0;display:flex;gap:20px;align-items:center;font-size:clamp(19px,2vw,29px);letter-spacing:-.045em;transition:padding .4s var(--ease),color .2s}.choice-list button>span:first-child{font-size:15px;letter-spacing:0;width:24px;opacity:.8}.choice-list button>span:last-child{margin-left:auto;transition:transform .3s}.choice-list button[aria-pressed=true]{color:var(--red);padding-left:14px}.choice-list button:hover>span:last-child{transform:rotate(45deg)}.personality-result{min-height:380px;padding:38px 45px;display:flex;flex-direction:column;align-items:flex-start;border-radius:10px 100px 10px 10px;background:var(--green-soft)}.result-symbol{font-size:74px;letter-spacing:-30px;line-height:1.1;color:var(--red);transform:rotate(-10deg);margin-bottom:22px;margin-left:-8px}.personality-result h3{font-size:clamp(34px,3.5vw,53px);max-width:420px;line-height:.98;margin-bottom:20px}.personality-result p{font-size:18px;line-height:1.5;max-width:420px;margin-bottom:28px}.personality-result>span:last-child{font-size:15px;margin-top:auto}.community{max-width:1800px;margin:auto;position:relative;padding:30px 4% 100px;display:grid;grid-template-columns:1.2fr 1fr;gap:6%;align-items:center}.community-photo{border-radius:10px 10px 10px 130px;overflow:hidden;aspect-ratio:1.1}.community-photo img{width:100%;height:100%;object-fit:cover;object-position:45% center}.community-copy h2{font-size:clamp(52px,5.5vw,90px)}.community-copy p{font-size:19px;line-height:1.65;max-width:365px;margin-top:28px}.questions{max-width:1800px;margin:auto;padding:80px 4% 100px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10%}.questions h2{font-size:clamp(45px,5vw,80px)}details{border-bottom:1px solid var(--line)}summary{list-style:none;padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:20px;font-weight:600;cursor:pointer}summary::-webkit-details-marker{display:none}summary span{font-size:30px;font-weight:400;transition:transform .25s}details[open] summary span{transform:rotate(45deg)}details p{font-size:18px;line-height:1.6;padding-bottom:30px;max-width:500px}details a{border-bottom:1px solid}.closing{max-width:1800px;margin:auto;padding:70px 4% 80px;text-align:center}.closing h2{font-size:clamp(70px,9vw,150px);margin-bottom:40px}.closing p{font-size:16px;margin-top:22px}footer{padding:25px 4% 35px;max-width:1800px;margin:auto;overflow:hidden}.footer-logo{display:block;font-size:clamp(120px,24vw,420px);text-align:center;white-space:nowrap;letter-spacing:-.06em;padding-bottom:40px}.footer-logo span{font:80px 'DM Sans';display:inline-block;transform:translate(0,-1em) rotate(-15deg);letter-spacing:0;margin-left:10px}.footer-bottom{display:flex;align-items:center;gap:28px;font-size:14px;border-top:1px solid var(--line);padding-top:25px}.footer-bottom p{flex:1}.footer-bottom button{background:none;color:var(--dark);border:0;padding:5px;font-size:14px}dialog{max-width:min(90vw,600px);padding:48px;background:var(--green);color:var(--dark);border:0;border-radius:12px}dialog::backdrop{background:#183119a6;backdrop-filter:blur(8px)}dialog h2{font-size:45px;line-height:1.05;margin-bottom:24px}dialog p{font-size:18px;line-height:1.6;margin-bottom:28px}dialog .close:first-child{position:absolute;right:20px;top:10px;background:none;border:0;color:var(--dark);font-size:30px}.js-motion .reveal{opacity:0;transform:translateY(30px);transition:opacity .75s var(--ease),transform .75s var(--ease)}.js-motion .reveal.visible{opacity:1;transform:none}
@media(min-width:1700px){.hero-photo{height:620px}.hero-top{padding-bottom:40px}}@media(max-width:1100px){h1 br{display:block}.hero-top{grid-template-columns:1fr 2fr}.hero-photo{min-height:440px}.personality-picker{gap:5%}.personality-result{padding:35px}.footer-logo span{font-size:6vw}}@media(max-width:760px){header{height:78px;padding:18px 5%}.logo{font-size:35px}.logo>span{font-size:17px}nav{gap:0}nav>a:not(.button){display:none}.button{font-size:16px;gap:25px;min-height:48px;padding:13px 23px}header .button{font-size:14px;min-height:43px;padding:11px 18px}.hero{padding:15px 5% 0}.hero-top{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding:10px 0 28px}.hero-top p{font-size:16px;padding:0}.hero-top p br{display:none}h1{text-align:left;font-size:clamp(64px,13vw,96px);line-height:.9;letter-spacing:-.015em}h1 br{display:block}.hero-photo{height:500px;min-height:0;border-radius:8px 8px 85px 8px}.hero-photo>img{object-position:62% center}.hero-photo::after{background:linear-gradient(0deg,#152014bc,transparent 55%)}.photo-copy{top:auto;bottom:32px;left:25px}.photo-copy p{font-size:44px;margin-bottom:24px}.good-dog{width:104px;height:104px;right:16px;top:22px;bottom:auto;font-size:14px;padding:10px;transform:rotate(8deg)}.good-dog>span:first-child{font-size:26px}.heart-pop{top:10px;bottom:auto;right:35px;font-size:50px}.why{padding:65px 5%}.big-copy{font-size:clamp(43px,8.6vw,65px);line-height:1}.why-bottom{display:block;margin-top:27px}.why-bottom p{font-size:18px;margin-bottom:30px}.underlined{font-size:16px;max-width:360px}.personality{padding:50px 5% 65px}.personality-heading{margin-bottom:25px}h2{font-size:clamp(50px,11vw,75px)}.personality-heading p{font-size:18px;line-height:1.5}.personality-picker{grid-template-columns:1fr;gap:30px}.choice-list button{padding:22px 0;font-size:23px;gap:16px}.personality-result{min-height:340px;padding:30px;border-radius:8px 80px 8px 8px}.personality-result h3{font-size:43px}.personality-result p{font-size:17px}.community{grid-template-columns:1fr;padding:10px 5% 65px;gap:38px}.community-photo{aspect-ratio:1.1;border-radius:8px 8px 8px 85px}.community-copy h2{font-size:clamp(51px,11vw,80px)}.community-copy p{font-size:18px;max-width:450px}.questions{grid-template-columns:1fr;gap:30px;padding:55px 5%}.questions h2{font-size:50px}summary{font-size:18px;padding:24px 0}details p{font-size:16px}.closing{padding:40px 5% 50px}.closing h2{font-size:clamp(60px,12vw,90px)}footer{padding:20px 5% 30px}.footer-logo{font-size:22vw;padding-bottom:25px}.footer-logo span{font-size:7vw;transform:translate(0,-.7em)}.footer-bottom{gap:20px;flex-wrap:wrap;font-size:14px}.footer-bottom p{flex-basis:100%}.footer-bottom>span{margin-left:auto}.footer-bottom button{font-size:14px}dialog{padding:40px 25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}}

@media(min-width:1101px){.hero-top{grid-template-columns:1fr 3fr}h1{font-size:clamp(88px,8.7vw,150px)}h1 br{display:block}}