@layer components {
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--easing-premium), transform var(--duration-slow) var(--easing-premium);
}

.reveal-on-scroll.is-will-change {
  will-change: opacity, transform;
}

.reveal-from-left {
  transform: translateX(-12px);
}

.reveal-left {
  transform: translateX(-12px);
}

.reveal-from-right {
  transform: translateX(12px);
}

.reveal-right {
  transform: translateX(12px);
}

.reveal-scale {
  transform: scale(0.97);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-on-scroll.reveal-from-left.is-visible,
.reveal-on-scroll.reveal-from-right.is-visible,
.reveal-on-scroll.reveal-left.is-visible,
.reveal-on-scroll.reveal-right.is-visible,
.reveal-on-scroll.reveal-scale.is-visible {
  transform: translateX(0) translateY(0) scale(1);
}

.hero-heading-reveal {
  display: block;
  --hero-word-duration: 0.36s;
  --hero-word-start: 28ms;
  --hero-word-step: 32ms;
}

.hero-heading-reveal .hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
  transition: opacity var(--hero-word-duration) var(--easing-premium), transform var(--hero-word-duration) var(--easing-premium), filter var(--hero-word-duration) var(--easing-premium);
}

.hero-heading-reveal.is-visible .hero-word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.hero-heading-reveal .hero-word:nth-child(1) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 0)); }
.hero-heading-reveal .hero-word:nth-child(2) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 1)); }
.hero-heading-reveal .hero-word:nth-child(3) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 2)); }
.hero-heading-reveal .hero-word:nth-child(4) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 3)); }
.hero-heading-reveal .hero-word:nth-child(5) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 4)); }
.hero-heading-reveal .hero-word:nth-child(6) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 5)); }
.hero-heading-reveal .hero-word:nth-child(7) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 6)); }
.hero-heading-reveal .hero-word:nth-child(8) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 7)); }
.hero-heading-reveal .hero-word:nth-child(9) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 8)); }
.hero-heading-reveal .hero-word:nth-child(10) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 9)); }
.hero-heading-reveal .hero-word:nth-child(11) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 10)); }
.hero-heading-reveal .hero-word:nth-child(12) { transition-delay: calc(var(--hero-word-start) + (var(--hero-word-step) * 11)); }

.hero-primary .hero-heading-reveal,
.hero-secondary .hero-heading-reveal,
.case-hero .hero-heading-reveal {
  --hero-word-duration: 0.42s;
  --hero-word-start: 34ms;
  --hero-word-step: 38ms;
}

.hero-cta-reveal {
  opacity: 0;
  transform: translateY(8px) scale(0.99);
}

.hero-cta-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-parallax {
  background-position: center var(--hero-parallax-bg, 0px);
}

.hero-parallax-foreground {
  transform: translateY(var(--hero-parallax-fg, 0px));
  transition: transform var(--duration-fast) linear;
}

.stagger-children > .reveal-on-scroll {
  transition-delay: var(--stagger-delay, 0ms);
}

.card,
.resource-card,
.audience-card,
.service-card,
.post-card,
.tool-card {
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-base) var(--easing-premium),
    transform var(--duration-base) var(--easing-premium),
    background-color var(--duration-fast) ease;
  background: #fff;
  border-color: #d1d5db; /* fallback for browsers without color-mix */
  border-color: color-mix(in oklab, var(--color-brand-teal) 22%, #d1d5db);
  box-shadow: 0 14px 30px -26px rgba(15, 23, 42, 0.5);
}


:where(
  .card,
  .resource-card,
  .audience-card,
  .service-card,
  .post-card,
  .tool-card,
  .blog-card
) {
  overflow: hidden;
}

:where(
  .card,
  .resource-card,
  .audience-card,
  .service-card,
  .post-card,
  .tool-card,
  .blog-card
) :where(picture) {
  display: block;
  overflow: hidden;
}

:where(
  .card,
  .resource-card,
  .audience-card,
  .service-card,
  .post-card,
  .tool-card,
  .blog-card
) :where(img:not(.rounded-full)) {
  transform-origin: center;
  transition: transform var(--duration-base) var(--easing-premium), filter var(--duration-base) var(--easing-premium);
}

