/* LEGA polish layer — additive overrides on top of style.css.
   Loaded after the template stylesheet. Contains: typography,
   spacing, glass cards, hover states, reveal animation classes,
   gradient blobs, focus-visible rings, reduced-motion overrides.
   Do not edit style.css; everything goes here. */

/* ============================================================
   1. Tokens — extend, don't replace existing palette
   ============================================================ */
:root {
  --lega-accent: #EC2B7A;            /* LEGA brand magenta from logo */
  --lega-accent-soft: rgba(236, 43, 122, 0.18);
  --lega-accent-glow: rgba(236, 43, 122, 0.35);
  --lega-accent-orange: #F08833;     /* LEGA brand orange from logo */
  --lega-accent-teal: #6BC4B6;       /* LEGA brand teal from logo */
  --lega-glass-border: rgba(255, 255, 255, 0.08);
  --lega-glass-fill: rgba(255, 255, 255, 0.03);
  --lega-glass-highlight: rgba(255, 255, 255, 0.06);
  --lega-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --lega-ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --lega-reveal-distance: 32px;
  --lega-reveal-duration: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lega-reveal-distance: 0px;
    --lega-reveal-duration: 0ms;
  }
}

/* ============================================================
   2. Typography polish — hero/section headings, body contrast
   ============================================================ */
.body-wrapper.dark h1,
.body-wrapper.dark h2,
.body-wrapper.dark .section-title {
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.body-wrapper.dark .hero-area-2 h1.section-title {
  line-height: 1.05;
}

.body-wrapper.dark p,
.body-wrapper.dark .text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Slightly lift body copy contrast against dark bg without darkening accent text. */
.body-wrapper.dark p.text:not([class*="accent"]):not([class*="title"]) {
  color: rgba(255, 255, 255, 0.82);
}

/* ============================================================
   3. Glass card — applied to .service-box, .testimonial-item,
      .why-choose-card via the .lega-glass class added in Phase 3+
   ============================================================ */
.lega-glass {
  position: relative;
  background: var(--lega-glass-fill);
  border: 1px solid var(--lega-glass-border);
  border-radius: 14px;
  isolation: isolate;
  transition: transform 600ms var(--lega-ease-out),
              border-color 400ms ease,
              box-shadow 600ms var(--lega-ease-out);
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .lega-glass {
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
  }
}

.lega-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    var(--lega-glass-highlight) 0%,
    transparent 30%
  );
  pointer-events: none;
  z-index: -1;
}

.lega-glass:hover {
  transform: translateY(-4px);
  border-color: var(--lega-accent-soft);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5),
              0 0 30px -10px var(--lega-accent-glow);
}

@media (prefers-reduced-motion: reduce) {
  .lega-glass,
  .lega-glass:hover {
    transform: none;
    transition: border-color 200ms ease;
  }
}

/* ============================================================
   4. Button polish — gradient sweep, ambient pulse, focus ring
   Applied via .lega-btn-polish on top of existing .rr-btn or
   any anchor used as a primary CTA.
   ============================================================ */
.lega-btn-polish {
  position: relative;
  overflow: hidden;
  transition: transform 250ms var(--lega-ease-snap);
}

.lega-btn-polish::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 0%,
    var(--lega-accent-soft) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 700ms var(--lega-ease-out);
  pointer-events: none;
}

.lega-btn-polish:hover::after {
  transform: translateX(100%);
}

.lega-btn-polish:active {
  transform: scale(0.97);
}

.lega-btn-pulse {
  animation: lega-pulse 3.4s ease-in-out infinite;
}

@keyframes lega-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--lega-accent-glow); }
  50%      { box-shadow: 0 0 28px 4px var(--lega-accent-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .lega-btn-polish::after { display: none; }
  .lega-btn-pulse { animation: none; }
}

/* ============================================================
   5. Link underline reveal — applied via .lega-link-underline
   ============================================================ */
.lega-link-underline {
  position: relative;
  display: inline-block;
}

.lega-link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms var(--lega-ease-out);
}

.lega-link-underline:hover::after { transform: scaleX(1); }

/* ============================================================
   6. Focus-visible rings — global accessibility win
   ============================================================ */
.body-wrapper.dark a:focus-visible,
.body-wrapper.dark button:focus-visible,
.body-wrapper.dark input:focus-visible,
.body-wrapper.dark textarea:focus-visible,
.body-wrapper.dark select:focus-visible {
  outline: 2px solid var(--lega-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   7. Scroll reveals — opt-in via data-reveal attribute.
   JS toggles .lega-revealed when the element enters viewport.
   IMPORTANT: never put data-reveal on elements that already
   carry char-anim, fade-anim, rr_title_anim, t_line, parallax-view.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--lega-reveal-duration) var(--lega-ease-out),
              transform var(--lega-reveal-duration) var(--lega-ease-out);
  will-change: opacity, transform;
}

[data-reveal="fade-up"]    { transform: translate3d(0, var(--lega-reveal-distance), 0); }
[data-reveal="fade"]       { transform: none; }
[data-reveal="slide-left"] { transform: translate3d(calc(var(--lega-reveal-distance) * -1), 0, 0); }
[data-reveal="slide-right"]{ transform: translate3d(var(--lega-reveal-distance), 0, 0); }

[data-reveal].lega-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   8. Hero gradient blobs — opt-in via .lega-hero-blobs container
   Renders two soft drifting blobs behind hero content. Sits
   inside the hero area at z-index 0; hero content must be z>=1.
   ============================================================ */
.lega-hero-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.lega-hero-blobs::before,
.lega-hero-blobs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  will-change: transform;
}

.lega-hero-blobs::before {
  width: 520px;
  height: 520px;
  left: -120px;
  top: -120px;
  background: var(--lega-accent-teal);
  animation: lega-blob-a 18s ease-in-out infinite alternate;
}

.lega-hero-blobs::after {
  width: 420px;
  height: 420px;
  right: -100px;
  bottom: -160px;
  background: var(--lega-accent);
  animation: lega-blob-b 22s ease-in-out infinite alternate;
}

@keyframes lega-blob-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 40px, 0) scale(1.08); }
}

@keyframes lega-blob-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-80px, -50px, 0) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .lega-hero-blobs::before,
  .lega-hero-blobs::after { animation: none; }
}

/* ============================================================
   9a. Social-icon hover — opt-in via .lega-social on the icon link
   ============================================================ */
.lega-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 350ms var(--lega-ease-snap),
              color 250ms ease,
              background-color 250ms ease;
}

.lega-social:hover {
  transform: rotate(-8deg) scale(1.08);
  color: var(--lega-accent);
}

@media (prefers-reduced-motion: reduce) {
  .lega-social,
  .lega-social:hover { transform: none; }
}

/* ============================================================
   9b. Section-anchor radial glow — opt-in via .lega-section-glow
   on a section element. Renders a single low-opacity radial
   gradient behind the section heading area.
   ============================================================ */
.lega-section-glow {
  position: relative;
  isolation: isolate;
}

.lega-section-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 80%);
  height: 320px;
  background: radial-gradient(
    closest-side,
    var(--lega-accent-soft) 0%,
    transparent 70%
  );
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   10. Form polish — applied via .lega-form on a form's wrapper
   ============================================================ */
.lega-form input,
.lega-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lega-glass-border);
  padding: 14px 0;
  color: #fff;
  width: 100%;
  transition: border-color 300ms ease;
}

.lega-form input:focus,
.lega-form textarea:focus {
  outline: none;
  border-bottom-color: var(--lega-accent);
}

.lega-form .lega-field {
  position: relative;
  margin-bottom: 28px;
}

.lega-form .lega-field label {
  position: absolute;
  left: 0;
  top: 14px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  transition: transform 240ms var(--lega-ease-out),
              color 240ms ease,
              font-size 240ms ease;
}

.lega-form .lega-field input:focus + label,
.lega-form .lega-field input:not(:placeholder-shown) + label,
.lega-form .lega-field textarea:focus + label,
.lega-form .lega-field textarea:not(:placeholder-shown) + label {
  transform: translateY(-22px);
  font-size: 12px;
  color: var(--lega-accent);
}

