/* ============================================
   SHARED CSS - Used across 2+ pages
   ============================================ */

/* --- Neue Haas Grotesk Display Pro (self-hosted) --- */
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('../fonts/NeueHaasDisplay-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('../fonts/NeueHaasDisplay-Roman.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('../fonts/NeueHaasDisplay-Mediu.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('../fonts/NeueHaasDisplay-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Background base (prevents grey/white flash between page navigations) ---
   Tailwind CDN injects bg-[#050505] at runtime, so without this the browser
   paints the default white/grey body color until JS executes. We set the
   dark color in a render-blocking <link rel="stylesheet"> instead so it's
   applied on the first paint. */
html, body {
  background-color: #050505;
  color-scheme: dark;
}

/* --- Typography tuning for Neue Haas Grotesk Display Pro --- */
body {
  font-family: 'Neue Haas Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  line-height: 1.6;
}

/* Headings — NHG Display has strong built-in contrast, ease tracking slightly */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Hero headlines — NHG at large sizes needs slightly tighter tracking than Inter */
h1 { letter-spacing: -0.03em; }

/* Body text — NHG 300 is more legible than Inter 300, slightly looser leading */
p {
  line-height: 1.65;
}

/* Small/uppercase labels — NHG uppercase needs more tracking than Inter */
.uppercase {
  letter-spacing: 0.1em;
}

/* Map Tailwind font-semibold (600) to NHG Bold (700) since no 600 exists */
.font-semibold {
  font-weight: 700;
}

/* --- Animation Utility Classes --- */
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-500 { animation-delay: 500ms; }

/* --- Glass Panel --- */
.glass-panel {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Beam Button Keyframes --- */
@keyframes beam-spin { to { transform: rotate(360deg); } }
@keyframes dots-move {
  0% { background-position: 0 0; }
  100% { background-position: 24px 24px; }
}

/* --- Gradient Text Utility --- */
.text-gradient-gold {
  background: linear-gradient(to right, #a68358, #c5a065, #a68358);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: shine 5s linear infinite;
}
@keyframes shine {
  to { background-position: 200% center; }
}

/* --- Reveal / Scroll Animations --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* --- Text Balance --- */
.text-balance { text-wrap: balance; }

/* --- Fade Slide Up Animation --- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

/* --- Lenis Smooth Scroll --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* --- Font Utility Classes --- */
.font-display { font-family: 'Neue Haas Grotesk', sans-serif !important; }
.font-roboto { font-family: 'Roboto', sans-serif !important; }
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
.font-poppins { font-family: 'Poppins', sans-serif !important; }
.font-playfair { font-family: 'Playfair Display', serif !important; }
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
.font-merriweather { font-family: 'Merriweather', serif !important; }
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
.font-manrope { font-family: 'Manrope', sans-serif !important; }
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
.font-pt-serif { font-family: 'PT Serif', serif !important; }
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
.font-space-mono { font-family: 'Space Mono', monospace !important; }
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
.font-nunito { font-family: 'Nunito', sans-serif !important; }

/* --- Hide scrollbar (used by horizontally scrolling filter rows) --- */
.no-scrollbar {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
  display: none;            /* Chrome, Safari, Opera */
}

/* --- Fade-edge mask for horizontally scrolling rows --- */
/* Dynamic edge fades: only appear where there's more content beyond that edge.
   JS toggles `fade-left` / `fade-right` classes based on scroll position. */
.mask-linear {
  /* Default: no mask. JS applies fade-left/fade-right as needed. */
  -webkit-mask-image: none;
          mask-image: none;
  transition: -webkit-mask-image 200ms linear, mask-image 200ms linear;
}
.mask-linear.fade-right {
  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, black 0, black calc(100% - 48px), transparent 100%);
}
.mask-linear.fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 48px, black 100%);
          mask-image: linear-gradient(to right, transparent 0, black 48px, black 100%);
}
.mask-linear.fade-left.fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
}

/* --- Custom Video Player Overlay (OpsKings Wistia) --- */
/* Sits on top of a Wistia player and shows a branded play button. Fades
   away once the video starts playing (wrapper gets [data-playing]). */
.player-wrap {
  position: relative;
}
.player-wrap .player-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
  transition: opacity 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.player-wrap[data-playing="true"] .player-play-overlay {
  opacity: 0;
  pointer-events: none;
}
.player-wrap .player-play-button {
  width: 84px;
  height: 84px;
  border-radius: 9999px;
  background: rgba(5, 5, 5, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(166, 131, 88, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 420ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 40px -10px rgba(166, 131, 88, 0.3);
}
.player-wrap:hover .player-play-button {
  transform: scale(1.08);
  background: rgba(166, 131, 88, 0.15);
  border-color: rgba(166, 131, 88, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 60px -5px rgba(166, 131, 88, 0.55);
}
.player-wrap .player-play-button svg {
  width: 26px;
  height: 26px;
  fill: #a68358;
  margin-left: 4px; /* optical centering of the triangle */
  transition: fill 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.player-wrap:hover .player-play-button svg {
  fill: #dcc195;
}
/* Subtle pulsing gold ring to invite the click */
.player-wrap .player-play-button::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 1px solid rgba(166, 131, 88, 0.35);
  animation: player-pulse 2.4s ease-out infinite;
}
@keyframes player-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* --- Play Cursor (shared across all video posters) --- */
.cursor-play {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='28' fill='white'/><polygon points='24,18 24,42 44,30' fill='%23050505'/></svg>") 30 30, pointer;
}

/* --- Reserve scrollbar gutter so locking body scroll doesn't shift content --- */
html {
  scrollbar-gutter: stable;
}

/* Prevent accidental horizontal scroll on mobile only.
   Applied below lg (1024px) so position:sticky still works on desktop. */
@media (max-width: 1023px) {
  html, body {
    overflow-x: clip;
    max-width: 100vw;
  }
}

/* --- Active Nav Item --- */
.nav-active {
  color: #a68358 !important;
  background-color: rgba(166, 131, 88, 0.08) !important;
}
.nav-active:hover {
  color: #a68358 !important;
}

/* --- Nav mega-dropdown hover-intent ---
   Two-part fix for dropdowns auto-opening on page load / navigation:

   1. Initial lock: when the header first injects, <html> has the
      .nav-locked class. All mega-dropdown panels are force-hidden with
      pointer-events: none. Even if the cursor happens to land on a nav
      <li>, no hover can fire. The lock releases after ~500ms (shared.js).

   2. Hover-intent delay: after the lock releases, dropdowns only open
      after the cursor has *rested* over the <li> for 180ms — a quick
      pass-through no longer triggers an open. Closing stays instant.

   Implementation detail: we move the hover-reveal out of the Tailwind
   utility classes and into this CSS block so we can control timing.
   Tailwind's classes are still on the markup but we override them. */

/* Mega-dropdown open/close is JS-controlled via .is-open on the <li>.
   Pure :hover was unreliable: the trigger button and panel sit ~22px
   apart vertically (header padding), so a slow cursor crossing that
   gap caused :hover to drop and the panel to close. JS opens on
   mouseenter and closes only when the cursor truly leaves both the
   trigger and the panel (with a small grace period). */

/* Default: hidden, not interactive. */
#site-header nav > ul > li.static > div,
#site-header nav > ul > li.group > div {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

/* Open state — JS adds .is-open to the <li>. */
#site-header nav > ul > li.static.is-open > div,
#site-header nav > ul > li.group.is-open > div {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Lock phase — force hidden during the initial 500ms after page load,
   so a cursor that happens to land over a nav item doesn't auto-open
   anything. JS removes .nav-locked from <html> after the header
   settles. */
html.nav-locked #site-header nav > ul > li.static > div,
html.nav-locked #site-header nav > ul > li.group > div {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Hover bridge: covers the gap between the trigger button and the panel
   so the cursor never leaves the <li>'s effective hit area when moving
   from one to the other. Active only while open, and only catches the
   cursor (transparent visually). */
#site-header nav > ul > li.static.is-open > div::before,
#site-header nav > ul > li.group.is-open > div::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 32px;
  pointer-events: auto;
}

/* --- Show more — collapsible list wrapper + button --- */
.show-more-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s ease 0.1s;
}
.show-more-wrap.expanded {
  max-height: 9999px;
  opacity: 1;
}
.show-more-wrap > * {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.7s ease;
}
.show-more-wrap.expanded > * {
  transform: translateY(0);
  opacity: 1;
}
/* Staggered child reveal — each subsequent item fades in slightly later */
.show-more-wrap.expanded > *:nth-child(1) { transition-delay: 0.05s; }
.show-more-wrap.expanded > *:nth-child(2) { transition-delay: 0.15s; }
.show-more-wrap.expanded > *:nth-child(3) { transition-delay: 0.25s; }
.show-more-wrap.expanded > *:nth-child(4) { transition-delay: 0.35s; }
.show-more-wrap.expanded > *:nth-child(5) { transition-delay: 0.45s; }
.show-more-wrap.expanded > *:nth-child(6) { transition-delay: 0.55s; }
.show-more-wrap.expanded > *:nth-child(n+7) { transition-delay: 0.65s; }

/* Soft fade on the bottom edge of the visible list to hint at more content */
.show-more-section { position: relative; }
.show-more-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 80px;
  height: 120px;
  background: linear-gradient(to bottom, rgba(5,5,5,0) 0%, #050505 90%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.show-more-section.is-expanded::after {
  opacity: 0;
}

/* The button itself */
.show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  background: rgba(166, 131, 88, 0.06);
  border: 1px solid rgba(166, 131, 88, 0.4);
  color: #a68358;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}
.show-more-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(220, 193, 149, 0.25) 0%,
              rgba(220, 193, 149, 0) 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.show-more-btn:hover {
  background: rgba(166, 131, 88, 0.18);
  border-color: #dcc195;
  color: #dcc195;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(166, 131, 88, 0.45);
}
.show-more-btn:hover::before {
  opacity: 1;
}
.show-more-btn:active {
  transform: translateY(0);
}
.show-more-btn .iconify {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.show-more-btn.is-expanded .iconify {
  transform: rotate(180deg);
}
.show-more-btn__count {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-left: 0.2rem;
}
.show-more-btn:hover .show-more-btn__count {
  color: rgba(255, 255, 255, 0.8);
}

.show-more-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  position: relative;
  z-index: 2;
}
.show-more-wrapper:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .show-more-wrap,
  .show-more-wrap > *,
  .show-more-btn,
  .show-more-btn .iconify {
    transition: none !important;
  }
}

/* --- Scroll-Triggered Text Reveal --- */
/* Base state: text is faintly visible. As the user scrolls through the
   section, words transition to fully lit left-to-right, line-by-line.
   Accent words (originally inside a gold gradient span) fill to gold. */
.scroll-reveal-text .srt-word {
  display: inline-block;
  color: rgba(255, 255, 255, 0.15);
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: color;
}
.scroll-reveal-text .srt-word.srt-word-lit {
  color: #ffffff;
}
.scroll-reveal-text .srt-word-accent {
  color: rgba(166, 131, 88, 0.15);
}
.scroll-reveal-text .srt-word-accent.srt-word-lit {
  color: #a68358;
  text-shadow: 0 0 20px rgba(166, 131, 88, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-text .srt-word {
    transition: none;
    color: #ffffff;
  }
  .scroll-reveal-text .srt-word-accent {
    color: #a68358;
  }
}

/* --- Hero typewriter rotator (homepage H1) ---
   Sits inline at the end of the H1. The invisible "slot" span holds the
   widest word so the headline's container has stable dimensions while the
   typed word grows and shrinks character-by-character. The caret blinks
   next to the typed text. */
.hero-word-rotator {
  display: inline-block;
  position: relative;
  vertical-align: top;
  height: 1.1em;
  line-height: 1.1;
  white-space: nowrap;
  /* Never exceed the <h1>'s available width. The widest placeholder word
     ("Artificial Intelligence") at mobile font-size is ~550px, wider than
     a phone viewport — without this cap, the whole <h1> block becomes
     wider than the viewport and appears shifted right of center. */
  max-width: 100%;
}
/* Mobile: force the rotator onto its own line and ALLOW the typed text
   to wrap. "Artificial Intelligence" at text-5xl (48px) is wider than
   any phone viewport, so without this it overflows past the right edge
   even though the H1 has overflow-x-hidden on body. Block + auto-margin
   centers it; allowing wrap means long words use 2 lines instead of
   overflowing. The slot's height adapts to the typed word's line count. */
@media (max-width: 767px) {
  .hero-word-rotator {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;       /* let it grow when text wraps to 2 lines */
    white-space: normal;
  }
  .hero-word-rotator .hero-word-slot { white-space: normal; }
  .hero-word-rotator .hero-word-line { white-space: normal; }
}
.hero-word-rotator .hero-word-slot {
  /* Invisibly reserves width for the typed text. Caps at parent width so
     the slot can't force the <h1> wider than its container. */
  visibility: hidden;
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.hero-word-rotator .hero-word-line {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  max-width: 100%;
}
.hero-word-rotator .hero-word-typed {
  /* Extra bottom padding so gradient clip doesn't cut descenders,
     and right padding so the final glyph's right bearing isn't clipped. */
  padding-bottom: 0.12em;
  padding-right: 0.08em;
}
.hero-word-rotator .hero-word-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.9em;
  margin-left: 0.08em;
  background: linear-gradient(to right, #a68358, #dcc195, #a68358);
  background-size: 200% auto;
  border-radius: 2px;
  animation: hero-caret-pulse 1.1s ease-in-out infinite,
             shine 3s linear infinite;
  pointer-events: none;
}
@keyframes hero-caret-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-word-rotator .hero-word-caret {
    animation: none;
    opacity: 1;
  }
}

/* --- Case Study Card — hover rendering fix ---
   Fixes the jagged/rough edges that appear at the card's top rounded
   corners when the inner thumbnail image scales on hover. Chrome's
   `overflow: hidden` + `border-radius` clip doesn't always apply cleanly
   to a transformed descendant. Forcing the card onto its own compositor
   layer re-applies the border-radius clip on every frame.
   See: https://bugs.chromium.org/p/chromium/issues/detail?id=157218 */
.case-card {
  isolation: isolate;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari border-radius clip on transform */
}
/* The card's existing hover:-translate-y-1 Tailwind class adds a second
   transform that overrides our translateZ(0). Re-combine them on hover
   so the compositor layer stays active. */
.case-card:hover {
  transform: translateY(-4px) translateZ(0);
}

/* --- Page Loader Overlay --- */
/* Visible from the very first paint to mask FOUC during page load.
   Hidden by JS once the header + window load have completed. */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
  opacity: 1;
  visibility: visible;
}
#page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
}
#page-loader .loader-dot {
  position: relative;
  width: 28px;
  height: 28px;
  background-image: url('../images/favicon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: crown-glow 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(166, 131, 88, 0.4));
}
@keyframes crown-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(166, 131, 88, 0.25)) drop-shadow(0 0 20px rgba(166, 131, 88, 0.15));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(166, 131, 88, 0.7)) drop-shadow(0 0 40px rgba(166, 131, 88, 0.4));
    transform: scale(1.04);
  }
}

