/* ==================================================
   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.
   ================================================== */


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

.services-bg-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}


.home-services-section {
  position: relative;
  z-index: 1;
}

/* 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;
  background: transparent;
  transform: translateZ(0);
}

@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: 69.44vw; /* 1440×1000 canvas ratio */
  overflow: hidden;
  margin-inline: auto;
  align-items: center;
}
/* Tablet + Mobile (800×1200 canvas ratio) */
@media (max-width: 1200px) {
  .productbuilder-banner { width: 100vw; height: 150vw; }
}

.wave-top {
  width: 100vw;
  height: 13vw;
  overflow: hidden;
  background-color: transparent !important;
  margin-bottom: -2px; /* prevent subpixel seam at canvas/section boundary */
}

/* Mobile wave — 800×110px source → 13.75vw height (110/800) */
.wave-top-mobile {
  display: none;
  width: 100vw;
  height: 13.75vw;
  overflow: hidden;
  background-color: transparent !important;
  margin-bottom: -2px;
}

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

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

@media (max-width: 1200px) {
  .wave-top        { display: none; }
  .wave-top-mobile { display: block; }
  .wave-bottom        { display: none; }
  .wave-bottom-mobile { display: block; }
}

.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(55vw, calc(5.46vw + 679px), 94vw);
  text-align: center;
  margin-inline: auto;
  & p {
    font-size: var(--fs-md);
  }
}

.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);
  /* Fluid: 75% of container at widescreen (2380px) → 100% at tablet portrait (1024px).
     calc(472px + 44vw) is the interpolated midpoint — derived from the two endpoints.
     64vw floor keeps it from shrinking further at very wide screens. */
  width: clamp(64vw, calc(472px + 44vw), 100%);
  margin-inline: auto;
  padding-block: var(--pad-sm);
}
@media (max-width: 1200px) {
  .home-logo-grid { 
    grid-template-columns: repeat(2, 1fr); 
    width: clamp(60vw, calc(467px + 33vw), 100%);
  }
}
.home-logo-grid img { width: 100%; height: auto; }

.home-builder-paragraph {
  width: clamp(38vw, calc(5.46vw + 679px), 94vw);
  text-align: center;
  margin-inline: auto;
  & p {
    font-size: var(--fs-md);
  }
}


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

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

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

.home-featured-paragraph {
  width: clamp(45vw, calc(5.46vw + 679px), 94vw);
  text-align: center;
  margin-inline: auto;
  margin-top: var(--gap-base); 
  & p {
    font-size: var(--fs-md);
  }
}


/* Gallery: clips overflow, grab cursor hints draggability */
.hl-gallery {
  overflow: hidden;
  width: 100%;
  cursor: grab;
}
.hl-gallery:active {
  cursor: grabbing;
}

/* Left padding = (viewport - card width) / 2 so card 0 starts centered.
   Derived from card formula calc(52vw + 246px):
   padding = (100vw - 52vw - 246px) / 2 = calc(24vw - 123px) */
.hl-card-list {
  padding-inline-start: calc(24vw - 123px);
  padding-inline-end: calc(24vw - 123px);
}

/* 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-xl);
  list-style: none;
  margin: 0;
  padding-block: 0;
  position: relative;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Individual slide cards ── */
/* Fluid width: 65vw at 1900px → 80vw at 880px, smooth clamp with no jumps.
   formula: calc(52vw + 246px), bounded by 65vw (floor) and 80vw (ceiling) */
.hl-card {
  flex: 0 0 clamp(65vw, calc(52vw + 246px), 90vw);
  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: 16 / 9;
  border-radius: clamp(0rem, 2vw, 5.5rem);
  overflow: hidden;
  flex-shrink: 0;
}

.hl-card-image {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  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: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  display: block;
  opacity: 1;
  /* easeOutExpo — fast start, decelerates, matches work grid card transition */
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 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;
  /* flex-direction: row; */
  flex-direction: column;
  align-items: baseline;
  /* gap: 0.5em;
  padding-left: clamp(0rem, 2vw, 5.5rem); */
  flex-wrap: wrap;
  padding-top: var(--n-16);
}

