/* ============================================================
   next-level.css
   Page-specific styles for html/case-studies/next-level.html

   This file intentionally does NOT redefine navbar, footer,
   buttons, hero (#port-hero), section headers (.sec-eyebrow /
   .sec-heading / .sec-sub), section spacing (.port-section),
   tags (.wtag), the CTA band (.cta-band), or scroll-reveal
   (.sr) — all of that is inherited from global.css so this page
   matches the rest of the site exactly.

   Every colour, radius and font below is pulled from the CSS
   variables already defined in global.css (--bg, --bg2, --card,
   --border, --text, --muted, --muted2, --accent, --accent2,
   --font-head). No new variables or hex values are introduced.
============================================================ */

/* HERO BANNER — centered glassmorphic panel that fills the hero,
   sitting over the animated orbs/grid/ghost-text so the blur has
   something to actually blur. Panel scales+fades in on load, plus
   a one-time light-sweep across it; inner content still staggers
   in with the site's existing fadeUp keyframe. All copy unchanged. */
.cs-hero {
  padding: 170px 5% 70px;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.cs-hero .hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cs-hero .orb1 {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,232,50,.09) 0%, transparent 70%);
  top: -180px; right: -100px;
  animation: floatY 9s ease-in-out infinite;
}
.cs-hero .orb2 {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,109,67,.07) 0%, transparent 70%);
  bottom: -100px; left: 6%;
  animation: floatY 12s ease-in-out infinite reverse;
}
.cs-hero .orb3 {
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,232,50,.06) 0%, transparent 70%);
  top: 30%; left: -100px;
  animation: floatY 14s ease-in-out infinite;
}
.cs-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 45%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 65% at 50% 45%, #000 0%, transparent 78%);
}
[data-theme="light"] .cs-hero-grid {
  background-image:
    repeating-linear-gradient(0deg, rgba(15,23,42,.04) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(15,23,42,.04) 0 1px, transparent 1px 64px);
}

/* Giant translucent watermark behind the glass panel */
.cs-hero-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-head);
  font-size: clamp(6rem, 22vw, 16rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(168,232,50,.07);
  letter-spacing: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.cs-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
}

/* ── THE GLASS PANEL ── */
.cs-hero-glass {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 8%;
  border-radius: 28px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
  animation: csGlassIn .9s cubic-bezier(.22,1,.36,1) both;
}
[data-theme="light"] .cs-hero-glass {
  background: rgba(255,255,255,.55);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 30px 80px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.6);
}

/* one-time light sweep across the glass on load */
.cs-hero-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg);
  animation: csGlassSweep 1.6s ease .5s 1 both;
  pointer-events: none;
}

@keyframes csGlassIn {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes csGlassSweep {
  from { left: -40%; }
  to   { left: 130%; }
}

/* Small centered rotating badge, purely decorative */
.cs-hero-badge {
  position: relative;
  width: 68px;
  height: 68px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeUp .7s cubic-bezier(.22,1,.36,1) 0s both;
}
.chv-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(168,232,50,.32);
  inset: 0;
  animation: chvSpin 30s linear infinite;
}
.chv-ring-mid {
  inset: 10px;
  border-style: solid;
  border-color: rgba(168,232,50,.16);
  animation: chvSpin 20s linear infinite reverse;
}
.cs-hero-badge .chv-badge {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(168,232,50,.3), rgba(255,255,255,.04) 70%);
  border: 1px solid rgba(168,232,50,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulseDot 3.2s infinite;
}
.cs-hero-badge .chv-badge i {
  font-size: .95rem;
  color: var(--accent2);
}
@keyframes chvSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.cs-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  margin-bottom: 22px;
  animation: fadeUp .7s cubic-bezier(.22,1,.36,1) .06s both;
}
[data-theme="light"] .cs-breadcrumb {
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.10);
}
.cs-breadcrumb a { color: var(--accent); transition: opacity .2s; }
.cs-breadcrumb a:hover { opacity: .7; }
.cs-breadcrumb i { font-size: .7rem; color: var(--muted2); }

