/* ==========================================================================
   ORGOBASCKET — SERVICES PAGE
   Design tokens, navbar and button styles are duplicated from index.css /
   about.css / products.css (each page is self-contained). Values are
   kept identical to the Home, About and Products pages so this page
   matches them exactly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
-------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --color-brown: #422A1C;
  --color-green: #4E8B2C;
  --color-green-soft: #6C8F6A;
  --color-bg: #FAF8F5;
  --color-bg-alt: #E6D7B8;
  --color-bg-soft-white: #FCFBF8;
  --color-surface-soft: #F7F6F3;
  --color-border-light: #E9E2D8;
  --color-text: #2E2E2E;
  --color-text-muted: #6B6B6B;
  --color-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Gilroy', 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* Spacing Scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(46, 46, 46, 0.06);
  --shadow-md: 0 8px 24px rgba(46, 46, 46, 0.08);
  --shadow-lg: 0 20px 40px rgba(46, 46, 46, 0.12);

  /* Transitions */
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max: 1280px;
  --header-height: 88px;
  --header-height-scrolled: 72px;

  /* Z-Index */
  --z-header: 1000;
  --z-overlay: 1100;
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESET
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
  color: var(--color-brown);
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

::selection {
  background-color: var(--color-green);
  color: var(--color-white);
}

/* Visually hidden but still announced by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT UTILITIES
-------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: var(--space-12);
}

@media (max-width: 768px) {
  .container {
    padding-inline: 24px;
  }

  .section {
    padding-block: var(--space-10);
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: 20px;
  }
}

/* --------------------------------------------------------------------------
   4. BUTTONS
-------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}

.btn-primary {
  background-color: var(--color-green);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-brown);
  border: 2px solid var(--color-brown);
  padding: calc(var(--space-3) - 2px) calc(var(--space-6) - 2px);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-brown);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

@media (max-width: 480px) {
  .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   5. SITE HEADER / NAVBAR
-------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  background-color: transparent;
  box-shadow: none;
  transition: background-color 450ms var(--ease-standard),
              box-shadow 450ms var(--ease-standard),
              height 450ms var(--ease-standard);
}

.site-header.is-scrolled {
  height: var(--header-height-scrolled);
  background-color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo-img {
  height: 40px;
  width: auto;
  transition: height 450ms var(--ease-standard);
}

.site-header.is-scrolled .logo-img {
  height: 34px;
}

@media (min-width: 900px) {
  .logo-img {
    height: 55px;
  }

  .site-header.is-scrolled .logo-img {
    height: 46px;
  }
}

.nav-desktop {
  display: none;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  padding-block: var(--space-2);
  transition: color var(--duration-base) var(--ease-standard);
}

.nav-link::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-standard);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  color: var(--color-green);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.header-cta {
  display: none;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-brown);
  border-radius: 2px;
}

@media (min-width: 900px) {
  .nav-desktop {
    display: block;
  }

  .header-cta {
    display: inline-flex;
  }

  .hamburger {
    display: none;
  }

  .mobile-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6. MOBILE NAVIGATION OVERLAY
-------------------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-5) var(--space-8);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 450ms var(--ease-standard),
              opacity 450ms var(--ease-standard),
              visibility 0s linear 450ms;
}

.mobile-nav.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform 450ms var(--ease-standard),
              opacity 450ms var(--ease-standard),
              visibility 0s linear 0s;
}

.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-10);
}

.mobile-nav-close {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.mobile-nav-close span {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 21px;
  width: 24px;
  height: 2px;
  background-color: var(--color-brown);
  border-radius: 2px;
}

.mobile-nav-close span:first-child {
  transform: rotate(45deg);
}

.mobile-nav-close span:last-child {
  transform: rotate(-45deg);
}

.mobile-nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.mobile-nav-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-brown);
  transition: color var(--duration-base) var(--ease-standard);
}

.mobile-nav-link:hover,
.mobile-nav-link.is-active {
  color: var(--color-green);
}

.mobile-nav-cta {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   7. SERVICES HERO (Section 1) — Offset Hero
   BEM: services-hero__element--modifier. Deliberately different
   composition from the About/Products Heroes (centered content, one
   large image below at ~80% width, floating cards overlapping its
   bottom edge) while reusing the exact same tokens, card DNA and
   button styles as the rest of the site.
-------------------------------------------------------------------------- */
.services-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  padding-block: calc(var(--header-height) + var(--space-8)) var(--space-12);
}

.services-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.services-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  background-color: var(--color-green-soft);
}

.services-hero__glow--1 {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -120px;
  opacity: 0.14;
}

.services-hero__glow--2 {
  width: 380px;
  height: 380px;
  bottom: -160px;
  right: -100px;
  background-color: var(--color-bg-alt);
  opacity: 0.5;
}

.services-hero__inner {
  position: relative;
  z-index: 1;
}

/* Centered content block — badge, heading, paragraph, CTAs */
.services-hero__content {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  text-align: center;
}

/* Badge */
.services-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-soft);
  margin-bottom: var(--space-5);
}

