/* Layout primitives, spacing rhythm, grids, reveal */


/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Container */
.container,
.container--default,
.container--wide,
.container--narrow {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}

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

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

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

.container--outer {
padding-left: calc(var(--container-outer-margin) + var(--container-padding));
padding-right: calc(var(--container-outer-margin) + var(--container-padding));
}

/* Grid */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

/* Column layouts defined in fluid.css (auto-fit + minmax) */

/* Flex */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

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

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8,
.gap-10,
.gap-cards { gap: var(--layout-gap-cards); }
.gap-dense { gap: var(--layout-gap-dense); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

.gap-x-6 { column-gap: var(--grid-column-gap); }
.gap-y-10 { row-gap: var(--grid-row-gap); }

/* Spacing — site-wide vertical rhythm (uniform top + bottom per section) */
.section,
main > .section {
padding-top: var(--section-padding-block);
padding-bottom: var(--section-padding-block);
}

main > .hero {
  padding-bottom: var(--section-padding-block);
}

main > .section.cta-section--overlap-footer {
  padding-top: var(--section-padding-block);
  padding-bottom: 0;
}

.section--alt {
  background: var(--color-bg-alt);
}

.section--sm {
padding-top: var(--section-padding-compact-block);
padding-bottom: var(--section-padding-compact-block);
}

.section--lg {
padding-top: var(--section-padding-y);
padding-bottom: var(--section-padding-y);
}

.section--balanced-padding {
padding-top: var(--section-padding-block);
padding-bottom: var(--section-padding-block);
}

.text-center {
  text-align: center;
}

.mx-auto {
margin-left: auto;
margin-right: auto;
}

.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

.stack-sm > * + * { margin-top: var(--space-4); }
.stack-md > * + * { margin-top: var(--space-6); }
.stack-lg > * + * { margin-top: var(--space-8); }

/* max-width helpers defined in fluid.css */

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

/* Visibility */
.hidden {
  display: none !important;
}

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translate3d(0, 2rem, 0) scale(0.985);
  filter: blur(2px);
  will-change: opacity, transform, filter;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.26s; }
.reveal-delay-4 { transition-delay: 0.34s; }
.reveal-delay-5 { transition-delay: 0.42s; }
.reveal-delay-6 { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal.is-visible {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* Layout breakpoints — only where fluid grids cannot replace behavior */
/* Fluid grids — columns wrap naturally by available width */
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.__fit__box__btn{
	display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

@media (max-width: 36em) {
  .grid--2 {
    grid-template-columns: 1fr;
  }
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
}

/* Split sections — liquid two-column that stacks when narrow */
.split-section {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--split-section-gap);
}

.split-section--55-45 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.split-section--40-60 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.split-section__content {
  max-width: min(30rem, 100%);
}

.split-section--equal .split-section__content {
  max-width: none;
}

/* Content width helpers */
.max-w-prose {
  max-width: min(33.75rem, 100%);
}

.max-w-lg {
  max-width: min(40rem, 100%);
}

/* Image placeholders scale with viewport */
.image-placeholder {
  min-height: clamp(18.75rem, 12rem + 22vw, 31.25rem);
}

.split-section:has(.image-placeholder) .image-placeholder {
  min-height: max(clamp(18.75rem, 12rem + 22vw, 31.25rem), 100%);
}

/* Multi-feature — equal 3 columns (overrides in sections.css for mobile stack) */
.multi-feature {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--multi-feature-column-gap);
  row-gap: var(--multi-feature-row-gap);
}

.process-cards__timeline {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
}

/* Footer meta wraps fluidly */
.footer__meta {
  flex-wrap: wrap;
  gap: var(--space-fluid-sm);
  row-gap: var(--space-fluid-xs);
}

.footer__meta > * + * {
  padding-left: var(--space-fluid-sm);
}

.footer__about {
  max-width: min(22rem, 100%);
}

.hero__subtitle {
  max-width: min(43.4375rem, 100%);
}

.hero__actions {
  gap: var(--hero-actions-gap);
}

.hero__visual {
  flex: 1 1 clamp(16rem, 40vw, 36rem);
  max-width: 100%;
}