/* =====================================================================
   Om Enterprise — Client Logo Wall
   ---------------------------------------------------------------------
   Client-logo showcase inside #clients:
     · static logo grid (every logo always visible)
     · print-themed "Apply Now" CTA banner (CMYK registration dots)
   Additive layer — remove the <link> to fully revert.
   ===================================================================== */

.logo-wall { margin-top: 4.5rem; }

/* ---------- Sub-heading divider ---------- */
.lw-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
}
.lw-head span:not(.lw-head-line) {
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #3d4a5f;
}
.lw-head-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(55,131,240,0), rgba(55,131,240,.45) 50%, rgba(105,99,236,0));
}
.lw-head-line:first-child { transform: scaleX(-1); }

/* ---------- Logo grid ---------- */
.lw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1rem;
}

/* ---------- One-by-one entrance ----------
   Keyframe animation (NOT a transition) with fill-mode backwards:
   the from-frame hides each tile through its stagger delay, and once
   the animation ends control returns to the stylesheet, so the
   hover lift/scale transitions keep working (see redesign.css lesson
   on .reveal transition overrides). .lw-ready is set by JS — with no
   JS the grid simply renders static. Deliberately not gated on
   prefers-reduced-motion: site policy is identical animations
   everywhere. */
.lw-grid.lw-ready:not(.lw-in) .lw-tile { opacity: 0; }
.lw-grid.lw-in .lw-tile {
  animation: lw-pop .6s cubic-bezier(.22, 1.28, .36, 1) backwards;
  animation-delay: calc(var(--lw-i, 0) * 95ms);
}
.lw-grid.lw-in .lw-tile-img img,
.lw-grid.lw-in .lw-tile-apply > svg {
  animation: lw-settle .7s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--lw-i, 0) * 95ms + 90ms);
}
@keyframes lw-pop {
  from { opacity: 0; transform: translateY(30px) scale(.88); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes lw-settle {
  from { opacity: 0; transform: scale(1.18); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Logo tiles ---------- */
.lw-tile {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,251,255,.85));
  border: 1px solid rgba(224,229,237,.9);
  box-shadow: var(--shadow-sm);
  color: #51617c;
  transition: transform .35s var(--ease-premium, ease), color .3s ease,
              border-color .3s ease, box-shadow .35s ease;
}
.lw-tile:hover {
  transform: translateY(-4px);
  color: var(--primary);
  border-color: rgba(55,131,240,.45);
  box-shadow: 0 14px 30px -12px rgba(55,131,240,.35);
}
.lw-tile > svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  transition: transform .35s var(--ease-premium, ease);
}
.lw-tile:hover > svg { transform: rotate(-8deg) scale(1.08); }

.lw-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.lw-name em {
  font-style: normal;
  font-weight: 500;
  opacity: .72;
}

/* ---------- Real client-logo image tiles (clean white cards) ---------- */
.lw-tile-img {
  justify-content: center;
  height: 104px;
  padding: .9rem 1.2rem;
  background: #fff;
}
.lw-tile-img img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform .35s var(--ease-premium, ease);
}
.lw-tile-img:hover img { transform: scale(1.07); }

/* "Your logo here" apply tile */
.lw-tile-apply {
  justify-content: center;
  min-height: 104px;
  border: 1.5px dashed rgba(55,131,240,.55);
  background: linear-gradient(135deg, rgba(55,131,240,.07), rgba(105,99,236,.09));
  color: #2f63c4;
}
.lw-tile-apply .lw-name strong {
  background: var(--grad-h);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.lw-tile-apply:hover { border-style: solid; }

/* ---------- Apply-now CTA banner ---------- */
.lw-cta {
  position: relative;
  overflow: hidden;
  margin-top: 3.5rem;
  padding: 3rem 3.25rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 120% at 8% 0%,   rgba(55,131,240,.35), transparent 60%),
    radial-gradient(50% 110% at 95% 100%, rgba(105,99,236,.4), transparent 62%),
    linear-gradient(135deg, #14203a 0%, #1a2a4d 55%, #22315e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
  flex-wrap: wrap;
  box-shadow: 0 30px 70px -25px rgba(22,34,53,.5);
}
/* halftone dot texture — a nod to print */
.lw-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.6px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(115deg, transparent 40%, #000);
          mask-image: linear-gradient(115deg, transparent 40%, #000);
}
/* CMYK registration dots */
.lw-cta-dots {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  display: flex;
  gap: .45rem;
}
.lw-cta-dots span {
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,255,255,.15);
}
.lw-cta-dots span:nth-child(1) { background: #2fc4f0; }  /* C */
.lw-cta-dots span:nth-child(2) { background: #ef4fa6; }  /* M */
.lw-cta-dots span:nth-child(3) { background: #f5c33b; }  /* Y */
.lw-cta-dots span:nth-child(4) { background: #e9eef7; border: 2px solid #0d1526; }  /* K */

.lw-cta-text { position: relative; z-index: 1; max-width: 560px; }
.lw-cta-text h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: .7rem;
}
.lw-cta-text h3 .lw-cta-grad {
  background: linear-gradient(90deg, #7db4ff, #a9a5ff 55%, #ffd98a);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.lw-cta-text p { color: rgba(232,239,250,.85); font-size: 1.02rem; line-height: 1.6; }

.lw-cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-light {
  background: #fff;
  color: #14203a;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.8);
}
.btn-light:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 26px 2px rgba(125,180,255,.45), 0 18px 44px -12px rgba(0,0,0,.5);
}
.btn-ghost-light {
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  background: rgba(255,255,255,.06);
}
.btn-ghost-light:hover {
  border-color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
  transform: translateY(-3px);
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .logo-wall { margin-top: 3.25rem; }
  .lw-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
  .lw-tile { padding: .7rem 1.15rem; gap: .55rem; border-radius: 13px; }
  .lw-tile > svg { width: 1.35rem; height: 1.35rem; }
  .lw-name { font-size: .9rem; }
  .lw-tile-img { height: 84px; padding: .7rem .9rem; }
  .lw-tile-apply { min-height: 84px; }
  .lw-cta { padding: 2.4rem 1.6rem; text-align: center; justify-content: center; }
  .lw-cta-text { max-width: none; }
  .lw-cta-actions { justify-content: center; width: 100%; }
  .lw-cta-dots { top: 1.1rem; right: 1.2rem; }
}