/* Stylesheet for Landing Page (index.html) Hero Section */
.hero-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Video Background Layer */
.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity;
  transition: none; /* Avoid conflicts with manual JS opacity updates */
}

/* Fade-to-black gradient effect blending video into page background */
.video-overlay-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%; /* Soft blend covering the lower portion of the video */
  /* background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%); */
}

/* Hero Content & Layout (Editorial Grid) */
.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 50px 2% 5vh 2%;
  pointer-events: none;
}

/* Enable pointer events only on interactive text & links */
.hero-headline,
.hero-support {
  pointer-events: auto;
}

/* Large top-left aligned headline */
.hero-headline {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  max-width: clamp(320px, 75%, 980px);
  mix-blend-mode: difference;
  position: relative;
  z-index: 5;
}

/* Bottom wrapper grouping left and right details */
.hero-bottom-wrapper {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

.hero-bottom-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  pointer-events: auto; /* Re-enable pointer events for links */
}

.bottom-ctas {
  display: flex;
  gap: 1rem;
}

.bottom-cta-link {
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
  margin-left: 15px;
}

.bottom-cta-link:hover {
  color: #ffffff;
}

.bottom-hairline {
  width: 100%;
  min-width: 200px;
  border: none;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  margin-left: 15px;
}

/* Unique canvas for Three.js background depth particles */
.hero-three-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
}

/* Absolute Morphing Brand Badge styling */
.bottom-brand-badge {
  position: absolute;
  left: 3%;
  right: calc(100% - 2% - 230px);
  bottom: 5vh;
  top: calc(100% - 5vh - 40px);
  background-color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 50;
  box-sizing: border-box;
  will-change: left, right, top, bottom;
}

.bottom-brand-badge .badge-text {
  font-family: "DM Sans", var(--font-primary);
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  will-change: opacity;
}

/* Bottom-right aligned supporting wrapper */
.hero-support {
  align-self: flex-end; /* Align bottom right */
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  text-align: right;
}

/* Supporting body text details */
.hero-description {
  font-family: var(--font-primary);
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.75;
  color: var(--color-text-muted);
  text-align: right; /* Ensure paragraph text lines are right-aligned */
}

/* Minimal Outlined CTA Card */
.cta-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 200px;
  padding: 0.5rem 2rem;
  border-radius: 0px; /* Zero rounded corners to match the website's clean, minimal style */
  text-decoration: none;
  color: black;
  gap: 0;
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.2);

  /* Typographic layout */
  font-family: "DM Sans", var(--font-primary);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;

  /* Smooth hover transitions */
  transition:
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-text {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle Horizontal Arrow Icon */
.cta-arrow {
  width: 0;
  opacity: 0;
  transform: translate3d(-6px, 0, 0);
  transition:
    width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Premium Hover State */
.cta-card:hover {
  border-color: rgba(255, 255, 255, 1);
  gap: 10px; /* Slide the arrow out */
}

/* Micro-interaction: slide arrow and text on hover */
.cta-card:hover .cta-text {
  transform: translate3d(-2px, 0, 0);
}

.cta-card:hover .cta-arrow {
  width: 10px;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Hero Responsive Sizing */
@media screen and (max-width: 768px) {
  .hero-content {
    padding: 90px 6% 4vh 6%;
  }

  .hero-headline {
    font-size: clamp(3rem, 8.5vw, 2.8rem);
    max-width: 100%;
  }

  .hero-description {
    text-align: left;
  }

  .hero-video-wrapper {
    height: 50vh;
  }

  .hero-bottom-wrapper {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2.2rem;
    width: 100%;
  }

  .hero-bottom-left {
    width: 100%;
    align-items: center;
  }

  .bottom-hairline {
    width: 100%;
    min-width: 0;
  }

  .bottom-brand-badge {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 4vh;
    top: calc(100% - 4vh - 35px);
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }

  .bottom-cta-link {
    margin-left: 0px;
  }

  .hero-support {
    align-self: flex-end;
    max-width: 100%;
    gap: 1.6rem;
    width: 100%;
  }

  /* Make the CTA card full-width on mobile viewports for clean layout */
  .cta-card {
    width: 100%;
    min-width: 100%;
  }
}

/* SELECTED WORKS SECTION */
.selected-works-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  padding: 4vh 2% 2vh 2%;
  opacity: 0;
  pointer-events: none; /* Block interactions until expanded */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 60; /* Sits on top of white badge background overlay */
}

.works-title {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(3.2rem, 9.5vw, 8.5rem);
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.04em;
  margin-bottom: 0;
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  will-change: opacity, transform;
}

.works-description {
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1.3vw, 1.3rem);
  line-height: 1.75;
  color: #2e2e31;
  max-width: 340px;
  align-self: flex-end; /* Push to the right edge of the overlay */
  text-align: left; /* Right-align text lines */
  margin-top: 6vh; /* Vertical spacing below heading */
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  will-change: opacity, transform;
}

/* Dynamic Scroll-Driven Project Cards Overlay */
.works-cards-scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

.works-cards-wrapper {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 10%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12vh; /* spacing between cards */
  pointer-events: auto; /* enable links */
  transform: translate3d(0, 100vh, 0);
  will-change: transform;
}

.works-card {
  position: relative;
  width: 42%; /* take up less than half viewport width for zig-zag */
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-sizing: border-box;
}

.card-left {
  align-self: flex-start;
}

.card-right {
  align-self: flex-end;
  margin-top: 3vh; /* vertical stagger offsets */
}

/* Outer image frame */
.card-image-outer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10; /* wide cinematic aspect ratio */
  overflow: hidden;
  background-color: #121214;
}