.services-hero__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-green);
  flex-shrink: 0;
}

.services-hero__badge-icon svg {
  width: 15px;
  height: 15px;
}

.services-hero__badge span:last-child {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brown);
}

.services-hero__heading {
  font-size: clamp(var(--fs-3xl), 4vw + 1rem, var(--fs-4xl));
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}

.services-hero__highlight {
  color: var(--color-green);
}

.services-hero__text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.services-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* Feature image + floating cards */
.services-hero__showcase {
  position: relative;
  width: 100%;
  margin-inline: auto;
}

/* Frame owns the rounded corners + the one-time entrance zoom-in, kept
   separate from .services-hero__image (which only carries the hover
   scale) so the two transforms never compete on the same element. */
.services-hero__frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.services-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.services-hero__frame:hover .services-hero__image,
.services-hero__frame:focus-within .services-hero__image {
  transform: scale(1.02);
}

/* Floating cards — normal flow below the image on mobile/tablet;
   absolutely positioned to overlap the image's bottom edge at desktop
   (see Section 9). */
.services-hero__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.services-hero__card {
  opacity: 0;
}

/* Surface holds all visual styling + hover feedback, kept separate from
   .services-hero__card (which only carries the entrance animation) so
   the two transforms never compete on the same element. */
.services-hero__card-surface {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-bg-alt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.services-hero__card-surface:hover,
.services-hero__card-surface:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.services-hero__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: var(--color-surface-soft);
  color: var(--color-green);
  transition: transform var(--duration-base) var(--ease-standard);
}

.services-hero__card-icon svg {
  width: 22px;
  height: 22px;
}

.services-hero__card-surface:hover .services-hero__card-icon {
  transform: scale(1.08);
}

.services-hero__card-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-brown);
  margin-bottom: 2px;
}

