/* ============================================================
   JAKZ PRODUCTIONS – style.css
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Tilt Warp', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #ffffff;
  overflow-x: hidden;
  background: url('assets/background.png') no-repeat center center fixed;
  background-size: cover;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   SITE HEADER  –  centred logo at very top
   ============================================================ */
.site-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 24px 0;
  background: transparent;
}

.site-header__logo {
  width: 280px;   /* bigger to match Carrd */
  height: auto;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  /* Shorter than viewport so the first portfolio video peeks in below */
  min-height: calc(100vh - 470px);
  display: flex;
  align-items: center;
  padding: 40px 6% 60px;
  background: transparent;
}

.hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center; /* keeps them at opposite ends */
  gap: 500px;                     /* ← increase this to your liking */
  width: 100%;
}

.hero__left {
  flex: 0 0 auto;          /* don't grow or shrink */
  width: 45%;              /* adjust as needed */
  max-width: 500px;        /* optional: limit text width */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__headline {
  font-size: clamp(3rem, 5.5vw, 4.2rem);
  font-weight: 300;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 40px;
  white-space: nowrap;
}

.hero__sub {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  color: rgba(255,255,255,0.9);
  line-height: 1.25;
  font-weight: 300;
  margin-top: 0;
  white-space: nowrap;
}

.hero__sub .accent {
  color: #ff6b9d;
  font-weight: 300;
}

.hero__right {
  flex: 0 0 auto;          /* don't grow or shrink */
  width: 60%;              /* match the left */
  max-width: 750px;        /* allow video to be a bit wider */
  display: flex;
  flex-direction: column;
  align-items: center;     /* keep video centered within its column */
  gap: 15px;
}

/* ============================================================
   HERO CTA BUTTON – White outline, transparent fill
   ============================================================ */
.hero__cta-btn {
  /* Override the green .hire__btn styles */
  background: transparent !important;
  color: #ffffff !important;
  
  /* White outline */
  border: 5px solid #ffffffd5 !important;
  
  /* Remove the green glow */
  box-shadow: none !important;
  
  /* Keep the same padding, font size, and border-radius as the footer button */
  padding: 12px 40px;
  font-size: 2.2rem;
  font-weight: 580;
  border-radius: 20px;
  
  /* Smooth hover transition */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Ensure it's displayed as inline-block */
  display: inline-block;
  
  /* Center it below the video */
  margin-top: 15px;
}

/* Hover state – subtle white background with transparency */
.hero__cta-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.2);
}

/* Active state – press effect */
.hero__cta-btn:active {
  transform: translateY(0) scale(0.96);
  background: rgba(255, 255, 255, 0.25) !important;
}

/* "free" text inside the button – underlined and slightly different */
.hero__cta-btn .free-highlight {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 300;
}

/* ============================================================
   YOUTUBE FACADE  (used everywhere a video appears)
   ============================================================ */
.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: #000;
  border-radius: 5px;
  overflow: hidden;
}

.yt-facade__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.2s ease;
}

.yt-facade:hover .yt-facade__thumb {
  filter: brightness(0.75);
}

.yt-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
}

.yt-facade:hover .yt-facade__play {
  transform: translate(-50%, -50%) scale(1.1);
}

.yt-facade__play svg {
  width: 100%;
  height: 100%;
}

