@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a2233;
  background-color: #f7f9fc;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }

/* ══════════════════════════════════════════════════════
   CSS FALLBACKS — These ensure brand colours render even
   if the Tailwind Play CDN config has not yet processed.
═══════════════════════════════════════════════════════ */
.bg-ikrik-navy   { background-color: #0a2540 !important; }
.bg-ikrik-navy-l { background-color: #14365f !important; }
.bg-ikrik-gold   { background-color: #c9a55c !important; }
.bg-ikrik-green  { background-color: #047857 !important; }
.bg-ikrik-bg     { background-color: #f7f9fc !important; }
.text-ikrik-navy   { color: #0a2540 !important; }
.text-ikrik-gold   { color: #c9a55c !important; }
.text-ikrik-green  { color: #047857 !important; }
.text-ikrik-red    { color: #b42318 !important; }
.text-ikrik-body   { color: #1a2233 !important; }
.text-ikrik-muted  { color: #4b5568 !important; }
.border-ikrik-gold { border-color: #c9a55c !important; }
.hover\:bg-ikrik-navy-l:hover { background-color: #14365f !important; }
.hover\:text-ikrik-gold:hover { color: #c9a55c !important; }
.hover\:text-ikrik-navy:hover { color: #0a2540 !important; }
.focus\:border-ikrik-gold:focus { border-color: #c9a55c !important; }

/* Opacity variants used frequently */
.bg-ikrik-navy\/5  { background-color: rgba(10,37,64,.05) !important; }
.bg-ikrik-navy\/10 { background-color: rgba(10,37,64,.10) !important; }

/* ══════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════ */
.nav-shadow {
  box-shadow: 0 1px 4px rgba(10,37,64,.10), 0 1px 2px rgba(10,37,64,.06);
}

/* ══════════════════════════════════════════════════════
   MOBILE MENU
═══════════════════════════════════════════════════════ */
#mobile-menu {
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-menu.open { transform: translateX(0); }

/* ══════════════════════════════════════════════════════
   GRADIENT / BAND BACKGROUNDS
═══════════════════════════════════════════════════════ */
.hero-gradient  { background: linear-gradient(135deg, #0a2540 0%, #14365f 100%); }
.cta-gradient   { background: linear-gradient(135deg, #0a2540 0%, #14365f 100%); }
.stats-band     { background: #0a2540; }

/* ══════════════════════════════════════════════════════
   STATEMENT CARD
═══════════════════════════════════════════════════════ */
.statement-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(10,37,64,.22), 0 6px 20px rgba(10,37,64,.10), 0 0 0 1px rgba(255,255,255,.06);
}
.statement-card-header {
  background: linear-gradient(135deg, #0a2540 0%, #14365f 100%);
  border-radius: 14px 14px 0 0;
}

/* ══════════════════════════════════════════════════════
   CARDS & HOVER EFFECTS
═══════════════════════════════════════════════════════ */
.service-card { transition: box-shadow .2s ease, transform .2s ease; }
.service-card:hover { box-shadow: 0 10px 40px rgba(10,37,64,.12); transform: translateY(-3px); }
.team-card { transition: box-shadow .2s ease; }
.team-card:hover { box-shadow: 0 8px 32px rgba(10,37,64,.10); }

/* ══════════════════════════════════════════════════════
   TRUSTED LOGO STRIP
═══════════════════════════════════════════════════════ */
.logo-item { filter: grayscale(100%); opacity: .5; transition: opacity .2s ease, filter .2s ease; }
.logo-item:hover { opacity: .8; filter: grayscale(50%); }

/* ══════════════════════════════════════════════════════
   FAQ ACCORDION
═══════════════════════════════════════════════════════ */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease-out; }
.faq-answer.open { max-height: 600px; }
.faq-icon { transition: transform .28s ease; flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ══════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════ */
#toast {
  transform: translateY(120px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  pointer-events: none;
}
#toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* ══════════════════════════════════════════════════════
   FORM FIELDS
═══════════════════════════════════════════════════════ */
.field {
  display: block;
  width: 100%;
  padding: .625rem .875rem;
  font-size: .875rem;
  font-family: inherit;
  color: #1a2233;
  background: #fff;
  border: 1.5px solid #d1d9e6;
  border-radius: .5rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus { border-color: #0a2540; box-shadow: 0 0 0 3px rgba(10,37,64,.08); }
.field.error { border-color: #b42318; }
.field::placeholder { color: #9aa5b8; }

/* ══════════════════════════════════════════════════════
   HOW-IT-WORKS STEP LINE
═══════════════════════════════════════════════════════ */
.step-line {
  position: absolute;
  top: 32px;
  height: 2px;
  background: linear-gradient(to right, rgba(201,165,92,.2), rgba(201,165,92,.6), rgba(201,165,92,.2));
  left: calc(12.5% + 32px);
  right: calc(12.5% + 32px);
}

/* ══════════════════════════════════════════════════════
   PHOTO PLACEHOLDER
═══════════════════════════════════════════════════════ */
.photo-placeholder { background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%); }

/* ══════════════════════════════════════════════════════
   SCROLL OFFSET FOR ANCHOR LINKS
═══════════════════════════════════════════════════════ */
html { scroll-padding-top: 72px; }

/* ══════════════════════════════════════════════════════
   DARK-SECTION READABILITY FIXES
   These override low-opacity utility classes that fail
   WCAG contrast requirements on dark backgrounds.
═══════════════════════════════════════════════════════ */

/* Footer body text — was /40, /30 (too faint) */
footer .text-white\/30 { color: rgba(255,255,255,.60) !important; }
footer .text-white\/40 { color: rgba(255,255,255,.65) !important; }
footer .text-white\/50 { color: rgba(255,255,255,.70) !important; }
footer .text-white\/60 { color: rgba(255,255,255,.80) !important; }

/* Hero subtitle & label text — bump opacity */
.hero-gradient .text-white\/40 { color: rgba(255,255,255,.65) !important; }
.hero-gradient .text-white\/55 { color: rgba(255,255,255,.80) !important; }
.hero-gradient .text-white\/65 { color: rgba(255,255,255,.82) !important; }
.hero-gradient .text-white\/70 { color: rgba(255,255,255,.88) !important; }

/* CTA band */
.cta-gradient .text-white\/65 { color: rgba(255,255,255,.82) !important; }

/* Stats band */
.stats-band .text-white\/50 { color: rgba(255,255,255,.75) !important; }

/* Footer input placeholder */
footer input::placeholder { color: rgba(255,255,255,.55) !important; }