.card-image-inner {
  position: relative;
  width: 100%;
  height: 160%;
  overflow: hidden;
}

/* Parallax image taller than wrapper */
.parallax-img {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 100%; /* taller for scrolling headroom */
  object-fit: cover;
  filter: grayscale(100%); /* Premium black and white editorial style */
  will-change: transform;
}

/* Card metadata text styles */
.card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
}

.card-title {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 700;
  color: #ffffff; /* text is white on black background overlay */
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.card-desc {
  font-family: var(--font-primary);
  font-size: clamp(0.85rem, 0.95vw, 1.05rem);
  line-height: 1.6;
  color: #8c8c94;
}

.card-link {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
  margin-top: 0.3rem;
  transition:
    border-color 0.4s ease,
    opacity 0.4s ease;
}

.card-link:hover {
  border-color: #ffffff;
  opacity: 0.85;
}

/* Mobile-specific adjustments for project cards */
@media screen and (max-width: 768px) {
  .works-cards-wrapper {
    gap: 5vh;
    padding: 0 6%;
  }

  .works-card {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }

  .card-left,
  .card-right {
    align-self: center;
  }
}

/* Cinematic Statement Section */
.statement-section {
  position: relative;
  width: 100%;
  height: auto;
  min-height: auto;
  background-color: transparent;
  color: #ffffff;
  padding: 4vh 8% 30vh 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 10;
  overflow: hidden;
}

.statement-text {
  font-family: "Familjen Grotesk", var(--font-primary);
  font-size: clamp(1.8rem, 4.2vw, 3.8rem);
  font-weight: 200;
  line-height: 1.1;
  text-align: center;
  max-width: 1100px;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
  will-change: opacity;
}

.statement-text .word {
  display: inline-block;
  opacity: 0.15;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-right: 0.28em;
}

.statement-text .word:last-child {
  margin-right: 0;
}

/* What We Do (Services) Section */
.services-section {
  position: relative;
  width: 100%;
  padding: 10vh 3% 1vh 3%; /* Luxurious, spacious padding for breathing room */
  background: transparent; /* Allows global crosshairs grid to show through */
  color: var(--color-text);
  z-index: 10;
  display: flex;
  flex-direction: column;
}

/* Part 1: Services Intro (Luxury Zig-Zag Spread Style) */
.services-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 10vh;
}