.services-hero__card-text {
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   8. SERVICES HERO ANIMATIONS — subtle fade-up (and fade-down for the
   badge) only, pure CSS. Always above the fold, so it autoplays on
   load with a short stagger rather than waiting on a scroll trigger
   (same technique as the About and Products Heroes).
-------------------------------------------------------------------------- */
@keyframes servicesHeroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes servicesHeroBadgeFadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes servicesHeroImageZoomIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.services-hero__badge {
  opacity: 0;
  animation: servicesHeroBadgeFadeDown 0.7s var(--ease-standard) forwards;
  animation-delay: 0.1s;
}

.services-hero__heading,
.services-hero__text,
.services-hero__actions {
  opacity: 0;
  animation: servicesHeroFadeUp 0.8s var(--ease-standard) forwards;
}

.services-hero__heading  { animation-delay: 0.2s; }
.services-hero__text     { animation-delay: 0.3s; }
.services-hero__actions  { animation-delay: 0.4s; }

.services-hero__frame {
  opacity: 0;
  animation: servicesHeroImageZoomIn 0.9s var(--ease-standard) forwards;
  animation-delay: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  .services-hero__badge,
  .services-hero__heading,
  .services-hero__text,
  .services-hero__actions,
  .services-hero__frame,
  .services-hero__image {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   9. SERVICES HERO RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .services-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .services-hero__actions .btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .services-hero {
    padding-block: calc(var(--header-height) + var(--space-5)) var(--space-10);
  }

  .services-hero__heading {
    font-size: clamp(1.75rem, 5vw + 1rem, 2.75rem);
  }

  .services-hero__frame {
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 640px) {
  .services-hero__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  /* Image narrows to ~80% of the container, centered */
  .services-hero__showcase {
    max-width: 80%;
    margin-bottom: 90px;
  }

  /* Cards lift out of normal flow and overlap the image's bottom edge,
     split 2 left / 2 right across a 4-up row */
  .services-hero__cards {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    transform: translateY(50%);
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    padding-inline: var(--space-6);
    margin-top: 0;
  }

  .services-hero__card-surface {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   10. FLOATING CARDS ANIMATIONS
   Reveal gated behind .services-hero__cards.is-visible
   (IntersectionObserver in services.js) — they can land below the fold
   on smaller viewports, unlike the rest of the Hero above. Reuses
   servicesHeroFadeUp so the "appear one after another" motion matches
   the Hero's own entrance.
-------------------------------------------------------------------------- */
.services-hero__cards.is-visible .services-hero__card {
  animation: servicesHeroFadeUp 0.7s var(--ease-standard) forwards;
}

.services-hero__cards.is-visible .services-hero__card:nth-child(1) { animation-delay: 0.1s; }
.services-hero__cards.is-visible .services-hero__card:nth-child(2) { animation-delay: 0.18s; }
.services-hero__cards.is-visible .services-hero__card:nth-child(3) { animation-delay: 0.26s; }
.services-hero__cards.is-visible .services-hero__card:nth-child(4) { animation-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .services-hero__card,
  .services-hero__card-surface,
  .services-hero__card-icon {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   11. OUR EXPERTISE (Section 2) — BEM: services-expertise__element
   Six alternating text/image rows (zig-zag), deliberately not a grid of
   equal cards — different composition from the Products page's card
   grids while reusing the same tokens, radius and shadow scale.
-------------------------------------------------------------------------- */
.services-expertise {
  background-color: var(--color-white);
  padding-block-start: 40px;
}

@media (min-width: 640px) {
  .services-expertise {
    padding-block-start: 64px;
  }
}

@media (min-width: 900px) {
  .services-expertise {
    padding-block-start: 90px;
  }
}

.services-expertise__intro {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  text-align: center;
}

.services-expertise__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-4);
}

.services-expertise__label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background-color: var(--color-green);
}

.services-expertise__heading {
  font-size: clamp(var(--fs-2xl), 2.5vw + 1rem, var(--fs-3xl));
  margin-bottom: var(--space-5);
}

.services-expertise__description {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* Row list */
.services-expertise__list {
  display: flex;
  flex-direction: column;
}

.services-expertise__row {
  --dir: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding-block-end: var(--space-10);
  margin-block-end: var(--space-10);
  border-block-end: 1px solid var(--color-border-light);
  transition: transform var(--duration-base) var(--ease-standard);
}

.services-expertise__row--reverse {
  --dir: -1;
}

.services-expertise__row:last-child {
  padding-block-end: 0;
  margin-block-end: 0;
  border-block-end: none;
}

.services-expertise__row:hover {
  transform: translateY(-4px);
}

.services-expertise__content {
  width: 100%;
}

.services-expertise__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background-color: var(--color-surface-soft);
  color: var(--color-green);
  transition: transform var(--duration-base) var(--ease-standard);
}

.services-expertise__icon svg {
  width: 26px;
  height: 26px;
}

.services-expertise__row:hover .services-expertise__icon {
  transform: rotate(10deg);
}

.services-expertise__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
}

.services-expertise__text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.services-expertise__media {
  width: 100%;
}

.services-expertise__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-slow) var(--ease-standard);
}

.services-expertise__row:hover .services-expertise__image {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   12. OUR EXPERTISE ANIMATIONS
   Reveal gated per-row behind .services-expertise__row.is-visible, not
   one section-wide trigger — with six stacked rows spanning several
   viewport heights, a single top-of-section trigger would fire every
   row's animation before the user ever scrolls to the later ones. Each
   row gets its own IntersectionObserver entry in services.js instead.
   Content fades up vertically like every other section on the site;
   the image slides in horizontally from whichever outer edge it sits
   on for that row (--dir flips sign on reversed rows via the shared
   --slide-x custom property), so it never slides through the text.
-------------------------------------------------------------------------- */
@keyframes servicesExpertiseFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes servicesExpertiseSlideIn {
  from { opacity: 0; transform: translateX(var(--slide-x, 24px)); }
  to   { opacity: 1; transform: translateX(0); }
}

.services-expertise__content,
.services-expertise__media {
  opacity: 0;
}

.services-expertise__media {
  --slide-x: calc(var(--dir) * 24px);
}

.services-expertise__row.is-visible .services-expertise__content {
  animation: servicesExpertiseFadeUp 0.8s var(--ease-standard) forwards;
}

.services-expertise__row.is-visible .services-expertise__media {
  animation: servicesExpertiseSlideIn 0.8s var(--ease-standard) forwards;
  animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .services-expertise__row,
  .services-expertise__content,
  .services-expertise__media,
  .services-expertise__icon,
  .services-expertise__image {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   13. OUR EXPERTISE RESPONSIVE
-------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .services-expertise__row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-10);
  }

  .services-expertise__row--reverse {
    flex-direction: row-reverse;
  }

  .services-expertise__content {
    flex: 0 0 44%;
  }

  .services-expertise__media {
    flex: 0 0 50%;
  }
}

/* --------------------------------------------------------------------------
   14. HOW WE WORK (Section 3) — BEM: services-process__element
   A premium process timeline — six steps connected by a thin drawn
   line, alternating above/below it at desktop. Deliberately not
   another card grid or image/text layout. The up/down positioning is
   done with CSS Grid row placement (not transform), so transform stays
   free for the entrance/hover animations layered on top.
-------------------------------------------------------------------------- */
.services-process {
  background-color: var(--color-white);
  padding-block-start: 40px;
}

@media (min-width: 640px) {
  .services-process {
    padding-block-start: 64px;
  }
}

@media (min-width: 900px) {
  .services-process {
    padding-block-start: 90px;
  }
}

.services-process__intro {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  text-align: center;
}

.services-process__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-4);
}

.services-process__label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background-color: var(--color-green);
}

.services-process__heading {
  font-size: clamp(var(--fs-2xl), 2.5vw + 1rem, var(--fs-3xl));
  margin-bottom: var(--space-5);
}

.services-process__description {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* Timeline */
.services-process__timeline {
  position: relative;
}

.services-process__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 19px;
  width: 2px;
  background-color: var(--color-border-light);
  z-index: 0;
}

.services-process__line-fill {
  position: absolute;
  inset: 0;
  background-color: var(--color-green);
  transform-origin: top;
  transform: scaleY(0);
}