.lega-form button[type="submit"],
.lega-form .submit-btn {
  margin-top: 8px;
}

/* ============================================================
   11. Portfolio tile hover — opt-in via .lega-portfolio-tile
   ============================================================ */
.lega-portfolio-tile {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
}

.lega-portfolio-tile img {
  transition: transform 700ms var(--lega-ease-out),
              filter 600ms ease;
}

.lega-portfolio-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
  opacity: 0;
  transition: opacity 500ms var(--lega-ease-out);
  pointer-events: none;
}

.lega-portfolio-tile:hover img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

.lega-portfolio-tile:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lega-portfolio-tile img,
  .lega-portfolio-tile:hover img { transform: none; filter: none; }
  .lega-portfolio-tile::after,
  .lega-portfolio-tile:hover::after { opacity: 0; }
}

/* ============================================================
   12. Hero Stats Bar — floating stat counters below hero content
   ============================================================ */
.lega-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 60px;
  padding: 32px 48px;
  background: var(--lega-glass-fill);
  border: 1px solid var(--lega-glass-border);
  border-radius: 16px;
  position: relative;
  z-index: 2;
}

@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .lega-hero-stats {
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
  }
}

.lega-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
  padding: 8px 16px;
}

.lega-stat-number {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: var(--lega-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.lega-stat-suffix {
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 700;
  color: var(--lega-accent);
  line-height: 1;
}

.lega-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 8px;
  font-weight: 500;
}

.lega-stat-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .lega-hero-stats {
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 20px;
  }
  .lega-stat-item { flex: 0 0 45%; }
  .lega-stat-divider { display: none; }
}

/* ============================================================
   13. Process Steps — 4-step timeline in About section
   ============================================================ */
.lega-process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  margin-bottom: 48px;
  position: relative;
}

/* Connecting line behind the step icons */
.lega-process-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(12.5% + 12px);
  right: calc(12.5% + 12px);
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--lega-accent-soft) 0%,
    var(--lega-accent) 50%,
    var(--lega-accent-soft) 100%
  );
  z-index: 0;
}

.lega-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.lega-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lega-accent) 0%, #B81E66 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px -6px rgba(236, 43, 122, 0.4);
  transition: transform 350ms var(--lega-ease-snap),
              box-shadow 350ms var(--lega-ease-out);
}

.lega-step:hover .lega-step-icon {
  transform: scale(1.12) translateY(-4px);
  box-shadow: 0 12px 32px -4px rgba(236, 43, 122, 0.55);
}

.lega-step-icon i {
  font-size: 20px;
  color: #fff;
}

.lega-step-content h4 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.lega-step-content p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  max-width: 200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .lega-process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }
  .lega-process-steps::before { display: none; }
}

@media (max-width: 480px) {
  .lega-process-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   14. Services Subtitle — descriptor under "What services..."
   ============================================================ */
.lega-services-subtitle {
  font-size: clamp(15px, 1.8vw, 18px);
  color: rgba(255, 255, 255, 0.55);
  max-width: 560px;
  margin-top: 24px;
  line-height: 1.65;
}

/* ============================================================
   15. Enhanced CTA Block — gradient card with action button
   ============================================================ */
.lega-cta-action {
  padding: 0 0 60px;
}

.lega-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 56px;
  border-radius: 20px;
  background: linear-gradient(135deg,
    rgba(236, 43, 122, 0.12) 0%,
    rgba(236, 43, 122, 0.04) 40%,
    var(--lega-glass-fill) 100%
  );
  border: 1px solid var(--lega-glass-border);
  position: relative;
  overflow: hidden;
}

@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .lega-cta-inner {
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
}

.lega-cta-inner::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--lega-accent-glow), transparent);
  opacity: 0.25;
  pointer-events: none;
}

.lega-cta-text h3 {
  font-size: clamp(22px, 3vw, 32px);
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.lega-cta-text p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 480px;
  line-height: 1.6;
}

.lega-cta-btn {
  flex-shrink: 0;
  padding: 18px 40px !important;
  font-size: 16px !important;
}

@media (max-width: 768px) {
  .lega-cta-inner {
    flex-direction: column;
    text-align: center;
    padding: 36px 28px;
  }
  .lega-cta-text h3 { margin-bottom: 8px; }
  .lega-cta-text p { margin: 0 auto; }
}

/* ============================================================
   16. Hero Image polish — subtle gradient overlay + rounded
   ============================================================ */
.hero-area-2 .hero-thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.hero-area-2 .hero-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  border-radius: inherit;
}

.hero-area-2 .hero-thumb img {
  border-radius: 14px;
  transition: transform 800ms var(--lega-ease-out);
}

.hero-area-2 .hero-thumb:hover img {
  transform: scale(1.03);
}

/* ============================================================
   17. Work section card polish — image rounded corners + overlay
   ============================================================ */
.work-box .thumb {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.work-box .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4) 100%);
  opacity: 0;
  transition: opacity 500ms var(--lega-ease-out);
  pointer-events: none;
  border-radius: inherit;
}

.work-box:hover .thumb::after { opacity: 1; }

.work-box .thumb img {
  border-radius: 12px;
  transition: transform 700ms var(--lega-ease-out),
              filter 600ms ease;
}

.work-box:hover .thumb img {
  transform: scale(1.04);
  filter: brightness(1.08);
}

/* ============================================================
   18. Award / Value-prop card hover line accent
   ============================================================ */
.award-box.lega-glass {
  position: relative;
  overflow: hidden;
}

.award-box.lega-glass::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lega-accent), #B81E66);
  transition: width 500ms var(--lega-ease-out);
}

.award-box.lega-glass:hover::after { width: 100%; }

/* ============================================================
   19. Service box icon badge — accent number styling
   ============================================================ */
.service-box .number {
  background: linear-gradient(135deg, var(--lega-accent), #B81E66);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* ============================================================
   20. Testimonial card subtle hover glow
   ============================================================ */
.testimonial-item.t-card.lega-glass {
  transition: transform 600ms var(--lega-ease-out),
              border-color 400ms ease,
              box-shadow 600ms var(--lega-ease-out);
}

.testimonial-item.t-card.lega-glass:hover {
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.5),
              0 0 40px -12px var(--lega-accent-glow);
}

/* ============================================================
   21. Footer subscribe input glow on focus
   ============================================================ */
.subscribe-form .input-field input:focus {
  border-color: var(--lega-accent) !important;
  box-shadow: 0 2px 16px -4px var(--lega-accent-glow);
}

/* ============================================================
   22. Smooth scrollbar styling (webkit only)
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--lega-accent-soft);
}

/* ============================================================
   23. Brand gradient utility — mirrors the logo's teal→orange→magenta wave
   ============================================================ */
.lega-brand-gradient-text {
  background: linear-gradient(90deg,
    var(--lega-accent-teal) 0%,
    var(--lega-accent-orange) 50%,
    var(--lega-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lega-brand-gradient-bg {
  background: linear-gradient(135deg,
    var(--lega-accent-teal) 0%,
    var(--lega-accent-orange) 55%,
    var(--lega-accent) 100%);
}

.lega-brand-gradient-border {
  position: relative;
  background-clip: padding-box;
  border: 1px solid transparent;
}

.lega-brand-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    var(--lega-accent-teal),
    var(--lega-accent-orange),
    var(--lega-accent));
  opacity: 0.55;
}

/* ============================================================
   24. Service category card — used on services pages with the
   restructured 5-pillar layout from lega_services.docx
   ============================================================ */
.lega-service-category {
  position: relative;
  padding: 32px 28px;
  border-radius: 14px;
  background: var(--lega-glass-fill);
  border: 1px solid var(--lega-glass-border);
  transition: transform 500ms var(--lega-ease-out),
              border-color 400ms ease,
              box-shadow 500ms var(--lega-ease-out);
  height: 100%;
  display: flex;
  flex-direction: column;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .lega-service-category {
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
  }
}

.lega-service-category:hover {
  transform: translateY(-4px);
  border-color: var(--lega-accent-soft);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.55),
              0 0 30px -10px var(--lega-accent-glow);
}

.lega-service-category .lega-cat-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lega-accent);
  margin-bottom: 14px;
}