.cs-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  animation: fadeUp .75s cubic-bezier(.22,1,.36,1) .12s both;
}
.cs-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  line-height: .9;
  color: var(--text);
  margin-bottom: 24px;
  animation: fadeUp .85s cubic-bezier(.22,1,.36,1) .18s both;
}
.cs-hero h1 em {
  font-style: normal;
  color: var(--accent2);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.cs-hero-intro {
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  color: var(--muted);
  line-height: 1.8;
  font-weight: 300;
  max-width: 680px;
  margin: 0 auto 36px;
  text-align: justify;
  text-align-last: center;
  animation: fadeUp .85s cubic-bezier(.22,1,.36,1) .26s both;
}
.cs-meta-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
  animation: fadeUp .85s cubic-bezier(.22,1,.36,1) .34s both;
}
[data-theme="light"] .cs-meta-row { border-top-color: rgba(15,23,42,.10); }
.cs-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 22px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  flex: 1 1 150px;
  transition: transform .3s, border-color .3s, background .3s;
}
[data-theme="light"] .cs-meta-item {
  background: rgba(255,255,255,.5);
  border-color: rgba(15,23,42,.08);
}
.cs-meta-item:hover {
  transform: translateY(-3px);
  border-color: rgba(168,232,50,.35);
  background: rgba(168,232,50,.06);
}
.cs-meta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(168,232,50,.12);
  color: var(--accent);
  font-size: .85rem;
}
.cs-meta-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted2);
}
.cs-meta-value {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 640px) {
  .cs-hero { min-height: auto; padding: 140px 5% 50px; }
  .cs-hero-glass { padding: 44px 6%; border-radius: 22px; }
  .cs-meta-item { flex: 1 1 42%; padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero-glass, .cs-hero-glass::before,
  .chv-ring, .chv-ring-mid, .cs-hero-badge .chv-badge { animation: none; }
}

/* HERO COVER IMAGE */
.cs-cover {
  width: 100%;
  aspect-ratio: 16/6;
  overflow: hidden;
  position: relative;
  background: var(--card);
}
.cs-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cs-cover-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(135deg, #0f1f0f 0%, #1a3a1a 50%, #0d1f0a 100%);
}
.cs-cover-placeholder i { font-size: 3rem; color: rgba(168,232,50,.2); }
.cs-cover-placeholder span { font-size: .75rem; color: var(--muted2); letter-spacing: .1em; text-transform: uppercase; }

/* MAIN CONTENT LAYOUT — single column, sidebar moved below
   the main content as a row of cards. This removes the
   reserved right-hand column that left dead space once the
   sidebar's short content had scrolled past. */
.cs-body {
  padding: 60px 5%;
  max-width: 1000px;
  margin: 0 auto;
}
.cs-main { width: 100%; }
.cs-sidebar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.cs-sidebar .cs-sidebar-card { margin-bottom: 0; }

/* ── MAIN COLUMN: LEFT-ALIGNED TEXT ──────────────────────────
   Text (headings, paragraphs, lists, tags, testimonial) reads
   left-to-right as normal; images/grids still span full width. */
.cs-main {
  text-align: left;
}
.cs-main .cs-img-block,
.cs-main .cs-img-grid,
.cs-main .cs-results-grid,
.cs-main .cs-performing-grid,
.cs-main .cs-testimonial {
  width: 100%;
}

/* SECTION BLOCKS */
.cs-section {
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
  width: 100%;
}
.cs-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.cs-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.cs-section-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}
.cs-section h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1;
  color: var(--text);
  margin-bottom: 20px;
}
.cs-section h2 em {
  font-style: normal;
  color: var(--accent2);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}
.cs-section p {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 16px;
  max-width: 720px;
}
.cs-section p:last-child { margin-bottom: 0; }

/* IMAGE PLACEHOLDER BLOCK */
.cs-img-block {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--border);
  margin: 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.cs-img-block.tall { aspect-ratio: 4/3; }
.cs-img-block img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

.cs-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  width: 100%; height: 100%;
  background: var(--bg2);
}
.cs-img-placeholder i { font-size: 2.4rem; color: var(--muted2); }
.cs-img-placeholder span { font-size: .7rem; color: var(--muted2); letter-spacing: .12em; text-transform: uppercase; }

/* TWO-COL IMAGE GRID (used for Before / After comparisons) */
.cs-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 28px 0;
}
.cs-img-grid-item { display: flex; flex-direction: column; align-items: center; }
.cs-img-grid-item .cs-img-block {
  aspect-ratio: auto;
  height: auto;
  background: var(--bg2);
}
.cs-img-grid-item .cs-img-block img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.cs-img-grid-caption {
  margin-top: 10px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted2);
}

