/* ============================================
   iWAT LLC - Main Stylesheet
   ============================================ */

/* --- CSS Variables --- */
:root {
  --green-50: #EDF5E6;
  --green-100: #D4E8C4;
  --green-200: #B3D89A;
  --green-300: #8EC46A;
  --green-400: #7AC143;
  --green-500: #4A7C2E;
  --green-600: #3D6726;
  --green-700: #30511E;
  --green-800: #233B16;
  --green-900: #16250E;

  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #666666;
  --neutral-600: #444444;
  --neutral-700: #333333;
  --neutral-800: #222222;
  --neutral-900: #1A1A1A;

  --white: #FFFFFF;
  --black: #000000;

  --font-display: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.14);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  --container-max: 1200px;
  --container-wide: 1400px;
  --nav-height: 80px;
}


/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--neutral-800);
  background: var(--white);
  overflow-x: hidden;
}

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

a {
  color: var(--green-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--green-600); /* 6.6:1 on white (green-400 was only 2.2:1) */
}

/* Inline links inside dark/green sections need light colors for contrast */
.section--dark a:not(.btn) {
  color: var(--green-300); /* 8.5:1 on near-black */
}
.section--dark a:not(.btn):hover {
  color: var(--green-200);
}
.section--green a:not(.btn) {
  color: var(--white); /* on the green band, links must be white, not green */
  text-decoration: underline;
}
.section--green a:not(.btn):hover {
  color: var(--green-100);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--neutral-900);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }

p {
  margin-bottom: 1rem;
  color: var(--neutral-600);
}

ul, ol {
  list-style: none;
}


/* --- Utility --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.container--wide {
  max-width: var(--container-wide);
}

.section {
  padding: 100px 0;
}

.section--dark {
  background: var(--neutral-900);
  color: var(--white);
}

.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark p {
  color: var(--white);
}

.section--dark p {
  color: rgba(255,255,255,0.75);
}

.section--light {
  background: var(--neutral-100);
}

.section--green {
  background: var(--green-500);
  color: var(--white);
}

.section--green h2,
.section--green h3,
.section--green p {
  color: var(--white);
}

.section--green p {
  color: rgba(255,255,255,0.85);
}

.section-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--green-500); /* 4.6-5:1 on light; dark/green sections override below */
  margin-bottom: 12px;
  display: block;
}

.section--dark .section-label {
  color: var(--green-300); /* 8.5:1 on near-black */
}
.section--green .section-label {
  color: var(--white); /* green-300 on green-500 was only 2.4:1 */
}

.section-title {
  margin-bottom: 20px;
}

.section-subtitle {
  font-size: 1.15rem;
  max-width: 640px;
  color: var(--neutral-500);
}

.text-center { text-align: center; }
.text-center .section-subtitle { margin-left: auto; margin-right: auto; }

.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;
}


/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  line-height: 1;
}

.btn--primary {
  background: var(--green-500);
  color: var(--white);
  border-color: var(--green-500);
}

.btn--primary:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(74, 124, 46, 0.3);
}

.btn--outline {
  background: transparent;
  color: var(--green-500);
  border-color: var(--green-500);
}

.btn--outline:hover {
  background: var(--green-500);
  color: var(--white);
  transform: translateY(-2px);
}

.btn--white {
  background: var(--white);
  color: var(--green-500);
  border-color: var(--white);
}

.btn--white:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--neutral-900);
  color: var(--white);
  border-color: var(--neutral-900);
}

.btn--dark:hover {
  background: var(--neutral-800);
  border-color: var(--neutral-800);
  color: var(--white);
  transform: translateY(-2px);
}

.btn--sm {
  padding: 10px 22px;
  font-size: 0.85rem;
}

.btn--lg {
  padding: 18px 42px;
  font-size: 1rem;
}

.btn i {
  font-size: 0.85em;
}


/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 1000;
  transition: all var(--transition-base);
}

.nav--transparent {
  background: transparent;
}