.services-title {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(3.2rem, 10.5vw, 8.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-text);
  margin: 0;
  align-self: flex-start; /* Top-Left aligned */
}

.services-description {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(0.9rem, 1.3vw, 1.3rem);
  font-weight: 400; /* Ultra-light typography weight */
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 380px; /* Narrower focused content width */
  text-align: left; /* Right-align text lines */
  align-self: flex-end; /* Lower-Right aligned */
  margin-top: 10vh; /* Generous empty space between title and text */
}

/* Part 2: Premium Scroll-Driven Storytelling Experience */
.storytelling-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--color-bg-deep);
}

.story-panels {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.story-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  will-change: transform;
}

#story-panel-1 {
  z-index: 10;
}
#story-panel-2 {
  z-index: 20;
}
#story-panel-3 {
  z-index: 30;
}
#story-panel-4 {
  z-index: 40;
}

.story-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.story-bg {
  width: 120%; /* Width buffer for horizontal parallax movement */
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.story-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom right,
    rgba(5, 5, 6, 0) 0%,
    rgba(5, 5, 6, 0.333) 100%
  );
  z-index: 2;
}

.story-content {
  position: absolute;
  bottom: 12vh;
  left: 3%;
  z-index: 10;
  max-width: clamp(320px, 65%, 750px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  pointer-events: auto;
  will-change: opacity, transform;
}

.story-heading {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(3rem, 6.6vw, 6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin: 0;
}

.story-paragraph {
  font-family: var(--font-primary);
  font-size: clamp(0.95rem, 1vw, 1rem);
  font-weight: 300;
  line-height: 1.7;
  color: white;
  margin: 0;
  max-width: clamp(320px, 50%, 550px);
}

/* ==========================================================================
   Responsive Styles for Services Section
   ========================================================================== */
@media screen and (max-width: 768px) {
  .services-section {
    padding: 3vh 6%;
  }

  .services-intro {
    margin-bottom: 8vh;
  }

  .services-title {
    margin-bottom: 1vh;
  }

  .services-description {
    max-width: 100%;
    text-align: left; /* Left-aligned for natural readability on mobile viewports */
    align-self: flex-start; /* Reset to left side on mobile */
    margin-top: 4vh; /* Tighter spacing on mobile */
  }

  .story-content {
    left: 6%;
    bottom: 10vh;
    max-width: 88%;
    gap: 1rem;
  }

  .story-heading {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .story-paragraph {
    font-size: clamp(0.9rem, 4vw, 1.05rem);
    line-height: 1.6;
  }

  .statement-section {
    padding: 20vh 8%;
  }
}

/* ==========================================================================
   About Us Section
   ========================================================================== */
.about-section {
  position: relative;
  width: 100%;
  padding: 10vh 3%; /* Generous top/bottom padding, matching editorial padding of 3% horizontally */
  background-color: var(--color-bg);
  box-sizing: border-box;
}

.about-container {
  display: flex;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  align-items: flex-start;
  gap: 4rem;
}

.about-left {
  position: relative;
}

.about-eyebrow {
  display: block;
  font-family: "DM Sans", var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.about-heading {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 400;
  /* text-transform: uppercase; */
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}

.about-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.about-paragraph {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 400; /* Editorial light weight */
  line-height: 1.7;
  color: rgb(184, 184, 184);
  max-width: 480px; /* Keep reading width narrow for luxury feel */
  margin: 0;
  text-align: justify;
}

/* About CTA Link */
.about-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #ffffff;
  font-family: "DM Sans", var(--font-primary);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 4px;
  margin-top: 1rem; /* Appropriate separation space below paragraphs */
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-cta-link .cta-text {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-cta-link .cta-arrow {
  width: 10px;
  opacity: 0.7;
  transform: translate3d(-3px, 0, 0);
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover State */
.about-cta-link:hover {
  border-color: #ffffff;
}

.about-cta-link:hover .cta-text {
  transform: translate3d(-1px, 0, 0);
}

.about-cta-link:hover .cta-arrow {
  opacity: 1;
  transform: translate3d(2px, 0, 0);
}

/* Responsive Overrides */
@media screen and (max-width: 768px) {
  .about-section {
    padding: 10vh 6%; /* Matches mobile container padding */
  }

  .about-container {
    flex-direction: column;
    gap: 2rem;
  }

  .about-paragraph {
    max-width: 100%;
  }
}

/* ==========================================================================
   Studio Experiments Section
   ========================================================================== */
.experiments-section {
  position: relative;
  width: 100%;
  padding: 10vh 2%;
  background-color: #ffffff;
  color: #000000;
  box-sizing: border-box;
}

.experiments-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8vh;
}

.experiments-header {
  display: flex;
  justify-content: space-between; /* Align header elements to opposite ends */
  width: 100%;
  align-items: flex-start;
  gap: 4rem;
}

.experiments-header-left {
  position: relative;
  align-self: flex-start;
}

.experiments-support-paragraph {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  font-weight: 400;
  line-height: 1.7;
  color: #444444; /* Premium charcoal/gray */
  max-width: 340px; /* blocky width */
  text-align: justify; /* Text right-aligned */
}

.experiments-header-right {
  position: relative;
}

h2.experiments-heading {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(
    3rem,
    7vw,
    7rem
  ); /* Matches visual scale of Selected Works */
  font-weight: 400;
  /* text-transform: uppercase; */
  color: #000000;
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-align: right;
  margin: 0;
}

/* Experiments Cards Grid */
.experiments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6%; /* Generous spacing between cards */
  width: 100%;
  margin-top: 4vh;
}

.experiment-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  opacity: 1;
}

.experiment-card.reveal-active {
  opacity: 1;
  transform: translateY(0);
}

/* Card image wrappers with parallax */
.exp-image-outer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 14;
  overflow: hidden;
  background-color: #121214;
}

.exp-image-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.exp-parallax-img {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%; /* Taller for parallax room */
  object-fit: cover;
  will-change: transform;
}

/* Card metadata text styles */
.exp-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  text-align: left;
}

.exp-title {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(1.2rem, 1.6vw, 1.8rem);
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

.exp-desc {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  line-height: 1.6;
  color: #333333;
  margin: 0;
  max-width: 280px;
}

.exp-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.9rem;
  background: #000;
  color: #fff;
  border-radius: 0px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Responsive Overrides */
@media screen and (max-width: 768px) {
  .experiments-section {
    padding: 10vh 6%;
  }

  .experiments-container {
    gap: 4vh;
  }

  .experiments-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 5vh;
  }

  h2.experiments-heading {
    text-align: left;
  }

  .experiments-header {
    flex-direction: column-reverse; /* Stack heading on top and paragraph below */
    gap: 1.5rem;
    align-items: flex-start;
  }

  .experiments-support-paragraph {
    text-align: left; /* Left align text on mobile */
    margin-top: 0; /* Reset top margin on mobile viewports */
    max-width: 100%;
  }
}

/* ==========================================================================
   Workflow Section
   ========================================================================== */
.workflow-section {
  position: relative;
  width: 100%;
  padding: 10vh 2%;
  background-color: var(--color-bg);
  color: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}

.workflow-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15vh; /* Generous spacing between steps */
}

