/* =========================================================
   UNIFIED.CSS  -  site-wide consistency layer
   Loaded AFTER new-version.css (see header.php).
   Edit the values below to change sizes everywhere at once.
========================================================= */

:root {
  --u-h1: clamp(38px, 5vw, 64px);
  --u-h2: clamp(32px, 4vw, 48px);
  --u-h3: clamp(20px, 2vw, 24px);
  --u-h4: 18px;
  --u-h5: 16px;
  --u-h6: 14px;
  --u-p: 15px;
}

/* ---------- HEADINGS (h1 - h6) ---------- */

h1 { font-size: var(--u-h1) !important; line-height: 1.1 !important; }
h2 { font-size: var(--u-h2) !important; line-height: 1.15 !important; letter-spacing: -0.8px !important; }
h3 { font-size: var(--u-h3) !important; line-height: 1.3 !important; }
h4 { font-size: var(--u-h4) !important; line-height: 1.3 !important; }
h5 { font-size: var(--u-h5) !important; line-height: 1.3 !important; }
h6 { font-size: var(--u-h6) !important; line-height: 1.3 !important; }

/* ---------- PARAGRAPHS (p) ---------- */

p {
  font-size: var(--u-p) !important;
  line-height: 1.7 !important;
}

@media (max-width: 600px) {
  :root { --u-p: 14px; }
}

/* ---------- BUTTONS (same as the orange "Talk to Glotefewo" button) ---------- */

.next-cta__button,
.next-cta__button--primary,
.next-cta__button--secondary,
.btn,
.btn--primary,
.btn--ghost,
.gf-about-link,
.insights-all-link,
.contact-luxe__submit {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;
  min-height: 54px !important;
  height: auto !important;
  margin-top: 0;
  padding: 0 24px !important;
  border: 1px solid transparent !important;
  border-radius: 100px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #f16b16, #d95106) !important;
  box-shadow:
    0 8px 25px rgba(228, 97, 14, .2),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -.015em !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    transform .3s cubic-bezier(.2, .8, .2, 1),
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.next-cta__button:hover,
.next-cta__button--primary:hover,
.next-cta__button--secondary:hover,
.btn:hover,
.btn--primary:hover,
.btn--ghost:hover,
.gf-about-link:hover,
.insights-all-link:hover,
.contact-luxe__submit:hover {
  color: #fff !important;
  transform: translateY(-3px);
  border-color: transparent !important;
  background: linear-gradient(135deg, #ff7a25, #e45a08) !important;
  box-shadow:
    0 14px 35px rgba(228, 97, 14, .3),
    inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}

.contact-luxe__submit:active { transform: scale(.98); }

/* remove the old underline effect on the "about" text link */
.gf-about-link::after { display: none !important; }

/* icons / arrows inside buttons */
.next-cta__button svg,
.contact-luxe__submit svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.btn span,
.insights-all-link span,
.contact-luxe__submit-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.insights-all-link:hover span { transform: translate(3px, -3px); }


/* =========================================================
   SUB-HEADINGS (eyebrows)  -  same as home page "INTRODUCTION"
   orange text + small orange line with moving white shine
========================================================= */

:root { --u-orange: #e4610e; }

/* ---- the text row ---- */
.gf-about-eyebrow,
.gf-services-kicker,
.global-eyebrow,
.tsi-eyebrow,
.insights-eyebrow,
.audience-eyebrow,
.purpose-eyebrow,
.career-eyebrow,
.about-hero__eyebrow,
.next-cta__eyebrow,
.ev-eyebrow,
.mobility-eyebrow,
.delivery-eyebrow,
.carbon-eyebrow,
.climate-eyebrow,
.contact-luxe__eyebrow,
.info-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--u-orange) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2.7px !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
}

.next-cta__eyebrow { justify-content: center; }

/* ---- the line (every variant: lines, dots, empty spans) ---- */
.gf-line,
.gf-services-kicker > span,
.global-eyebrow .eyebrow-line,
.tsi-eyebrow-dot,
.insights-eyebrow-line,
.audience-eyebrow > span,
.purpose-eyebrow-line,
.career-eyebrow-line,
.about-hero__eyebrow-line,
.next-cta__eyebrow-line,
.ev-eyebrow-line,
.ev-eyebrow__dot,
.mobility-eyebrow .eyebrow-line,
.delivery-eyebrow-dot,
.carbon-eyebrow .eyebrow-dot,
.climate-eyebrow .eyebrow-dot,
.contact-luxe__eyebrow > span:first-child,
.info-kicker::before {
  content: "";
  position: relative;
  display: block !important;
  flex: 0 0 31px !important;
  width: 31px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--u-orange) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.gf-line::after,
.gf-services-kicker > span::after,
.global-eyebrow .eyebrow-line::after,
.tsi-eyebrow-dot::after,
.insights-eyebrow-line::after,
.audience-eyebrow > span::after,
.purpose-eyebrow-line::after,
.career-eyebrow-line::after,
.about-hero__eyebrow-line::after,
.next-cta__eyebrow-line::after,
.ev-eyebrow-line::after,
.ev-eyebrow__dot::after,
.mobility-eyebrow .eyebrow-line::after,
.delivery-eyebrow-dot::after,
.carbon-eyebrow .eyebrow-dot::after,
.climate-eyebrow .eyebrow-dot::after,
.contact-luxe__eyebrow > span:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateX(-100%);
  animation: gfLineMove 3s infinite;
}

/* info-kicker has no line span, so its ::before line gets the shine via gradient */
.info-kicker::before {
  background:
    linear-gradient(90deg, transparent 35%, #fff 50%, transparent 65%) 200% 0 / 200% 100% no-repeat,
    var(--u-orange) !important;
  animation: uLineShine 3s infinite;
}

@keyframes uLineShine {
  0%, 55% { background-position: 200% 0, 0 0; }
  100%    { background-position: -100% 0, 0 0; }
}

/* the "06 STAGES" count next to the delivery sub-heading */
.delivery-eyebrow-count { color: var(--u-orange) !important; opacity: .65; }

@media (max-width: 600px) {
  .gf-about-eyebrow,
  .gf-services-kicker,
  .global-eyebrow,
  .tsi-eyebrow,
  .insights-eyebrow,
  .audience-eyebrow,
  .purpose-eyebrow,
  .career-eyebrow,
  .about-hero__eyebrow,
  .next-cta__eyebrow,
  .ev-eyebrow,
  .mobility-eyebrow,
  .delivery-eyebrow,
  .carbon-eyebrow,
  .climate-eyebrow,
  .contact-luxe__eyebrow,
  .info-kicker {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    gap: 10px !important;
  }
}