.nav--solid {
  background: rgba(26, 26, 26, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 24px;
}

.nav__logo img {
  height: 36px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav__link {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  position: relative;
}

.nav__link:hover,
.nav__link--active {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

.nav__link--cta {
  background: var(--green-500);
  color: var(--white);
  margin-left: 8px;
}

.nav__link--cta:hover {
  background: var(--green-400);
  color: var(--white);
}

/* Dropdown */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-toggle {
  cursor: pointer;
}

.nav__dropdown-toggle i {
  font-size: 0.7em;
  margin-left: 4px;
  transition: transform var(--transition-fast);
}

.nav__dropdown:hover .nav__dropdown-toggle i {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--neutral-900);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-xl);
  max-height: 400px;
  overflow-y: auto;
}

.nav__dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.nav__dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.nav__dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}

.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.nav__dropdown-link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.06);
}

.nav__dropdown-link i {
  width: 18px;
  text-align: center;
  color: var(--green-400);
  font-size: 0.8rem;
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.nav__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition-base);
  transform-origin: center;
}

.nav__hamburger--open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav__hamburger--open span:nth-child(2) {
  opacity: 0;
}

.nav__hamburger--open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile nav */
.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--neutral-900);
  padding: 24px;
  overflow-y: auto;
  z-index: 999;
}

.nav__mobile--open {
  display: block;
  animation: slideDown 0.3s ease;
}

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

.nav__mobile-link {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color var(--transition-fast);
}

.nav__mobile-link:hover {
  color: var(--green-400);
}

.nav__mobile-group-title {
  /* Rendered as a <button> for keyboard support; reset native button chrome. */
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green-400);
  padding: 20px 0 8px;
}

.nav__mobile-group-title .fa-chevron-down {
  transition: transform var(--transition-fast);
}
.nav__mobile-group-title[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.nav__mobile-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
  padding: 10px 0 10px 12px;
  transition: color var(--transition-fast);
}

.nav__mobile-sublink:hover {
  color: var(--white);
}

.nav__mobile-sublink i {
  width: 18px;
  text-align: center;
  color: var(--green-400);
  font-size: 0.8rem;
}


/* --- Hero --- */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: var(--neutral-900);
  overflow: hidden;
}

.hero--full {
  min-height: 100vh;
}

.hero--sm {
  min-height: 50vh;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(26,26,26,0.7) 100%);
  z-index: 1;
}

.hero__bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(122, 193, 67, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(74, 124, 46, 0.06) 0%, transparent 40%);
  z-index: 2;
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0.25;
}

.hero__content {
  position: relative;
  z-index: 10;
  max-width: 720px;
}

.hero__label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--green-400);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__label::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--green-400);
}

.hero__title {
  color: var(--white);
  margin-bottom: 24px;
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.hero__title span {
  color: var(--green-400);
}

.hero__text {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 36px;
  max-width: 560px;
  line-height: 1.8;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255,255,255,0.4);
  font-size: 1.5rem;
  animation: bounce 2s infinite;
}

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


/* --- Page Header (for inner pages) --- */
.page-header {
  padding: 140px 0 80px;
  background: var(--neutral-900);
  position: relative;
  overflow: hidden;
}

.page-header__bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(122, 193, 67, 0.06) 0%, transparent 40%);
}

.page-header__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
}

.page-header__content {
  position: relative;
  z-index: 2;
}

.page-header__label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--green-400);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-header__label::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--green-400);
}

.page-header h1 {
  color: var(--white);
  margin-bottom: 16px;
}

.page-header__subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.65);
  max-width: 600px;
}


/* --- Cards --- */
.card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-slow);
  border: 1px solid var(--neutral-200);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green-200);
}

.card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-50);
  border-radius: var(--radius-sm);
  color: var(--green-500);
  font-size: 1.3rem;
  margin-bottom: 20px;
  transition: all var(--transition-base);
}

.card:hover .card__icon {
  background: var(--green-500);
  color: var(--white);
}

.card__body {
  padding: 32px;
}

.card__title {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.card__text {
  font-size: 0.925rem;
  color: var(--neutral-500);
  margin-bottom: 0;
}

/* Card rendered as a link (e.g. solutions cards -> their service/solution page) */
.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card--link:hover { color: inherit; }
.card--link .card__title { transition: color var(--transition-base); }
.card--link:hover .card__title { color: var(--green-600); }

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-500);
  margin-top: 16px;
  transition: gap var(--transition-fast);
}