.workflow-step {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.workflow-intro-heading,
.workflow-intro-paragraph,
.step-heading,
.step-image-outer,
.step-description {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(30px);
  transition:
    opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    filter 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, filter, transform;
}

.workflow-intro-heading.reveal-active,
.workflow-intro-paragraph.reveal-active,
.step-heading.reveal-active,
.step-image-outer.reveal-active,
.step-description.reveal-active {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* Step Left side: heading */
.step-left {
  width: 40%; /* Left column width */
  display: flex;
  justify-content: flex-start;
  text-align: left;
  margin-top: 1rem; /* Balance vertical alignment with card top */
}

/* Step Right side: image and paragraph */
.step-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 35%; /* Right column width */
}

.step-image-outer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 16;
  overflow: hidden;
  background-color: #000000;
}

.step-image-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.step-parallax-img {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%; /* Taller for parallax */
  object-fit: cover;
  will-change: transform;
}

.step-description {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  font-weight: 400;
  line-height: 1.7;
  color: #dfdfdfe4;
  max-width: 460px;
  margin: 0;
  text-align: justify;
}

.step-heading {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(2rem, 6vw, 6rem);
  font-weight: 400;
  color: #fafafa;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  gap: 1.5rem;
}

.step-number {
  font-family: "DM Sans", var(--font-primary);
  font-size: 1em; /* Same size as heading */
  font-weight: 400;
  color: #888888; /* Subtle color */
  letter-spacing: 0.05em;
}

