/* --- TYPOGRAPHY: RECKLESS NEUE & REPLICA LL --- */
@font-face {
  font-family: 'Reckless Neue';
  src: url('https://cdn.prod.website-files.com/69905c96f939ade61f497575/699079ed01a21632ee76f076_RecklessNeue-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Replica LL';
  src: url('https://cdn.prod.website-files.com/69905c96f939ade61f497575/699079dedc7a0e151f1d90d9_ReplicaLLWeb-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- THEME TOKENS --- */
:root {
  --_theme---background: #e0dedd;
  --_theme---body-text: #0d0d0d;
  --_theme---brand: #891a20;
  --_theme---grey: #7c7a78;
  --_theme---border: rgba(13, 13, 13, 0.15);
  --_theme---dark-bg: #0d0d0d;
  --_theme---dark-text: #e0dedd;
  --_theme---dark-border: rgba(224, 222, 221, 0.15);
  --font-display: 'Reckless Neue', Georgia, serif;
  --font-body: 'Replica LL', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --transition-smooth: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.25s ease;
  --ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- DARK MODE --- */
[data-theme="dark"] {
  --_theme---background: #0d0d0d;
  --_theme---body-text: #e0dedd;
  --_theme---grey: #9a9896;
  --_theme---border: rgba(224, 222, 221, 0.12);
}
[data-theme="dark"] body::before { opacity: 0.03; }
[data-theme="dark"] .navbar_fixed { background: rgba(224, 222, 221, 0.08); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .navbar_btn.active { background: var(--_theme---body-text); color: var(--_theme---background); }
[data-theme="dark"] .row-desc { color: rgba(224, 222, 221, 0.7); }
[data-theme="dark"] .case-study-block p { color: rgba(224, 222, 221, 0.7); }
[data-theme="dark"] .form-control { background: rgba(224,222,221,0.06); color: var(--_theme---body-text); }
[data-theme="dark"] .form-control:focus { background: rgba(224,222,221,0.1); }
[data-theme="dark"] .hero_image { filter: grayscale(0.6) brightness(0.9); }
[data-theme="dark"] .hero_image-wrapper:hover .hero_image { filter: grayscale(0) brightness(1); }
[data-theme="dark"] .profile_image { filter: grayscale(0.6) brightness(0.9); }
[data-theme="dark"] .profile_image-wrapper:hover .profile_image { filter: grayscale(0) brightness(1); }
[data-theme="dark"] .booking-card { background: var(--_theme---brand); }
[data-theme="dark"] .ticker-wrap { background: var(--_theme---body-text); }
[data-theme="dark"] .ticker-item { color: var(--_theme---background); }
[data-theme="dark"] .metric-badge { background: rgba(224,222,221,0.06); }
[data-theme="dark"] .background-toggle { color: var(--_theme---body-text); border-color: var(--_theme---border); }
[data-theme="dark"] .bg-item { border-color: var(--_theme---border); }
[data-theme="dark"] .bg-item a { color: var(--_theme---brand); }

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--_theme---border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--_theme---body-text);
  transition: all 0.3s var(--ease-smooth);
}
.theme-toggle:hover { border-color: var(--_theme---brand); color: var(--_theme---brand); }
.theme-icon.moon { display: none; }
[data-theme="dark"] .theme-icon.sun { display: none; }
[data-theme="dark"] .theme-icon.moon { display: block; }

/* --- THEME TRANSITION HELPER --- */
.theme-in-transition,
.theme-in-transition *,
.theme-in-transition *::before,
.theme-in-transition *::after {
  transition: background 0.4s ease !important,
              background-color 0.4s ease !important,
              color 0.4s ease !important,
              border-color 0.4s ease !important,
              filter 0.4s ease !important,
              opacity 0.4s ease !important;
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  background-color: var(--_theme---background);
  color: var(--_theme---body-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
}
html::-webkit-scrollbar { display: none; }
body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--_theme---background);
  transition: background-color 0.4s ease;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('https://cdn.prod.website-files.com/69905c96f939ade61f497575/69905c96f939ade61f49758d_grid-tile.svg');
  opacity: 0.06;
  pointer-events: none;
  z-index: 1000;
}

/* --- CURSOR --- */
.cursor-jm {
  width: 10px; height: 10px;
  background-color: var(--_theme---brand);
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width 0.35s var(--ease-elastic), height 0.35s var(--ease-elastic);
}
.cursor-jm.hovered { width: 40px; height: 40px; background-color: rgba(250,250,250,0.9); }
@media (max-width: 968px), (hover: none) { .cursor-jm { display: none !important; } }

/* --- PRELOADER --- */
.container-loader {
  position: fixed; inset: 0;
  background-color: #0d0d0d;
  z-index: 10000;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.orange-intro {
  display: flex; align-items: center; gap: 0.8rem;
  animation: introFadeIn 0.6s var(--ease-elastic) forwards;
}
@keyframes introFadeIn {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.intro-name { color: #e0dedd; font-family: var(--font-display); font-size: 3rem; font-weight: 400; letter-spacing: -0.04em; }
.dot-jm { width: 8px; height: 8px; background-color: var(--_theme---brand); border-radius: 50%; animation: dotPulse 1.2s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.6; }
}
.grow-line {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--_theme---brand), #c4393f);
}

/* --- FLOATING DOCK NAV --- */
.navbar_fixed {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 2000;
  background: rgba(13, 13, 13, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 90px; padding: 0.4rem;
  display: flex; align-items: center; gap: 0.3rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  animation: dockSlideUp 0.8s var(--ease-elastic) 1.8s forwards;
}
@keyframes dockSlideUp {
  from { transform: translateX(-50%) translateY(100px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.navbar_btn {
  color: rgba(224, 222, 221, 0.55); background: transparent;
  border: none; border-radius: 90px; padding: 0.6rem 1.1rem;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;
  transition: all 0.35s var(--ease-smooth);
  cursor: pointer; white-space: nowrap;
}
.navbar_btn:hover { color: #fafafa; background: var(--_theme---brand); }
.navbar_btn.active { background: #e0dedd; color: #0d0d0d; }
@media (max-width: 768px) {
  .navbar_fixed { width: 92vw; bottom: 1rem; overflow-x: auto; justify-content: flex-start; }
}

/* --- HEADER QUICKNAV --- */
.quicknav {
  position: absolute; top: 0; left: 0; width: 100%;
  padding: 2.5rem 4vw;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 990;
  font-family: var(--font-body); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--_theme---border);
}
.quicknav__logo-link {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
  color: var(--_theme---brand); text-decoration: none; letter-spacing: -0.06em;
}
.quicknav__col { display: flex; align-items: center; gap: 2.5rem; color: var(--_theme---body-text); }
.quicknav__label { display: flex; align-items: center; gap: 0.5rem; color: var(--_theme---grey); }
.quicknav__dot { width: 6px; height: 6px; background-color: var(--_theme---brand); border-radius: 50%; }
@media (max-width: 968px) { .quicknav__col .quicknav__label { display: none; } }

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.05em; }
.heading-xl { font-size: 5.8vw; color: var(--_theme---body-text); line-height: 1; }
.section-title-large {
  font-family: var(--font-display); font-size: 3.5rem; font-weight: 400;
  letter-spacing: -0.04em; color: var(--_theme---body-text); margin-bottom: 4rem;
}
.section-title-large span { color: var(--_theme---brand); font-family: var(--font-mono); font-size: 1rem; vertical-align: super; margin-right: 0.5rem; }

/* --- HERO SPLIT LAYOUT --- */
.hero_split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.hero_text-col { display: flex; flex-direction: column; gap: 2rem; }
.hero_tagline {
  font-family: var(--font-body);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--_theme---grey);
  max-width: 480px;
}
.hero_meta {
  display: flex; flex-direction: column; gap: 0.8rem;
  font-family: var(--font-body); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--_theme---grey);
}
.hero_meta strong { color: var(--_theme---body-text); }
.hero_cta-row { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.hero_image-col { display: flex; justify-content: center; }
.hero_image-wrapper {
  width: 100%; max-width: 480px;
  border: 1px solid var(--_theme---border);
  border-radius: 20px; overflow: hidden;
  aspect-ratio: 3/4;
  background-color: var(--_theme---background);
}
.hero_image {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  filter: grayscale(1);
  transition: filter 1s var(--ease-elastic), transform 1.2s var(--ease-elastic);
}
.hero_image-wrapper:hover .hero_image { filter: grayscale(0); transform: scale(1.03); }

@media (max-width: 968px) {
  .hero_split { grid-template-columns: 1fr; gap: 3rem; }
  .hero_text-col { order: 1; }
  .hero_image-col { order: 0; }
  .heading-xl { font-size: 12vw; }
  .hero_image-wrapper { max-width: 320px; }
}

/* --- BUTTONS --- */
.btn-blue {
  display: inline-block;
  background: var(--_theme---brand); color: #fff;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.9rem 2rem;
  border: 2px solid var(--_theme---brand); border-radius: 90px;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: all 0.35s var(--ease-smooth);
}
.btn-blue:hover { background: transparent; color: var(--_theme---brand); transform: translateY(-2px); }
.btn-outline {
  display: inline-block;
  background: transparent; color: var(--_theme---body-text);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.9rem 2rem;
  border: 2px solid var(--_theme---border); border-radius: 90px;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: all 0.35s var(--ease-smooth);
}
.btn-outline:hover { border-color: var(--_theme---brand); color: var(--_theme---brand); transform: translateY(-2px); }

/* --- TICKER --- */
.ticker-wrap {
  width: 100vw; overflow: hidden;
  background: var(--_theme---body-text); padding: 1.4rem 0;
  position: relative;
}
.ticker-content { display: flex; white-space: nowrap; animation: marquee 25s linear infinite; }
.ticker-item {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  text-transform: uppercase; color: var(--_theme---background);
  letter-spacing: 0.15em; padding: 0 4rem;
}
.ticker-wrap:hover .ticker-content { animation-play-state: paused; }
@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* --- SECTIONS --- */
.section { padding: 8rem 4vw; border-bottom: 1px solid var(--_theme---border); }

/* --- ROW LIST --- */
.row-list { display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto; width: 100%; }
.row-item {
  display: grid; grid-template-columns: 0.28fr 0.48fr 0.24fr;
  padding: 3rem 0; border-top: 1px solid var(--_theme---border);
  align-items: flex-start;
  transition: all 0.5s var(--ease-elastic);
}
.row-item:hover { padding-left: 1.5rem; background-color: rgba(137, 26, 32, 0.04); border-radius: 8px; }
.row-title-box { display: flex; flex-direction: column; gap: 0.4rem; }
.row-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; }
.row-company { font-family: var(--font-body); font-size: 0.95rem; color: var(--_theme---brand); text-transform: uppercase; letter-spacing: 0.05em; }
.row-desc { font-size: 1.1rem; line-height: 1.6; color: rgba(13, 13, 13, 0.7); }
.row-meta { font-family: var(--font-mono); font-size: 0.85rem; text-align: right; color: var(--_theme---grey); }
@media (max-width: 968px) {
  .row-item { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
  .row-meta { text-align: left; }
}

/* --- PROFILE --- */
.profile_grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 6rem; align-items: center; max-width: 1200px; margin: 0 auto; }
.profile_image-wrapper { border: 1px solid var(--_theme---border); border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; }
.profile_image {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  filter: grayscale(1);
  transition: filter 1s var(--ease-elastic), transform 1.2s var(--ease-elastic);
}
.profile_image-wrapper:hover .profile_image { filter: grayscale(0); transform: scale(1.03); }
.profile_text-col { display: flex; flex-direction: column; gap: 2rem; }
.profile_quote { font-family: var(--font-display); font-size: 2rem; line-height: 1.25; color: var(--_theme---brand); }
@media (max-width: 968px) { .profile_grid { grid-template-columns: 1fr; gap: 3rem; } }

/* --- PROJECTS --- */
.project-item { border-top: 1px solid var(--_theme---border); padding: 3rem 0; transition: all 0.5s var(--ease-elastic); }
.project-item:first-child { border-top: none; }
.project-item:hover { background-color: rgba(137, 26, 32, 0.02); padding-left: 1rem; border-radius: 8px; }
.project-header-row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.project-title-col { flex: 1 1 320px; display: flex; flex-direction: column; gap: 0.4rem; }
.project-metrics { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.metric-badge {
  background: rgba(13, 13, 13, 0.03); border: 1px solid var(--_theme---border);
  color: var(--_theme---body-text); font-family: var(--font-mono); font-size: 0.75rem;
  text-transform: uppercase; padding: 0.4rem 0.8rem; border-radius: 90px; letter-spacing: 0.05em;
  transition: all 0.3s var(--ease-smooth);
}
.metric-badge:hover { background: var(--_theme---brand); color: #fff; border-color: var(--_theme---brand); }
.case-study-toggle-btn {
  background: transparent; border: 1px solid var(--_theme---body-text);
  color: var(--_theme---body-text); font-family: var(--font-body); font-size: 0.8rem;
  text-transform: uppercase; font-weight: 500; letter-spacing: 0.08em;
  padding: 0.6rem 1.4rem; border-radius: 90px; cursor: pointer;
  transition: all 0.35s var(--ease-smooth);
}
.case-study-toggle-btn:hover { background: var(--_theme---brand); color: #fff; border-color: var(--_theme---brand); }
.case-study-toggle-btn.active { background: var(--_theme---body-text); color: var(--_theme---background); }
.project-actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.project-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent; border: 1px solid var(--_theme---border);
  color: var(--_theme---body-text); font-family: var(--font-body); font-size: 0.8rem;
  text-transform: uppercase; font-weight: 500; letter-spacing: 0.08em;
  padding: 0.6rem 1.4rem; border-radius: 90px; text-decoration: none;
  transition: all 0.35s var(--ease-smooth);
}
.project-link-btn:hover { background: var(--_theme---brand); color: #fff; border-color: var(--_theme---brand); }
.case-study-details { max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease-smooth); }
.case-study-details.expanded { max-height: 1200px; border-top: 1px dashed var(--_theme---border); margin-top: 2rem; padding-top: 2.5rem; }
.case-study-content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; padding-bottom: 1rem; }
.case-study-block { display: flex; flex-direction: column; gap: 0.8rem; }
.case-study-block h4 { font-family: var(--font-display); font-size: 1.15rem; color: var(--_theme---brand); text-transform: uppercase; letter-spacing: 0.05em; }
.case-study-block p { font-size: 1rem; line-height: 1.6; color: rgba(13, 13, 13, 0.7); }
@media (max-width: 968px) {
  .case-study-content-grid { grid-template-columns: 1fr; gap: 2rem; }
  .project-header-row { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .project-actions { width: 100%; flex-direction: column; gap: 0.6rem; }
  .case-study-toggle-btn, .project-link-btn { width: 100%; text-align: center; }
}

/* --- SKILLS WITH PROFICIENCY TAGS --- */
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; max-width: 1200px; margin: 0 auto; width: 100%; }
.skills-column { display: flex; flex-direction: column; gap: 2rem; }
.skills-col-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; border-bottom: 1px solid var(--_theme---border); padding-bottom: 1rem; color: var(--_theme---brand); }
.skills-list-clean { list-style: none; display: flex; flex-direction: column; gap: 1.2rem; }
.skills-list-clean li {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-body); font-size: 1.05rem;
  border-bottom: 1px dashed rgba(13, 13, 13, 0.08); padding-bottom: 0.8rem;
  transition: all 0.3s var(--ease-smooth);
}
.skills-list-clean li:hover { padding-left: 0.5rem; }
.skills-list-clean li span { color: var(--_theme---body-text); font-weight: 500; }

/* Proficiency Tags */
.skills-list-clean li strong {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.25rem 0.7rem; border-radius: 90px;
}
.tag-expert { background: var(--_theme---brand); color: #fff; }
.tag-advanced { background: rgba(137, 26, 32, 0.12); color: var(--_theme---brand); }
.tag-proficient { background: rgba(13, 13, 13, 0.06); color: var(--_theme---grey); }
.tag-learning { background: transparent; border: 1px dashed var(--_theme---border); color: var(--_theme---grey); }
[data-theme="dark"] .tag-advanced { background: rgba(137, 26, 32, 0.3); }
[data-theme="dark"] .tag-proficient { background: rgba(224,222,221,0.08); }

@media (max-width: 968px) { .skills-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* --- TESTIMONIALS --- */
.testimonials-header-row { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto 3rem; width: 100%; }
.testimonials-header-row .section-title-large { margin-bottom: 0; }
.testimonials-nav { display: flex; align-items: center; gap: 1.5rem; }
.nav-arrow-btn {
  background: transparent; border: 1px solid var(--_theme---border);
  color: var(--_theme---body-text); width: 48px; height: 48px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer;
  transition: all 0.35s var(--ease-smooth);
}
.nav-arrow-btn:hover { border-color: var(--_theme---brand); color: #fff; background: var(--_theme---brand); transform: scale(1.1); }
.testimonials-counter { font-family: var(--font-mono); font-size: 0.9rem; color: var(--_theme---body-text); opacity: 0.65; min-width: 60px; text-align: center; }
.testimonials-slider-container {
  width: 100%; overflow-x: auto; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  max-width: 1200px; margin: 0 auto; padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
}
.testimonials-slider-container::-webkit-scrollbar { display: none; }
.testimonials-wrapper { display: flex; gap: 3rem; }
.testimonial-card-jm {
  flex: 0 0 520px; scroll-snap-align: start;
  border: 1px solid var(--_theme---border); border-radius: 24px;
  padding: 3.5rem; display: flex; flex-direction: column;
  justify-content: space-between; min-height: 380px;
  transition: all 0.5s var(--ease-elastic); position: relative; overflow: hidden;
}
.testimonial-card-jm::before {
  content: '\201C'; position: absolute; top: -10px; left: 20px;
  font-family: var(--font-display); font-size: 8rem;
  color: var(--_theme---brand); opacity: 0.06; line-height: 1; pointer-events: none;
}
.testimonial-card-jm:hover { border-color: var(--_theme---brand); box-shadow: 0 20px 60px rgba(137, 26, 32, 0.08); transform: translateY(-4px); }
.testimonial-text-jm { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.5; color: var(--_theme---body-text); font-style: italic; }
.testimonial-author-jm { margin-top: 2rem; border-top: 1px solid var(--_theme---border); padding-top: 1.2rem; }
.testimonial-name-jm { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--_theme---brand); display: block; text-transform: uppercase; letter-spacing: 0.05em; }
.testimonial-role-jm { font-size: 0.85rem; color: var(--_theme---grey); margin-top: 0.2rem; display: block; }
@media (max-width: 768px) {
  .testimonials-header-row { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .testimonial-card-jm { flex: 0 0 85vw; padding: 2.5rem 2rem; min-height: 340px; }
  .testimonial-text-jm { font-size: 1.05rem; }
}

/* --- BACKGROUND ACCORDION --- */
.background-group { border-top: 1px solid var(--_theme---border); max-width: 1200px; margin: 0 auto; }
.background-group:last-child { border-bottom: 1px solid var(--_theme---border); }
.background-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 2rem 0; background: transparent; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 400;
  color: var(--_theme---body-text); letter-spacing: -0.03em;
  transition: all 0.3s var(--ease-smooth);
}
.background-toggle:hover { padding-left: 1rem; color: var(--_theme---brand); }
.bg-toggle-icon {
  font-family: var(--font-mono); font-size: 1.5rem; color: var(--_theme---brand);
  transition: transform 0.4s var(--ease-elastic);
}
.background-toggle.active .bg-toggle-icon { transform: rotate(45deg); }
.background-content {
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s var(--ease-smooth);
}
.background-content.expanded { max-height: 800px; padding-bottom: 2rem; }
.bg-items { display: flex; flex-direction: column; gap: 0.8rem; padding-left: 1rem; }
.bg-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0; border-bottom: 1px dashed rgba(13, 13, 13, 0.06);
  font-size: 0.95rem;
}
.bg-item strong { font-family: var(--font-body); font-weight: 500; color: var(--_theme---body-text); }
.bg-item span { font-family: var(--font-mono); font-size: 0.8rem; color: var(--_theme---grey); text-align: right; }
.bg-item a { color: var(--_theme---brand); text-decoration: none; font-weight: 500; }
.bg-item a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .bg-item { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .bg-item span { text-align: left; }
}

/* --- CONTACT --- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5rem; max-width: 1200px; margin: 0 auto; width: 100%; }
.contact-personal-card { border: 1px solid var(--_theme---border); border-radius: 24px; padding: 3.5rem; display: flex; flex-direction: column; gap: 2rem; }
.contact-card-title { font-family: var(--font-display); font-size: 2rem; font-weight: 400; border-bottom: 1px solid var(--_theme---border); padding-bottom: 1rem; }
.ticket-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--_theme---grey); text-transform: uppercase; letter-spacing: 0.05em; }
.form-control {
  background: rgba(13, 13, 13, 0.03);
  border: 1px solid rgba(13, 13, 13, 0.08);
  color: var(--_theme---body-text); font-family: var(--font-body); font-size: 1rem;
  padding: 1rem 1.2rem; outline: none; border-radius: 8px;
  transition: all 0.35s var(--ease-smooth);
}
[data-theme="dark"] .form-control {
  border: 1px solid rgba(224, 222, 221, 0.08);
}
.form-control:focus {
  border-color: var(--_theme---brand);
  background: rgba(137, 26, 32, 0.02);
  box-shadow: 0 0 0 4px rgba(137, 26, 32, 0.08);
}
[data-theme="dark"] .form-control:focus {
  background: rgba(224, 222, 221, 0.04);
}
.form-control:user-valid {
  border-color: rgba(39, 201, 63, 0.4);
}
.form-control:user-valid:focus {
  border-color: #27c93f;
  box-shadow: 0 0 0 4px rgba(39, 201, 63, 0.1);
}
.form-control:user-invalid {
  border-color: rgba(255, 95, 86, 0.5);
}
.form-control:user-invalid:focus {
  border-color: #ff5f56;
  box-shadow: 0 0 0 4px rgba(255, 95, 86, 0.15);
}
textarea.form-control { min-height: 120px; resize: vertical; }
.booking-card {
  text-align: center; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  background: var(--_theme---brand); border-radius: 24px; padding: 4rem; color: #fff;
  position: relative; overflow: hidden;
}
.booking-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); pointer-events: none; }
.booking-card h3 { font-size: 2.8rem; margin-bottom: 1.5rem; }
.booking-card p { color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; line-height: 1.6; max-width: 400px; margin-bottom: 2.5rem; }
.booking-card .btn-blue { background-color: #fff; color: var(--_theme---brand); border-color: #fff; }
.booking-card .btn-blue:hover { background-color: transparent; color: #fff; }
@media (max-width: 968px) {
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .booking-card { padding: 3rem 1.5rem; }
}

/* --- FOOTER CTA --- */
.footer-cta {
  background: var(--_theme---dark-bg);
  padding: 8rem 4vw;
  color: #e0dedd;
}
[data-theme="dark"] .footer-cta { background: #161616; }
.footer-cta-inner { max-width: 1200px; margin: 0 auto; }
.footer-cta-heading {
  font-family: var(--font-display); font-size: 5rem; font-weight: 400;
  line-height: 1.05; letter-spacing: -0.05em;
  color: #e0dedd; margin-bottom: 5rem;
}
.footer-links-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem; padding-bottom: 5rem;
  border-bottom: 1px solid rgba(224, 222, 221, 0.1);
}
.footer-link-item {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(224, 222, 221, 0.1);
  transition: all 0.3s var(--ease-smooth);
}
.footer-link-item:hover { padding-left: 1rem; }
.footer-link-item:hover .footer-link-value { color: var(--_theme---brand); }
.footer-link-label {
  font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(224, 222, 221, 0.4);
}
.footer-link-value {
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
  color: rgba(224, 222, 221, 0.85);
  transition: color 0.3s ease;
}
.footer-bottom { padding-top: 3rem; }
.footer-bottom .footer-copy { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(224, 222, 221, 0.3); }
@media (max-width: 768px) {
  .footer-cta-heading { font-size: 2.8rem; margin-bottom: 3rem; }
  .footer-links-row { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* --- SCROLL REVEAL --- */
.reveal-el { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease-elastic), transform 1.2s var(--ease-elastic); will-change: opacity, transform; }
.reveal-el.revealed { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }
.delay-4 { transition-delay: 0.48s; }
.delay-5 { transition-delay: 0.60s; }

.row-item, .project-item { opacity: 0; transform: translateY(25px); transition: opacity 0.8s var(--ease-elastic), transform 0.8s var(--ease-elastic), padding 0.5s var(--ease-elastic), background-color 0.5s var(--ease-elastic); }
.row-item.revealed, .project-item.revealed { opacity: 1; transform: translateY(0); }
.section-title-large { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease-elastic), transform 1s var(--ease-elastic); }
.section-title-large.revealed { opacity: 1; transform: translateY(0); }
.hero_image-wrapper, .profile_image-wrapper { opacity: 0; transform: scale(0.96); transition: opacity 1s var(--ease-elastic), transform 1.2s var(--ease-elastic); }
.hero_image-wrapper.revealed, .profile_image-wrapper.revealed { opacity: 1; transform: scale(1); }
.skills-list-clean li { opacity: 0; transform: translateX(-15px); transition: opacity 0.6s var(--ease-elastic), transform 0.6s var(--ease-elastic), padding 0.3s var(--ease-smooth); }
.skills-list-clean li.revealed { opacity: 1; transform: translateX(0); }
.testimonial-card-jm { opacity: 0; transform: translateY(30px); }
.testimonial-card-jm.revealed { opacity: 1; transform: translateY(0); }
.form-group { opacity: 0; transform: translateY(15px); transition: opacity 0.6s var(--ease-elastic), transform 0.6s var(--ease-elastic); }
.form-group.revealed { opacity: 1; transform: translateY(0); }
.background-group { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-elastic), transform 0.6s var(--ease-elastic); }
.background-group.revealed { opacity: 1; transform: translateY(0); }

/* Page Entrance */
.main { animation: pageEnter 0.8s var(--ease-elastic) forwards; }
@keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(137, 26, 32, 0.3); } 50% { box-shadow: 0 0 0 12px rgba(137, 26, 32, 0); } }

/* --- SKIP LINK (a11y) --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100000;
  background: var(--_theme---brand);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 0 0 8px 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 0.3s ease;
}
.skip-link:focus {
  top: 0;
}

/* --- REDUCED MOTION (a11y) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-content { animation: none !important; }
  .container-loader { transition: none !important; }
  .reveal-el, .row-item, .project-item, .section-title-large,
  .hero_image-wrapper, .profile_image-wrapper,
  .testimonial-card-jm, .skills-list-clean li,
  .form-group, .background-group {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   CASE STUDY SPLIT LAYOUT & CUSTOM CSS VISUAL MOCKUPS
   ========================================================================== */

.case-study-split-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: start;
  padding-bottom: 2rem;
}

.case-study-text-col {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.case-study-visual-col {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 400px;
  background: rgba(13, 13, 13, 0.03);
  border: 1px solid var(--_theme---border);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.3s var(--ease-smooth);
}

[data-theme="dark"] .case-study-visual-col {
  background: rgba(224, 222, 221, 0.02);
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.01);
}

.project-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-smooth), opacity 0.25s ease;
  opacity: 1;
}

