/* ==========================================================================
   Amzlify — site chrome and homepage sections
   Loads after tokens.css. Every value here comes from a token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: var(--border-hair) solid var(--line);
  transition: padding var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
}

.site-header.is-compact {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.05);
}

.site-header.is-compact .site-header__inner { padding-block: var(--space-2xs); }
.site-header.is-compact .wordmark__role { opacity: 0; visibility: hidden; }

.wordmark {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  margin-right: auto;
}

.wordmark__mark {
  display: block;
  line-height: 0;
}

.wordmark__mark img {
  display: block;
  height: 2rem;
  width: auto;
  max-width: 11rem;
  transition: height var(--duration-base) var(--ease);
}

.site-header.is-compact .wordmark__mark img { height: 1.625rem; }

.wordmark__role {
  font-size: var(--text-xs);
  color: var(--muted);
  transition: opacity var(--duration-base) var(--ease);
}

/* Nav sits centred between the wordmark and the CTA */
.site-nav { margin-inline: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
}

.site-nav__link:hover { color: var(--teal-800); }

.site-nav__trigger::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.site-nav__trigger[aria-expanded="true"] { color: var(--teal-800); }
.site-nav__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Mega menu */
.has-mega { position: relative; }

.mega {
  position: absolute;
  top: calc(100% + var(--space-sm));
  left: 50%;
  transform: translateX(-50%);
  width: min(56rem, calc(100vw - 2rem));
  padding: var(--space-md);
  background: var(--white);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.mega[hidden] { display: none; }

.mega__list {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .mega__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
}

.mega__link {
  display: block;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.mega__link:hover { background: var(--teal-tint); }

.mega__title {
  display: block;
  font-weight: var(--weight-semi);
  color: var(--ink);
  margin-bottom: 2px;
}

.mega__desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-snug);
}

/* Mobile */
.nav-toggle { display: none; min-height: 40px; padding: var(--space-3xs) var(--space-xs); }

@media (max-width: 61.99em) {
  .nav-toggle { display: inline-flex; order: 3; }
  .site-header__cta { order: 2; }

  .site-nav {
    order: 4;
    flex-basis: 100%;
    margin: 0;
  }

  .site-nav[hidden] { display: none; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--space-sm);
  }

  .site-nav__item { border-top: var(--border-hair) solid var(--line); }
  .site-nav__link { width: 100%; justify-content: space-between; padding: var(--space-xs) 0; }

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

  .mega {
    position: static;
    transform: none;
    width: auto;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--space-sm);
  }
}

@media (max-width: 30em) {
  .site-header__cta { display: none; }
}

/* --------------------------------------------------------------------------
   Hero credibility strip
   -------------------------------------------------------------------------- */

.cred {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-sm);
  border-top: var(--border-hair) solid var(--line);
  font-size: var(--text-xs);
  color: var(--muted);
}

.cred__item { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.cred__item strong { color: var(--ink); font-weight: var(--weight-semi); }
.cred__sep { color: var(--line-strong); }

/* --------------------------------------------------------------------------
   Problem cards — the reader's words
   -------------------------------------------------------------------------- */

.problem { border-left: 3px solid var(--line-strong); padding-left: var(--space-md); }
.problem__quote {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}
.problem__note { font-size: var(--text-sm); color: var(--body); margin: 0; }

/* --------------------------------------------------------------------------
   Numbered service cards
   -------------------------------------------------------------------------- */

.numbered { position: relative; padding-top: var(--space-xl); }

.numbered__num {
  position: absolute;
  top: var(--space-md);
  left: var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--teal);
  letter-spacing: var(--tracking-wide);
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; list-style: none; padding: 0; margin-top: var(--space-lg); }

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-left: var(--border-hair) solid var(--line);
  margin-left: var(--space-sm);
}

.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: calc(var(--space-md) * -1 + 1px);
  top: 0;
  width: var(--space-lg);
  height: var(--space-lg);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--teal-800);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}

.steps h3 { margin-bottom: var(--space-3xs); }
.steps p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Fit columns
   -------------------------------------------------------------------------- */

.fit { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }

@media (min-width: 48em) {
  .fit { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
}

.fit__col { border-top: 3px solid var(--line); padding-top: var(--space-md); }
.fit__col--yes { border-top-color: var(--teal); }
.fit__col--no { border-top-color: var(--ink); }

.fit__list { list-style: none; padding: 0; margin: var(--space-sm) 0 0; }
.fit__list li { padding-left: var(--space-md); position: relative; margin-bottom: var(--space-sm); }
.fit__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 2px;
  background: var(--muted);
}

/* --------------------------------------------------------------------------
   Blog teasers
   -------------------------------------------------------------------------- */

/* Media is full-bleed inside the padded card, so pull it out to the edges.
   Cards without a featured image keep the same top padding and the row still
   aligns, because the grid stretches all cards to equal height. */
.teaser__media {
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: var(--surface-sunken);
}

.teaser__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.teaser .card__title a { color: inherit; text-decoration: none; }
.teaser .card__title a:hover { color: var(--teal-800); }
.teaser__excerpt { font-size: var(--text-sm); }
.teaser__meta { font-size: var(--text-xs); color: var(--muted); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: var(--border-hair) solid var(--line);
  padding: var(--space-2xl) var(--space-md) var(--space-lg);
  background: var(--surface-sunken);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-lg);
  max-width: 76rem;
  margin: 0 auto;
}

@media (min-width: 40em) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .site-footer__inner { grid-template-columns: repeat(4, 1fr); } }

.footer-col__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
  margin: 0 0 var(--space-xs);
}

.footer-col__list { list-style: none; padding: 0; margin: 0; }
.footer-col__list li { margin-bottom: var(--space-2xs); }

.footer-col__list a {
  font-size: var(--text-sm);
  color: var(--body);
  text-decoration: none;
}

.footer-col__list a:hover { color: var(--teal-800); text-decoration: underline; }

.site-footer__legal {
  max-width: 76rem;
  margin: var(--space-xl) auto 0;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Reveal — 12px rise and fade, 400ms, once
   Only applies once JS is confirmed present, so no-JS readers see everything.
   -------------------------------------------------------------------------- */

.has-js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}

.has-js .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Staggering children by a token amount, capped so nothing waits long */
.has-js .reveal--stagger > * { transition-delay: 0ms; }
.has-js .reveal--stagger > *:nth-child(2) { transition-delay: 60ms; }
.has-js .reveal--stagger > *:nth-child(3) { transition-delay: 120ms; }
.has-js .reveal--stagger > *:nth-child(4) { transition-delay: 180ms; }

/* --------------------------------------------------------------------------
   Logo strip — not built yet, kept here for when it is
   One list in the HTML. The clone is generated from it, never duplicated in
   source. Mark the clone aria-hidden in JS when you add it, or leave the strip
   static and let it wrap, which is honestly the better option for six logos.
   -------------------------------------------------------------------------- */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

.logo-strip img {
  max-height: 2rem;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Reduced motion
   Section 13 of tokens.css already zeroes durations globally. These two rules
   make sure the reveal and the compacting header land in their final state
   rather than their start state.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; }
  .wordmark__role { opacity: 1; visibility: visible; }
}

/* Scope line under any compliance content. Quiet, but not hidden — it is the
   sentence that stops a rules table reading as an offer to handle the rules. */
.scope-line {
  max-width: var(--measure);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--line-strong);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  color: var(--body);
}