* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #0a0a0a;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.panel {
  flex: 0 0 33.333%;
  width: 33.333%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: flex-basis 2.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              width 2.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  text-decoration: none;
}

/* Base colors for each panel */
.panel--facts {
  background: #1a1a2e;
}

.panel--fun {
  background: #16213e;
}

.panel--maurice {
  background: #0f3460;
}

/* Glow overlay */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  z-index: 1;
}

.panel--facts::before {
  background: radial-gradient(circle at center, rgba(255, 46, 99, 0.5) 0%, rgba(255, 46, 99, 0.15) 50%, transparent 70%);
}

.panel--fun::before {
  background: radial-gradient(circle at center, rgba(0, 230, 118, 0.5) 0%, rgba(0, 230, 118, 0.15) 50%, transparent 70%);
}

.panel--maurice::before {
  background: radial-gradient(circle at center, rgba(41, 121, 255, 0.5) 0%, rgba(41, 121, 255, 0.15) 50%, transparent 70%);
}

.panel:hover::before {
  opacity: 1;
}

/* Border glow on hover */
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  z-index: 1;
}

.panel--facts::after {
  box-shadow: inset 0 0 60px rgba(255, 46, 99, 0.3), 0 0 40px rgba(255, 46, 99, 0.2);
}

.panel--fun::after {
  box-shadow: inset 0 0 60px rgba(0, 230, 118, 0.3), 0 0 40px rgba(0, 230, 118, 0.2);
}

.panel--maurice::after {
  box-shadow: inset 0 0 60px rgba(41, 121, 255, 0.3), 0 0 40px rgba(41, 121, 255, 0.2);
}

.panel:hover::after {
  opacity: 1;
}

/* Divider lines */
.panel + .panel {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* Label + copy wrapper */
.panel__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 320px;
  padding: 0 2rem;
}

.panel__label {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.15);
  transition: all 1.6s ease;
  user-select: none;
  white-space: nowrap;
}

.panel__copy {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0);
  margin-top: 1.2rem;
  transition: color 1.6s ease 0.4s, transform 1.6s ease 0.4s;
  transform: translateY(10px);
  font-weight: 300;
}

.panel:hover .panel__copy {
  color: rgba(255, 255, 255, 0.7);
  transform: translateY(0);
}

.panel__cta {
  position: relative;
  z-index: 2;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0);
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 6px;
  padding: 0.6rem 1.8rem;
  margin-top: 1.4rem;
  cursor: pointer;
  transition: color 1.6s ease 0.6s,
              background 1.6s ease 0.6s,
              border-color 1.6s ease 0.6s,
              transform 1.6s ease 0.6s,
              box-shadow 0.4s ease;
  transform: translateY(10px);
}

.panel:hover .panel__cta {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(0);
}

.panel__cta:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.panel--facts:hover .panel__label {
  color: #ff2e63;
  text-shadow: 0 0 30px rgba(255, 46, 99, 0.6), 0 0 60px rgba(255, 46, 99, 0.3);
}

.panel--fun:hover .panel__label {
  color: #00e676;
  text-shadow: 0 0 30px rgba(0, 230, 118, 0.6), 0 0 60px rgba(0, 230, 118, 0.3);
}

.panel--maurice:hover .panel__label {
  color: #2979ff;
  text-shadow: 0 0 30px rgba(41, 121, 255, 0.6), 0 0 60px rgba(41, 121, 255, 0.3);
}

/* Subtle scale on hover */
.panel:hover .panel__label {
  transform: scale(1.1);
  letter-spacing: 0.4em;
}

/* Iframe container */
.panel__iframe {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 1.6s ease 0.8s;
  pointer-events: none;
}

.panel__iframe.active {
  opacity: 1;
  pointer-events: auto;
}

.panel__iframe iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ========================================
   ZOOM GRID — absolute positioned, any depth
   Each cell slides to nearest edge on expand.
   Concentric frames accumulate as you zoom.
   ======================================== */

.zoom-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease 0.8s;
}

.zoom-grid.active {
  opacity: 1;
  pointer-events: auto;
}

.zoom-cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  border-radius: 3px;
  transition: top 2.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              left 2.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              width 2.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              height 2.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              border-radius 2.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.zoom-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.zoom-cell:hover::before {
  opacity: 1;
}

.zoom-cell__label {
  position: relative;
  z-index: 2;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.12);
  transition: all 1.6s ease;
  user-select: none;
  white-space: nowrap;
}

