/* Nimbus fonts – add .woff2/.woff files to fonts/ folder */
@font-face {
  font-family: 'Nimbus Condensed Bold';
  src: url('fonts/NimbusCondensed-Bold.woff2') format('woff2'),
       url('fonts/NimbusCondensed-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Nimbus';
  src: url('fonts/Nimbus-Regular.woff2') format('woff2'),
       url('fonts/Nimbus-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
:root {
  --red: #8b1538;
  --red-dark: #5c0e26;
  --mint: #b8e6d5;
  --mint-light: #e8f7f2;
  --green: #2BB46E;
  --gray-navy: #2c3e50;
  --black: #0d0d0d;
  --yellow: #f4d35e;
  --white: #fafafa;
  --overlap: 12vh;

  --tilt-deg: 6deg;
}

.grabem-root * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
}

body.grabem-layout .grabem-root {
  font-family: 'Nimbus', sans-serif;
  background: var(--black);
  color: var(--black);
  overflow-x: hidden;
  letter-spacing: initial;
}

.grabem-root section {
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
}

/* ----- Section 1: Full-width movie + placeholder gif ----- */
.section-1 {
  /* height: 95vh; */
  /* min-height: 480px; */
  height: 45vw;
  background: var(--gray-navy);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.section-1 .video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.section-1 .video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* ----- Sections 2–4: Background image, 2-col top, 4-col bottom ----- */
.section-block {
  min-height: 95vh;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-block.bg-1 {
  background-color: var(--mint);
  background-image: url('images/section-bg-1.jpg');
}

.section-block.bg-2 {
  background-color: var(--green);
  background-image: url('images/section-bg-2.jpg');
}

.section-block.bg-3 {
  background-color: var(--mint);
  background-image: url('images/section-bg-3.jpg');
}
  .section-block.bg-4 {
    background-color: var(--black);
    background-image: url('images/section-bg-4.jpg');
  }
.section-block.bg-5 {
  background-color: var(--mint);
  background-image: url('images/section-bg-5.jpg');
}
.section-block.bg-6 {
  background-color: var(--white);
  background-image: url('images/section-bg-6.jpg');
}

.section-block .overlap-wrap {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  padding-bottom: 0;
}

.two-col-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 900px) {
  .two-col-top {
    grid-template-columns: 1fr;
  }
  .two-col-top .custom-headline-1 br {
    display: none;
  }
}

.gif-left {
  max-width: 100%;
}

.gif-left img {
  width: 100%;
  height: auto;
  display: block;      
}

.content-right h3,
h3.title-below {
  font-family: 'Nimbus Condensed Bold', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;      
  letter-spacing: -1px;
  color: var(--green);
}

.bg-2 .content-right h3 {
  color: var(--white);
}




.bg-4 .content h3 {
  color: var(--green);
}
.bg-5 .content-right h3 {
  color: var(--black);
}

.bg-6 .content-right h3 {
  color: var(--green);
}

.section-5.bg-4 h3{
  color: var(--green);
}

.content-right p {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.2;
  color: var(--black);
  margin-bottom: 1rem;
}

.content-right p:last-child {
  margin-bottom: 0;
}

.four-col-movies {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin-top: clamp(1rem, 2vw, 2rem);
}

@media (max-width: 1000px) {
  .four-col-movies {
    grid-template-columns: repeat(2, 1fr);
  }
}

.movie-cell {
  aspect-ratio: 290 / 460;
  overflow: hidden;
  background: var(--black);
}

.movie-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlap-next {
  margin-bottom: calc(-1 * var(--overlap));
  padding-bottom: var(--overlap);
}

.section-block .overlap-receiver {
  padding-top: calc(var(--overlap) * 2);
}

.headline-left {
  font-family: 'Nimbus Condensed Bold', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--black);
}

.headline-left.sr-only,
.gif-label.sr-only {
  margin-bottom: 0;
}

/* ----- Section 5: Two column, gif left, list right ----- */
.section-5 {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  min-height: 95vh;
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
}

@media (max-width: 900px) {
  .section-5 {
    grid-template-columns: 1fr;
  }
}


.section-5 .gif-wrap {
  position: relative;
}

.section-5 .headline-left {
  color: var(--white);
  margin-bottom: 1rem;
}

.section-5 .gif-wrap img {
  width: 100%;
  height: auto;
  display: block;
}



.section-5 .content h3 {
  font-family: 'Nimbus Condensed Bold', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
}

.section-5 .content p{
  margin-bottom: 1.5rem;
}

.list-two-col {
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

@media (max-width: 600px) {
  .list-two-col {
    grid-template-columns: 1fr;
  }
}

.list-two-col ul {
  list-style: none;
}

.list-two-col li {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
}

.list-two-col li::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  background-image: url('images/checkmark.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: -0.5em;
}

/* ----- Section 6: Centered gif, 3 cols, tilted titles ----- */
.section-6 {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  min-height: 95vh;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
}

.section-6 .gif-top {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.section-6 .gif-top img {
  max-width: 850px;
  width: 100%;
  height: auto;
  display: inline-block;
}

.section-6 .gif-top .gif-label {
  display: block;
  font-family: 'Nimbus Condensed Bold', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: 0.5rem;
  color: var(--black);
}

.section-6 h3.title-below {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: var(--black);
}

.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 900px) {
  .three-cols {
    grid-template-columns: 1fr;
  }
}

.col-tilt {
  cursor: default;
}

.col-tilt .tilt-title {
  font-family: 'Nimbus Condensed Bold', sans-serif;
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  font-weight: 300;
  margin-bottom: 1.5rem;
  display: inline-block;
  transition: transform 0.25s ease;
  background-color: var(--black);
  color: var(--green);
  padding-inline: 0.25em;
  padding-top: 0.3em;
  transform: rotate(calc(-1 * var(--tilt-deg)));
}

.col-tilt:nth-child(2) .tilt-title {
  transform: rotate(var(--tilt-deg));
}

.col-tilt:hover .tilt-title {
  transform: rotate(calc(var(--tilt-deg) * 0.5)) scale(1.02);
} 

.col-tilt:hover:nth-child(2) .tilt-title {
  transform: rotate(calc(-1 * var(--tilt-deg) * 0.5)) scale(1.02);      
}

.col-tilt .tilt-content {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.2;
  margin-bottom: 1rem;
  padding-left: 3em;
  padding-right: 1em;
  text-align: left;
  color: var(--black);
}

/* ----- Section 7: BG bottom, 2-col, carousel, arrow, marquee ----- */
.section-7 {
  min-height: 95vh;
  background: var(--white);
  color: var(--black);
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  padding-bottom: 0;
}

.section-7 .two-col-top {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

.section-7 .arrow-block {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.section-7 .arrow-block .label {
  color: var(--green);
  font-family: 'Nimbus Condensed Bold', sans-serif;
  font-size: 3rem;
  font-weight: 800;      
  letter-spacing: -1px;
  margin-top: 1rem;
}

.section-7 .gif-left .headline-left {
  color: var(--black);
  margin-bottom: 0.75rem;
}

.section-7 .gif-left img {
  max-width: 500px;
  margin-inline: auto;
}

.section-7 .content-right h3 {
  color: var(--green);
  font-family: 'Nimbus Condensed Bold', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -1px;
}

.carousel-wrap {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.video-carousel:not(.flickity-enabled) {
  display: flex;
  gap: 1rem;
  width: max-content;
}

.carousel-item {
  flex: 0 0 calc((100vw - 3rem) / 5);
  width: calc((100vw - 3rem) / 5);
  min-width: 200px;
  aspect-ratio: 290 / 460;
  overflow: hidden;
  background: #111;
}

.carousel-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arrow-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.arrow-block .label {
  font-family: 'Nimbus Condensed Bold', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.arrow-block .arrow-wrapper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.arrow-block .arrow-line {
  height: 3px;
  width: 40px;
  background: var(--black);
  flex-shrink: 0;
  animation: arrowGrow 2s ease-in-out infinite;
}

@keyframes arrowGrow {
  0%, 100% { width: 40px; }
  50% { width: 120px; }
}

.arrow-block .arrow-head {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--black);
  margin-left: 2px;
}

/* ----- Footer marquee ----- */
.footer-marquee {
  background: var(--black);
  color: var(--white);
  padding: 0.75rem 0 0.2rem 0;
  overflow: hidden;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  white-space: nowrap;
}

.footer-marquee .marquee-track {
  display: inline-flex;
  animation: marqueeScroll 30s linear infinite;
  width: 200vw;
  justify-content: space-around;
}

.footer-marquee .marquee-content {
  display: inline-flex;
  align-items: center;
  padding: 0 .25rem;
  flex-shrink: 0;
}

span.marquee-content img {
  top: -.125rem;
  position: relative;
  height: 1em;
  vertical-align: middle;
  margin-right: 0.5em;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Troubleshooting: remove class `carousel-debug-only` from <body> to show the full page */
body.carousel-debug-only .section-1,
body.carousel-debug-only #s2,
body.carousel-debug-only #s3,
body.carousel-debug-only #s4,
body.carousel-debug-only #s5,
body.carousel-debug-only #s6,
body.carousel-debug-only #s7 .two-col-top,
body.carousel-debug-only #s7 .arrow-block,
body.carousel-debug-only .footer-marquee {
  display: none !important;
}

body.carousel-debug-only #s7.section-7 {
  min-height: 100vh;
  padding-top: clamp(2rem, 4vw, 4rem);
}

/* Flickity video carousel */
.video-carousel .carousel-item {
  /* Override Bootstrap's .carousel-item defaults (display:none, transitions). */
  display: block;
  float: none;
  position: relative;
  margin-right: 1rem;
  transition: none;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  transform: none;
}

body.grabem-layout .grabem-root #carousel.flickity-enabled .carousel-item {
  display: block;
  float: none;
  position: absolute;
  margin-right: 1rem;
}

.video-carousel.flickity-enabled .carousel-item {
  flex: none;
  width: calc((100vw - 3rem) / 5);
  min-width: 200px;
}

/* With main.css + Bootstrap, cell height can measure 0 until videos decode — lock viewport to 290:460 */
body.grabem-layout .grabem-root #carousel.flickity-enabled .flickity-viewport {
  min-height: max(
    12.5rem,
    calc(((100vw - 3rem) / 5) * (460 / 290))
  );
}

body.grabem-layout .grabem-root #carousel .carousel-item video {
  max-width: none;
  vertical-align: top;
  display: block;
}