/* ═══════════════════════════════════════════════════════════════════
   KD Digital — Design System v1.0
   Implements 11 audit findings:
     - Inter for headings (Playfair only on motto)
     - Tighter color palette (8 roles)
     - Section transitions (dividers, gradient fades)
     - Trophy stat cards
     - Refined buttons
     - Subtle motion / scroll reveals
     - Mobile typography fixes
     - Press bar polish
     - Reduced H1 (48px desktop, 32px mobile)
     - Spacing rhythm tokens
     - CSS-only Geo-Grid signature viz
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────────── */
:root {
  /* Color roles (NOT ad-hoc colors — each color has ONE job) */
  --kd-red:        #f03c3c;        /* PRIMARY CTA only */
  --kd-red-hover:  #d92e2e;
  --kd-red-soft:   rgba(240, 60, 60, 0.08);
  --kd-gold:       #f0b41e;        /* CREDENTIALS / awards / accents only */
  --kd-gold-soft:  rgba(240, 180, 30, 0.12);
  --kd-navy:       #2d1e69;        /* PREMIUM section bg */
  --kd-navy-deep:  #1a103e;
  --kd-text:       #0f172a;        /* Primary headlines */
  --kd-text-body:  #334155;        /* Body copy */
  --kd-text-mute:  #64748b;        /* Meta/tertiary */
  --kd-bg:         #ffffff;        /* Primary section bg */
  --kd-bg-soft:    #fafaf7;        /* Subtle alternate section bg */
  --kd-border:     rgba(15, 23, 42, 0.08);
  --kd-border-strong: rgba(15, 23, 42, 0.16);
  --kd-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04);
  --kd-shadow-md:  0 6px 16px -4px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --kd-shadow-lg:  0 20px 40px -12px rgba(15, 23, 42, 0.15), 0 8px 16px -4px rgba(15, 23, 42, 0.08);

  /* Type scale (modular, mobile-first) */
  --kd-font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --kd-font-display: 'Playfair Display', 'Georgia', serif;  /* MOTTO ONLY */
  --kd-fs-h1:    clamp(28px, 4.4vw, 48px);
  --kd-fs-h2:    clamp(22px, 2.6vw, 32px);
  --kd-fs-h3:    clamp(18px, 1.5vw, 22px);
  --kd-fs-body:  17px;
  --kd-fs-small: 14px;
  --kd-fs-eyebrow: 12px;
  --kd-lh-tight: 1.18;
  --kd-lh-snug:  1.35;
  --kd-lh-body:  1.65;

  /* Spacing scale (4px base) */
  --kd-sp-1:  4px;
  --kd-sp-2:  8px;
  --kd-sp-3:  12px;
  --kd-sp-4:  16px;
  --kd-sp-5:  20px;
  --kd-sp-6:  24px;
  --kd-sp-8:  32px;
  --kd-sp-10: 40px;
  --kd-sp-12: 48px;
  --kd-sp-16: 64px;
  --kd-sp-20: 80px;
  --kd-sp-24: 96px;

  /* Radii */
  --kd-r-sm:  6px;
  --kd-r-md:  10px;
  --kd-r-lg:  16px;
  --kd-r-xl:  24px;
  --kd-r-pill: 9999px;

  /* Motion */
  --kd-ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --kd-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --kd-dur-fast: 150ms;
  --kd-dur-base: 240ms;
  --kd-dur-slow: 400ms;
}

/* ── Typography Reset ─────────────────────────────────────────────── */
.kd-system body, body.kd-system { font-family: var(--kd-font-sans); }
.kd-typo h1, .kd-typo h2, .kd-typo h3, .kd-typo h4, .kd-typo h5, .kd-typo h6 {
  font-family: var(--kd-font-sans) !important;  /* Override site CSS that had Playfair */
  letter-spacing: -0.01em !important;
}
/* Reserve Playfair for motto blockquote only */
.hero-motto, .kd-motto, blockquote.hero-motto {
  font-family: var(--kd-font-display) !important;
  font-style: italic !important;
}
.kd-typo h1 {
  font-size: var(--kd-fs-h1) !important;
  font-weight: 800 !important;
  line-height: var(--kd-lh-tight) !important;
  color: var(--kd-text) !important;
  margin: 0 0 var(--kd-sp-4) !important;
}
.kd-typo h2 {
  font-size: var(--kd-fs-h2) !important;
  font-weight: 700 !important;
  line-height: var(--kd-lh-snug) !important;
  color: var(--kd-text) !important;
}
.kd-typo h3 {
  font-size: var(--kd-fs-h3) !important;
  font-weight: 600 !important;
  line-height: var(--kd-lh-snug) !important;
}