.card__link:hover {
  gap: 10px;
  color: var(--green-600);
}

/* Service card variant */
.service-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  border: 1px solid var(--neutral-200);
  transition: all var(--transition-slow);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green-300);
  color: inherit;
}

.service-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-900);
  border-radius: var(--radius-md);
  color: var(--green-400);
  font-size: 1.5rem;
  margin-bottom: 20px;
  transition: all var(--transition-base);
}

.service-card:hover .service-card__icon {
  background: var(--green-500);
  color: var(--white);
}

.service-card__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.service-card__text {
  font-size: 0.875rem;
  color: var(--neutral-500);
  margin-bottom: 0;
}


/* --- Process Cards --- */
.process-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.process-card:hover {
  border-color: var(--green-300);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.process-card__number {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--neutral-100);
  line-height: 1;
}

.process-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 1.25rem;
  color: var(--green-600);
}

.process-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--neutral-900);
}

.process-card__text {
  font-size: 0.9rem;
  color: var(--neutral-500);
  line-height: 1.6;
  margin-bottom: 0;
}


/* --- Portfolio Cards --- */
.grid--portfolio {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.portfolio-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.portfolio-card:hover {
  border-color: var(--green-400);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}

.portfolio-card__image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--neutral-100);
}

.portfolio-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.3s ease;
}

.portfolio-card:hover .portfolio-card__image img {
  transform: scale(1.03);
}

.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.portfolio-card:hover .portfolio-card__overlay {
  opacity: 1;
}

.portfolio-card__overlay i {
  font-size: 1.5rem;
  color: var(--white);
}

.portfolio-card__body {
  padding: 16px 20px;
}

.portfolio-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--neutral-900);
}

.portfolio-card__tagline {
  font-size: 0.825rem;
  color: var(--neutral-400);
  margin-bottom: 0;
}


/* --- Grid Layouts --- */
.grid {
  display: grid;
  gap: 24px;
}

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

.grid--services {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .grid--services {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid--services {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid--team {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px;
}


/* --- Split Content (text + image side by side) --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.split--reverse {
  direction: rtl;
}

.split--reverse > * {
  direction: ltr;
}

.split__content {
  max-width: 540px;
}

.split__image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.split__image::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 40%;
  height: 40%;
  border: 3px solid var(--green-400);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.split__image--no-accent::after {
  display: none;
}


/* --- News Carousel Section --- */
.news-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

/* Carousel */
.news-carousel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--neutral-800);
  aspect-ratio: 16 / 10;
}

.news-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.news-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.news-carousel__slide--active {
  opacity: 1;
  pointer-events: auto;
}

.news-carousel__image {
  width: 100%;
  height: 100%;
}

.news-carousel__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-carousel__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-800);
}

.news-carousel__placeholder i {
  font-size: 4rem;
  color: var(--neutral-600);
}

.news-carousel__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px 32px 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}

.news-carousel__title {
  color: var(--white);
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.news-carousel__overlay .btn {
  font-size: 0.85rem;
  padding: 10px 22px;
}

/* Arrows */
.news-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0,0,0,0.4);
  color: var(--white);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  z-index: 2;
}

.news-carousel__arrow:hover {
  background: rgba(0,0,0,0.7);
}

.news-carousel__arrow--prev { left: 12px; }
.news-carousel__arrow--next { right: 12px; }

/* Dots */
.news-carousel__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.news-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast);
}

.news-carousel__dot--active,
.news-carousel__dot:hover {
  background: var(--white);
}

/* Quick Links Grid */
.news-quicklinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.news-quicklink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
}

.news-quicklink:hover {
  background: rgba(74, 124, 46, 0.12);
  border-color: rgba(74, 124, 46, 0.3);
}

.news-quicklink i {
  font-size: 1.5rem;
  color: var(--green-400);
  transition: transform var(--transition-base);
}

.news-quicklink:hover i {
  transform: scale(1.1);
}

.news-quicklink span {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
}

/* News Cards Row */
.news-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.news-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-decoration: none;
  transition: all var(--transition-base);
}

.news-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-2px);
}

.news-card__title {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 8px;
}

.news-card__meta {
  font-size: 0.82rem;
  color: var(--green-400);
  margin-bottom: 12px;
  font-weight: 500;
}

