@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align:baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block
}

html {
    scroll-behavior: smooth;
}

body {
    line-height:1;
}

body > div {
    background-color: #fafafa;
    position: relative;
    border-top: 6px solid #feff9c;
    box-shadow: 0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1);
    z-index: 1;
}

#wrapper{
    padding: 0 2rem;
    max-width: 60rem;
    margin: 0 auto;
}


ol, ul {
    list-style: none
}

blockquote, q {
    quotes:none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content:none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

html {
    font-size: 100%;
    line-height: 1;
    color: #333;
    font-family: 'Martel', Georgia, serif;
    background-color: #fafafa;
}

h1, h2, h3, em, a  {
    font-weight: 900;
}

p {
    font-weight: 600;
    line-height: 1.7;
    font-size: 1.1rem;
    max-width: 69ch;
}

h1 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1rem;
}

h1 span, h2 span, h3 span {
    display: block;
    font-family: 'Cantarell';
    font-weight: 500;
    font-size: 1.06rem;
    margin-bottom: 1.7rem;
    text-transform: uppercase;
}

h2 span {
    margin-bottom: 1rem;
    padding-top: 1rem;
}

h1 + p, footer h3 + p {
    display: block;
    text-align: center;
    font-size: 1.34rem;
    line-height: 1.6;
    max-width: 54ch;
    margin:0 auto 3rem;
}

h2 {
    font-size: 2.3rem;
    max-width: 34ch;
    line-height: 1.4;
    margin-bottom: 1.2rem;
}

h3 {
    position: relative;
    font-size: 1.75rem;
    margin-bottom: 1.2rem;
}

a {
    position:relative;
    font-size: 1.2rem;
    letter-spacing: 0;
    color:#333;
    display:inline-block;
    text-decoration: none;
    transition: 0.3s all ease;
    padding:1rem 0;
}

a:hover {
    letter-spacing: 0.02rem;
    padding:1rem 1.2rem;
}

a::before {
    content:"";
    display:block;
    position:absolute;
    z-index:-2;
    left:0;
    right:0;
    bottom:1.17rem;
    height:1rem;
    background:linear-gradient(153.56deg, #feff9c 64.5%, #fdff66 100.91%);
    box-shadow: 0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1);
    transition: 0.3s all ease;
}

a:hover::before {
    bottom:0;
    height: 3.5rem;
    border-radius:0.5rem;
}

a:focus-visible {
    outline: 3px solid #333;
}

#last a:focus-visible {
    outline: 3px solid #fafafa;
}

footer h3 a {
    font-size:inherit;
    margin-top:0;
    padding:0;
}

footer h3 a:hover {
    padding:0;
    letter-spacing:inherit;
}

footer h3 a:hover:before {
    height: 3rem;
    bottom: 0.6rem;
}

section a, footer a {
    margin-top: 2rem;
}

header p + div {
    text-align:center;
}

header p + div a {
    margin: 0 auto;
}

nav {
    margin: 0 auto;
    padding: 2rem 0 6rem;
}

nav ul {
    display: flex;
    align-items: center;
    max-width: 56rem;
    margin:0 auto;
}

nav ul li:first-child{
    margin-right: auto;
}

nav ul li a {
    padding: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing:0.03rem;
}

nav ul li:first-child a, nav ul li:first-child a:hover {
    padding: 0;
}

nav ul li a:hover {
    padding: 1rem;
    letter-spacing:0.04rem;
}

nav ul li a:before {
    height:0;
}

nav ul li a:hover:before {
    bottom: 0.4rem;
    right:1rem;
    left:1rem;
    height: 0.3rem;
}

nav ul li:first-child a::before{
    display:none;
}

nav svg {width:8rem;}

main {
    position: relative;
    margin: 6rem auto 0;
    padding: 3.5rem;
    background:linear-gradient(153.56deg, #feff9c 64.5%, #fdff66 100.91%);
    border-radius: 3rem;
    box-shadow: 0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1);
    z-index: 100;
}     