/* Headings on dark backgrounds */
.section-navy h1, .section-navy h2, .section-navy h3,
.cs-hero h1, .cs-hero h2, .cs-hero h3,
.hero h1, .hero h2, .hero h3 {
  color: #ffffff !important;
}

/* Mobile-specific H1 line-height fix (audit Issue 1) */
@media (max-width: 700px) {
  .kd-typo h1 { line-height: 1.18 !important; }
  .kd-typo h2 { line-height: 1.25 !important; }
}

/* ── Buttons (2 variants only) ─────────────────────────────────── */
.kd-btn {
  display: inline-flex; align-items: center; gap: var(--kd-sp-2);
  padding: 14px 26px; font-family: var(--kd-font-sans);
  font-size: 15px; font-weight: 700; line-height: 1;
  border-radius: var(--kd-r-pill); text-decoration: none;
  cursor: pointer; min-height: 48px;
  transition: transform var(--kd-dur-fast) var(--kd-ease),
              box-shadow var(--kd-dur-fast) var(--kd-ease),
              background var(--kd-dur-fast) var(--kd-ease);
  border: 0;
}
.kd-btn-primary {
  background: var(--kd-red); color: #ffffff;
  box-shadow: 0 4px 12px -2px rgba(240, 60, 60, 0.4);
}
.kd-btn-primary:hover {
  background: var(--kd-red-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(240, 60, 60, 0.5);
}
.kd-btn-secondary {
  background: transparent; color: var(--kd-text);
  border: 1px solid var(--kd-border-strong);
}
.kd-btn-secondary:hover {
  background: rgba(15, 23, 42, 0.04);
  transform: translateY(-1px);
}
.section-navy .kd-btn-secondary, .hero .kd-btn-secondary, .cs-hero .kd-btn-secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
.section-navy .kd-btn-secondary:hover, .hero .kd-btn-secondary:hover, .cs-hero .kd-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Apply consistent button styling to existing .btn-red and .btn-outline */
.btn-red, .btn.btn-red {
  background: var(--kd-red) !important;
  color: #ffffff !important;
  border: 0 !important;
  min-height: 48px !important;
  padding: 14px 26px !important;
  border-radius: var(--kd-r-pill) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px -2px rgba(240, 60, 60, 0.4) !important;
  transition: transform var(--kd-dur-fast) var(--kd-ease), box-shadow var(--kd-dur-fast) var(--kd-ease), background var(--kd-dur-fast) var(--kd-ease) !important;
}
.btn-red:hover {
  background: var(--kd-red-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px -4px rgba(240, 60, 60, 0.5) !important;
}
.btn-outline, .btn.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  min-height: 48px !important;
  padding: 14px 26px !important;
  font-weight: 700 !important;
  border-radius: var(--kd-r-pill) !important;
  transition: transform var(--kd-dur-fast) var(--kd-ease), border-color var(--kd-dur-fast) var(--kd-ease), background var(--kd-dur-fast) var(--kd-ease) !important;
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-1px) !important;
}

/* ── Section Transitions (audit Issue 4) ────────────────────────── */
/* Add a subtle gold dot pattern between section transitions */
.kd-section-divider {
  display: flex; align-items: center; justify-content: center;
  padding: var(--kd-sp-12) 0; gap: 8px;
  background: var(--kd-bg);
}
.kd-section-divider span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--kd-gold);
  opacity: 0.4;
}
.kd-section-divider span:nth-child(2) { opacity: 0.7; }
.kd-section-divider span:nth-child(3) { opacity: 1; }
.kd-section-divider span:nth-child(4) { opacity: 0.7; }
.kd-section-divider span:nth-child(5) { opacity: 0.4; }

/* Soft top-edge fade for transitions between alternating sections */
.section-light + .section, .section + .section-light,
.section + .section-navy, .section-navy + .section,
.section-light + .section-navy, .section-navy + .section-light {
  position: relative;
}

/* ── Hero Stats (audit Issue 8) — Trophy cards ──────────────────── */
.hero-stats { gap: var(--kd-sp-3) !important; }
.hero-stat {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--kd-r-md) !important;
  padding: var(--kd-sp-4) var(--kd-sp-3) !important;
  position: relative;
  transition: transform var(--kd-dur-base) var(--kd-ease), border-color var(--kd-dur-base) var(--kd-ease) !important;
}
.hero-stat::before {
  content: ""; position: absolute; top: 0; left: var(--kd-sp-3); right: var(--kd-sp-3);
  height: 2px; background: linear-gradient(90deg, var(--kd-gold), transparent);
  border-radius: 2px; opacity: 0.6;
}
.hero-stat:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(240, 180, 30, 0.4) !important;
}
.hero-stat-num {
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
.hero-stat-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

/* ── Press Bar Polish (audit Issue 9) ───────────────────────────── */
.press-bar {
  padding: var(--kd-sp-10) 0 !important;
  background: var(--kd-bg-soft) !important;
  border-top: 1px solid var(--kd-border) !important;
  border-bottom: 1px solid var(--kd-border) !important;
}
.press-bar::before {
  content: "AS FEATURED IN";
  display: block; text-align: center;
  font-size: 11px; font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--kd-text-mute);
  margin-bottom: var(--kd-sp-5);
}