.news-card__excerpt {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .news-top {
    grid-template-columns: 1fr;
  }
  .news-carousel {
    aspect-ratio: 16 / 9;
  }
  .news-quicklinks {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .news-cards {
    grid-template-columns: 1fr;
  }
  .news-quicklinks {
    grid-template-columns: repeat(2, 1fr);
  }
  .news-carousel__overlay {
    padding: 32px 20px 24px;
  }
  .news-carousel__title {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .news-quicklinks {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .news-quicklink {
    padding: 20px 12px;
  }
}


/* --- Stats --- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.stat {
  text-align: center;
}

.stat__number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--green-400);
  line-height: 1;
  margin-bottom: 8px;
}

.stat__label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
}


/* --- Team --- */
.team-card {
  text-align: center;
}

.team-card__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  border: 3px solid var(--neutral-200);
  transition: border-color var(--transition-base);
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card:hover .team-card__photo {
  border-color: var(--green-400);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__photo i {
  font-size: 3rem;
  color: var(--neutral-300);
}

.team-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.team-card__role {
  font-size: 0.85rem;
  color: var(--neutral-500);
}


/* --- Forms --- */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--neutral-700);
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--neutral-800);
  transition: all var(--transition-fast);
  outline: none;
}

.form-input:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(74, 124, 46, 0.1);
}

.form-input::placeholder {
  color: var(--neutral-400);
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--neutral-200);
  /* Keep every form card a consistent width regardless of its page wrapper
     (some pages place it in a 680px box, others in the full 1200px container). */
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Anchor target for the redirect after a successful submit. scroll-margin keeps
   the banner clear of the sticky nav when the page jumps to #contact-form. */
.contact-form-block {
  scroll-margin-top: 110px;
}

/* In-context submission feedback (persistent, unlike the auto-dismissing toast). */
.form-feedback {
  margin-bottom: 24px;
}
.form-feedback__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.form-feedback__item:last-child { margin-bottom: 0; }
.form-feedback__item i { font-size: 1.1rem; flex-shrink: 0; }
.form-feedback__item--success {
  background: #eaf3e3;
  color: var(--green-700);
  border-color: var(--green-500);
}
.form-feedback__item--error {
  background: #fdeaea;
  color: #b42318;
  border-color: #dc2626;
}

.form-card__title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.form-card__subtitle {
  color: var(--neutral-500);
  margin-bottom: 28px;
}

/* The form card is always a white surface: keep its text dark even when the
   card sits inside a dark or green section (which otherwise whitens h2-h4/p). */
.section--dark .form-card h2,
.section--dark .form-card h3,
.section--dark .form-card h4,
.section--green .form-card h2,
.section--green .form-card h3,
.section--green .form-card h4 {
  color: var(--neutral-900);
}
.section--dark .form-card p,
.section--green .form-card p {
  color: var(--neutral-500);
}


/* --- Blog --- */
.post-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  transition: all var(--transition-slow);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green-200);
  color: inherit;
}

.post-card__image {
  height: 200px;
  background: var(--neutral-100);
  overflow: hidden;
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.post-card:hover .post-card__image img {
  transform: scale(1.05);
}

.post-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card__categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.post-card__category {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green-500);
  background: var(--green-50);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.post-card__title {
  font-size: 1.1rem;
  margin-bottom: 8px;
  line-height: 1.4;
}

.post-card__excerpt {
  font-size: 0.9rem;
  color: var(--neutral-500);
  flex: 1;
}

.post-card__meta {
  font-size: 0.8rem;
  color: var(--neutral-400);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-100);
}


/* --- Contact Info --- */
.contact-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.contact-info__item {
  text-align: center;
  padding: 32px 24px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--neutral-200);
}

.contact-info__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-50);
  color: var(--green-500);
  border-radius: 50%;
  font-size: 1.2rem;
  margin: 0 auto 16px;
}

.contact-info__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.contact-info__text {
  font-size: 0.9rem;
  color: var(--neutral-500);
  margin-bottom: 0;
}

.contact-info__text a {
  color: var(--green-500);
}


/* --- Feature List --- */
.feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.feature-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--neutral-50);
  border-radius: var(--radius-sm);
  font-size: 0.925rem;
  color: var(--neutral-700);
}

