/* Base Section */
.section {
  padding: var(--space-4xl) 0;
}

@media (max-width: 1024px) {
  .section {
    padding: var(--space-3xl) 0;
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-2xl) 0;
  }
}

.section--light {
  background: var(--color-surface);
}

.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}

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

/* Light-mode section - flips one section to light while the rest of the
   page stays dark. Redefines the shared tokens locally so every component
   inside it (cards, eyebrows, buttons) picks up the right colors for free,
   with nothing to override rule-by-rule. */
.section--paper {
  background: var(--color-bg-light);
  color: var(--color-text-dark);
  --color-text-light: var(--color-text-dark);
  --color-text-muted: var(--color-text-muted-on-light);
  --color-card-bg: var(--color-surface-light);
  --color-card-bg-alt: rgba(33, 36, 49, 0.03);
  --color-surface-alt: rgba(33, 36, 49, 0.05);
  --color-accent-soft: rgba(234, 92, 31, 0.08);
  --color-border: var(--color-border-light);
  --color-divider: var(--color-divider-light);
}

/* Eyebrow tag - shared "label" motif reused across every section.
   Change color/spacing here and it updates everywhere at once. */
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: 12px;
}

.section__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ============================================ */
/* SERVICES - asymmetric intro + feature grid   */
/* ============================================ */
.services-intro {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-2xl);
}

/* Long-form lead paragraph variant - for sections where the copy under
   the eyebrow is a full descriptive paragraph (e.g. a page's "Overview"
   intro) rather than a short punchy headline. Using the giant
   .services-intro__heading size here reads as a wall of huge text. */
.services-intro__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 820px;
  color: var(--color-text-light);
}

.services-intro__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.25;
  max-width: 780px;
  color: var(--color-text-light);
}

.services-slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: var(--space-lg);
}

.services-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-dark);
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.services-slider__arrow:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.services-slider__arrow svg {
  width: 18px;
  height: 18px;
}

/* Track: horizontal, scroll-snapped, drag/swipe/wheel scrollable natively -
   the prev/next buttons just nudge scrollLeft. */
.services-slider {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}

.services-slider::-webkit-scrollbar {
  display: none;
}

/* Card: the image is always visible, washed with a bluish tint at rest.
   Hover/focus clears the tint to the image's true color and reveals the
   description; a dark gradient fades in underneath to keep text legible. */
.service-slide {
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  height: 440px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-dark);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  scroll-snap-align: start;
  cursor: pointer;
  isolation: isolate;
}

@media (max-width: 1024px) {
  .service-slide {
    width: 260px;
    height: 400px;
  }
}

@media (max-width: 600px) {
  .service-slide {
    width: 78vw;
    height: 380px;
  }
}

.service-slide__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: saturate(0.75);
  transition: transform 0.6s ease, filter 0.5s ease;
}

/* Navy wash - the resting state, in place of a solid card color */
.service-slide__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(33,36,49,0.35) 0%, rgba(17,19,28,0.78) 100%);
  transition: opacity 0.45s ease;
}

/* Legibility gradient for the description - fades in on hover, on top of
   the now-cleared image */
.service-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(8,9,13,0.05) 0%, rgba(8,9,13,0.82) 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.service-slide__title {
  position: relative;
  z-index: 3;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.25;
  color: var(--color-white);
  margin: 0;
}

.service-slide__text {
  position: relative;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.35s ease;
}

.service-slide__link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--color-white);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.35s ease, color 0.2s ease;
}

.service-slide__link:hover {
  color: var(--color-accent);
}

.service-slide:hover .service-slide__bg,
.service-slide:focus-within .service-slide__bg,
.service-slide.is-open .service-slide__bg {
  transform: scale(1);
  filter: saturate(1);
}

.service-slide:hover .service-slide__tint,
.service-slide:focus-within .service-slide__tint,
.service-slide.is-open .service-slide__tint {
  opacity: 0;
}

.service-slide:hover .service-slide__overlay,
.service-slide:focus-within .service-slide__overlay,
.service-slide.is-open .service-slide__overlay {
  opacity: 1;
}

.service-slide:hover .service-slide__text,
.service-slide:focus-within .service-slide__text,
.service-slide.is-open .service-slide__text {
  max-height: 160px;
  opacity: 1;
  margin-top: 10px;
}

.service-slide:hover .service-slide__link,
.service-slide:focus-within .service-slide__link,
.service-slide.is-open .service-slide__link {
  max-height: 24px;
  opacity: 1;
  margin-top: 12px;
}

/* Why Section */
.why-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-2xl);
  align-items: start;
}

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

  /* stacked layout: a pinned headline would slide over the points below it */
  .why-headline {
    position: static;
  }
}

.why-headline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  position: sticky;
  top: 120px;
}

.why-headline span {
  color: var(--color-accent);
}

.why-points {
  display: flex;
  flex-direction: column;
}

.why-point {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.why-point:last-child {
  border-bottom: none;
}

.why-point__header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}

.why-point__number {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent);
}

.why-point__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
}

.why-point__text {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 16.5px;
  line-height: 1.65;
  padding-left: 36px;
}

/* ============================================ */
/* STATS - split intro + 2x2 counter grid       */
/* ============================================ */
.stats-split__grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (max-width: 900px) {
  .stats-split__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

.stats-split__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.3;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

.stats-split__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (max-width: 480px) {
  .stats-split__cards {
    grid-template-columns: 1fr;
  }
}

.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
  min-height: 168px;
  background: var(--color-card-bg-alt);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}

.stats-split__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 480px) {
  .stats-split__row { grid-template-columns: 1fr; }
}

.stat-card--mini {
  min-height: 132px;
  gap: var(--space-md);
}

.stat-card__label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.stat-number {
  font-family: var(--font-sans);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  color: var(--color-text-light);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================ */
/* CONTACT - branded tile + inline form         */
/* ============================================ */
.contact-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: stretch;
}

@media (max-width: 900px) {
  .contact-split__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

.contact-split__tile {
  background: var(--color-surface);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

.contact-split__brand {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
}

.contact-split__heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  color: var(--color-text-light);
  margin-bottom: 12px;
}

.contact-split__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.contact-split__divider {
  height: 1px;
  background: var(--color-divider);
  margin: var(--space-lg) 0;
}

.contact-split__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: auto;
}

.contact-split__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-light);
  transition: color var(--transition-fast);
}

a.contact-split__item:hover {
  color: var(--color-accent);
}

.contact-split__item svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.contact-split__form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}

.contact-split__form-lead {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 4px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 520px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-light);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color var(--transition-fast);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--color-text-muted);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.contact-form textarea {
  resize: vertical;
  min-height: 96px;
}

.contact-form__hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: -2px;
}

/* Buttons */
/* Buttons: one shared pill shape and size. Variants only change colors. */
.btn-primary,
.btn-secondary {
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(234, 92, 31, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-light);
  border-color: color-mix(in srgb, var(--color-text-light) 40%, transparent);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* Animate on Scroll */
.animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-in[data-delay='1'] { transition-delay: 0.1s; }
.animate-in[data-delay='2'] { transition-delay: 0.2s; }
.animate-in[data-delay='3'] { transition-delay: 0.3s; }
.animate-in[data-delay='4'] { transition-delay: 0.35s; }