.services-process__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.services-process__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding-inline-start: 44px;
  opacity: 0;
}

.services-process__node {
  position: absolute;
  top: 4px;
  left: 11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-green);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-border-light);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.services-process__step:hover .services-process__node {
  box-shadow: 0 0 0 2px var(--color-border-light), 0 0 0 9px rgba(78, 139, 44, 0.18);
}

.services-process__card {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-bg-alt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.services-process__step:hover .services-process__card {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.services-process__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.services-process__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: var(--color-surface-soft);
  color: var(--color-green);
  transition: transform var(--duration-base) var(--ease-standard);
}

.services-process__icon svg {
  width: 22px;
  height: 22px;
}

.services-process__step:hover .services-process__icon {
  transform: rotate(10deg);
}

.services-process__number {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
  color: var(--color-bg-alt);
}

.services-process__title {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}

.services-process__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   15. HOW WE WORK ANIMATIONS
   Reveal gated behind .services-process.is-visible (IntersectionObserver
   in services.js). Reuses servicesHeroFadeUp from Section 1 for the
   header and steps; the connector line gets its own progressive "draw"
   keyframe.
-------------------------------------------------------------------------- */
.services-process__label,
.services-process__heading,
.services-process__description {
  opacity: 0;
}

.services-process.is-visible .services-process__label {
  animation: servicesHeroFadeUp 0.7s var(--ease-standard) forwards;
}

.services-process.is-visible .services-process__heading {
  animation: servicesHeroFadeUp 0.8s var(--ease-standard) forwards;
  animation-delay: 0.1s;
}

.services-process.is-visible .services-process__description {
  animation: servicesHeroFadeUp 0.8s var(--ease-standard) forwards;
  animation-delay: 0.2s;
}

@keyframes servicesProcessLineDraw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.services-process.is-visible .services-process__line-fill {
  animation: servicesProcessLineDraw 1s var(--ease-standard) forwards;
  animation-delay: 0.2s;
}

.services-process.is-visible .services-process__step {
  animation: servicesHeroFadeUp 0.7s var(--ease-standard) forwards;
}

.services-process.is-visible .services-process__step:nth-child(1) { animation-delay: 0.3s; }
.services-process.is-visible .services-process__step:nth-child(2) { animation-delay: 0.4s; }
.services-process.is-visible .services-process__step:nth-child(3) { animation-delay: 0.5s; }
.services-process.is-visible .services-process__step:nth-child(4) { animation-delay: 0.6s; }
.services-process.is-visible .services-process__step:nth-child(5) { animation-delay: 0.7s; }
.services-process.is-visible .services-process__step:nth-child(6) { animation-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .services-process__label,
  .services-process__heading,
  .services-process__description,
  .services-process__step,
  .services-process__card,
  .services-process__icon,
  .services-process__node,
  .services-process__line-fill {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .services-process__line-fill {
    transform: scaleY(1) !important;
  }
}

/* --------------------------------------------------------------------------
   16. HOW WE WORK RESPONSIVE
-------------------------------------------------------------------------- */
@media (min-width: 640px) and (max-width: 899px) {
  .services-process__line {
    display: none;
  }

  .services-process__node {
    display: none;
  }

  .services-process__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  .services-process__step {
    flex: 0 0 calc(50% - var(--space-3));
    padding-inline-start: 0;
  }

  .services-process__step:nth-child(even) {
    margin-block-start: var(--space-8);
  }
}

@media (min-width: 900px) {
  .services-process__line {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
  }

  .services-process__line-fill {
    transform-origin: left;
    transform: scaleX(0);
  }

  @keyframes servicesProcessLineDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .services-process__list {
    flex-direction: row;
    gap: var(--space-4);
  }

  .services-process__step {
    display: grid;
    grid-template-rows: minmax(160px, auto) auto minmax(160px, auto);
    align-items: center;
    justify-items: center;
    flex: 1;
    padding-inline-start: 0;
    gap: 0;
  }

  .services-process__card {
    grid-row: 1;
    align-self: end;
    max-width: 240px;
  }

  .services-process__step--down .services-process__card {
    grid-row: 3;
    align-self: start;
  }

  .services-process__node {
    position: static;
    grid-row: 2;
  }
}

/* --------------------------------------------------------------------------
   17. WHY ORGOBASCKET (Section 4) — BEM: services-trust__element
   A premium asymmetric trust composition: a subtle global-network
   illustration flanked by six benefit cards, each given its own
   grid-row and margin-top offset so they read as floating rather than
   a perfect grid. Explicit --1..--6 modifiers (not nth-child math)
   place each card, since the visual sits first in DOM (so it stacks
   above the cards on mobile) which shifts every card's sibling index.
-------------------------------------------------------------------------- */
.services-trust {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  padding-block-start: 40px;
}

@media (min-width: 640px) {
  .services-trust {
    padding-block-start: 64px;
  }
}

@media (min-width: 900px) {
  .services-trust {
    padding-block-start: 90px;
  }
}

.services-trust__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.services-trust__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  background-color: var(--color-green-soft);
}

.services-trust__glow--1 {
  width: 400px;
  height: 400px;
  top: -120px;
  right: -100px;
  opacity: 0.12;
}

.services-trust__glow--2 {
  width: 360px;
  height: 360px;
  bottom: -140px;
  left: -100px;
  background-color: var(--color-bg-alt);
  opacity: 0.4;
}

.services-trust__inner {
  position: relative;
  z-index: 1;
}

.services-trust__intro {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  text-align: center;
}

.services-trust__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-4);
}