.case-study-visual-col:hover .project-screenshot {
  transform: scale(1.03);
}

/* Adapt container height for image screenshots to eliminate uneasy blank spaces */
.case-study-visual-col:has(img) {
  min-height: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.2rem;
  background: rgba(13, 13, 13, 0.04);
}

[data-theme="dark"] .case-study-visual-col:has(img) {
  background: rgba(224, 222, 221, 0.03);
}

.case-study-visual-col:has(img) .screenshot-wrapper {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.case-study-visual-col:has(img) .project-screenshot {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(13, 13, 13, 0.08);
  transition: transform 0.5s var(--ease-smooth), opacity 0.25s ease;
}

[data-theme="dark"] .case-study-visual-col:has(img) .project-screenshot {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tab Switching Screenshot Gallery */
.screenshot-tab-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.tab-controls {
  position: relative;
  margin: 0;
  z-index: 10;
  display: flex;
  gap: 4px;
  background: rgba(13, 17, 23, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 4px;
  border-radius: 90px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 90px;
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
}

.tab-btn:hover {
  color: var(--color-text-primary);
}

.tab-btn.active {
  background: var(--_theme---brand);
  color: #fff;
}

.screenshot-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}



/* Base Mockup UI Canvas */
.mockup-canvas {
  width: 90%;
  height: 90%;
  min-height: 340px;
  background: #1e1e1e;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
  color: #f3f3f3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Mockup Window Header (traffic lights) */
.mockup-header {
  height: 32px;
  background: #141414;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}
.mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.mockup-dot.red { background: #ff5f56; }
.mockup-dot.yellow { background: #ffbd2e; }
.mockup-dot.green { background: #27c93f; }
.mockup-title-bar {
  margin-left: auto;
  margin-right: auto;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}

/* --- MOCKUP 1: Daily Trigger AI --- */
.dt-container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  height: 100%;
}
.dt-search-bar {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dt-categories {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.dt-pill {
  font-size: 0.65rem;
  padding: 0.25rem 0.6rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.25s ease;
}
.dt-pill.active {
  background: var(--_theme---brand);
  color: #fff;
  border-color: var(--_theme---brand);
}
.dt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.dt-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.dt-card:hover {
  transform: translateY(-2px);
  border-color: var(--_theme---brand);
}
.dt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dt-card-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}
.dt-badge {
  font-size: 0.55rem;
  font-family: var(--font-mono);
  background: rgba(137, 26, 32, 0.15);
  color: #ff6b72;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  border: 1px solid rgba(137, 26, 32, 0.3);
}
.dt-card-desc {
  font-size: 0.65rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
}

/* --- MOCKUP 2: Renewloop (Scheduler Flow) --- */
.rl-container {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1.2rem;
}
.rl-workflow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-top: 1.5rem;
}
.rl-workflow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: dashed rgba(255, 255, 255, 0.15);
  z-index: 1;
}
.rl-pulse-dot {
  position: absolute;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--_theme---brand);
  z-index: 2;
  box-shadow: 0 0 10px var(--_theme---brand);
  animation: rlTravel 3.5s linear infinite;
}
@keyframes rlTravel {
  0% { left: 10%; opacity: 0; }
  10% { opacity: 1; }
  45% { opacity: 1; }
  50% { left: 50%; opacity: 0.8; }
  55% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 90%; opacity: 0; }
}
.rl-node {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  z-index: 3;
  width: 90px;
  text-align: center;
  transition: all 0.3s ease;
}
.rl-node:hover {
  border-color: var(--_theme---brand);
}
.rl-node-icon {
  font-size: 1rem;
}
.rl-node-title {
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
}
.rl-node-sub {
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
}
.rl-status-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.8rem;
  margin-top: auto;
}
.rl-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  margin-bottom: 0.3rem;
}
.rl-status-row:last-child {
  margin-bottom: 0;
}
.rl-label { color: rgba(255, 255, 255, 0.5); }
.rl-val { font-weight: 600; color: #fff; }
.rl-val.green { color: #27c93f; }
.rl-val.pulsing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rl-val.pulsing::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #27c93f;
  border-radius: 50%;
  display: inline-block;
  animation: miniPulse 1.5s infinite;
}
@keyframes miniPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* --- MOCKUP 3: SMB Onboarding Telephony Canvas --- */
.smb-container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.8rem;
}
.smb-canvas {
  flex-grow: 1;
  background: #141414;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 14px 14px;
  position: relative;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.smb-flow-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  position: relative;
}
.smb-flow-row.indent {
  margin-left: 2rem;
}
.smb-node {
  background: #232323;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.smb-node.accent {
  border-color: var(--_theme---brand);
  background: rgba(137, 26, 32, 0.1);
}
.smb-line {
  flex-grow: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
}
.smb-line::after {
  content: "→";
  color: rgba(255, 255, 255, 0.3);
  position: absolute;
  right: 0;
  top: -5px;
  font-size: 0.5rem;
}
.smb-coach-tip {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #ffbd2e;
  color: #1e1e1e;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.55rem;
  max-width: 140px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  line-height: 1.2;
  font-weight: 600;
  animation: smbFloat 4s ease-in-out infinite;
}
@keyframes smbFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* --- MOCKUP 4: Predictive Health Score Gauges --- */
.ph-container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.8rem;
}
.ph-dashboard {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0.8rem;
}
.ph-gauge-box {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ph-gauge-ring {
  width: 90px;
  height: 45px;
  border-radius: 90px 90px 0 0;
  background: conic-gradient(from 270deg, #ff5f56 0 60deg, #ffbd2e 60deg 120deg, #27c93f 120deg 180deg);
  position: relative;
  overflow: hidden;
}
.ph-gauge-ring::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 30px;
  background: #141414;
  border-radius: 60px 60px 0 0;
}
.ph-gauge-needle {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 35px;
  background: #fff;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(40deg);
  transition: transform 1.5s ease;
}
.ph-gauge-value {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
}
.ph-gauge-label {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}
.ph-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ph-item {
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  padding: 0.4rem;
  font-size: 0.55rem;
}
.ph-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.ph-progress {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.ph-progress-fill {
  height: 100%;
  background: #27c93f;
}
.ph-progress-fill.yellow { background: #ffbd2e; }
.ph-progress-fill.red { background: #ff5f56; }

.ph-slack-card {
  background: #1a1d21;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.ph-slack-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  font-size: 0.6rem;
}
.ph-slack-icon {
  width: 10px;
  height: 10px;
  background: #ff5f56;
  border-radius: 2px;
}
.ph-slack-alert {
  border-left: 2px solid var(--_theme---brand);
  padding-left: 0.5rem;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
}

/* --- MOCKUP 5: WhatsApp Chat Simulator --- */
.wa-container {
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wa-chat-window {
  flex-grow: 1;
  background: #0b141a;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  gap: 0.6rem;
  overflow: hidden;
}
.wa-bubble {
  max-width: 80%;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-size: 0.65rem;
  line-height: 1.3;
}
.wa-bubble.incoming {
  background: #202c33;
  color: #e9edef;
  align-self: flex-start;
  border-top-left-radius: 0;
}
.wa-bubble.outgoing {
  background: #005c4b;
  color: #e9edef;
  align-self: flex-end;
  border-top-right-radius: 0;
}
.wa-interactive-card {
  background: #202c33;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  max-width: 80%;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
}
.wa-card-body {
  padding: 0.5rem;
  font-size: 0.6rem;
  color: #e9edef;
}
.wa-card-title {
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.wa-card-btn {
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.4rem;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: #00a884;
  cursor: pointer;
  transition: background 0.2s ease;
}
.wa-card-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 968px) {
  .case-study-split-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .case-study-visual-col {
    min-height: 350px;
  }
  .case-study-visual-col:has(img) {
    min-height: auto !important;
    padding: 1.2rem;
  }
}

/* --- EXPERIENCE INTERACTIVE TIMELINE --- */
.row-item.experience-item {
  position: relative;
  transition: padding 0.5s var(--ease-smooth), background-color 0.5s var(--ease-smooth);
}

.row-desc-preview {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(13, 13, 13, 0.7);
}
[data-theme="dark"] .row-desc-preview {
  color: rgba(224, 222, 221, 0.7);
}

.row-meta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.experience-toggle-btn {
  background: transparent;
  border: 1px solid var(--_theme---border);
  color: var(--_theme---body-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.5rem 1.2rem;
  border-radius: 90px;
  cursor: pointer;
  transition: all 0.35s var(--ease-smooth);
}

.experience-toggle-btn:hover {
  background: var(--_theme---brand);
  color: #fff;
  border-color: var(--_theme---brand);
}

.experience-toggle-btn.active {
  background: var(--_theme---body-text);
  color: var(--_theme---background);
}

/* Accordion Panel for Experience */
.experience-details {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease-smooth);
  width: 100%;
}

.experience-details.expanded {
  margin-top: 1.5rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--_theme---border);
}

.experience-details-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 1rem;
}

/* Metrics Grid inside Experience */
.exp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.exp-metric-card {
  background: rgba(137, 26, 32, 0.03);
  border: 1px solid rgba(137, 26, 32, 0.1);
  border-radius: 10px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.3s var(--ease-smooth);
}
[data-theme="dark"] .exp-metric-card {
  background: rgba(224, 222, 221, 0.02);
  border-color: var(--_theme---border);
}

.exp-metric-card:hover {
  border-color: var(--_theme---brand);
  transform: translateY(-2px);
}

.exp-metric-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--_theme---brand);
  margin-bottom: 0.3rem;
}

.exp-metric-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--_theme---grey);
  font-weight: 500;
}