/* Workflow Introductory Header */
.workflow-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 8vh; /* Separate from Step 1 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle hairline spacer */
  margin-bottom: 4vh;
  gap: 4rem;
}

.workflow-intro-left {
  width: 50%;
}

.workflow-intro-paragraph {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65); /* Elegant understated muted white */
  max-width: 350px;
  margin: 0;
  text-align: justify;
}

.workflow-intro-right {
  width: 45%;
  display: flex;
  justify-content: flex-end;
  text-align: justify;
}

.workflow-intro-heading {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  color: #ffffff; /* Elegant white heading */
  margin: 0;
  line-height: 1.1;
  text-align: right;
}

/* Responsive Overrides */
@media screen and (max-width: 768px) {
  .workflow-section {
    padding: 10vh 6%;
  }

  .workflow-container {
    gap: 10vh;
  }

  .workflow-intro {
    flex-direction: column-reverse; /* Stack heading on top of paragraph */
    gap: 1.5rem;
    padding-bottom: 6vh;
  }

  .workflow-intro-left {
    width: 100%;
  }

  .workflow-intro-right {
    width: 100%;
    justify-content: flex-end;
    text-align: left;
  }

  .workflow-intro-paragraph {
    max-width: 100%;
    text-align: right;
  }

  .workflow-step {
    flex-direction: column; /* Normal column stack so heading is on top */
    gap: 1.5rem;
  }

  .step-left {
    width: 100%;
    margin-top: 0;
  }

  .step-right {
    width: 100%;
  }

  .step-heading {
    gap: 0.8rem;
  }
}

/* ==========================================================================
   Final CTA Section
   ========================================================================== */
.final-cta-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000000;
  display: flex;
  box-sizing: border-box;
}

/* Video Background */
.cta-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cta-video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.3s ease;
  will-change: opacity;
}

/* Overlay to improve readability */
.cta-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.151); /* slightly darker overlay */
}

