/* ===== SECTION BASE ===== */
.akur-section {
  padding: 70px 20px;
  background: #fff;
}
.akur-container {
  max-width: 1400px;
  margin: auto;
}

/* ===== HEADER — text left, logo right, aligned top ===== */
.akur-head {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  text-align: justify;
}
.akur-head > div:first-child {
  flex: 1;
}
.akur-head > div:last-child {
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  text-align: center;
}

.akur-head img {
  width: 280px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.1));
  padding: 30px 20px 0 0;
}
.akur-pill {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--gold);
  border-radius: 50px;
  font-size: 12px;
  margin-bottom: 16px;
}
.akur-head h2 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 16px;
}
.akur-head p {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
}

/* ===== "DIVERSE PROJECTS" SUB-HEADING ===== */
.ankur-head {
  margin-top: 80px;
  text-align: center;
}
.ankur-head h3 {
  margin-bottom: 12px;
  font-size: 35px;
  color: var(--charcoal);
  font-weight: 700;
  display: inline-block;
  position: relative;
}
.ankur-head h3::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--maroon));
  margin: 14px auto 40px;
  border-radius: 2px;
}

/* ===== SNAPSHOT SECTION — FLOATING GLASS =====
   The finalised Snapshot layout. Centred content, a circular
   gradient-badge icon on top of each card, and a soft floating-glass
   shadow. NOTE: the concept's idle "drift" animation has been removed
   entirely — every card is completely static until the pointer is
   over it. The only motion is the one-time scroll-in entrance (the
   site's existing behaviour) and a subtle hover lift. */
