/* ==================================================
   PORTFOLIO CSS - OPTIMIZED
   ================================================== */

/* ===== ANTI-FOUC (Flash of Unstyled Content) ===== */
.no-js body {
  visibility: hidden;
  opacity: 0;
}

.js body {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Hide content until Bootstrap and custom styles are loaded */
html.no-js .navbar,
html.no-js .hero-section,
html.no-js .page-hero,
html.no-js main,
html.no-js .section,
html.no-js footer {
  visibility: hidden;
  opacity: 0;
}

html.js .navbar,
html.js .hero-section,
html.js .page-hero,
html.js main,
html.js .section,
html.js footer {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

/* Prevent icon flash before Bootstrap Icons load */
.bi::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* ===== VARIABLES & THEMING ===== */
:root {
  /* Base Colors */
  --bg-light: #F5F5F5;
  --bg-dark: #121212;
  --text-light: #1B1F3B;
  --text-dark: #F6F7FB;
  
  /* Brand Colors */
  --accent-teal: #52A4A8;
  --accent-coral: #E76F51;
  --brand-teal-700: #0C7F79;
  --brand-teal-500: #149E96;
  --brand-blue-500: #4066E0;
  
  /* Section Backgrounds */
  --bg-section-light: #E9ECEF;
  --bg-section-dark: #1A1A1A;
  
  /* UI Colors */
  --card-light: #FFFFFF;
  --card-dark: #1F1F1F;
  --border-light: #E3E6EA;
  --border-dark: #2A2A2A;
  
  /* Theme-Aware Variables */
  --text-primary: var(--text-light);
  --bg-primary: var(--bg-light);
  --bg-secondary: var(--card-light);
  --border-color: var(--border-light);
  
  /* Spacing & Layout */
  --section-padding: 8rem 0;
  --border-radius: 0.75rem;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Effects */
  --glow-color: rgba(231, 111, 81, 0.3);
  --bg-section: linear-gradient(90deg, rgba(84, 166, 171, 0.4) 0%, rgba(45, 106, 110, 0.3) 100%);
  
  /* Case Study Specific - Using unified teal */
  --case-accent: var(--accent-teal);
  --case-accent-light: rgba(82, 164, 168, 0.1);
  --case-accent-glow: rgba(82, 164, 168, 0.15);
  --case-bg-primary: var(--bg-primary);
}

/* Dark Theme Overrides */
[data-bs-theme="dark"] {
  --text-primary: var(--text-dark);
  --bg-primary: var(--bg-dark);
  --bg-secondary: var(--card-dark);
  --border-color: var(--border-dark);
  --glow-color: rgba(85, 165, 168, 0.4);
  --case-bg-primary: var(--bg-dark);
  --case-bg-card: var(--card-dark);
  --case-text-primary: var(--text-dark);
  --case-text-secondary: color-mix(in srgb, var(--text-dark) 70%, transparent);
  --case-border: var(--border-dark);
  --case-shadow: rgba(0, 0, 0, 0.3);
  --bg-section: linear-gradient(90deg, rgba(84, 166, 171, 0.5) 0%, rgba(45, 106, 110, 0.4) 100%);
}
/* ===== UTILITY CLASSES ===== */
.bg-primary-section {
  background: var(--bg-primary);
  --case-bg-card: var(--bg-secondary);
  --case-text-primary: var(--text-primary);
  --case-text-secondary: color-mix(in srgb, var(--text-primary) 70%, transparent);
  --case-border: var(--border-color);
  --case-shadow: rgba(0, 0, 0, 0.1);
}

/* Section Backgrounds */
.bg-section {
  background: var(--bg-section-light) !important;
}

[data-bs-theme="dark"] .bg-section {
  background: var(--bg-section-dark) !important;
}
/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
  color: #4A90A4;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)) 
          drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
}

[data-bs-theme="dark"] .scroll-indicator {
  color: #7EE8FF;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.75));
}

/* ===== TIMELINE ===== */
.timeline-left .timeline-rail {
  background: var(--accent-teal);
}

[data-bs-theme="dark"] .timeline-left .timeline-rail {
  background: var(--accent-teal);
}

/* ===== TYPOGRAPHY ===== */
[data-bs-theme="dark"] .text-muted {
  color: #B0B0B0 !important;
}

[data-bs-theme="dark"] .text-secondary {
  color: #C0C0C0 !important;
}

/* ===== BREADCRUMBS ===== */
[data-bs-theme="dark"] .breadcrumb-link {
  color: #FFB366 !important;
}

[data-bs-theme="dark"] .breadcrumb-link:hover {
  color: #FFA500 !important;
}

/* ===== HERO SECTION ===== */
[data-bs-theme="dark"] .hero-subtitle {
  color: #E0E0E0 !important;
}


/* ===== FOOTER ===== */
[data-bs-theme="dark"] .footer-copyright {
  color: #999999 !important;
}

/* ===== GRADIENTS ===== */
.bg-gradient,
.page-hero.bg-gradient {
  background: var(--bg-section-light) !important;
}

[data-bs-theme="dark"] .bg-gradient,
[data-bs-theme="dark"] .page-hero.bg-gradient {
  background: var(--bg-section-dark) !important;
}

/* ===== UTILITY CLASSES ===== */
.fw-800 {
  font-weight: 800 !important;
}

.overview-pill {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
}

/* ===== BASE STYLES ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg-primary);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== PAGE HERO ===== */
.page-hero {
  padding: 7rem 0 4rem;
  padding-top: calc(7rem + 72px); /* Account for navbar height */
}

/* Main pages header with gradient background */
.page-hero.bg-gradient {
  padding: 4.5rem 0 4.5rem;
  padding-top: calc(4.5rem + 72px); /* Account for navbar height */
  text-align: center;
  display: flex;
  align-items: center;
  min-height: auto;
}

.page-hero:not(.page-hero--case-study) .row {
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.page-hero:not(.page-hero--case-study) .col-lg-6,
.page-hero:not(.page-hero--case-study) .col-lg-8,
.page-hero:not(.page-hero--case-study) .col-12 {
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Force center alignment for all direct children, except case studies */
.page-hero:not(.page-hero--case-study) .container > * {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Case study hero alignment */
.page-hero--case-study {
  padding: 3rem 0 2rem;
  padding-top: calc(3rem + 72px); /* Account for navbar height */
  overflow: hidden;
  min-height: auto;
  display: flex;
  align-items: center;
}

.page-hero--case-study .container {
  text-align: left;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.page-hero--case-study .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  align-items: center;
  min-height: auto;
}

.page-hero--case-study .col-lg-6,
.page-hero--case-study .col-lg-8 {
  padding: 0 15px;
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
  text-align: left;
}

/* Content alignment */
.page-hero--case-study .col-lg-6:first-child {
  order: 1;
}

.page-hero--case-study .col-lg-6:last-child {
  order: 2;
  margin-top: 2rem;
}

/* Desktop styles */
@media (min-width: 992px) {
  .page-hero--case-study .row {
    min-height: auto;
    margin: 0 -15px;
  }
  
  .page-hero--case-study .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
  }
  
  .page-hero--case-study .col-lg-6:last-child {
    order: 2;
    margin-top: 0;
  }
  
  .page-hero--case-study .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  
  .page-hero--case-study .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

.page-hero--case-study .page-title,
.page-hero--case-study h1,
.page-hero--case-study .h1,
.page-hero--case-study .display-1,
.page-hero--case-study h2,
.page-hero--case-study .h4,
.page-hero--case-study .page-subtitle,
.page-hero--case-study .lead,
.page-hero--case-study .btn,
.page-hero--case-study .breadcrumb-link {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
}

/* Ensure breadcrumb aligns with content */
.page-hero--case-study .case-breadcrumb {
  padding-left: 0;
  margin-left: 0;
  width: 100%;
}

/* Adjust highlight stat to align properly */
.page-hero--case-study .highlight-stat {
  margin-left: 0;
  margin-right: auto;
  width: auto;
}

/* Title and Subtitle spacing */
.page-hero .page-title {
  margin-bottom: 0.5rem !important;
  color: var(--text-primary);
}

/* Subtitle styling */
.page-hero .page-subtitle {
  max-width: 52ch;
  margin: 0.5rem auto 0.5rem !important;
  font-size: 1.2rem;
  line-height: 1.5;
  color: color-mix(in oklab, var(--text-primary) 70%, transparent);
}

/* Case study breadcrumb */
.case-breadcrumb {
  margin: 1.5rem 0 2rem !important;
}

/* Button styling in hero */
.page-hero .btn {
  margin: 0.5rem 0 0;
  min-width: 180px;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Desktop (992px and up) */
@media (min-width: 992px) {
  .page-hero {
    padding: 9rem 0 5rem;
  }
  
  /* Keep text centered on all pages except case studies */
  .page-hero:not(.page-hero--case-study) .col-lg-6,
  .page-hero:not(.page-hero--case-study) .col-lg-8,
  .page-hero:not(.page-hero--case-study) .col-12 {
    text-align: center;
  }
  
}

/* ===== NAVIGATION ===== */
#mainNav {
  background: var(--bg-primary);
  padding: 0.75rem 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
}

.navbar-brand {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  height: auto;
}

.navbar-brand img {
  height: 45px;
  width: auto;
  transition: all 0.3s ease;
  margin: 0;
}

.nav-link {
  font-weight: 500;
  padding: 0.75rem 1rem !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
  position: relative;
  margin: 0 0.25rem;
  display: flex;
  align-items: center;
  height: 45px;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent-teal) !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background: var(--accent-teal);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 80%;
}

/* No padding needed - navbar sits on top of hero */
body.has-page-header {
  padding-top: 0;
}

  /* Adjust padding for mobile */
@media (max-width: 991.98px) {
  body.has-page-header {
    padding-top: 0;
  }
  
  .page-hero {
    padding: 1.5rem 0 3rem;
    padding-top: calc(1.5rem + 100px); /* Account for mobile navbar height */
  }
  
  .page-hero.bg-gradient {
    padding: 2.5rem 0 2.5rem;
    padding-top: calc(2.5rem + 100px); /* Account for mobile navbar height */
  }
  
  .navbar-brand img {
    height: 35px;
  }
  
  .navbar-brand {
    height: 45px;
  }
  
  
  /* Improve touch targets */
  .btn {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  
  /* Utility classes for mobile */
  .min-vh-75 {
    min-height: auto !important;
  }
  
  .hero-visual {
    text-align: center;
    margin-top: 2rem;
  }
  
  /* Section adjustments for mobile */
  .my-role-section .col-lg-6:first-child,
  .pulse-problem-section .col-lg-5 {
    margin-bottom: 2rem;
  }
  
  .row .col-lg-4 {
    display: block;
    width: 100%;
    margin-bottom: 2rem;
  }
  
  .row .col-lg-4:last-child {
    margin-bottom: 0;
  }
}

/* Small mobile devices (576px and down) */
@media (max-width: 576px) {
  .page-hero {
    padding: 2rem 0 2.5rem;
    padding-top: calc(2rem + 110px); /* Extra padding for smaller mobile screens */
  }
  
  .page-hero.bg-gradient {
    padding: 2rem 0 2rem;
    padding-top: calc(2rem + 110px);
  }
  
  .page-hero--case-study {
    padding-top: calc(1.5rem + 110px);
  }
  
  .page-hero--case-study .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Ensure all case study sections align consistently */
  body.case-study section .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .page-hero .page-subtitle {
    max-width: 100%;
    font-size: 1rem;
  }
  
  .page-hero .btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
  }
  
  /* Resume page hero button needs extra bottom padding on mobile */
  .resume-page .page-hero .btn {
    margin-bottom: 3rem;
  }
  
  /* Make header content wider on mobile for specific pages */
  .resume-page .page-hero .col-lg-8,
  .contact-page .page-hero .col-lg-8,
  .work-page .page-hero .col-lg-8 {
    max-width: 90%;
    flex: 0 0 90%;
  }
  
  /* Wider text containers for better line breaks */
  .resume-page .page-hero .page-subtitle,
  .contact-page .page-hero .page-subtitle,
  .work-page .page-hero .page-subtitle {
    max-width: 100%;
  }
}


/* Mobile specific adjustments */
@media (max-width:991.98px){
    :root{--header-padding: 0;}
    .has-page-header{padding-top:var(--header-padding);}
    
    /* Center hero content on mobile */
    .page-hero:not(.page-hero--case-study) {
        padding: 1.5rem 1rem 1.5rem;
        padding-top: calc(1.5rem + 100px);
        display: flex;
        align-items: center;
        min-height: auto;
        text-align: center;
    }
    
    /* Mobile container padding adjustment */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ensure case study containers align with navbar */
    .page-hero--case-study .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Mobile case study hero adjustments */
    .page-hero--case-study {
        padding: 1.5rem 0 3rem;
        padding-top: calc(1.5rem + 100px);
    }
    
    .page-hero--case-study .row {
        margin: 0;
        width: 100%;
    }
    
    .page-hero--case-study .col-lg-6,
    .page-hero--case-study .col-lg-8,
    .page-hero--case-study .col-12 {
        padding: 0;
        width: 100%;
    }
    
    /* Ensure all sections in case studies have consistent padding */
    body.case-study section .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .page-hero:not(.page-hero--case-study) .row {
        justify-content: center;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
    
    .page-hero:not(.page-hero--case-study) .col-lg-8,
    .page-hero:not(.page-hero--case-study) .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 1rem;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .page-hero:not(.page-hero--case-study) .page-title,
    .page-hero:not(.page-hero--case-study) h1 {
        width: 100%;
        margin: 0 auto 0.5rem;
        padding: 0 1rem;
        text-align: center;
        font-size: 2.2rem;
        line-height: 1.2;
    }
    
    .page-hero:not(.page-hero--case-study) .page-subtitle,
    .page-hero:not(.page-hero--case-study) p.lead,
    .page-hero:not(.page-hero--case-study) p {
        max-width: 100%;
        margin: 0.5rem auto 1rem;
        padding: 0 1rem;
        font-size: 1.1rem;
        line-height: 1.5;
        color: color-mix(in oklab, var(--text-primary) 80%, transparent);
        text-align: center;
    }
    
    .page-hero:not(.page-hero--case-study) .btn {
        margin: 0.5rem 0 0;
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
    }
}


/* Ensure container matches Bootstrap default (1140px) */
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
    max-width: 1140px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 72px;
}

/* Mobile navbar container alignment */
@media (max-width: 991.98px) {
    .navbar > .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Ensure all containers align consistently */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Container behavior for non-case-study pages */
.page-hero:not(.page-hero--case-study) .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

section:not(.page-hero){background:var(--bg-primary);color:var(--text-primary);padding:var(--section-padding);overflow-x:hidden}

/* Extra padding for case study sections on desktop */
@media (min-width: 992px) {
  body:not(.has-page-header) section:not(.page-hero) {
    padding: 10rem 0;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  section:not(.page-hero) {
    padding: 4rem 0;
  }
  
  body {
    overflow-x: hidden;
    position: relative;
  }
  
  main {
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 1;
  }
  
  .page-hero {
    position: relative;
    z-index: 2;
  }
  
  /* Case study hero mobile layout - consolidated */
  .page-hero--case-study {
    padding-top: calc(1.5rem + 100px);
    padding-bottom: 3rem;
    min-height: auto;
    display: block;
  }
  
  .page-hero--case-study .container {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%;
  }
  
  .page-hero--case-study .row {
    margin: 0;
    width: 100%;
    display: block;
  }
  
  .page-hero--case-study .col-lg-6,
  .page-hero--case-study .col-lg-8,
  .page-hero--case-study .col-12 {
    padding: 0;
    width: 100%;
    display: block;
    margin-bottom: 2rem;
  }
  
  .page-hero--case-study .col-lg-6:last-child,
  .page-hero--case-study .col-lg-8:last-child,
  .page-hero--case-study .col-12:last-child {
    margin-bottom: 0;
  }
  
  /* Ensure all case study sections align consistently */
  body.case-study section .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .display-1 {
    font-size: 2.8rem !important;
  }
  
  .overview-pills {
    flex-direction: column;
    gap: 1rem;
  }
  
  .overview-pills .overview-pill {
    width: 100%;
    box-sizing: border-box;
  }
  
  .overview-bar {
    padding: 1rem 0 !important;
  }
  
  .kpi-banner {
    padding: 2rem !important;
  }
  
  .badge.bg-primary-subtle.text-primary.border.border-primary-subtle,
  .badge.bg-info-subtle.text-info.border.border-info-subtle,
  .badge.bg-warning-subtle.text-warning.border.border-warning-subtle {
    min-width: 200px;
  }
  
  /* Hero mouse icon */
  .mouse-icon {
    width: 20px;
    height: 32px;
  }
  
  .mouse-body {
    width: 20px;
    height: 32px;
    border-radius: 10px;
  }
  
  .mouse-wheel {
    top: 6px;
    height: 6px;
  }
  
  .arrow {
    width: 10px;
    height: 10px;
  }
  
  
  /* Timeline mobile */
  .timeline-left .timeline-item {
    padding-left: 2rem;
  }
  
  .timeline-left .timeline-rail {
    left: 1rem;
  }
  
  .timeline-left .timeline-dot {
    left: 1rem;
    width: 10px;
    height: 10px;
  }
}
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;margin-bottom:1rem}
.display-1{font-size:3.5rem!important;line-height:1.15!important}
.display-5{color:var(--text-primary)!important}
[data-bs-theme="dark"] .display-5{color:var(--text-primary)!important}

/* Mobile touch devices - completely disable all interactive states */
@media (hover: none) and (pointer: coarse) {
  /* Disable all button states completely */
  .btn,
  .btn:hover,
  .btn:active,
  .btn:focus,
  .btn-primary,
  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary:focus,
  .btn-outline-secondary,
  .btn-outline-secondary:hover,
  .btn-outline-secondary:active,
  .btn-outline-secondary:focus {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Force outline buttons to stay in original state */
  .btn-outline-secondary,
  .btn-outline-secondary:hover,
  .btn-outline-secondary:active,
  .btn-outline-secondary:focus {
    background: transparent !important;
    border-color: var(--accent-teal) !important;
    color: var(--accent-teal) !important;
  }
  
  /* Disable button pseudo-elements */
  .btn-outline-secondary::before,
  .btn-outline-secondary:hover::before,
  .btn-outline-secondary:active::before,
  .btn-outline-secondary:focus::before {
    opacity: 0 !important;
    display: none !important;
  }
  
  /* Disable all project card hover effects */
  .project-card,
  .project-card:hover,
  .project-card:active,
  .project-card:focus {
    transform: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    border-color: var(--border-color) !important;
    transition: none !important;
  }
  
  /* Disable project card link states */
  .project-card-link,
  .project-card-link:hover,
  .project-card-link:active,
  .project-card-link:focus {
    text-decoration: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Fix back-to-top button mobile interaction */
  .back-to-top,
  .back-to-top:hover,
  .back-to-top:active,
  .back-to-top:focus {
    transform: none !important;
    transition: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Maintain back-to-top button appearance */
  .back-to-top {
    background: var(--accent-teal) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  }
  
  /* Fix navbar logo mobile interaction */
  .navbar-brand,
  .navbar-brand:hover,
  .navbar-brand:active,
  .navbar-brand:focus {
    transform: none !important;
    transition: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    text-decoration: none !important;
  }
  
  /* Mobile theme toggle adjustments */
  .theme-toggle {
    margin-left: 1rem;
    margin-right: 0.5rem;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Fix navbar toggler mobile interaction */
  .navbar-toggler,
  .navbar-toggler:hover,
  .navbar-toggler:active,
  .navbar-toggler:focus {
    transform: none !important;
    transition: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: none !important;
  }
  
  /* Fix all anchor links mobile interaction */
  a,
  a:hover,
  a:active,
  a:focus {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }
  
  /* Disable navigation hover effects */
  .nav-link:hover::after,
  .nav-link:active::after,
  .nav-link:focus::after {
    width: 0 !important;
  }
  
  /* Remove all tap highlights globally */
  * {
    -webkit-tap-highlight-color: transparent !important;
  }
}
/* stylelint-disable property-no-vendor-prefix */
.accent{background:linear-gradient(90deg,var(--accent-teal),var(--accent-coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;-webkit-box-decoration-break:clone;box-decoration-break:clone;display:inline-block;line-height:1.2;padding-bottom:0.05em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smooth:always;background-size:100% 100%;background-repeat:no-repeat;color:var(--accent-teal)}
.accent-green-blue{background:linear-gradient(90deg,var(--accent-teal),var(--accent-coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;-webkit-box-decoration-break:clone;box-decoration-break:clone;display:inline-block;line-height:1.2;padding-bottom:0.05em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smooth:always;background-size:100% 100%;background-repeat:no-repeat;color:var(--accent-teal)}
/* stylelint-enable property-no-vendor-prefix */
.hero-subtitle{font-size:clamp(1.15rem,2.6vw,1.6rem);font-weight:400;margin:0 auto 2rem;color:color-mix(in oklab,currentColor 72%,transparent);max-width:52ch;text-wrap:balance;text-wrap:pretty;orphans:2;widows:2;hyphens:auto;word-break:normal}
.section-title{font-size:clamp(1.5rem,4vw,2.25rem);margin-bottom:3rem;font-weight:700;color:var(--text-primary)}
.navbar{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);transition:var(--transition);padding:0.75rem 0}
[data-bs-theme="dark"] .navbar{background:var(--bg-secondary)}
.navbar-brand img{height:45px;max-height:50px;object-fit:contain}
@media (max-width:576px){.navbar-brand img{height:40px;max-height:44px}}
.navbar.scrolled{background:var(--bg-secondary)!important;box-shadow:0 2px 20px rgba(0,0,0,0.1)}
.nav-item .dropdown-toggle.active{color:var(--accent-teal)!important;background-color:rgba(85,165,168,0.1);border-radius:6px}
.scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--accent-teal),var(--accent-coral));z-index:9999;transition:width 0.1s ease}
[data-bs-theme="light"] .scroll-progress{background:linear-gradient(90deg,#52A4A8,#D4482C)}
@media (max-width:991.98px){
  [data-bs-theme="dark"] .scroll-progress{background:linear-gradient(90deg,#4A9B8E,#E6A575)}
  .scroll-progress{height:4px}
  .navbar-collapse .nav-link.active::after{display:none}
  .navbar-collapse .nav-link.active{background:rgba(85,165,168,0.1);border-radius:6px;margin:2px 0}
  .navbar{transform:translateY(0);transition:transform 0.3s ease-in-out,background 0.3s ease}
  .navbar.nav-hidden{transform:translateY(-100%)}
  .navbar.nav-visible{transform:translateY(0)}
  .project-image{padding-top:39.45%}
  .project-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;border-radius:0.5rem 0.5rem 0 0}
  .project-content{padding:1.5rem}
  .project-title{font-size:1.25rem}
  .project-card{width:100%;margin:0 auto}
}
/* Hero section */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    height: 100vh;
    padding: 72px max(16px, 4vw) 0;
    display: flex;
    align-items: center;
    z-index: 1;
    background: var(--bg-primary);
}

/* Mobile hero adjustments */
@media (max-width: 768px) {
  .hero {
    padding: 100px 1rem 2rem;
    min-height: 100vh;
  }
  
  .hero-inner {
    padding: 1rem 0;
  }
}

.hero-inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 2rem 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero h1{font-weight:900;letter-spacing:-.02em;font-size:clamp(2.4rem,6.2vw,4.5rem);line-height:1.1;padding:0 2rem}
@media (min-width: 768px) {
  .hero h1 {
    padding:0 4rem;
  }
}
.scroll-indicator{margin-top:clamp(18px,2.2vw,26px);color:var(--accent-teal);filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(0 0 6px rgba(0,0,0,.15));z-index:2;cursor:pointer;transition:transform 0.2s ease,opacity 0.2s ease}
[data-bs-theme="dark"] .scroll-indicator{color:var(--accent-teal);filter:drop-shadow(0 0 6px rgba(0,0,0,.55))}
.scroll-indicator:hover{transform:translateY(2px);opacity:0.8}
.mouse-icon{width:24px;height:40px;margin:0 auto 8px;position:relative}
.mouse-body{width:24px;height:40px;border:2px solid currentColor;border-radius:12px;position:relative;background:rgba(255,255,255,0.1)}
.mouse-wheel{width:3px;height:8px;background:currentColor;border-radius:2px;position:absolute;top:8px;left:50%;transform:translateX(-50%);animation:mouseWheel 2s ease-in-out infinite}
.arrow-stack{display:flex;flex-direction:column;align-items:center;gap:2px}
.arrow{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:0.6;animation:arrowSlide 2s ease-in-out infinite}
.arrow:nth-child(1){animation-delay:0s}
.arrow:nth-child(2){animation-delay:0.2s}
.arrow:nth-child(3){animation-delay:0.4s}
@keyframes mouseWheel{0%,100%{transform:translateX(-50%) translateY(0);opacity:1}50%{transform:translateX(-50%) translateY(6px);opacity:0.3}}
@keyframes arrowSlide{0%{transform:rotate(45deg) translateY(-10px);opacity:0}50%{transform:rotate(45deg) translateY(0);opacity:1}100%{transform:rotate(45deg) translateY(10px);opacity:0}}
.theme-toggle{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .6rem;border-radius:999px;font:600 .9rem/1 ui-sans-serif,system-ui;backdrop-filter:blur(6px);transition:all 0.2s ease;margin-left:20px;height:45px}
.theme-toggle svg{width:18px;height:18px;flex:0 0 18px;display:block;transform:translateY(.5px);fill:currentColor}
.theme-toggle .sun-icon{display:none}
.theme-toggle .moon-icon{display:block}
[data-bs-theme="dark"] .theme-toggle .sun-icon{display:block}
[data-bs-theme="dark"] .theme-toggle .moon-icon{display:none}
.theme-toggle:hover{transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:2px solid var(--accent-teal);outline-offset:3px;border-radius:6px}
[data-bs-theme="light"] .theme-toggle{background:rgba(10,14,17,.9)!important;color:#e7f1f4!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 1px 2px rgba(0,0,0,.4)!important}
[data-bs-theme="dark"] .theme-toggle{background:rgba(255,255,255,.95)!important;color:#1B1F3B!important;border:1px solid rgba(0,0,0,.18)!important;box-shadow:0 1px 2px rgba(0,0,0,.06)!important}
.btn{font-weight:600;font-size:1rem;padding:0.75rem 1.5rem;border-radius:var(--border-radius);border:2px solid transparent;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;position:relative;overflow:hidden;line-height:1.4;text-align:center;min-height:48px}
.btn-primary{background:var(--accent-coral);color:white;border-color:var(--accent-coral);box-shadow:0 2px 8px rgba(231,111,81,0.25)}
.btn-primary:hover{background:color-mix(in oklab,var(--accent-coral) 85%,black);border-color:color-mix(in oklab,var(--accent-coral) 85%,black);color:white;transform:translateY(-1px);box-shadow:0 4px 16px rgba(231,111,81,0.35)}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(231,111,81,0.25)}
.btn-primary:focus-visible{outline:2px solid var(--accent-coral);outline-offset:2px;box-shadow:0 0 0 0.2rem var(--glow-color)}
.btn-primary:disabled,.btn-primary.disabled{background:color-mix(in oklab,var(--text-primary) 20%,transparent);border-color:color-mix(in oklab,var(--text-primary) 20%,transparent);color:color-mix(in oklab,var(--text-primary) 40%,transparent);cursor:not-allowed;transform:none;box-shadow:none;opacity:0.6}
.btn-outline-secondary,.btn-secondary,.btn.btn-outline-secondary,a.btn-outline-secondary{background:transparent!important;color:var(--accent-teal)!important;border-color:var(--accent-teal)!important;position:relative}
.btn-outline-secondary::before,.btn-secondary::before,.btn.btn-outline-secondary::before,a.btn-outline-secondary::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:var(--accent-coral);opacity:0;transition:opacity 0.3s ease;border-radius:calc(var(--border-radius) - 2px);z-index:-1}
.btn-outline-secondary:hover,.btn-secondary:hover,.btn.btn-outline-secondary:hover,a.btn-outline-secondary:hover{color:white!important;border-color:var(--accent-coral)!important;background:transparent!important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(231,111,81,0.25)}
.btn-outline-secondary:hover::before,.btn-secondary:hover::before,.btn.btn-outline-secondary:hover::before,a.btn-outline-secondary:hover::before{opacity:1}
.btn-outline-secondary *,.btn-secondary *,.btn.btn-outline-secondary *,a.btn-outline-secondary *{position:relative;z-index:1}
.back-to-top{position:fixed;bottom:2rem;right:2rem;display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.25rem;background:var(--accent-teal);color:white;border:none;border-radius:50px;font-size:0.95rem;font-weight:500;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.15);opacity:0;visibility:hidden;transform:translateY(20px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);z-index:1000;overflow:hidden}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--accent-coral);box-shadow:0 6px 16px rgba(0,0,0,0.2);transform:translateY(-2px)}
.back-to-top .rocket-icon{width:22px;height:22px;transition:transform 0.3s ease}
@keyframes rocketLaunch{0%{transform:translateY(0) rotate(0deg);opacity:1}25%{transform:translateY(-10px) rotate(-8deg)}50%{transform:translateY(-25px) rotate(-15deg)}75%{transform:translateY(-45px) rotate(-25deg);opacity:0.8}100%{transform:translateY(-80px) rotate(-35deg) scale(0.7);opacity:0}}
.back-to-top.launching{pointer-events:none}
.back-to-top.launching .rocket-icon{animation:rocketLaunch 0.8s cubic-bezier(0.5,0,0.5,1) forwards}
.back-to-top .exhaust-flame{opacity:1;stroke-width:4;stroke:#FFA726;fill:#FFA726;filter:drop-shadow(0 0 6px #FFB74D) drop-shadow(0 0 12px rgba(255,167,38,0.8)) brightness(1.3);animation:flameFlicker 0.15s ease-in-out infinite alternate;transform-origin:top center;-webkit-mask:linear-gradient(to bottom,black 0%,black 40%,transparent 100%);mask:linear-gradient(to bottom,black 0%,black 40%,transparent 100%)}
@keyframes flameFlicker{0%{opacity:0.9;transform:scaleY(1.2) scaleX(1.1)}100%{opacity:1;transform:scaleY(1.4) scaleX(1.2)}}
@media (max-width:576px){.back-to-top{width:50px;height:50px;padding:0;justify-content:center;border-radius:50%}.back-to-top .back-to-top-text{display:none}.back-to-top .rocket-icon{width:26px;height:26px;margin-right:0}}
[data-bs-theme="dark"] .back-to-top{background:var(--accent-teal);color:white;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
[data-bs-theme="dark"] .back-to-top:hover{background:var(--accent-coral);box-shadow:0 6px 16px rgba(0,0,0,0.4)}
[data-bs-theme="dark"] .btn-outline-secondary{color:#E76F51!important;border-color:#E76F51!important}
[data-bs-theme="dark"] .btn-outline-secondary:hover{color:white!important;border-color:var(--accent-coral)!important;background:transparent!important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(231,111,81,0.25)}
.project-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:0;box-shadow:0 2px 12px rgba(0,0,0,0.08);transition:var(--transition);overflow:hidden;display:flex;flex-direction:column;height:100%}
.project-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12);border-color:var(--accent-teal)}
.project-image{position:relative;overflow:hidden;width:100%;padding-top:39.45%; /* 2.53:1 Aspect Ratio (1024x404) */}
.project-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center;transition:var(--transition)}
.project-card-link{text-decoration:none;color:inherit;display:block}
.project-card-link:hover{text-decoration:none;color:inherit}
.project-content{padding:1.5rem}
.project-title{color:var(--accent-teal);font-size:1.5rem;font-weight:600;margin-bottom:0.5rem}
.project-subtitle{color:var(--text-secondary);font-size:1rem;font-weight:500;margin-bottom:1rem}
.project-description{color:var(--text-primary);line-height:1.6;margin-bottom:1.5rem}
.project-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.5rem}
.tag{background:var(--bg-section);color:var(--text-primary);border:1px solid var(--border-color);border-radius:20px;padding:0.25rem 0.75rem;font-size:0.8rem;font-weight:500}
@keyframes timelinePulse{0%,100%{box-shadow:0 0 0 3px var(--bg-primary),0 0 0 0 rgba(85,165,168,0.4)}50%{box-shadow:0 0 0 3px var(--bg-primary),0 0 0 8px rgba(85,165,168,0.1)}}
.timeline-left{position:relative;max-width:700px;margin:0 auto;padding:2rem 0}
.timeline-left .timeline-rail{position:absolute;left:24px;top:0;bottom:0;width:2px;background:var(--accent-teal);z-index:1}
[data-bs-theme="dark"] .timeline-left .timeline-rail{background:var(--accent-teal)}
.timeline-left .timeline-item{position:relative;margin-bottom:2.5rem;z-index:2}
.timeline-left .timeline-item:last-child{margin-bottom:0}
.timeline-left .timeline-dot{position:absolute;left:25px;top:0.5rem;width:10px;height:10px;transform:translateX(-50%);z-index:10;background:var(--accent-teal);border-radius:50%;box-shadow:0 0 0 2px var(--bg-primary);animation:timelinePulse 2s ease-in-out infinite}
.timeline-left .timeline-card{margin-left:56px;max-width:580px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:var(--transition);text-align:left}
.timeline-left .timeline-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.12);border-color:var(--accent-teal)}
.timeline-company{color:var(--accent-teal);font-size:1.25rem;font-weight:600;margin:0 0 0.25rem 0;line-height:1.3}
.timeline-role{color:var(--text-primary);font-size:1rem;font-weight:500;margin:0 0 0.5rem 0;line-height:1.4}
.timeline-left .timeline-header{margin-bottom:1rem}
.timeline-left .timeline-title{color:var(--accent-teal);font-size:1.1rem;font-weight:600;margin-bottom:0.25rem;line-height:1.3}
.timeline-left .timeline-dates{color:var(--text-secondary);font-size:0.9rem;font-weight:500;margin:0}
.timeline-left .timeline-bullets{list-style:none;padding:0;margin:0 0 1.5rem 0}
.timeline-left .timeline-bullets li{position:relative;padding-left:1.25rem;margin-bottom:0.5rem;color:var(--text-primary);line-height:1.4;font-size:0.9rem}
.timeline-left .timeline-bullets li:before{content:'•';position:absolute;left:0;color:var(--accent-teal);font-weight:bold;font-size:1.1rem}
.timeline-left .timeline-bullets li:last-child{margin-bottom:0}
.timeline-left .timeline-chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.timeline-left .chip{display:inline-block;background:var(--bg-section);color:var(--text-primary);border:1px solid var(--border-color);border-radius:20px;padding:0.25rem 0.75rem;font-size:0.8rem;font-weight:500;white-space:nowrap;transition:var(--transition)}
.timeline-left .chip:hover{background:var(--accent-teal);color:white;border-color:var(--accent-teal)}
.site-footer.v2{margin-top:0;padding:2rem 0 1rem;background:radial-gradient(1200px 300px at 50% -50%,color-mix(in oklab,var(--accent-teal) 18%,transparent),transparent 60%),var(--bg-primary);position:relative;border-top:1px solid var(--border-color)}
.site-footer.v2 .footer-top-accent{position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent-teal) 45%,transparent),transparent);opacity:.6}
.site-footer.v2 .footer-wrap{display:flex;justify-content:center;align-items:center}
.site-footer.v2 .footer-center{text-align:center}
.site-footer.v2 .footer-nav ul{list-style:none;padding:0;margin:0 0 1rem 0;display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}
.site-footer.v2 a{color:var(--text-primary);text-decoration:none;opacity:.9;transition:var(--transition)}
.site-footer.v2 a:hover{opacity:1;color:color-mix(in oklab,var(--accent-coral) 70%,var(--text-primary))}
.site-footer.v2 .footer-copyright{color:var(--text-secondary);opacity:.8}
@media (max-width:576px){
  .site-footer.v2 .footer-nav ul{gap:1rem}
  
  /* Make footer taller on mobile */
  .site-footer.v2{
    padding:4rem 0 5rem;
  }
  
  /* Extra padding below copyright */
  .site-footer.v2 .footer-copyright{
    margin-bottom:2rem;
  }
}
.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),transform 0.8s cubic-bezier(0.4,0,0.2,1);animation:fallbackVisible 0.1s ease-in-out 2s forwards}
@keyframes fallbackVisible{to{opacity:1;transform:translateY(0)}}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}
.no-js .animate-on-scroll,.hero-section .animate-on-scroll{opacity:1!important;transform:none!important;animation:none!important}
.metric-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:2rem;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:var(--transition)}
.metric-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
[data-bs-theme="dark"] .metric-card,[data-bs-theme="dark"] .outcome-stat{background-color:var(--bs-gray-800)!important;border-color:var(--bs-gray-700)!important}
[data-bs-theme="dark"] .metric-card .text-muted,[data-bs-theme="dark"] .outcome-stat .text-muted{color:var(--bs-gray-400)!important}
[data-bs-theme="dark"] .metric-card i,[data-bs-theme="dark"] .outcome-stat i,[data-bs-theme="dark"] .metric-card i::before,[data-bs-theme="dark"] .outcome-stat i::before{color:#ffffff!important}
.resume-section{margin-bottom:4rem}
.resume-section:last-child{margin-bottom:2rem}
.skill-category{color:var(--accent-teal);font-size:1.1rem;font-weight:600;margin-bottom:1rem;margin-top:3.5rem}
.skill-category:first-child{margin-top:0}
.skill-list{padding-left:0;margin-left:0}
.skill-list li{list-style:none;padding:0.5rem 0;border-bottom:1px solid var(--border-color);color:var(--text-primary);font-size:0.95rem;position:relative;padding-left:1.5rem}
.skill-list li:last-child{border-bottom:none}
[data-bs-theme="dark"] .skill-category{color:#4A9B8E}
[data-bs-theme="dark"] .skill-list li:before{color:#4A9B8E}
.skill-list li:before{content:"→";color:var(--accent-teal);font-weight:600;position:absolute;left:0;top:0.5rem}
[data-bs-theme="light"] .skill-list li{border-bottom-color:#555555}
[data-bs-theme="dark"] .skill-list li{border-bottom-color:#555555}
.education-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1.5rem;margin-bottom:1rem}
.degree{color:var(--accent-teal);font-size:1.1rem;font-weight:600;margin-bottom:0.5rem}
.school{color:var(--text-primary);font-size:1rem;font-weight:500;margin-bottom:0}
.graduation-year{color:var(--text-secondary);font-size:0.9rem;font-weight:500}
.contact-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:2rem;text-align:center;transition:var(--transition)}
.contact-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.contact-icon{width:48px;height:48px;background:var(--accent-teal);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:white;font-size:1.5rem}
/* Bootstrap Icons Support */
.bi{font-family:"bootstrap-icons"!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smooth:always;display:inline-block}

/* Ensure download icon displays properly */
.bi-download::before{content:"\f26c";font-family:"bootstrap-icons"!important}

/* Fallback for download icon if Bootstrap Icons don't load */
.btn .bi-download {
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* Alternative fallback using Unicode if Bootstrap Icons fail */
.bi-download:empty::before {
  content: "⬇";
  font-family: system-ui, -apple-system, sans-serif;
}.breadcrumb-link{color:var(--accent-coral);text-decoration:none;transition:color 0.3s ease;font-weight:500;font-size:0.9rem;display:inline-flex;align-items:center}
.breadcrumb-link:hover,.breadcrumb-link:focus{color:color-mix(in srgb,var(--accent-coral) 85%,black)}
.icon-lg{font-size:1.5rem!important}
/* About section image - make it larger on desktop */
@media (min-width: 992px) {
  .about-image img {
    max-width: 600px;
    width: 100%;
  }
  
  /* Center Experience title on desktop resume page only */
  .resume-page #experience .section-title {
    text-align: center;
  }
}

@media (max-width: 991px) {
  .about-image img {
    max-width: 400px;
  }
  
  /* Add spacing below about-home image on mobile */
  .about-image {
    margin-bottom: 2rem;
  }
}
.gallery-masonry{columns:1;column-gap:1rem;margin-top:2rem}
.gallery-item{display:inline-block;width:100%;margin-bottom:1rem;break-inside:avoid;border-radius:0.75rem;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:all 0.3s ease;overflow:hidden}
.gallery-item img{width:100%;height:auto;display:block;border-radius:0.75rem}
.gallery-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
@media (min-width:768px){.gallery-masonry{columns:2;column-gap:1.25rem}}
@media (min-width:992px){.gallery-masonry{columns:3;column-gap:1.25rem}}
.overview-bar{padding:1.5rem 0!important}
.overview-pills{padding:0.5rem 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem}
.badge.bg-primary-subtle{color:#0d47a1!important}
.badge.bg-info-subtle{color:#01579b!important}
.badge.bg-warning-subtle{color:#e65100!important}
[data-bs-theme="dark"] .badge.bg-primary-subtle{color:#90caf9!important}
[data-bs-theme="dark"] .badge.bg-info-subtle{color:#81d4fa!important}
[data-bs-theme="dark"] .badge.bg-warning-subtle{color:#ffcc02!important}
/* Benefit badges - consistent width */
.badge.bg-primary-subtle.text-primary.border.border-primary-subtle,
.badge.bg-info-subtle.text-info.border.border-info-subtle,
.badge.bg-warning-subtle.text-warning.border.border-warning-subtle{
  min-width:280px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem
}
.kpi-banner{padding:2.5rem!important}
.phase-indicator{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;border-radius:50%!important;color:white!important;font-weight:bold!important;font-size:1rem!important;margin-bottom:0.5rem!important;z-index:1!important;box-sizing:border-box!important}
.phase-indicator.phase-1{background:#007bff}
.phase-indicator.phase-2{background:#17a2b8}
.phase-indicator.phase-3{background:#28a745}
.phase-content{text-align:center;max-width:200px}
.phase-title{font-weight:bold;margin:0.5rem 0;font-size:1rem}
.phase-description{font-size:0.85rem;color:#6c757d;margin:0}
/* Accessibility - Reduced Motion */
@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;
  }
  .particle,.animated-gradient,.mouse-wheel,.arrow-stack .arrow,.timeline-dot,.scroll-cue{
    animation:none!important;
  }
  .career-card,.timeline-card,.chip,.project-card{
    transition:none;
  }
  .career-card:hover,.timeline-card:hover,.project-card:hover{
    transform:none;
  }
  .animated-gradient{
    transform:none!important;
  }
  .back-to-top{
    transition:opacity 0.3s ease,transform 0.3s ease;
  }
  .back-to-top.launching .rocket-icon,.back-to-top.launching::after{
    animation:none;
    opacity:0;
  }
}

/* Accessibility - Focus States */
*:focus{
  outline:2px solid var(--accent-primary);
  outline-offset:2px;
}
.btn:focus{
  box-shadow:0 0 0 0.2rem var(--glow-color);
}

/* Accessibility - High Contrast */
@media (prefers-contrast:high){
  :root{
    --border-color:#000000;
    --text-muted:#333333;
  }
  [data-bs-theme="dark"]{
    --border-color:#ffffff;
    --text-muted:#cccccc;
  }
  .btn-primary{
    border-width:3px;
  }
  .btn-outline-secondary,.btn-secondary{
    border-width:3px;
  }
}