/* When collapsed to a strip, shrink the label */
.zoom-cell.is-collapsed .zoom-cell__label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
}

/* When expanded, fade out label so child grid shows (but not overview cells) */
.zoom-cell.is-expanded:not(.cell--overview) > .zoom-cell__label {
  opacity: 0;
  pointer-events: none;
}

/* ---- Overview / Mission cells — magazine layout ---- */
.cell--overview {
  container-type: size;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}

.cell--overview::before {
  display: none;
}

/* Scrollable inner wrapper */
.overview__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.overview__inner::-webkit-scrollbar { width: 3px; }
.overview__inner::-webkit-scrollbar-track { background: transparent; }
.overview__inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* Hero image placeholder */
.overview__hero {
  width: 100%;
  min-height: 18%;
  max-height: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.overview__hero-letter {
  font-size: max(1.5rem, 12cqmin);
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.4;
  user-select: none;
}

/* Content area below hero */
.overview__body {
  padding: max(0.5rem, 4cqmin);
  display: flex;
  flex-direction: column;
  gap: max(0.3rem, 2cqmin);
}

/* Section label / headline */
.cell--overview .zoom-cell__label {
  font-size: max(0.5rem, 4.5cqmin);
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
  padding: max(0.3rem, 2cqmin) max(0.5rem, 4cqmin) 0;
  transition: font-size 2.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              color 1.6s ease,
              letter-spacing 1.6s ease,
              opacity 1.6s ease;
}

/* Body text */
.overview__text {
  position: relative;
  z-index: 2;
  font-size: max(0.35rem, 2.6cqmin);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
  transition: font-size 2.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              color 1.6s ease;
}

/* Stats row */
.overview__stats {
  display: flex;
  gap: max(0.3rem, 3cqmin);
  margin-top: max(0.2rem, 1cqmin);
}

.overview__stat {
  flex: 1;
  text-align: center;
  padding: max(0.3rem, 2cqmin) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.overview__stat-value {
  display: block;
  font-size: max(0.5rem, 4cqmin);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
}

.overview__stat-label {
  display: block;
  font-size: max(0.3rem, 1.8cqmin);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: max(0.1rem, 0.5cqmin);
}

/* Hover enhancements */
.cell--overview:hover .overview__text {
  color: rgba(255, 255, 255, 0.65);
}

.cell--overview:hover .zoom-cell__label {
  color: rgba(255, 255, 255, 0.5);
}

.cell--overview:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.03);
}

.cell--overview:hover .overview__stat-value {
  color: rgba(255, 255, 255, 0.8);
}

/* When overview is collapsed to a strip, hide content */
.cell--overview.is-collapsed .overview__inner {
  opacity: 0;
}

.cell--overview.is-collapsed .zoom-cell__label {
  font-size: max(0.35rem, 3cqmin);
  letter-spacing: 0.1em;
}