.project-stats {
  --snap-label: #7a7a7a;
  --snap-value: #22252b;
  --snap-accent: #8b1a4a;
  --snap-accent-tint: rgba(139, 26, 74, 0.08);
  padding: 40px 36px;
  /* Soft glass field the cards float on */
  background: linear-gradient(150deg, #fbf7f4 0%, #f7eef2 46%, #fdf6ec 100%);
  border-radius: 20px;
  margin-top: 50px;
  border: 1px solid #eee7dd;
}

/* ---- Per-card tones — Floating Glass palette, keyed to grid position.
   --cb card background, --ct content colour, --cia the translucent tint
   the badge gradient is built from. ---- */
.stat-item:nth-child(1) {
  --cb: #8b1a4a;
  --ct: #fff;
  --cia: rgba(255, 255, 255, 0.18);
}
.stat-item:nth-child(2) {
  --cb: #fff;
  --ct: #8b1a4a;
  --cia: rgba(139, 26, 74, 0.08);
}
.stat-item:nth-child(3) {
  --cb: #fdf3e7;
  --ct: #9a4e10;
  --cia: rgba(154, 78, 16, 0.12);
}
.stat-item:nth-child(4) {
  --cb: #d4943a;
  --ct: #fff;
  --cia: rgba(255, 255, 255, 0.24);
}
.stat-item:nth-child(5) {
  --cb: #f8f0f4;
  --ct: #8b1a4a;
  --cia: rgba(139, 26, 74, 0.1);
}
.stat-item:nth-child(6) {
  --cb: #fff;
  --ct: #8b1a4a;
  --cia: rgba(139, 26, 74, 0.08);
}
.stat-item:nth-child(7) {
  --cb: #2e1a10;
  --ct: #fff;
  --cia: rgba(255, 255, 255, 0.14);
}
.stat-item:nth-child(8) {
  --cb: #fff;
  --ct: #8b1a4a;
  --cia: rgba(139, 26, 74, 0.08);
}
.stat-item:nth-child(9) {
  --cb: #d4943a;
  --ct: #fff;
  --cia: rgba(255, 255, 255, 0.24);
}

/* ---- Section heading (unchanged) ---- */
.stats-heading {
  text-align: center;
  margin-bottom: 30px;
}
.stats-heading h3 {
  font-size: 26px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 0.3px;
  margin: 0;
}
.stats-heading .accent-line {
  display: block;
  width: 46px;
  height: 3px;
  background: var(--maroon, #8b1a4a);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ---- Bento grid — Floating Glass composition: three wide cards
   (positions 1, 5, 9) anchoring an otherwise even field. ---- */
.stats-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(150px, auto));
  grid-template-areas:
    "a a b c"
    "d e e f"
    "g h i i";
  gap: 18px;
}
.stat-item:nth-child(1) {
  grid-area: a;
}
.stat-item:nth-child(2) {
  grid-area: b;
}
.stat-item:nth-child(3) {
  grid-area: c;
}
.stat-item:nth-child(4) {
  grid-area: d;
}
.stat-item:nth-child(5) {
  grid-area: e;
}
.stat-item:nth-child(6) {
  grid-area: f;
}
.stat-item:nth-child(7) {
  grid-area: g;
}
.stat-item:nth-child(8) {
  grid-area: h;
}
.stat-item:nth-child(9) {
  grid-area: i;
}

/* ---- Card: centred stack, floating-glass shadow. Completely static
   by default — no drift, no idle motion. ---- */
.stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 14px;
  padding: 26px 20px !important;
  border-radius: 22px !important;
  background: var(--cb, #fff) !important;
  border: none !important;
  box-shadow: 0 18px 40px rgba(90, 20, 50, 0.1) !important;
  position: relative !important;
  overflow: hidden;
  flex: unset !important;
  min-width: 0 !important;
  min-height: 0 !important;
  cursor: default;
  /* one-time scroll-in entrance only (JS toggles .animated-in) */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.stat-item.animated-in {
  opacity: 1;
  transform: none;
}
/* The only remaining motion: a gentle hover lift + soft scale */
/* .stat-item.animated-in:hover {
  transform: translateY(-9px) scale(1.015);
  box-shadow: 0 26px 60px rgba(90, 20, 50, 0.16) !important;
} */
.stat-item::before,
.stat-item::after {
  content: none !important;
  display: none !important;
}

/* ---- Icon: circular gradient badge, centred on top of the content ---- */
.stat-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  border-radius: 50% !important;
  background: linear-gradient(140deg, var(--cia), transparent 78%) !important;
  border: 1px solid var(--cia) !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.stat-icon::before,
.stat-icon::after {
  content: none !important;
}
.stat-icon i {
  font-size: 26px;
  line-height: 1;
  color: var(--ct, var(--snap-accent));
}
.stat-icon img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain;
  filter: none !important;
}
.stat-item.animated-in:hover .stat-icon {
  transform: rotate(8deg) scale(1.06);
}

/* ---- Typography: centred; value and unit share one size ---- */
.stat-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  width: 100%;
}
.stat-info h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ct, var(--snap-label));
  opacity: 0.72;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.stat-info .stat-number {
  font-size: 22px;
  font-weight: 800;
  color: var(--ct, var(--snap-value));
  line-height: 1.3;
  overflow-wrap: break-word;
}
.stat-info .stat-number .count {
  font-variant-numeric: tabular-nums;
}
.stat-info .stat-unit {
  font-size: 22px;
  font-weight: 800;
  color: var(--ct, var(--snap-value));
}

/* ===== RESPONSIVE ===== */
/* Laptop — keep the 4-column bento, tighten the gap */
@media (max-width: 1100px) {
  .stats-wrap {
    gap: 16px;
  }
}
/* Tablet — two columns; the first card leads full width */
@media (max-width: 780px) {
  .stats-wrap {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
    grid-auto-rows: minmax(140px, auto);
    gap: 14px;
  }
  .stat-item {
    grid-area: auto !important;
  }
  .stat-item:nth-child(1) {
    grid-column: 1 / -1 !important;
  }
  .project-stats {
    padding: 32px 18px;
  }
  .stats-heading h3 {
    font-size: 22px;
  }
}
/* Mobile — single column stack */
@media (max-width: 540px) {
  .stats-wrap {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .stat-item {
    grid-area: auto !important;
    grid-column: auto !important;
  }
  .stat-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }
  .stat-icon i {
    font-size: 24px;
  }
  .stat-info .stat-number,
  .stat-info .stat-unit {
    font-size: 19px;
  }
}