.lega-service-category .lega-cat-title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.lega-service-category .lega-cat-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.62);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 22px;
}

.lega-service-category .lega-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.lega-service-category .lega-cat-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.82);
  line-height: 1.45;
  transition: color 200ms ease, transform 250ms var(--lega-ease-out);
}

.lega-service-category .lega-cat-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 2px;
  background: linear-gradient(90deg, var(--lega-accent-teal), var(--lega-accent));
  border-radius: 2px;
  transition: width 250ms var(--lega-ease-out);
}

.lega-service-category .lega-cat-list li:hover {
  color: #fff;
  transform: translateX(2px);
}

.lega-service-category .lega-cat-list li:hover::before {
  width: 18px;
}

.lega-service-category .lega-cat-list a {
  color: inherit;
  text-decoration: none;
}

.lega-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .lega-service-category { padding: 26px 22px; }
}

/* ============================================================
   25. Pillar color variants — rotate logo's teal/orange/magenta
   ============================================================ */
.lega-service-category.accent-teal    { --lega-pillar-accent: var(--lega-accent-teal); }
.lega-service-category.accent-orange  { --lega-pillar-accent: var(--lega-accent-orange); }
.lega-service-category.accent-magenta { --lega-pillar-accent: var(--lega-accent); }

.lega-service-category[class*="accent-"] .lega-cat-tag {
  color: var(--lega-pillar-accent);
}

.lega-service-category[class*="accent-"] .lega-cat-list li::before {
  background: var(--lega-pillar-accent);
}

.lega-service-category[class*="accent-"]:hover {
  border-color: color-mix(in srgb, var(--lega-pillar-accent) 55%, transparent);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.55),
              0 0 30px -10px color-mix(in srgb, var(--lega-pillar-accent) 45%, transparent);
}

.lega-service-category[class*="accent-"] .lega-cat-title a:hover {
  color: var(--lega-pillar-accent);
}

/* Pillar header subtitle ("01 — Pillar") — tint to match its pillar */
.lega-pillar-head { position: relative; }
.lega-pillar-head.accent-teal    .section-subtitle { color: var(--lega-accent-teal); }
.lega-pillar-head.accent-orange  .section-subtitle { color: var(--lega-accent-orange); }
.lega-pillar-head.accent-magenta .section-subtitle { color: var(--lega-accent); }

/* ============================================================
   26. Index service-box — rotate count number gradients
   ============================================================ */
.service-box.lega-pill-teal .number {
  background: linear-gradient(135deg, var(--lega-accent-teal), #4ea59a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.service-box.lega-pill-orange .number {
  background: linear-gradient(135deg, var(--lega-accent-orange), #c96c1d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.service-box.lega-pill-magenta .number {
  background: linear-gradient(135deg, var(--lega-accent), #B81E66);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtle left bar marker on the service-box title for color identity */
.service-box[class*="lega-pill-"] .content .title {
  position: relative;
  padding-left: 14px;
}
.service-box[class*="lega-pill-"] .content .title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  opacity: 0.85;
}
.service-box.lega-pill-teal    .content .title::before { background: var(--lega-accent-teal); }
.service-box.lega-pill-orange  .content .title::before { background: var(--lega-accent-orange); }
.service-box.lega-pill-magenta .content .title::before { background: var(--lega-accent); }

/* ============================================================
   27. Funfact numbers — tri-color rotation
   ============================================================ */
.funfact-area .funfact-wrapper .funfact-item:nth-child(5n+1) .number { color: var(--lega-accent-teal); }
.funfact-area .funfact-wrapper .funfact-item:nth-child(5n+2) .number { color: var(--lega-accent-orange); }
.funfact-area .funfact-wrapper .funfact-item:nth-child(5n+3) .number { color: var(--lega-accent); }
.funfact-area .funfact-wrapper .funfact-item:nth-child(5n+4) .number { color: var(--lega-accent-teal); }
.funfact-area .funfact-wrapper .funfact-item:nth-child(5n+5) .number { color: var(--lega-accent-orange); }

/* Feature box hero stat numbers — alternate teal & orange */
.hero-area .features-wrapper .feature-box:nth-child(1) .number { color: var(--lega-accent-teal); }
.hero-area .features-wrapper .feature-box:nth-child(2) .number { color: var(--lega-accent-orange); }

/* ============================================================
   28. Featured work tag accents — cycle logo colors
   ============================================================ */
.work-area .work-box:nth-child(3n+1) .tag { color: var(--lega-accent-teal); border-color: color-mix(in srgb, var(--lega-accent-teal) 45%, transparent); }
.work-area .work-box:nth-child(3n+2) .tag { color: var(--lega-accent-orange); border-color: color-mix(in srgb, var(--lega-accent-orange) 45%, transparent); }
.work-area .work-box:nth-child(3n+3) .tag { color: var(--lega-accent); border-color: color-mix(in srgb, var(--lega-accent) 45%, transparent); }

/* ============================================================
   29. Top-nav dropdown — refined glass + color-coded categories
   ============================================================ */
.body-wrapper.dark .main-menu > ul > li.menu-item-has-children { position: relative; }

.body-wrapper.dark .main-menu ul.dp-menu {
  background: rgba(20, 20, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 0 10px;
  width: 340px;
  margin-top: -10px;
  inset-inline-start: 0;
  box-shadow: 0 28px 56px -20px rgba(0, 0, 0, 0.7),
              0 0 60px -22px var(--lega-accent-glow);
  transform: translateY(8px);
  transition: opacity 280ms var(--lega-ease-out),
              transform 320ms var(--lega-ease-out),
              visibility 280ms var(--lega-ease-out);
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .body-wrapper.dark .main-menu ul.dp-menu {
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    background: rgba(20, 20, 22, 0.74);
  }
}

.body-wrapper.dark .main-menu > ul > li:hover > ul.dp-menu {
  transform: translateY(0);
}

/* Gradient strip at the top of the dropdown — mirrors the logo */
.body-wrapper.dark .main-menu ul.dp-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--lega-accent-teal) 0%,
    var(--lega-accent-orange) 50%,
    var(--lega-accent) 100%);
  opacity: 0.85;
}

.body-wrapper.dark .main-menu ul.dp-menu > li {
  padding: 0;
  margin: 2px 8px;
  border-radius: 8px;
}

.body-wrapper.dark .main-menu ul.dp-menu > li > a {
  display: flex;
  align-items: center;
  padding: 11px 16px 11px 30px;
  font-size: 14.5px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  position: relative;
  transition: background-color 220ms ease, color 220ms ease, padding 250ms var(--lega-ease-out);
}

/* color-coded left bar for each category */
.body-wrapper.dark .main-menu ul.dp-menu > li > a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.65;
  transition: height 250ms var(--lega-ease-out), opacity 250ms ease;
}
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(1) > a::before { background: var(--lega-accent-teal); }
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(2) > a::before { background: var(--lega-accent-orange); }
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(3) > a::before { background: var(--lega-accent); }
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(4) > a::before { background: linear-gradient(180deg, var(--lega-accent-teal), var(--lega-accent-orange)); }
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(5) > a::before { background: linear-gradient(180deg, var(--lega-accent-orange), var(--lega-accent)); }

.body-wrapper.dark .main-menu ul.dp-menu > li:hover > a {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
  padding-left: 34px;
  letter-spacing: 0;
}

.body-wrapper.dark .main-menu ul.dp-menu > li:hover > a::before {
  height: 22px;
  opacity: 1;
}

/* Reset the template chevron rotation; we render our own */
.body-wrapper.dark .main-menu ul.dp-menu li a::after { content: none !important; }

.body-wrapper.dark .main-menu ul.dp-menu li.menu-item-has-children > a {
  padding-right: 36px;
}