.feature-list__item i {
  color: var(--green-500);
  font-size: 0.85rem;
}


/* --- Tagged Posts Section (Upcoming Classes) --- */
.tagged-posts-header {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 48px;
  justify-content: center;
}

.tagged-posts-rule {
  flex: 1;
  max-width: 280px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neutral-800), transparent);
}

.tagged-posts-heading {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--neutral-800);
  white-space: nowrap;
}

.tagged-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.tagged-post-card {
  padding: 0 28px;
  border-right: 1px solid var(--neutral-200);
}

.tagged-post-card:last-child {
  border-right: none;
}

.tagged-post-card__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--neutral-200);
}

.tagged-post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tagged-post-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--neutral-800);
  line-height: 1.35;
  margin-bottom: 10px;
}

.tagged-post-card__excerpt {
  font-size: 0.9rem;
  color: var(--neutral-500);
  line-height: 1.65;
  margin-bottom: 20px;
}

.tagged-post-card__btn {
  display: inline-block;
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-500);
  border: 2px solid var(--green-500);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition-base);
}

.tagged-post-card__btn:hover {
  background: var(--green-500);
  color: var(--white);
}

@media (max-width: 1024px) {
  .tagged-posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }
  .tagged-post-card:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 640px) {
  .tagged-posts-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tagged-post-card {
    border-right: none;
    border-bottom: 1px solid var(--neutral-200);
    padding: 0 0 32px;
  }
  .tagged-post-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .tagged-posts-rule {
    max-width: 120px;
  }
}


/* --- CTA Banner --- */
.cta-banner {
  padding: 80px 0;
  background: var(--green-500);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(0,0,0,0.1) 0%, transparent 40%);
}

.cta-banner__content {
  position: relative;
  text-align: center;
  z-index: 2;
}

.cta-banner h2 {
  color: var(--white);
  margin-bottom: 16px;
}

.cta-banner p {
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto 32px;
}


/* --- Footer --- */
.footer {
  background: var(--neutral-900);
  padding: 80px 0 0;
  color: rgba(255,255,255,0.65);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer__brand-text {
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 16px 0;
  color: rgba(255,255,255,0.5);
}

.footer__logo img {
  height: 32px;
  width: auto;
}

.footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer__social {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.footer__social:hover {
  background: var(--green-500);
  color: var(--white);
}

.footer__heading {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 20px;
}

.footer__link {
  display: block;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  padding: 5px 0;
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--green-400);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.footer__contact-item i {
  color: var(--green-400);
  margin-top: 3px;
  width: 16px;
  text-align: center;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
}


/* --- Toast / Messages --- */
.messages {
  position: fixed;
  top: 100px;
  right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.3s ease;
  max-width: 400px;
}

.message--success {
  background: var(--green-500);
  color: var(--white);
}

.message--error {
  background: #dc2626;
  color: var(--white);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}


/* --- Solutions Grid --- */
.solutions-category {
  margin-bottom: 60px;
}

.solutions-category__title {
  font-size: 1.5rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.solutions-category__title::before {
  content: '';
  width: 4px;
  height: 28px;
  background: var(--green-400);
  border-radius: 2px;
}

.solutions-category__subtitle {
  color: var(--neutral-500);
  margin-bottom: 28px;
  padding-left: 16px;
}


/* --- Newsletter --- */
.newsletter-form {
  max-width: 500px;
  margin: 0 auto;
}


/* --- Info pages --- */
.prose {
  max-width: 760px;
  margin: 0 auto;
}

.prose h2 {
  margin-top: 48px;
  margin-bottom: 16px;
}

.prose h3 {
  margin-top: 36px;
  margin-bottom: 12px;
}

.prose p {
  margin-bottom: 16px;
  line-height: 1.8;
}

.prose ul,
.prose ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li {
  margin-bottom: 8px;
  color: var(--neutral-600);
}


/* --- Event Registration --- */
.event-register-cta {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--neutral-200);
  text-align: center;
}

.event-reg-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 900px;
  align-items: start;
}

.event-reg-info-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.event-reg-info-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 24px;
}