.services-trust__label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background-color: var(--color-green);
}

.services-trust__heading {
  font-size: clamp(var(--fs-2xl), 2.5vw + 1rem, var(--fs-3xl));
  margin-bottom: var(--space-5);
}

.services-trust__description {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* Composition */
.services-trust__composition {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

.services-trust__visual {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-surface-soft) 0%, transparent 72%);
  padding: var(--space-6);
}

.services-trust__visual svg {
  width: 100%;
  height: 100%;
}

/* Cards */
.services-trust__card {
  background-color: var(--color-white);
  border: 1px solid var(--color-bg-alt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.services-trust__card:hover,
.services-trust__card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.services-trust__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background-color: rgba(78, 139, 44, 0.12);
  color: var(--color-green);
  transition: transform var(--duration-base) var(--ease-standard);
}

.services-trust__card-icon svg {
  width: 22px;
  height: 22px;
}

.services-trust__card:hover .services-trust__card-icon {
  transform: scale(1.1);
}

.services-trust__card-title {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}

.services-trust__card-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   18. WHY ORGOBASCKET ANIMATIONS
   Reveal gated behind .services-trust.is-visible (IntersectionObserver
   in services.js). Reuses servicesHeroFadeUp for the header; the
   visual scales in; cards fade up vertically by default and switch to
   a left/right horizontal slide-in once the asymmetric desktop layout
   is active (see Section 19), so the entrance direction always matches
   which side of the illustration a card actually sits on.
-------------------------------------------------------------------------- */
.services-trust__label,
.services-trust__heading,
.services-trust__description,
.services-trust__visual,
.services-trust__card {
  opacity: 0;
}

.services-trust.is-visible .services-trust__label {
  animation: servicesHeroFadeUp 0.7s var(--ease-standard) forwards;
}

.services-trust.is-visible .services-trust__heading {
  animation: servicesHeroFadeUp 0.8s var(--ease-standard) forwards;
  animation-delay: 0.1s;
}

.services-trust.is-visible .services-trust__description {
  animation: servicesHeroFadeUp 0.8s var(--ease-standard) forwards;
  animation-delay: 0.2s;
}

@keyframes servicesTrustVisualScaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.services-trust.is-visible .services-trust__visual {
  animation: servicesTrustVisualScaleIn 0.9s var(--ease-standard) forwards;
  animation-delay: 0.2s;
}

.services-trust.is-visible .services-trust__card {
  animation: servicesHeroFadeUp 0.7s var(--ease-standard) forwards;
}

.services-trust.is-visible .services-trust__card--1 { animation-delay: 0.3s; }
.services-trust.is-visible .services-trust__card--2 { animation-delay: 0.38s; }
.services-trust.is-visible .services-trust__card--3 { animation-delay: 0.46s; }
.services-trust.is-visible .services-trust__card--4 { animation-delay: 0.54s; }
.services-trust.is-visible .services-trust__card--5 { animation-delay: 0.62s; }
.services-trust.is-visible .services-trust__card--6 { animation-delay: 0.7s; }

@media (prefers-reduced-motion: reduce) {
  .services-trust__label,
  .services-trust__heading,
  .services-trust__description,
  .services-trust__visual,
  .services-trust__card,
  .services-trust__card-icon {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   19. WHY ORGOBASCKET RESPONSIVE
-------------------------------------------------------------------------- */
@media (min-width: 640px) and (max-width: 1099px) {
  .services-trust__composition {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-trust__visual {
    grid-column: 1 / -1;
    max-width: 240px;
  }
}

@media (min-width: 1100px) {
  .services-trust__composition {
    grid-template-columns: 1fr minmax(280px, 380px) 1fr;
    grid-template-rows: repeat(3, auto);
    gap: var(--space-6) var(--space-8);
  }

  .services-trust__visual {
    grid-column: 2;
    grid-row: 1 / span 3;
    max-width: 320px;
  }

  .services-trust__card {
    width: 100%;
    max-width: 260px;
  }

  .services-trust__card--1 { grid-column: 1; grid-row: 1; justify-self: end; }
  .services-trust__card--3 { grid-column: 1; grid-row: 2; justify-self: end; margin-block-start: var(--space-8); }
  .services-trust__card--5 { grid-column: 1; grid-row: 3; justify-self: end; margin-block-start: var(--space-3); }

  .services-trust__card--2 { grid-column: 3; grid-row: 1; margin-block-start: var(--space-6); }
  .services-trust__card--4 { grid-column: 3; grid-row: 2; }
  .services-trust__card--6 { grid-column: 3; grid-row: 3; margin-block-start: var(--space-10); }

  /* Cards slide in from whichever side they sit on, rather than fading
     straight up like the mobile/tablet layout */
  .services-trust.is-visible .services-trust__card {
    animation-name: servicesTrustCardSlideIn;
  }

  .services-trust__card--1,
  .services-trust__card--3,
  .services-trust__card--5 {
    --side: -1;
  }

  .services-trust__card--2,
  .services-trust__card--4,
  .services-trust__card--6 {
    --side: 1;
  }
}

@keyframes servicesTrustCardSlideIn {
  from { opacity: 0; transform: translateX(calc(var(--side, 1) * 28px)); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   20. FINAL CTA — LET'S PARTNER TOGETHER (Section 5) — BEM: services-cta__element
   A light, rounded panel — deliberately not another dark banner like
   the Home page's Final CTA or the Products page's Global Partnership
   CTA, so this page's conclusion reads as its own moment.
-------------------------------------------------------------------------- */
.services-cta {
  background-color: var(--color-white);
  padding-block-start: 40px;
  padding-block-end: var(--space-12);
}

@media (min-width: 640px) {
  .services-cta {
    padding-block-start: 64px;
  }
}

@media (min-width: 900px) {
  .services-cta {
    padding-block-start: 90px;
    padding-block-end: var(--space-12);
  }
}

.services-cta__panel {
  position: relative;
  overflow: hidden;
  max-width: 1220px;
  margin-inline: auto;
  border-radius: 32px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.services-cta__panel:hover {
  box-shadow: var(--shadow-lg);
}

/* Decorative background — subtle green gradient accents only */
.services-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.services-cta__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  background-color: var(--color-green-soft);
}

.services-cta__glow--1 {
  width: 420px;
  height: 420px;
  top: -160px;
  left: -100px;
  opacity: 0.16;
}

.services-cta__glow--2 {
  width: 380px;
  height: 380px;
  bottom: -160px;
  right: -100px;
  background-color: var(--color-bg-alt);
  opacity: 0.45;
}

.services-cta__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-inline: auto;
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.services-cta__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-4);
}

.services-cta__label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background-color: var(--color-green);
}

.services-cta__heading {
  font-size: clamp(var(--fs-3xl), 4vw + 1rem, var(--fs-4xl));
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
}

.services-cta__text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-8);
}

.services-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

/* Trust row — small and elegant, not full cards */
.services-cta__trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-6);
  row-gap: var(--space-4);
}

