/* ============================================================
   WizBrand Gallery / Team page — themed + creative (external)
   ============================================================ */
.gl { font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif; color: #41506b; }
.gl * { box-sizing: border-box; }
.gl-container { max-width: 1180px; margin: 0 auto; padding: 0 1.4rem; }

/* Hero */
.gl-hero { position: relative; overflow: hidden; background: linear-gradient(125deg, #0b2350 0%, #1d4ed8 60%, #3b7dff 100%); color: #fff; padding: 3rem 1.4rem 3.4rem; text-align: center; margin-bottom: 3rem; }
.gl-hero::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; top: -190px; right: -120px; background: radial-gradient(circle, rgba(59, 130, 246, .5), transparent 70%); animation: glFloat 9s ease-in-out infinite; }
.gl-hero .inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.gl-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #cfe0ff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); padding: .42rem .9rem; border-radius: 999px; }
.gl-hero h1 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.02em; margin: 1rem 0 .8rem; }
.gl-hero p { color: #dbe6f7; font-size: 1.1rem; max-width: 620px; margin: 0 auto; }
@keyframes glFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(22px) scale(1.05); } }

/* Grid */
.gl-section { padding: 0 0 4.5rem; }
.gl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
@media (max-width: 1000px) { .gl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .gl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .gl-grid { grid-template-columns: 1fr; } }

.gl-card { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid #e6ecf5; background: #fff; box-shadow: 0 2px 10px rgba(15, 27, 52, .06); aspect-ratio: 1 / 1; transition: transform .25s, box-shadow .25s; }
.gl-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(15, 27, 52, .16); }
.gl-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gl-card:hover img { transform: scale(1.07); }
.gl-card .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; background: linear-gradient(transparent 45%, rgba(11, 35, 80, .85)); opacity: 0; transition: opacity .3s ease; }
.gl-card:hover .overlay { opacity: 1; }
.gl-card .overlay b { color: #fff; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.05rem; }
.gl-card .overlay span { color: #cfe0ff; font-size: .82rem; }

/* Image-only tiles (no caption) */
.gl-card.plain .overlay { display: none; }