@import url("https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&family=Martel:wght@200;900&display=swap");
::-moz-selection { background: #EB38A3; color: #ffffff; }

::selection { background: #EB38A3; color: #ffffff; }

html { scroll-behavior: smooth; }

body { font-size: 16px; line-height: 2rem; }

h1, h2, h3, h4, h5, h6 { color: #616475; font-family: "Martel Sans", sans-serif; font-weight: 900; margin-bottom: 1rem; margin-top: 2rem; }
h1 + h1, h2 + h1, h3 + h1, h4 + h1, h5 + h1, h6 + h1, h1 + h2, h2 + h2, h3 + h2, h4 + h2, h5 + h2, h6 + h2, h1 + h3, h2 + h3, h3 + h3, h4 + h3, h5 + h3, h6 + h3, h1 + h4, h2 + h4, h3 + h4, h4 + h4, h5 + h4, h6 + h4, h1 + h5, h2 + h5, h3 + h5, h4 + h5, h5 + h5, h6 + h5, h1 + h6, h2 + h6, h3 + h6, h4 + h6, h5 + h6, h6 + h6 { margin-top: 1rem; margin-bottom: 1rem; }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 200; }

h1, h2 { color: #EB38A3; margin-top: 3rem; }

p, ul, ol, li { margin-top: 0; margin-bottom: 1rem; }
p strong, ul strong, ol strong, li strong { color: #616475; }

.lead { font-size: 1.15rem; }

hr { width: 100%; margin: 3rem 0 2rem; border: 2px solid #ffffff; }

.button { font-family: 'Martel Sans', sans-serif; display: block; text-decoration: none; color: #3C58EF; font-weight: 900; font-size: 1rem; line-height: 2rem; transition: color 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); }
.button:hover { color: #EB38A3; }
.button + .button { margin-top: 1rem; }

.grid { display: grid; grid-template-columns: 40vh; grid-template-rows: auto; row-gap: 32px; padding: calc(50vh - 35vh) calc(50vw - 20vh); }
@media screen and (min-width: 769px) and (max-height: 75vw) { .grid { grid-template-columns: 17.8vw 17.8vw 17.8vw; grid-template-rows: repeat(auto-fill, 31.5vw); column-gap: 15.2vw; row-gap: 15vh; padding: calc(50vh - 15.75vw) 7.6vw; } }

.content { background: #F8F9FF; display: grid; grid-template-columns: 15vw 70vw 15vw; padding: 40px 0; }
@media screen and (min-width: 769px) { .content { grid-template-columns: 15vw 15vw 40vw 15vw 15vw; padding: 80px 0; } }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content p, .content ul, .content ol, .content hr { grid-column-start: 2; }
@media screen and (min-width: 769px) { .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content p, .content ul, .content ol, .content hr { grid-column-start: 3; } }

.about { background: #F8F9FF; display: grid; grid-template-columns: 40vh; padding: calc(50vh - 35vh) calc(50vw - 20vh); }
.about .aboutme-greeting { display: contents; }
.about .aboutme-intro { margin-top: 2rem; }
.about .aboutme-info { order: 99; }
@media screen and (min-width: 769px) and (max-height: 75vw) { .about { grid-template-columns: 17.8vw 50.8vw; column-gap: 15.2vw; row-gap: 24px; padding: calc(50vh - 15.75vw) 7.6vw; }
  .about .aboutme-greeting { order: 1; display: block; }
  .about .aboutme-intro { order: 2; max-width: 560px; margin-top: 0; }
  .about .aboutme-info { order: 3; } }
.about ul { padding-left: 0; }
.about ul li { list-style: none; font-size: 14px; line-height: 24px; }
.about ul li strong { display: block; }

body { background: #ffffff; font-family: "Martel", serif; color: #202020; padding: 0; margin: 0; }

.site-nav #nav-trigger { display: none; }
.site-nav label { width: 48px; height: 48px; overflow: hidden; background: #3C58EF; border-radius: 24px; text-indent: -9999px; display: block; z-index: 3; position: fixed; cursor: pointer; top: 24px; right: 24px; }
@media screen and (min-width: 769px) and (max-height: 75vw) { .site-nav label { top: 80px; right: 7.6vw; } }
.site-nav label:after { content: ''; width: 20px; height: 20px; display: block; top: calc(50% - 10px); left: calc(50% - 10px); position: absolute; background-image: linear-gradient(#ffffff 4px, transparent 4px, transparent 8px, #ffffff 8px, #ffffff 12px, transparent 12px, transparent 16px, #ffffff 16px); transition: left 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); }
.site-nav label:before { content: ''; width: 20px; height: 20px; display: block; top: calc(50% - 10px); left: calc(50% - 10px + 48px); position: absolute; background-image: linear-gradient(transparent 8px, white 8px, white 12px, transparent 12px), linear-gradient(90deg, transparent 8px, white 8px, white 12px, transparent 12px); transform: rotate(45deg); transition: left 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); }
.site-nav .trigger { position: fixed; top: 0; right: -100vw; width: 100vw; height: 100vh; background-color: #3C58EF; z-index: 2; box-sizing: border-box; transition: right 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); }
@media screen and (min-width: 769px) { .site-nav .trigger .menu-list { grid-column-start: 2; } }
.site-nav .trigger .menu-list a.page-link { color: #ffffff; font-family: "Martel Sans", sans-serif; font-size: 24px; line-height: 64px; display: block; text-decoration: none; text-transform: lowercase; transition: color 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); font-weight: 900; }
@media screen and (min-width: 769px) { .site-nav .trigger .menu-list a.page-link:hover { color: #EB38A3; } }
.site-nav #nav-trigger:checked ~ label { background: #EB38A3; }
.site-nav #nav-trigger:checked ~ label:after { left: calc(50% - 10px - 48px); }
.site-nav #nav-trigger:checked ~ label:before { left: calc(50% - 10px); }
.site-nav #nav-trigger:checked ~ .trigger { right: 0; }

.home-hero:before { content: none; width: 100vw; height: 32px; background: #3C58EF; position: absolute; display: block; bottom: 0; left: 0; }

.home-photo { display: none; }
.home-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media screen and (min-width: 769px) { .home-photo { display: block; grid-column-start: 2; grid-column-end: 4; } }

.home-intro { display: flex; flex-direction: column; }
.home-intro .home-intro-greeting { font-size: 20px; line-height: 32px; color: #EB38A3; font-weight: 900; display: block; text-transform: lowercase; margin: 0; }
.home-intro h1 { font-family: "Martel Sans", sans-serif; font-size: 40px; line-height: 48px; font-weight: 900; color: #EB38A3; text-transform: lowercase; margin: 8px 0 0; }
.home-intro .home-intro-lead { font-size: 16px; line-height: 28px; color: #EB38A3; margin: 0 0 auto 0; }
.home-intro .page-link { font-family: "Martel Sans", sans-serif; font-size: 20px; line-height: 32px; color: #3C58EF; display: block; text-transform: lowercase; margin: 8px 0 0 0; text-decoration: none; transition: color 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); font-weight: 900; }
@media screen and (min-width: 769px) { .home-intro .page-link:hover { color: #EB38A3; } }

.case-hero, .case-next { grid-template-rows: auto; }

.case-photo img { width: 100%; height: 300px; object-fit: cover; display: block; }
@media screen and (min-width: 769px) { .case-photo { display: block; grid-column-start: 2; grid-column-end: 4; } }

.case-intro { display: flex; flex-direction: column; }
.case-intro h1 { font-family: "Martel Sans", sans-serif; font-size: 24px; line-height: 32px; font-weight: 900; color: #EB38A3; text-transform: lowercase; margin: 8px 0 0; }
.case-intro .home-intro-lead { font-size: 16px; line-height: 28px; color: #EB38A3; margin: 0 0 auto 0; }
.case-intro .page-link { font-family: "Martel Sans", sans-serif; font-size: 20px; line-height: 32px; color: #3C58EF; display: block; text-transform: lowercase; margin: 8px 0 0 0; text-decoration: none; transition: color 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); font-weight: 900; }
@media screen and (min-width: 769px) { .case-intro .page-link:hover { color: #EB38A3; } }

.case-next { padding-top: 64px; padding-bottom: 64px; }
.case-next h2 { margin-top: 0; }
.case-next a { width: 100%; display: block; text-decoration: none; color: inherit; margin-bottom: 56px; overflow: hidden; position: relative; }
.case-next a img { width: 100%; height: 300px; object-fit: cover; object-position: center center; display: block; }
.case-next a h2 { font-size: 20px; line-height: 32px; margin: 8px 0 0; }
.case-next a:before { content: ''; width: 0; height: 300px; display: block; transition: width 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); top: 0; right: 0; background: rgba(235, 56, 163, 0.5); position: absolute; }
.case-next a:hover:before { width: 100%; transition: width 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); }

.case-content { display: grid; grid-template-columns: 1fr; padding: 64px 32px; background-color: #F8F9FF; }
.case-content a { font-family: "Martel Sans", sans-serif; text-decoration: none; color: #3C58EF; font-weight: bold; transition: color 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); }
.case-content a:hover { color: #EB38A3; }
.case-content ul { padding-left: 0; }
.case-content ul li { list-style: none; position: relative; }
.case-content ul li:before { content: ''; position: absolute; display: inline-block; width: 7px; height: 7px; border-top: 2px solid #EB38A3; border-left: 2px solid #EB38A3; background: linear-gradient(45deg, transparent 0px, transparent 4px, #EB38A3 4px, #EB38A3 6px, transparent 6px); left: -20px; z-index: 1; top: 10px; transform: rotate(135deg); }
.case-content .gallery-fw, .case-content .gallery-1, .case-content .gallery-2 { width: 100vw; margin: 0 -32px; }
.case-content .gallery-fw img, .case-content .gallery-1 img, .case-content .gallery-2 img { max-width: 100%; height: auto; display: block; margin: 32px 0; border-top: 2px solid #DBDEF0; border-bottom: 2px solid #DBDEF0; }
@media screen and (min-width: 769px) { .case-content { padding: 64px calc(50vw - 280px); grid-template-columns: 560px; }
  .case-content .gallery-fw { width: 100vw; margin: 0 0 0 calc(50% - 50vw); }
  .case-content .gallery-fw img { margin: 64px 0; }
  .case-content .gallery-1 { width: 80vw; margin: 0 0 0 calc(50% - 40vw); }
  .case-content .gallery-1 img { margin: 64px 0; border: 2px solid #DBDEF0; }
  .case-content .gallery-2 { display: grid; width: 80vw; margin: 0 0 0 calc(50% - 40vw); grid-template-columns: calc(50% - 16px) calc(50% - 16px); column-gap: 32px; align-items: stretch; }
  .case-content .gallery-2 img { margin: 64px 0; object-fit: cover; border: 2px solid #DBDEF0; }
  .case-content [class*="gallery-"] + .gallery-2 { margin-top: -64px; } }

.cases-home { position: relative; }
@media screen and (min-width: 769px) and (max-height: 75vw) { .cases-home .cases-intro { top: calc(50vh - 15.75vw); position: fixed; width: 17.8vw; } }
.cases-home .cases-intro h1 { margin-top: 0; }
@media screen and (min-width: 769px) { .cases-home .cases-list { display: block; grid-column-start: 2; grid-column-end: 4; } }
.cases-home .cases-list > a { width: 100%; display: block; text-decoration: none; color: inherit; margin-bottom: 56px; overflow: hidden; position: relative; }
.cases-home .cases-list > a img { width: 100%; height: 300px; object-fit: cover; object-position: center center; display: block; }
.cases-home .cases-list > a h2 { font-size: 20px; line-height: 32px; margin: 8px 0 0; }
.cases-home .cases-list > a:before { content: ''; width: 0; height: 300px; display: block; transition: width 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); top: 0; right: 0; background: rgba(235, 56, 163, 0.5); position: absolute; }
.cases-home .cases-list > a:hover:before { width: 100%; transition: width 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); }

.arrow-icon { position: relative; display: inline-block; width: 20px; height: 20px; top: 3px; }
.arrow-icon:after { content: ''; width: 20px; height: 20px; background: #3C58EF; display: block; border-radius: 16px; top: 0; position: relative; left: 0; transition: background 0.3s cubic-bezier(0.46, 0.33, 0.29, 0.87); }
.arrow-icon:before { content: ''; position: absolute; display: block; width: 7px; height: 7px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; background: linear-gradient(45deg, transparent 0px, transparent 4px, #ffffff 4px, #ffffff 6px, transparent 6px); right: 6px; z-index: 1; top: 5px; }
.arrow-icon.go-down { transform: rotate(-135deg); }

.no-text { height: 20px; overflow: hidden; position: relative; text-indent: -9999px; width: 20px; }
.no-text .arrow-icon { position: absolute; top: 0; left: 0; }

.page-link:hover .arrow-icon:after { background: #EB38A3; }

.cta-box { margin: 32px 0; padding: 32px; background-color: #dbdff1; }
@media screen and (min-width: 769px) { .cta-box { margin: 64px 0; } }
.cta-box p:last-child { margin-bottom: 0; }