/* CHALLENGE LIST */
.cs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  max-width: 700px;
}
.cs-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 300;
  text-align: left;
}
.cs-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 8px;
}

/* STRATEGY TAGS */
.cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.cs-tag {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(168,232,50,.07);
  border: 1px solid rgba(168,232,50,.15);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
}

/* RESULTS STATS GRID */
.cs-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0;
}
.cs-stat-card {
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 24px 20px;
  text-align: center;
  transition: transform .3s, border-color .3s;
}
.cs-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(168,232,50,.3);
}
.cs-stat-num {
  font-family: var(--font-head);
  font-size: 2.8rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.cs-stat-num.orange { color: var(--accent2); }
.cs-stat-label {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 400;
}
.cs-stat-desc {
  font-size: .68rem;
  color: var(--muted2);
  margin-top: 6px;
  line-height: 1.5;
}

/* BEST PERFORMING CONTENT */
.cs-performing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px 0;
}
.cs-performing-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text);
  font-weight: 500;
}
.cs-performing-item i {
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
}

/* TESTIMONIAL */
.cs-testimonial {
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(168,232,50,.06) 0%, rgba(168,232,50,.02) 100%);
  border: 1px solid rgba(168,232,50,.15);
  padding: 32px 28px;
  margin: 28px 0;
  position: relative;
  text-align: left;
}
.cs-testimonial::before {
  content: '\201C';
  font-family: var(--font-head);
  font-size: 6rem;
  color: rgba(168,232,50,.12);
  position: absolute;
  top: -10px;
  left: 20px;
  line-height: 1;
}
.cs-testimonial p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.75;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 16px;
  max-width: 700px;
  position: relative;
  z-index: 1;
}
.cs-testimonial-author {
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* SIDEBAR (left as-is, not centered) */
.cs-sidebar-card {
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 24px 22px;
  margin-bottom: 20px;
}
.cs-sidebar-card h4 {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 14px;
}
.cs-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-sidebar-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--muted);
}
.cs-sidebar-list li i {
  color: var(--accent);
  font-size: .9rem;
  flex-shrink: 0;
}
.cs-sidebar-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* SIMILAR WORK */
.cs-similar {
  padding: 60px 5%;
  background: var(--bg2);
}
.cs-similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.cs-similar-card {
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.cs-similar-card:hover {
  transform: translateY(-5px);
  border-color: rgba(168,232,50,.3);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
}
.cs-similar-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.cs-similar-img img { width: 100%; height: 100%; object-fit: cover; }
.cs-similar-body { padding: 16px; }
.cs-similar-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.cs-similar-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 8px;
}
.cs-similar-desc {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .cs-results-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-similar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cs-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cs-hero { padding: 140px 5% 50px; }
  .cs-body { padding: 40px 5%; }
  .cs-results-grid { grid-template-columns: 1fr 1fr; }
  .cs-img-grid { grid-template-columns: 1fr; }
  .cs-performing-grid { grid-template-columns: 1fr; }
  .cs-similar-grid { grid-template-columns: 1fr; }
  .cs-meta-row { gap: 20px; }
  .cs-cover { aspect-ratio: 16/8; }
}

/* ---------- Reels Section ---------- */

.reels-section{
    width:100%;
    padding:60px 8%;
}

.reels-section h2{
    text-align:center;
    margin-bottom:40px;
}

.reels-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.reels-container a{

    display:block;

    overflow:hidden;

    border-radius:20px;

}

.reels-container video{

    width:100%;

    height:500px;

    object-fit:cover;

    display:block;

    transition:.4s;

    cursor:pointer;

}

.reels-container video:hover{

    transform:scale(1.05);

}

@media(max-width:992px){

.reels-container{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.reels-container{

grid-template-columns:1fr;

}

}

/* Container with 3 images side by side, same overall box size as before */
.cs-img-block.cs-img-triple {
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 0;
}
.cs-img-block.cs-img-triple img {
  flex: 1 1 0;
  width: 33.333%;
  height: 100%;
  object-fit: cover;
  min-width: 0; /* prevents flex items from overflowing the row on small screens */
}

@media (max-width: 640px) {
  .cs-img-block.cs-img-triple {
    gap: 4px;
  }
}