/* =========================================
   FOOTER — footer.css
   ========================================= */

.site-footer {
  background:   #0a0a0a;
  color:        rgba(255,255,255,0.85);
  padding:      72px 48px 0;
}

/* ── TOP ─────────────────────────────────── */

.footer-top {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1.6fr;
  gap:                   48px;
  padding-bottom:        64px;
  border-bottom:         1px solid rgba(255,255,255,0.08);
}

/* ── MIDDLE WRAPPER (nav + expertise) ───── */

.footer-middle {
  display:               contents; /* transparent on desktop */
}

/* ── BRAND ───────────────────────────────── */

.footer-logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 20px;
}

.footer-logo__mark {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  background:      rgba(255,255,255,0.10);
  border-radius:   6px;
  font-size:       13px;
  font-weight:     700;
  letter-spacing:  0.02em;
  color:           #ffffff;
  flex-shrink:     0;
}

.footer-logo__text {
  font-size:      15px;
  font-weight:    600;
  letter-spacing: 0.02em;
  color:          #ffffff;
}

.footer-tagline {
  font-size:   14px;
  line-height: 1.65;
  color:       rgba(255,255,255,0.50);
  margin-bottom: 28px;
}

.footer-social {
  display: flex;
  gap:     12px;
}

.footer-social__link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.07);
  border:          1px solid rgba(255,255,255,0.10);
  color:           rgba(255,255,255,0.65);
  transition:
    background   var(--t-fast) ease,
    color        var(--t-fast) ease,
    border-color var(--t-fast) ease,
    transform    var(--t-fast) ease;
}

.footer-social__link:hover {
  background:   rgba(26,70,201,0.30);
  border-color: rgba(26,70,201,0.50);
  color:        #ffffff;
  transform:    translateY(-2px);
}

/* ── FOOTER NAV ──────────────────────────── */

.footer-nav {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.footer-nav__heading {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.35);
  margin-bottom:  16px;
}

.footer-nav__link {
  font-size:  14px;
  color:      rgba(255,255,255,0.55);
  padding:    5px 0;
  line-height: 1.4;
  transition:
    color     var(--t-fast) ease,
    transform var(--t-fast) ease;
  display:    inline-block;
}

.footer-nav__link:hover {
  color:     rgba(255,255,255,0.95);
  transform: translateX(4px);
}

/* ── EXPERTISE ───────────────────────────── */

.footer-expertise {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.footer-expertise__item {
  font-size:  13px;
  color:      rgba(255,255,255,0.45);
  padding:    4px 0;
  line-height: 1.5;
  transition: color var(--t-fast) ease;
}

.footer-expertise__item:hover {
  color: rgba(255,255,255,0.85);
}

/* ── CTA BLOCK ───────────────────────────── */

.footer-cta {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.footer-cta__text {
  font-size:   14px;
  line-height: 1.65;
  color:       rgba(255,255,255,0.50);
}

.footer-cta__btn {
  display:         inline-flex;
  align-items:     center;
  padding:         13px 22px;
  background:      var(--blue);
  color:           #ffffff;
  border-radius:   var(--radius-pill);
  font-size:       13px;
  font-weight:     600;
  letter-spacing:  0.04em;
  width:           fit-content;
  transition:
    background var(--t-fast) ease,
    transform  var(--t-fast) ease;
}

.footer-cta__btn:hover {
  background: #1339a8;
  transform:  translateY(-2px);
}

.footer-cta__location {
  font-size: 13px;
  color:     rgba(255,255,255,0.35);
}

/* ── BOTTOM BAR ──────────────────────────── */

.footer-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 0;
}

.footer-bottom__copy {
  font-size: 13px;
  color:     rgba(255,255,255,0.30);
}

.footer-bottom__stack {
  font-size:      12px;
  letter-spacing: 0.08em;
  color:          rgba(255,255,255,0.20);
}

/* ── RESPONSIVE — 1024px ─────────────────── */

@media (max-width: 1024px) {

  .site-footer { padding: 56px 40px 0; }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px 48px;
  }

  .footer-brand { grid-column: 1 / -1; }

}

/* ── RESPONSIVE — 768px — MOBILE ─────────── */

@media (max-width: 768px) {

  .site-footer { padding: 36px 20px 0; }

  /* ── TOP: brand row ── */
  .footer-top {
    grid-template-columns: 1fr;
    gap:            0;
    padding-bottom: 0;
  }

  .footer-brand {
    grid-column:   1 / -1;
    display:       grid;
    grid-template-columns: 1fr auto;
    align-items:   center;
    padding-bottom: 20px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .footer-brand > .footer-tagline { display: none; }

  /* compact logo */
  .footer-logo { margin-bottom: 0; }

  .footer-logo__mark {
    width: 28px; height: 28px; font-size: 10px; border-radius: 5px;
  }

  .footer-logo__text { font-size: 13px; }

  /* social right-aligned in brand row */
  .footer-social {
    gap:         6px;
    grid-column: 2;
    grid-row:    1;
  }

  .footer-social__link {
    width: 30px; height: 30px;
  }

  .footer-social__link svg { width: 14px; height: 14px; }

  /* ── MIDDLE: 2-col nav + expertise ── */
  .footer-nav,
  .footer-expertise {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  /* put nav and expertise side by side */
  .footer-nav { border-bottom: none; }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* override — make nav+expertise a 2-col row */
  .footer-nav + .footer-expertise {
    /* handled by wrapper below */
  }

  /* 2-col nav + expertise */
  .footer-middle {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0 24px;
    padding:               20px 0;
    border-bottom:         1px solid rgba(255,255,255,0.07);
  }

  .footer-nav__heading {
    font-size: 9px; letter-spacing: 0.18em; margin-bottom: 10px;
  }

  .footer-nav__link {
    font-size: 13px; padding: 3px 0; display: block;
  }

  .footer-nav__link:hover { transform: translateX(2px); }

  .footer-expertise__item {
    font-size: 12px; padding: 2px 0; display: block;
  }

  /* ── BOTTOM: CTA compact ── */
  .footer-cta {
    padding:       16px 0 0;
    gap:           12px;
    border-top:    1px solid rgba(255,255,255,0.07);
    flex-direction: row;
    align-items:   center;
    flex-wrap:     wrap;
  }

  .footer-cta > .footer-nav__heading { display: none; }

  .footer-cta__text {
    font-size: 12px;
    flex:      1;
    min-width: 180px;
    margin:    0;
  }

  .footer-cta__btn {
    padding:      10px 18px;
    font-size:    12px;
    white-space:  nowrap;
    flex-shrink:  0;
  }

  .footer-cta__location { display: none; }

  /* bottom bar */
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items:    center;
    gap:            0;
    padding:        12px 0 16px;
    flex-wrap:      wrap;
  }

  .footer-bottom__copy,
  .footer-bottom__stack { font-size: 10px; }

}