main:before{
    content:"";
    position:absolute;
    width: 9rem;
    height: 14rem;
    top: -11.5rem;
    right: 0rem;
    animation: 1s ease-out 0s 1 slideUP;
    background-image: url("data:image/svg+xml,%3Csvg width='144' height='300' viewBox='0 0 144 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.0294 232.649L0.932163 292.691C0.785133 294.144 1.16213 295.288 1.84389 296.188C2.53963 297.107 3.59459 297.823 4.86444 298.308C7.43771 299.29 10.6131 299.215 12.6644 298.257L67.3401 272.737C69.6868 271.642 70.7344 270.175 71.0288 268.749C71.3301 267.289 70.8862 265.664 69.8339 264.208C67.711 261.27 63.4209 259.419 59.3286 261.329C50.2036 265.587 41.0795 269.846 31.9553 274.105L31.8799 274.14C31.4661 274.334 30.9739 274.222 30.6841 273.869C30.3943 273.516 30.3804 273.012 30.6503 272.643C61.912 229.988 83.2397 174.617 73.5073 122.278C73.4498 121.969 73.541 121.651 73.7535 121.42C73.966 121.188 74.275 121.07 74.5878 121.1C81.0807 121.736 86.2158 121.928 88.8727 121.759C107.615 120.561 126.151 111.711 135.956 98.9608C140.845 92.6036 143.545 85.3057 143.077 77.4989C142.609 69.6914 138.966 61.2517 130.939 52.6284C108.314 28.315 73.9637 12.8922 43.1561 0.976383C41.8368 0.465621 40.6691 0.828381 39.6359 1.85962C38.5628 2.93059 37.7039 4.68367 37.258 6.68878C36.814 8.68495 36.8068 10.8105 37.3155 12.5663C37.8214 14.3124 38.8026 15.6032 40.2907 16.1789C65.0679 25.7616 90.1511 38.0636 111.393 54.2228L111.816 54.5442C115.73 57.5209 121.87 62.1894 126.65 67.5681C131.549 73.0807 135.34 79.6981 133.233 86.1714C130.593 94.2794 122.296 99.2366 113.33 102.243C104.302 105.27 94.2665 106.434 87.6204 106.736C81.8181 107 75.9177 106.771 70.0351 106.171C69.6483 106.131 69.3195 105.871 69.1919 105.504C64.853 93.009 57.7058 81.0717 46.0751 75.0644C40.7623 72.3211 33.2796 70.8844 26.1641 71.5188C19.0395 72.1541 12.4818 74.8419 8.77983 80.1224C4.73668 85.8895 4.19481 90.7708 5.86159 94.9506C7.56069 99.2115 11.641 102.973 17.3413 106.239C28.7286 112.761 45.9855 116.97 61.0173 119.349C61.4082 119.411 61.7259 119.697 61.8275 120.08C64.4035 129.775 65.41 139.882 65.4863 147.796C65.9069 191.622 47.4246 233.825 20.7343 267.871C20.4596 268.222 19.9865 268.348 19.5735 268.182C19.1606 268.016 18.9074 267.596 18.9524 267.154C20.1294 255.56 21.3057 243.969 22.4809 232.375C22.6989 230.225 21.9317 228.697 20.6839 227.677C19.3968 226.623 17.524 226.056 15.5148 226.064C11.4367 226.08 7.46165 228.391 7.0294 232.649ZM22.1072 89.6859C21.7574 89.4936 21.5554 89.1118 21.5934 88.7144C21.6313 88.3171 21.9019 87.9803 22.2818 87.8578L22.3661 87.8306C23.021 87.6193 23.6444 87.4182 24.1596 87.2624C24.663 87.1102 25.1616 86.9697 25.4834 86.9321L25.4851 86.9319C38.9244 85.3837 48.1471 92.0408 54.273 101.83C54.4882 102.174 54.4743 102.614 54.2376 102.943C54.001 103.273 53.5886 103.427 53.1938 103.333C46.9622 101.851 40.854 99.9424 35.0338 97.5985C33.0694 96.8077 30.8392 95.363 28.6411 93.8845C28.2886 93.6474 27.9364 93.409 27.585 93.1712L27.5847 93.171C25.7048 91.8988 23.8499 90.6435 22.1072 89.6859Z' fill='%23333333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

@keyframes slideUP {
    0% {
      transform: translateY(-30%);
    }
    100% {
      transform: translateY(0);
    }
  }

main section {
    padding:4rem 2rem 0 5.5rem;
    margin:0;
}

section li {
    max-width: 53ch;
    line-height: 1.7;
    position:relative;
    padding-left:1.3rem;
}

section + section li {
        max-width: 49ch;
}

section li + li {
    margin-top:1.1rem;
}

section li:before {
    content:"";
    position:absolute;
    height:0.5rem;
    width:0.5rem;
    top:0.5rem;
    left:0;
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='9' viewBox='0 0 7 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4.78841C7 7.41811 5.15745 9.1084 2.94754 8.9209C1.10499 8.73353 0 7.418 0 5.72777C0 3.84883 2.39503 1.03176 4.4212 0.844256C5.8937 0.655576 6.99996 2.53452 6.99996 4.78824L7 4.78841Z' fill='%23333333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

main section h3:before{
    content:"";
    position:absolute;
    height:55px;
    width:132px;
    max-width: 40%;
    top: -1.5rem;
    left: -10rem;
    background-image: url("data:image/svg+xml,%3Csvg width='132' height='55' viewBox='0 0 132 55' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M41.4118 38.6901C32.5161 38.6901 20.4332 40.7935 11.8068 37.7303C-6.8186 31.1174 -1.88694 3.29159 16 0.21797L16 9.29272C7.20359 10.7809 1.37451 20.6581 10.0838 27.0047L10.0867 27.0039C12.6167 28.8465 15.1808 29.304 18.1902 29.5499C20.7649 29.7603 23.4501 29.5499 26.0306 29.5499L62.3975 29.5499L111.35 29.5499C107.235 27.2188 103.121 24.8877 99.006 22.5567C94.506 20.0073 96.7243 11.5245 101.792 14.3958L129.348 30.0063C132.563 31.8269 133.058 36.4051 129.706 38.3155C120.535 43.5406 111.365 48.7671 102.195 53.9925C97.6569 56.5787 94.1466 48.1247 98.6914 45.535C102.695 43.2534 106.7 40.9717 110.703 38.6901L41.4118 38.6901Z' fill='%23333333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

section{
    margin:7rem 0;
}

#how {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position:relative;
    z-index: 90;
    margin-top:15rem;
}

#how div:first-child {
    width: 100%;
}

#how div:not(:first-child) {
    width: 45%;
}

#how div p:first-child {
    font-size: 1.45rem;
    font-weight: 900;
    margin:1.5rem 0 0.2rem;
}

#how:after{
    content:"";
    position:absolute;
    width: 9rem;
    height: 11rem;
    top: -15.5rem;
    right: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='99' height='222' viewBox='0 0 99 222' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M39.0257 192C37.3271 182.442 30.6391 158.217 28.9713 148.92C22.5931 113.361 26.8534 140.145 21.2397 104.447C19.3839 92.6345 17.4603 80.8407 16.4276 68.9208C16.3567 68.1182 16.2919 67.3186 16.2488 66.5159C15.623 54.8451 9.13189 41.7997 20.5257 38.4999C23.6239 37.605 27.2483 40.5962 30.137 42.548C33.0257 44.4999 44.9108 55.9999 44.9108 55.9999C44.9108 55.9999 64.0255 74.4999 75.3146 80.7679C77.8332 82.6407 83.0255 81.9999 83.0255 81.9999C83.0255 81.9999 87.4311 81.6971 88.2048 78.7909C89.3855 74.3563 89.7828 69.8202 89.6628 65.2565C89.1574 45.9466 85.4458 27.3472 77.1624 9.77795C76.1266 7.58836 74.8411 5.54329 73.201 3.76268C72.2207 2.70478 72.3595 2.0651 73.4477 1.18249C75.4854 -0.468954 76.9996 1.00001 77.869 1.49976C81.6824 3.69246 83.9822 7.24137 86.0199 10.8948C92.7528 22.9838 95.4178 35.0785 97.3628 48.7052C98.1618 54.2838 98.4238 59.8808 98.5098 65.5148C98.6798 76.672 96.1918 83.6991 86.1702 87.9738C79.3789 90.8738 73.1394 90.1818 66.9708 86.4915C58.7707 81.5802 51.9302 75.0144 44.9108 68.6547C38.7576 63.073 32.5243 57.5744 26.3218 52.045C25.8008 51.5806 25.3384 50.9963 23.8772 50.9317C34.1304 112.939 37.0394 129.853 47.5651 190.5C47.5651 187.609 47.5651 169.5 47.5651 169.5C47.5651 169.5 48.3044 149.124 50 141.5C51.1776 136.22 52.2477 133.594 57.5161 132.044C59.6833 131.405 60.5835 132.014 60.5804 134.169C60.5742 138.632 59.0428 168 59.0428 168C59.0428 168 58.7561 185.041 59.0428 203.785C59.1075 208.066 59.0643 212.353 59.126 216.634C59.126 219 57.5 220.5 55.5 221C53.5 221.5 46.5651 221.763 43.5 219.897C40.4349 218.032 37.8318 214.402 36.5 213L25.5 198.5C25.5 198.5 16.5849 184.922 7.5 171C4.55905 166.495 1.86779 161.876 0.613114 156.574C0.428149 155.793 0.258609 154.999 0.209285 154.206C0.0551477 151.718 1.39306 150.764 3.67121 151.838C9.0722 154.378 13.3475 161.225 17.5 165.445C22.7653 170.783 27.5 178 27.5 178C27.5 178 37.7032 191.735 39.0257 192Z' fill='%23333333'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
}