/* ── Award Pill ─────────────────────────────────────────────────── */
.award-pill {
  background: linear-gradient(135deg, rgba(240, 180, 30, 0.22), rgba(240, 180, 30, 0.10)) !important;
  border: 1px solid rgba(240, 180, 30, 0.45) !important;
  color: #fcd873 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 7px 14px !important;
  border-radius: var(--kd-r-pill) !important;
  text-transform: uppercase !important;
}

/* ── Last-updated stamp ─────────────────────────────────────────── */
.last-updated-stamp {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--kd-text-mute) !important;
}
.last-updated-stamp time {
  color: var(--kd-text) !important;
  font-weight: 800 !important;
}
.section-navy .last-updated-stamp, .hero .last-updated-stamp, .cs-hero .last-updated-stamp {
  color: rgba(255, 255, 255, 0.7) !important;
}
.section-navy .last-updated-stamp time, .hero .last-updated-stamp time, .cs-hero .last-updated-stamp time {
  color: #ffffff !important;
}
.last-updated-stamp span:first-child {
  color: var(--kd-gold) !important;
}

/* ── Hero portrait card ─────────────────────────────────────────── */
.portrait-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--kd-r-xl) !important;
  padding: var(--kd-sp-8) var(--kd-sp-6) !important;
  box-shadow: var(--kd-shadow-lg) !important;
  position: relative;
  overflow: hidden;
}
.portrait-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--kd-red), var(--kd-gold));
}
.portrait-img-wrap { position: relative; }
.portrait-initials {
  background: linear-gradient(135deg, var(--kd-navy) 0%, var(--kd-navy-deep) 100%) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid rgba(240, 180, 30, 0.3) !important;
  font-size: 78px !important;
  letter-spacing: -2px !important;
  font-weight: 900 !important;
}
.portrait-badge-strip {
  font-size: 10.5px !important;
  letter-spacing: 0.5px !important;
  font-weight: 700 !important;
}
.portrait-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* ── References block ───────────────────────────────────────────── */
.kd-refs-clean {
  margin-top: var(--kd-sp-12) !important;
  padding-top: var(--kd-sp-8) !important;
  border-top: 1px solid var(--kd-border) !important;
}
.kd-refs-clean h2 {
  font-family: var(--kd-font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--kd-gold) !important;
  font-weight: 800 !important;
}

/* ── Footer contact row ─────────────────────────────────────────── */
.kd-contact-row {
  background: rgba(255, 255, 255, 0.03) !important;
  font-family: var(--kd-font-sans) !important;
}