.body-wrapper.dark .main-menu ul.dp-menu li.menu-item-has-children > a::after {
  content: "\f105" !important;
  font-family: "Font Awesome 6 Free", "FontAwesome", var(--font_awesome);
  font-weight: 900;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 250ms var(--lega-ease-out), color 220ms ease;
}

.body-wrapper.dark .main-menu ul.dp-menu li.menu-item-has-children:hover > a::after {
  color: var(--lega-accent);
  transform: translateY(-50%) translateX(3px);
}

/* Service thumbnails inside top-level dropdown items — small preview
   image sits between the colored left bar and the label. */
.body-wrapper.dark .main-menu ul.dp-menu { width: 380px; }
.body-wrapper.dark .main-menu ul.dp-menu > li > a { padding-left: 26px; gap: 12px; }
.body-wrapper.dark .main-menu ul.dp-menu > li:hover > a { padding-left: 30px; }
.body-wrapper.dark .main-menu ul.dp-menu > li > a .lega-dp-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.04);
  transition: transform 250ms var(--lega-ease-out),
              border-color 220ms ease;
}
.body-wrapper.dark .main-menu ul.dp-menu > li:hover > a .lega-dp-thumb {
  transform: scale(1.04);
  border-color: rgba(255, 255, 255, 0.18);
}
.body-wrapper.dark .main-menu ul.dp-menu > li > a .lega-dp-label {
  display: inline-block;
  line-height: 1.25;
}

/* ============================================================
   About-page hero — video background
   ------------------------------------------------------------
   The about hero (`.lega-bg-paths-hero` with id `aboutHero`) now uses
   the supplied video as its primary background. The existing animated
   SVG paths layer is kept at very low opacity so the brand motion still
   reads subtly over the footage. The video itself fades to transparent
   at the bottom via a CSS mask, and the overlay ramps to opaque
   `#171717` so the section joins the next one without a hard edge.
   ============================================================ */
.lega-bg-paths-hero--video {
  min-height: 100vh;
  min-height: 100svh;
}
.lega-bg-paths-hero--video .lega-about-bg-video,
.lega-bg-paths-hero--video .lega-about-bg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lega-bg-paths-hero--video .lega-about-bg-video {
  object-fit: cover;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
}
.lega-bg-paths-hero--video .lega-about-bg-overlay {
  background: linear-gradient(180deg,
    rgba(23, 23, 23, 0.55) 0%,
    rgba(23, 23, 23, 0.45) 40%,
    rgba(23, 23, 23, 0.65) 70%,
    rgba(23, 23, 23, 0.95) 92%,
    rgba(23, 23, 23, 1) 100%);
  z-index: 1;
}
/* Push the decorative SVG paths above the video but well below the
   overlay+content so the footage stays the dominant background. */
.lega-bg-paths-hero--video .lega-bg-paths-layers {
  z-index: 0;
  opacity: 0.18;
  mix-blend-mode: screen;
}
.lega-bg-paths-hero--video .container { position: relative; z-index: 2; }

/* ============================================================
   Portfolio-page title hero — video background
   ------------------------------------------------------------
   The portfolio top section (`.page-title-area--video`) fills the
   viewport and runs the supplied footage as its background. The video
   masks to transparent at the bottom and the overlay ramps to opaque
   `#171717` so the hero merges into the next section seamlessly.
   ============================================================ */
.page-title-area--video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
/* Opt-out modifier — section sizes to its natural content height instead
   of filling the viewport. Used on the contact page where the form sits
   right under the title and a viewport-tall hero would push it down. */
.page-title-area--video.page-title-area--auto {
  min-height: 0;
  display: block;
}
.page-title-area--video > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.page-title-area--video:not(.page-title-area--auto) .page-title-area-inner { padding-top: 0; }
.page-title-area--video:not(.page-title-area--auto) .page-title-wrapper { margin-top: 0; }
.page-title-area--video .lega-page-bg-video,
.page-title-area--video .lega-page-bg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.page-title-area--video .lega-page-bg-video {
  object-fit: cover;
  z-index: 0;
  /* Keep the footage fully crisp for the top 75%, then fade quickly to
     transparent so the page background takes over before the section
     ends. The earlier mask started fading at 55%, which combined with
     the dark overlay made the lower half look muddy. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 75%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 75%, rgba(0,0,0,0) 100%);
}
.page-title-area--video .lega-page-bg-overlay {
  /* Light tint up top so the HD footage reads clearly behind the
     "Portfolio" headline — the previous 55% black layer was washing
     the picture out and making it look low-resolution. */
  background: linear-gradient(180deg,
    rgba(23, 23, 23, 0.22) 0%,
    rgba(23, 23, 23, 0.22) 55%,
    rgba(23, 23, 23, 0.55) 80%,
    rgba(23, 23, 23, 0.95) 95%,
    rgba(23, 23, 23, 1) 100%);
  z-index: 1;
}

/* ============================================================
   Service-detail hero spacing
   ------------------------------------------------------------
   The base template only applied `.section-spacing-top` to the
   hero-area-service-details inner, so the text + image grid had no
   breathing room before the wave divider that follows. Also inset the
   text column slightly so it doesn't crowd the image column.
   Affects: exhibition-stands, event-management, branding-designing,
   indoor-outdoor-printing, indoor-outdoo-signs, kiosks-acrylic-display,
   promotional-gift-items, digital-marketing.
   ============================================================ */
.hero-area-service-details .hero-area-service-details-inner {
  padding-bottom: 96px;
}
.hero-area-service-details .section-content .text-wrapper {
  padding-right: 24px;
}
.hero-area-service-details .section-content .text {
  max-width: 460px;
}
.hero-area-service-details .feature-list {
  margin-top: 28px;
}
@media only screen and (max-width: 1399px) {
  .hero-area-service-details .hero-area-service-details-inner {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .hero-area-service-details .hero-area-service-details-inner {
    padding-bottom: 64px;
  }
  .hero-area-service-details .section-content .text-wrapper {
    padding-right: 0;
  }
}
@media only screen and (max-width: 991px) {
  .hero-area-service-details .hero-area-service-details-inner {
    padding-bottom: 48px;
  }
}

/* Submenu (level-2) styling — close the awkward gap, match parent surface */
.body-wrapper.dark .main-menu ul.dp-menu ul {
  inset-inline-start: calc(100% + 2px);
  margin-left: 0;
  background: rgba(20, 20, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 0;
  width: 280px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.65);
  transform: translateX(-6px);
  transition: opacity 260ms var(--lega-ease-out),
              transform 320ms var(--lega-ease-out);
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .body-wrapper.dark .main-menu ul.dp-menu ul {
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    background: rgba(20, 20, 22, 0.74);
  }
}

.body-wrapper.dark .main-menu ul.dp-menu li:hover > ul {
  transform: translateX(0);
}

.body-wrapper.dark .main-menu ul.dp-menu ul li {
  padding: 0 8px;
  margin: 1px 0;
}

.body-wrapper.dark .main-menu ul.dp-menu ul li a {
  font-size: 13.5px;
  padding: 9px 14px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  transition: background-color 200ms ease, color 200ms ease, transform 240ms var(--lega-ease-out);
}

/* Inherit the parent category's accent color on submenu hover */
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(1) ul li a:hover { color: var(--lega-accent-teal); }
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(2) ul li a:hover { color: var(--lega-accent-orange); }
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(3) ul li a:hover { color: var(--lega-accent); }
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(4) ul li a:hover { color: var(--lega-accent-teal); }
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(5) ul li a:hover { color: var(--lega-accent-orange); }

.body-wrapper.dark .main-menu ul.dp-menu ul li a:hover {
  background-color: rgba(255, 255, 255, 0.05);
  letter-spacing: 0;
  transform: translateX(2px);
}

/* Subtle hover background tint per category for the level-1 row */
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(1):hover > a {
  background: color-mix(in srgb, var(--lega-accent-teal) 10%, transparent);
}
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(2):hover > a {
  background: color-mix(in srgb, var(--lega-accent-orange) 10%, transparent);
}
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(3):hover > a {
  background: color-mix(in srgb, var(--lega-accent) 10%, transparent);
}
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(4):hover > a {
  background: color-mix(in srgb, var(--lega-accent-teal) 8%, transparent);
}
.body-wrapper.dark .main-menu ul.dp-menu > li:nth-child(5):hover > a {
  background: color-mix(in srgb, var(--lega-accent-orange) 8%, transparent);
}

@media (max-width: 1199px) {
  .body-wrapper.dark .main-menu ul.dp-menu,
  .body-wrapper.dark .main-menu ul.dp-menu ul {
    width: 100%;
    position: static;
    margin: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   30. Scroll progress bar — fixed top, brand gradient,
   driven by transform: scaleX() set in JS.
   ============================================================ */
.lega-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--lega-accent-teal) 0%,
    var(--lega-accent-orange) 50%,
    var(--lega-accent) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 10000;
  pointer-events: none;
  will-change: transform;
  box-shadow: 0 0 12px var(--lega-accent-glow);
}

@media (prefers-reduced-motion: reduce) {
  .lega-scroll-progress { display: none; }
}

/* ============================================================
   31. 3D Tilt — preserve depth + smooth transitions
   ============================================================ */
.lega-tilt {
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.lega-tilt > *,
.lega-tilt .thumb,
.lega-tilt .content,
.lega-tilt .lega-cat-title,
.lega-tilt .lega-cat-tag {
  transform: translateZ(0);
}
.lega-tilt .thumb { transform: translateZ(24px); }
.lega-tilt .lega-cat-tag { transform: translateZ(34px); }
.lega-tilt .lega-cat-title { transform: translateZ(28px); }

@media (max-width: 768px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .lega-tilt, .lega-tilt:hover { transform: none !important; }
}

/* ============================================================
   32. Cursor spotlight — radial glow that follows pointer
   ============================================================ */
.lega-spotlight {
  position: relative;
  isolation: isolate;
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-opacity: 0;
}
.lega-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle 420px at var(--spot-x) var(--spot-y),
      color-mix(in srgb, var(--lega-accent-orange) 14%, transparent) 0%,
      color-mix(in srgb, var(--lega-accent) 8%, transparent) 30%,
      transparent 60%
    );
  pointer-events: none;
  z-index: 0;
  opacity: var(--spot-opacity);
  transition: opacity 320ms ease;
}
.lega-spotlight > * { position: relative; z-index: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .lega-spotlight::before { display: none; }
}