/* Content Layout */
.cta-content-container {
  position: relative;
  z-index: 2; /* Sits in front of video/overlay */
  width: 100%;
  height: 100%;
  padding: 4vh 2%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cta-content-top-left {
  align-self: flex-start;
  max-width: 800px;
}

.cta-heading {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(2.5rem, 6.5vw, 6.5rem);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
}

.cta-heading-paragraph {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgb(255, 255, 255);
  margin-top: 1rem;
  margin-bottom: 0;
  max-width: 420px;
}

.cta-content-bottom-right {
  align-self: flex-end;
  margin-bottom: 2vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.cta-button-paragraph {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgb(255, 255, 255);
  margin-top: 0;
  margin-bottom: 1rem;
  max-width: 360px;
}

.cta-button-large {
  display: inline-block;
  background-color: #ffffff;
  color: #000000;
  text-decoration: none;
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(1.2rem, 1.2vw, 1.2rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.6rem 2.5rem;
  border: none;
  border-radius: 0; /* sharp edges */
  box-sizing: border-box;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, background-color, color, box-shadow;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}

/* Hover and active states */
.cta-button-large:hover {
  background-color: #000000;
  color: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cta-button-large:active {
  transform: translateY(-2px);
  background-color: #111111;
}

/* Mobile responsive fixes */
@media screen and (max-width: 768px) {
  .cta-content-container {
    padding: 5vh 6%;
    gap: 4rem;
  }

  .cta-heading {
    font-size: clamp(2rem, 10vw, 3.5rem);
    line-height: 1.1;
  }

  .cta-heading-paragraph {
    margin-top: 1.5rem;
    max-width: 100%;
  }

  .cta-content-bottom-right {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .cta-button-paragraph {
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .cta-button-large {
    width: 100%;
    text-align: center;
    padding: 1.5rem 2rem;
  }
}

/* Standalone Footer Wrapper Styling */
.portal-footer-wrapper {
  position: relative;
  width: 100%;
  min-height: 50vh;
  background-color: rgb(255, 255, 255);
  color: #040404;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 6;
}

.footer-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10vh 3% 5vh 3%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 2; /* Sits in front of giant background wordmark */
}

/* Top Tagline Area aligned left */
.footer-top-row-intro {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 10vh;
}

.footer-intro-heading {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(3rem, 3.5vw, 3rem);
  font-weight: 400;
  color: #000000;
  margin: 0;
}

/* Giant background wordmark touching bottom edge */
.footer-giant-wordmark-container {
  position: absolute;
  bottom: 0.5vw; /* Touch bottom edge of the screen */
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 0.7;
  z-index: 1; /* Sits behind footer container contents */
  pointer-events: none;
}

.footer-logo-text {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(6rem, 18vw, 18rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.7;
  color: rgba(31, 31, 31, 0.128); /* Faded/low-opacity appearance */
  display: block;
  margin: 0;
  padding: 0;
}

/* Main Content: Multi-column Layout */
.footer-main-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.5fr; /* 3 narrow columns and 1 wider right column */
  gap: 4rem;
  width: 100%;
  margin-bottom: 4vh;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}

.footer-col-right {
  align-items: flex-end;
  text-align: right;
  max-width: 420px;
  justify-self: end;
  gap: 1.5rem;
}

.footer-col-title {
  font-family: "DM Sans", var(--font-primary);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(30, 30, 30, 0.4);
  margin-top: 0;
  margin-bottom: 1rem;
}

.footer-link-item {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  font-weight: 300;
  color: rgba(34, 34, 34, 0.6);
  text-decoration: none;
  transition:
    color 0.3s ease,
    padding-left 0.3s ease;
  line-height: 1.4;
}

.footer-link-item:hover {
  color: #000000;
  padding-left: 4px;
}

.footer-text-item {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
  line-height: 1.4;
}

/* Right Side CTA Elements */
.footer-cta-message {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(1rem, 1.2vw, 1.3rem);
  font-weight: 300;
  line-height: 1.5;
  color: #000000;
  margin: 0;
}

.footer-cta-button {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.7rem 2rem;
  border: none;
  border-radius: 0; /* sharp edges */
  box-sizing: border-box;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, background-color, color, box-shadow;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}

.footer-cta-button:hover {
  background-color: #d4d4d4;
  color: #2b2b2b;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.footer-cta-button:active {
  transform: translateY(-2px);
}

/* Bottom Copyright Section */
.footer-bottom-wrapper {
  width: 100%;
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(1, 1, 1, 0.502);
  margin-top: 0;
  margin-bottom: 3vh;
  width: 100%;
}

.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.footer-copyright,
.footer-credit {
  font-family: "DM Sans", var(--font-primary);
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(24, 24, 24, 0.4);
  margin: 0;
}

/* Mobile Responsive Overrides */
@media screen and (max-width: 1024px) {
  .footer-main-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }

  .footer-col-right {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
    justify-self: start;
  }
}

@media screen and (max-width: 768px) {
  .footer-container {
    height: 95%;
    padding: 4vh 6% 1vh 6%;
    gap: 1.5rem;
  }

  .footer-main-content {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* 2 columns to keep it compact and fit 100vh */
    gap: 1.5rem;
    margin-bottom: 1.5vh;
  }

  .footer-col-right {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
    justify-self: start;
    gap: 0.8rem;
  }

  .footer-cta-message {
    font-size: 0.95rem;
  }

  .footer-cta-button {
    padding: 0.8rem 1.6rem;
    font-size: 0.95rem;
  }

  .footer-bottom-row {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .footer-logo-text {
    font-size: clamp(
      3.5rem,
      14vw,
      7rem
    ); /* Scale down large wordmark to fit screen width */
  }

  .footer-giant-wordmark-container {
    bottom: -1vw;
  }
}

/* ==========================================================================
   Contact Section & Form Styling
   ========================================================================== */
.contact-section {
  position: relative;
  width: 100%;
  padding: 20vh 10%;
  background-color: #000000;
  box-sizing: border-box;
  z-index: 5;
}

.contact-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "form heading"
    "form details";
  gap: 2rem 8rem;
  width: 100%;
}

.contact-left-col {
  grid-area: form;
  display: flex;
  flex-direction: column;
}

.contact-heading-wrapper {
  grid-area: heading;
}

.contact-details-wrapper {
  grid-area: details;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.contact-right-heading {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 4rem 0;
  text-align: justify;
}

.contact-info-block {
  margin-bottom: 2rem;
}

.contact-info-label {
  font-family: "DM Sans", var(--font-primary);
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 0.5rem 0;
}

.contact-email-link {
  font-family: "DM Sans", var(--font-primary);
  font-size: clamp(0.95rem, 1.5vw, 1.5rem);
  font-weight: 300;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-email-link:hover {
  color: rgba(255, 255, 255, 0.6);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-family: "DM Sans", var(--font-primary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

.form-input,
.form-select,
.form-textarea {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  color: #ffffff;
  font-family: "DM Sans", var(--font-primary);
  font-size: 1rem;
  padding: 0.8rem 0;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: #ffffff;
  outline: none;
}

.form-select option {
  background-color: #000000;
  color: #ffffff;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-submit-button {
  align-self: flex-start;
  background-color: #ffffff;
  color: #000000;
  border: none;
  border-radius: 0;
  padding: 0.8rem 3rem;
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, background-color, color, box-shadow;
  margin-top: 1rem;
}

.form-submit-button:hover {
  background-color: #d4d4d4;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1);
}

.form-submit-button:active {
  transform: translateY(-2px);
}

.whatsapp-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #ffffff;
  background: white;
  color: #000000;
  padding: 0.5rem 2rem;
  text-transform: uppercase;
  font-family: "DM Sans", var(--font-primary);
  font-size: 1rem;
  letter-spacing: 0.05em;
  border-radius: 0;
  text-decoration: none;
  transition:
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, background-color, color;
}

.whatsapp-button:hover {
  background-color: #ffffff;
  color: #000000;
  transform: translateY(-4px);
}

.whatsapp-button svg {
  transition: fill 0.4s ease;
}

.whatsapp-button:hover svg {
  fill: #000000;
}

.form-status-message {
  margin-top: 1.5rem;
  font-family: "DM Sans", var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.5;
  display: none;
}

.form-status-message.success {
  color: #4ade80;
  display: block;
}

.form-status-message.error {
  color: #f87171;
  display: block;
}

/* Responsive Styles for Contact Section */
@media screen and (max-width: 1024px) {
  .contact-container {
    gap: 4rem;
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "form heading"
      "form details";
  }
}

@media screen and (max-width: 768px) {
  .contact-section {
    padding: 8vh 6%;
  }

  .contact-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "heading"
      "form"
      "details";
    gap: 3rem;
  }

  .contact-right-heading {
    margin-bottom: 0;
  }

  .form-submit-button {
    width: 100%;
    text-align: center;
  }

  .whatsapp-button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   Scroll Reveal Fade-in Animations (Native CSS + JS)
   ========================================================================== */
.reveal-text {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.reveal-text.revealed {
  opacity: 1;
  transform: translateY(0);
}