/* Product Faculty — styles for the two pieces of behaviour that used to come
 * from Webflow's runtime. Pairs with `_theme/pf-ui.js`.
 *
 * Webflow's own responsive rules are still doing the work of showing the
 * hamburger and hiding the menu below 991px:
 *
 *     .w-nav[data-collapse=medium] .w-nav-menu   { display: none }
 *     .w-nav[data-collapse=medium] .w-nav-button { display: block }
 *
 * Those are stylesheet rules, not something the runtime evaluated, so they
 * survived its removal. What did not survive is the open state, because
 * Webflow's JS built the overlay and moved the menu into it at runtime. So
 * everything below is about the open panel and the icon.
 */

/* ---------------------------------------------------------------- hamburger */

/* The icon was a Lottie animation the runtime rendered into this div — which is
   why, with the runtime gone, the button was still in the DOM, still 35x35, and
   drew absolutely nothing. Three spans and a transform cost nothing, animate on
   the compositor, and need no JSON file over the network. */
/* Specificity matters here and it is easy to get wrong. Webflow ships
       .w-nav[data-collapse=medium] .w-nav-button { display: block }
   which is (0,3,0). A plain `.new-nav-bar .w-nav-button` is (0,2,0) and loses,
   so the button stayed display:block, flex centring never applied, and the 16px
   icon sat at the top of the 35px box — 10px above the bar's centre line. The
   extra classes below take this to (0,4,0) so the outcome does not depend on
   source order. */
.new-nav-bar.w-nav .menu-button-14.w-nav-button {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.new-nav-bar .pf-burger {
  position: relative;
  display: block;
  width: 24px;
  height: 16px;
  pointer-events: none;   /* the button owns the click, not the bars */
}

.new-nav-bar .pf-burger span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.15s ease, top 0.25s ease;
}

.new-nav-bar .pf-burger span:nth-child(1) { top: 0; }
.new-nav-bar .pf-burger span:nth-child(2) { top: 7px; }
.new-nav-bar .pf-burger span:nth-child(3) { top: 14px; }

.new-nav-bar.pf-nav-open .pf-burger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.new-nav-bar.pf-nav-open .pf-burger span:nth-child(2) { opacity: 0; }
.new-nav-bar.pf-nav-open .pf-burger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .new-nav-bar .pf-burger span { transition: none; }
}

/* -------------------------------------------------------------- open panel */

@media screen and (max-width: 991px) {
  .new-nav-bar.w-nav .menu-button-14.w-nav-button { display: flex; }

  /* Beats `.w-nav[data-collapse=medium] .w-nav-menu { display:none }` — that is
     (0,2,1) and this is (0,3,0). Worth stating, because losing to it silently
     is exactly the failure that leaves a hamburger that does nothing. */
  .new-nav-bar.pf-nav-open .nav-menu-11,
  .new-nav-bar.pf-nav-open .w-nav-menu {
    position: fixed;
    top: var(--pf-nav-h, 75px);
    left: 0;
    right: 0;
    z-index: 98;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    /* Sized to its four links, not the viewport. A full-height sheet for a
       four-item menu is mostly empty space, and leaving the page visible below
       makes it obvious that tapping outside dismisses it. */
    height: auto;
    max-height: calc(100vh - var(--pf-nav-h, 75px));
    padding: 18px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;   /* stop scroll chaining to the locked page */
    background: var(--v12-bg, var(--pf-bg, #080e1a));
    border-top: 1px solid var(--pf-line, rgba(255, 255, 255, 0.08));
    animation: pf-nav-in 0.18s ease-out both;
  }

  /* Each link keeps its own Webflow class, and they do not agree: nav-link-9
     carries margin:10px/30px and line-height:34px from the desktop bar, which
     made "Corporate Training" 65px tall against 51px for its neighbours and the
     row rhythm visibly uneven. Normalise all of them here — (0,3,1) beats the
     single-class rules that set those. */
  .new-nav-bar.pf-nav-open .w-nav-menu > a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 16px 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    border-bottom: 1px solid var(--pf-line, rgba(255, 255, 255, 0.08));
  }

  .new-nav-bar.pf-nav-open .w-nav-menu > a:last-child { border-bottom: 0; }

  @keyframes pf-nav-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .new-nav-bar.pf-nav-open .w-nav-menu { animation: none; }
  }
}

/* The bar is 60px tall below 767px — the panel has to start under it, not under
   the desktop height, or it covers the close button it is supposed to sit below. */
@media screen and (max-width: 767px) {
  .new-nav-bar.pf-nav-open .nav-menu-11,
  .new-nav-bar.pf-nav-open .w-nav-menu {
    top: 60px;
    max-height: calc(100vh - 60px);
  }
}

/* ---------------------------------------------------------------- carousel */

/* Webflow's slider moved an absolutely-positioned track with JS on every frame.
   Scroll-snap does the same job in the compositor and brings touch swipe,
   momentum and keyboard scrolling with it. `.w-slider-mask` is already
   `white-space: nowrap; overflow: hidden` with `display: inline-block` slides,
   so it is a horizontal strip already — it only needs to become scrollable. */
