/* ==================================================
   HOME — homepage only (is_front_page)
   ================================================== */


/* ─── Content container ──────────────────────────── */
.pl-container {
  width: 85%;
  max-width: clamp(75vw, 2342px, 100%);
  margin-inline: auto;
}
@media (max-width: 1024px) { .pl-container { width: 90%; } }
@media (max-width: 767px)  { .pl-container { width: 94%; } }



/* ==================================================
   UNICORN STUDIO CANVAS SIZING
   These were previously injected by UnicornStudio
   into <style> tags inside the canvas elements when
   Elementor rendered them. Now that we own the
   template we provide them here.
   ================================================== */

/* Canvas fades in to hide the WebGL black-frame flash on init */
[data-us-project],
[data-us-project-src] {
  opacity: 0;
  transition: opacity 0.2s ease;
}
[data-us-initialized] {
  opacity: 1;
}

.hero-banner {
  width: 100vw;
  height: 53.68vw;
  overflow: visible;
  max-width: 2342px;
  max-height: 1257px;
  margin-inline: auto;
  align-items: center;
}
@media (max-width: 1024px) {
  .hero-banner { width: 75vw; height: 100vw; max-width: none; max-height: none; }
}
@media (max-width: 767px) {
  .hero-banner { width: 46vh; height: 100vh; max-width: none; max-height: none; }
}

.productbuilder-banner {
  width: 100vw;
  height: 62.5vw;
  overflow: hidden;
  margin-inline: auto;
  align-items: center;
}
/* Tablet + Mobile (430×932 canvas ratio) */
@media (max-width: 1200px) {
  .productbuilder-banner { width: 100vw; height: 216.74vw; }
}

.wave-top {
  width: 100vw;
  height: 13vw; 
  overflow: hidden;
  background-color: transparent !important;
}

/* Tablet Portrait (880–1024px) */
@media (max-width: 1024px) {
  .wave-top {
    height: 13vw;
  }
}

/* Mobile (0–879px) */
@media (max-width: 879px) {
  .wave-top {
    height: 13vw;
  }
}

.wave-bottom {
  width: 100vw;
  height: 13vw;
  overflow: hidden;
  background-color: transparent !important;
  transform: scaleY(-1);
}

.service-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 64.29vw;
  overflow: visible;
  max-width: 2560px;
  max-height: 1646px;
  z-index: 0;
}
@media (max-width: 880px) {
  .service-bg { 
    height: 100%; 
    min-height: 100%; 
    left: -4%;
  }
}


/* ==================================================
   HERO SECTION
   ================================================== */

.home-hero,
.about-hero {
  padding-top: var(--pad-xl);
}

.home-hero-heading,
.home-builder-heading,
.home-services-heading {
  width: clamp(55%, calc(52vw + 187px), 100%);
  text-align: center;
  margin-inline: auto;
}

/* GSAP base state — revealed by animations.js */
.home-hero-paragraph {
  opacity: 0;
  width: clamp(55%, calc(52vw + 187px), 100%);
  text-align: center;
  margin-inline: auto;
}

.home-hero-video-wrap video {
  width: 100%;
  height: auto;
  display: block;
}


/* ==================================================
   PARTNER / BUILDER SECTION
   ================================================== */
.home-partners {
    margin-top: clamp(-12.5rem, calc(-19vw + 77px), -2rem);
    z-index: 2;
    position: relative;
    color: var(--color-white);
    text-align: center;
    padding-bottom: var(--pad-4xl);
 }
.home-partners-dark {
  background-color: #101010;
  padding-top: var(--pad-5xl);
  padding-bottom: 0;
  color: var(--color-white);
}

.home-partners-logos {
  background-color: #101010;
  padding-block: var(--pad-2xl);
}

.torn-paper {
  line-height: 0;
  overflow: visible;
}
.torn-paper img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: -2px; /* close subpixel gap at section boundary */
}

.home-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  gap: var(--gap-lg);
  width: 60%;
  margin-inline: auto;
  padding-block: var(--pad-sm);
}
@media (max-width: 991px) {
  .home-logo-grid { grid-template-columns: repeat(2, 1fr); width: 100%; }
}
.home-logo-grid img { max-width: 280px; width: 100%; height: auto; }

.home-builder-paragraph {
  width: min(100%, 800px);
  text-align: center;
  margin-inline: auto;
}


/* ==================================================
   FEATURED WORK SECTION — slideshow
   ================================================== */

.home-featured-section {
  padding-block: var(--pad-4xl);
}

/* ── Heading ── */
.home-featured-heading {
  text-align: center;
  margin-bottom: var(--gap-2xl);
}

.home-featured-paragraph {
  width: min(100%, 800px);
  text-align: center;
  margin-inline: auto;
  margin-top: var(--gap-sm);
}

/* ── Gallery: horizontal track, clips overflow so only active + peek are visible ──
   Card width is ~45vw on wide screens, 100% on mobile.
   padding-inline-start offsets the first card from the screen edge. */
.hl-gallery {
  overflow: hidden;
  width: 100%;
  padding-inline-start: clamp(1rem, 5vw, 6rem);
}

/* Horizontal flex track — JS translates this to slide between cards.
   position: relative is required so card.offsetLeft measures from this
   element, not a distant ancestor. */
