/* ═══════════════════════════════════════════════════════════════════════
   ICCS GLOBAL LEGAL RECOVERY — PREMIUM LIGHT EDITION
   Warm Ivory · Deep Navy · Brushed Gold
═══════════════════════════════════════════════════════════════════════ */

:root {
  --ivory-50:  #fafaf8;
  --ivory-100: #f4f3ef;
  --ivory-200: #e8e7e2;
  --ivory-700: #5a5956;
  --ivory-950: #111110;
  --navy-900:  #0d1b2e;
  --navy-950:  #070d18;
  --gold:      #c9a96e;
  --gold-light:#ddc28a;
  --gold-dark: #a68850;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--ivory-50);
  color: var(--ivory-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ─── BACKGROUND GRID PATTERN ──────────────────────────────────────────── */
.abs-grid-pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(180,170,150,0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,170,150,0.7) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.18;
  pointer-events: none;
}

/* ─── HERO SLIDER ───────────────────────────────────────────────────────── */
.hero-section { min-height: 100svh; }

/* Hero headline — matches section heading natural Playfair Display */
.hero-headline {
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Watermark — fade in with the slide */
.hero-watermark {
  opacity: 0;
  transition: opacity 1.2s 0.4s ease;
}

.slide.active .hero-watermark {
  opacity: 1;
}

.slide {
  opacity: 0; pointer-events: none;
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide.active { opacity: 1; pointer-events: auto; }

.slide .slide-headline {
  transform: translateY(28px); opacity: 0;
  transition: opacity 0.65s 0.05s ease, transform 0.65s 0.05s ease;
}
.slide.active .slide-headline { opacity: 1; transform: translateY(0); }

.slide .slide-sub {
  transform: translateY(22px); opacity: 0;
  transition: opacity 0.65s 0.18s ease, transform 0.65s 0.18s ease;
}
.slide.active .slide-sub { opacity: 1; transform: translateY(0); }

.slide .slide-ctas {
  transform: translateY(18px); opacity: 0;
  transition: opacity 0.65s 0.30s ease, transform 0.65s 0.30s ease;
}
.slide.active .slide-ctas { opacity: 1; transform: translateY(0); }

.hero-dot {
  display: block; height: 2px; border-radius: 1px;
  border: none; padding: 0; cursor: pointer;
  transition: width 0.45s ease, background 0.45s ease;
}

/* ─── FORM ELEMENTS ─────────────────────────────────────────────────────── */
.form-label {
  display: block;
  color: #888884;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e0dfd9;
  color: var(--ivory-950);
  padding: 12px 16px; font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none; appearance: none; -webkit-appearance: none;
}
.form-input::placeholder { color: #b8b5ae; }
.form-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,110,0.12);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a96e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px; cursor: pointer;
}
.form-select option { background: #fff; color: #111110; }

/* ─── PAIN CARD — gold top sweep on hover ───────────────────────────────── */
.pain-card { position: relative; }
.pain-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width 0.45s ease;
}
.pain-card:hover::before { width: 100%; }

/* ─── COMPLIANCE CARD — gold bottom sweep ───────────────────────────────── */
.compliance-card { position: relative; }
.compliance-card::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width 0.45s ease;
}
.compliance-card:hover::after { width: 100%; }

/* ─── SCROLLBAR ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f4f3ef; }
::-webkit-scrollbar-thumb { background: #d4d2cc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ─── SELECTION ─────────────────────────────────────────────────────────── */
::selection { background: rgba(201,169,110,0.18); color: #111110; }

/* ─── FOCUS RING ────────────────────────────────────────────────────────── */
*:focus-visible { outline: 1.5px solid rgba(201,169,110,0.7); outline-offset: 2px; }

/* ─── SECTION DIVIDER ────────────────────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e0dfd9 20%, #e0dfd9 80%, transparent);
}

/* ─── ADMIN PANEL ────────────────────────────────────────────────────────── */
.admin-body {
  background: #f8f8f6; color: #111110;
  min-height: 100vh; font-family: 'Inter', sans-serif;
}
.admin-nav {
  background: #ffffff;
  border-bottom: 1px solid #e8e7e2;
  padding: 1rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.admin-nav h1 { font-size: 1.05rem; font-weight: 700; color: #111110; }
.admin-nav a  { color: var(--gold-dark); text-decoration: none; font-size: 0.875rem; }

.admin-container { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }

.card {
  background: #ffffff;
  border: 1px solid #e8e7e2;
  border-radius: 8px;
  padding: 1.5rem; margin-bottom: 1.5rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.card h2 {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #b8b5ae; margin-bottom: 1.2rem;
}

.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block; font-size: 0.78rem;
  color: #888884; margin-bottom: 0.35rem; font-weight: 500;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%; background: #fafaf8;
  border: 1px solid #e0dfd9; color: #111110;
  padding: 0.6rem 0.85rem; border-radius: 6px;
  font-size: 0.9rem; font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-color: var(--gold);
}
.form-group textarea { resize: vertical; min-height: 80px; }

.btn {
  padding: 0.55rem 1.2rem; border-radius: 6px;
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer; border: none;
  transition: opacity 0.2s; font-family: 'Inter', sans-serif;
}
.btn:hover     { opacity: 0.82; }
.btn-primary   { background: var(--navy-900); color: #fff; }
.btn-danger    { background: #b62324; color: #fff; }
.btn-sm        { padding: 0.32rem 0.75rem; font-size: 0.78rem; }
.btn-secondary { background: #f4f3ef; color: #111110; border: 1px solid #e0dfd9; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.7rem 0.75rem; font-size: 0.875rem; }
th { color: #b8b5ae; border-bottom: 1px solid #e8e7e2; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; }
tr + tr td { border-top: 1px solid #f0efe9; }

.badge     { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.72rem; font-weight: 600; }
.badge-on  { background: rgba(13,27,46,0.08); color: var(--navy-900); }
.badge-off { background: rgba(0,0,0,0.05); color: #888; }

.alert    { padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.875rem; margin-bottom: 1rem; }
.alert-success { background: rgba(13,27,46,0.05); color: var(--navy-900); border: 1px solid rgba(13,27,46,0.15); }
.alert-error   { background: rgba(180,35,35,0.06); color: #b62324; border: 1px solid rgba(180,35,35,0.2); }

/* ─── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-section { min-height: 100dvh; }
  .hero-section .slide-headline { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .hero-section .slide-sub { font-size: 1rem !important; }
}