*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Inter",Arial,Helvetica,sans-serif;color:#111;background:#fff}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}header{height:74px;padding:8px 5vw;display:flex;align-items:center;gap:40px;position:sticky;top:0;background:#fff;z-index:9;border-bottom:1px solid #eee}nav{display:flex;gap:34px;margin:auto}.btn{display:inline-block;border-radius:40px;padding:14px 22px;font-weight:800}.black{background:#080808;color:white}.green{background:#08a978;color:white}.hero{
display:grid;
grid-template-columns:40% 60%;
min-height:575px;
overflow:hidden;
position:relative;
isolation:isolate;
background:#f6f0e7 url("assets/hero-background.jpg") center/cover no-repeat;
}.copy{padding:45px 3vw 30px 6vw}.copy small,.intro small{letter-spacing:3px}.month{margin:12px 0 25px;font-size:13px}.hero h1{font-size:68px;line-height:.9;letter-spacing:-4px;margin:0 0 14px}.hero h1 span{color:#176c5b}.hero h3{font-size:25px;margin:0}.hero p{font-size:18px;line-height:1.45}.hero-art{
position:relative;
display:flex;
align-items:flex-end;
justify-content:center;
padding:18px 2.5vw 0 0;
z-index:1;
overflow:visible;
}
.hero-art img{
width:min(100%,930px);
max-height:565px;
object-fit:contain;
object-position:center bottom;
filter:drop-shadow(0 22px 24px rgba(35,24,16,.18));
}.uses{display:grid;grid-template-columns:repeat(5,1fr);padding:22px 5vw}.uses div{text-align:center;font-size:26px}.uses b{display:block;font-size:11px;margin-top:8px}.intro,.custom{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:40px 5vw}.intro h2,#como h2,#para h2,.custom h2{font-size:34px;margin:8px 0}.intro p,.custom p{line-height:1.5}.icons{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;align-items:center}.icons div{font-size:34px}.icons b{display:block;font-size:12px;margin-top:8px}#como,#para{padding:25px 5vw}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}.steps article{font-size:30px}.steps strong{font-size:14px;margin-left:8px}.steps h3{font-size:15px}.steps p{font-size:13px}.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.tiles article{text-align:center;padding:25px;border-radius:8px;font-size:28px}.tiles article:nth-child(1){background:#f5a6b6}.tiles article:nth-child(2){background:#f5d579}.tiles article:nth-child(3){background:#a7d5ec}.tiles article:nth-child(4){background:#a8dfc1}.tiles h3{font-size:18px;margin:8px}.tiles p{font-size:13px}.custom{padding:0}.custom img{width:100%;height:100%;object-fit:cover}.custom>div{padding:40px 6vw 40px 0;position:relative}.custom em{position:absolute;right:10%;bottom:30px;font-size:22px;transform:rotate(-8deg)}.cta{background:#080808;color:#fff;text-align:center;padding:28px 5vw}.cta h2{font-size:30px;margin:0}.cta p{margin:8px 0 16px}footer{display:flex;align-items:center;gap:35px;padding:18px 5vw}footer b{margin-left:auto;font-size:12px}
@media(max-width:760px){header{height:62px;padding:8px 18px}header img{width:135px}nav{display:none}header .btn{margin-left:auto;font-size:12px;padding:11px 14px}.hero{grid-template-columns:1fr}.copy{padding:28px 22px 12px}.hero h1{font-size:48px}.hero p{font-size:16px}.hero-art img{max-height:390px}.uses{padding:14px 8px}.uses div{font-size:20px}.uses b{font-size:8px}.intro,.custom{grid-template-columns:1fr;padding:28px 22px}.icons{grid-template-columns:1fr 1fr;gap:22px}.steps{grid-template-columns:1fr}.steps article{font-size:24px}.tiles{grid-template-columns:1fr 1fr}.custom{padding:0}.custom>div{padding:28px 22px 80px}.custom em{bottom:18px}.cta h2{font-size:24px}footer{flex-wrap:wrap;justify-content:center;text-align:center}footer b{margin:0;width:100%}}
@media(max-width:450px){.hero h1{font-size:42px}.tiles{grid-template-columns:1fr}.intro h2,#como h2,#para h2,.custom h2{font-size:28px}}
/* Typography and brand */
.wordmark{display:flex;flex-direction:column;line-height:.78;min-width:max-content}
.wordmark span{font-family:"Boogaloo",cursive;font-size:34px;letter-spacing:.5px}
.wordmark small{font-family:"Inter",sans-serif;font-size:7px;font-weight:800;letter-spacing:2.1px;margin-top:7px}
h1,h2,h3,.month b,.kicker,.hero h3{font-family:"Boogaloo",cursive;font-weight:400}
.hero h1{font-family:"Boogaloo",cursive;font-weight:400;letter-spacing:-1.5px}
.hero h1 span{font-family:"Boogaloo",cursive}
.hero h3{font-size:31px}
.intro h2,#como h2,#para h2,.custom h2,.cta h2{font-weight:400;letter-spacing:.1px}
.tiles h3,.steps h3{font-family:"Boogaloo",cursive;font-weight:400}

/* Font Awesome icon system */
.uses i,.icons i,.steps article>i,.tiles article>i{font-size:30px;font-weight:400}
.uses i,.icons i,.steps article>i,.tiles article>i{
  -webkit-text-stroke:.4px currentColor;
}
.icons div{font-size:inherit}
.steps article{font-size:inherit}
.steps article>i{display:inline-block;margin:0 8px 8px 0}
.tiles article{font-size:inherit}
.tiles article>i{display:block;margin-bottom:8px}
.btn i{font-size:18px}

/* Rotating hero word */
.rotating-word{
  display:inline-block;
  min-width:7ch;
  transform-origin:50% 60%;
  transition:opacity .35s ease,transform .35s ease;
  will-change:opacity,transform;
}
.rotating-word.is-leaving{opacity:0;transform:rotate(-7deg) translateY(-10px)}
.rotating-word.is-entering{opacity:0;transform:rotate(7deg) translateY(10px)}

/* Footer */
footer .footer-wordmark{margin-right:10px}
footer>a{display:inline-flex;align-items:center;gap:8px}
footer>a i{font-size:22px}

@media(max-width:760px){
  .wordmark span{font-size:27px}
  .wordmark small{font-size:6px;letter-spacing:1.5px}
  .hero h3{font-size:27px}
}

.hero:after{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background:linear-gradient(90deg,rgba(248,244,237,.97) 0%,rgba(248,244,237,.91) 34%,rgba(248,244,237,.38) 52%,rgba(248,244,237,0) 72%);
}
.hero .copy{position:relative;z-index:2}
.custom img{aspect-ratio:4/3;object-position:center;}

/* Generated hero and customization assets */
@media(max-width:760px){
  .hero{
    background-position:58% center;
  }
  .hero:after{
    background:linear-gradient(180deg,rgba(248,244,237,.98) 0%,rgba(248,244,237,.92) 43%,rgba(248,244,237,.5) 59%,rgba(248,244,237,.08) 100%);
  }
  .hero-art{
    padding:0 6px 8px;
    min-height:330px;
  }
  .hero-art img{
    width:100%;
    max-height:390px;
  }
  .custom img{
    aspect-ratio:4/3;
    height:auto;
  }
}