/* comment */
			.proj-card .proj-body ul { display: none; }
			.proj-card h3 { display: block; }
			.proj-card h3 .desktop-text { font-weight: 650; }
			.proj-card h3 .yr { float: right; margin-left: 0.8em; text-align: right; }
			
			/* comment */
			@media screen and (min-width: 981px) {
				#main { padding: 8em 2.5em 4em 2.5em !important; }
				#one p, #one .actions { padding: 0 3em; }
			}
			#header {
				height: 100vh !important;
			}
			#header .inner {
				min-height: 78vh;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			#header .header-profile {
				display: grid;
				gap: 1.2rem;
				justify-items: end;
				transform: translateY(-2.4rem);
			}
			#header .header-profile .image.avatar {
				margin: 0 0 0.2rem 0 !important;
				justify-self: end;
			}
			#header .profile-summary {
				display: grid;
				gap: 0.95rem;
				justify-items: end;
				margin: 0;
				line-height: 1.28;
			}
			#header .profile-summary strong {
				display: block;
				font-size: 1.12em;
				line-height: 1.25;
				letter-spacing: 0;
			}
			#header .profile-role {
				display: block;
				color: rgba(255,255,255,0.72);
				font-weight: 700;
			}
			#header .profile-degree {
				display: block;
				color: #fff;
				font-weight: 700;
				line-height: 1.3;
			}
			#header .profile-school {
				display: block;
				color: rgba(255,255,255,0.68);
				font-style: italic;
				margin-top: -0.55rem;
				line-height: 1.35;
			}

			/* Hide scrollbars globally */
			::-webkit-scrollbar {
				display: none;
			}
			html {
				-ms-overflow-style: none;  /* IE and Edge */
				scrollbar-width: none;  /* Firefox */
				overflow-y: scroll; /* Keep scroll behavior */
			}

			/* comment */
			#one .actions { margin-top: 2.5em; }
			#main .button {
				display: inline-flex !important;
				align-items: center !important;
				justify-content: center !important;
				height: 2.4em !important;
				padding: 0 1.5em !important;
				background: transparent !important;
				border: 2px solid #111 !important;
				color: #111 !important;
				font-size: 0.95em !important;
				font-weight: 700 !important;
				border-radius: 4px !important;
				transition: all 0.2s ease !important;
				box-shadow: none !important;
			}
			#main .button:hover {
				background: #111 !important;
				color: #fff !important;
			}
			#main .button.primary {
				background: #111 !important;
				color: #fff !important;
			}
			#main .button.primary:hover {
				background: #e63946 !important;
				border-color: #e63946 !important;
				color: #fff !important;
			}
			
			/* Desktop/Mobile Toggles */
			.mobile-icon { display: none !important; }
			.desktop-text { display: inline !important; }
			.mobile-block { display: none !important; }
			.desktop-block { display: block !important; }
			
			/* comment */
			.timeline {
				--timeline-line-left: 20px;
				--timeline-line-width: 4px;
				--timeline-line-center-offset: 2px;
				--timeline-content-left: 70px;
				position: relative; padding-left: var(--timeline-content-left); margin-top: 1.5em;
			}
			.timeline::before {
				content: ''; position: absolute; left: var(--timeline-line-left); top: 17px; bottom: 0;
				width: var(--timeline-line-width); background: rgba(0,0,0,0.15);
			}
			
			/* comment */
			.proj-img-wrap {
				position: relative; overflow: hidden; cursor: pointer; background: #111;
			}
			.proj-img-wrap img {
				display: block; width: 100%; transition: transform 0.3s ease;
			}
			.proj-img-overlay {
				position: absolute; top: 0; left: 0; width: 100%; height: 100%;
				background: rgba(0,0,0,0.5);
				display: flex; align-items: center; justify-content: center;
				opacity: 0; transition: opacity 0.3s ease; z-index: 2;
			}
			.proj-img-wrap:hover .proj-img-overlay { opacity: 1; }
			.proj-img-wrap:hover img { transform: scale(1.05); }
			.view-btn {
				border: 2px solid #fff; color: #fff; padding: 0.5em 1.5em;
				border-radius: 4px; font-weight: 600; font-size: 1.1em;
				backdrop-filter: blur(4px); letter-spacing: 1px;
			}
			
			/* View transition animation */
			.spa-view {
				animation: viewSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
			}
			@keyframes viewSlideUp {
				from { opacity: 0; transform: translateY(60px); }
				to { opacity: 1; transform: translateY(0); }
			}

			.modal-overlay {
				position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
				background: rgba(0,0,0,0.85); z-index: 99999;
				display: flex; align-items: center; justify-content: center;
				opacity: 0; visibility: hidden; transition: all 0.3s ease;
				backdrop-filter: blur(5px);
			}
			.modal-overlay.active { opacity: 1; visibility: visible; }
			.modal-container {
				background: #fff; width: 95%; max-width: 1400px; height: 95vh;
				border-radius: 8px; position: relative;
				transform: translateY(30px); transition: transform 0.3s ease;
				display: flex; flex-direction: column; overflow: hidden;
			}
			.modal-overlay.active .modal-container { transform: translateY(0); }
			.modal-close {
				position: absolute; top: 15px; right: 20px; font-size: 2em;
				color: #999; cursor: pointer; line-height: 1; z-index: 100;
				transition: color 0.2s;
			}
			.modal-close:hover { color: #e63946; }
			.modal-content {
				flex: 1; overflow: hidden; padding: 0; display: flex; flex-direction: column;
			}
			.modal-split {
				display: flex; width: 100%; height: 100%;
			}
			.modal-visuals {
				flex: 0 0 55%; background: #111; position: relative; overflow: hidden;
			}
			.modal-visuals-absolute {
				position: absolute; inset: 0; width: 100%; height: 100%;
			}
			.modal-visuals img, .modal-visuals video {
				max-width: 100%; max-height: 100%; display: block; object-fit: contain;
				margin: auto;
			}
			.modal-details {
				flex: 4; background: #fff; overflow-y: auto; padding: 3em 4em;
			}
			.modal-details h3 { font-size: 1.8em; margin-bottom: 0.5em; color: #111; line-height: 1.25; }
			.modal-project-header {
				margin: 0 0 1.45em;
				padding-right: 2.4em;
			}
			.modal-project-title {
				display: grid;
				gap: 0.16em;
				margin: 0 0 0.35em !important;
				max-width: 13.5em;
				text-wrap: balance;
			}
			.modal-title-main,
			.modal-title-scope {
				display: block;
			}
			.modal-title-scope {
				color: #1f1f1f;
				font-weight: 650;
			}
			.modal-project-date {
				color: #777;
				font-size: 0.95em;
				font-weight: 600;
				line-height: 1.3;
			}
			.modal-details h3 .yr {
				display: block;
				float: none;
				margin: 0.35em 0 0;
				color: #777;
				font-size: 0.5em;
				font-weight: 500;
				letter-spacing: 0.01em;
			}
			
			.modal-actions {
				margin-bottom: 2em; padding-bottom: 1.5em; border-bottom: 1px solid #eee;
				display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
			}
			.modal-actions .button {
				padding: 0 1.5em; height: 2.5em; line-height: 2.5em; font-size: 0.85em;
				background: #111; color: #fff !important; border: none; border-radius: 4px;
			}
			.modal-actions .button:hover { background: #e63946; }

			body.modal-open { overflow: hidden !important; }

			@media (max-width: 980px) {
				.modal-split { display: block; overflow-y: auto; height: 100%; position: relative; }
				.modal-visuals { 
					position: sticky; top: 0; z-index: 10;
					width: 100%; height: 75vh; min-height: 75vh; max-height: 75vh; 
					overflow: hidden; background: #111;
				}
				.modal-visuals-absolute {
					position: absolute; top: 0; left: 0; width: 100%;
					height: 75vh; transform-origin: top center; -webkit-transform-origin: top center; z-index: 1;
				}
				.top-bar-overlay {
					position: absolute; top: 0; left: 0; width: 100%; height: 50px;
					z-index: 30; pointer-events: none;
				}
				.modal-details { 
					position: relative; z-index: 20; 
					background: #fff; min-height: unset; height: calc(100% - 50px);
					padding: 1.2em 1em; 
					overflow-y: auto;
					margin-top: 0;
				}
				.modal-container { width: 95%; height: 95%; max-height: 95vh; }
				.modal-details h3 { font-size: 1.4em; margin-top: 0; }
				.modal-project-header { padding-right: 2.2em; margin-bottom: 1.2em; }
				.modal-project-title {
					font-size: clamp(1.65em, 7vw, 2.15em) !important;
					max-width: 10.5em;
					line-height: 1.12 !important;
				}
				.modal-project-date { font-size: 0.9em; }
				.modal-actions { margin-bottom: 1em !important; padding-bottom: 1em !important; justify-content: center !important; }
				.carousel-btn { display: none !important; } /* Hide arrows on mobile */
				.carousel-dots { padding: 6px 12px !important; gap: 8px !important; }
				.carousel-dot { width: 8px !important; height: 8px !important; }
				.modal-actions { justify-content: center !important; }
			}

			/* comment */

			.timeline-year { position: relative; margin-top: 3.5em; }
			.timeline-year:first-child { margin-top: 0; }
			.timeline-year::before {
				content: ''; position: absolute;
				left: calc(var(--timeline-line-left) - var(--timeline-content-left) + var(--timeline-line-center-offset) - 7px);
				top: 10px;
				width: 14px; height: 14px;
				background: #2a2a2a; border-radius: 50%;
				border: 3px solid #fff;
				box-shadow: 0 0 0 3px #e0e0e0;
				box-sizing: border-box;
				z-index: 2;
			}
			.timeline-year::after {
				content: ''; position: absolute;
				left: calc(var(--timeline-line-left) - var(--timeline-content-left) + var(--timeline-line-center-offset) + 7px);
				top: 17px;
				width: 26px; height: 2px;
				background: rgba(0,0,0,0.25);
				z-index: 1;
			}
			.timeline-year-label {
				position: relative; margin-left: -22px; 
				background: #2a2a2a; color: #fff;
				display: inline-flex; align-items: center; justify-content: center;
				font-weight: 700; font-size: 1.15em; 
				min-height: 34px; padding: 0 18px; margin-bottom: 1.5em; letter-spacing: 0.05em;
				border-radius: 20px;
				box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			}
			/* comment */
			.timeline-projects {
				display: grid; grid-template-columns: 1fr 1fr;
				gap: 1.4em; margin-top: 0.8em; margin-bottom: 0.5em;
			}
			.proj-card {
				background: #fff; border: 1px solid #eaeaea;
				border-radius: 8px; overflow: hidden;
				transition: border-color 0.2s ease, box-shadow 0.2s ease;
			}
			.proj-card:hover { border-color: #bbb; box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
			.proj-card.full { grid-column: 1 / -1; }
			.proj-img-carousel {
				display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
				scrollbar-width: none; -ms-overflow-style: none; background: #111;
			}
			.proj-img-carousel::-webkit-scrollbar { display: none; }
			.proj-img-carousel img, .proj-card > img {
				width: 100%; aspect-ratio: 4/3; flex: 0 0 100%; scroll-snap-align: start;
				object-fit: cover; object-position: center center !important; display: block;
			}
			.proj-card.full img { aspect-ratio: 21/6; }
			.proj-body { padding: 1em 1.2em 1.2em; }
			.proj-body h3 {
				font-size: 0.97em; font-weight: 700; color: #111 !important;
				margin: 0 0 0.45em; line-height: 1.35; border-bottom: none !important;
			}
			.proj-body h3 .yr { font-weight: 500; color: #888; font-size: 0.82em; }
			.proj-body p { clear: both; font-size: 0.87em; color: #444; line-height: 1.6; margin: 0 0 0.5em; }
			.proj-body ul { font-size: 0.84em; color: #555; padding-left: 1.1em; margin: 0 0 0.8em; }
			.proj-body ul li { margin-bottom: 0.2em; }
			.proj-tags { display: flex; flex-wrap: wrap; gap: 5px; }
			.proj-tag {
				background: #fff0f0; color: #c0392b; border: 1px solid #f5c6c6;
				border-radius: 4px; font-size: 0.73em; padding: 2px 7px;
				font-weight: 600; font-family: monospace;
			}
			@media (max-width: 768px) {
				#main { padding: 2em 0.8em !important; }
				.timeline {
					--timeline-line-left: 10px;
					--timeline-line-width: 3px;
					--timeline-line-center-offset: 1.5px;
					--timeline-content-left: 30px;
					padding-left: var(--timeline-content-left) !important;
				}
				.timeline::before { left: var(--timeline-line-left) !important; width: var(--timeline-line-width) !important; background: rgba(0,0,0,0.2) !important; }
				.timeline-year::before { 
					left: calc(var(--timeline-line-left) - var(--timeline-content-left) + var(--timeline-line-center-offset) - 5px) !important;
					top: 9px !important; 
					width: 10px !important; 
					height: 10px !important; 
					border-width: 2px !important; 
					box-shadow: 0 0 0 2px #e0e0e0 !important; 
					margin: 0 !important; 
				}
				.timeline-year::after {
					content: ''; position: absolute;
					left: calc(var(--timeline-line-left) - var(--timeline-content-left) + var(--timeline-line-center-offset) + 5px) !important;
					top: 13px !important;
					width: 15px !important; height: 2px !important;
					background: rgba(0,0,0,0.3) !important;
					z-index: 1;
				}
				.timeline-year-label {
					margin-left: 0 !important; font-size: 0.95em !important;
					min-height: 28px !important; padding: 0 12px !important; margin-bottom: 1.2em !important;
				}
				
				/* Mobile Project Cards: 2 Columns, No Description/Tags */
				.timeline-projects { 
					grid-template-columns: repeat(2, 1fr) !important; 
					gap: 10px !important; 
					margin-top: 0 !important;
				}
				.proj-card.full { grid-column: span 2 !important; }
				
				.proj-img-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
				.proj-img-carousel::-webkit-scrollbar { display: none; }
				.proj-img-carousel img, .proj-card > img {
					aspect-ratio: 1 / 1 !important; flex: 0 0 100% !important;
					object-position: center center !important;
				}
				
				.proj-card p, .proj-card .proj-tags { 
					display: none !important; 
				}
				.proj-card .proj-body { 
					padding: 0.8em 0.5em !important; 
				}
				
				/* Date on top, Title on bottom */
				.proj-card h3 { 
					display: flex !important; 
					flex-direction: column-reverse !important; 
					align-items: flex-start !important; 
					gap: 5px !important; 
					font-size: 0.9em !important; 
					line-height: 1.3 !important;
				}
				.proj-card h3 .yr { 
					margin: 0 !important; 
					font-size: 0.85em !important; 
					color: #777 !important;
				}
				
				#one .actions {
					flex-direction: row !important;
					justify-content: center !important;
					flex-wrap: nowrap !important;
					gap: 5px !important; /* Very close together */
					padding: 0 !important;
				}
				/* Swap visual order for mobile: Home(1), Contact(3)->2, Resume(2)->3 */
				#one .actions li:nth-child(1) { order: 1; }
				#one .actions li:nth-child(2) { order: 3; }
				#one .actions li:nth-child(3) { order: 2; }
				
				#one .actions li { 
					display: block !important;
					width: auto !important;
					padding: 0 !important; 
					margin: 0 !important; 
				}
				#one .actions li > * {
					width: auto !important;
				}
				
				/* Toggle text to icon */
				.mobile-icon { display: inline !important; font-size: 1.25em; }
				.desktop-text { display: none !important; }
				.mobile-block { display: block !important; }
				.desktop-block { display: none !important; }
				
				/* Mobile Square Buttons */
				#one .actions .button {
					width: 3em !important; 
					height: 3em !important;
					min-width: 0 !important;
					padding: 0 !important;
					display: inline-flex !important;
					align-items: center !important;
					justify-content: center !important;
					border-radius: 8px !important;
					line-height: normal !important;
				}
				#one .actions .button.primary {
					background: #111 !important; /* Black */
					border-color: #111 !important;
				}
				#one .actions .button.primary:hover {
					background: #333 !important;
					border-color: #333 !important;
				}
			}
		
			#main > section.view-resume,
			#main > section.view-contact {
				border-top: 0 !important;
				margin-top: 0 !important;
				padding-top: 0 !important;
			}
			/* Prevent iOS Safari PDF iframe overflow */
			.view-resume iframe {
				width: 100% !important;
				max-width: 100vw;
			}
			@media (max-width: 768px) {
				.view-resume iframe { height: 600px !important; }
			}
			#main .button.btn-square-icon::before { margin-right: 0 !important; margin-left: 0 !important; }
			/* comment */
			@media screen and (min-width: 981px) {
				#main { padding: 8em 3em 4em 3em !important; }
				/* comment */
				body:has(section.view-contact:not([style*="none"])),
				body:has(section.view-resume:not([style*="none"])) {
					#main { padding-top: 3em !important; }
				}
				.mobile-only { display: none !important; }
			}
			@media screen and (max-width: 980px) {
				/* Fixed 1-page layout ONLY for Contact & Resume */
				body.contact-active, body.resume-active {
					display: flex;
					flex-direction: column;
					height: 100vh;
					height: 100dvh;
					overflow: hidden;
				}
				body.contact-active #main, body.resume-active #main {
					flex: 1 !important;
					overflow-y: auto !important;
					-webkit-overflow-scrolling: touch !important;
					padding-top: 2em !important;
					padding-bottom: 2em !important;
				}

				/* Synchronized compact size for Footer on ALL pages */
				#footer {
					height: 90px !important;
					min-height: 90px !important;
					max-height: 90px !important;
					display: flex !important;
					align-items: center !important;
					justify-content: center !important;
					flex-direction: column !important;
					padding: 0 !important;
				}
				body.contact-active #header, body.resume-active #header {
					flex: 0 0 auto !important; /* Natural height */
				}
				body.contact-active #footer, body.resume-active #footer {
					display: none !important; /* Remove footer on Contact & Resume pages on mobile */
				}
				#footer .icons {
					margin: 0 !important;
					padding: 0 !important;
					width: 100%;
					text-align: center;
					display: flex;
					justify-content: center;
				}

				.desktop-only { display: none !important; }
			}

			/* comment */
			.contact-header {
				font-size: 3.5em; font-weight: 700;
				margin-top: 0.2em; margin-bottom: 0.2em;
				line-height: 1.1; letter-spacing: -0.02em; color: #1a1a1a;
			}
			@media (max-width: 768px) {
				.contact-header { font-size: 2.5em; }
				.contact-subtitle { font-size: 1.1em !important; }
			}
			.buttons-container { display: flex; gap: 15px; margin-bottom: 3.5em; flex-wrap: wrap; }
			.contact-btn {
				display: inline-flex; align-items: center; justify-content: center;
				padding: 0.75em 1.5em !important; font-weight: 600;
				border: 1px solid #e5e5e5 !important; border-radius: 8px !important;
				background: #fff; color: #1a1a1a !important;
				text-decoration: none !important; transition: all 0.2s ease;
				box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
				border-bottom: 1px solid #e5e5e5 !important;
				height: auto !important; line-height: normal !important;
			}
			.contact-btn:hover { border-color: #1a1a1a !important; background: #fcfcfc; transform: translateY(-1px); }
			.contact-btn.primary {
				background: #1a1a1a; color: #ffffff !important;
				border-color: #1a1a1a !important; border-bottom: 1px solid #1a1a1a !important;
			}
			.contact-btn.primary:hover { background: #333333; border-color: #333333 !important; }

			.contact-social-icons {
				text-align: center;
				margin-bottom: 3.5em;
			}
			.contact-social-icons a {
				color: #1a1a1a !important;
				transition: color 0.2s ease, transform 0.2s ease;
				display: inline-block;
			}
			.contact-social-icons a:hover {
				color: #49bf9d !important;
				transform: translateY(-2px);
			}
			.contact-social-icons li .icon:before {
				font-size: 2em;
			}
			
			.contact-layout {
				display: flex;
				flex-wrap: wrap;
				gap: 4em;
				align-items: stretch;
			}
			.contact-left {
				flex: 1;
				min-width: 300px;
				position: relative;
				z-index: 2;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
			}
			.contact-right {
				flex: 0.75; /* balances the layout against the 58% split background */
				min-width: 300px;
			}
			.buttons-container {
				display: flex;
				gap: 1em;
				justify-content: center;
				flex-wrap: wrap;
			}
			
			/* Desktop split background logic */
			@media (min-width: 981px) {
				body.contact-active #main {
					background-image: linear-gradient(to right, #ffffff 58%, transparent 58%), linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../pictures/home/background_1.jpg");
					background-size: 100% 100%, cover, cover;
					background-position: left top, center, center;
					background-repeat: no-repeat;
					min-height: 100vh;
				}
			}
			.contact-subtitle {
				font-size: 1.15em;
				color: #555;
				line-height: 1.6;
				margin-bottom: 2.5em;
				font-weight: 500;
				width: 100%; /* Default for mobile */
				text-align: center; /* 'căn ngang' = center */
			}
			.contact-info-card {
				background: #fcfcfc;
				padding: 2em;
				border-radius: 12px;
				border: 1px solid #eee;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 1.5em;
				text-align: left; /* Keep internal text left-aligned */
				width: 100%;
				max-width: 480px;
				margin: 0 auto; /* Center the card itself */
				box-shadow: 0 4px 20px rgba(0,0,0,0.04);
			}
			@media (max-width: 980px) {
				.contact-layout { gap: 2em; align-items: flex-start; }
				.contact-info-card { padding: 1.5em; gap: 1.5rem; }
				body.contact-active #footer .icons { display: none !important; }
			}
			
			.meta-item {
				display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
			}
			.meta-item h4 {
				font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em;
				color: #999; margin: 0 0 0.5em 0 !important; padding: 0 !important;
				border-bottom: none; white-space: nowrap;
			}
			.meta-item p {
				margin: 0 !important; padding: 0 !important;
				color: #1a1a1a; font-weight: 500; font-size: 1.1em; white-space: nowrap;
			}
			.phone-link { color: #1a1a1a !important; text-decoration: none !important; border-bottom: none !important; transition: color 0.2s; }
			.phone-link:hover { color: #f56a6a !important; }

			/* comment */
			.carousel-track {
				display: flex; height: 100%; width: 100%; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
				overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
			}
			.carousel-track::-webkit-scrollbar { display: none; }
			.carousel-slide {
				flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start;
				display: flex; align-items: center; justify-content: center;
			}
			.carousel-slide img, .carousel-slide video {
				max-width: 100%; max-height: 100%; object-fit: contain;
			}

			.carousel-btn {
				position: absolute; top: 50%; transform: translateY(-50%);
				background: rgba(0,0,0,0.6); color: #fff; border: 2px solid rgba(255,255,255,0.2);
				width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
				font-size: 1.5em; cursor: pointer; z-index: 10; transition: all 0.3s;
				border-radius: 50%; backdrop-filter: blur(4px);
			}
			.carousel-btn:hover { background: rgba(0,0,0,0.9); border-color: rgba(255,255,255,0.6); }
			.carousel-btn.prev { left: 20px; }
			.carousel-btn.next { right: 20px; }
			.carousel-dots-container {
				position: absolute; bottom: 20px; left: 0; width: 100%;
				display: flex; justify-content: center; z-index: 10; pointer-events: none;
			}
			.carousel-dots {
				display: flex; justify-content: center; gap: 10px; 
				background: rgba(0,0,0,0.6); padding: 10px 16px; border-radius: 20px;
				backdrop-filter: blur(4px); pointer-events: auto; border: 1px solid rgba(255,255,255,0.1);
			}
			.carousel-dot {
				width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.3);
				cursor: pointer; transition: all 0.3s;
			}
			.carousel-dot.active { background: #fff; transform: scale(1.2); box-shadow: 0 0 5px rgba(255,255,255,0.5); }

			.header-icons.mobile-only { display: none; }

			/* --- COMPACT MOBILE HEADER --- */
			@media (max-width: 980px) {
				#header {
					padding: 1.2em 1.5em 0.8em 1.5em !important;
					height: auto !important;
					min-height: 0 !important;
					background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url("../../pictures/home/background_1.jpg") !important;
					background-size: cover !important; 
					background-position: center center !important; 
				}
				#header .inner {
					display: flex;
					flex-direction: column !important; /* Stack profile over icons */
					align-items: center;
					gap: 12px;
					margin-bottom: 0;
					min-height: 0;
				}
				#header .header-profile {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					gap: 15px;
					transform: none !important;
				}
				#header .avatar {
					width: 65px !important;
					height: 65px !important;
					margin: 0 !important;
					flex-shrink: 0;
				}
				#header h1 {
					font-size: 1.1em !important;
					margin: 0 !important;
					text-align: left !important;
					line-height: 1.3 !important;
					justify-items: start !important;
					gap: 0.15rem !important;
				}
				#header h1 strong {
					font-size: 1.15em !important;
					display: block;
					margin-bottom: 2px;
				}
				/* Hide extra details on mobile to save space */
				#header h1 b, #header h1 i, #header h1 br,
				#header .profile-degree,
				#header .profile-school {
					display: none !important;
				}
				
				/* Mobile Social Icons */
				.header-icons.mobile-only {
					display: flex;
					flex-direction: row;
					justify-content: center;
					gap: 20px;
					padding: 0;
					margin: 0;
					list-style: none;
				}
				.header-icons.mobile-only a {
					color: #fff;
					font-size: 1.25em;
					opacity: 0.85;
					text-decoration: none;
					border-bottom: none;
				}
			}


/* Footer contrast enhancements */
@media screen and (min-width: 981px) {
	#footer {
		position: fixed !important;
		top: auto !important;
		left: 0 !important;
		bottom: 1.2em !important;
		width: 35% !important;
		height: 110px !important;
		padding: 0 4em !important;
		display: flex !important;
		align-items: flex-end !important;
		justify-content: flex-end !important;
		text-align: right !important;
		z-index: 2;
	}
	#footer .inner,
	#footer .icons {
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#footer .inner {
		min-height: 0 !important;
		display: block !important;
		flex: 0 0 auto !important;
		width: auto !important;
	}
}
#footer .icons a { color: rgba(255, 255, 255, 0.9) !important; transition: color 0.2s ease; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
#footer .icons a:hover { color: #49bf9d !important; }