/* ==========================================================
   Clear Immigration — global stylesheet
   Edit colors, fonts, and animations here.
   ========================================================== */

/* ---- Base ---- */
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  background: #F6E4CF;
}
a { color: #321C04; text-decoration: none; }
a:hover { color: #1F1003; }
input::placeholder { color: #A08B71; }
input:focus { outline: none; }

/* ---- Animations ---- */
@keyframes ci-acc-open {
  0% { opacity: 0; max-height: 0; }
  100% { opacity: 1; max-height: 320px; }
}

/* ---- Services: sticky image crossfade ---- */
.ci-svc-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 1000ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 700ms;
}
.ci-svc-img.ci-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s, 0s, 0s;
  will-change: opacity, transform;
}

/* ---- Services: caption swap ---- */
.ci-svc-cap { transition: opacity 350ms ease; }
.ci-svc-cap.ci-fading { opacity: 0; }

/* ---- Services: card reveal on scroll ---- */
.ci-card {
  opacity: 0;
  transform: translateY(40px);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms;
}
.ci-card.ci-revealed { opacity: 1; transform: none; }
.ci-card.ci-revealed:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(50, 28, 4, 0.14); }

/* ---- Services: active card indicator dot ---- */
.ci-card .ci-dot { width: 10px; height: 10px; border-radius: 50%; background: #EADBC4; transition: background 400ms; }
.ci-card.ci-current .ci-dot { background: #321C04; }

/* ==========================================================
   Responsive
   ========================================================== */

/* Tablet & below */
@media (max-width: 960px) {
  /* Navbar: hide inline links, keep brand + CTA */
  .ci-nav { gap: 20px !important; padding: 8px 8px 8px 22px !important; }
  .ci-nav nav { display: none !important; }

  /* Services: stack image above cards; image panel no longer sticky */
  .ci-svc-grid { grid-template-columns: 1fr !important; }
  .ci-svc-sticky {
    position: relative !important;
    top: 0 !important;
    height: 46vh !important;
    min-height: 320px !important;
  }
}

/* Phones */
@media (max-width: 600px) {
  .ci-nav { gap: 12px !important; }
  .ci-nav > span { font-size: 15px !important; }

  /* Hero CTA bar wraps instead of overflowing */
  .ci-hero-bar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 14px 16px !important;
    gap: 12px !important;
    max-width: calc(100vw - 48px);
  }
  .ci-hero-line { white-space: normal !important; text-align: center; }

  /* Hero trust row wraps */
  .ci-hero-trust { flex-wrap: wrap !important; justify-content: center !important; gap: 10px 14px !important; }

  /* Cards & finder tiles: tighter padding */
  .ci-card { padding: 26px 24px !important; }
}