.hl-card-title {
  margin-bottom: 0.5rem;
}

.hl-card-subtitle {
  font-size: var(--fs-sm);  
  line-height: 1.6;
}

/* ── Controls row ── */
.hl-controls {
  display: flex;
  justify-content: center;
  margin-top: var(--gap-2xl);
}

/* ── Dot nav ── */
.hl-dotnav {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

/* Each dot: small circle */
.hl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-light-grey);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

.hl-dot.current {
  background: var(--color-black);
  transform: scale(1.15);
}

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

/* ── Mobile: stacked vertical layout, no carousel ──
   Covers Mobile Portrait (767px) + Mobile Landscape (880px) */
@media (max-width: 880px) {
  /* Gallery clips on desktop; on mobile let it be natural height */
  .hl-gallery {
    overflow: visible;
    padding-inline-start: 0;
  }
  
  /* Stack cards vertically — disable horizontal flex track */
  .hl-card-list {
    flex-direction: column;
    transform: none !important;
    transition: none;
    gap: 10rem;
    padding-inline-start: 0;
    padding-inline-end: 0;
    padding-bottom: 2rem;
  }

  /* Each card: full width, 900×1440 portrait ratio */
  .hl-card {
    flex: none;
    width: 100%;
  }

  /* Default mobile ratio: 4:5 */
  .hl-card-media {
    aspect-ratio: 4 / 5;
    border-radius: 0;
  }

  /* Size overrides — mirror work card mobile ratios */
  .hl-card--small .hl-card-media  { aspect-ratio: 1 / 1; }
  .hl-card--medium .hl-card-media { aspect-ratio: 4 / 5; }
  .hl-card--large .hl-card-media  { aspect-ratio: 4 / 5; }

  /* All cards visible on mobile */
  .hl-card[aria-hidden="true"] {
    display: flex;
  }

  /* Hide controls (dot nav) on mobile — no carousel */
  .hl-controls {
    display: none;
  }

  .hl-card-footer {
    padding-inline: var(--n-24);
    flex-direction: column;
    gap: 0;
  }

  
}


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

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

.home-services-section {
  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: clamp(32vw, calc(5.46vw + 679px), 94vw);
  text-align: center;
  margin-inline: auto;
  margin-top: var(--gap-base);
  & p {
    font-size: var(--fs-md);
  }
}

.services-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-inline: auto;
}
@media (max-width: 880px) {
  .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: 75%; } }
@media (min-width: 1900px) { .services-card-grid { width: 65%; } }
@media (min-width: 2380px) { .services-card-grid { width: 55%; } }

.services-card {
  padding: var(--pad-lg);
/*   border: 9px solid rgba(255, 255, 255, 0.08); */
	position: relative;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--color-white);
}

.services-card::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: calc(32px + 9px);
  background: rgba(255, 255, 255, 0.08);
  z-index: -1;
}

.services-card p {
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.35 !important;
  color: #d1d1d1;
}
.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;
}
.home-service-btn{
  border: 1px solid var(--color-dark-grey) !important;
  background: rgba(0, 0, 0, 0.39);;
}

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

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

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

.home-thinker-section img {
  display: block;
  margin-inline: auto;
  /* 60% of pl-container at widescreen (2380px) → 50% at 880px, then overridden to 100% by the media query below */
  /* width: clamp(22vw, calc(54.5vw - 84px), 25vw); */
  width:35vw;
}

.home-thinker-text-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: center;
}

.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;
  margin-bottom:0;
}

@media (max-width: 880px) {
  .home-thinker-text-section { grid-template-columns: 1fr; }
  .home-thinker-section img {
    width: 100%;
  }
  .thinker-text {
    border-left: none;
    border-top: 3px solid var(--color-med-grey);
    padding: var(--pad-sm) 0;
    text-align: left;
  }
  .thinker-text p {
    font-size: var(--fs-base);
  }
  .thinker-text:first-child { border-top: none; }
}

/* CTA section styles moved to global.css — available on all pages */