/* GLOBAL HEADING RESET ----------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  line-height: 1.2;
  color: #111;
}

/* TITLE SIMPLE ------------------------------------- */

.frontpage-title-simple h2 {
  display: inline-block;       /* shrink-wrap to text width */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 1.15;
  text-align: center;
  border-bottom: 2px solid #333; /* underline matches text width */
  padding-bottom: 8px;
  margin: 0 auto;              /* centers inline-block horizontally */
}

/* Single-slide deck main title (workshop PHP slides — Orion, Deloitte, …) */
h2.slide-deck-main-title {
  margin: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  display: inline-block;
  border-bottom: 2px solid #333;
  padding-bottom: 0.2rem;
  color: #111;
  line-height: 1.2;
}

/* Same as title, no underline – for brochure-style taglines */
.title-style-no-underline {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.35rem;
  line-height: 1.2;
  color: #111;
  margin: 0;
  text-align: left;
  display: block;
}

/* Mini underline title – weight similar to main slide title */
.mini-underline-title {
  display: inline-block;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: #111;
  border-bottom: 2px solid #333;
  padding-bottom: 5px;
  margin: 0 0 0.75rem 0;
}

/* Small section title — text on first row, 25% rule on second (nothing below the rule) */
.title-underline-sm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border-bottom: none;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: #555;
}
.title-underline-sm::after {
  content: '';
  flex: 0 0 auto;
  width: 25%;
  height: 1px;
  background: #666;
}

/* Narrow column for a small title block */
.title-section-narrow {
  max-width: 44rem;
  margin: 0 0 0.65rem 0;
}

/* responsive */
@media (max-width: 768px) {
  .frontpage-title h2 {
    font-size: 2.2rem;
  }
}
@media (max-width: 480px) {
  .frontpage-title h2 {
    font-size: 1.8rem;
  }
}

/* FRONT PAGE TITLE ANIMATED ------------------------------------- */

.frontpage-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 50vh; 
  padding: 25px 20px 5px 20px;
  text-align: center;
  background: #fff;
  color: #111;
  gap: 32px;
}

/* Compact variant for stacked content sections */
.frontpage-title.frontpage-title--compact {
  min-height: 28vh;
  padding: 12px 20px 6px;
  gap: 14px;
}

.frontpage-title.frontpage-title--compact h2 {
  font-size: clamp(2rem, 4.5vw, 2.6rem);
}

.frontpage-title.frontpage-title--compact .section-desc {
  max-width: 860px;
  margin: 0 auto;
}

/* Subtle dark shell around Learn more button */
.frontpage-title.frontpage-title--compact .learn-more-shell {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 6px;
  width: auto;
  margin: 0;
}

.frontpage-title.frontpage-title--compact .learn-more-shell .black-neon-form-btn {
  background: transparent;
  color: #a8ff00;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 7px 14px;
  text-transform: none;
  letter-spacing: 0.02em;
  box-shadow: none;
}

.frontpage-title.frontpage-title--compact .learn-more-shell .black-neon-form-btn:hover {
  background: #171717;
  color: #b7ff3f;
  box-shadow: 0 0 12px rgba(168, 255, 0, 0.4);
  transform: none;
}

/* each title line */
.frontpage-title h2 {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 3rem;
  line-height: 1.15;
  max-width: 900px;
  margin: 0 auto;

  /* animation base state */
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.6s ease-out;
}

/* activated on scroll */
.frontpage-title h2.visible {
  opacity: 1;
  transform: translateY(0);
}

/* optional subtle accent line */
.frontpage-title h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: #000;
  margin: 12px auto 0;
  opacity: 0.2;
}

/* responsive */
@media (max-width: 768px) {
  .frontpage-title h2 {
    font-size: 2.2rem;
  }
}
@media (max-width: 480px) {
  .frontpage-title h2 {
    font-size: 1.8rem;
  }
}

/* underline base style */
.frontpage-title h2::after {
  content: '';
  display: block;
  width: 10%;           /* start very small */
  max-width: 100%;
  height: 2px;
  background: linear-gradient(to right, #000, #333);
  margin: 12px auto 0;
  border-radius: 2px;
  opacity: 0.3;
  transform-origin: center;
  
  /* continuous mechanical breathe + subtle glow */
  animation: underlineMechanical 6s ease-in-out infinite alternate;
}

/* keyframes for smooth continuous movement */
@keyframes underlineMechanical {
  0% {
    width: 10%;
    opacity: 0.25;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  50% {
    width: 100%;
    opacity: 0.6;
    box-shadow: 0 0 6px rgba(0,0,0,0.1);
  }
  100% {
    width: 10%;
    opacity: 0.25;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
}

/* Same as homepage .frontpage-title blocks, but compact and visible without scroll-reveal JS (e.g. inside slides) */
.frontpage-title.frontpage-title--embedded {
  min-height: 0;
  padding: 8px 20px 2rem;
  gap: 0;
  justify-content: flex-start;
}

.frontpage-title.frontpage-title--embedded h2,
.frontpage-title.frontpage-title--embedded h2.visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* SLIDE TITLE – ANIMATED UNDERLINE (ONE TIME ONLY) */

.slide-title-animated h2 {
  display: inline-block;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 2.5vw, 1.8rem);
  line-height: 1.15;
  text-align: left;
  margin: 0;
  padding-bottom: 10px;
  position: relative;
}

/* animated underline ONLY for slides */
.slide-title-animated h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  max-width: 100%;
  background: linear-gradient(to right, #000, #333);
  border-radius: 2px;
  opacity: 0;

  animation: slideUnderlineOnce 1.2s ease-out forwards;
}

/* slide reveal animation */
.slide .slide-title-animated h2 {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.6s ease-out;
}

.slide.active .slide-title-animated h2 {
  opacity: 1;
  transform: translateY(0);
}

/* keyframes — one time draw */
@keyframes slideUnderlineOnce {
  0% {
    width: 0%;
    opacity: 0;
  }
  60% {
    width: 100%;
    opacity: 0.5;
  }
  100% {
    width: 100%;
    opacity: 0.35;
  }
}

/* responsive for slides — font size scales via clamp above; only adjust spacing if needed */
@media (max-width: 480px) {
  .slide-title-animated h2 {
    padding-bottom: 8px;
  }
}