#about div {
    clip-path: inset(0);
}
#about p + p {
    margin-top:1rem;
}

#about div img {
    float: right;
    max-width: 37%;
    height: auto;
    padding-top: 1%;
    shape-outside: circle(11.4rem);
}

section + svg {
    margin: 0 auto;
    display: block;
    max-width: 90%;
}

footer {
    padding: 7rem 0;
}

footer h3 {
    font-size: 3rem;
    text-align: center;
    max-width: 22ch;
    margin: 0 auto 1rem;
    line-height: 1.2;
}

footer h3 + p {
    margin-bottom:0;
}

footer ul {
    display: flex;
    justify-content: space-between;
}

footer ul li a span {
    display: block;
    text-transform: uppercase;
    text-align:center;
    font-family: 'Cantarell';
    font-weight: 500;
    font-size: 0.8rem;
    padding-bottom:1.5rem;
}

#last {
    position: sticky;
    bottom: 0;
    left: 0;
    right:0;
    background: #333;
    color:#fafafa;
    padding: 2rem;
    margin: 0;
    z-index: 0;
}

#last nav {
    padding: 0;
}

#last a {
    color:#fafafa;
    margin-top:0;
}


#last a:before {
    display:none;
}



#last nav svg {
    width: 6rem;
}

#last li {
    padding:0;
}

