/* Ken split hero slide - reusable-slides/ken-slide. Paths relative to this CSS file. */

@font-face {
      font-family: 'Bright Chalk';
      src: url('../../css/bright-chalk/Bright Chalk.ttf') format('truetype');
      font-weight: normal;
  font-style: normal;
}

/* Ken's Split Hero Intro slide - scoped (particle + gold theme + 3D images) */
    .ken-slide-mount { display: contents; }
    .intro-ken-split-slide { padding: 0 !important; }
    .intro-ken-split-slide .slide-container {
      width: 100%; height: 100%; margin: 0; padding: 0;
      background-color: #112018; position: relative; display: flex; flex-direction: column; overflow: hidden;
    }
    .intro-ken-split-slide #kenParticleCanvas {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none;
    }
    .intro-ken-split-slide #kenDadDecorCanvas {
      position: absolute; top: 0; left: 0; width: 50%; height: 100%; z-index: 1; pointer-events: none;
      opacity: 0; transition: opacity 0.3s ease;
    }
    .intro-ken-split-slide.personal-life #kenDadDecorCanvas { opacity: 1; }
    .intro-ken-split-slide .context-bg-container {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: flex;
    }
    .intro-ken-split-slide .context-panel {
      position: relative; height: 100%;
      transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden; cursor: pointer;
    }
    .intro-ken-split-slide .context-panel:hover { filter: brightness(1.1); }
    .intro-ken-split-slide .context-panel-business {
      background-color: #3c2b10; width: 50%; z-index: 1;
    }
    .intro-ken-split-slide .context-panel-teacher {
      background-color: #112018; width: 50%; z-index: 2;
    }
    .intro-ken-split-slide .ken-photo-container {
      position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      height: 90%; width: auto; z-index: 25; pointer-events: none; display: flex; justify-content: center;
    }
    .intro-ken-split-slide .ken-photo {
      position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      height: 100%; width: auto; max-width: none; object-fit: contain;
      filter: drop-shadow(0 0 30px rgba(0,0,0,0.6));
      transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      margin:0;
    }
    .intro-ken-split-slide .ken-photo-casual { z-index: 15; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
    .intro-ken-split-slide .ken-photo-suit { z-index: 14; clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
    .intro-ken-split-slide .floating-elements-container {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none;
    }
    .intro-ken-split-slide .float-img {
      position: absolute; object-fit: contain;
      filter: drop-shadow(0 15px 30px rgba(0,0,0,0.4));
      transition: transform 0.1s ease-out; will-change: transform; opacity: 0.9;
    }
    .intro-ken-split-slide .img-moby { top: 10%; right: 35%; width: 500px; z-index: 8; transform: rotate(-15deg); animation: ken-float-moby 8s ease-in-out infinite; }
    .intro-ken-split-slide .img-train { top: 20%; right: 15%; width: 600px; z-index: 4; transform: rotate(-8deg); animation: ken-float-train 12s ease-in-out infinite reverse;  }
    .intro-ken-split-slide .img-briefcase { bottom: 15%; right: 22%; width: 140px; z-index: 7; transform: rotate(12deg); animation: ken-float-briefcase 9s ease-in-out infinite 1s; }
    .intro-ken-split-slide .img-patent { top: 48%; right: 6%; width: 200px; z-index: 6; transform: rotate(-8deg); animation: ken-float-patent 10s ease-in-out infinite 2s; }
    .intro-ken-split-slide .img-chart { bottom: 20%; right: 45%; width: 220px; z-index: 5; transform: rotate(6deg); animation: ken-float-chart 7s ease-in-out infinite 0.5s; }
    @keyframes ken-float-moby { 0% { transform: translateY(0) rotate(-5deg) scale(1); } 50% { transform: translateY(-15px) rotate(-3deg) scale(1.02); } 100% { transform: translateY(0) rotate(-5deg) scale(1); } }
    @keyframes ken-float-train { 0% { transform: translateY(0) rotate(-8deg) scale(1); } 50% { transform: translateY(-10px) rotate(-10deg) scale(1.01); } 100% { transform: translateY(0) rotate(-8deg) scale(1); } }
    @keyframes ken-float-briefcase { 0% { transform: translateY(0) rotate(12deg) scale(1); } 50% { transform: translateY(-12px) rotate(15deg) scale(1.03); } 100% { transform: translateY(0) rotate(12deg) scale(1); } }
    @keyframes ken-float-patent { 0% { transform: translateY(0) rotate(-8deg) scale(1); } 50% { transform: translateY(-18px) rotate(-6deg) scale(1.02); } 100% { transform: translateY(0) rotate(-8deg) scale(1); } }
    @keyframes ken-float-chart { 0% { transform: translateY(0) rotate(6deg) scale(1); } 50% { transform: translateY(-14px) rotate(8deg) scale(1.02); } 100% { transform: translateY(0) rotate(6deg) scale(1); } }
    .intro-ken-split-slide .float-el {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      transition: transform 0.4s ease-out, opacity 0.35s ease;
      transform-style: preserve-3d; opacity: 0.88;
      pointer-events: auto;
    }
    .intro-ken-split-slide .float-el:hover { opacity: 1; z-index: 20; }
    .intro-ken-split-slide .teacher-el {
      background-color: rgba(34, 58, 48, 0.5); border-color: rgba(184, 212, 196, 0.2); color: #c5e1d0;
    }
    .intro-ken-split-slide .el-exp { top: 20%; left: 58%; width: 150px; height: 100px; transform: rotate(2deg); }
    .intro-ken-split-slide .el-exp:hover { transform: rotate(6deg) scale(1.04); }
    .intro-ken-split-slide .el-workshops { top: 68%; left: 18%; width: 140px; height: 130px; transform: rotate(-4deg); }
    .intro-ken-split-slide .el-workshops:hover { transform: rotate(-9deg) scale(1.04); }
    .intro-ken-split-slide .el-agile { top: 38%; left: 8%; width: 160px; height: 100px; transform: rotate(3deg); }
    .intro-ken-split-slide .el-agile:hover { transform: rotate(-2deg) scale(1.04); }
    .intro-ken-split-slide .el-horror {
      top: 18%; left: 22%; width: 180px; height: auto; min-height: 100px; padding: 10px;
      background-color: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.35); color: #fef08a;
      transform: rotate(-2deg);
    }
    .intro-ken-split-slide .el-horror .el-desc { font-size: 8px; line-height: 1.35; }
    .intro-ken-split-slide .el-horror:hover { transform: rotate(-5deg) scale(1.04); }
    .intro-ken-split-slide .el-coach { top: 50%; left: 35%; width: 150px; height: 110px; transform: rotate(-3deg); }
    .intro-ken-split-slide .el-coach:hover { transform: rotate(1deg) scale(1.04); }
    .intro-ken-split-slide .el-door { bottom: 30%; right: 25%; left: auto; width: 120px; height: 120px; border-radius: 50%; transform: rotate(4deg); }
    .intro-ken-split-slide .el-door:hover { transform: rotate(10deg) scale(1.04); }
    .intro-ken-split-slide .el-icon { font-size: 24px; margin-bottom: 6px; }
    .intro-ken-split-slide .el-title { font-size: 11px; font-weight: 600; font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
    .intro-ken-split-slide .el-desc { font-size: 9px; text-align: center; margin-top: 4px; opacity: 0.9; line-height: 1.4; }
    .intro-ken-split-slide .split-hero-content {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; display: flex;
    }
    .intro-ken-split-slide .split-hero-text-left {
      width: 50%; height: 20%; display: flex; flex-direction: column; justify-content: center; align-items: center;
      color: #ffffff; text-shadow: 0 4px 20px rgba(0,0,0,0.5); transition: all 0.8s ease;
    }
    .intro-ken-split-slide .split-hero-heading-left {
      font-family: 'Bright Chalk', cursive; font-weight: normal; font-size: 63px; line-height: 1; color: #ffffff;
      margin-bottom: 16px; letter-spacing: 1px; position: relative;
    }
    .intro-ken-split-slide .split-hero-sub-left {
      font-family: 'Inter', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.5; color: #e2e8f0;
      max-width: 300px; text-align: center; background-color: rgba(17, 32, 24, 0.5); padding: 16px; border-radius: 12px;
      backdrop-filter: blur(8px); border-left: 4px solid #233533;
    }
    .intro-ken-split-slide .split-hero-text-right {
      width: 50%; height: 20%; display: flex; flex-direction: column; justify-content: center; align-items: center;
      color: #ffffff; text-shadow: 0 4px 20px rgba(0,0,0,0.5);  transition: all 0.8s ease;
    }
    .intro-ken-split-slide .split-hero-heading-right {
      font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 64px; line-height: 1; color: #ffffff;
      margin-bottom: 16px; letter-spacing: -2px; text-align: center;
    }
    .intro-ken-split-slide .split-hero-heading-right span { display: inline-block; color: #fbbf24; text-shadow: 0 0 15px rgba(251, 191, 36, 0.4); }
    .intro-ken-split-slide .split-hero-sub-right {
      font-family: 'Inter', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.5; color: #e2e8f0;
      max-width: 320px; text-align: center; background-color: rgba(26, 18, 5, 0.6); padding: 16px; border-radius: 12px;
      backdrop-filter: blur(8px); border-right: 4px solid #fbbf24;
    }
    .intro-ken-split-slide .details-panel {
      position: absolute; top: 0; width: 62%; height: 100%;
      background: #112018; backdrop-filter: blur(20px); z-index: 30; padding: 60px;
      opacity: 0; pointer-events: none; transition: opacity 0.5s ease 0.3s;
      display: flex; flex-direction: column; overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .intro-ken-split-slide .details-panel::-webkit-scrollbar {
      display: none;
    }
    .intro-ken-split-slide .details-left {
      left: 0;
      transition: opacity 0.5s ease 0.3s, padding-right 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .intro-ken-split-slide .details-right {
      right: 0; background: #3c2b10;
      transition: opacity 0.5s ease 0.3s, padding-left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .intro-ken-split-slide .details-title { font-family: 'Poppins', sans-serif; font-size: 40px; font-weight: 700; margin-bottom: 30px; color: white; }
    .intro-ken-split-slide .details-left .details-title { font-family: 'Bright Chalk', cursive; font-weight: normal; }
    .intro-ken-split-slide .details-right .details-title { color: #fbbf24; text-shadow: 0 0 20px rgba(251, 191, 36, 0.4); }
    .intro-ken-split-slide .details-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 100px; }
    .intro-ken-split-slide .detail-card {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 20px; border-radius: 12px;
    }
    .intro-ken-split-slide .detail-card h3 { color: white; font-size: 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
    .intro-ken-split-slide .detail-card p { color: #cbd5e1; font-size: 14px; line-height: 1.6; margin: 0; }
    .intro-ken-split-slide .detail-card .detail-card-cta { margin-top: 12px; font-size: 13px; font-weight: 600; color: #a5f3fc; }
    .intro-ken-split-slide .details-right .detail-card .detail-card-cta { color: #fde68a; }
    .intro-ken-split-slide .details-left .details-title,
    .intro-ken-split-slide .details-left .detail-card,
    .intro-ken-split-slide .details-left .detail-card h3,
    .intro-ken-split-slide .details-left .detail-card p { text-align: left; }
    .intro-ken-split-slide .details-left .detail-card h3 { justify-content: flex-start; }
    .intro-ken-split-slide .details-right .details-title,
    .intro-ken-split-slide .details-right .detail-card,
    .intro-ken-split-slide .details-right .detail-card h3,
    .intro-ken-split-slide .details-right .detail-card p { text-align: right; }
    .intro-ken-split-slide .details-right .detail-card h3 { justify-content: flex-end; }
    .intro-ken-split-slide .split-hero-contact-btn {
      position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
      padding: 12px 28px; background: linear-gradient(135deg, #2a403c 0%, #233533 100%);
      backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: #fff;
      box-shadow: 0 8px 32px rgba(35, 53, 51, 0.5); cursor: pointer; z-index: 40;
      display: flex; align-items: center; gap: 10px; transition: all 0.3s ease;
    }
    .intro-ken-split-slide .split-hero-contact-btn:hover {
      transform: translateX(-50%) translateY(-4px); box-shadow: 0 12px 40px rgba(35, 53, 51, 0.6);
      background: linear-gradient(135deg, #314a47 0%, #233533 100%);
    }
    .intro-ken-split-slide .split-hero-contact-btn i { font-size: 18px; }
    /* Business card overlay & hand-over animation */
    .intro-ken-split-slide .business-card-overlay {
      position: absolute; inset: 0; z-index: 200; pointer-events: none;
      display: flex; align-items: flex-end; justify-content: center;
       opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
      overflow: visible;
      bottom:-10px;
    }
    .intro-ken-split-slide .business-card-overlay::before {
      content: ''; position: absolute; inset: 0; background: rgba(17, 32, 24, 0.6); backdrop-filter: blur(4px);
      opacity: 0; transition: opacity 0.4s ease;
    }
    .intro-ken-split-slide .business-card-overlay.visible { pointer-events: auto; opacity: 1; visibility: visible; }
    .intro-ken-split-slide .business-card-overlay.visible::before { opacity: 1; }
    .intro-ken-split-slide .business-card-presentation {
      display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0;
      position: relative; overflow: visible;
      transform: translateY(100%); transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
      will-change: transform; flex-wrap: nowrap;
    }
    .intro-ken-split-slide .business-card-overlay.visible .business-card-presentation {
      transform: translateY(0) scale(1.2);
    }
    .intro-ken-split-slide .business-card-photo-wrap {
      position: relative; width: 100%; height: 320px; min-height: 280px; display: flex; align-items: center; justify-content: center;
    }
    /* Card always centered â€" classic business card */
    .intro-ken-split-slide .business-card-inner {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: 300px; height: 194px; max-width: 88vw; max-height: 55vh;
      z-index: 1; flex-shrink: 0;
      background: #faf9f6;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
      overflow: hidden;
    }
    /* Hand to the right of center, shifted left so fingers overlap the card; on top of card */
    .intro-ken-split-slide .business-card-hand-img {
      position: absolute; left: -205px; top: 50%; transform: translate(80px, -50%);
      width: 600px; height: 260px; min-width: 160px; min-height: 200px;
      object-fit: contain; object-position: 28% center;
      pointer-events: none; z-index: 2;
      display: block;
      max-width: none;
    }
    .intro-ken-split-slide .business-card-content {
      padding: 20px 22px 18px; height: 100%; box-sizing: border-box;
      display: flex; flex-direction: column; justify-content: space-between;
    }
    .intro-ken-split-slide .business-card-header { margin-bottom: 10px; }
    .intro-ken-split-slide .business-card-name {
      font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; font-weight: 600; color: #1c1917;
      margin-bottom: 0; letter-spacing: 0.02em; line-height: 1.2;
    }
    .intro-ken-split-slide .business-card-accent {
      width: 42px; height: 2px; background: #44403c; margin: 6px 0 0 0;
    }
    .intro-ken-split-slide .business-card-contact {
      display: flex; flex-direction: column; gap: 6px; margin-top: 2px;
    }
    .intro-ken-split-slide .business-card-contact-row {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .intro-ken-split-slide .business-card-contact-ctx {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.65rem; font-weight: 600; color: #57534e; letter-spacing: 0.02em;
      min-width: 10em; text-decoration: none; transition: color 0.2s ease;
    }
    .intro-ken-split-slide .business-card-contact-ctx:hover { color: #1c1917; text-decoration: underline; }
    .intro-ken-split-slide .business-card-contact-ctx i {
      font-size: 0.6rem; width: 12px; color: #78716c; flex-shrink: 0;
    }
    .intro-ken-split-slide .business-card-contact-ctx:hover i { color: #1c1917; }
    .intro-ken-split-slide .business-card-contact-actions {
      display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    }
    .intro-ken-split-slide .business-card-contact-sep {
      font-size: 0.5rem; color: #a8a29e; margin: 0 1px;
    }
    .intro-ken-split-slide .business-card-link {
      display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0;
      background: none; border: none; border-radius: 0;
      color: #44403c; font-size: 0.62rem; font-weight: 500; text-decoration: none;
      transition: color 0.2s ease;
    }
    .intro-ken-split-slide .business-card-link:hover { color: #1c1917; text-decoration: none; }
    .intro-ken-split-slide .business-card-link i { font-size: 0.6rem; width: 12px; flex-shrink: 0; color: #78716c; }
    .intro-ken-split-slide .business-card-link:hover i { color: #1c1917; }
    .intro-ken-split-slide .business-card-link-icon {
      padding: 2px; min-width: 18px;
    }
    .intro-ken-split-slide .business-card-link-icon i { font-size: 0.65rem; }
    .intro-ken-split-slide .business-card-linkedin-wrap {
      margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.08);
    }
    .intro-ken-split-slide .business-card-link-inline {
      display: inline-flex; font-size: 0.65rem; color: #57534e;
    }
    .intro-ken-split-slide .business-card-link-inline:hover { color: #1c1917; text-decoration: underline; }
    .intro-ken-split-slide .business-card-link-inline i { color: #78716c; margin-right: 4px; }
    .intro-ken-split-slide .split-hero-helper {
      position: absolute; top: 5%; left: 50%; transform: translate(-50%, -50%);
      background-color: rgba(17, 32, 24, 0.6); color: white; padding: 8px 16px; border-radius: 20px;
      font-size: 14px; font-weight: 600; opacity: 0.6; pointer-events: none; z-index: 60;
      border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px);
      animation: ken-pulse-helper 2s infinite;
    }
    @keyframes ken-pulse-helper { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } 100% { transform: translate(-50%, -50%) scale(1); } }
    .intro-ken-split-slide .close-btn {
      position: absolute; top: 30px; right: 30px; width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: white;
      cursor: pointer; z-index: 100; opacity: 0; pointer-events: none; transition: all 0.3s ease;
    }
    .intro-ken-split-slide .close-btn:hover { background: rgba(255,255,255,0.2); }
    .intro-ken-split-slide.personal-life .close-btn {
      background: rgba(0,0,0,0.45);
      box-shadow: 0 2px 12px rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.25);
    }
    .intro-ken-split-slide.personal-life .close-btn:hover {
      background: rgba(0,0,0,0.6);
      border-color: rgba(255,255,255,0.4);
    }
    .intro-ken-split-slide .split-hero-nav-wrap {
      position: absolute; bottom: 30px; right: 40px; display: flex; align-items: center; gap: 12px; z-index: 60;
    }
    .intro-ken-split-slide .split-hero-prev,
    .intro-ken-split-slide .split-hero-skip {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 20px; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px;
      font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: white; cursor: pointer;
      transition: all 0.3s;
    }
    .intro-ken-split-slide .split-hero-prev {
      padding: 5px 10px;
      min-width: 0;
    }
    .intro-ken-split-slide .split-hero-prev i { font-size: 12px; }
    .intro-ken-split-slide .split-hero-prev:hover,
    .intro-ken-split-slide .split-hero-skip:hover { background-color: rgba(251, 191, 36, 0.3); transform: scale(1.05); }
    .intro-ken-split-slide.expanded-left .context-panel-teacher { width: 100%; z-index: 50; }
    .intro-ken-split-slide.expanded-left .context-panel-business { width: 0%; }
    .intro-ken-split-slide.expanded-left .ken-photo-casual { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    .intro-ken-split-slide.expanded-left .ken-photo-suit { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    .intro-ken-split-slide.expanded-left .details-left { opacity: 1; pointer-events: auto; }
    .intro-ken-split-slide.expanded-right .context-panel-business { width: 100%; z-index: 50; }
    .intro-ken-split-slide.expanded-right .context-panel-teacher { width: 0%; }
    .intro-ken-split-slide.expanded-right .ken-photo-casual { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    .intro-ken-split-slide.expanded-right .ken-photo-suit { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    .intro-ken-split-slide.expanded .split-hero-text-left,
    .intro-ken-split-slide.expanded .split-hero-text-right { opacity: 0; pointer-events: none; }
    .intro-ken-split-slide.expanded-right .details-right { opacity: 1; pointer-events: auto; }
    .intro-ken-split-slide.expanded .close-btn { opacity: 1; pointer-events: auto; }
    .intro-ken-split-slide.expanded .split-hero-helper { opacity: 0; }
    .intro-ken-split-slide.expanded .split-hero-contact-btn,
    .intro-ken-split-slide.expanded .split-hero-personal-btn { opacity: 0; pointer-events: none; }
    .intro-ken-split-slide.expanded .floating-elements-container,
    .intro-ken-split-slide.expanded .float-img,
    .intro-ken-split-slide.expanded .float-el { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease; }
    /* Title block: behind backdrop (z 35) so gradual backdrop can show over it */
    .intro-ken-split-slide .ken-expanded-hero {
      position: absolute; top: 10%; z-index: 35;
      opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
    }
    .intro-ken-split-slide .ken-expanded-hero-teacher { right: 60px; left: auto; }
    .intro-ken-split-slide .ken-expanded-hero-consultant { left: 60px; right: auto; }
    .intro-ken-split-slide.expanded-left .ken-expanded-hero-teacher,
    .intro-ken-split-slide.expanded-right .ken-expanded-hero-consultant { opacity: 1; }
    .intro-ken-split-slide .ken-expanded-hero .ken-expanded-title { position: static; opacity: 1; }
    /* Read more block: on top of backdrop (z 56) so it's clickable; positioned under the title */
    .intro-ken-split-slide .ken-expanded-hero-actions {
      position: absolute; top: 35px; z-index: 56;
      opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
    }
    /* Read more on the opposite side from the title */
    .intro-ken-split-slide .ken-expanded-hero-actions-teacher { left: 15px; right: auto; }
    .intro-ken-split-slide .ken-expanded-hero-actions-consultant { right: 85px; left: auto; }
    .intro-ken-split-slide.expanded-left .ken-expanded-hero-actions-teacher,
    .intro-ken-split-slide.expanded-right .ken-expanded-hero-actions-consultant { opacity: 1; pointer-events: auto; }
    .intro-ken-split-slide .ken-expanded-hero-actions .ken-read-more { opacity: 1; pointer-events: auto; }
    .intro-ken-split-slide .ken-expanded-title { pointer-events: none; transition: opacity 0.35s ease; font-family: 'Poppins', sans-serif; font-weight: 800; }
    .intro-ken-split-slide .ken-expanded-title-consultant { font-size: 50px; letter-spacing: 2px; color: #fbbf24; text-shadow: 0 0 20px rgba(251, 191, 36, 0.4); }
    .intro-ken-split-slide .ken-expanded-title-teacher { font-size: 70px; letter-spacing: -1px; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,0.5); font-family: 'Bright Chalk', cursive; font-weight: normal; }
    .intro-ken-split-slide .ken-read-more {
      display: none; /* shown only in narrow view (max-width: 1120px) */
      background: none; border: none; cursor: pointer;
      flex-direction: column; align-items: center; gap: 4px;
      color: rgba(255, 255, 255, 0.5); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.5px;
      transition: opacity 0.35s ease;
    }
    .intro-ken-split-slide .ken-read-more i { font-size: 14px; }
    .intro-ken-split-slide .ken-read-more:hover { color: rgba(255, 255, 255, 0.85); }
    .intro-ken-split-slide .ken-read-more-consultant { color: rgba(251, 191, 36, 0.55); }
    .intro-ken-split-slide .ken-read-more-consultant:hover { color: rgba(251, 191, 36, 0.9); }
    .intro-ken-split-slide.expanded-left .details-left { padding-right: 320px; }
    .intro-ken-split-slide.expanded-right .details-right { padding-left: 320px; }
    /* Keep story view sharp when cursor leaves the window (viewport loses :hover; avoid inheriting any parent filter) */
    .intro-ken-split-slide.expanded {
      filter: none !important;
    }
    .intro-ken-split-slide.expanded .slide-container {
      filter: none !important;
    }
    /* Narrow view: details as fixed overlay; transparent top 100vh so photo shows, solid below (no block at bottom) */
    @media (max-width: 1120px) {
      /* Only the green (teacher) backdrop – not consultant or consultant-base */
      .intro-ken-split-slide.expanded-left .ken-details-scroll-backdrop:not(.ken-details-scroll-backdrop-consultant):not(.ken-details-scroll-backdrop-consultant-base) {
        display: block;
      }
      /* Solid yellow behind photo/title when entrepreneur side expanded */
      .intro-ken-split-slide.expanded-right .ken-details-scroll-backdrop-consultant-base {
        display: block;
      }
      /* Gradual yellow above photo/title, below story+boxes (opacity driven by JS on scroll) */
      .intro-ken-split-slide.expanded-right .ken-details-scroll-backdrop-consultant {
        display: block;
        opacity: 0;
      }
      /* Read more only on narrow view; wide view has no scroll overlay so no need for it */
      .intro-ken-split-slide .ken-read-more { display: flex; }
      .intro-ken-split-slide.expanded .context-bg-container {
        z-index: 55;
        background: transparent;
      }
      .intro-ken-split-slide.expanded .context-panel-teacher {
        background: transparent;
      }
      .intro-ken-split-slide.expanded .context-panel-business {
        background: transparent;
      }
      .intro-ken-split-slide.expanded-left .ken-photo-container {
        background-color: #112018;
      }
      .intro-ken-split-slide.expanded-right .ken-photo-container {
        background-color: #3c2b10;
      }
      .intro-ken-split-slide.expanded .details-panel {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        padding-top: 100vh;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 40px;
        box-sizing: border-box;
        overflow-y: auto;
        z-index: 55;
        display: block;
      }
      .intro-ken-split-slide.expanded .details-panel.details-left {
        background: transparent;
        padding-right: 24px;
        backdrop-filter: none;
      }
    .intro-ken-split-slide .ken-details-scroll-backdrop {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: #112018;
      opacity: 0;
      pointer-events: none;
      z-index: 40;
      transition: opacity 0.2s ease;
      display: none;
    }
    /* Narrow view: consultant base = solid yellow behind photo/title (z 20); consultant = gradual yellow above photo/title (z 40) */
    @media (max-width: 1120px) {
      .intro-ken-split-slide .ken-details-scroll-backdrop-consultant-base {
        position: fixed;
        left: 0; top: 0; right: 0; bottom: 0;
        width: 100%; height: 100%;
        background: #3c2b10;
        opacity: 0.9;
        pointer-events: none;
        z-index: 20;
        transition: opacity 0.2s ease;
        display: none;
      }
      .intro-ken-split-slide.expanded .ken-details-scroll-backdrop-consultant {
        z-index: 40;
      }
    }
    .intro-ken-split-slide .ken-details-scroll-backdrop-consultant {
      background: #3c2b10;
    }
      .intro-ken-split-slide.expanded .details-panel.details-right {
        background: transparent;
        padding-left: 24px;
        backdrop-filter: none;
      }
      .intro-ken-split-slide.expanded-left .details-left,
      .intro-ken-split-slide.expanded-right .details-right {
        padding-right: 24px;
        padding-left: 24px;
      }
      .intro-ken-split-slide.expanded .details-panel .details-title {
        text-align: center;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
      }
      .intro-ken-split-slide.expanded .details-panel .details-grid {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
      }
      .intro-ken-split-slide.expanded .details-left .details-title,
      .intro-ken-split-slide.expanded .details-left .detail-card,
      .intro-ken-split-slide.expanded .details-left .detail-card h3,
      .intro-ken-split-slide.expanded .details-left .detail-card p {
        text-align: center;
      }
      .intro-ken-split-slide.expanded .details-left .detail-card h3 {
        justify-content: center;
      }
      .intro-ken-split-slide.expanded .details-right .details-title,
      .intro-ken-split-slide.expanded .details-right .detail-card,
      .intro-ken-split-slide.expanded .details-right .detail-card h3,
      .intro-ken-split-slide.expanded .details-right .detail-card p {
        text-align: center;
      }
      .intro-ken-split-slide.expanded .details-right .detail-card h3 {
        justify-content: center;
      }
    }
    .intro-ken-split-slide .ken-center-glow {
      position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
      transform: translateX(-50%); z-index: 16; pointer-events: none;
      background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.35) 20%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.35) 80%, transparent 100%);
      box-shadow: 0 0 12px rgba(255,255,255,0.4), 0 0 24px rgba(255,255,255,0.2);
      transition: opacity 0.4s ease 0.7s;
    }
    .intro-ken-split-slide.expanded .ken-center-glow { opacity: 0; transition: opacity 0s; }

    /* Personal life split view */
    .intro-ken-split-slide .split-hero-personal-btn {
      position: absolute; bottom: 30px; left: 40px; display: flex; align-items: center; gap: 10px;
      padding: 10px 20px; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px;
      font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: white; cursor: pointer;
      transition: all 0.3s ease; z-index: 60;
    }
    .intro-ken-split-slide .split-hero-personal-btn:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.05); }
    .intro-ken-split-slide .split-hero-personal-btn i { font-size: 16px; }
    .intro-ken-split-slide .ken-personal-split {
      position: absolute; inset: 0; z-index: 45;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.35s ease 0.1s, visibility 0.35s ease 0.1s;
    }
    .intro-ken-split-slide.personal-life .ken-personal-split {
      opacity: 1; visibility: visible; pointer-events: auto;
    }
    .intro-ken-split-slide .ken-personal-bg {
      position: absolute; top: 0; bottom: 0; z-index: 0;
      background-size: cover; background-position: center; background-repeat: no-repeat;
      transition: width 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) 0.15s;
    }
    .intro-ken-split-slide .ken-personal-bg-forest {
      left: 0; width: 0;
      background-image: url('photos/forestbackground.jpg');
      filter: blur(4px);
    }
    .intro-ken-split-slide .ken-personal-bg-surf {
      right: 0; width: 0;
      background-image: url('photos/surfbackground.jpg');
      filter: blur(2px);
    }
    .intro-ken-split-slide.personal-life .ken-personal-bg-forest,
    .intro-ken-split-slide.personal-life .ken-personal-bg-surf {
      width: 50%;
    }
    @keyframes ken-personal-surfboard-tilt {
      0%, 100% { transform: rotate(-1deg); }
      50% { transform: rotate(1deg); }
    }
    @keyframes ken-personal-guitar-tilt {
      0%, 100% { transform: rotate(37deg); }
      50% { transform: rotate(39deg); }
    }
    .intro-ken-split-slide .ken-personal-surfboard,
    .intro-ken-split-slide .ken-personal-guitar {
      position: absolute;
      width: 600px;
      max-width: none;
      max-height: none;
      max-width:100vh;
      z-index: 0;
      pointer-events: none;
      filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
      transition: opacity 0.8s ease-in-out;
      animation: ken-personal-surfboard-tilt 8s ease-in-out infinite;
    }
    .intro-ken-split-slide .ken-personal-surfboard {
      left: calc(50% - 180px);
      bottom: -424px;
    }
    .intro-ken-split-slide .ken-personal-guitar {
      left: calc(50% - 150px);
      bottom: -250px;
      animation-name: ken-personal-guitar-tilt;
    }
    .intro-ken-split-slide .ken-personal-surfboard { opacity: 0; }
    .intro-ken-split-slide .ken-personal-guitar { opacity: 0; }
    .intro-ken-split-slide.personal-life .ken-personal-surfboard {
      opacity: 1;
    }
    .intro-ken-split-slide.personal-life .ken-personal-photo-wrap.ken-personal-show-guitar .ken-personal-surfboard {
      opacity: 0;
    }
    .intro-ken-split-slide.personal-life .ken-personal-photo-wrap.ken-personal-show-guitar .ken-personal-guitar {
      opacity: 1;
    }
    /* Centered photo wrap â€" same idea as .ken-photo-container (suit/casual) */
    .intro-ken-split-slide .ken-personal-photo-wrap {
      position: absolute; bottom: 0; left: 50%;
      height: 100%; width: 100%;
      z-index: 2; pointer-events: none; overflow: hidden;
      transform: translateX(-50%) scale(0.88);
      opacity: 0;
      transition: transform 0.65s cubic-bezier(0.34, 1.2, 0.64, 1) 0.3s, opacity 0.5s ease 0.35s;
    }
    .intro-ken-split-slide.personal-life .ken-personal-photo-wrap {
      transform: translateX(-50%) scale(1);
      opacity: 1;
    }
    .intro-ken-split-slide .ken-personal-img {
      position: absolute; bottom: 0; left: 50%;
      height: 100%; width: auto; max-width: none; margin: 0;
      object-fit: cover; object-position: center bottom;
      transform-origin: center bottom;
      transform: translateX(-50%) scale(1.5);
      filter: drop-shadow(0 0 30px rgba(0,0,0,0.6));
      transition: all 0.8s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
    .intro-ken-split-slide .ken-personal-dad {
      z-index: 2;
      clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    }
    .intro-ken-split-slide .ken-personal-surf {
      z-index: 1;
      clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    }
    .intro-ken-split-slide .ken-personal-label {
      position: absolute; bottom: 24px; font-family: 'Bright Chalk', cursive; font-size: 42px; font-weight: normal;
      color: white; text-shadow: 0 4px 20px rgba(0,0,0,0.6); z-index: 10;
      opacity: 0; transform: translateY(24px);
      transition: opacity 0.5s ease 0.7s, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) 0.7s;
    }
    .intro-ken-split-slide .ken-personal-label-dad { left: 24px; }
    .intro-ken-split-slide .ken-personal-label-surf { right: 24px; }
    .intro-ken-split-slide.personal-life .ken-personal-label {
      opacity: 1; transform: translateY(0);
    }
    .intro-ken-split-slide .ken-personal-divider {
      position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
      transform: translateX(-50%) scaleY(0); z-index: 50;
      background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.5) 20%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.5) 80%, transparent 100%);
      box-shadow: 0 0 20px rgba(255,255,255,0.4);
      transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 0.55s;
      transform-origin: center top;
    }
    .intro-ken-split-slide.personal-life .ken-personal-divider {
      transform: translateX(-50%) scaleY(1);
    }
    /* When personal-life: business view hides (scale + blur), then personal view shows; on close: personal fades out, business fades in */
    .intro-ken-split-slide .context-bg-container,
    .intro-ken-split-slide .ken-photo-container,
    .intro-ken-split-slide .split-hero-content,
    .intro-ken-split-slide .split-hero-contact-btn,
    .intro-ken-split-slide .split-hero-personal-btn,
    .intro-ken-split-slide .split-hero-helper,
    .intro-ken-split-slide .split-hero-nav-wrap,
    .intro-ken-split-slide #kenParticleCanvas,
    .intro-ken-split-slide .ken-center-glow {
      transition: opacity 0.5s ease, visibility 0.5s ease,
                  transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
    }
    .intro-ken-split-slide.personal-life .context-bg-container,
    .intro-ken-split-slide.personal-life .split-hero-content,
    .intro-ken-split-slide.personal-life .split-hero-contact-btn,
    .intro-ken-split-slide.personal-life .split-hero-personal-btn,
    .intro-ken-split-slide.personal-life .split-hero-helper,
    .intro-ken-split-slide.personal-life .split-hero-nav-wrap,
    .intro-ken-split-slide.personal-life #kenParticleCanvas,
    .intro-ken-split-slide.personal-life .ken-center-glow {
      opacity: 0; visibility: hidden; pointer-events: none;
      transform: scale(0.94);
      filter: blur(10px);
      transition: opacity 0.5s ease, visibility 0s linear 0.5s,
                  transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
    }
    .intro-ken-split-slide.personal-life .ken-photo-container {
      opacity: 0; visibility: hidden; pointer-events: none;
      transform: translateX(-50%) scale(0.94);
      filter: blur(10px);
      transition: opacity 0.5s ease, visibility 0s linear 0.5s,
                  transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
    }
    .intro-ken-split-slide.personal-life .close-btn { opacity: 1; pointer-events: auto; }

    /* Responsive: titles and buttons */
    @media (max-width: 900px) {
      .intro-ken-split-slide .split-hero-heading-left {
        font-size: 42px;
      }
      .intro-ken-split-slide .split-hero-heading-right {
        font-size: 42px;
        letter-spacing: -1px;
      }
    }
    @media (max-width: 700px) {
      .intro-ken-split-slide .split-hero-heading-left { font-size: 34px; }
      .intro-ken-split-slide .split-hero-heading-right { font-size: 34px; }
    }
    @media (max-width: 550px) {
      .intro-ken-split-slide .split-hero-heading-left { font-size: 24px; }
      .intro-ken-split-slide .split-hero-heading-right { font-size: 24px; }
      .intro-ken-split-slide .ken-expanded-title-consultant { font-size: 28px; letter-spacing: 1px; }
      .intro-ken-split-slide .ken-expanded-title-teacher { font-size: 38px; }
      .intro-ken-split-slide .ken-expanded-hero-teacher { right: 24px; }
      .intro-ken-split-slide .ken-expanded-hero-consultant { left: 24px; }
      .intro-ken-split-slide .ken-expanded-hero-actions-teacher { left: 15px; top: 35px; }
      .intro-ken-split-slide .ken-expanded-hero-actions-consultant { right: 85px; top: 35px; }
    }
    @media (max-width: 450px) {
      .intro-ken-split-slide .ken-personal-label-dad,
      .intro-ken-split-slide .ken-personal-label-surf {
        display: none;
      }
    }
    @media (max-width: 640px) {
      .intro-ken-split-slide .split-hero-contact-btn {
        bottom: 80px;
      }
      .intro-ken-split-slide .split-hero-personal-btn {
        bottom: 30px;
        left: 20px;
        padding: 8px 14px;
        font-size: 13px;
      }
      .intro-ken-split-slide .split-hero-nav-wrap {
        bottom: 30px;
        right: 20px;
      }
      .intro-ken-split-slide .split-hero-skip {
        padding: 8px 14px;
        font-size: 13px;
      }
    }
    @media (max-width: 400px) {
      .intro-ken-split-slide .split-hero-contact-btn span,
      .intro-ken-split-slide .split-hero-personal-btn span,
      .intro-ken-split-slide .split-hero-skip span {
        display: none;
      }
      .intro-ken-split-slide .split-hero-contact-btn {
        padding: 12px 16px;
        bottom: 78px;
      }
      .intro-ken-split-slide .split-hero-contact-btn i { font-size: 20px; }
      .intro-ken-split-slide .split-hero-personal-btn {
        padding: 12px 14px;
        left: 16px;
      }
      .intro-ken-split-slide .split-hero-personal-btn i { font-size: 18px; }
      .intro-ken-split-slide .split-hero-nav-wrap {
        right: 16px;
      }
      .intro-ken-split-slide .split-hero-skip {
        padding: 12px 14px;
      }
      .intro-ken-split-slide .split-hero-skip i { font-size: 18px; }
      .intro-ken-split-slide .split-hero-prev i { font-size: 12px; }
      .intro-ken-split-slide .split-hero-text-left,
      .intro-ken-split-slide .split-hero-text-right {
        display: none;
      }
      .intro-ken-split-slide .split-hero-helper {
        display: none;
      }
    }
/* Hide Reveal.js nav controls when Ken slide is active (data-state applied to viewport) */
.reveal-viewport.hide-controls .reveal .controls {
  display: none !important;
}

/* Custom scrollbar for Teacher/Entrepreneur story panels – fixed at right edge of screen */
.intro-ken-split-slide .ken-details-custom-scrollbar {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14px;
  z-index: 56;
  pointer-events: none;
  padding: 8px 0;
  box-sizing: border-box;
}
.intro-ken-split-slide.expanded .ken-details-custom-scrollbar {
  display: block;
  pointer-events: auto;
}
.intro-ken-split-slide .ken-details-scrollbar-track {
  position: absolute;
  top: 8px;
  left: 2px;
  right: 2px;
  bottom: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  cursor: pointer;
}
.intro-ken-split-slide .ken-details-scrollbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 40px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.35);
  cursor: grab;
  transition: background 0.15s ease;
}
.intro-ken-split-slide .ken-details-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
.intro-ken-split-slide .ken-details-scrollbar-thumb:active {
  cursor: grabbing;
}