/* ── Geo-Grid Signature Visualization (NEW) ───────────────────── */
.kd-geo-grid {
  display: inline-grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--kd-border);
  border-radius: var(--kd-r-md);
  width: fit-content;
}
.kd-geo-grid-cell {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.12);
}
.kd-geo-grid-cell.green-1 { background: #15803d; }   /* dark green = #1 */
.kd-geo-grid-cell.green-2 { background: #22c55e; }   /* mid green = top 3 */
.kd-geo-grid-cell.green-3 { background: #86efac; }   /* light green */
.kd-geo-grid-cell.yellow  { background: #fbbf24; }   /* page 1 */
.kd-geo-grid-cell.red     { background: #ef4444; }   /* invisible */
.kd-geo-grid-cell.gray    { background: #cbd5e1; }
.section-navy .kd-geo-grid {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.section-navy .kd-geo-grid-cell.gray { background: rgba(255, 255, 255, 0.18); }
.kd-geo-grid-caption {
  display: flex; gap: var(--kd-sp-3); flex-wrap: wrap;
  margin-top: var(--kd-sp-3);
  font-size: 11px; color: var(--kd-text-mute);
}
.kd-geo-grid-caption-item {
  display: inline-flex; align-items: center; gap: 4px;
}
.kd-geo-grid-caption-dot {
  width: 8px; height: 8px; border-radius: 2px;
}

/* ── Section transitions (gradient fade for navy → light) ──────── */
.section-navy {
  position: relative;
}
.section-navy::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.04) 100%);
  pointer-events: none;
}

/* ── Subtle reveal motion (audit Issue 12) ─────────────────────── */
.kd-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--kd-dur-slow) var(--kd-ease-out),
              transform var(--kd-dur-slow) var(--kd-ease-out);
  will-change: opacity, transform;
}
.kd-reveal.is-visible {
  opacity: 1; transform: translateY(0);
}
.kd-reveal-delay-1 { transition-delay: 80ms; }
.kd-reveal-delay-2 { transition-delay: 160ms; }
.kd-reveal-delay-3 { transition-delay: 240ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kd-reveal, .kd-reveal.is-visible {
    opacity: 1; transform: none; transition: none;
  }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

/* ── Hero motto (Playfair Display, italic) ────────────────────── */
.hero-motto, blockquote.hero-motto {
  font-family: var(--kd-font-display) !important;
  font-style: italic !important;
  font-size: clamp(15px, 1.4vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  border-left: 4px solid var(--kd-gold) !important;
  padding: var(--kd-sp-3) var(--kd-sp-5) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 0 var(--kd-r-md) var(--kd-r-md) 0 !important;
  margin-bottom: var(--kd-sp-5) !important;
}

/* ── Mobile Tweaks (audit Issue 10) ───────────────────────────── */
@media (max-width: 700px) {
  .site-header { min-height: 64px !important; }
  .hero { padding: 28px 0 var(--kd-sp-10) !important; }
  .hero .award-pill { font-size: 10.5px !important; padding: 6px 12px !important; margin-bottom: var(--kd-sp-4) !important; }
  .hero-stat-num { font-size: 18px !important; }
  .hero-stat-label { font-size: 9.5px !important; }
  .hero-motto { font-size: 14.5px !important; padding: 10px 14px !important; }
  .press-bar { padding: var(--kd-sp-6) 0 !important; }
  .press-bar::before { font-size: 10px !important; margin-bottom: var(--kd-sp-3) !important; }
}

/* ── A11y focus ring (consistent across all interactive elements) ─ */
.kd-btn:focus-visible, .btn:focus-visible, .btn-red:focus-visible, .btn-outline:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--kd-gold) !important;
  outline-offset: 2px !important;
}


/* ── Founder hero portrait photo ─────────────────────────── */
.portrait-photo-wrap {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: var(--kd-r-lg) !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #1a103e 0%, #2d1e69 100%);
  box-shadow: var(--kd-shadow-lg);
  position: relative;
  /* Override .portrait-initials' giant-text styles entirely */
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.portrait-photo-wrap picture, .portrait-photo-wrap img {
  display: block;
  width: 100%;
  height: 100%;
}
.portrait-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.portrait-photo-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kd-red), var(--kd-gold));
  z-index: 2;
  pointer-events: none;
}