.event-reg-info-card h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-800);
  margin-top: 24px;
  margin-bottom: 12px;
}

.event-reg-details {
  list-style: none;
  padding: 0;
  margin: 0;
}

.event-reg-details li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--neutral-200);
}

.event-reg-details li:last-child {
  border-bottom: none;
}

.event-reg-details li i {
  color: var(--green-500);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.event-reg-details li strong {
  display: block;
  font-size: 0.82rem;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.event-reg-details li span {
  font-size: 0.95rem;
  color: var(--neutral-800);
}

.event-reg-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-reg-links li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-500);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.event-reg-links li a:hover {
  color: var(--green-700);
}

.event-reg-links li a i {
  font-size: 0.75rem;
}

.event-reg-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-row-public {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group-public {
  margin-bottom: 16px;
}

.form-group-public label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--neutral-600);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-errors-public {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}

.form-errors-public li {
  color: #dc2626;
  font-size: 0.82rem;
}

@media (max-width: 768px) {
  .event-reg-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .form-row-public {
    grid-template-columns: 1fr;
  }
}


/* --- Scroll Animations --- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up--visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger > .fade-up:nth-child(1) { transition-delay: 0s; }
.stagger > .fade-up:nth-child(2) { transition-delay: 0.08s; }
.stagger > .fade-up:nth-child(3) { transition-delay: 0.16s; }
.stagger > .fade-up:nth-child(4) { transition-delay: 0.24s; }
.stagger > .fade-up:nth-child(5) { transition-delay: 0.32s; }
.stagger > .fade-up:nth-child(6) { transition-delay: 0.4s; }
.stagger > .fade-up:nth-child(7) { transition-delay: 0.48s; }
.stagger > .fade-up:nth-child(8) { transition-delay: 0.56s; }
.stagger > .fade-up:nth-child(9) { transition-delay: 0.64s; }
.stagger > .fade-up:nth-child(10) { transition-delay: 0.72s; }
.stagger > .fade-up:nth-child(11) { transition-delay: 0.8s; }
.stagger > .fade-up:nth-child(12) { transition-delay: 0.88s; }
.stagger > .fade-up:nth-child(13) { transition-delay: 0.96s; }
.stagger > .fade-up:nth-child(14) { transition-delay: 1.04s; }
.stagger > .fade-up:nth-child(15) { transition-delay: 1.12s; }


/* ============================================
   Responsive
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
  .nav__links {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .hero {
    min-height: 70vh;
  }

  .hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .split {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .split--reverse {
    direction: ltr;
  }

  .split__image {
    max-height: 400px;
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .contact-info {
    grid-template-columns: 1fr;
  }

  .grid--portfolio {
    grid-template-columns: repeat(2, 1fr);
  }

  .section {
    padding: 72px 0;
  }
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --nav-height: 68px;
  }

  .section {
    padding: 56px 0;
  }

  .container {
    padding: 0 16px;
  }

  .hero {
    min-height: 60vh;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .page-header {
    padding: 120px 0 60px;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .grid--portfolio {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-card {
    padding: 28px 20px;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .cta-banner {
    padding: 56px 0;
  }

  .split__image::after {
    display: none;
  }
}


/* ============================================
   MOTION LAYER  —  "The Signal, alive"
   A restraint-forward motion system layered on the
   base styles above. Everything degrades to a fully
   visible, static page without JS and collapses under
   prefers-reduced-motion.
   ============================================ */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --z-dropdown: 500;
  --z-nav: 1000;
  --z-progress: 1001;
  --z-skip: 1100;
  --z-toast: 9000;
}

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

/* --- Skip link (keyboard) --- */
.skip-link {
  position: fixed;
  top: -64px;
  left: 16px;
  z-index: var(--z-skip);
  background: var(--green-500);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  transition: top var(--transition-base);
}
.skip-link:focus {
  top: 12px;
  color: var(--white);
}

/* --- Focus-visible rings (keyboard only) --- */
:focus-visible {
  outline: 2px solid var(--green-500); /* 4.3:1 on white */
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }
.nav :focus-visible,
.footer :focus-visible,
.hero :focus-visible,
.page-header :focus-visible,
.section--dark :focus-visible {
  outline-color: var(--green-400); /* ~6:1 on near-black */
}
/* On green-500 backgrounds, green-400 is only ~2.3:1; use white (~5:1). */
.section--green :focus-visible,
.cta-banner :focus-visible {
  outline-color: var(--white);
}