.pf-slider .w-slider-mask {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pf-slider .w-slider-mask::-webkit-scrollbar { display: none; }

.pf-slider .w-slide { scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
  .pf-slider .w-slider-mask { scroll-behavior: auto; }
}

.pf-slider .w-slider-arrow-left,
.pf-slider .w-slider-arrow-right { cursor: pointer; }

.pf-slider .w-slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.pf-slider .w-slider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pf-slider .w-slider-dot:hover { opacity: 0.6; }

.pf-slider .w-slider-dot.w-active {
  opacity: 1;
  transform: scale(1.25);
}

.pf-slider .w-slider-dot:focus-visible {
  outline: 2px solid var(--pf-gold, #f5c518);
  outline-offset: 2px;
}

/* ==========================================================================
   Icons
   ==========================================================================
   The site drew its arrows, stars and ticks with text characters — →, ★, ✓, ✕,
   ⚡, ✦. Those are glyphs from whatever font happened to load, so their weight,
   size and vertical position changed from face to face and platform to
   platform: the arrow was a hairline on a Mac and a wedge on Windows, and the
   stars in a rating row sat a few pixels above the number beside them.

   These are the same marks as real shapes. Each is an inline SVG carried in a
   CSS mask, so the element paints in `currentColor` — every one of them
   inherits the colour already set on the span it replaced, and nothing needed
   a second class to stay gold. Sized in `em`, so an icon is always in
   proportion to the text it sits in.

   Decorative by definition: mark them aria-hidden in the markup. The meaning
   is in the words beside them ("4.7", "Details", "Full refund within 14 days"),
   never in the shape. */
.pf-i{
  display:inline-block;width:1em;height:1em;flex:none;
  background-color:currentColor;
  -webkit-mask:var(--pf-i) center/contain no-repeat;
          mask:var(--pf-i) center/contain no-repeat;
  vertical-align:-.125em;
}
/* A hair smaller than the line it sits on, which is what stops an arrow from
   looking like it is shouting at the end of a link. */
.pf-i--sm{width:.85em;height:.85em}

.pf-i--arrow-right{--pf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.pf-i--arrow-left{--pf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")}
.pf-i--star{--pf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E")}
.pf-i--check{--pf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.pf-i--close{--pf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E")}
.pf-i--bolt{--pf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.5 2L4 14h6l-.5 8L20 10h-6.5z'/%3E%3C/svg%3E")}
.pf-i--sparkle{--pf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l2.2 6.4L21 12l-6.8 2.2L12 22l-2.2-7.8L3 12l6.8-3.6z'/%3E%3C/svg%3E")}
.pf-i--lock{--pf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}

/* ==========================================================================
   Nav links
   ==========================================================================
   The four links were never the same control. "Home" and "Corporate Training"
   are Webflow's `.nav-link-11` / `.nav-link-9`, which mark the current page
   with `text-decoration: underline` — the browser's own underline, sitting
   wherever the font's metrics put it. "Podcast" and "Blogs" are ours, and got
   only the gold colour. So the active state changed shape depending on which
   page you were on, and on two of them it was a text underline rather than a
   designed element.

   One treatment now, for all four: the underline is dropped and replaced by a
   bar of our own — inset to the text rather than the padding box, rounded, and
   animated. It grows from the centre, which reads as the page arriving rather
   than a line switching on. Hover gets the same bar at half strength, so the
   nav answers the pointer before anything is clicked. */
.new-nav-bar .nav-link-11,
.new-nav-bar .nav-link-9,
.new-nav-bar .pf-nav-link{
  position:relative;
  text-decoration:none;
  transition:color .22s cubic-bezier(.4,0,.2,1);
}
/* Webflow sets the underline on the current link in its own stylesheet, and on
   `.w-nav-link.w--current` it also sets a blue that has no place on this site. */
.new-nav-bar .nav-link-11.w--current,
.new-nav-bar .nav-link-9.w--current,
.new-nav-bar .pf-nav-link.w--current{
  color:var(--yello,#f5c518);
  text-decoration:none;
}

.new-nav-bar .nav-link-11::after,
.new-nav-bar .nav-link-9::after,
.new-nav-bar .pf-nav-link::after{
  content:"";
  position:absolute;
  /* Inset by the link's own padding so the bar measures the word, not the
     hit area — a bar the full width of a 20px-padded link looks accidental. */
  left:20px; right:20px; bottom:15px;
  height:2px; border-radius:2px;
  background:var(--yello,#f5c518);
  transform:scaleX(0);
  transform-origin:50% 50%;
  opacity:0;
  transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  pointer-events:none;
}
.new-nav-bar .nav-link-11:hover::after,
.new-nav-bar .nav-link-9:hover::after,
.new-nav-bar .pf-nav-link:hover::after{ transform:scaleX(1); opacity:.42; }

/* The current page holds the bar. It is animated rather than transitioned
   because nothing changes state on arrival — there is no "from" to move away
   from, so the bar has to play itself in. */
@keyframes pfNavCurrentIn{
  from{ transform:scaleX(0); opacity:0 }
  to  { transform:scaleX(1); opacity:1 }
}
.new-nav-bar .nav-link-11.w--current::after,
.new-nav-bar .nav-link-9.w--current::after,
.new-nav-bar .pf-nav-link.w--current::after{
  animation:pfNavCurrentIn .55s cubic-bezier(.22,1,.36,1) .06s both;
  box-shadow:0 0 12px rgba(245,197,24,.45);
}
.new-nav-bar .nav-link-11.w--current:hover::after,
.new-nav-bar .nav-link-9.w--current:hover::after,
.new-nav-bar .pf-nav-link.w--current:hover::after{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .new-nav-bar .nav-link-11::after,
  .new-nav-bar .nav-link-9::after,
  .new-nav-bar .pf-nav-link::after{ transition:none; animation:none; }
  .new-nav-bar .nav-link-11.w--current::after,
  .new-nav-bar .nav-link-9.w--current::after,
  .new-nav-bar .pf-nav-link.w--current::after{ transform:scaleX(1); opacity:1; }
}

/* Stacked in the mobile menu the bar would sit under a full-width row, so it
   tracks the text there too. */
@media screen and (max-width:991px){
  .new-nav-bar .nav-link-11::after,
  .new-nav-bar .nav-link-9::after,
  .new-nav-bar .pf-nav-link::after{ left:20px; right:auto; width:44px; }
}