/*-------------------------------------------------------
CONTAINER
-------------------------------------------------------*/
.container {
  width: 100%;
  max-width: 1248px;
  margin-inline: auto;
  padding-inline: 24px;
}
/*-------------------------------------------------------
EYEBROW
-------------------------------------------------------*/
/* Small uppercase label above section titles */
.eyebrow {
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  .eyebrow {
    margin-bottom: 36px;    
  }
}
/*-------------------------------------------------------
BUTTONS
-------------------------------------------------------*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 46px;
    padding: 12px 22px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}
.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.btn--primary:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-4px);
    box-shadow: 0 8px 12px 4px rgba(94,77,65,0.25);
}
/* Rounded, bolder button (contact CTA) */
.btn--pill {
    min-height: 50px;
    padding: 12px 28px;   
    font-size: 1rem;
    border-radius: var(--radius-pill);
}
.btn__icon {
    flex-shrink: 0;
    width: 22px;
    height: 12px;
    transition: transform 0.25s ease;
}
.btn:hover .btn__icon {
    transform: translateX(4px);
}
/*-------------------------------------------------------
REVEAL
-------------------------------------------------------*/
/* Scroll-reveal: main.js adds .is-visible when the element enters the viewport.
   Uses animation + the `translate` property (not transition/transform) so it never
   overrides an element's own hover transform or transitions; `backwards` keeps the
   element hidden during the delay and hands its own styles back when it ends.
   Hidden only when scripting is enabled, so content never disappears without JS. */
@keyframes reveal-up {
  from {
    opacity: 0;
    translate: 0 24px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes reveal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (scripting: enabled) {
  [data-reveal]:not(.is-visible) {
    opacity: 0;
  }
}

/* Delay staggered by --i (0 to 5, set in main.js) */
[data-reveal].is-visible {
  animation: reveal-up 700ms ease calc(var(--i, 0) * 80ms) backwards;
}

/* data-reveal="fade": no movement (photos, diagrams, large blocks) */
[data-reveal="fade"].is-visible {
  animation-name: reveal-fade;
}