.harc-hero, .harc-hero * { box-sizing: border-box; }
.harc-hero { background: transparent; overflow: hidden; display:flex; align-items:center; justify-content:center; }
.harc-hero__inner {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  justify-content: center;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.harc-hero__letter {
  width: clamp(220px, 26vw, 360px);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(1);
  animation: harc-hero-letter-in 0.1s forwards;
  cursor: pointer;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.harc-hero__letter--1 { animation-delay: 0s; }
.harc-hero__letter--2 { animation-delay: 0.75s; }
.harc-hero__letter--3 { animation-delay: 1.5s; }
.harc-hero__letter--4 { animation-delay: 2.25s; }

.harc-hero__letter svg { width: 100%; height: 100%; display: block; }
.harc-hero__letter video { width: 100%; height: 100%; object-fit: cover; display:block; }

/* A triangle via clip-path */
.harc-hero__letter--2 { position: relative; overflow: hidden; }
.harc-hero__letter--2 video {
  clip-path: polygon(50% 6%, 84% 55%, 16% 55%);
}

/* Zoom/overlay states */
.harc-hero__inner.harc-nav-zoomed .harc-hero__letter { pointer-events:none; }
.harc-hero__inner.harc-nav-zoomed .harc-hero__letter.is-zoomed { z-index:10; }
.harc-hero__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.4s ease;
  z-index: 99999;
}
.harc-hero__overlay.is-visible { opacity: 1; pointer-events:auto; }

.harc-hero__overlay-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.harc-hero__overlay-body {
  max-width: 560px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
  padding: 0 1.25rem;
}
.harc-hero__overlay-hint {
  margin-top: 2rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.7;
}

@keyframes harc-hero-letter-in {
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 700px) {
  .harc-hero__inner { gap: 0.8rem; }
}

#site-header {
	display: none;
}

/* ---------- Responsive layout ---------- */

/* Tablet: switch to 2x2 grid */
@media (max-width: 900px) {
  .harc-hero {
    height: auto !important;          /* play nice inside Elementor sections */
    min-height: 50vh;                 /* still feels like a hero */
    padding: 3rem 1.25rem;
  }

  .harc-hero__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 820px;
  }

  .harc-hero__letter {
    width: 100%;                      /* fill grid cell */
    max-width: none;
    aspect-ratio: 3 / 4;
  }
}

/* Phone: tighter spacing + safer min-height */
@media (max-width: 700px) {
  .harc-hero {
    min-height: 60vh;
    padding: 2rem 1rem;
  }

  .harc-hero__inner {
    gap: 0.75rem;
    max-width: 520px;
  }

  /* Ensure videos/letters never overflow the viewport */
  .harc-hero__letter svg,
  .harc-hero__letter video {
    width: 100%;
    height: 100%;
  }
}

/* Very small phones: slightly shorter tiles */
@media (max-width: 420px) {
  .harc-hero {
    min-height: 55vh;
    padding: 1.5rem 0.75rem;
  }

  .harc-hero__inner {
    gap: 0.6rem;
  }

  .harc-hero__letter {
    aspect-ratio: 3 / 3.8; /* a touch less tall */
  }
}


/* Kill any accidental column borders/dividers in HARC hero */
.harc-hero .elementor-column,
.harc-hero .elementor-widget-wrap {
  border: none !important;
  box-shadow: none !important;
}

.harc-hero * {
  border-left: none !important;
  border-right: none !important;
  padding-left: 6px;
}