:root {
      --bg: #faf9f6; /* Premium alabaster warm bg */
      --surface: #ffffff;
      --surface-card: #f5f4ef;
      --border: #e2e0d5;
      --border-hover: #002f6c;
      --text: #1a202c;
      --text-muted: #64748b;
      --primary: #002f6c;
      --primary-hover: #001c40;
      --primary-glow: rgba(0, 47, 108, 0.06);
      --success: #0f766e;
      --success-glow: rgba(15, 118, 110, 0.08);
      --error: #b91c1c;
      --accent: #b45309; /* warm gold accent */
      --accent-green: #10b981; /* emerald accent */
      --accent-blue: #0284c7; /* sky blue accent */
      --font-title: 'Outfit', -apple-system, sans-serif;
      --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
      --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
    }
    ::-webkit-scrollbar-track {
      background: var(--bg);
    }
    ::-webkit-scrollbar-thumb {
      background: #d6d3d1;
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #a8a29e;
    }

    /* Header & Nav (Wise Transparent Scroll Design) */
    header {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(252, 252, 251, 0.95);
      border-bottom: 1px solid var(--border);
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 100;
      transition: var(--transition);
    }

    header.transparent {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    
    .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      height: 48px;
      overflow: hidden;
    }

    .brand-img {
      height: 90px;
      width: auto;
      max-width: 180px;
      object-fit: contain;
      transition: var(--transition);
    }

    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
      align-items: center;
    }

    .nav-links a {
      color: var(--text-muted);
      text-decoration: none;
      font-weight: 500;
      font-size: 14px;
      transition: var(--transition);
    }

    header.transparent .nav-links a {
      color: rgba(255, 255, 255, 0.85);
    }

    .nav-links a:hover,
    header.transparent .nav-links a:hover {
      color: var(--text);
    }

    header.transparent .nav-links a:hover {
      color: white;
    }

    .nav-cta {
      border: 1.5px solid var(--primary);
      color: var(--primary) !important;
      padding: 8px 20px;
      border-radius: 6px;
      font-size: 13px !important;
      font-weight: 600 !important;
      transition: var(--transition);
    }

    header.transparent .nav-cta {
      border-color: rgba(255, 255, 255, 0.8);
      color: white !important;
    }

    .nav-cta:hover {
      background: var(--primary);
      color: white !important;
      box-shadow: 0 4px 12px var(--primary-glow);
    }

    header.transparent .nav-cta:hover {
      background: white;
      color: var(--primary) !important;
      border-color: white;
    }

    /* Wise Hero Section with Overlaid Images & Filters */
    .hero-wise {
      position: relative;
      width: 100%;
      min-height: 540px;
      background: url('/static/images/careers_hero_bg.png') no-repeat center center;
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 160px 24px 100px;
      margin-bottom: 36px;
    }

    .hero-wise-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(15, 23, 42, 0.45); /* Balanced dark layer */
      z-index: 1;
    }

    .hero-wise-content {
      position: relative;
      z-index: 2;
      max-width: 1100px;
      color: white;
      margin-bottom: 30px;
    }

    .hero-wise-content h1 {
      font-family: var(--font-title);
      font-size: clamp(34px, 5.5vw, 58px);
      font-weight: 800;
      line-height: 1.15;
      margin-bottom: 20px;
      letter-spacing: -1.2px;
    }

    .accent-green {
      color: #3bf37e; /* Wise bright green accent */
    }

    .hero-wise-content p {
      font-size: clamp(16px, 1.8vw, 19px);
      color: rgba(255, 255, 255, 0.9);
      max-width: 700px;
      margin: 0 auto;
      font-weight: 400;
    }

    /* Floating Search Card */
    .search-card {
      position: absolute;
      bottom: -45px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px 24px;
      width: calc(100% - 48px);
      max-width: 860px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
      z-index: 10;
      text-align: left;
    }

    .search-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      margin-bottom: 12px;
    }

    .search-card-left {
      color: var(--primary);
      font-weight: 600;
    }

    .search-card-right {
      color: var(--text-muted);
      text-decoration: none;
      font-weight: 500;
    }
    
    .search-card-right:hover {
      text-decoration: underline;
    }

    .search-card-body {
      display: flex;
      gap: 16px;
      align-items: flex-end;
    }

    .filter-field {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .filter-field label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .filter-field select {
      background: #fbfbfa;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px;
      font-size: 14px;
      font-weight: 500;
      outline: none;
      color: var(--text);
      cursor: pointer;
      transition: var(--transition);
      width: 100%;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
    }

    .filter-field select:focus {
      border-color: var(--primary);
    }

    .search-icon-btn {
      background: #005af0; /* Wise bright blue search button */
      color: white;
      border: none;
      border-radius: 6px;
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
    }

    .search-icon-btn:hover {
      background: #004ac7;
      transform: scale(1.02);
    }

    /* Sub-Hero Section (Wise Badges Section) */
    .sub-hero {
      text-align: center;
      padding: 48px 24px 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .sub-hero-tagline {
      font-family: var(--font-title);
      font-size: 17px;
      font-weight: 600;
      color: var(--text-muted);
      max-width: 680px;
      margin: 0 auto 40px;
      line-height: 1.6;
      letter-spacing: -0.2px;
    }

    .badge-row {
      display: flex;
      justify-content: center;
      gap: 56px;
      flex-wrap: wrap;
    }

    .badge-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      border-left: 2.5px solid var(--primary);
      padding-left: 20px;
      text-align: left;
      min-width: 180px;
      transition: var(--transition);
    }

    .badge-item:hover {
      transform: translateX(4px);
      border-left-color: var(--accent);
    }

    .badge-title {
      font-family: var(--font-title);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 1.2px;
      color: var(--text);
    }

    .badge-subtitle {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* Section Styles */
    .section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 56px 24px;
    }

    .section-header {
      text-align: center;
      margin-bottom: 36px;
    }

    .section-header h2 {
      font-family: var(--font-title);
      font-size: clamp(30px, 4.5vw, 40px);
      font-weight: 800;
      margin-bottom: 16px;
      color: var(--primary);
      letter-spacing: -1px;
    }

    .section-header p {
      color: var(--text-muted);
      max-width: 680px;
      margin: 0 auto;
      font-size: 16px;
      line-height: 1.65;
    }

    /* About Section */
    .about-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 72px;
      align-items: center;
      background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('/static/images/careers_about_bg.png') no-repeat center center;
      background-size: cover;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 64px;
      box-shadow: 0 4px 30px rgba(0,0,0,0.015);
      position: relative;
      overflow: hidden;
    }

    .about-left {
      text-align: left;
    }

    .about-left h3 {
      font-family: var(--font-title);
      font-size: 32px;
      margin-bottom: 24px;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: -0.8px;
      position: relative;
      padding-bottom: 12px;
    }

    .about-left h3::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary) 0%, var(--accent-blue) 100%);
      border-radius: 2px;
    }

    .about-left p {
      color: var(--text-muted);
      font-size: 15.5px;
      margin-bottom: 20px;
      line-height: 1.8;
    }

    .about-left p:last-child {
      margin-bottom: 0;
    }

    .about-right {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      width: 100%;
    }

    .stat-card {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(226, 224, 213, 0.6);
      border-radius: 16px;
      padding: 24px 28px;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 20px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.008);
    }

    .stat-card:hover {
      transform: translateX(8px) scale(1.02);
      border-color: var(--primary);
      background: var(--surface);
      box-shadow: 0 12px 30px rgba(0, 47, 108, 0.08);
    }

    .stat-icon-wrapper {
      background: var(--primary-glow);
      color: var(--primary);
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      transition: var(--transition);
      flex-shrink: 0;
    }

    .stat-card:hover .stat-icon-wrapper {
      background: var(--primary);
      color: white;
      transform: rotate(-8deg) scale(1.05);
      box-shadow: 0 4px 12px var(--primary-glow);
    }

    .stat-number {
      font-family: var(--font-title);
      font-size: 36px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent-blue) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 1.1;
      width: 105px;
      flex-shrink: 0;
      letter-spacing: -0.6px;
      padding-left: 4px;
      padding-right: 4px;
    }

    .stat-info {
      display: flex;
      flex-direction: column;
    }

    .stat-title {
      font-family: var(--font-title);
      font-size: 15.5px;
      font-weight: 700;
      color: var(--text);
    }

    .stat-desc {
      font-size: 12.5px;
      color: var(--text-muted);
      margin-top: 3px;
    }

    /* Expertise Section */
    .expertise-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 36px;
      margin-bottom: 64px;
    }

    .expertise-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 24px rgba(0,0,0,0.01);
      position: relative;
    }

    .expertise-card:hover {
      transform: translateY(-8px);
      border-color: var(--primary);
      box-shadow: 0 12px 36px rgba(0, 47, 108, 0.05);
    }

    .expertise-image-wrapper {
      width: 100%;
      height: 220px;
      overflow: hidden;
      border-radius: 12px;
      margin-bottom: 24px;
      border: 1px solid var(--border);
      position: relative;
    }

    .expertise-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
    }

    .expertise-card:hover .expertise-image {
      transform: scale(1.06);
    }

    .expertise-header-group {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .expertise-icon {
      color: var(--primary);
      width: 38px;
      height: 38px;
      background: var(--surface-card);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      transition: var(--transition);
      flex-shrink: 0;
    }

    .expertise-card:hover .expertise-icon {
      background: var(--primary);
      color: white;
      box-shadow: 0 4px 12px var(--primary-glow);
    }

    .expertise-icon svg {
      width: 100%;
      height: 100%;
    }

    .expertise-card h3 {
      font-family: var(--font-title);
      font-size: 21px;
      font-weight: 700;
      color: var(--text);
    }

    .expertise-card p {
      color: var(--text-muted);
      font-size: 14.5px;
      line-height: 1.7;
      flex: 1;
    }

    /* Vision & Mission Row */
    .vision-mission-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
    }

    .vm-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 44px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.01);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .vm-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 30px rgba(0,0,0,0.025);
    }

    .vm-card.vision {
      border-left: 4.5px solid var(--primary);
    }

    .vm-card.mission {
      border-left: 4.5px solid var(--accent);
    }

    .vm-icon-box {
      width: 46px;
      height: 46px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      padding: 10px;
      transition: var(--transition);
    }

    .vm-card.vision .vm-icon-box {
      background: var(--primary-glow);
      color: var(--primary);
    }

    .vm-card.mission .vm-icon-box {
      background: rgba(180, 83, 9, 0.06);
      color: var(--accent);
    }

    .vm-card h3 {
      font-family: var(--font-title);
      font-size: 23px;
      margin-bottom: 12px;
      font-weight: 700;
      color: var(--text);
    }

    .vm-card p {
      color: var(--text-muted);
      font-size: 14.5px;
      line-height: 1.75;
    }

    /* Bento Grid (Why Join Us) */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 24px;
      margin-top: 48px;
    }

    .bento-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 36px;
      transition: var(--transition);
      box-shadow: 0 4px 24px rgba(0,0,0,0.015);
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    .bento-card:hover {
      border-color: var(--border-hover);
      box-shadow: 0 12px 30px rgba(0, 47, 108, 0.05);
      transform: translateY(-5px);
    }

    .bento-card-icon {
      color: var(--primary);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: var(--surface-card);
      padding: 10px;
      transition: var(--transition);
      flex-shrink: 0;
    }

    .bento-card:hover .bento-card-icon {
      background: var(--primary);
      color: white;
      box-shadow: 0 4px 10px var(--primary-glow);
    }

    .bento-card-icon svg {
      width: 100%;
      height: 100%;
    }

    .bento-card h3 {
      font-family: var(--font-title);
      font-size: 19px;
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--text);
    }

    .bento-card p {
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.7;
    }

    /* Bento highlights */
    .bento-card.dark-theme {
      background: var(--primary);
      border: none;
      color: white;
    }

    .bento-card.dark-theme h3 {
      color: white;
    }

    .bento-card.dark-theme p {
      color: rgba(255, 255, 255, 0.85);
    }

    .bento-card.dark-theme .bento-card-icon {
      background: rgba(255, 255, 255, 0.12);
      color: white;
    }

    .bento-card.dark-theme:hover .bento-card-icon {
      background: white;
      color: var(--primary);
    }

    .bento-card.accent-theme {
      background: linear-gradient(135deg, #ffffff 0%, #fcf7ed 100%);
      border-color: rgba(180, 83, 9, 0.18);
    }

    .bento-card.accent-theme .bento-card-icon {
      background: rgba(180, 83, 9, 0.06);
      color: var(--accent);
    }

    .bento-card.accent-theme:hover .bento-card-icon {
      background: var(--accent);
      color: white;
    }

    .bento-card.projects-bg {
      background: linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)), url('/static/images/architectural_windows.png') no-repeat center center;
      background-size: cover;
    }

    .span-3 {
      grid-column: span 3;
    }
    .span-2 {
      grid-column: span 2;
    }
    .span-4 {
      grid-column: span 4;
    }

    /* Timeline Process Section */
    .timeline-container {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      position: relative;
      margin-top: 60px;
      gap: 16px;
    }

    .timeline-line {
      position: absolute;
      top: 30px;
      left: 8%;
      right: 8%;
      height: 2px;
      background: linear-gradient(90deg, var(--border) 0%, var(--primary-glow) 50%, var(--border) 100%);
      z-index: 1;
    }

    .timeline-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 15%;
      text-align: center;
      position: relative;
      z-index: 2;
    }

    .step-badge {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--surface);
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      transition: var(--transition);
      box-shadow: 0 4px 12px rgba(0,0,0,0.02);
      margin-bottom: 20px;
      flex-shrink: 0;
    }

    .timeline-step:hover .step-badge {
      border-color: var(--primary);
      color: var(--primary);
      box-shadow: 0 8px 20px var(--primary-glow);
      transform: translateY(-4px) scale(1.05);
    }

    .step-badge svg {
      width: 22px;
      height: 22px;
      stroke-width: 1.8px;
    }

    .step-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 18px 14px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.015);
      width: 100%;
      min-height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: var(--transition);
    }

    .timeline-step:hover .step-card {
      border-color: var(--primary);
      box-shadow: 0 10px 24px rgba(0, 47, 108, 0.04);
    }

    .step-card h4 {
      font-family: var(--font-title);
      font-size: 13.5px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.35;
    }

    .step-card p {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 6px;
      line-height: 1.45;
    }

    /* Jobs Section */
    .jobs-container {
      display: flex;
      flex-direction: column;
      gap: 24px;
      max-width: 960px;
      margin: 0 auto;
    }

    .job-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 0;
      overflow: hidden;
      transition: var(--transition);
      box-shadow: 0 4px 20px rgba(0,0,0,0.01);
    }

    .job-card:hover {
      border-color: var(--primary);
      box-shadow: 0 10px 30px rgba(0, 47, 108, 0.03);
    }

    .job-card-main-info {
      padding: 32px 40px;
      cursor: pointer;
      user-select: none;
      transition: background 0.25s ease;
    }

    .job-card-main-info:hover {
      background: rgba(245, 244, 239, 0.35);
    }

    .job-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    .job-title-group h3 {
      font-family: var(--font-title);
      font-size: 23px;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--primary);
    }

    .job-meta {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 20px;
    }

    .meta-item.location-pill {
      background: rgba(2, 132, 199, 0.06);
      color: var(--accent-blue);
    }

    .meta-item.type-pill {
      background: rgba(16, 185, 129, 0.06);
      color: var(--accent-green);
    }

    .meta-item.dept-pill {
      background: rgba(180, 83, 9, 0.06);
      color: var(--accent);
    }

    .meta-item svg {
      width: 13px;
      height: 13px;
      stroke-width: 2.2px;
    }

    .job-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .job-toggle-btn {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 600;
      padding: 10px 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition);
    }

    .job-toggle-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--surface);
    }

    .chevron-icon {
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .job-card.expanded .chevron-icon {
      transform: rotate(180deg);
    }

    .job-card.expanded .job-toggle-btn {
      border-color: var(--primary);
      color: var(--primary);
    }

    .job-apply-btn {
      background: var(--primary);
      border: none;
      border-radius: 8px;
      color: white;
      cursor: pointer;
      font-family: var(--font-title);
      font-weight: 600;
      font-size: 13.5px;
      padding: 11px 24px;
      transition: var(--transition);
      box-shadow: 0 4px 10px var(--primary-glow);
    }

    .job-apply-btn:hover {
      background: var(--primary-hover);
      box-shadow: 0 6px 16px rgba(0, 47, 108, 0.12);
      transform: translateY(-2px);
    }

    .job-details {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
      border-top: 1px solid transparent;
      background: #fafaf9;
    }

    .job-card.expanded .job-details {
      max-height: 1200px;
      opacity: 1;
      border-top: 1px solid var(--border);
    }

    .job-details-inner {
      padding: 36px 40px 40px;
    }

    .job-details-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    .job-section-title {
      font-family: var(--font-title);
      font-size: 13.5px;
      font-weight: 800;
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .job-details ul {
      list-style: none;
      margin-left: 0;
    }

    .job-details li {
      margin-bottom: 10px;
      line-height: 1.6;
      font-size: 13.5px;
      color: var(--text-muted);
      position: relative;
      padding-left: 20px;
    }

    .job-details li::before {
      content: "•";
      color: var(--primary);
      font-weight: 900;
      font-size: 16px;
      position: absolute;
      left: 0;
      top: -1px;
    }

    /* Modal Overlay */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: var(--transition);
      padding: 16px;
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-window {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      width: 100%;
      max-width: 600px;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      transform: scale(0.95);
      transition: var(--transition);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    }

    .modal-overlay.open .modal-window {
      transform: scale(1);
    }

    .modal-close {
      position: absolute;
      top: 24px;
      right: 24px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 24px;
      cursor: pointer;
      line-height: 1;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: var(--transition);
    }

    .modal-close:hover {
      color: var(--text);
      background: var(--bg);
    }

    .modal-header {
      padding: 40px 40px 20px;
      border-bottom: 1px solid var(--border);
    }

    .modal-header h2 {
      font-family: var(--font-title);
      font-size: 26px;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: -0.5px;
    }

    .modal-header p {
      color: var(--text-muted);
      font-size: 14px;
      margin-top: 6px;
      line-height: 1.5;
    }

    /* Modal Form */
    .modal-form {
      padding: 24px 40px 40px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .form-group {
      margin-bottom: 18px;
      display: flex;
      flex-direction: column;
    }

    .form-group.full-width {
      grid-column: span 2;
    }

    .modal-form label {
      display: block;
      font-size: 11.5px;
      font-weight: 800;
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 8px;
    }

    .modal-form input, 
    .modal-form select {
      width: 100%;
      background: #fafaf9;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-family: inherit;
      font-size: 14px;
      padding: 12px 16px;
      outline: none;
      transition: var(--transition);
    }

    .modal-form input:focus, 
    .modal-form select:focus {
      border-color: var(--primary);
      background: var(--surface);
      box-shadow: 0 0 0 4px var(--primary-glow);
    }

    /* File Upload Area */
    .upload-container {
      border: 2px dashed var(--border);
      background: #fafaf9;
      border-radius: 12px;
      padding: 32px;
      text-align: center;
      cursor: pointer;
      transition: var(--transition);
      position: relative;
    }

    .upload-container:hover {
      border-color: var(--primary);
      background: var(--surface-card);
    }

    .upload-container.dragover {
      border-color: var(--success);
      background: rgba(16, 185, 129, 0.04);
    }

    .upload-icon-svg {
      color: var(--text-muted);
      margin: 0 auto 12px;
      width: 36px;
      height: 36px;
      transition: var(--transition);
    }

    .upload-container:hover .upload-icon-svg {
      color: var(--primary);
      transform: translateY(-4px);
    }

    .upload-title {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--text);
    }

    .upload-hint {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    .uploaded-file-name {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--success);
      background: rgba(16, 185, 129, 0.06);
      padding: 8px 16px;
      border-radius: 30px;
      border: 1px solid rgba(16, 185, 129, 0.15);
      margin-top: 16px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      display: none;
    }

    #cv-file-input {
      display: none;
    }

    /* Action Buttons */
    .form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 28px;
    }

    .btn-secondary {
      background: transparent;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      cursor: pointer;
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 14px;
      padding: 11px 24px;
      transition: var(--transition);
    }

    .btn-secondary:hover {
      background: var(--surface-card);
      color: var(--text);
    }

    .btn-primary {
      background: var(--primary);
      border: none;
      border-radius: 8px;
      color: white;
      cursor: pointer;
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 14px;
      padding: 12px 28px;
      transition: var(--transition);
    }

    .btn-primary:hover {
      background: var(--primary-hover);
      box-shadow: 0 6px 16px var(--primary-glow);
    }

    .btn-primary:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* Form States */
    .form-loading {
      display: none;
      text-align: center;
      padding: 40px 24px;
    }

    .spinner {
      border: 3.5px solid rgba(0, 0, 0, 0.05);
      border-top-color: var(--primary);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 16px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .form-error {
      background: rgba(185, 28, 28, 0.06);
      border: 1px solid rgba(185, 28, 28, 0.15);
      border-radius: 8px;
      color: var(--error);
      padding: 14px;
      font-size: 13.5px;
      margin: 20px 40px 0;
      display: none;
    }

    .form-success {
      display: none;
      text-align: center;
      padding: 56px 40px;
    }

    .success-icon-container {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--success);
      color: white;
      font-size: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      box-shadow: 0 6px 16px var(--success-glow);
    }

    .form-success h3 {
      font-family: var(--font-title);
      font-size: 24px;
      margin-bottom: 12px;
      color: var(--primary);
      font-weight: 800;
    }

    .form-success p {
      color: var(--text-muted);
      font-size: 14.5px;
      max-width: 400px;
      margin: 0 auto;
      line-height: 1.65;
    }

    /* Footer */
    footer {
      border-top: 1px solid var(--border);
      padding: 48px 24px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13.5px;
      margin-top: 100px;
    }

    footer a {
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
    }

    footer a:hover {
      text-decoration: underline;
    }

    /* Responsive adjustments */
    @media (max-width: 900px) {
      .section {
        padding: 40px 16px;
      }
      .about-grid {
        grid-template-columns: 1fr;
        padding: 32px 16px;
        gap: 32px;
      }
      .stat-card {
        padding: 16px 14px;
        gap: 14px;
      }
      .stat-number {
        width: auto;
        min-width: 70px;
        font-size: 28px;
      }
      .stat-icon-wrapper {
        width: 42px;
        height: 42px;
        padding: 8px;
      }
      .vision-mission-row {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .bento-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .span-3, .span-2, .span-4 {
        grid-column: span 1;
      }
      .timeline-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding-left: 20px;
      }
      .timeline-line {
        top: 0;
        bottom: 0;
        left: 48px;
        width: 2px;
        height: 100%;
      }
      .timeline-step {
        flex-direction: row;
        width: 100%;
        text-align: left;
        gap: 20px;
      }
      .step-badge {
        margin-bottom: 0;
      }
      .step-card {
        min-height: auto;
        padding: 16px;
      }
      .job-details-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .form-grid {
        grid-template-columns: 1fr;
      }
      .form-group.full-width {
        grid-column: span 1;
      }
      .nav-links {
        display: none;
      }
      .job-card-main-info {
        padding: 24px 20px;
      }
      .job-details-inner {
        padding: 24px 20px;
      }
      .job-header {
        align-items: flex-start;
      }
      .job-actions {
        width: 100%;
        justify-content: space-between;
      }

      /* Wise Hero Responsiveness */
      .hero-wise {
        min-height: auto;
        padding: 140px 24px 80px;
        margin-bottom: 30px;
      }
      .search-card {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        margin-top: 30px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      }
      .search-card-body {
        flex-direction: column;
        align-items: stretch;
      }
      .search-icon-btn {
        width: 100%;
        margin-top: 10px;
      }
      .sub-hero {
        padding-top: 40px;
      }
    }

    /* Scroll-triggered animations */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity;
    }

    .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Stagger delays for grid items */
    .delay-1 { transition-delay: 0.1s; }
    .delay-2 { transition-delay: 0.25s; }
    .delay-3 { transition-delay: 0.4s; }
    .delay-4 { transition-delay: 0.55s; }

    /* Timeline line drawing animation */
    .timeline-line::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, var(--primary) 0%, var(--accent-blue) 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .timeline-container.visible .timeline-line::after {
      transform: scaleX(1);
    }

    /* Timeline steps scroll entry scale */
    .timeline-step {
      opacity: 0;
      transform: scale(0.85) translateY(20px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .timeline-container.visible .timeline-step {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    /* Responsive adjustment for vertical timeline line drawing */
    @media (max-width: 900px) {
      .timeline-line::after {
        transform: scaleY(0);
        transform-origin: top;
        height: 100%;
        width: 2px;
      }
      .timeline-container.visible .timeline-line::after {
        transform: scaleY(1);
      }
    }

    /* 3D Product Section */
    .viewer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 48px;
      box-shadow: 0 4px 30px rgba(0,0,0,0.015);
      position: relative;
    }

    .viewer-container {
      width: 100%;
      height: 400px;
      background: radial-gradient(circle, #ffffff 0%, #f1f0ea 100%);
      border-radius: 12px;
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }

    model-viewer {
      width: 100%;
      height: 100%;
      --poster-color: transparent;
    }

    .viewer-controls {
      position: absolute;
      bottom: 16px;
      right: 16px;
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .viewer-btn {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(4px);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 700;
      color: var(--primary);
      cursor: pointer;
      transition: var(--transition);
    }

    .viewer-btn:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }

    .viewer-right {
      text-align: left;
    }

    .viewer-right h3 {
      font-family: var(--font-title);
      font-size: 28px;
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }

    .viewer-right p {
      color: var(--text-muted);
      font-size: 15px;
      margin-bottom: 24px;
      line-height: 1.7;
    }

    .feature-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .feature-icon {
      color: var(--success);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .feature-title {
      font-weight: 700;
      font-size: 14.5px;
      color: var(--text);
    }

    .feature-desc {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    @media (max-width: 900px) {
      .viewer-grid {
        grid-template-columns: 1fr;
        padding: 32px 20px;
        gap: 36px;
      }
      .viewer-container {
        height: 320px;
      }
    }

    .mobile-back-btn {
      display: none;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      background: rgba(24, 95, 165, 0.08);
      border: 1px solid rgba(24, 95, 165, 0.15);
      border-radius: 8px;
      padding: 8px 12px;
      text-decoration: none;
      transition: var(--transition);
    }
    header.transparent .mobile-back-btn {
      color: white;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .mobile-back-btn:hover {
      background: var(--primary-glow);
    }
    header.transparent .mobile-back-btn:hover {
      background: rgba(255, 255, 255, 0.25);
    }
    @media (max-width: 900px) {
      .mobile-back-btn {
        display: inline-flex;
        margin-right: 12px;
      }
    }