/* ---- Pillar colors: Community, Technology, Media, Clients ---- */
.cell--community { background: #1a1a2e; }
.cell--community::before { background: radial-gradient(circle at center, rgba(255, 46, 99, 0.5) 0%, rgba(255, 46, 99, 0.15) 50%, transparent 70%); }
.cell--community:hover { box-shadow: inset 0 0 60px rgba(255, 46, 99, 0.3), 0 0 40px rgba(255, 46, 99, 0.2); }
.cell--community:hover > .zoom-cell__label { color: #ff2e63; text-shadow: 0 0 30px rgba(255, 46, 99, 0.6), 0 0 60px rgba(255, 46, 99, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--technology { background: #16213e; }
.cell--technology::before { background: radial-gradient(circle at center, rgba(0, 230, 118, 0.5) 0%, rgba(0, 230, 118, 0.15) 50%, transparent 70%); }
.cell--technology:hover { box-shadow: inset 0 0 60px rgba(0, 230, 118, 0.3), 0 0 40px rgba(0, 230, 118, 0.2); }
.cell--technology:hover > .zoom-cell__label { color: #00e676; text-shadow: 0 0 30px rgba(0, 230, 118, 0.6), 0 0 60px rgba(0, 230, 118, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--media { background: #0f3460; }
.cell--media::before { background: radial-gradient(circle at center, rgba(41, 121, 255, 0.5) 0%, rgba(41, 121, 255, 0.15) 50%, transparent 70%); }
.cell--media:hover { box-shadow: inset 0 0 60px rgba(41, 121, 255, 0.3), 0 0 40px rgba(41, 121, 255, 0.2); }
.cell--media:hover > .zoom-cell__label { color: #2979ff; text-shadow: 0 0 30px rgba(41, 121, 255, 0.6), 0 0 60px rgba(41, 121, 255, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--clients { background: #1a0a2e; }
.cell--clients::before { background: radial-gradient(circle at center, rgba(187, 134, 252, 0.5) 0%, rgba(187, 134, 252, 0.15) 50%, transparent 70%); }
.cell--clients:hover { box-shadow: inset 0 0 60px rgba(187, 134, 252, 0.3), 0 0 40px rgba(187, 134, 252, 0.2); }
.cell--clients:hover > .zoom-cell__label { color: #bb86fc; text-shadow: 0 0 30px rgba(187, 134, 252, 0.6), 0 0 60px rgba(187, 134, 252, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

/* ---- Tech sub-cells: IoT, AI, Cloud, TBD ---- */
.cell--iot { background: #0d1b2a; }
.cell--iot::before { background: radial-gradient(circle at center, rgba(0, 229, 255, 0.5) 0%, rgba(0, 229, 255, 0.15) 50%, transparent 70%); }
.cell--iot:hover { box-shadow: inset 0 0 60px rgba(0, 229, 255, 0.3), 0 0 40px rgba(0, 229, 255, 0.2); }
.cell--iot:hover > .zoom-cell__label { color: #00e5ff; text-shadow: 0 0 30px rgba(0, 229, 255, 0.6), 0 0 60px rgba(0, 229, 255, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

/* ---- IoT sub-project cells ---- */
.cell--iot-proj1 { background: #0a1520; }
.cell--iot-proj1::before { background: radial-gradient(circle at center, rgba(0, 200, 230, 0.4) 0%, rgba(0, 200, 230, 0.1) 50%, transparent 70%); }
.cell--iot-proj1:hover { box-shadow: inset 0 0 50px rgba(0, 200, 230, 0.25), 0 0 30px rgba(0, 200, 230, 0.15); }
.cell--iot-proj1:hover > .zoom-cell__label { color: #00c8e6; text-shadow: 0 0 25px rgba(0, 200, 230, 0.5), 0 0 50px rgba(0, 200, 230, 0.25); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--iot-proj2 { background: #0d1820; }
.cell--iot-proj2::before { background: radial-gradient(circle at center, rgba(56, 182, 255, 0.4) 0%, rgba(56, 182, 255, 0.1) 50%, transparent 70%); }
.cell--iot-proj2:hover { box-shadow: inset 0 0 50px rgba(56, 182, 255, 0.25), 0 0 30px rgba(56, 182, 255, 0.15); }
.cell--iot-proj2:hover > .zoom-cell__label { color: #38b6ff; text-shadow: 0 0 25px rgba(56, 182, 255, 0.5), 0 0 50px rgba(56, 182, 255, 0.25); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--iot-proj3 { background: #0a1a1e; }
.cell--iot-proj3::before { background: radial-gradient(circle at center, rgba(0, 188, 180, 0.4) 0%, rgba(0, 188, 180, 0.1) 50%, transparent 70%); }
.cell--iot-proj3:hover { box-shadow: inset 0 0 50px rgba(0, 188, 180, 0.25), 0 0 30px rgba(0, 188, 180, 0.15); }
.cell--iot-proj3:hover > .zoom-cell__label { color: #00bcb4; text-shadow: 0 0 25px rgba(0, 188, 180, 0.5), 0 0 50px rgba(0, 188, 180, 0.25); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--ai { background: #1a0f00; }
.cell--ai::before { background: radial-gradient(circle at center, rgba(255, 171, 0, 0.5) 0%, rgba(255, 171, 0, 0.15) 50%, transparent 70%); }
.cell--ai:hover { box-shadow: inset 0 0 60px rgba(255, 171, 0, 0.3), 0 0 40px rgba(255, 171, 0, 0.2); }
.cell--ai:hover > .zoom-cell__label { color: #ffab00; text-shadow: 0 0 30px rgba(255, 171, 0, 0.6), 0 0 60px rgba(255, 171, 0, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

/* ---- AI sub-cells: Maurice, Ife, Seth ---- */
.cell--ai-maurice { background: #0f1a2e; }
.cell--ai-maurice::before { background: radial-gradient(circle at center, rgba(41, 121, 255, 0.4) 0%, rgba(41, 121, 255, 0.1) 50%, transparent 70%); }
.cell--ai-maurice:hover { box-shadow: inset 0 0 50px rgba(41, 121, 255, 0.25), 0 0 30px rgba(41, 121, 255, 0.15); }
.cell--ai-maurice:hover > .zoom-cell__label { color: #2979ff; text-shadow: 0 0 25px rgba(41, 121, 255, 0.5), 0 0 50px rgba(41, 121, 255, 0.25); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--ai-ife { background: #1a0a20; }
.cell--ai-ife::before { background: radial-gradient(circle at center, rgba(255, 167, 38, 0.4) 0%, rgba(255, 167, 38, 0.1) 50%, transparent 70%); }
.cell--ai-ife:hover { box-shadow: inset 0 0 50px rgba(255, 167, 38, 0.25), 0 0 30px rgba(255, 167, 38, 0.15); }
.cell--ai-ife:hover > .zoom-cell__label { color: #ffa726; text-shadow: 0 0 25px rgba(255, 167, 38, 0.5), 0 0 50px rgba(255, 167, 38, 0.25); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--ai-seth { background: #0a1a12; }
.cell--ai-seth::before { background: radial-gradient(circle at center, rgba(102, 255, 153, 0.4) 0%, rgba(102, 255, 153, 0.1) 50%, transparent 70%); }
.cell--ai-seth:hover { box-shadow: inset 0 0 50px rgba(102, 255, 153, 0.25), 0 0 30px rgba(102, 255, 153, 0.15); }
.cell--ai-seth:hover > .zoom-cell__label { color: #66ff99; text-shadow: 0 0 25px rgba(102, 255, 153, 0.5), 0 0 50px rgba(102, 255, 153, 0.25); transform: scale(1.1); letter-spacing: 0.4em; }


.cell--cloud { background: #002a1a; }
.cell--cloud::before { background: radial-gradient(circle at center, rgba(29, 233, 182, 0.5) 0%, rgba(29, 233, 182, 0.15) 50%, transparent 70%); }
.cell--cloud:hover { box-shadow: inset 0 0 60px rgba(29, 233, 182, 0.3), 0 0 40px rgba(29, 233, 182, 0.2); }
.cell--cloud:hover > .zoom-cell__label { color: #1de9b6; text-shadow: 0 0 30px rgba(29, 233, 182, 0.6), 0 0 60px rgba(29, 233, 182, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

/* ---- Cloud sub-cells: Maurice SaaS, Symphony, TBD ---- */
.cell--cloud-maurice { background: #0f1a2e; }
.cell--cloud-maurice::before { background: radial-gradient(circle at center, rgba(41, 121, 255, 0.4) 0%, rgba(41, 121, 255, 0.1) 50%, transparent 70%); }
.cell--cloud-maurice:hover { box-shadow: inset 0 0 50px rgba(41, 121, 255, 0.25), 0 0 30px rgba(41, 121, 255, 0.15); }
.cell--cloud-maurice:hover > .zoom-cell__label { color: #2979ff; text-shadow: 0 0 25px rgba(41, 121, 255, 0.5), 0 0 50px rgba(41, 121, 255, 0.25); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--cloud-poet { background: #1a0f1e; }
.cell--cloud-poet::before { background: radial-gradient(circle at center, rgba(234, 128, 252, 0.4) 0%, rgba(234, 128, 252, 0.1) 50%, transparent 70%); }
.cell--cloud-poet:hover { box-shadow: inset 0 0 50px rgba(234, 128, 252, 0.25), 0 0 30px rgba(234, 128, 252, 0.15); }
.cell--cloud-poet:hover > .zoom-cell__label { color: #ea80fc; text-shadow: 0 0 25px rgba(234, 128, 252, 0.5), 0 0 50px rgba(234, 128, 252, 0.25); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--cloud-tbd { background: #151520; }
.cell--cloud-tbd::before { background: radial-gradient(circle at center, rgba(176, 190, 197, 0.3) 0%, rgba(176, 190, 197, 0.08) 50%, transparent 70%); }
.cell--cloud-tbd:hover { box-shadow: inset 0 0 50px rgba(176, 190, 197, 0.15), 0 0 30px rgba(176, 190, 197, 0.08); }
.cell--cloud-tbd:hover > .zoom-cell__label { color: #b0bec5; text-shadow: 0 0 25px rgba(176, 190, 197, 0.3), 0 0 50px rgba(176, 190, 197, 0.15); transform: scale(1.1); letter-spacing: 0.4em; }


/* ---- Community sub-cells ---- */
.cell--slimehive { background: #1a0a1e; }
.cell--slimehive::before { background: radial-gradient(circle at center, rgba(233, 30, 99, 0.5) 0%, rgba(233, 30, 99, 0.15) 50%, transparent 70%); }
.cell--slimehive:hover { box-shadow: inset 0 0 60px rgba(233, 30, 99, 0.3), 0 0 40px rgba(233, 30, 99, 0.2); }
.cell--slimehive:hover > .zoom-cell__label { color: #e91e63; text-shadow: 0 0 30px rgba(233, 30, 99, 0.6), 0 0 60px rgba(233, 30, 99, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--bsup { background: #0d0a2a; }
.cell--bsup::before { background: radial-gradient(circle at center, rgba(124, 77, 255, 0.5) 0%, rgba(124, 77, 255, 0.15) 50%, transparent 70%); }
.cell--bsup:hover { box-shadow: inset 0 0 60px rgba(124, 77, 255, 0.3), 0 0 40px rgba(124, 77, 255, 0.2); }
.cell--bsup:hover > .zoom-cell__label { color: #7c4dff; text-shadow: 0 0 30px rgba(124, 77, 255, 0.6), 0 0 60px rgba(124, 77, 255, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--community-tbd { background: #1a1510; }
.cell--community-tbd::before { background: radial-gradient(circle at center, rgba(255, 183, 77, 0.4) 0%, rgba(255, 183, 77, 0.1) 50%, transparent 70%); }
.cell--community-tbd:hover { box-shadow: inset 0 0 60px rgba(255, 183, 77, 0.25), 0 0 40px rgba(255, 183, 77, 0.15); }
.cell--community-tbd:hover > .zoom-cell__label { color: #ffb74d; text-shadow: 0 0 30px rgba(255, 183, 77, 0.5), 0 0 60px rgba(255, 183, 77, 0.25); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--polysci { background: #0a1a1e; }
.cell--polysci::before { background: radial-gradient(circle at center, rgba(0, 188, 212, 0.5) 0%, rgba(0, 188, 212, 0.15) 50%, transparent 70%); }
.cell--polysci:hover { box-shadow: inset 0 0 60px rgba(0, 188, 212, 0.3), 0 0 40px rgba(0, 188, 212, 0.2); }
.cell--polysci:hover > .zoom-cell__label { color: #00bcd4; text-shadow: 0 0 30px rgba(0, 188, 212, 0.6), 0 0 60px rgba(0, 188, 212, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--radio { background: #1e0a1a; }
.cell--radio::before { background: radial-gradient(circle at center, rgba(255, 112, 67, 0.5) 0%, rgba(255, 112, 67, 0.15) 50%, transparent 70%); }
.cell--radio:hover { box-shadow: inset 0 0 60px rgba(255, 112, 67, 0.3), 0 0 40px rgba(255, 112, 67, 0.2); }
.cell--radio:hover > .zoom-cell__label { color: #ff7043; text-shadow: 0 0 30px rgba(255, 112, 67, 0.6), 0 0 60px rgba(255, 112, 67, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

/* ---- Media sub-cells ---- */
.cell--youtube { background: #1a0a0a; }
.cell--youtube::before { background: radial-gradient(circle at center, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.15) 50%, transparent 70%); }
.cell--youtube:hover { box-shadow: inset 0 0 60px rgba(255, 0, 0, 0.3), 0 0 40px rgba(255, 0, 0, 0.2); }
.cell--youtube:hover > .zoom-cell__label { color: #ff0000; text-shadow: 0 0 30px rgba(255, 0, 0, 0.6), 0 0 60px rgba(255, 0, 0, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--funsite { background: #001a0d; }
.cell--funsite::before { background: radial-gradient(circle at center, rgba(105, 240, 174, 0.5) 0%, rgba(105, 240, 174, 0.15) 50%, transparent 70%); }
.cell--funsite:hover { box-shadow: inset 0 0 60px rgba(105, 240, 174, 0.3), 0 0 40px rgba(105, 240, 174, 0.2); }
.cell--funsite:hover > .zoom-cell__label { color: #69f0ae; text-shadow: 0 0 30px rgba(105, 240, 174, 0.6), 0 0 60px rgba(105, 240, 174, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--poet { background: #1a0f1e; }
.cell--poet::before { background: radial-gradient(circle at center, rgba(234, 128, 252, 0.5) 0%, rgba(234, 128, 252, 0.15) 50%, transparent 70%); }
.cell--poet:hover { box-shadow: inset 0 0 60px rgba(234, 128, 252, 0.3), 0 0 40px rgba(234, 128, 252, 0.2); }
.cell--poet:hover > .zoom-cell__label { color: #ea80fc; text-shadow: 0 0 30px rgba(234, 128, 252, 0.6), 0 0 60px rgba(234, 128, 252, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

/* ---- Client sub-cells: USDA, USAID, Treasury ---- */
.cell--usda { background: #0a1a0a; }
.cell--usda::before { background: radial-gradient(circle at center, rgba(76, 175, 80, 0.5) 0%, rgba(76, 175, 80, 0.15) 50%, transparent 70%); }
.cell--usda:hover { box-shadow: inset 0 0 60px rgba(76, 175, 80, 0.3), 0 0 40px rgba(76, 175, 80, 0.2); }
.cell--usda:hover > .zoom-cell__label { color: #4caf50; text-shadow: 0 0 30px rgba(76, 175, 80, 0.6), 0 0 60px rgba(76, 175, 80, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--usaid { background: #0a0f1e; }
.cell--usaid::before { background: radial-gradient(circle at center, rgba(33, 150, 243, 0.5) 0%, rgba(33, 150, 243, 0.15) 50%, transparent 70%); }
.cell--usaid:hover { box-shadow: inset 0 0 60px rgba(33, 150, 243, 0.3), 0 0 40px rgba(33, 150, 243, 0.2); }
.cell--usaid:hover > .zoom-cell__label { color: #2196f3; text-shadow: 0 0 30px rgba(33, 150, 243, 0.6), 0 0 60px rgba(33, 150, 243, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

.cell--treasury { background: #1a1508; }
.cell--treasury::before { background: radial-gradient(circle at center, rgba(255, 215, 0, 0.5) 0%, rgba(255, 215, 0, 0.15) 50%, transparent 70%); }
.cell--treasury:hover { box-shadow: inset 0 0 60px rgba(255, 215, 0, 0.3), 0 0 40px rgba(255, 215, 0, 0.2); }
.cell--treasury:hover > .zoom-cell__label { color: #ffd700; text-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.3); transform: scale(1.1); letter-spacing: 0.4em; }

/* ---- Cell Detail — landing layer before iframe ---- */
.cell-detail {
  container-type: size;
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6cqmin;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.zoom-cell.is-expanded > .cell-detail {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 1.6s ease 0.8s;
}

.zoom-cell.is-expanded > .cell-detail.detail--hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.cell-detail__title {
  font-size: max(0.8rem, 6cqmin);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 3cqmin;
  text-align: center;
  transition: font-size 2.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cell-detail__blurb {
  font-size: max(0.5rem, 2.8cqmin);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
  max-width: 85%;
  text-align: center;
  margin-bottom: 5cqmin;
  transition: font-size 2.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cell-detail__cta {
  font-size: max(0.5rem, 2.2cqmin);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 1.5cqmin 4cqmin;
  cursor: pointer;
  transition: all 0.6s ease,
              font-size 2.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              padding 2.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cell-detail__cta:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Cell iframe layer */
.cell-detail__iframe {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease 0.4s;
}

.cell-detail__iframe.active {
  opacity: 1;
  pointer-events: auto;
}

.cell-detail__iframe iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ---- Timeline ---- */
.timeline-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease 0.8s;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 12%;
}

.timeline-container.active {
  opacity: 1;
  pointer-events: auto;
}

.timeline__header {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.15);
  margin-bottom: 2.5rem;
  text-align: left;
}

.timeline__list {
  width: 100%;
  max-width: 500px;
  position: relative;
  padding-left: 0;
  overflow: visible;
}

.timeline__item {
  position: relative;
  padding: 0.8rem 0 1.2rem 1.5rem;
  margin-left: -50vw;
  padding-left: calc(50vw + 1.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transform-origin: center center;
  transition: transform 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              padding 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              border-bottom-color 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Dot on .timeline__item — horizontally anchored, vertically centered */
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(50vw - 1rem);
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 230, 118, 0.3);
  border: 1px solid rgba(0, 230, 118, 0.5);
  transition: all 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.timeline__item.tl-active::before {
  background: #00e676;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.6);
  width: 10px;
  height: 10px;
}

.timeline__item::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -2rem;
  background: rgba(0, 230, 118, 0.0);
  border-radius: 0 4px 4px 0;
  z-index: -1;
  transition: background 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}

.timeline__item.tl-active::after {
  background: rgba(0, 230, 118, 0.04);
}

.timeline__item.tl-pending.tl-active::after {
  background: rgba(255, 215, 0, 0.04);
}

.timeline__item.tl-active {
  border-bottom-color: transparent;
}

.timeline__item.tl-active .timeline__date {
  font-size: 0.75rem;
}

.timeline__item.tl-active .timeline__title {
  font-size: 1.6rem;
}

.timeline__item.tl-active .timeline__desc {
  font-size: 0.9rem;
}

.timeline__item.tl-dim {
  border-bottom-color: transparent;
}

.timeline__date {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(0, 230, 118, 0.4);
  margin-bottom: 0.3rem;
  transition: font-size 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.timeline__title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.7);
  transition: color 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              font-size 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              text-shadow 1.4s ease;
}

.timeline__item.tl-active .timeline__title {
  color: #00e676;
  text-shadow: 0 0 20px rgba(0, 230, 118, 0.3);
}

/* Content wrapper — keeps title/desc/detail grouped tightly */
.timeline__content {
  position: relative;
  padding-bottom: 0;
  transition: padding-bottom 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.timeline__item.tl-active .timeline__content {
  padding-bottom: 0;
}

.timeline__desc {
  display: block;
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.2rem;
  transition: color 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              font-size 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.timeline__item.tl-active .timeline__desc {
  color: rgba(255, 255, 255, 0.6);
}


.timeline__item.tl-dim {
  opacity: 0.5;
}

.timeline__item.tl-pending .timeline__date {
  color: rgba(255, 215, 0, 0.7);
}

.timeline__item.tl-pending::before {
  background: rgba(255, 215, 0, 0.3);
  border-color: rgba(255, 215, 0, 0.5);
}

.timeline__item.tl-pending.tl-active::before {
  background: #ffd700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.timeline__item.tl-pending.tl-active .timeline__title {
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* ---- Timeline Card — drops into right side on hover ---- */
.timeline__card {
  position: fixed;
  top: -300px;
  width: 560px;
  padding: 2rem 1.8rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: top 1.0s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.8s ease;
  z-index: 10;
  /* left is set dynamically by JS */
}

/* Resting: centered vertically */
.timeline__card.active {
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  pointer-events: auto;
}

/* Exiting: continues falling down off the bottom */
.timeline__card.exiting {
  top: calc(100vh + 300px);
  transform: translateY(0);
  opacity: 0;
  pointer-events: none;
  transition: top 0.8s cubic-bezier(0.55, 0, 1, 0.45),
              opacity 0.6s ease;
}

/* No transition when resetting back to top */
.timeline__card.no-transition {
  transition: none !important;
}

/* Image placeholder — hidden by default, fades in with .show-img */
.timeline__card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.8s ease, max-height 0.8s ease;
}

.timeline__card.show-img .timeline__card-img {
  opacity: 1;
  max-height: 200px;
}

.timeline__card-img-icon {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.6;
  user-select: none;
}

.timeline__card-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.5rem;
}

.timeline__card-blurb {
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.4);
}

/* Summary — hidden by default, fades in with .show-summary */
.timeline__card-summary {
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.8rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 1.0s ease, max-height 0.8s ease;
}

.timeline__card.show-summary .timeline__card-summary {
  opacity: 1;
  max-height: 300px;
}

/* Scrollbar styling */
.timeline-container::-webkit-scrollbar {
  width: 3px;
}
.timeline-container::-webkit-scrollbar-track {
  background: transparent;
}
.timeline-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* ---- Home button ---- */
.home-btn {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease, background 0.4s ease, border-color 0.4s ease;
}

.home-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.home-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.home-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s ease;
}

.home-btn:hover svg {
  stroke: rgba(255, 255, 255, 0.8);
}

/* ---- Back button ---- */
.back-btn {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 100;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease, background 0.4s ease, border-color 0.4s ease;
}

.back-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.back-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s ease;
}

.back-btn:hover svg {
  stroke: rgba(255, 255, 255, 0.8);
}