/* ── Press logos (SVG wordmarks) ─────────────────────────── */
.press-bar .press-logos {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px 36px !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.press-bar .press-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: var(--kd-text-mute, #64748b) !important;
  opacity: 0.7 !important;
  transition: opacity var(--kd-dur-base, 240ms) var(--kd-ease, ease),
              color var(--kd-dur-base, 240ms) var(--kd-ease, ease),
              transform var(--kd-dur-fast, 150ms) var(--kd-ease, ease) !important;
  height: 32px !important;
  flex: 0 0 auto !important;
}
.press-bar .press-logo-link:hover,
.press-bar .press-logo-link:focus-visible {
  opacity: 1 !important;
  color: var(--kd-text, #0f172a) !important;
  transform: translateY(-1px) !important;
}
.press-bar .press-logo-link img {
  height: 32px !important;
  width: auto !important;
  max-width: 160px !important;
  display: block !important;
}
@media (min-width: 768px) {
  .press-bar .press-logo-link {
    height: 36px !important;
  }
  .press-bar .press-logo-link img {
    height: 36px !important;
  }
}
@media (max-width: 700px) {
  .press-bar .press-logos {
    gap: 18px 24px !important;
  }
  .press-bar .press-logo-link {
    height: 26px !important;
  }
  .press-bar .press-logo-link img {
    height: 26px !important;
    max-width: 120px !important;
  }
}
/* Dark navy background sections need lighter logo color */
.section-navy .press-bar .press-logo-link,
.hero .press-bar .press-logo-link,
.cs-hero .press-bar .press-logo-link {
  color: rgba(255, 255, 255, 0.7) !important;
}
.section-navy .press-bar .press-logo-link:hover,
.hero .press-bar .press-logo-link:hover,
.cs-hero .press-bar .press-logo-link:hover {
  color: #ffffff !important;
}
/* Hide the old "press-label" if still present, since CSS ::before adds new label */
.press-bar .press-label {
  display: none !important;
}


/* ── WASME ceremony components ───────────────────────────── */
.kd-wasme-ceremony {
  background: var(--kd-bg-soft, #fafaf7);
  padding: var(--kd-sp-20, 80px) 0;
  border-top: 1px solid var(--kd-border, rgba(15, 23, 42, 0.08));
  border-bottom: 1px solid var(--kd-border, rgba(15, 23, 42, 0.08));
}
.kd-wasme-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kd-sp-10, 40px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 880px) {
  .kd-wasme-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--kd-sp-12, 48px);
  }
}
.kd-wasme-media {
  margin: 0;
  border-radius: var(--kd-r-lg, 16px);
  overflow: hidden;
  box-shadow: var(--kd-shadow-lg, 0 20px 40px -12px rgba(15, 23, 42, 0.15));
  position: relative;
}
.kd-wasme-media::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kd-red, #f03c3c), var(--kd-gold, #f0b41e));
  z-index: 2;
}
.kd-wasme-media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.kd-wasme-media figcaption {
  font-size: 12.5px;
  color: var(--kd-text-mute, #64748b);
  margin-top: var(--kd-sp-3, 12px);
  padding: 0 var(--kd-sp-2, 8px);
  line-height: 1.55;
}
.kd-wasme-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--kd-gold, #f0b41e);
  margin-bottom: var(--kd-sp-3, 12px);
}
.kd-wasme-text h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  color: var(--kd-text, #0f172a);
  line-height: 1.25;
  margin: 0 0 var(--kd-sp-4, 16px);
  letter-spacing: -0.01em;
}
.kd-wasme-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--kd-text-body, #334155);
  margin: 0 0 var(--kd-sp-6, 24px);
}
.kd-wasme-facts {
  list-style: none;
  margin: 0 0 var(--kd-sp-6, 24px);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kd-sp-3, 12px);
  border-top: 1px solid var(--kd-border, rgba(15, 23, 42, 0.08));
  padding-top: var(--kd-sp-5, 20px);
}
@media (min-width: 600px) {
  .kd-wasme-facts {
    grid-template-columns: 1fr 1fr;
  }
}
.kd-wasme-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}
.kd-wasme-facts li span {
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--kd-text-mute, #64748b);
  font-weight: 700;
}
.kd-wasme-facts li strong {
  color: var(--kd-text, #0f172a);
  font-weight: 600;
}
.kd-wasme-link {
  display: inline-flex;
  align-items: center;
  gap: var(--kd-sp-2, 8px);
  color: var(--kd-red, #f03c3c);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: var(--kd-sp-3, 12px) 0;
  border-bottom: 2px solid rgba(240, 60, 60, 0.3);
  transition: border-color 150ms ease;
}
.kd-wasme-link:hover { border-bottom-color: var(--kd-red, #f03c3c); }

/* Homepage WASME proof callout */
.kd-wasme-proof {
  display: flex;
  align-items: center;
  gap: var(--kd-sp-3, 12px);
  padding: 8px 12px 8px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--kd-r-pill, 9999px);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  letter-spacing: 0.3px;
  transition: background 200ms ease, border-color 200ms ease, transform 150ms ease;
  margin-top: var(--kd-sp-3, 12px);
  width: fit-content;
}
.kd-wasme-proof:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(240, 180, 30, 0.4);
  transform: translateY(-1px);
}
.kd-wasme-proof img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(240, 180, 30, 0.5);
  display: block;
}
.kd-wasme-proof-label { font-weight: 700; }


/* ── Pillar icons ──────────────────────────────────────── */
.kd-pillar-icon {
  color: var(--kd-gold, #f0b41e);
  display: block;
  margin-bottom: var(--kd-sp-3, 12px);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), color 240ms ease;
  flex-shrink: 0;
}
.pillar:hover .kd-pillar-icon {
  transform: rotate(-6deg) scale(1.08);
  color: #ffd966;
}
/* Slight gradient stroke effect on the icon line — applied via CSS filter for glow */
.pillar .kd-pillar-icon {
  filter: drop-shadow(0 0 8px rgba(240, 180, 30, 0.18));
}
/* Tighten the pillar-num typography since the icon now provides the visual anchor */
.pillar .pillar-num {
  font-size: 11px !important;
  letter-spacing: 1.4px !important;
  color: var(--kd-text-mute, rgba(255, 255, 255, 0.55)) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  margin-bottom: var(--kd-sp-2, 8px) !important;
}
/* Pillar gets a subtle hover lift */
.pillar {
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.pillar:hover {
  transform: translateY(-2px);
}


/* ── Case study cards (with thumbnail) ─────────────────────── */
.cases-grid { display: grid; grid-template-columns: 1fr; gap: 28px !important; }
@media (min-width: 720px) {
  .cases-grid { grid-template-columns: repeat(2, 1fr); gap: 32px !important; }
}
@media (min-width: 1100px) {
  .cases-grid { grid-template-columns: repeat(3, 1fr); }
}
.kd-case-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--kd-border, rgba(15, 23, 42, 0.08)) !important;
  box-shadow: var(--kd-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 240ms ease, border-color 240ms ease !important;
  padding: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.kd-case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(240, 60, 60, 0.3) !important;
}
.kd-case-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.kd-case-card-media {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a103e;
}
.kd-case-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.kd-case-card:hover .kd-case-card-media img {
  transform: scale(1.03);
}
.kd-case-card-body {
  padding: 22px 24px 24px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.kd-case-card .kd-case-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--kd-red, #f03c3c) !important;
  background: rgba(240, 60, 60, 0.06) !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  align-self: flex-start;
}
.kd-case-card .kd-case-num {
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: var(--kd-text, #0f172a) !important;
  line-height: 1.05 !important;
  margin-top: 4px !important;
}
.kd-case-card .kd-case-duration {
  font-size: 13px !important;
  color: var(--kd-text-mute, #64748b) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}
.kd-case-card .kd-case-client {
  font-size: 14px;
  color: var(--kd-text-body, #334155);
  margin-top: 4px;
}
.kd-case-card .kd-case-client strong {
  color: var(--kd-text, #0f172a);
  font-weight: 700;
}
.kd-case-card .kd-case-client span {
  color: var(--kd-text-mute, #64748b);
}
.kd-case-card .kd-case-quote {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--kd-text-body, #334155) !important;
  margin: 8px 0 14px !important;
  flex-grow: 1;
}
.kd-case-card .kd-case-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--kd-red, #f03c3c);
  letter-spacing: 0.2px;
  margin-top: auto;
}
.kd-case-card:hover .kd-case-cta {
  text-decoration: underline;
}


/* ── Process step icons + connectors ───────────────────── */
.process-grid {
  position: relative;
}
.process-step {
  position: relative;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.process-step:hover {
  transform: translateY(-3px);
}
.kd-process-icon {
  color: var(--kd-gold, #f0b41e);
  display: block;
  margin: 0 auto var(--kd-sp-3, 12px);
  filter: drop-shadow(0 0 10px rgba(240, 180, 30, 0.22));
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.process-step:hover .kd-process-icon {
  transform: scale(1.12) rotate(4deg);
}
.kd-process-icon-iterate {
  /* The cycle icon spins subtly on hover to suggest the loop */
}
.process-step:hover .kd-process-icon-iterate {
  transform: rotate(180deg);
  transition-duration: 600ms;
}
/* Process number — smaller now that icon does the visual work */
.process-step .process-num {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 2px !important;
}
.process-step .process-label {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  margin-bottom: var(--kd-sp-2, 8px) !important;
}
.process-step .process-body {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Loop indicator */
.kd-process-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kd-sp-3, 12px);
  margin-top: var(--kd-sp-10, 40px);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.kd-process-loop::before, .kd-process-loop::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 60px;
  background: linear-gradient(90deg, transparent, rgba(240, 180, 30, 0.35), transparent);
}
.kd-process-loop svg {
  color: var(--kd-gold, #f0b41e);
}


/* ── Review cards ───────────────────────────────────────── */
.kd-review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kd-sp-5, 20px);
  margin-top: var(--kd-sp-12, 48px);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 760px) {
  .kd-review-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kd-sp-6, 24px);
  }
}
.kd-review-card {
  background: #ffffff !important;
  border: 1px solid var(--kd-border, rgba(15, 23, 42, 0.08)) !important;
  border-radius: var(--kd-r-lg, 16px) !important;
  padding: var(--kd-sp-6, 24px) var(--kd-sp-6, 24px) var(--kd-sp-5, 20px) !important;
  box-shadow: var(--kd-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
  display: flex;
  flex-direction: column;
  gap: var(--kd-sp-3, 12px);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 240ms ease, border-color 240ms ease;
  position: relative;
  overflow: hidden;
}
.kd-review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kd-shadow-md, 0 6px 16px -4px rgba(15, 23, 42, 0.08));
  border-color: rgba(240, 60, 60, 0.25);
}
.kd-review-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kd-red, #f03c3c), var(--kd-gold, #f0b41e));
  opacity: 0.7;
}

.kd-review-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 99px;
  align-self: flex-start;
}
.kd-review-platform--fiverr {
  background: rgba(29, 191, 115, 0.10);
  color: #1dbf73;
  border: 1px solid rgba(29, 191, 115, 0.3);
}
.kd-review-platform--google {
  background: rgba(66, 133, 244, 0.10);
  color: #4285f4;
  border: 1px solid rgba(66, 133, 244, 0.3);
}
.kd-review-platform--upwork {
  background: rgba(108, 191, 38, 0.10);
  color: #14a800;
  border: 1px solid rgba(108, 191, 38, 0.3);
}
.kd-review-platform--linkedin {
  background: rgba(10, 102, 194, 0.10);
  color: #0a66c2;
  border: 1px solid rgba(10, 102, 194, 0.3);
}

.kd-review-rating {
  display: flex;
  align-items: baseline;
  gap: var(--kd-sp-2, 8px);
}
.kd-review-stars {
  color: var(--kd-gold, #f0b41e);
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1;
}
.kd-review-rating-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--kd-text, #0f172a);
}
.kd-review-count {
  font-size: 12px;
  color: var(--kd-text-mute, #64748b);
  font-weight: 600;
}

.kd-review-quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--kd-text-body, #334155);
  margin: var(--kd-sp-3, 12px) 0 var(--kd-sp-4, 16px) !important;
  padding: 0 0 0 var(--kd-sp-4, 16px) !important;
  border-left: 3px solid rgba(240, 180, 30, 0.4) !important;
  font-style: normal !important;
  flex-grow: 1;
}
.kd-review-quote::before {
  content: '"';
  color: rgba(240, 180, 30, 0.5);
  font-size: 28px;
  line-height: 0;
  margin-right: 4px;
  vertical-align: -8px;
}
.kd-review-quote::after {
  content: '"';
  color: rgba(240, 180, 30, 0.5);
  font-size: 28px;
  line-height: 0;
  margin-left: 2px;
  vertical-align: -8px;
}

.kd-review-attr {
  font-size: 13px;
  color: var(--kd-text-mute, #64748b);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: baseline;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: var(--kd-sp-3, 12px);
  margin-top: auto;
}
.kd-review-attr strong {
  color: var(--kd-text, #0f172a);
  font-weight: 700;
}
.kd-review-attr span {
  color: var(--kd-text-mute, #64748b);
}

.kd-review-verify {
  font-size: 13px;
  font-weight: 700;
  color: var(--kd-red, #f03c3c);
  text-decoration: none;
  margin-top: var(--kd-sp-2, 8px);
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.kd-review-verify:hover {
  border-bottom-color: var(--kd-red, #f03c3c);
}


/* ── Social signals block + Sources fix ──────────────────────────── */
.kd-social {
  padding: var(--kd-sp-12, 48px) 0 var(--kd-sp-8, 32px) !important;
  background: rgba(15, 23, 42, 0.025) !important;
  border-top: 1px solid var(--kd-border, rgba(15, 23, 42, 0.08)) !important;
}
.kd-social .container {
  max-width: 1100px !important;
}
.kd-social-header {
  text-align: center;
  margin-bottom: var(--kd-sp-8, 32px);
}
.kd-social-eyebrow {
  font-family: var(--kd-font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--kd-gold, #f0b41e);
  font-weight: 800;
  margin: 0 0 8px 0;
}
.kd-social-header h2 {
  font-size: clamp(22px, 3vw, 28px) !important;
  font-weight: 800 !important;
  color: var(--kd-text, #0f172a) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 8px 0 !important;
}
.kd-social-header p {
  font-size: 14px;
  color: var(--kd-text-mute, #64748b);
  margin: 0;
}
.kd-social-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) {
  .kd-social-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .kd-social-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
.kd-social-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--kd-border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 20px 20px 16px;
  text-decoration: none !important;
  color: inherit !important;
  position: relative;
  overflow: hidden;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms ease,
              border-color 240ms ease;
}
.kd-social-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: currentColor;
  opacity: 0;
  transition: opacity 240ms ease;
}
.kd-social-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12);
}
.kd-social-card:hover::before { opacity: 1; }

.kd-social-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-social-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.kd-social-platform {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--kd-text, #0f172a);
}
.kd-social-handle {
  display: block;
  font-size: 12px;
  color: var(--kd-text-mute, #64748b);
  font-family: var(--kd-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  margin-top: 2px;
  word-break: break-all;
}
.kd-social-stat {
  display: block;
  font-size: 12.5px;
  color: var(--kd-text-body, #334155);
  margin-top: 6px;
  line-height: 1.45;
  font-weight: 500;
}
.kd-social-cta {
  font-size: 12px;
  font-weight: 700;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--kd-red, #f03c3c);
}
.kd-social-card:hover .kd-social-cta { color: var(--kd-text, #0f172a); }

/* Per-platform accent color (drives icon + ::before bar + hover) */
.kd-social-card--linkedin   { color: #0a66c2; }
.kd-social-card--linkedin   .kd-social-icon { color: #0a66c2; }
.kd-social-card--instagram  { color: #e1306c; }
.kd-social-card--instagram  .kd-social-icon { color: #e1306c; }
.kd-social-card--fiverr     { color: #1dbf73; }
.kd-social-card--fiverr     .kd-social-icon { color: #1dbf73; }
.kd-social-card--google     { color: #4285f4; }
.kd-social-card--linkedin:hover  { border-color: rgba(10, 102, 194, 0.4); }
.kd-social-card--instagram:hover { border-color: rgba(225, 48, 108, 0.4); }
.kd-social-card--fiverr:hover    { border-color: rgba(29, 191, 115, 0.4); }
.kd-social-card--google:hover    { border-color: rgba(66, 133, 244, 0.4); }

/* ── Sources & Further Reading: full-fix override ─────────────────── */
.kd-refs-clean {
  max-width: 1100px !important;
  margin: var(--kd-sp-12, 48px) auto var(--kd-sp-8, 32px) !important;
  padding: var(--kd-sp-8, 32px) 24px 0 !important;
  border-top: 1px solid var(--kd-border, rgba(15, 23, 42, 0.08)) !important;
}
.kd-refs-clean h2 {
  font-family: var(--kd-font-sans, "Inter", sans-serif) !important;
  font-size: 11px !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--kd-gold, #f0b41e) !important;
  font-weight: 800 !important;
  margin: 0 0 24px 0 !important;
}
.kd-refs-clean ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}
@media (min-width: 760px) {
  .kd-refs-clean ul {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px 32px !important;
  }
}
.kd-refs-clean li {
  position: relative !important;
  padding: 0 0 0 22px !important;
  margin: 0 !important;
  list-style: none !important;
}
.kd-refs-clean li::before {
  content: "↗" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: var(--kd-gold, #f0b41e) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.kd-refs-clean li a {
  display: inline !important;
  width: auto !important;
  border-bottom: none !important;
  color: var(--kd-red, #f03c3c) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  line-height: 1.45 !important;
  transition: color 150ms ease !important;
}
.kd-refs-clean li a:hover {
  color: var(--kd-text, #0f172a) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--kd-gold, #f0b41e) !important;
  text-underline-offset: 3px !important;
}
.kd-refs-clean li span {
  display: block !important;
  margin-top: 4px !important;
  color: var(--kd-text-mute, #64748b) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.kd-refs-note {
  max-width: 1100px !important;
  margin: 24px auto 0 !important;
  padding: 0 24px !important;
  font-size: 12px !important;
  color: var(--kd-text-mute, #64748b) !important;
  text-align: left !important;
}


/* ── Instagram feed section ──────────────────────────────────────── */
.kd-ig-feed {
  padding: var(--kd-sp-8, 32px) 0 var(--kd-sp-12, 48px) !important;
  background: rgba(15, 23, 42, 0.025) !important;
}
.kd-ig-feed .container { max-width: 1100px !important; }

.kd-ig-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--kd-sp-6, 24px);
  flex-wrap: wrap;
}
.kd-ig-pfp {
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) border-box;
}
.kd-ig-pfp img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.kd-ig-meta { flex: 1; min-width: 0; }
.kd-ig-handle {
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  color: var(--kd-text, #0f172a);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.kd-ig-handle:hover { color: #e1306c; }
.kd-ig-handle-verified {
  display: inline-block;
  margin-left: 6px;
  font-size: 14px;
  vertical-align: middle;
  color: #4285f4;
}
.kd-ig-stats {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--kd-text-mute, #64748b);
}
.kd-ig-stats strong {
  color: var(--kd-text, #0f172a);
  font-weight: 700;
  margin-right: 3px;
}
.kd-ig-bio {
  font-size: 12.5px;
  color: var(--kd-text-mute, #64748b);
  margin-top: 4px;
  line-height: 1.4;
}
.kd-ig-cta-wrap { margin-left: auto; }
.kd-ig-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff !important;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border-radius: 999px;
  text-decoration: none !important;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.kd-ig-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(220, 39, 67, 0.35);
}

.kd-ig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 560px) {
  .kd-ig-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (min-width: 980px) {
  .kd-ig-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
}

.kd-ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: #1a103e;
  text-decoration: none !important;
  color: inherit !important;
  border: 1px solid var(--kd-border, rgba(15, 23, 42, 0.08));
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 240ms ease;
}
.kd-ig-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(15, 23, 42, 0.18);
}
.kd-ig-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease, filter 240ms ease;
}
.kd-ig-tile:hover img {
  transform: scale(1.04);
  filter: brightness(0.85);
}
.kd-ig-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  background: linear-gradient(180deg,
              rgba(15, 23, 42, 0) 0%,
              rgba(15, 23, 42, 0) 55%,
              rgba(15, 23, 42, 0.85) 100%);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.kd-ig-tile:hover .kd-ig-tile-overlay { opacity: 1; }
.kd-ig-tile-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}
.kd-ig-tile-stats svg {
  width: 14px; height: 14px;
  vertical-align: -3px;
  margin-right: 3px;
}
.kd-ig-tile-caption {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kd-ig-tile-video-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kd-ig-footer {
  text-align: center;
  margin-top: var(--kd-sp-6, 24px);
}
.kd-ig-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--kd-red, #f03c3c);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.kd-ig-view-all:hover { border-bottom-color: var(--kd-red, #f03c3c); }