/* ============================================================
   33. Brand wave divider — animated SVG path on scroll-into-view
   Use <svg class="lega-wave-divider" viewBox="0 0 1200 100">
   ============================================================ */
.lega-wave-divider {
  width: 100%;
  height: 90px;
  display: block;
  overflow: visible;
  margin: 32px 0;
}
.lega-wave-divider path {
  fill: none;
  stroke: url(#lega-wave-gradient);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--lega-accent) 32%, transparent));
}

/* ============================================================
   34. Marquee strip — brand gradient bullets, infinite scroll
   ============================================================ */
.lega-marquee {
  position: relative;
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--lega-glass-border);
  border-bottom: 1px solid var(--lega-glass-border);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.02),
      rgba(255,255,255,0.0));
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lega-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  animation: lega-marquee 38s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.lega-marquee__item {
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.015em;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 32px;
}
.lega-marquee__item::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--lega-accent-teal),
    var(--lega-accent-orange),
    var(--lega-accent));
  flex-shrink: 0;
  box-shadow: 0 0 18px color-mix(in srgb, var(--lega-accent) 50%, transparent);
}
@keyframes lega-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lega-marquee__track { animation: none; }
}

/* ============================================================
   35. Floating brand orbs — soft drifting color blobs
   ============================================================ */
.lega-floating-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.lega-floating-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.18;
  will-change: transform;
}
.lega-floating-orbs span:nth-child(1) {
  width: 360px; height: 360px;
  top: -80px; left: -120px;
  background: var(--lega-accent-teal);
  animation: lega-orb-1 22s ease-in-out infinite alternate;
}
.lega-floating-orbs span:nth-child(2) {
  width: 280px; height: 280px;
  top: 30%; right: 8%;
  background: var(--lega-accent-orange);
  animation: lega-orb-2 26s ease-in-out infinite alternate;
}
.lega-floating-orbs span:nth-child(3) {
  width: 320px; height: 320px;
  bottom: -100px; left: 40%;
  background: var(--lega-accent);
  animation: lega-orb-3 30s ease-in-out infinite alternate;
}
@keyframes lega-orb-1 {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(80px, 60px, 0) scale(1.1); }
}
@keyframes lega-orb-2 {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-80px, 100px, 0) scale(0.95); }
}
@keyframes lega-orb-3 {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-60px, -90px, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .lega-floating-orbs span { animation: none; }
}

/* ============================================================
   36. Service-list bullet — small gradient bar instead of bullet
   ============================================================ */
.service-box .service-list { list-style: none; padding-left: 0; }
.service-box .service-list li {
  position: relative;
  padding-left: 22px;
  transition: padding-left 220ms var(--lega-ease-out), color 200ms ease;
}
.service-box .service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lega-accent-teal), var(--lega-accent));
  transition: width 220ms var(--lega-ease-out), background 220ms ease;
}
.service-box .service-list li:hover { padding-left: 28px; }
.service-box .service-list li:hover::before { width: 18px; }

.service-box.lega-pill-teal    .service-list li::before { background: var(--lega-accent-teal); }
.service-box.lega-pill-orange  .service-list li::before { background: var(--lega-accent-orange); }
.service-box.lega-pill-magenta .service-list li::before { background: var(--lega-accent); }

/* ============================================================
   37. Section title underline accent on inner pages
   ============================================================ */
.lega-title-underline {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
}
.lega-title-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--lega-accent-teal),
    var(--lega-accent-orange),
    var(--lega-accent));
}

/* ============================================================
   38. Gradient-border card — animated border reveal on hover
   ============================================================ */
.lega-grad-card {
  position: relative;
  background: var(--lega-glass-fill);
  border: 1px solid var(--lega-glass-border);
  border-radius: 14px;
  padding: 26px;
  isolation: isolate;
  transition: transform 500ms var(--lega-ease-out);
}
.lega-grad-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    var(--lega-accent-teal),
    var(--lega-accent-orange),
    var(--lega-accent));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: -1;
}
.lega-grad-card:hover { transform: translateY(-3px); }
.lega-grad-card:hover::before { opacity: 1; }

/* ============================================================
   39. Client pills — keep the container close to the template's
   original size, but cut inner padding hard so the logo actually
   fills the pill (the source PNGs are low-res, so we don't want
   to scale them up much — we just want the white pill to stop
   eating most of the area).
   ============================================================ */
.client-area .client-box {
  width: 200px !important;
  height: 88px !important;
  padding: 4px 12px !important;
}
.client-area .client-box img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

@media only screen and (max-width: 1919px) {
  .client-area .client-box {
    width: 170px !important;
    height: 74px !important;
    padding: 4px 10px !important;
  }
}
@media only screen and (max-width: 1399px) {
  .client-area .client-box {
    width: 142px !important;
    height: 60px !important;
    padding: 3px 8px !important;
  }
}
@media only screen and (max-width: 991px) {
  .client-area .client-box {
    width: 118px !important;
    height: 52px !important;
    padding: 3px 7px !important;
  }
}
@media only screen and (max-width: 767px) {
  .client-area .client-box {
    width: 95px !important;
    height: 40px !important;
    padding: 2px 6px !important;
  }
}

/* Tighten the physics play area too — the original 633px is mostly
   empty space below the heading. Less wrapper height = less padding
   feel for the whole section. */
.client-area .client-capsule-wrapper      { height: 520px !important; }
@media only screen and (max-width: 1919px) {
  .client-area .client-capsule-wrapper    { height: 460px !important; }
}
@media only screen and (max-width: 1399px) {
  .client-area .client-capsule-wrapper    { height: 410px !important; }
}
@media only screen and (max-width: 991px) {
  .client-area .client-capsule-wrapper    { height: 360px !important; }
}