/* Bullets and Tech Sections */
.exp-bullets-section h4, .exp-tech-section h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--_theme---brand);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
}

.exp-bullets {
  list-style: square;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(13, 13, 13, 0.7);
}
[data-theme="dark"] .exp-bullets {
  color: rgba(224, 222, 221, 0.7);
}

.exp-tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech-badge {
  background: rgba(13, 13, 13, 0.05);
  border: 1px solid var(--_theme---border);
  color: var(--_theme---body-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}
[data-theme="dark"] .tech-badge {
  background: rgba(224, 222, 221, 0.06);
}

.tech-badge:hover {
  background: var(--_theme---brand);
  color: #fff;
  border-color: var(--_theme---brand);
}

/* Responsive Experience */
.row-meta-mobile {
  display: none;
}

@media (max-width: 968px) {
  .row-meta-mobile {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--_theme---grey);
    margin-top: 0.2rem;
  }
  .row-meta-actions {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .row-meta-actions .row-meta {
    display: none;
  }
  .experience-toggle-btn {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }
  .exp-metrics-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  }
}

/* --- SKILLS TAG FILTERING --- */
.skills-filter-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3.5rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  flex-wrap: wrap;
}

.skills-filter-btn {
  background: transparent;
  border: 1px solid var(--_theme---border);
  color: var(--_theme---body-text);
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.6rem 1.6rem;
  border-radius: 90px;
  cursor: pointer;
  transition: all 0.35s var(--ease-smooth);
}

