*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, p, a, em, img, strong, sup, u, ul, li, section, main, hr, button { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
ul { list-style: none; }

/* Carrd sizes everything in rem from these root sizes. */
html { font-size: 19pt; }
@media (max-width: 1680px) { html { font-size: 14pt; } }
@media (max-width: 980px) { html { font-size: 12pt; } }
@media (max-width: 736px) { html { font-size: 11pt; } }

:root { --pad-x: 10rem; --hover: #FF828A; }
@media (max-width: 736px) { :root { --pad-x: 2rem; } }
@media (max-width: 360px) { :root { --pad-x: 1.5rem; } }

body {
  line-height: 1;
  min-height: 100vh;
  min-width: 320px;
  overflow-x: hidden;
  overflow-wrap: break-word;
  background-color: #FFFFFF;
  -webkit-text-size-adjust: none;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(85% 85% at 50% 50%, rgba(0,0,0,0.071) 0%, rgba(0,0,0,0.231) 100%), url('../images/bg.jpg');
  background-position: 0% 0%, center;
  background-repeat: repeat, no-repeat;
  background-size: cover, cover;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: #000000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out, visibility 1s;
}
body.is-loading::after { opacity: 1; visibility: visible; }

em { font-style: italic; }
strong { font-weight: bolder; }
u { text-decoration: underline; }
sup { font-size: smaller; vertical-align: super; }
a { color: inherit; text-decoration: underline; transition: color 0.25s ease; }

.site-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}
.site-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  transition: opacity 1s ease, transform 1s ease;
}
body.is-loading .site-main { opacity: 0; transform: translateX(-1.6875rem); }
.site-main > .inner {
  position: relative;
  width: 77rem;
  max-width: 100%;
  padding: 0 var(--pad-x);
}

/* Section switching */
section { transition: opacity 0.375s ease-in-out 0.1875s, transform 0.375s ease-in-out 0.1875s; }
section.inactive { opacity: 0; transform: scale(0.94375); transition: opacity 0.1875s ease-in-out, transform 0.1875s ease-in-out; }
section > * { transition: opacity 1s ease-in-out; }
body.is-loading section > * { opacity: 0; }

/* Shared text */
.title, .tagline, .year, .status, .text-notes, .heading, .text-desc, .footnote, .text-body, .warning, .btn {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 400;
  position: relative;
}
.p { display: block; position: relative; }
.p + .p { margin-top: 1rem; }
p a:hover, h1 a:hover, h2 a:hover { text-decoration: none; }

/* Blocks and columns */
.block { position: relative; display: flex; width: 100%; align-items: center; justify-content: flex-start; }
.cols { flex-wrap: wrap; align-items: flex-start; }
.cols > * { flex: 0 0 auto; max-width: 100%; }
.col-30 { width: 30%; }
.col-70 { width: 70%; }
.col-50 { width: 50%; }