#last nav ul li:before {
    display:none;
}

#last li + li {
    margin:0;
}

#last p {
    font-size:0.7rem;
    margin:0 auto;
    max-width: 56rem;
    padding-bottom:0.4rem;
}

#last p a {
    font-size:0.7rem;
    font-weight:inherit;
    text-decoration:underline;
    padding:0; 
}

#last p a:hover {
    letter-spacing:0;
    padding:0;
}

@media screen and (max-width:52rem){
    html {font-size:90%;}
    main:before {width:7rem;}
    main section h3:before {width:106px;top:-1.2rem;left:-9.9rem;}
}

@media screen and (max-width:48rem){
    main:before {width:6rem;top:-10rem;}
    #how div:not(:first-child) {width:47%;}
}

@media screen and (max-width:45rem){
    html {font-size:80%;}
    #wrapper {padding: 0 1.4rem;}
    h1 + p, footer h3 + p {font-size:1.4rem;}
    p, li, a {font-size:1.25rem;}
    nav {padding-top:2rem;}
    nav ul li a {font-size:1rem;}
    main section h3:before {width:87px;top:-1.1rem;left:-9.8rem;}
    #how div:not(:first-child) {width:100%;}
}

@media screen and (max-width:40rem){
    footer ul {flex-wrap:wrap;justify-content:space-around;}
    footer ul li {text-align:center;}
    footer ul li:last-child{width:100%;}
}

@media screen and (max-width:35rem){
    main li {font-size:1.1rem;}
    main {padding:2.5rem}
    main section {padding-left:3.5rem;padding-right:0rem;}
    main section h3:before {width:68px;top:-0.8rem;left:-6.64rem;}
}

@media screen and (max-width:30rem){
    main {padding:2.5rem 1.8rem}
    main section {padding-left:2.5rem;padding-right:0rem;}
    main:before {width:5rem;top:-9rem;}
    main section h3:before {width:50px;top:-0.4rem;left:-4.8rem;}
    footer h3 a:before {bottom:0.9rem;}
    footer h3 {font-size: 2rem;}    
}

@media screen and (max-width:25rem){
    #wrapper {padding: 0 1rem;}
    h2 {font-size:1.8rem;}
    h3 {font-size:1.4rem;}
    nav {padding-bottom:4rem;}
    nav svg {padding-bottom:1rem;}
    nav ul {flex-wrap:wrap;justify-content:center;}
    nav ul li:first-child{width:100%;text-align:center;}
    main:before {width:4rem;top:-5rem;}
    #how {margin-top:10rem;}
    #how:after{height:8rem;top:-10.5rem;right:30%;}
    #last nav svg {height:2rem;padding-top:2rem;padding-bottom:0;}
    #last p {text-align:center;padding-top:2rem;}
}

@media screen and (max-width:24rem){
    h1 + p, footer h3 + p {font-size:1.34rem;}
    main:before {width:3.75rem;}
}

@media screen and (max-width:22rem){
    html {font-size:75%;}
    footer ul li {width:100%;}
}