.skills-filter-btn:hover {
  border-color: var(--_theme---brand);
  color: var(--_theme---brand);
}

.skills-filter-btn.active {
  background: var(--_theme---brand);
  color: #fff;
  border-color: var(--_theme---brand);
}

/* Dimming effect with transitions */
.skills-list-clean li {
  transition: opacity 0.5s var(--ease-smooth), filter 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth), padding 0.3s var(--ease-smooth);
}

.skills-list-clean li.dimmed {
  opacity: 0.12 !important;
  filter: grayscale(1) blur(0.5px);
  transform: scale(0.98);
}

/* --- RESUME DIALOG MODAL --- */
.resume-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 900px;
  width: 90%;
  max-height: 90vh;
  margin: auto;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.resume-dialog::backdrop {
  background: rgba(13, 13, 13, 0.85);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Animations for Dialog Open */
.resume-dialog[open] {
  animation: modalFadeIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.resume-dialog[open]::backdrop {
  opacity: 1;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.resume-dialog-container {
  display: flex;
  flex-direction: column;
  background: #141414;
  color: #fff;
  height: 90vh;
}

[data-theme="light"] .resume-dialog-container {
  background: #fdfdfd;
  color: #0d0d0d;
}

.resume-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .resume-dialog-header {
  border-bottom-color: rgba(13, 13, 13, 0.08);
}

.resume-dialog-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--_theme---brand);
}

.resume-dialog-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-blue.small {
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
}

.resume-dialog-close-btn {
  background: transparent;
  border: none;
  color: var(--_theme---body-text);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.3s ease;
}
.resume-dialog-close-btn:hover {
  color: var(--_theme---brand);
}

.resume-dialog-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 2.5rem;
  scrollbar-width: thin;
}