:where(
  .card,
  .resource-card,
  .audience-card,
  .service-card,
  .post-card,
  .tool-card,
  .blog-card
):hover :where(img:not(.rounded-full)) {
  transform: scale(1.02);
  filter: brightness(1.02);
}
@media (hover: hover) {
  .card:hover,
  .resource-card:hover,
  .service-card:hover,
  .post-card:hover,
  .tool-card:hover {
    border-color: var(--color-brand-teal);
    box-shadow: 0 18px 34px -24px rgba(0,87,120,0.4); /* fallback */
    box-shadow: 0 18px 34px -24px color-mix(in oklab, var(--color-brand-teal) 28%, rgba(0,0,0,0.22));
    transform: translateY(-2px);
  }

  .audience-card:hover {
    transform: translateY(0);
    box-shadow: 0 16px 34px -18px rgba(0,87,120,0.38); /* fallback */
    box-shadow: 0 16px 34px -18px color-mix(in oklab, var(--color-brand-teal) 30%, rgba(0, 0, 0, 0.2));
  }

  .audience-card:hover::before {
    transform: scaleX(1);
  }

  .card:hover .icon-lucide,
  .resource-card:hover .icon-lucide,
  .audience-card:hover .icon-lucide,
  .service-card:hover .icon-lucide,
  .post-card:hover .icon-lucide,
  .tool-card:hover .icon-lucide {
    transform: scale(1.06);
  }
}

.card .icon-lucide,
.resource-card .icon-lucide,
.audience-card .icon-lucide,
.service-card .icon-lucide,
.post-card .icon-lucide,
.tool-card .icon-lucide {
  transition: transform var(--duration-fast) var(--easing-premium);
}

.audience-card {
  position: relative;
}

.audience-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brand-teal), var(--color-brand-navy));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--easing-premium);
}

.mobile-menu-animated {
  display: block !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height var(--duration-slow) var(--easing-premium), opacity var(--duration-base) var(--easing-premium), transform var(--duration-base) var(--easing-premium);
}

.mobile-menu-animated.is-open {
  opacity: 1;
  transform: translateY(0);
}

.mobile-submenu-animated {
  display: block !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--duration-base) var(--easing-premium), opacity var(--duration-fast) var(--easing-premium);
}

.mobile-submenu-animated.is-open {
  opacity: 1;
}

header .group > .dropdown-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.985);
  transform-origin: top left;
  transition: opacity var(--duration-fast) var(--easing-premium), transform var(--duration-base) var(--easing-premium), visibility 0s linear var(--duration-fast);
}

header .group.is-open > .dropdown-panel,
header .group:hover > .dropdown-panel,
header .group:focus-within > .dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 90ms, 90ms, 0s;
}

.reading-progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: var(--color-brand-teal);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 80;
  pointer-events: none;
}

.nav-loading-bar {
  position: fixed;
  inset: 0 auto auto 0;
  width: min(40vw, 360px);
  height: 3px;
  background: linear-gradient(90deg, var(--color-brand-teal), var(--color-brand-orange));
  box-shadow: 0 0 14px color-mix(in oklab, var(--color-brand-teal) 45%, transparent);
  transform: translateX(-105%);
  opacity: 0;
  z-index: 95;
  pointer-events: none;
  transition: transform calc(var(--duration-slow) + 130ms) var(--easing-premium), opacity var(--duration-fast) var(--easing-premium);
}

.nav-loading-bar.is-active {
  opacity: 1;
  transform: translateX(12vw);
}

.nav-loading-bar.is-complete {
  opacity: 0;
  transform: translateX(105vw);
}

.fc-hero-shape-1 {
  width: 220px;
  height: 220px;
  top: -72px;
  left: -78px;
}

.fc-hero-shape-2 {
  width: 132px;
  height: 132px;
  top: 30px;
  right: 10%;
}

.fc-hero-shape-3 {
  width: 180px;
  height: 108px;
  bottom: -34px;
  right: -32px;
  transform: rotate(-10deg);
}

.fc-hero-shape-4 {
  width: 118px;
  height: 72px;
  bottom: 24px;
  left: 15%;
  transform: rotate(8deg);
}

.national-hero-shape-1 {
  width: 230px;
  height: 230px;
  top: -72px;
  left: -82px;
}

.national-hero-shape-2 {
  width: 138px;
  height: 138px;
  top: 40px;
  right: 8%;
}