/* ============================================================
   40. 404 Page — animated radial gradient background (ported
   from the AnimatedGradientBackground React component) +
   restyled error layout with staggered reveal.
   ============================================================ */
.lega-404-hero {
  position: relative;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #0a0a0a;
}

.lega-anim-gradient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  opacity: 0;
  transform: scale(1.5);
  animation: lega-grad-enter 2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  pointer-events: none;
}

.lega-anim-gradient-fill {
  position: absolute;
  inset: 0;
  /* JS drives `background` each frame; fallback in case JS is blocked */
  background: radial-gradient(125% 125% at 50% 20%,
    #0a0a0a 30%,
    #6BC4B6 55%,
    #F08833 70%,
    #EC2B7A 85%,
    #0a0a0a 100%);
}

@keyframes lega-grad-enter {
  to { opacity: 1; transform: scale(1); }
}

.lega-404-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 20px;
}

.lega-404-content > * {
  opacity: 0;
  transform: translateY(24px);
  animation: lega-404-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lega-404-tag       { animation-delay: 0.45s; }
.lega-404-number    { animation-delay: 0.60s; }
.lega-404-title     { animation-delay: 0.80s; }
.lega-404-text      { animation-delay: 0.95s; }
.lega-404-actions   { animation-delay: 1.10s; }
.lega-404-quicklinks{ animation-delay: 1.25s; }

@keyframes lega-404-rise {
  to { opacity: 1; transform: translateY(0); }
}

.lega-404-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lega-accent);
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, var(--lega-accent) 50%, transparent);
  border-radius: 100px;
  background: color-mix(in srgb, var(--lega-accent) 6%, transparent);
  margin-bottom: 28px;
}
.lega-404-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lega-accent);
  box-shadow: 0 0 8px var(--lega-accent);
  animation: lega-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes lega-pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.65; }
}

.lega-404-number {
  font-size: clamp(130px, 28vw, 340px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  margin: 0 0 28px;
  /* gradient text via background-clip on the inner span */
}
.lega-404-number .lega-brand-gradient-text {
  filter: drop-shadow(0 8px 40px color-mix(in srgb, var(--lega-accent) 30%, transparent));
}

.lega-404-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.lega-404-text {
  font-size: clamp(15px, 1.8vw, 18px);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  margin: 0 auto 40px;
  max-width: 540px;
}

.lega-404-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.lega-404-link {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 220ms ease, gap 220ms var(--lega-ease-out);
}
.lega-404-link:hover {
  color: var(--lega-accent);
  gap: 12px;
}
.lega-404-link svg { width: 16px; height: 16px; }

.lega-404-quicklinks {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}
.lega-404-quicklinks-label {
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.lega-404-quicklinks a {
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--lega-glass-border);
  background: var(--lega-glass-fill);
  transition: color 220ms ease, border-color 220ms ease, transform 220ms var(--lega-ease-out), background 220ms ease;
}
.lega-404-quicklinks a:hover { transform: translateY(-2px); }
.lega-404-quicklinks a:nth-of-type(1):hover {
  color: var(--lega-accent-teal);
  border-color: color-mix(in srgb, var(--lega-accent-teal) 55%, transparent);
  background: color-mix(in srgb, var(--lega-accent-teal) 8%, transparent);
}
.lega-404-quicklinks a:nth-of-type(2):hover {
  color: var(--lega-accent-orange);
  border-color: color-mix(in srgb, var(--lega-accent-orange) 55%, transparent);
  background: color-mix(in srgb, var(--lega-accent-orange) 8%, transparent);
}
.lega-404-quicklinks a:nth-of-type(3):hover {
  color: var(--lega-accent);
  border-color: color-mix(in srgb, var(--lega-accent) 55%, transparent);
  background: color-mix(in srgb, var(--lega-accent) 8%, transparent);
}

/* Soft dark vignette at the bottom so the footer transition is clean */
.lega-404-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, transparent, #0a0a0a 90%);
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lega-anim-gradient,
  .lega-404-content > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .lega-404-tag::before { animation: none; }
}

/* ============================================================
   41. Background Paths hero — flowing SVG strokes ported from
   the BackgroundPaths React component. Two mirrored layers,
   each with 36 paths, animated stroke-dashoffset + opacity.
   ============================================================ */
.lega-bg-paths-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 0 80px;
}

.lega-bg-paths-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  color: #ffffff;
}

.lega-bg-paths-layers svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  /* contain paint to the SVG region so 36 stroked paths don't repaint the page */
  contain: paint;
  transform: translateZ(0);          /* promote to its own compositor layer */
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* one slow, GPU-composited drift per layer + a calm synchronized breath */
  animation:
    lega-svg-drift var(--lega-drift-dur, 90s) linear infinite,
    lega-svg-breathe 14s ease-in-out infinite;
}

/* Layers drift in opposite directions for the gentle "crossing" feel */
.lega-bg-paths-layers svg[data-position="1"]  { --lega-drift-x:  18px; --lega-drift-y: -10px; }
.lega-bg-paths-layers svg[data-position="-1"] { --lega-drift-x: -18px; --lega-drift-y:  10px; animation-delay: -7s; }

@keyframes lega-svg-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(var(--lega-drift-x, 16px), var(--lega-drift-y, -8px), 0) scale(1.015); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes lega-svg-breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1;    }
}

/* Each path: STATIC stroke (no per-frame paint). Opacity baked in via
   stroke-opacity attribute set inline. No per-path animation. */
.lega-flow-path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
}

/* Brand-tinted accent strokes — set by the generator on a few paths */
.lega-flow-path.tint-teal    { stroke: var(--lega-accent-teal); }
.lega-flow-path.tint-orange  { stroke: var(--lega-accent-orange); }
.lega-flow-path.tint-magenta { stroke: var(--lega-accent); }

@media (prefers-reduced-motion: reduce) {
  .lega-bg-paths-layers svg { animation: none; opacity: 0.9; }
}

/* ----- Hero content layout ----- */
.lega-bg-paths-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  opacity: 0;
  animation: lega-bg-fade-in 1.6s ease-out 0.1s forwards;
}

@keyframes lega-bg-fade-in {
  to { opacity: 1; }
}

.lega-bg-paths-subtitle {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lega-accent);
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--lega-accent) 45%, transparent);
  background: color-mix(in srgb, var(--lega-accent) 6%, transparent);
  margin-bottom: 28px;
}

.lega-bg-paths-title {
  font-size: clamp(48px, 8.5vw, 128px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  color: #fff;
}

.lega-bg-paths-title .lega-word {
  display: inline-block;
  margin-right: 0.18em;
}
.lega-bg-paths-title .lega-word:last-child { margin-right: 0; }

.lega-bg-paths-title .lega-letter {
  display: inline-block;
  color: #fff;
  opacity: 0;
  transform: translate3d(0, 60px, 0);
  will-change: transform, opacity;
  animation: lega-letter-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--lega-letter-i, 0) * 28ms + var(--lega-word-i, 0) * 90ms + 0.15s);
}
/* Drop the GPU layer once the rise is done so static text doesn't keep a layer */
.lega-bg-paths-title .lega-letter.lega-done {
  will-change: auto;
}

@keyframes lega-letter-rise {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lega-bg-paths-title .lega-letter { animation: none; opacity: 1; transform: none; }
  .lega-bg-paths-content { animation: none; opacity: 1; }
}

.lega-bg-paths-text {
  font-size: clamp(15px, 1.7vw, 19px);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  margin: 0 auto 36px;
  max-width: 620px;
  opacity: 0;
  animation: lega-bg-fade-in 1s ease-out 1.1s forwards;
}

/* Glass CTA — mirrors the gradient-border button in the React demo */
.lega-bg-paths-cta-wrap {
  display: inline-block;
  position: relative;
  padding: 1px;
  border-radius: 18px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.04));
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  animation: lega-bg-fade-in 1s ease-out 1.3s forwards;
  transition: box-shadow 320ms ease, transform 320ms var(--lega-ease-out);
}
.lega-bg-paths-cta-wrap:hover {
  box-shadow: 0 16px 44px -10px var(--lega-accent-glow);
  transform: translateY(-2px);
}

