/**
 * Page Header Module
 *
 * Styles for template-parts/modules/page_header_module.php
 * Spec source: Figma "Farani Taylor - Services Landing" node 501:4875 / 501:4897 / 501:4887
**/

.page_header_module {
  position: relative;
  background: var(--farani-burgundy, #401115);
  padding: 90px 0 0px;
  overflow-x: visible;
}
/* Decorative background vectors. Markup is now a wrapping <span> (sized/
   positioned, scroll-parallax transform set inline by main.js) around an
   inner <img> (ambient float animation) — split across two elements on
   purpose. Chrome/Edge and Firefox don't reliably agree on how to compose
   a JS-driven "transform" with a CSS-animated "translate" on the SAME
   element; keeping JS and the animation on separate elements sidesteps
   that gap entirely instead of depending on either engine's behaviour. */
.page-header__vectors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.page-header__vector { position: absolute; display: block; }
.page-header__vector img { display: block; width: 100%; height: auto; }

.page-header__vector--one {
  width: 620px; height: auto;
  right: -140px; top: -60px;
  opacity: .9;
}
.page-header__vector--two {
  width: 700px;
  height: auto;
  left: -150px;
  bottom: -150px;
  opacity: .5;
}

/* Ambient float — a slow, continuous drift independent of scroll, on the
   inner <img> only (main.js never touches this element). */
.page-header__vector--one img {
  rotate: 15deg;
  animation: pageHeaderVectorFloat 16s ease-in-out infinite;
}
.page-header__vector--two img {
  animation: pageHeaderVectorFloat 21s ease-in-out infinite reverse;
}

@keyframes pageHeaderVectorFloat {
  0%, 100% { translate: 0 0; }
  25% { translate: 18px -14px; }
  50% { translate: -6px 16px; }
  75% { translate: -16px -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-header__vector--one img,
  .page-header__vector--two img { animation: none; }
}

.page_header_module .container,
.page_header_module .row { position: relative; z-index: 1; }

.page-header__eyebrow {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--farani-orange, #e95a3a);
  margin-bottom: 16px;
}

.page-header__heading {
  font-family: var(--farani-heading-font);
  font-weight: 400;
  font-size: 64px;
  line-height: 66px;
  letter-spacing: -1.2px;
  color: var(--white, #fff);
  margin-bottom: 24px;
}

.page-header__intro {
  font-family: var(--farani-body-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: var(--farani-salmon-grey, #fff2ef);
  max-width: 560px;
  margin-bottom: 40px;
}

.page-header__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 56px;
}

.page-header__btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 32px;
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition: var(--transition);
}
/* Colour slide rollover — sweeps in from the left at a 45deg angle on hover */
.page-header__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transform: skewX(-45deg);
  transform-origin: top left;
  transition: width .4s ease;
  z-index: -1;
}
.page-header__btn:hover::before { width: calc(100% + 60px); }

.page-header__btn--primary {
  background: var(--farani-orange, #e95a3a);
  color: var(--farani-burgundy, #401115);
  border: 1px solid var(--farani-orange, #e95a3a);
}
.page-header__btn--primary::before { background: var(--farani-burgundy, #401115); }
.page-header__btn--primary:hover,
.page-header__btn--primary:focus-visible { color: var(--white, #fff); }

.page-header__btn--secondary {
  background: transparent;
  color: var(--white, #fff);
  border: 1px solid var(--white, #fff);
}
.page-header__btn--secondary::before { background: var(--farani-orange, #e95a3a); }

/* Stats row — sits below the hero, on the page's default (light) background */
.page-header__stats-wrap {
  padding: 48px 0;
}

.page-header__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}

.page-header__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  max-width: 260px;
}

.page-header__stat-value {
  font-family: var(--farani-body-font);
  font-weight: 500;
  /* Scales with viewport but never below 24px or above 34px */
  font-size: clamp(24px, 2.4vw + 8px, 34px);
  line-height: 1.2;
  color: var(--farani-burgundy, #401115);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* keep the counting value on a single line */
}

.page-header__stat-stars { color: var(--farani-orange, #e95a3a); font-size: 14px; letter-spacing: 2px; white-space: nowrap; }

.page-header__stat-label {
  flex-basis: 100%;
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--farani-text-grey, #585858);
}

/* Callback card — overhangs 60px below the hero section, clear of the stats row's left 50% column */
.page-header__callback {
  position: relative;
  z-index: 2;
  background: var(--farani-salmon-grey, #fff2ef);
  padding: 40px 33px 44px;
  color: var(--farani-burgundy, #401115);
  margin-bottom: -60px;
  opacity: 0;
  transform: translateY(40px);
  animation: pageHeaderCallbackIn 1.4s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: .6s;
}

/* Hold the entrance at its first frame while the page-transition overlay
   (or, on the homepage, the logo preloader) is still covering the screen,
   so it only starts once the user can actually see it. Both classes are
   removed by their respective plugin/theme JS when their own overlay clears. */
body.has-page-transition .page-header__callback,
body.has-page-loader .page-header__callback {
  animation-play-state: paused;
}

@keyframes pageHeaderCallbackIn {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-header__callback {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.page-header__callback-eyebrow {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--farani-orange, #e95a3a);
  margin-bottom: 10px;
}

.page-header__callback-heading {
  font-family: var(--farani-heading-font);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: var(--farani-burgundy, #401115);
  margin-bottom: 14px;
}

.page-header__callback-text {
  font-family: var(--farani-body-font);
  font-size: 14px;
  line-height: 20px;
  color: var(--farani-text-grey, #585858);
  margin-bottom: 24px;
}

.page-header__callback-form-notice {
  font-family: var(--farani-body-font);
  font-size: 13px;
  color: var(--farani-text-grey, #585858);
}

/* Generic styling for whatever form plugin renders inside (Gravity Forms / CF7) */
.page-header__callback-form input[type="text"],
.page-header__callback-form input[type="email"],
.page-header__callback-form input[type="tel"],
.page-header__callback-form textarea,
.page-header__callback-form select {
  width: 100%;
  background: var(--white, #fff);
  border: none;
  padding: 14px 16px;
  font-family: var(--farani-body-font);
  font-size: 13px;
  color: var(--farani-burgundy, #401115);
  margin-bottom: 16px;
}

.page-header__callback-form textarea { min-height: 98px; resize: vertical; }

.page-header__callback-form label {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--farani-text-grey, #585858);
}

.page-header__callback-form button[type="submit"],
.page-header__callback-form input[type="submit"] {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 52px;
  background: var(--farani-orange, #e95a3a);
  color: var(--farani-burgundy, #401115);
  /*border: 1px solid var(--farani-burgundy, #401115);*/
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 14px;
  overflow: hidden;
  transition: var(--transition);
  border-radius: 0px;
}
/* Colour slide rollover at a 45deg angle — ::before only renders on <button>,
   not <input>, so input[type="submit"] (some form plugins render it that way)
   keeps the filter fallback below instead of the diagonal slide. */
.page-header__callback-form button[type="submit"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--farani-burgundy, #401115);
  transform: skewX(-45deg);
  transform-origin: top left;
  transition: width .4s ease;
  z-index: -1;
}
.page-header__callback-form button[type="submit"]:hover::before { width: calc(100% + 52px); }
.page-header__callback-form button[type="submit"]:hover { color: var(--white, #fff); }
.page-header__callback-form input[type="submit"]:hover { filter: brightness(.93); }
.wpcf7-list-item-label a { color: var(--farani-orange, #e95a3a); text-decoration: underline; }
@media (max-width: 1536px) {

}

@media (max-width: 1366px) {

}

@media (max-width: 1280px) {
  .page-header__heading { font-size: 52px; line-height: 56px; }
}

@media (max-width: 992px) {
  .page_header_module { padding: 64px 0 60px; }
  .page-header__heading { font-size: 42px; line-height: 46px; }
  /* Columns stack below lg, so the overhang would otherwise overlap the stats row that follows. */
  .page-header__callback { margin-top: 48px; margin-bottom: 0; }
  .page-header__vector--one,
  .page-header__vector--two { opacity: .25; }
}

@media (max-width: 768px) {
  .page-header__heading { font-size: 34px; line-height: 38px; }
  .page-header__ctas { flex-direction: column; }
  .page-header__btn { width: 100%; }
  .page-header__stats { gap: 28px; }
}

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