@font-face {
  font-family: "FontAwesome";
  src: url("/assets/fonts/fontawesome-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: dark;
  --container: 1170px;
  --section-pad: clamp(24px, 5.7vh, 52px);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: #000;
}
body {
  margin: 0;
  background: #000;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.42857143;
}
a { color: inherit; text-decoration: none; }

.section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--section-pad) 0 16px;
  overflow: hidden;
  background-color: #000;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.container {
  width: min(calc(100% - 30px), var(--container));
  margin-inline: auto;
}
.light-text { color: #fff; }
.dark-text { color: #222; }

.landing { background-image: url("/assets/images/landing.jpg"); }
.problem { background-image: url("/assets/images/problem.jpg"); }
.result { background-image: url("/assets/images/result.jpg"); }
.need { background-image: url("/assets/images/need.jpg"); }
.solution { background-image: url("/assets/images/solution.jpg"); }
.cost { background-image: url("/assets/images/cost.jpg"); }
.message, .invitation { background: #000; }
.about { background-color: #191919; background-image: url("/assets/images/about.jpg"); }

.landing-inner { display: grid; min-height: calc(100svh - 68px); place-items: center; }
.landing-title {
  margin: 0;
  color: #292929;
  font-family: "Cinzel", Georgia, serif;
  font-size: 7vh;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
}

.panel { background: transparent; }
.width-6 { width: 50%; }
.width-8 { width: 66.6666667%; }
.width-9 { width: 75%; }
.align-left { margin-right: auto; }
.align-center { margin-inline: auto; }
.panel-heading {
  padding: 10px 15px;
  font-family: "Poiret One", cursive;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 4px rgba(0,0,0,.85);
}
.panel-heading h2 {
  margin: 20px 0 10px;
  font-size: 4em;
  font-weight: 400;
  line-height: 1.1;
}
.panel-heading .eyebrow {
  margin: 0 0 10px;
  font-size: 2.1em;
  line-height: 1.1;
}
.panel-body {
  padding: 15px;
  background: rgba(122,130,136,.2);
}
blockquote {
  margin: 0 0 20px;
  padding: 10px 20px;
}
blockquote p {
  margin: 0 0 10px;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 2em;
  font-weight: 200;
  line-height: 1.5;
  text-shadow: 1px 1px 4px rgba(0,0,0,.85);
}
blockquote cite {
  display: block;
  color: #f5f5f5;
  font-size: 14px;
  font-style: normal;
  text-align: right;
}
blockquote cite::before { content: "— "; }
.dark-text blockquote cite { color: #222; }

.clear-panel .panel-body { background: rgba(0,0,0,.2); }
.video-panel { padding: 15px 55px; }
.video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.invitation-panel .panel-heading h2 { margin-top: 0; }
.small-copy {
  padding: 15px 35px;
  overflow: auto;
  max-height: min(72svh, 650px);
  text-align: center;
}
.small-copy > p,
.small-copy blockquote p {
  margin: 0 0 10px;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 200;
  line-height: 1.42857143;
  text-shadow: 1px 1px 4px rgba(0,0,0,.85);
}
.small-copy blockquote { margin-bottom: 10px; }

.about-panel { width: 100%; }
.about-panel .panel-heading .eyebrow { margin-top: 10px; }
.about-panel .panel-heading h2 { margin-top: 8px; }
.fire {
  display: block;
  margin-top: 22px;
  font-family: "FontAwesome";
  font-size: 4em;
  line-height: 1;
}
.credit { margin-top: 28px; text-align: center; }
.credit p { font-size: 1.2em; }

.section-nav {
  position: fixed;
  z-index: 20;
  top: 50%;
  right: 17px;
  display: grid;
  gap: 9px;
  transform: translateY(-50%);
}
.nav-link {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.nav-link::after {
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: inherit;
  color: #111;
  content: "";
  transition: background-color .2s ease, color .2s ease;
}
.nav-link.active::after { background: currentColor; }
.nav-label {
  position: absolute;
  top: 50%;
  right: 22px;
  padding: 4px 8px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(5px);
  transition: opacity .15s ease, transform .15s ease;
}
.nav-link:hover .nav-label,
.nav-link:focus-visible .nav-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.nav-link.on-dark::after { color: #fff; }

@media (max-width: 1199px) {
  :root { --container: 970px; }
}
@media (max-width: 991px) {
  :root { --container: 750px; }
  .width-6, .width-8, .width-9 { width: 83.3333333%; }
  .result .panel { width: 50%; }
  .cost .panel, .problem .panel { width: 83.3333333%; }
}
@media (max-width: 767px) {
  html { scroll-snap-type: y proximity; }
  :root { --section-pad: 24px; }
  .section { min-height: 100svh; overflow: visible; }
  .container { width: calc(100% - 24px); }
  .width-6, .width-8, .width-9,
  .result .panel, .cost .panel, .problem .panel { width: 100%; }
  .landing-title { font-size: clamp(2rem, 10vw, 3.5rem); }
  .panel-heading { padding-inline: 10px; }
  .panel-heading h2 { font-size: 3em; }
  .panel-heading .eyebrow { font-size: 1.5em; }
  .panel-body { padding: 10px; }
  blockquote { padding: 8px 10px; }
  blockquote p { font-size: 1.5em; line-height: 1.4; }
  .small-copy { max-height: none; padding: 12px 18px; }
  .small-copy > p, .small-copy blockquote p { font-size: 1em; }
  .video-panel { padding: 10px; }
  .section-nav { right: 6px; gap: 7px; }
  .about-panel .panel-heading h2 { font-size: 2.55em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}