.services-cta__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.services-cta__trust-icon {
  width: 18px;
  height: 18px;
  color: var(--color-green);
  flex-shrink: 0;
}

.services-cta__trust-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-brown);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   21. FINAL CTA ANIMATIONS
   Reveal gated behind .services-cta.is-visible (IntersectionObserver in
   services.js). Reuses servicesHeroFadeUp; the panel gets its own
   scale-in.
-------------------------------------------------------------------------- */
.services-cta__panel {
  opacity: 0;
}

.services-cta__label,
.services-cta__heading,
.services-cta__text,
.services-cta__actions {
  opacity: 0;
}

.services-cta__trust-item {
  opacity: 0;
}

@keyframes servicesCtaPanelScaleIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

.services-cta.is-visible .services-cta__panel {
  animation: servicesCtaPanelScaleIn 0.8s var(--ease-standard) forwards;
}

.services-cta.is-visible .services-cta__label {
  animation: servicesHeroFadeUp 0.7s var(--ease-standard) forwards;
  animation-delay: 0.15s;
}

.services-cta.is-visible .services-cta__heading {
  animation: servicesHeroFadeUp 0.8s var(--ease-standard) forwards;
  animation-delay: 0.25s;
}

.services-cta.is-visible .services-cta__text {
  animation: servicesHeroFadeUp 0.8s var(--ease-standard) forwards;
  animation-delay: 0.35s;
}

.services-cta.is-visible .services-cta__actions {
  animation: servicesHeroFadeUp 0.8s var(--ease-standard) forwards;
  animation-delay: 0.45s;
}

.services-cta.is-visible .services-cta__trust-item {
  animation: servicesHeroFadeUp 0.7s var(--ease-standard) forwards;
}

.services-cta.is-visible .services-cta__trust-item:nth-child(1) { animation-delay: 0.55s; }
.services-cta.is-visible .services-cta__trust-item:nth-child(2) { animation-delay: 0.62s; }
.services-cta.is-visible .services-cta__trust-item:nth-child(3) { animation-delay: 0.69s; }
.services-cta.is-visible .services-cta__trust-item:nth-child(4) { animation-delay: 0.76s; }