/* --- Scroll progress signal bar --- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: var(--z-progress);
  pointer-events: none;
}
.scroll-progress__fill {
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--green-600), var(--green-400));
  will-change: transform;
}

/* --- Living Signal field (canvas) --- */
.signal-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none; /* cursor tracked on window; never blocks UI */
}

/* --- Scroll reveals (enhance an already-visible default) --- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out-quint),
              transform 0.7s var(--ease-out-quint);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js [data-reveal="left"]  { transform: translateX(-34px); }
html.js [data-reveal="right"] { transform: translateX(34px); }
html.js [data-reveal="scale"] { transform: scale(0.95); }
html.js [data-reveal="fade"]  { transform: none; }
html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Keep the legacy .fade-up reveal visible when JS is unavailable */
html:not(.js) .fade-up {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Hero choreography structure --- */
.hero__headline {
  display: block;
}
.hero__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.05em; /* room for descenders during the mask reveal */
}
.hero__word > span {
  display: inline-block;
  color: inherit;
}
.hero__title .hero__word--signal > span {
  color: var(--green-400);
}

/* --- Button press + magnetic --- */
.btn:active { transform: translateY(0) scale(0.97); }
[data-magnetic] { will-change: transform; }

/* --- Interactive card icon (subtle) ---
   Note: cards intentionally carry NO persistent will-change. Promoting a
   text-bearing element to its own compositing layer degrades glyph
   antialiasing (thin repeated strokes like "ll" render fuzzy/merged), and
   the hover lift is cheap enough without the hint. */
.service-card__icon,
.card__icon {
  transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.service-card:hover .service-card__icon,
.card:hover .card__icon {
  transform: translateY(-2px) scale(1.04);
}

/* --- News quicklink lift --- */
.news-quicklink { transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base); }
.news-quicklink:hover { transform: translateY(-3px); }

/* --- Section that hosts a signal field behind content --- */
.section--signal { position: relative; overflow: hidden; }
.section--signal > .container { position: relative; z-index: 2; }

/* --- Helpers (replace former inline styles) --- */
.lead-line {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--green-500);
  font-size: 1.1rem;
}
.btn--outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--outline-light:hover {
  background: var(--white);
  color: var(--neutral-900);
  border-color: var(--white);
  transform: translateY(-2px);
}
.section--dark .section-subtitle { color: rgba(255, 255, 255, 0.65); }
.section--dark .section-title { color: var(--white); }
.mt-section { margin-top: 48px; }
.mt-cta { margin-top: 40px; }
.post-card__image-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-card__image-empty i {
  font-size: 2.5rem;
  color: var(--neutral-300);
}
.nav__mobile-group-title .fa-chevron-down { font-size: 0.7em; margin-left: 6px; }
.nav__mobile-link--accent { color: var(--green-400); }
.footer__heading--spaced { margin-top: 28px; }

/* ============================================
   DELIGHT LAYER — livelier content sections
   Brings the hero/nav/footer's signal-green energy
   into the white content blocks: cursor spotlight,
   icon ping, live stat readout, ambient depth.
   ============================================ */

/* --- Cursor spotlight: a soft signal glow tracks the pointer across a card --- */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
              rgba(122, 193, 67, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out-quint);
  pointer-events: none;
  z-index: -1;
}
[data-spotlight]:hover::after { opacity: 1; }
/* Stronger on dark surfaces (news quicklinks / cards) so it reads */
.section--dark [data-spotlight]::after {
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
              rgba(122, 193, 67, 0.22), transparent 60%);
}

/* --- Service-card flourishes: arrow cue + a "signal ping" off the icon --- */
.service-card { position: relative; }
.service-card__icon { position: relative; }
.service-card__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--green-400);
  opacity: 0;
  pointer-events: none;
}
.service-card:hover .service-card__icon::after {
  animation: signal-ping 1.5s var(--ease-out-quint) infinite;
}
@keyframes signal-ping {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.6); }
}
.service-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green-500);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.service-card:hover .service-card__cue,
.service-card:focus-visible .service-card__cue {
  opacity: 1;
  transform: translateY(0);
}

