/* ============================================================
   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 */
.cs-hero {
  padding: 190px 5% 80px;
  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,.07) 0%, transparent 70%);
  top: -200px; 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,.05) 0%, transparent 70%);
  bottom: -100px; left: 10%;
  animation: floatY 12s ease-in-out infinite reverse;
}

.cs-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
}
.cs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.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;
}
.cs-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  line-height: .9;
  color: var(--text);
  margin-bottom: 24px;
}
.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: 660px;
  margin-bottom: 36px;
}
.cs-meta-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cs-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.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);
}

/* 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: contain; 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;

}

}