.resume-preview-sheet {
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 3rem;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
[data-theme="light"] .resume-preview-sheet {
  background: #fff;
  border-color: rgba(13, 13, 13, 0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.resume-sheet-header {
  border-bottom: 2px solid var(--_theme---brand);
  padding-bottom: 1.5rem;
  text-align: center;
}
.resume-sheet-header h2 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.resume-sheet-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--_theme---brand);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.resume-sheet-contact {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--_theme---grey);
  margin-top: 0.5rem;
}

.resume-sheet-section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.resume-sheet-section h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--_theme---brand);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--_theme---border);
  padding-bottom: 0.4rem;
}
.resume-sheet-section p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .resume-sheet-section p {
  color: rgba(13, 13, 13, 0.8);
}

.resume-sheet-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}
.resume-sheet-item:last-child {
  margin-bottom: 0;
}
.resume-sheet-item-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}
.resume-sheet-item-header strong {
  color: #fff;
}
[data-theme="light"] .resume-sheet-item-header strong {
  color: #0d0d0d;
}
.resume-sheet-item-header span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--_theme---grey);
}
.resume-sheet-item p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}
[data-theme="light"] .resume-sheet-item p {
  color: rgba(13, 13, 13, 0.65);
}

@media (max-width: 600px) {
  .resume-dialog-header { padding: 1rem; }
  .resume-dialog-body { padding: 1rem; }
  .resume-preview-sheet { padding: 1.5rem; }
  .resume-sheet-item-header { flex-direction: column; gap: 0.2rem; }
}

/* --- ACCESSIBILITY FOCUS STATES --- */
:focus-visible {
  outline: 2.5px solid var(--_theme---brand) !important;
  outline-offset: 4px !important;
}
.form-control:focus-visible {
  outline: none !important;
}