/* Hero Career Widget */

#herocareer {
  /* CSS Variables */
  --color-blue-600: oklch(.546 .245 262.881);
  --color-purple-600: oklch(.558 .288 302.321);
  --color-blue-900: oklch(.379 .146 265.522);
  --color-purple-900: oklch(.381 .176 304.987);
  --color-gray-600: oklch(.446 .03 256.802);
  --color-gray-900: oklch(.21 .034 264.665);
  --color-white: #fff;
  --spacing: .25rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-6xl: 72rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 1.2;
  --text-5xl: 3rem;
  --text-5xl--line-height: 1.1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1.1;
  --font-weight-semibold: 600;
  --leading-tight: 1.1;
  --leading-relaxed: 1.625;
  --radius-2xl: 1rem;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-color: initial;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-gradient-position: to right in oklab;
  --tw-gradient-from: #0000;
  --tw-gradient-via: #0000;
  --tw-gradient-to: #0000;
  --tw-gradient-stops: initial;
  --tw-gradient-via-stops: initial;
  --tw-gradient-from-position: 0%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-to-position: 100%;
}

/* Header spacing - responsive top margin */
#herocareer {
  margin-top: 4rem; /* Default: 64px */
}

/* Image reset - remove any lines/borders */
#herocareer img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
  display: block !important;
}

/* Layout classes */
#herocareer .min-h-screen {
  min-height: 100vh;
}

#herocareer .bg-white {
  background-color: var(--color-white);
}

#herocareer .max-w-6xl {
  max-width: var(--container-6xl);
}

#herocareer .max-w-3xl {
  max-width: var(--container-3xl);
}

#herocareer .max-w-4xl {
  max-width: var(--container-4xl);
}

#herocareer .mx-auto {
  margin-inline: auto;
}

#herocareer .text-center {
  text-align: center;
}

#herocareer .min-h-\[60vh\] {
  min-height: 60vh;
}

#herocareer .flex {
  display: flex;
}

#herocareer .flex-col {
  flex-direction: column;
}

#herocareer .justify-center {
  justify-content: center;
}

#herocareer .items-center {
  align-items: center;
}

/* Spacing */
#herocareer .py-12 {
  padding-block: calc(var(--spacing) * 12);
}

#herocareer .px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

#herocareer .pt-\[96px\] {
  padding-top: 96px;
}

#herocareer .pr-\[40px\] {
  padding-right: 40px;
}

#herocareer .pb-\[0px\] {
  padding-bottom: 0;
}

#herocareer .pl-\[40px\] {
  padding-left: 40px;
}

#herocareer .mb-8 {
  margin-bottom: calc(var(--spacing) * 8);
}

#herocareer .mb-12 {
  margin-bottom: calc(var(--spacing) * 12);
}

#herocareer .mb-16 {
  margin-bottom: calc(var(--spacing) * 16);
}

/* Typography */
#herocareer .text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
}

#herocareer .text-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

#herocareer .text-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

#herocareer .font-semibold {
  font-weight: var(--font-weight-semibold);
}

#herocareer .leading-tight {
  line-height: var(--leading-tight);
}

#herocareer .leading-relaxed {
  line-height: var(--leading-relaxed);
}

/* Colors */
#herocareer .text-gray-900 {
  color: var(--color-gray-900);
}

#herocareer .text-gray-600 {
  color: var(--color-gray-600);
}

#herocareer .text-transparent {
  color: transparent;
}

/* Gradient line and text */
#herocareer .w-20 {
  width: calc(var(--spacing) * 20);
}

#herocareer .h-1 {
  height: calc(var(--spacing) * 1);
}

#herocareer .bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
}

#herocareer .bg-gradient-to-r.from-blue-600.to-purple-600 {
  --tw-gradient-from: var(--color-blue-600);
  --tw-gradient-to: var(--color-purple-600);
  background-image: linear-gradient(to right, var(--color-blue-600), var(--color-purple-600));
}

#herocareer .bg-clip-text {
  background-clip: text;
  -webkit-background-clip: text;
}

/* Image styles */
#herocareer .relative {
  position: relative;
}

#herocareer .rounded-2xl {
  border-radius: var(--radius-2xl);
}

#herocareer .overflow-hidden {
  overflow: hidden;
}

#herocareer .shadow-2xl {
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

#herocareer .w-full {
  width: 100%;
}

#herocareer .h-64 {
  height: calc(var(--spacing) * 64);
}

#herocareer .object-cover {
  object-fit: cover;
  display: block;
  border: none;
  outline: none;
  box-shadow: none;
  vertical-align: top;
}

#herocareer .absolute {
  position: absolute;
}

#herocareer .inset-0 {
  inset: 0;
}

#herocareer .from-blue-900\/20 {
  --tw-gradient-from: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
}

#herocareer .to-purple-900\/20 {
  --tw-gradient-to: color-mix(in oklab, var(--color-purple-900) 20%, transparent);
}

/* Responsive breakpoints */
@media (width >= 40rem) {
  /* Header spacing */
  #herocareer {
    margin-top: 5rem; /* Tablet: 80px */
  }
  
  #herocareer .sm\:py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  
  #herocareer .sm\:px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  
  #herocareer .sm\:text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
  }
  
  #herocareer .sm\:text-xl {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
  }
  
  #herocareer .sm\:mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  
  #herocareer .sm\:mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  
  #herocareer .sm\:w-24 {
    width: calc(var(--spacing) * 24);
  }
  
  #herocareer .sm\:h-80 {
    height: calc(var(--spacing) * 80);
  }
}

@media (width >= 48rem) {
  /* Header spacing */
  #herocareer {
    margin-top: 6rem; /* Desktop: 96px */
  }
  
  #herocareer .md\:py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  
  #herocareer .md\:px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  
  #herocareer .md\:text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--text-5xl--line-height);
  }
  
  #herocareer .md\:h-96 {
    height: calc(var(--spacing) * 96);
  }
}

@media (width >= 64rem) {
  /* Header spacing */
  #herocareer {
    margin-top: 5rem; /* Large desktop: 80px */
  }
  
  #herocareer .lg\:py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  
  #herocareer .lg\:px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  
  #herocareer .lg\:text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--text-6xl--line-height);
  }
}

/* Animation System */
#herocareer.animate-on-scroll h1 { 
  opacity: 0; 
  transform: translateY(30px); 
}

#herocareer.animate-on-scroll .bg-gradient-to-r.w-20 { 
  opacity: 0; 
  transform: scaleX(0); 
  transform-origin: center; 
}

#herocareer.animate-on-scroll p { 
  opacity: 0; 
  transform: translateY(30px); 
}

#herocareer.animate-on-scroll .relative.rounded-2xl { 
  opacity: 0; 
  transform: translateY(50px); 
}

#herocareer.animate-on-scroll.visible h1 { 
  opacity: 1; 
  transform: translateY(0); 
  transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; 
}

#herocareer.animate-on-scroll.visible .bg-gradient-to-r.w-20 { 
  opacity: 1; 
  transform: scaleX(1); 
  transform-origin: center; 
  transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s; 
}

#herocareer.animate-on-scroll.visible p { 
  opacity: 1; 
  transform: translateY(0); 
  transition: opacity 0.8s ease 0.8s, transform 0.8s ease 0.8s; 
}

#herocareer.animate-on-scroll.visible .relative.rounded-2xl { 
  opacity: 1; 
  transform: translateY(0); 
  transition: opacity 0.8s ease 1.0s, transform 0.8s ease 1.0s; 
}