/* Home */
.logo-row { margin-bottom: 1rem; }
.logo { display: block; width: auto; max-width: 100%; height: auto; }
.year {
  color: #FFD9D9;
  font-size: 0.75rem;
  line-height: 1.75;
  font-weight: 800;
  letter-spacing: -0.025rem;
  text-shadow: 0.088rem 0.088rem 0.125rem #5E412C;
}
.title-block { flex-direction: column; align-items: stretch; padding: 0.5rem 0; }
.title { color: #FFF5F5; font-size: 2.75rem; line-height: 1.25; }
.tagline { color: #FAB6D3; font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.1rem; width: calc(100% + 0.1rem); }
.status-block { min-height: 15rem; }
.status { color: #FFE6F0; font-size: 1.375rem; line-height: 1.75; font-weight: 800; width: 100%; }

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 1.5rem; cursor: default; }
.btns > li { max-width: 100%; }
.btns-lg:not(:first-child) { margin-top: 2.125rem; }
.btns-lg:not(:last-child) { margin-bottom: 2.125rem; }
.btns-sm:not(:first-child) { margin-top: 0.625rem; }
.btns-sm:not(:last-child) { margin-bottom: 0.625rem; }
.btn {
  display: inline-block;
  max-width: 100%;
  height: 3.125rem;
  line-height: calc(3.125rem - 2px);
  padding: 0 1.5625rem;
  font-size: 1rem;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.btn-outline { border: solid 1px #FFFFFF; }
.btn-outline:hover { border-color: var(--hover); color: var(--hover); }
.btn-pill { border-radius: 2.5rem; }
.btn-soft {
  line-height: 3.125rem;
  letter-spacing: 0.175rem;
  padding-left: calc(0.175rem + 1.5625rem);
  border-radius: 2.5rem;
  background-color: rgba(255,255,255,0.082);
}
.btn-soft:hover { background-color: var(--hover); }
.btn-back { height: 2.5rem; line-height: calc(2.5rem - 2px); padding: 0 1.25rem; font-size: 0.875rem; }
.btn-small { height: 1.5rem; line-height: calc(1.5rem - 2px); padding: 0 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 2.5rem; }

/* Social icons */
.icons { display: flex; width: 15rem; max-width: 100%; align-items: flex-start; }
.icons > a { flex: 0 0 20%; max-width: 100%; text-align: center; line-height: 0; }
.icons img { max-width: 100%; height: auto; vertical-align: top; }
.icons-home:not(:first-child) { margin-top: 2.125rem; }
.icons-footer { padding: 4rem 0; }

/* Pricing and terms */
.spacer { width: 15rem; max-width: 100%; height: 1.5rem; }
.text-notes { color: #FFFFFF; font-size: 0.75rem; line-height: 1.75; }
.text-notes:not(:first-child) { margin-top: 1.875rem; }
.text-notes:not(:last-child) { margin-bottom: 1.875rem; }
.heading { color: #FFFFFF; font-size: 1.5rem; line-height: 1.375; }
.heading-mono { font-family: 'Source Code Pro', monospace; margin: 1rem 0; }
.heading-anim { margin: 0.75rem 0; }
.divider { display: flex; align-items: center; min-height: 1rem; width: 100%; position: relative; }
.divider::before { content: ''; width: 100%; height: 1px; background-color: #FFFFFF; }
.text-desc, .text-body { color: #FFFFFF; font-size: 1rem; line-height: 1.75; }
.text-desc-simple { margin: 1rem 0; }
.text-desc-anim { margin: 0.5rem 0; }
.price { color: #FFFFFF; font-family: 'Heebo', sans-serif; font-size: 1rem; line-height: 1.75; font-weight: 100; position: relative; }
.footnote { color: #FFFFFF; font-size: 0.625rem; line-height: 1.75; }
.link-pink a:hover { color: var(--hover); }

/* Galleries */
.gallery { text-align: center; line-height: 0; }
.gallery ul { display: flex; flex-wrap: wrap; justify-content: center; }
.gallery li { display: inline-block; position: relative; }
.gallery a { display: block; }
.gallery img { display: inline-block; width: auto; height: auto; max-width: 100%; vertical-align: top; }
.gallery-simple img { max-height: 17rem; }
.gallery-complex img { max-height: 14.75rem; }

/* Videos */
.videos { min-height: 18rem; align-content: center; }
.video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #000000;
}
.video > img, .video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center;
}
.video > img { cursor: pointer; user-select: none; }
.video > video { object-fit: contain; }
.video:not(.is-active)::before, .video:not(.is-active)::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.video:not(.is-active)::before { z-index: 1; background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 100%); }
.video:not(.is-active)::after {
  z-index: 2;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='white' stroke-width='4'/%3E%3Cpolygon points='40,30 70,50 40,70' fill='white'/%3E%3C/svg%3E") center / clamp(1rem, 3.5rem, 25%) no-repeat;
  opacity: 0.75;
  transition: opacity 0.125s ease-in-out;
}
.video:hover::after { opacity: 1; }

/* Old hidden section */
.warning { color: #FFFFFF; font-size: 2.875rem; line-height: 1.375; font-weight: 700; }
.old-grid-a { padding: 1rem 0 0; }
.old-grid-b { min-height: 18rem; margin-bottom: 0.125rem; align-content: center; }
.old-buttons { min-height: 18rem; }
.cover { position: relative; height: 18rem; overflow: hidden; line-height: 0; }
.cover-a { height: 17.875rem; }
.cover > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slideshow { user-select: none; -webkit-touch-callout: none; }
.slideshow > img { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease-in-out, visibility 1s; }
.slideshow > img.visible { opacity: 1; visibility: visible; }
.slideshow .nav {
  position: absolute;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  max-width: 25%;
  height: 100%;
  background: none;
  cursor: pointer;
  opacity: 0.5;
  mix-blend-mode: difference;
  transition: opacity 0.25s ease;
}
.slideshow .nav:hover { opacity: 1; }
.slideshow .nav::before {
  content: '';
  width: 3rem;
  max-width: 50%;
  aspect-ratio: 1 / 1;
  margin-right: -10%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 8 48 32 24 56' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") right / contain no-repeat;
}
.slideshow .nav.next { right: 0; }
.slideshow .nav.previous { left: 0; transform: scaleX(-1); }

/* Lightbox (Carrd dark scheme) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-areas: "previous image next";
  grid-template-columns: min-content auto min-content;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0;
  background-color: rgba(10,10,10,0.85);
  opacity: 0;
  transition: opacity 0.5s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.lightbox[hidden] { display: none; }
.lightbox.visible { opacity: 1; }
.lightbox-inner {
  grid-area: image;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 1em 3em 0 rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(0.75em);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.lightbox.loaded .lightbox-inner { opacity: 1; transform: none; }
.lightbox-inner img { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0 auto; }
.lightbox-nav, .lightbox-close { background-color: transparent; background-repeat: no-repeat; cursor: pointer; transition: opacity 0.25s ease; }
.lightbox-nav {
  width: 8rem;
  height: 6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 8 48 32 24 56' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 3rem;
}
.lightbox-nav.next { grid-area: next; }
.lightbox-nav.previous { grid-area: previous; transform: scaleX(-1); }
.lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 20 44 44M20 44 44 20' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: top 1rem right 1rem;
  background-size: 3rem;
}
@media (orientation: portrait) {
  .lightbox { grid-template-areas: "image"; grid-template-columns: auto; justify-content: center; }
  .lightbox-nav { position: absolute; top: 0; height: 100%; width: 6rem; background-image: none; mix-blend-mode: difference; }
  .lightbox-nav.next { right: 0; }
  .lightbox-nav.previous { left: 0; }
  .lightbox-nav::before {
    content: '';
    position: absolute;
    right: 1rem;
    top: calc(50% - 1.5rem);
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;
    background: rgba(144,144,144,0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 8 48 32 24 56' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
  }
}

/* Phone */
@media (max-width: 736px) {
  .logo-row { padding: 0.75rem 0; margin-bottom: 0; }
  .title-block { padding: 0.75rem 0; }
  .tagline { letter-spacing: 0.0875rem; width: calc(100% + 0.0875rem); }
  .year { letter-spacing: -0.021875rem; }
  .status-block { min-height: 11.25rem; }
  .btns-lg:not(:first-child) { margin-top: 1.59375rem; }
  .btns-lg:not(:last-child) { margin-bottom: 1.59375rem; }
  .btns-sm:not(:first-child) { margin-top: 0.46875rem; }
  .btns-sm:not(:last-child) { margin-bottom: 0.46875rem; }
  .icons-home:not(:first-child) { margin-top: 1.59375rem; }
  .icons-footer { padding: 3.5rem 0; }
  .text-notes:not(:first-child) { margin-top: 1.40625rem; }
  .text-notes:not(:last-child) { margin-bottom: 1.40625rem; }
  .heading-mono { margin: 0.75rem 0; }
  .heading-anim { margin: 0.5625rem 0; }
  .text-desc-simple { margin: 0.75rem 0; }
  .text-desc-anim { margin: 0.375rem 0; }
  .divider::before { width: 100rem; flex-shrink: 0; }
  .gallery-simple img { max-height: 12.75rem; }
  .gallery-complex img { max-height: 11.0625rem; }
  .videos { min-height: 13.5rem; flex-direction: column; flex-wrap: nowrap; }
  .videos > .col-50, .old-grid > .col-50 { width: 100%; }
  .old-grid-a { flex-direction: column; flex-wrap: nowrap; }
  .old-grid-a > .col-50 + .col-50 { padding-top: 1rem; }
  .old-grid-b { min-height: 13.5rem; margin-bottom: 0.09375rem; flex-direction: column; flex-wrap: nowrap; }
  .old-buttons { min-height: 13.5rem; }
  .cover-a { height: 22.34375rem; }
  .cover:not(.cover-a) { height: 22.5rem; }
  .lightbox-close { background-position: top 0.5rem right 0.5rem; }
}
@media (max-width: 480px) {
  .cover-a { height: 17.875rem; }
  .cover:not(.cover-a) { height: 18rem; }
}
@media (max-width: 360px) {
  .title, .warning { font-size: 2rem; }
  .btns { gap: 1.125rem; }
  .logo-row, .title-block { padding: 0.5625rem 0; }
  .status-block { min-height: 7.5rem; }
  .icons-footer { padding: 2.625rem 0; }
  .videos, .old-grid-b, .old-buttons { min-height: 9rem; }
  .old-grid-a > .col-50 + .col-50 { padding-top: 0.75rem; }
  .old-grid-a { padding: 0.75rem 0; }
  .cover-a { height: 15.640625rem; }
  .cover:not(.cover-a) { height: 15.75rem; }
}