.hl-card-list {
  display: flex;
  flex-direction: row;
  gap: var(--gap-lg);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Individual slide cards ── */
.hl-card {
  /* Card width: ~45vw on wide, 80vw on mid, 100% on mobile */
  flex: 0 0 clamp(280px, 45vw, 860px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  text-decoration: none;
  color: inherit;
}

.hl-card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* ── Media: fixed aspect ratio, rounded corners, clips overflow ── */
.hl-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1410 / 940;
  border-radius: clamp(16px, 2vw, 32px);
  overflow: hidden;
  flex-shrink: 0;
}

.hl-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video: always visible at opacity 1 as the base layer when there is no image.
   When an image IS present, video starts at opacity 0 and fades in on play.
   JS adds .playing when video starts; removes it on deactivation → image reappears.
   .has-image is set by JS on cards that have both an image and a video. */
.hl-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Only hide video behind image when an image is actually present */
.hl-card.has-image .hl-card-video {
  opacity: 0;
}

.hl-card.has-image .hl-card-video.playing {
  opacity: 1;
}

/* ── Card footer: below the media, in page flow ── */
.hl-card-footer {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding-inline: var(--pad-xs);
}

.hl-card-title {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-black);
  white-space: nowrap;
}

.hl-card-subtitle {
  font-size: var(--fs-sm);
  color: var(--color-med-grey);
  white-space: nowrap;
}

/* ── Controls row ── */
.hl-controls {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
}

/* ── Play/pause: small pill with grey background (matches Figma) ── */
.hl-play-pause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: #f0f0ee;
  cursor: pointer;
  color: var(--color-black);
  flex-shrink: 0;
  padding: 0;
  transition: background 0.2s;
}

.hl-play-pause:hover { background: #e4e4e2; }

.hl-icon-play  { display: none; }
.hl-icon-pause { display: block; }

[data-paused] .hl-icon-play  { display: block; }
[data-paused] .hl-icon-pause { display: none; }

/* ── Dot nav pill: grey rounded container holding all bars ── */
.hl-dotnav-pill {
  background: #f0f0ee;
  border-radius: 999px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
}

.hl-dotnav {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each bar: fixed 68px wide × 8px tall, grey background */
.hl-dot {
  position: relative;
  width: 68px;
  height: 8px;
  border-radius: 8px;
  background: #e4e4e2;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  --hl-duration: 8s; /* overridden per-dot by JS */
}

/* Dark fill bar — scaleX animates left→right on active dot */
.hl-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-black);
  transform: scaleX(0);
  transform-origin: left center;
}

.hl-dot.current::after {
  animation: hl-fill var(--hl-duration) linear forwards;
}

[data-paused] .hl-dot.current::after {
  animation-play-state: paused;
}

.hl-dot.seen::after {
  transform: scaleX(1);
  animation: none;
}

@keyframes hl-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── CTA below controls ── */
.home-featured-cta {
  text-align: center;
  margin-top: var(--gap-2xl);
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .hl-card {
    flex: 0 0 85vw;
  }

  .hl-card-media {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .hl-dot {
    width: 44px;
    height: 6px;
  }
}


/* ==================================================
   SERVICES SECTION
   ================================================== */

.home-services-outer {
  position: relative;
}

.home-services-section {
  background-color: #101010;
  padding-top: var(--pad-3xl);
  padding-bottom: var(--pad-xl);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.home-services-inner {
  position: relative;
  z-index: 2;
}

.home-services-heading {
  width: clamp(55%, calc(52vw + 187px), 100%);
  text-align: center;
  margin-inline: auto;
}

.home-services-paragraph {
  width: min(100%, 800px);
  text-align: center;
  margin-inline: auto;
}

.services-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .services-card-grid { grid-template-columns: 1fr; }
}

.services-card-grid               { width: 100%; }
@media (min-width: 1024px) { .services-card-grid { width: 80%; } }
@media (min-width: 1200px) { .services-card-grid { width: 70%; } }
@media (min-width: 1900px) { .services-card-grid { width: 60%; } }
@media (min-width: 2380px) { .services-card-grid { width: 45%; } }

.services-card {
  padding: var(--pad-md);
  border: 9px solid rgba(255, 255, 255, 0.08);
  border-radius: 40px;
  background: rgba(0, 0, 0, 0.39);
  backdrop-filter: blur(17.5px) !important;
  color: var(--color-white);
}
.services-card p {
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.35 !important;
}
.services-card h2,
.services-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.60;
}
.home-service-cta-wrapper{
  margin-inline:auto;
  display: flex;
}
.home-service-cta {
  color: var(--color-white);
  margin-inline:auto;
  display:block;
  align-items: center;
}

/* ==================================================
   THOUGHT LEADERSHIP SECTION
   ================================================== */

.home-thinker-section {
  padding-block: var(--pad-3xl);
  background-color: var(--color-white);
}

.home-thinker-heading {
  width: min(100%, 1200px);
  text-align: center;
  margin-inline: auto;
}

.home-thinker-section img {
  max-width: 480px;
  width: 100%;
  display: block;
  margin-inline: auto;
}

.home-thinker-text-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 880px) {
  .home-thinker-text-section { grid-template-columns: 1fr; }
}

.thinker-text {
  border-left: 3px solid var(--color-med-grey);
  padding: 0 var(--pad-md);
  text-align: center;
}
.thinker-text:first-child { border-left: none; }
.thinker-text p {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.60;
}

@media (max-width: 880px) {
  .thinker-text {
    border-left: none;
    border-top: 3px solid var(--color-med-grey);
    padding: var(--pad-sm) 0;
    text-align: left;
  }
  .thinker-text:first-child { border-top: none; }
}