/* Hero video wrapper */
.video-card {
  width: 100%;
  max-width: 100%;         /* fill the column width */
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* iframe that replaces the facade after click */
.video-card iframe,
.port-entry__video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

.hero__cta-text {
  font-size: 2rem;
  font-weight: 300;
  color: rgba(255,255,255,0.9);
  margin-top: 2px;  
}

.hero__cta-text .free-link {
  font-weight: 300;
  text-decoration: underline;
  color: #ffffff;
}

/* ============================================================
   PORTFOLIO ENTRIES
   ============================================================ */
.portfolio {
  display: flex;
  flex-direction: column;
}

.port-entry {
  display: flex;
  align-items: center;
  min-height: 260px;
  padding: 0;
  overflow: hidden;
}

/* --left: video on the left, info on the right (DOM order = video, info) */
.port-entry--left {
  flex-direction: row;
  background: rgba(80, 133, 202, 0.3);
}

/* --right: video on the right, info on the left (DOM order = info, video) */
.port-entry--right {
  flex-direction: row;
}

/* For --right, reverse the order of children */
.port-entry--right > .port-entry__video {
  order: 2;  /* Move video to the right */
}

.port-entry--right > .port-entry__info {
  order: 1;  /* Move info to the left */
}

/* Each half is exactly 50% */
.port-entry__video {
  flex: 0 0 50%;
  width: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
}

.port-entry__video .yt-facade,
.port-entry__video iframe {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
}

.port-entry__video iframe {
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

.port-entry__info {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 6%;
  align-self: stretch;
  min-height: 260px;
}

.port-entry__name {
  font-size: clamp(2.7rem, 4.0vw, 4.3rem);
  font-weight: 800;
  color: rgb(255, 255, 255);
  letter-spacing: 2px;
  text-align: center;
  font-family: 'Inter', sans-serif;
}

.port-entry__stat {
  font-size: clamp(2.4rem, 3.5vw, 3.2rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.897);
  letter-spacing: 1px;
  text-align: center;
  font-family: 'Inter', sans-serif;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
  background: linear-gradient(135deg, #a0b4e8 0%, #e8a0b4 100%);
  padding: 80px 40px;
}

.testimonials__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 820px;
}

.testimonial-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.4);
}

.testimonial-card__name {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.95);
}

.testimonial-card__quote {
  font-size: 1.2rem;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  font-weight: 500;
}

.testimonial-card__stars {
  font-size: 3rem;
  color: #f5c518;
  letter-spacing: 3px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.hire {
  background: #9b59b6;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.hire__heading {
  font-size: clamp(3.8rem, 5.8vw, 4.5rem);
  font-weight: 300;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.hire__sub {
  font-size: 1.8rem;
  color: rgb(255, 255, 255);
  font-weight: 500;
}

.hire__method {
  font-size: 3.0rem;
  font-weight: 300;
  color: #ffffff;
  margin-top: 40px;
}

.hire__btn {
  display: inline-block;
  background: #0bbe56;
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 580;
  padding: 12px 40px;
  border-radius: 20px;
  margin-top: 20px;
  cursor: pointer; 
  text-decoration: none; /* Good practice for <a> tags */
  
  /* Professional Green Glow matched to the background */
  box-shadow: 0 6px 20px rgba(100, 255, 164, 0.815);
  
  /* Smooth, slightly longer transition for a premium feel */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hire__btn:hover {
  /* Lighten the background slightly to indicate interactivity */
  background: #0ed461; 
  transform: translateY(-3px) scale(1.02); 
  
  /* Deeper, larger green glow */
  box-shadow: 0 12px 35px rgba(29, 255, 123, 0.5);
}

.hire__btn:active {
  /* Mimic the physical press of a button */
  transform: translateY(0) scale(0.96);
  box-shadow: 0 4px 15px rgba(29, 255, 123, 0.2);
}


.footer {
  background: #9b59b6;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 40px 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.footer__wordmark {
  max-width: 200px;
  height: auto;
  margin-bottom: -90px;
  margin-top: 20px;
}

.footer__brand {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1.3;
  color: #ffffff;
  text-transform: uppercase;
}

.footer__brand span {
  font-size: 0.85rem;
  letter-spacing: 6px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

.footer__copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .port-entry--left,
  .port-entry--right {
    flex-direction: column;
    min-height: unset;
  }

  /* Reset order on mobile */
  .port-entry--right > .port-entry__video,
  .port-entry--right > .port-entry__info {
    order: unset;
  }

  .port-entry__video,
  .port-entry__info {
    flex: 0 0 100%;
    width: 100%;
  }

  .port-entry__video {
    padding: 20px;
  }

  .port-entry__video .yt-facade,
  .port-entry__video iframe {
    min-height: unset;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .port-entry__info {
    padding: 36px 6%;
    align-self: center;
    min-height: unset;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 32px 24px 48px;
  }

  .hire {
    padding: 60px 24px;
  }

  .hire__btn {
    padding: 16px 28px;
    font-size: 1rem;
  }

  .testimonials {
    padding: 60px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}