/* ===== KEY DRIVERS — 5-per-row compact cards ===== */
.key-drivers {
  margin-top: 64px;
  margin-bottom: 10px;
}
.kd-heading {
  text-align: center;
  margin-bottom: 40px;
}
.kd-heading h3 {
  font-size: 32px;
  font-weight: 700;
  color: var(--charcoal);
  display: inline-block;
  position: relative;
}
.kd-heading h3::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--maroon));
  margin: 14px auto 0;
  border-radius: 2px;
}
/* 1–3 cards: single row, equal-width columns that expand evenly to
   fill the row (1 card grows large & centred, 2 share the row, 3 share it) */
.kd-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 28px;
}
.kd-grid .kd-card {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 360px;
}
/* A single card is allowed to grow noticeably larger & stay centred */
.kd-grid:has(> .kd-card:only-child) .kd-card {
  max-width: 480px;
}
.kd-card {
  background: #fff;
  border: 1px solid rgba(212, 148, 58, 0.15);
  border-radius: 18px;
  padding: 34px 27px 30px;
  text-align: center;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kd-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--maroon));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 18px 18px 0 0;
}
.kd-card:hover::before {
  transform: scaleX(1);
}
.kd-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 16px 40px rgba(139, 26, 74, 0.1),
    0 4px 14px rgba(212, 148, 58, 0.09);
  border-color: rgba(212, 148, 58, 0.3);
}
.kd-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 16px;
  overflow: hidden;
  border: 2.5px solid rgba(212, 148, 58, 0.25);
  box-shadow: 0 3px 12px rgba(212, 148, 58, 0.15);
  flex-shrink: 0;
}
.kd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kd-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--gold), var(--maroon));
}
.kd-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kd-info h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 5px;
}
.kd-role {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #9a6820;
  background: var(--gold-tint, #fdf3e7);
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 10px;
}
/* Description with line clamp */
.kd-desc {
  font-size: 13.5px;
  color: #666;
  line-height: 1.75;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  transition: max-height 0.4s ease;
  max-height: 8em;
  flex: 1;
}
.kd-card.kd-expanded .kd-desc {
  -webkit-line-clamp: unset;
  max-height: 300px;
  display: block;
  overflow: visible;
}
.kd-readmore {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold, #d4943a);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  align-self: flex-start;
  transition: color 0.2s;
}
.kd-readmore:hover {
  color: var(--maroon);
}

/* Responsive key drivers — equal-width row (1–3 cards) */
@media (max-width: 900px) {
  .kd-grid {
    flex-wrap: wrap;
    gap: 22px;
  }
  .kd-grid .kd-card,
  .kd-grid:has(> .kd-card:only-child) .kd-card {
    flex: 1 1 calc(50% - 22px);
    max-width: 380px;
  }
}
@media (max-width: 560px) {
  .kd-grid .kd-card,
  .kd-grid:has(> .kd-card:only-child) .kd-card {
    flex: 1 1 100%;
    max-width: 440px;
  }
  .kd-heading h3 {
    font-size: 26px;
  }
  .key-drivers {
    margin-top: 44px;
  }
}

/* =====================================================================
   KEY DRIVERS — slider/carousel (used when there are MORE than 3 cards)
   Desktop shows 3 · Tablet shows 2 · Mobile shows 1 (swipe-enabled)
   ===================================================================== */
.kd-slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1220px;
  margin: 0 auto;
}
.kd-slider-viewport {
  flex: 1;
  overflow: hidden;
}
.kd-slider-track {
  display: flex;
  align-items: stretch;
  gap: 28px;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.kd-slider-track .kd-card {
  flex: 0 0 calc((100% - 2 * 28px) / 3);
  max-width: none;
  width: auto;
}
.kd-slider-arrow {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 148, 58, 0.35);
  background: #fff;
  color: var(--maroon);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}
.kd-slider-arrow:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--gold), var(--maroon));
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(139, 26, 74, 0.22);
}
.kd-slider-arrow:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
  transform: none;
}