.national-hero-shape-3 {
  width: 192px;
  height: 116px;
  bottom: -36px;
  right: -34px;
  transform: rotate(-10deg);
}

.national-hero-shape-4 {
  width: 126px;
  height: 76px;
  bottom: 24px;
  left: 14%;
  transform: rotate(8deg);
}

.stat-progress-card {
  --stat-progress-target: 0;
}

.stat-progress-track {
  display: block;
  margin-top: 0.5rem;
  width: 100%;
  height: 2px;
  background: color-mix(in oklab, var(--color-brand-navy) 10%, #fff);
  border-radius: 999px;
  overflow: hidden;
}

.stat-progress-fill {
  display: block;
  height: 100%;
  width: calc(var(--stat-progress-target) * 100%);
  background: linear-gradient(90deg, var(--color-brand-teal), var(--color-brand-orange));
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform calc(var(--duration-slow) + 200ms) var(--easing-premium);
}

.stat-progress-card.is-active .stat-progress-fill {
  transform: scaleX(1);
}

.metric-shell.metric-sequence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
}

.metric-shell.metric-sequence .metric-col {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--easing-premium), transform var(--duration-base) var(--easing-premium);
}

.metric-shell.metric-sequence .metric-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  background: color-mix(in oklab, var(--color-brand-navy) 6%, #fff);
  border-inline: 1px solid var(--color-border-default);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-base) var(--easing-premium), transform var(--duration-base) var(--easing-premium);
}

.metric-shell.metric-sequence .metric-arrow svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: var(--color-brand-teal-dark);
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metric-shell.metric-sequence .metric-step.is-active,
.metric-shell.metric-sequence .metric-arrow.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.service-timeline {
  position: relative;
  display: grid;
  gap: 1rem;
}

.service-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.service-timeline-rail {
  position: relative;
  width: 2.1rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.service-timeline-dot {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--color-brand-navy), var(--color-brand-teal));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 18px -14px rgba(0, 87, 120, 0.7);
}

.service-timeline-connector {
  width: 0.55rem;
  height: calc(100% + 1.4rem);
  margin-top: 0.22rem;
  overflow: visible;
}