/* --- Stats turned into a live signal readout --- */
.stat__number { text-shadow: 0 0 28px rgba(122, 193, 67, 0.22); }
.stat__bar {
  display: block;
  height: 3px;
  width: 44px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-600), var(--green-400));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.85s var(--ease-out-expo) 0.25s;
}
[data-reveal].is-revealed .stat__bar { transform: scaleX(1); }

/* --- Ambient depth: a faint green light keeps white sections from reading blank --- */
.section--glow { position: relative; overflow: hidden; }
.section--glow::before {
  content: '';
  position: absolute;
  top: -12%;
  right: -6%;
  width: 520px;
  height: 520px;
  max-width: 70vw;
  background: radial-gradient(circle, rgba(122, 193, 67, 0.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.section--glow > .container { position: relative; z-index: 1; }

/* --- Split image: gentle parallax drift (JS sets transform on [data-parallax]) --- */
[data-parallax] { will-change: transform; }

/* --- App showcase (solution detail: Cartell, Budge) --- */
.app-icon {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 20px;
}
.app-category {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green-300);
  background: rgba(122, 193, 67, 0.12);
  border: 1px solid rgba(122, 193, 67, 0.3);
  padding: 5px 13px;
  border-radius: 999px;
  margin-top: 14px;
}
.app-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.app-actions .btn i { font-size: 1.05em; }

/* Swipeable phone-screenshot gallery (scrolls itself, not the page) */
.app-shots {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 4px 22px;
  margin-top: 44px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--green-400) var(--neutral-200);
}
.app-shots::-webkit-scrollbar { height: 8px; }
.app-shots::-webkit-scrollbar-track { background: var(--neutral-200); border-radius: 4px; }
.app-shots::-webkit-scrollbar-thumb { background: var(--green-400); border-radius: 4px; }
.app-shot {
  flex: 0 0 auto;
  width: clamp(200px, 58vw, 240px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-md);
  background: var(--white);
  scroll-snap-align: start;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.app-shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.app-shot img { width: 100%; height: auto; display: block; }

/* --- Reduced motion: neutralize the whole motion layer --- */
@media (prefers-reduced-motion: reduce) {
  /* Backstop: neutralize movement-based motion globally (slides, parallax,
     mask reveals, smooth scroll, and anything we don't enumerate). Tasteful
     opacity-only cross-fades are reintroduced selectively below — the goal is
     a reduced-motion *version* of the effects, not their removal. Opacity
     changes don't trigger vestibular discomfort; positional movement does. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }

  /* Scroll reveals: cross-fade in on scroll with NO positional shift. The
     element/attribute selectors out-specify the universal reset above, so the
     0.6s opacity transition survives while the slide is forced off. */
  html.js [data-reveal] {
    opacity: 0;
    transform: none !important;
    transition: opacity 0.6s ease !important;
    transition-delay: 0s !important;
  }
  html.js [data-reveal].is-revealed { opacity: 1; }

  /* Legacy .fade-up reveal: opacity-only too (main.js still toggles it). */
  .fade-up {
    opacity: 0;
    transform: none !important;
    transition: opacity 0.6s ease !important;
  }
  .fade-up--visible { opacity: 1; }

  /* Hero: a gentle opacity-only fade-in on load, replacing the word mask
     reveal and the supporting-content rise. No movement. */
  .hero__word > span,
  [data-hero-rise] {
    transform: none !important;
    animation: rm-fade-in 0.7s ease both !important;
  }

  .hero__scroll { animation: none; }
  /* The scroll-progress bar stays visible: it reflects the user's own scroll
     position (no autoplay/parallax), so it is a position indicator, not
     gratuitous motion. The reset above removes its easing, so it tracks
     instantly. (Hiding it here is what made it "not work" on Windows, where
     the OS animation toggle is commonly off → prefers-reduced-motion: reduce.) */
  .service-card:hover .service-card__icon,
  .card:hover .card__icon { transform: none; }
}

/* Opacity-only fade-in used by the reduced-motion hero (see media query above). */
@keyframes rm-fade-in { from { opacity: 0; } to { opacity: 1; } }