@media (max-width: 1000px) {
  .kd-slider-track .kd-card {
    flex-basis: calc((100% - 28px) / 2);
  }
}
@media (max-width: 640px) {
  .kd-slider {
    gap: 8px;
  }
  .kd-slider-track {
    gap: 16px;
  }
  .kd-slider-track .kd-card {
    flex-basis: 100%;
  }
  .kd-slider-arrow {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

/* ===== TABS — hidden, replaced by proj-nav ===== */
.akur-tabs {
  display: none !important;
}

/* ===== PROJECT NAVIGATOR ===== */
.proj-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding: 18px 28px;
  background: var(--accent-bg, #fbf7f2);
  border-radius: 60px;
  border: 1.5px solid rgba(212, 148, 58, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  gap: 16px;
  flex-wrap: wrap;
}
.proj-counter {
  display: flex;
  align-items: center;
  gap: 12px;
}
.proj-idx {
  font-size: 26px;
  font-weight: 800;
  color: var(--maroon);
  letter-spacing: -0.5px;
  line-height: 1;
}
.proj-idx .proj-sep {
  color: #bbb;
  margin: 0 2px;
  font-weight: 400;
}
.proj-idx .proj-total {
  font-size: 18px;
  color: #aaa;
  font-weight: 600;
}
.proj-name-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  background: rgba(212, 148, 58, 0.1);
  padding: 5px 14px;
  border-radius: 50px;
  border: 1px solid rgba(212, 148, 58, 0.2);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-nav-btns {
  display: flex;
  gap: 10px;
}
.proj-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 50px;
  border: 2px solid rgba(212, 148, 58, 0.3);
  background: #fff;
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}
.proj-btn:hover:not(:disabled) {
  background: var(--gold, #d4943a);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212, 148, 58, 0.35);
}
.proj-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.proj-btn.proj-next {
  background: var(--gold, #d4943a);
  border-color: var(--gold);
  color: #fff;
}
.proj-btn.proj-next:hover:not(:disabled) {
  background: var(--maroon);
  border-color: var(--maroon);
}
.proj-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ===== CONTENT PANELS ===== */
.akur-content-wrap {
  position: relative;
  background: var(--accent-bg, #fbf7f2);
  border-radius: 24px;
  padding: 40px;
  border: 1px solid rgba(212, 148, 58, 0.1);
}
@keyframes akurFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.akur-content {
  display: none;
  grid-template-columns: 520px 1fr;
  gap: 56px;
  align-items: center;
}
.akur-content.active {
  display: grid;
  animation: akurFadeIn 0.4s ease forwards;
}
.akur-image {
  overflow: hidden;
  border-radius: 20px;
}
.akur-image img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.5s ease;
  display: block;
}
.akur-image img:hover {
  transform: scale(1.04);
}
.akur-text h3 {
  font-size: 32px;
  margin-bottom: 14px;
  color: var(--maroon);
  font-weight: 700;
}
.akur-text p {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}
.akur-text ul {
  padding-left: 18px;
}
.akur-text li {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--charcoal);
}

/* ===== HEADER RESPONSIVE ===== */
@media (max-width: 992px) {
  .akur-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .akur-content-wrap {
    padding: 28px;
  }
  .akur-head {
    flex-direction: column;
    gap: 30px;
    text-align: left;
  }
  .akur-head > div:last-child {
    position: static;
  }
  .akur-head h2 {
    font-size: 36px;
  }
  .akur-head img {
    width: 200px;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .akur-section {
    padding: 50px 16px;
  }
  .akur-head h2 {
    font-size: 28px;
  }
  .akur-head p {
    font-size: 14px;
  }
  .akur-head img {
    width: 150px;
  }
  .akur-text h3 {
    font-size: 24px;
  }
  .akur-image img {
    height: 240px;
  }
  .ankur-head h3 {
    font-size: 24px;
  }
  .akur-content-wrap {
    padding: 20px;
    border-radius: 16px;
  }
  .proj-nav {
    padding: 14px 18px;
  }
  .proj-idx {
    font-size: 22px;
  }
  .proj-name-badge {
    font-size: 12px;
    max-width: 180px;
  }
  .proj-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .akur-head h2 {
    font-size: 24px;
  }
  .ankur-head h3 {
    font-size: 20px;
  }
  .proj-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .proj-nav-btns {
    align-self: stretch;
  }
  .proj-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ===== UPCOMING PROJECT PANELS ===== */
/* Applied when an .akur-content panel has the .upcoming class and is .active */
.akur-content.upcoming.active {
  background: #fdf8f3;
  border-radius: 20px;
  border: 2px dashed rgba(212, 148, 58, 0.38);
  padding: 8px;
  gap: 48px;
}

/* UPCOMING badge on the image */
.akur-content.upcoming .akur-image {
  position: relative;
}
.akur-content.upcoming .akur-image::after {
  content: "UPCOMING";
  position: absolute;
  top: 16px;
  left: 16px;
  background: #d4943a;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  padding: 5px 14px;
  border-radius: 30px;
  z-index: 5;
  box-shadow: 0 3px 12px rgba(212, 148, 58, 0.4);
  pointer-events: none;
}

/* Slightly muted image for upcoming */
.akur-content.upcoming .akur-image img {
  filter: saturate(0.8) brightness(0.93);
}

/* Text panel: distinctive card treatment */
.akur-content.upcoming .akur-text {
  background: #fff;
  border: 1.5px solid rgba(212, 148, 58, 0.3);
  border-radius: 16px;
  padding: 32px 36px;
}
.akur-content.upcoming .akur-text h3 {
  color: var(--maroon, #8b1a4a);
}
.akur-content.upcoming .akur-text h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #d4943a;
  border-radius: 2px;
  margin-top: 8px;
}

/* Upcoming project list items get a "◆" marker */
.akur-content.upcoming .akur-text li {
  list-style: none;
  padding-left: 14px;
  position: relative;
}
.akur-content.upcoming .akur-text li::before {
  content: "◆";
  position: absolute;
  left: -2px;
  color: #d4943a;
  font-size: 7px;
  top: 6px;
}

/* Nav bar: UPCOMING badge appears next to the counter */
.proj-nav.showing-upcoming .proj-counter::after {
  content: "UPCOMING";
  display: inline-flex;
  align-items: center;
  background: #d4943a;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-left: 12px;
  vertical-align: middle;
}

/* Responsive upcoming */
@media (max-width: 768px) {
  .akur-content.upcoming.active {
    gap: 28px;
    padding: 6px;
  }
  .akur-content.upcoming .akur-text {
    padding: 20px;
  }
}

/* ===================================================================
   STAGE CAROUSEL — Apple-style horizontal project showcase
   =================================================================== */

/* ── Outer wrapper ── */
.stage-carousel-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f8f4ef;
  padding: 24px 0 0;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Viewport clip ── */
.stage-track-outer {
  overflow: hidden;
  width: 100%;
}

/* ── Infinite slide track (gap + width set by JS) ── */
.stage-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition: transform 0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 12px 0 20px;
}
.stage-track.no-transition {
  transition: none !important;
}

/* ── Single slide — width set by JS ── */
.stage-slide {
  flex: 0 0 auto;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 380px;
  opacity: 0.42;
  transform: scale(0.92);
  transition:
    opacity 0.44s ease,
    transform 0.44s ease,
    box-shadow 0.44s ease;
  pointer-events: none;
}
.stage-slide.active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.16);
  pointer-events: auto;
}

/* ── Image half ── */
.stage-slide-img {
  position: relative;
  overflow: hidden;
  border-radius: 28px 0 0 28px;
  /* min-height: 0 lets the grid row height be set by the text side so
     the image never pushes the card taller than the content needs. The
     image column still stretches to fill the row via grid's default
     align-self: stretch, then object-fit:cover crops it to fit. */
  min-height: 0;
}
.stage-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.stage-slide.active .stage-slide-img img {
  transform: scale(1.03);
}

/* ── Upcoming badge overlay ── */
.stage-slide.upcoming .stage-slide-img::after {
  content: "Upcoming";
  position: absolute;
  top: 18px;
  left: 18px;
  background: linear-gradient(135deg, var(--maroon, #8b1a4a), #c0306a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(139, 26, 74, 0.4);
}

/* ── Text half ── */
.stage-slide-text {
  padding: 40px 42px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stage-slide-text::-webkit-scrollbar {
  width: 4px;
}
.stage-slide-text::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}

.stage-slide-text h3 {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  color: #111;
  margin: 0 0 12px;
  line-height: 1.25;
}
.stage-slide.upcoming .stage-slide-text h3 {
  color: var(--maroon, #8b1a4a);
}

.stage-slide-text p {
  font-size: 14px;
  color: #555;
  line-height: 1.68;
  margin: 0 0 18px;
}

.stage-slide-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stage-slide-text li {
  font-size: 13px;
  color: #444;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.stage-slide-text li:last-child {
  border-bottom: none;
}
.stage-slide-text li b {
  color: #111;
  flex-shrink: 0;
}

/* ── Controls bar (nav strip + arrow buttons) ── */
.stage-controls {
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  background: #f8f4ef;
}

/* ── Invisible spacer — mirrors the arrow-cluster's width on the
   opposite side of the bar so the nav strip's centered content lines
   up with the carousel's true centre line (the same centre the slider
   uses), instead of centering only within the leftover space beside
   the arrows. Width values match .stage-arrows at each breakpoint. ── */
.stage-nav-spacer {
  flex: 0 0 146px;
  visibility: hidden;
}

/* ── Project-name nav strip — centered ── */
.stage-nav-strip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 18px 16px 22px;
  -webkit-overflow-scrolling: touch;
}
.stage-nav-strip::-webkit-scrollbar {
  display: none;
}

.stage-nav-name {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 8px 18px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #999;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
  position: relative;
}
.stage-nav-name::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 12px;
  width: 1px;
  background: #ddd;
}
.stage-nav-name:last-child::after {
  display: none;
}
.stage-nav-name.active {
  color: var(--maroon, #8b1a4a);
  border-bottom-color: var(--maroon, #8b1a4a);
  font-weight: 700;
}

/* ── Arrow buttons ── */
.stage-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  flex-shrink: 0;
}

.stage-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--maroon, #8b1a4a);
  background: transparent;
  color: var(--maroon, #8b1a4a);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.28s ease,
    color 0.28s ease,
    transform 0.18s ease;
  flex-shrink: 0;
  line-height: 1;
}
.stage-btn:hover {
  background: var(--maroon, #8b1a4a);
  color: #fff;
  transform: scale(1.08);
}
.stage-btn:active {
  transform: scale(0.95);
}

/* ── Tablet ── */
@media (max-width: 992px) {
  .stage-slide {
    grid-template-columns: 1fr;
    border-radius: 22px;
    min-height: auto;
  }
  .stage-slide-img {
    height: 260px;
    border-radius: 22px 22px 0 0;
    min-height: auto;
  }
  .stage-slide-text {
    padding: 26px 28px 26px;
    max-height: none;
    overflow-y: visible;
  }
  .stage-arrows {
    padding: 0 16px;
  }
  .stage-btn {
    width: 40px;
    height: 40px;
  }
  .stage-nav-spacer {
    flex-basis: 122px;
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .stage-slide {
    border-radius: 18px;
  }
  .stage-slide-img {
    height: 220px;
    border-radius: 18px 18px 0 0;
  }
  .stage-slide-text {
    padding: 18px 16px 18px;
  }
  .stage-slide-text h3 {
    font-size: 17px;
  }
  .stage-slide-text p {
    font-size: 13px;
  }
  .stage-slide-text li {
    font-size: 12px;
  }
  /* Mobile: full-width centered strip, hide arrows */
  .stage-controls {
    flex-wrap: wrap;
  }
  .stage-arrows {
    display: none;
  }
  .stage-nav-spacer {
    display: none;
  }
  .stage-nav-strip {
    padding: 12px 10px 14px;
    width: 100%;
  }
  .stage-nav-name {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ── Small phone ── */
@media (max-width: 480px) {
  .stage-slide-img {
    height: 185px;
  }
  .stage-slide-text {
    padding: 14px 12px 14px;
  }
  .stage-slide-text h3 {
    font-size: 15px;
  }
}