.service-timeline-connector path {
  stroke: color-mix(in oklab, var(--color-brand-teal) 56%, #cbd5e1);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}

.service-timeline-item:last-child .service-timeline-connector {
  display: none;
}

.service-timeline-card {
  width: 100%;
}

.service-timeline--animated .service-timeline-dot,
.service-timeline--animated .service-timeline-card {
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  transition: opacity var(--duration-slow) var(--easing-premium), transform var(--duration-slow) var(--easing-premium);
}

.service-timeline--animated .service-timeline-connector path {
  stroke-dasharray: 38;
  stroke-dashoffset: 38;
  transition: stroke-dashoffset var(--duration-slow) var(--easing-premium);
}

.service-timeline--animated .service-timeline-item.is-active .service-timeline-dot,
.service-timeline--animated .service-timeline-item.is-active .service-timeline-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.service-timeline--animated .service-timeline-item.is-active .service-timeline-connector path {
  stroke-dashoffset: 0;
}

.thank-you-check-wrap {
  position: relative;
  transform: scale(0.95);
  transition: transform var(--duration-base) var(--easing-premium);
}

.thank-check-path {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
}

.thank-you-check-wrap.is-active {
  animation: thankBounce 0.74s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.thank-you-check-wrap.is-active .thank-check-path {
  animation: thankCheckDraw 0.42s ease forwards;
}

.thank-you-confetti {
  pointer-events: none;
  position: absolute;
  inset: -16px;
}

.confetti-piece {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 2px;
  opacity: 0;
  transform: translate(0, 0) scale(0.6) rotate(0deg);
}

.confetti-piece:nth-child(1) { top: 2px; left: 6px; background: var(--color-brand-orange); }
.confetti-piece:nth-child(2) { top: 6px; right: 10px; background: var(--color-brand-teal); }
.confetti-piece:nth-child(3) { top: 28px; right: -6px; background: #22c55e; }
.confetti-piece:nth-child(4) { bottom: 14px; right: 3px; background: var(--color-brand-orange); }
.confetti-piece:nth-child(5) { bottom: 6px; left: 8px; background: var(--color-brand-teal); }
.confetti-piece:nth-child(6) { top: 32px; left: -8px; background: #60a5fa; }

.thank-you-check-wrap.is-active .confetti-piece {
  animation: confettiBurst 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.thank-you-check-wrap.is-active .confetti-piece:nth-child(2) { animation-delay: 40ms; }
.thank-you-check-wrap.is-active .confetti-piece:nth-child(3) { animation-delay: 80ms; }
.thank-you-check-wrap.is-active .confetti-piece:nth-child(4) { animation-delay: 120ms; }
.thank-you-check-wrap.is-active .confetti-piece:nth-child(5) { animation-delay: 160ms; }
.thank-you-check-wrap.is-active .confetti-piece:nth-child(6) { animation-delay: 200ms; }

.line-draw-target {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}

.lost-illustration.is-drawing .line-draw-target {
  animation: lineDrawIn 1.05s ease forwards;
}

.offline-status-card {
  max-width: 36rem;
}

.offline-illustration {
  margin-inline: auto;
  margin-bottom: 1rem;
  width: min(220px, 70%);
  color: var(--color-brand-teal-dark);
}

.offline-illustration svg {
  width: 100%;
  height: auto;
}

.offline-illustration rect,
.offline-illustration circle,
.offline-illustration path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offline-illustration .offline-wave {
  stroke-width: 2;
  opacity: 0.78;
  animation: offlineWave 1.6s ease-in-out infinite;
}

.offline-illustration .offline-wave:nth-child(2) {
  animation-delay: 180ms;
}

@keyframes thankCheckDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes thankBounce {
  0% { transform: scale(0.9); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes confettiBurst {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(1) rotate(180deg); }
}

.confetti-piece:nth-child(1) { --tx: -8px; --ty: -22px; }
.confetti-piece:nth-child(2) { --tx: 10px; --ty: -24px; }
.confetti-piece:nth-child(3) { --tx: 24px; --ty: -6px; }
.confetti-piece:nth-child(4) { --tx: 18px; --ty: 16px; }
.confetti-piece:nth-child(5) { --tx: -14px; --ty: 18px; }
.confetti-piece:nth-child(6) { --tx: -22px; --ty: 2px; }

@keyframes lineDrawIn {
  to { stroke-dashoffset: 0; }
}

@keyframes offlineWave {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (min-width: 960px) {
  .service-timeline-item {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.95rem;
  }

  .service-timeline-item .service-timeline-rail {
    grid-column: 2;
  }

  .service-timeline-item .service-timeline-card {
    grid-column: 1;
  }

  .service-timeline-item:nth-child(even) .service-timeline-card {
    grid-column: 3;
  }
}

@media (max-width: 767.98px) {
  .metric-shell.metric-sequence {
    grid-template-columns: minmax(0, 1fr);
  }

  .metric-shell.metric-sequence .metric-arrow {
    min-height: 2.25rem;
    border-inline: 0;
    border-top: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-border-default);
    background: color-mix(in oklab, var(--color-brand-teal) 6%, #fff);
  }

  .service-timeline {
    gap: 0.85rem;
  }

  .service-timeline-item {
    gap: 0.65rem;
  }

  .service-timeline-rail {
    width: 1.9rem;
  }

  .service-timeline-dot {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.68rem;
  }

  .service-timeline-connector {
    height: calc(100% + 1.1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .card,
  .resource-card,
  .audience-card,
  .service-card,
  .post-card,
  .tool-card,
  .reading-progress,
  .nav-loading-bar,
  .mobile-menu-animated,
  .mobile-submenu-animated,
  header .group > .dropdown-panel {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
  }

  .hero-heading-reveal .hero-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .stat-progress-fill,
  .service-timeline-dot,
  .service-timeline-card,
  .service-timeline-connector path,
  .thank-you-check-wrap,
  .thank-check-path,
  .confetti-piece,
  .line-draw-target,
  .offline-wave,
  .metric-shell.metric-sequence .metric-col,
  .metric-shell.metric-sequence .metric-arrow {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .stat-progress-fill {
    transform: scaleX(1) !important;
  }

  .thank-check-path,
  .line-draw-target {
    stroke-dashoffset: 0 !important;
  }

  .hero-parallax,
  .hero-parallax-foreground {
    background-position: center center !important;
    transform: none !important;
  }
}

}