/* --- Header placeholder reserved height --- */
/* Reserves layout space for the async-loaded header so content doesn't jump.
   Must match the value set by initHeaderAutoHide() in components.js. */
#site-header {
  height: 81px;
  display: block;
}

/* --- Hamburger Menu Animation --- */
.hamburger-active {
  transform: rotate(45deg);
  transition-delay: 0.1s;
}
.hamburger-active .line:nth-child(2) {
  width: 0px;
  opacity: 0;
}
.hamburger-active .line:nth-child(1) {
  transform: translateY(7px);
}
.hamburger-active .line:nth-child(3) {
  transform: translateY(-7px) rotate(90deg);
}
.menubar.active {
  left: 0;
}

/* --- Video Expand Section --- */
#video-outer {
  transition: max-width 0.7s cubic-bezier(0.25, 1, 0.5, 1),
              border-radius 0.7s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.7s ease;
}
}

/* --- Process Line Gradient (business-transformation, ops-consulting) --- */
.process-line-gradient {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.1) 0%,
    #a68358 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  background-size: 100% 200%;
  will-change: background-position;
}

/* --- FAQ Accordion Styles (case-study + reusable) --- */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* --- Team Constellation --- */
.constellation {
  perspective: 1200px;
}

.constellation-member {
  /* GPU-accelerated transforms for smooth movement */
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Gentle floating animation - each member gets a slightly different timing via CSS variables */
@keyframes constellation-float {
  0%, 100% {
    translate: 0 0;
  }
  25% {
    translate: var(--float-x, 4px) var(--float-y, -3px);
  }
  50% {
    translate: calc(var(--float-x, 4px) * -0.5) calc(var(--float-y, -3px) * 1.5);
  }
  75% {
    translate: calc(var(--float-x, 4px) * -1) calc(var(--float-y, -3px) * -0.5);
  }
}

.constellation-member-inner {
  animation: constellation-float var(--float-duration, 8s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  will-change: translate;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .constellation-member-inner {
    animation: none;
  }
  .constellation-member {
    transition: none;
  }
}

/* --- Testimonials Marquee --- */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-marquee-rtl,
.animate-marquee-ltr {
  width: max-content;
  animation-name: marquee-scroll;
  animation-duration: 80s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.animate-marquee-ltr {
  animation-direction: reverse;
}

@media (max-width: 640px) {
  .animate-marquee-rtl,
  .animate-marquee-ltr {
    animation-duration: 60s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee-rtl,
  .animate-marquee-ltr {
    animation: none;
  }
}

/* ============================================
   Hover tooltip (.tip)
   Used on the comparison table's ? icons.
   ============================================ */
.tip {
  position: relative;
  display: inline-flex;
}

.tip::before,
.tip::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 60;
}

.tip::before {
  content: attr(data-tip);
  bottom: calc(100% + 12px);
  transform: translate(-50%, 4px);
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px -5px rgba(166, 131, 88, 0.15);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-align: left;
}

.tip::after {
  content: '';
  bottom: calc(100% + 6px);
  transform: translate(-50%, 4px);
  border: 6px solid transparent;
  border-top-color: #0a0a0a;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08));
}

.tip:hover::before,
.tip:hover::after,
.tip:focus-visible::before,
.tip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Downward variant: bubble opens below the icon instead of above.
   Used on the first data row where an upward bubble would clip
   against the table's top edge. */
.tip[data-tip-dir="down"]::before {
  bottom: auto;
  top: calc(100% + 12px);
}
.tip[data-tip-dir="down"]::after {
  bottom: auto;
  top: calc(100% + 6px);
  border-top-color: transparent;
  border-bottom-color: #0a0a0a;
}

/* Right-edge rows: anchor the bubble to the right so it doesn't clip */
.tip[data-tip-align="end"]::before {
  left: auto;
  right: 0;
  transform: translate(0, 4px);
}
.tip[data-tip-align="end"]:hover::before,
.tip[data-tip-align="end"]:focus-visible::before {
  transform: translate(0, 0);
}

/* Mobile: narrower bubble + anchor to left edge of the icon
   so long row labels don't push the bubble off-screen. */
@media (max-width: 1023px) {
  .tip::before {
    max-width: 220px;
    left: 0;
    transform: translate(0, 4px);
  }
  .tip:hover::before,
  .tip:focus-visible::before {
    transform: translate(0, 0);
  }
  .tip::after {
    left: 7px;
    transform: translate(0, 4px);
  }
  .tip:hover::after,
  .tip:focus-visible::after {
    transform: translate(0, 0);
  }
}

/* ───────────────────────────────────────────────────────────────────────
   Mobile-only: tighten vertical gap between sections.
   Desktop/tablet untouched. Uses :where() (zero specificity) so any
   inline style or more specific override still wins — safe by default.
   Only targets <section> elements; hero sections have their own
   responsive padding (pt-24 pb-20) that already feels right on mobile.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :where(section).py-24 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  :where(section).py-32 { padding-top: 4rem; padding-bottom: 4rem; }
  :where(section).pt-24 { padding-top: 3.5rem; }
  :where(section).pb-24 { padding-bottom: 3.5rem; }
  :where(section).pt-32 { padding-top: 4rem; }
  :where(section).pb-32 { padding-bottom: 4rem; }
}