:root {
  --bg: #f6f5f2;
  --bg-alt: #eeede9;
  --bg-alt-2: #e9e8e3;
  --bg-alt-3: #efeee9;
  --bg-footer: #f1f0ec;
  --surface: #ffffff;
  --hover-bg: #f2f1ee;
  --text: #1b1b1b;
  --muted: #6e6e6e;
  --muted-2: #5e5e5e;
  --muted-3: #8a8a8a;
  --muted-4: #777777;
  --muted-5: #444444;
  --muted-6: #333333;
  --border: #e6e4de;
  --border-2: #dcdad3;
  --tag-green-bg: #eef3ec;
  --tag-green-border: #cfe0cd;
  --green: #468943;
  --green-dark: #2f5e2d;
  /* next/font injects the hashed family names; these are the stable aliases
     used throughout the markup. */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Montserrat', 'Inter', sans-serif;
  color-scheme: light;
}

html[data-theme='dark'] {
  --bg: #141412;
  --bg-alt: #1b1b18;
  --bg-alt-2: #1f1f1c;
  --bg-alt-3: #232320;
  --bg-footer: #101010;
  --surface: #1e1e1b;
  --hover-bg: #292925;
  --text: #f2f1ec;
  --muted: #a8a7a0;
  --muted-2: #b3b2ab;
  --muted-3: #94938c;
  --muted-4: #9c9b94;
  --muted-5: #c9c8c1;
  --muted-6: #d6d5cf;
  --border: #2d2d29;
  --border-2: #3a3a35;
  --tag-green-bg: #16261a;
  --tag-green-border: #2f4a2c;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: var(--font-sans);
  overflow-x: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
}

/* ---------------------------------------------------------------------------
   Hover utilities. The old dc-runtime had a `style-hover` attribute that it
   compiled into hover rules; these classes are the direct replacement.
   --------------------------------------------------------------------------- */

.hov-green:hover {
  color: var(--green);
}
.hov-text:hover {
  color: var(--text);
}
.hov-btn:hover {
  background: var(--green-dark);
}
.hov-outline:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--text);
}
html[data-theme='dark'] .hov-outline:hover {
  background: rgba(255, 255, 255, 0.07);
}
.hov-outline-green:hover {
  border-color: var(--green);
  color: var(--green);
}
.hov-outline-white:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.hov-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
}
.hov-bright:hover {
  filter: brightness(1.15);
}
.hov-drop:hover {
  background: var(--hover-bg);
  color: var(--text);
}
.hov-social:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.hov-lb:hover {
  background: var(--green);
  border-color: var(--green);
}
.hov-tile:hover {
  border-color: var(--green);
  transform: translateY(-4px);
}

/* ---------------------------------------------------------------------------
   Scroll reveal. Elements start hidden only when JS is available to reveal
   them, so the no-JS/SSR render stays fully visible.

   State lives in a `data-reveal` attribute rather than a class. React renders
   `className` on these sections and will overwrite it on any re-render — and
   during hydration a class added imperatively shows up as a mismatch. React
   does not manage this attribute, so it survives re-renders untouched.

   Only the revealed state carries a transition: arming must snap straight to
   hidden, otherwise the element would visibly fade out before fading back in.
   --------------------------------------------------------------------------- */

.reveal[data-reveal='armed'] {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

.reveal[data-reveal='in'] {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* ---------------------------------------------------------------------------
   Shared responsive breakpoints, previously inlined per page.
   --------------------------------------------------------------------------- */

@media (max-width: 860px) {
  [data-desktop-nav] {
    display: none !important;
  }
  [data-mobile-btn] {
    display: flex !important;
  }
  [data-foot-grid] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 520px) {
  [data-foot-grid] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  [data-meta] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  [data-gal],
  [data-grid3],
  [data-feat],
  [data-pay],
  [data-rel],
  [data-svc4] {
    grid-template-columns: 1fr 1fr !important;
  }
  [data-det-h1] {
    font-size: 42px !important;
  }
}

@media (max-width: 900px) {
  [data-2col],
  [data-intro] {
    grid-template-columns: 1fr !important;
  }
  [data-masonry] {
    columns: 2 !important;
  }
  [data-steps],
  [data-team],
  [data-values] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 620px) {
  [data-gal],
  [data-grid3],
  [data-feat],
  [data-pay],
  [data-rel],
  [data-svc4],
  [data-form2],
  [data-steps],
  [data-team],
  [data-values] {
    grid-template-columns: 1fr !important;
  }
  [data-masonry] {
    columns: 1 !important;
  }
  [data-page-h1] {
    font-size: 44px !important;
  }
  [data-det-h1] {
    font-size: 38px !important;
  }
}

@media (max-width: 480px) {
  [data-page-h1] {
    font-size: 38px !important;
  }
}

@keyframes p529-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes p529-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(9px);
  }
}

.p529-marquee-track:hover {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .p529-marquee-track {
    animation: none !important;
  }
}

/* Lightbox caption disappears when there is nothing to say. */
#lightbox [data-lb-caption]:empty {
  display: none;
}

@keyframes p529-wa-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(70, 137, 67, 0.55);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(70, 137, 67, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(70, 137, 67, 0);
  }
}