/**
 * Prvi Korak hero — direct layout reproduction of Wayo's hero-section.
 * Original classes are retained as structural aliases, but rules are scoped
 * to .pk-hero so that Elementor / unrelated sections are not affected.
 * All theme-specific colors, imagery and text come from NeoWeb Studio.
 */
.pk-hero.section.hero-section {
  position: relative;
  display: flex;
  flex-flow: column;
  height: var(--pk-hero-height, 760px);
  padding: 150px 0 0;
  background-color: var(--pk-hero-bg, #529cb0);
  overflow: hidden;
  isolation: isolate;
}

/* Wayo: base-container w-container, 100% width, 15px lateral padding. */
.pk-hero .pk-hero-heading-container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}
.pk-hero .hero-heading-wrapper {
  position: relative;
  z-index: 3;
  max-width: min(100%, var(--pk-hero-heading-width, 1150px));
  text-align: right;
  margin: 0 auto;
}
.pk-hero .hero-heading {
  margin: 0;
  font-family: var(--pk-font-heading, Agdasima, sans-serif);
  font-size: var(--pk-h1-size, 150px);
  font-weight: var(--pk-heading-weight, 700);
  color: var(--pk-hero-heading-color, #eef2f2);
  line-height: .82em;
  letter-spacing: -3.44px;
  text-align: center;
  text-wrap: initial;
}
.pk-hero .hero-heading.align-right { text-align: right; }
.pk-hero .hero-heading.align-left { text-align: left; }
.pk-hero .hero-heading.align-center { text-align: center; }

/* Wayo: number-s-block creates a gradient behind the statistics only. */
.pk-hero .number-s-block {
  position: relative;
  z-index: 3;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: auto;
  background-image: linear-gradient(#1e1c1c00, #1e1c1ccc 84%);
}
.pk-hero .number-s-hero-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  max-width: 100%;
  padding: 24px 15px 50px;
  margin: auto auto 0;
  align-items: center;
  justify-content: space-between;
}
.pk-hero .number-item {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  column-gap: 12px;
  min-width: 0;
}
.pk-hero .number {
  position: relative;
  display: inline-block;
  flex: none;
  margin: 0;
  font-family: var(--pk-font-heading, Agdasima, sans-serif);
  font-size: 140px;
  font-weight: var(--pk-heading-weight, 700);
  line-height: .82em;
  letter-spacing: -2.8px;
  color: var(--pk-light, #eef2f2);
  white-space: nowrap;
}
.pk-hero .number-description {
  max-width: 120px;
  margin: 0;
  font-family: var(--pk-font-body, Geist, sans-serif);
  color: var(--pk-light, #eef2f2);
  font-size: 14px;
  line-height: 1.1em;
  font-weight: 600;
  letter-spacing: -.54px;
  text-transform: uppercase;
}
.pk-hero .plus-span {
  position: absolute;
  top: 10px;
  width: 40px;
  height: 40px;
  margin-left: 12px;
  background: url('../../images/hero/plus.svg') center / cover no-repeat;
  vertical-align: super;
}
/* Position after the characters. Unlike inline text, this preserves original
   Webflow behavior when the number is animated letter by letter. */
.pk-hero .number > .plus-span { left: 100%; }

/* Image wrapper is bottom-aligned; mountain sits over the decorative sun. */
.pk-hero .images-wrapper-hero-section {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.pk-hero .image-mountain-hero {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: cover;
}
.pk-hero .image-sun-hero {
  position: absolute;
  inset: auto auto 100px 100px;
  z-index: 0;
  display: block;
  width: 500px;
  height: 500px;
  max-width: none;
  object-fit: cover;
}
.pk-hero .pk-hero-sun-fallback {
  position: absolute;
  inset: auto auto 100px 100px;
  width: 500px;
  aspect-ratio: 1;
  z-index: 0;
  border-radius: 50%;
  background: var(--pk-accent, #da6f4d);
}
.pk-hero .pk-fallback-landscape {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  width: 100%;
  height: 430px;
  background: linear-gradient(to top,#213330,#21333090 33%,#243a3500 68%),linear-gradient(165deg,transparent 45%,#546d68 45% 70%,transparent 70%),linear-gradient(20deg,transparent 42%,#9bb0ab 42% 65%,transparent 65%);
  clip-path: polygon(0 62%,7% 44%,15% 57%,23% 32%,32% 53%,45% 12%,60% 50%,70% 27%,78% 47%,87% 31%,100% 60%,100% 100%,0 100%);
}
.pk-hero .pk-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--pk-hero-overlay, 0));
}

@media screen and (min-width:1280px) {
  .pk-hero.section.hero-section { height: max(100vh, var(--pk-hero-height, 760px)); }
  .pk-hero .hero-heading { font-size: calc(var(--pk-h1-size,150px) * 1.1466667); }
}
@media screen and (min-width:1440px) {
  /* At >= 1440, Wayo uses 172px H1, with the same underlying design tokens. */
  .pk-hero .hero-heading { font-size: calc(var(--pk-h1-size,150px) * 1.1466667); }
}
@media screen and (min-width:1920px) {
  .pk-hero.section.hero-section { padding-top: 200px; }
  .pk-hero .pk-hero-heading-container,
  .pk-hero .number-s-hero-wrapper { max-width: 1440px; }
  .pk-hero .image-mountain-hero { height: 700px; object-position: 50% 0; }
  .pk-hero .image-sun-hero,
  .pk-hero .pk-hero-sun-fallback { width: 600px; height: 600px; left: 300px; }
  .pk-hero .number-s-hero-wrapper { padding-bottom: 80px; }
}
@media screen and (max-width:991px) {
  .pk-hero.section.hero-section { height: 600px; padding-top: 150px; }
  .pk-hero .hero-heading-wrapper { max-width: min(100%, 640px); }
  .pk-hero .hero-heading { font-size: calc(var(--pk-h1-size,150px) * .6666667); letter-spacing: -3px; }
  .pk-hero .number { font-size: 80px; }
  .pk-hero .image-mountain-hero { height: 350px; }
  .pk-hero .image-sun-hero,
  .pk-hero .pk-hero-sun-fallback { width: 400px; height: 400px; left: 60px; bottom: 0; }
  .pk-hero .plus-span { width: 20px; height: 20px; top: 0; }
}
@media screen and (max-width:767px) {
  .pk-hero.section.hero-section { height: auto; padding-top: 120px; }
  .pk-hero .hero-heading-wrapper { max-width: min(100%, 450px); }
  .pk-hero .hero-heading { font-size: calc(var(--pk-h1-size,150px) * .4666667); letter-spacing: -2.5px; }
  .pk-hero .number-s-block { margin-top: 24px; }
  .pk-hero .number-s-hero-wrapper { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 30px; }
  .pk-hero .number-item { align-items: flex-end; }
  .pk-hero .number { font-size: 70px; }
  .pk-hero .image-mountain-hero { height: 400px; }
  .pk-hero .image-sun-hero,
  .pk-hero .pk-hero-sun-fallback { width: 300px; height: 300px; left: 10px; bottom: 40px; }
}
@media screen and (max-width:479px) {
  .pk-hero.section.hero-section { padding-top: 140px; }
  .pk-hero .hero-heading { font-size: calc(var(--pk-h1-size,150px) * .4); letter-spacing: -2px; }
  .pk-hero .number-s-hero-wrapper { grid-template-columns: 1fr; }
  .pk-hero .number { font-size: 50px; letter-spacing: -1.4px; }
  .pk-hero .number-item { flex-direction: column; align-items: flex-start; row-gap: 12px; }
  .pk-hero .number-description { max-width: none; }
  .pk-hero .plus-span { width: 16px; height: 16px; top: -4px; margin-left: 4px; }
  .pk-hero .number-s-block { background-image: linear-gradient(204deg, #1e1c1c00 38%, #1e1c1c99 64%); }
  .pk-hero .image-mountain-hero { object-position: 100% 50%; }
  .pk-hero .image-sun-hero,
  .pk-hero .pk-hero-sun-fallback { left: auto; right: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .pk-hero .gsap_split_word,
  .pk-hero .gsap_split_letter { opacity: 1!important;transform:none!important;transition:none!important;will-change:auto!important; }
}


/* ---- v0.3.3: timed Wayo introduction (no Webflow runtime required) ---- */
/* Sun: wrapper handles vertical motion; image handles scale/opacity independently. */
.pk-hero .pk-hero-sun-motion {
  position: absolute;
  inset: auto auto 100px 100px;
  z-index: 0;
  width: 500px;
  height: 500px;
  pointer-events: none;
}
.pk-hero .pk-hero-sun-motion > .image-sun-hero,
.pk-hero .pk-hero-sun-motion > .pk-hero-sun-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.pk-hero .pk-hero-sun-motion > .pk-hero-sun-fallback { border-radius: 50%; background: var(--pk-accent, #da6f4d); }
@media (min-width:1920px) {
  .pk-hero .pk-hero-sun-motion { width: 600px; height: 600px; left: 300px; }
}
@media (max-width:991px) {
  .pk-hero .pk-hero-sun-motion { width: 400px; height: 400px; left: 60px; bottom: 0; }
}
@media (max-width:767px) {
  .pk-hero .pk-hero-sun-motion { width: 300px; height: 300px; left: 10px; bottom: 40px; }
}
@media (max-width:479px) {
  .pk-hero .pk-hero-sun-motion { left: auto; right: 0; }
}
/* Masks intentionally retain the real Wayo class hierarchy. */
.pk-hero .gsap_split_word-mask,
.pk-hero .gsap_split_letter-mask { display: inline-block; position: relative; overflow: clip; vertical-align: baseline; }
.pk-hero .gsap_split_word,
.pk-hero .gsap_split_letter { position: relative; display: inline-block; will-change: transform,opacity; }
/* JS adds pk-motion-js early, so users without JS simply see all content. */
html.pk-motion-js .pk-hero.pk-motion-pending .pk-reveal-words:not(.pk-has-split),
html.pk-motion-js .pk-hero.pk-motion-pending .pk-reveal-chars:not(.pk-has-split) { visibility: hidden; }
html.pk-motion-js .pk-hero.pk-motion-pending .pk-reveal-words .gsap_split_word,
html.pk-motion-js .pk-hero.pk-motion-pending .pk-reveal-chars .gsap_split_letter {
  opacity: 0;
  transform: translate3d(0,100px,0);
  transition-property: opacity,transform;
  transition-duration: var(--pk-anim-title-duration,600ms);
  transition-timing-function: ease-out,cubic-bezier(.215,.61,.355,1);
}
html.pk-motion-js .pk-hero.pk-motion-running .pk-reveal-words .gsap_split_word,
html.pk-motion-js .pk-hero.pk-motion-running .pk-reveal-chars .gsap_split_letter {opacity:1; transform:translate3d(0,0,0);}
html.pk-motion-js .pk-hero.pk-motion-pending .image-mountain-hero,
html.pk-motion-js .pk-hero.pk-motion-pending .pk-fallback-landscape {
  transform: scale(1.1); transform-origin: 50% 100%;
  transition: transform var(--pk-anim-mountain-duration,20000ms) linear;
}
html.pk-motion-js .pk-hero.pk-motion-running .image-mountain-hero,
html.pk-motion-js .pk-hero.pk-motion-running .pk-fallback-landscape { transform: scale(1); }
/* The sun has ONE compositor layer. Independent CSS translate/scale avoid
   competing transforms on nested nodes and the mid-animation "snap". */
.pk-hero .pk-hero-sun-motion {
  translate: 0 0;
  scale: 1;
  opacity: 1;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition-property: translate, scale, opacity;
  transition-duration: var(--pk-anim-sun-rise-duration,1000ms), var(--pk-anim-sun-scale-duration,2000ms), var(--pk-anim-sun-fade-duration,300ms);
  transition-delay: var(--pk-anim-sun-delay,80ms);
  transition-timing-function: cubic-bezier(.22,1,.36,1), cubic-bezier(.22,1,.36,1), ease-out;
}
html.pk-motion-js .pk-hero.pk-motion-pending:not(.pk-motion-running) .pk-hero-sun-motion {
  translate: 0 35%;
  scale: .6;
  opacity: 0;
}
/* Avoid an independent image scale/position animation over the moving wrapper. */
.pk-hero .pk-hero-sun-motion > .image-sun-hero,
.pk-hero .pk-hero-sun-motion > .pk-hero-sun-fallback {
  transform: none;
  opacity: 1;
  transition: none;
  backface-visibility: hidden;
}
html.pk-motion-js .pk-hero.pk-motion-pending .number-description,
html.pk-motion-js .pk-hero.pk-motion-pending .plus-span {
  opacity:0;
  transition:opacity var(--pk-anim-labels-duration,800ms) ease;
}
html.pk-motion-js .pk-hero.pk-motion-running .number-description,
html.pk-motion-js .pk-hero.pk-motion-running .plus-span { opacity:1; }
/* Fail safe when motion is explicitly disabled by OS/browser or in Elementor editor. */
@media (prefers-reduced-motion: reduce) {
  .pk-hero.pk-motion-pending .pk-reveal-words:not(.pk-has-split),
  .pk-hero.pk-motion-pending .pk-reveal-chars:not(.pk-has-split) {visibility:visible!important;}
  .pk-hero .gsap_split_word,.pk-hero .gsap_split_letter,.pk-hero .image-mountain-hero,
  .pk-hero .pk-fallback-landscape,.pk-hero .pk-hero-sun-motion,
  .pk-hero .pk-hero-sun-motion > .image-sun-hero,.pk-hero .pk-hero-sun-motion > .pk-hero-sun-fallback,
  .pk-hero .number-description,.pk-hero .plus-span {
    opacity:1!important; transform:none!important; translate:none!important; scale:none!important; transition:none!important; animation:none!important; visibility:visible!important;
  }
}

/* Separate duration for the statistics, independent from heading reveal. */
html.pk-motion-js .pk-hero.pk-motion-pending .pk-reveal-chars .gsap_split_letter { transition-duration: var(--pk-anim-digit-duration,600ms); }