.lega-bg-paths-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 17px;
  background: rgba(10, 10, 10, 0.92);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 240ms ease;
}
.lega-bg-paths-cta:hover { background: rgba(15, 15, 18, 1); color: #fff; }
.lega-bg-paths-cta .arrow {
  display: inline-block;
  transition: transform 280ms var(--lega-ease-out);
  opacity: 0.78;
}
.lega-bg-paths-cta:hover .arrow {
  transform: translateX(6px);
  opacity: 1;
}

@media (max-width: 768px) {
  .lega-bg-paths-hero { min-height: 60vh; padding: 96px 0 64px; }
}

/* ============================================================
   42. Vertical rhythm — pillar / intro / divider spacing
   Replaces inline padding/margin styles previously sprinkled
   across services.html and index.html.
   ============================================================ */
.lega-pillar {
  scroll-margin-top: 120px;
  padding-top: 72px;
}
.lega-pillar:first-of-type { padding-top: 40px; }

.lega-pillar-head {
  margin-bottom: 24px;
}
.lega-pillar-head .text-wrapper {
  max-width: 720px;
}

/* Italic tagline that sits above the longer pillar description */
.lega-pillar-intro {
  font-style: italic;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.7);
}

/* Same italic tagline style for the service-box on index.html */
.service-box .lega-service-tagline {
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 18px;
  font-size: 14.5px;
  line-height: 1.5;
}

/* Tighten the brand wave divider — the previous 32px top/bottom made
   transitions look loose. Also drop default vertical margin to 0 inside
   a container, which already carries spacing of its own. */
.lega-wave-divider {
  margin: 0;
  height: 72px;
}

.container .lega-wave-divider { margin: 8px 0; }

@media (max-width: 768px) {
  .lega-pillar { padding-top: 56px; }
  .lega-pillar:first-of-type { padding-top: 28px; }
  .lega-wave-divider { height: 56px; }
}

/* Inline link inside pillar card titles — kept inheriting the title color */
.lega-cat-title a { color: inherit; text-decoration: none; }
.lega-cat-title a:hover { color: var(--lega-pillar-accent, var(--lega-accent)); }

/* Tighten the 404 hero so it doesn't fight the global header height
   (was calc(100vh - 120px), which overflowed on shorter laptops). */
.lega-404-hero {
  min-height: 78vh;
}
.lega-404-content {
  padding: 64px 20px 96px;
}
@media (max-width: 768px) {
  .lega-404-hero { min-height: 70vh; }
  .lega-404-content { padding: 48px 16px 72px; }
  .lega-404-actions { gap: 20px; margin-bottom: 36px; }
}

/* The page-title-area replaced by .lega-bg-paths-hero on about.html should
   not bear extra section-spacing from the original sibling. */
.lega-bg-paths-hero + section,
.lega-bg-paths-hero + div + section {
  margin-top: 0;
}

/* lega-cat-grid spacing — the 48px top margin compounded with pillar
   padding-top. Tighter, more rhythmic value. */
.lega-cat-grid { margin-top: 28px; }

/* Service-box title accent bar — the 14px padding-left on titles caused
   the existing template title to misalign with the count number. Restrict
   the bar treatment to the .title element only and align with the rest. */
.service-box[class*="lega-pill-"] .content .title { padding-left: 16px; }
.service-box[class*="lega-pill-"] .content .title::before {
  top: 6px;
  bottom: 6px;
}

/* Service-list bullet collision — the existing template sets padding-left
   on `.service-box .service-list li`; my polish layer also adds it. Make
   sure the final value is consistent and the bullet sits where it should. */
.service-box .service-list { margin-top: 8px; }
.service-box .service-list li { line-height: 1.7; }

/* Tagline italic spacing inside service boxes shouldn't push the list down. */
.service-box .lega-service-tagline + .service-list { margin-top: 4px; }

/* Pillar header section-header overrides — original template adds large
   bottom margin; we already give the head its own rhythm. */
.lega-pillar .section-header { margin-bottom: 0; }
.lega-pillar .section-title-wrapper { margin-bottom: 14px; }
.lega-pillar .subtitle-wrapper { margin-bottom: 10px; }

/* ============================================================
   Services page — layout redesign
   ------------------------------------------------------------
   Treatment goals (font colors kept as-is per request):
   - Make the "What We Offer" intro feel like a real hero.
   - Add a sticky-feel quick-jump nav so the five pillars are
     navigable without scrolling endlessly.
   - Give each pillar an oversized gradient number badge so the
     vertical stack has rhythm and clear hierarchy.
   - Lock the category grid to consistent column counts (was
     auto-fit which left orphan rows on the 2-card pillar).
   - Add a top accent line + "Explore" affordance to each card.
   - Replace the disconnected dual-image closer with a clean CTA.
   ============================================================ */

/* Inherit the same pillar accent var on the pillar wrapper so the
   head's number badge and accents share the card color. */
.lega-pillar.accent-teal    { --lega-pillar-accent: var(--lega-accent-teal); }
.lega-pillar.accent-orange  { --lega-pillar-accent: var(--lega-accent-orange); }
.lega-pillar.accent-magenta { --lega-pillar-accent: var(--lega-accent); }

/* Intro section: a touch more breathing room above the pillar nav. */
.lega-services-intro .section-title-wrapper { max-width: 980px; }
.lega-services-intro { margin-bottom: 28px; }

/* ----- Pillar quick-jump nav ---------------------------------- */
.lega-pillar-nav {
  position: sticky;
  top: 84px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  margin-bottom: 24px;
  background: rgba(20, 20, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
}
.lega-pillar-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color 220ms ease, color 220ms ease,
              transform 260ms var(--lega-ease-out);
  position: relative;
  overflow: hidden;
}
.lega-pillar-nav__item .num {
  font-family: var(--font_thunder, inherit);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--nav-accent, var(--lega-accent));
}
.lega-pillar-nav__item .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lega-pillar-nav__item.accent-teal    { --nav-accent: var(--lega-accent-teal); }
.lega-pillar-nav__item.accent-orange  { --nav-accent: var(--lega-accent-orange); }
.lega-pillar-nav__item.accent-magenta { --nav-accent: var(--lega-accent); }
.lega-pillar-nav__item::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--nav-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--lega-ease-out);
}
.lega-pillar-nav__item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  transform: translateY(-1px);
}
.lega-pillar-nav__item:hover::after { transform: scaleX(1); }
@media (max-width: 991px) {
  .lega-pillar-nav {
    grid-template-columns: repeat(2, 1fr);
    position: static;
  }
}
@media (max-width: 575px) {
  .lega-pillar-nav { grid-template-columns: 1fr; }
}