@media (prefers-reduced-motion: reduce) {
  .services-cta__panel,
  .services-cta__label,
  .services-cta__heading,
  .services-cta__text,
  .services-cta__actions,
  .services-cta__trust-item {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   22. FINAL CTA RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .services-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .services-cta__actions .btn {
    width: 100%;
  }

  .services-cta__trust-row {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .services-cta__trust-row {
    flex-direction: column;
    align-items: center;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .services-cta__panel {
    max-width: 92%;
  }
}

@media (min-width: 900px) {
  .services-cta__content {
    padding: var(--space-12) var(--space-8);
  }
}

/* --------------------------------------------------------------------------
   23. SITE FOOTER
   Reused verbatim from index.css (same markup, same classes) so the
   footer is pixel-identical across pages. Reveal gated behind
   .site-footer.is-visible (IntersectionObserver in services.js);
   reuses the servicesHeroFadeUp keyframe already defined for this page
   instead of redeclaring the homepage's heroFadeUp.
-------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-soft-white);
  border-block-start: 1px solid var(--color-border-light);
  padding-block-start: var(--space-10);
}

.footer__container {
  position: relative;
  z-index: 1;
}

/* Decorative background */
.footer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.footer__grid-texture {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(66, 42, 28, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 42, 28, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.footer__blur {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  background-color: var(--color-green-soft);
  opacity: 0.08;
}

.footer__blur--1 {
  width: 380px;
  height: 380px;
  top: -100px;
  right: 8%;
}

.footer__blur--2 {
  width: 320px;
  height: 320px;
  bottom: -100px;
  left: 4%;
}

.footer__leaf {
  position: absolute;
  width: 160px;
  height: 160px;
  color: var(--color-green);
  opacity: 0.05;
}

.footer__leaf--tl {
  top: -30px;
  left: -30px;
  transform: rotate(20deg);
}

.footer__leaf--br {
  bottom: -30px;
  right: -30px;
  transform: rotate(-160deg);
}

/* Grid */
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  text-align: center;
}

.footer__column {
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Column 1: Brand */
.footer__logo {
  display: inline-flex;
  margin-bottom: var(--space-4);
}

.footer__logo-img {
  height: 38px;
  width: auto;
}

.footer__tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-brown);
  margin-bottom: var(--space-3);
}

.footer__description {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  max-width: 320px;
  margin-bottom: var(--space-6);
}

.footer__social-heading {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brown);
  margin-bottom: var(--space-4);
}

.footer__social-list {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-light);
  color: var(--color-brown);
  transition: color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.footer__social-link svg {
  width: 18px;
  height: 18px;
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  color: var(--color-green);
  border-color: var(--color-green);
  transform: scale(1.1);
}

/* Columns 2 & 3: Link lists */
.footer__heading {
  font-size: var(--fs-md);
  color: var(--color-brown);
  margin-bottom: var(--space-5);
}

.footer__link-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.footer__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block-end: 2px;
  font-size: var(--fs-sm);
  color: var(--color-text);
  transition: color var(--duration-base) var(--ease-standard);
}

.footer__link::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--color-green);
}

.footer__link:hover::after,
.footer__link:focus-visible::after {
  transform: scaleX(1);
}

.footer__link-arrow {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.footer__link:hover .footer__link-arrow,
.footer__link:focus-visible .footer__link-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Column 4: Contact */
.footer__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.footer__contact-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.footer__contact-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-green);
}

.footer__contact-value {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

a.footer__contact-value {
  transition: color var(--duration-base) var(--ease-standard);
}

a.footer__contact-value:hover,
a.footer__contact-value:focus-visible {
  color: var(--color-green);
}

.footer__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 280px;
}

.footer__cta-btn {
  justify-content: center;
  text-align: center;
}

/* Trust Strip */
.footer__trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-block: 1px solid var(--color-border-light);
}

.footer__trust-item {
  opacity: 0;
}

.footer__trust-item-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  transition: transform var(--duration-base) var(--ease-standard);
}

.footer__trust-item-inner:hover {
  transform: translateY(-4px);
}

.footer__trust-icon {
  width: 26px;
  height: 26px;
  color: var(--color-green);
}

.footer__trust-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-brown);
}

/* Copyright + Developer Signature — merged into one centered line */
.footer__bottom {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-5);
  opacity: 0;
}

.footer__credit-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer__copyright {
  font-size: var(--fs-xs);
  color: var(--color-text);
}

.footer__dot {
  color: var(--color-border-light);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   Developer Signature — inline text only. No pill, card, border or
   shadow box; the "premium" feel comes entirely from typography and
   motion. Pure CSS throughout (no JS): the animated gradient on
   "TechVahni" runs via background-position + animation-play-state, and
   the heartbeat's hover-triggered rotation is parameterized with a CSS
   custom property rather than swapping animations, so nothing ever
   fights over the same element's transform.
-------------------------------------------------------------------------- */
.footer__signature-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: transform 300ms ease,
              filter 300ms ease;
}

.footer__signature-line:hover,
.footer__signature-line:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(76, 154, 42, 0.28));
}

.footer__signature-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.footer__signature-heart {
  --heart-rotate: 0deg;
  width: 16px;
  height: 16px;
  color: #E2574C;
  flex-shrink: 0;
  transform-origin: center;
  animation: footerHeartBeat 1.8s ease-in-out infinite;
}