/* ----- Pillar header — oversized gradient number badge -------- */
.lega-pillar { position: relative; }
.lega-pillar-head {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  grid-template-rows: auto auto;
  gap: 12px 48px;
  align-items: start;
  padding: 36px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lega-pillar:first-of-type .lega-pillar-head { border-top: 0; padding-top: 16px; }
.lega-pillar-head::before {
  content: attr(data-pillar-num);
  /* Inherit from the .lega-pillar wrapper via the CSS variable. */
}
.lega-pillar[data-pillar-num] .lega-pillar-head::before {
  content: attr(data-num, "");
}
.lega-pillar .lega-pillar-head {
  /* read the number from the pillar wrapper via a custom property */
  --lega-pillar-num: "";
}
/* Render the big number using a pseudo on the head, pulling the value
   from the parent .lega-pillar via attr() */
.lega-pillar .lega-pillar-head::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  display: block;
  font-family: var(--font_thunder, sans-serif);
  font-size: clamp(96px, 14vw, 200px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg,
    var(--lega-pillar-accent, var(--lega-accent)) 0%,
    color-mix(in srgb, var(--lega-pillar-accent, var(--lega-accent)) 35%, transparent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* attr() with arbitrary values is recent — we set content per pillar */
}
.lega-pillar[data-pillar-num="01"] .lega-pillar-head::before { content: "01"; }
.lega-pillar[data-pillar-num="02"] .lega-pillar-head::before { content: "02"; }
.lega-pillar[data-pillar-num="03"] .lega-pillar-head::before { content: "03"; }
.lega-pillar[data-pillar-num="04"] .lega-pillar-head::before { content: "04"; }
.lega-pillar[data-pillar-num="05"] .lega-pillar-head::before { content: "05"; }

.lega-pillar-head .section-title-wrapper { grid-column: 2; grid-row: 1; margin: 0; }
.lega-pillar-head .text-wrapper { grid-column: 2; grid-row: 2; max-width: 760px; }
.lega-pillar-head .subtitle-wrapper { margin-bottom: 6px; }
.lega-pillar-head .section-title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; }

/* The number gets a subtle vertical accent bar on its right edge so it
   reads as a column rather than floating. */
.lega-pillar-head {
  position: relative;
}
.lega-pillar-head > .section-title-wrapper {
  border-left: 2px solid color-mix(in srgb, var(--lega-pillar-accent, var(--lega-accent)) 50%, transparent);
  padding-left: 28px;
  margin-left: -2px; /* hairline overlap so it looks like the bar starts cleanly */
}
.lega-pillar-head > .text-wrapper {
  padding-left: 28px;
}

@media (max-width: 768px) {
  .lega-pillar-head {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 28px 0 18px;
  }
  .lega-pillar .lega-pillar-head::before {
    grid-column: 1;
    grid-row: auto;
    font-size: clamp(72px, 22vw, 120px);
    margin-bottom: 6px;
  }
  .lega-pillar-head .section-title-wrapper,
  .lega-pillar-head .text-wrapper {
    grid-column: 1;
    grid-row: auto;
    padding-left: 0;
    border-left: 0;
    margin-left: 0;
  }
}

/* ----- Category grid: consistent columns, no orphan rows ------ */
.lega-cat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1199px) {
  .lega-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lega-cat-grid { grid-template-columns: 1fr; }
}
/* Two-card pillar (Events) — let the cards take the natural 2-up so
   they don't stretch into oversized half-row monsters on wide screens. */
#events .lega-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; }
@media (max-width: 640px) {
  #events .lega-cat-grid { grid-template-columns: 1fr; }
}

/* ----- Cards: top brand-gradient line + refined hover ---------- */
.lega-service-category {
  overflow: hidden;
  padding-top: 36px;
}
.lega-service-category::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--lega-pillar-accent, var(--lega-accent)) 0%,
    color-mix(in srgb, var(--lega-pillar-accent, var(--lega-accent)) 25%, transparent) 100%);
  opacity: 0.85;
  transform-origin: left center;
  transition: transform 320ms var(--lega-ease-out), opacity 220ms ease;
  transform: scaleX(0.4);
}
.lega-service-category:hover::before {
  transform: scaleX(1);
  opacity: 1;
}

/* ----- Closing CTA card --------------------------------------- */
.lega-services-cta {
  margin-top: 24px;
}
.lega-services-cta__inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 56px;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--lega-accent-teal) 18%, transparent) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--lega-accent) 22%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
.lega-services-cta__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--lega-accent-teal) 0%,
    var(--lega-accent-orange) 50%,
    var(--lega-accent) 100%);
  opacity: 0.9;
  height: 2px;
  inset: 0 0 auto 0;
  border-radius: 20px 20px 0 0;
}
.lega-services-cta__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
}
.lega-services-cta__title {
  font-family: var(--font_instrumentsans, var(--font_sequelsans, inherit));
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 16px;
  max-width: 28ch;
}
.lega-services-cta__text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
  max-width: 56ch;
}
.lega-services-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.lega-services-cta__btn { align-self: flex-start; }
.lega-services-cta__secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 200ms ease, gap 250ms var(--lega-ease-out);
}
.lega-services-cta__secondary .arrow { transition: transform 250ms var(--lega-ease-out); }
.lega-services-cta__secondary:hover { color: var(--lega-accent-orange); gap: 14px; }
.lega-services-cta__secondary:hover .arrow { transform: translateX(3px); }

@media (max-width: 991px) {
  .lega-services-cta__inner {
    grid-template-columns: 1fr;
    padding: 40px 32px;
    gap: 28px;
  }
}
@media (max-width: 575px) {
  .lega-services-cta__inner { padding: 32px 22px; border-radius: 16px; }
}

/* Tighten about-area-details right under the new About hero so the
   page doesn't get a double "header" gap. */
.lega-bg-paths-hero + script + .about-area-details,
.lega-bg-paths-hero ~ .about-area-details {
  padding-top: 0;
}
.about-area-details .about-area-details-inner { padding-top: 40px; }

/* Hero video background — the <video> sits behind everything inside
   .hero-area; the overlay tones the footage down so the white headline
   and white LEGA text stay readable. We deliberately avoid
   `overflow: hidden` on .hero-area so the big-text (which uses negative
   margins to compensate for its painted padding) is not clipped, and so
   the LEGA glyphs can still bleed below the section as before. The
   overlay fades to solid #171717 at the bottom so the hero blends
   seamlessly into the next section instead of showing a hard edge. */
.hero-area .lega-hero-bg-video,
.hero-area .lega-hero-bg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-area .lega-hero-bg-video {
  object-fit: cover;
  z-index: 0;
  /* Physically fade the footage to transparent over the bottom 45% so
     the page background (#171717) takes over before the section ends —
     no hard horizontal edge between hero and the next section. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
}
.hero-area .lega-hero-bg-overlay {
  background: linear-gradient(180deg,
    rgba(23, 23, 23, 0.55) 0%,
    rgba(23, 23, 23, 0.45) 40%,
    rgba(23, 23, 23, 0.65) 70%,
    rgba(23, 23, 23, 0.95) 92%,
    rgba(23, 23, 23, 1) 100%);
  z-index: 1;
}
.hero-area > .container { position: relative; z-index: 2; }

/* Hero LEGA big-text — slightly smaller and painted with the brand
   gradient from the logo (teal → orange → pink). The original tight
   line-height (0.477) makes the line-box much shorter than the actual
   glyph height, so `background-clip: text` would crop the ascenders.
   We expand the paint box with vertical padding and cancel it out with
   matching negative margin so the visual layout stays the same. */
.hero-area .big-text {
  font-size: 780px;
  padding: 0.3em 0;
  margin: -0.3em 0;
  background: linear-gradient(90deg, #6BC4B6 0%, #F08833 50%, #EC2B7A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media only screen and (max-width: 1919px) {
  .hero-area .big-text { font-size: 580px; }
}
@media only screen and (max-width: 1399px) {
  .hero-area .big-text { font-size: 500px; }
}

/* Client capsules (index.html) — replaced the template demo logo
   bitmaps with text capsules listing real LEGA client names. The Matter.js
   throwable physics still operates on the outer .client-box span, so the
   bouncing animation is preserved. Styling here picks a font size that
   fits each viewport size's .client-box dimensions. */
.client-box .client-name {
  color: #ffffff;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 22px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
.client-box.bg-theme .client-name { color: #ffffff; }
@media only screen and (max-width: 1399px) {
  .client-box .client-name { font-size: clamp(11px, 1vw, 16px); }
}
@media only screen and (max-width: 991px) {
  .client-box .client-name { font-size: 11px; letter-spacing: 0.03em; }
}
@media only screen and (max-width: 767px) {
  .client-box .client-name { font-size: 9px; letter-spacing: 0.02em; }
}

/* Post-hero studio image (index.html) — the 1024×1024 PNG was rendering
   full viewport-width because of Bootstrap's .w-100 utility, which made
   the square image visually overwhelming. Constrain it to a sensible
   max width, center it, and let height auto-scale. */
.video-box {
  display: flex;
  justify-content: center;
  padding: 40px 24px 0;
}
.video-box img.video-area {
  max-width: 560px;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
@media only screen and (max-width: 991px) {
  .video-box { padding: 32px 16px 0; }
  .video-box img.video-area { max-width: 480px; }
}
@media only screen and (max-width: 575px) {
  .video-box img.video-area { max-width: 100%; }
}