.footer__signature-line:hover .footer__signature-heart,
.footer__signature-line:focus-visible .footer__signature-heart {
  --heart-rotate: 8deg;
}

.footer__signature-name {
  position: relative;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: #4C9A2A;
  transition: transform 300ms ease,
              letter-spacing 300ms ease,
              filter 300ms ease;
}

.footer__signature-name::after {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 300ms ease;
}

.footer__signature-line:hover .footer__signature-name,
.footer__signature-line:focus-visible .footer__signature-name {
  background-image: linear-gradient(90deg, #4C9A2A, #22C1C3, #2563EB, #8B5CF6, #4C9A2A);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: footerSignatureGradient 3s linear infinite;
  transform: scale(1.08);
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 8px rgba(76, 154, 42, 0.4));
}

.footer__signature-line:hover .footer__signature-name::after,
.footer__signature-line:focus-visible .footer__signature-name::after {
  transform: translateX(-50%) scaleX(1);
}

@keyframes footerHeartBeat {
  0%, 100% { transform: scale(1) rotate(var(--heart-rotate)); }
  50%      { transform: scale(1.25) rotate(var(--heart-rotate)); }
}

@keyframes footerSignatureGradient {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* --------------------------------------------------------------------------
   24. SITE FOOTER ANIMATIONS
   Reveal gated behind .site-footer.is-visible (IntersectionObserver in
   services.js). Reuses servicesHeroFadeUp from Section 1.
-------------------------------------------------------------------------- */
.site-footer.is-visible .footer__column {
  animation: servicesHeroFadeUp 0.7s var(--ease-standard) forwards;
}

.site-footer.is-visible .footer__column:nth-child(1) { animation-delay: 0.1s; }
.site-footer.is-visible .footer__column:nth-child(2) { animation-delay: 0.18s; }
.site-footer.is-visible .footer__column:nth-child(3) { animation-delay: 0.26s; }
.site-footer.is-visible .footer__column:nth-child(4) { animation-delay: 0.34s; }

.site-footer.is-visible .footer__trust-item {
  animation: servicesHeroFadeUp 0.6s var(--ease-standard) forwards;
}

.site-footer.is-visible .footer__trust-item:nth-child(1) { animation-delay: 0.5s; }
.site-footer.is-visible .footer__trust-item:nth-child(2) { animation-delay: 0.58s; }
.site-footer.is-visible .footer__trust-item:nth-child(3) { animation-delay: 0.66s; }
.site-footer.is-visible .footer__trust-item:nth-child(4) { animation-delay: 0.74s; }

.site-footer.is-visible .footer__bottom {
  animation: servicesHeroFadeUp 0.7s var(--ease-standard) forwards;
  animation-delay: 0.75s;
}

@media (prefers-reduced-motion: reduce) {
  .footer__column,
  .footer__trust-item,
  .footer__trust-item-inner,
  .footer__bottom,
  .footer__social-link,
  .footer__link,
  .footer__link-arrow,
  .footer__signature-line,
  .footer__signature-heart,
  .footer__signature-name {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .footer__signature-name {
    background-image: none !important;
    color: #4C9A2A !important;
  }
}

/* --------------------------------------------------------------------------
   25. SITE FOOTER RESPONSIVE
-------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    text-align: start;
  }

  .footer__column {
    align-items: flex-start;
  }

  .footer__social-list {
    justify-content: flex-start;
  }

  .footer__link-list {
    align-items: flex-start;
  }

  .footer__address {
    align-items: flex-start;
  }

  .footer__contact-group {
    align-items: flex-start;
  }

  .footer__trust-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1000px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .footer__credit-line {
    flex-direction: column;
    gap: 4px;
  }

  .footer__dot {
    display: none;
  }
}

@media (min-width: 1600px) {
  :root {
    --container-max: 1440px;
  }
}
/* Floating Contact Buttons */

.floating-contact{
    position: fixed;
    right: 24px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 9999;
}

.float-btn{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;

    color:#fff;
    font-size:24px;

    box-shadow:0 12px 35px rgba(0,0,0,.18);

    transition:.35s ease;
}

.phone-btn{
    background:#3F7D20;
}

.whatsapp-btn{
    background:#25D366;
}

.float-btn:hover{

    transform:translateY(-5px) scale(1.08);

    box-shadow:0 18px 40px rgba(0,0,0,.25);

}

.float-btn i{

    transition:.3s;

}

.float-btn:hover i{

    transform:scale(1.15);

}

/* Mobile */

@media(max-width:768px){

.floating-contact{

right:16px;

bottom:80px;

}

.float-btn{

width:52px;

height:52px;

font-size:22px;

}

}
@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(63,125,32,.4);

}

70%{

box-shadow:0 0 0 12px rgba(63,125,32,0);

}

100%{

box-shadow:0 0 0 0 rgba(63,125,32,0);

}

}

.phone-btn{

animation:pulse 2.5s infinite;

}

.whatsapp-btn{

animation:pulse 2.5s infinite;

animation-delay:.8s;

}