/* ==========================
   BACK BUTTON
========================== */

.back-btn{
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;
    outline: none;

    background: #ffffff;
    color: #333333;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    cursor: pointer;
    font-weight: 600;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    transition:
        all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-btn:hover{
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.back-btn:active{
    transform: translateY(-50%) scale(0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:root { 	--ink: #101113; 	--muted: #73767c; 	--line: #e5e6e8; 	--soft: #f5f5f6; 	--white: #fff; 	--radius: 24px; }  * { 	box-sizing: border-box; }  html { 	scroll-behavior: smooth; }  body { 	margin: 0; 	color: var(--ink); 	background: #fff; 	font-family: "DM Sans", sans-serif; 	font-size: 15px; 	line-height: 1.55; }  a { 	color: inherit; 	text-decoration: none; }  .site-header { 	align-items: center; 	display: flex; 	justify-content: space-between; 	margin: 0 auto; 	max-width: 1440px; 	padding: 24px 4vw; 	position: relative; 	/* Back button positioning */ }  .brand { 	font-family: "Space Grotesk", sans-serif; 	font-size: 24px; 	font-weight: 700; 	letter-spacing: -1px; }  .brand span, h1 span, h2 span { 	color: #a9adb3; }  .main-nav { 	display: flex; 	gap: clamp(20px, 3vw, 48px); 	margin-left: 10%; }  .main-nav a { 	color: #5e6166; 	font-size: 13px; 	font-weight: 500; 	padding: 8px 0; }  .main-nav a:hover, .main-nav a.active { 	border-bottom: 1px solid var(--ink); 	color: var(--ink); }  .menu-toggle { 	display: none; 	background: none; 	border: 0; 	font: inherit; }  .button { 	align-items: center; 	border: 1px solid transparent; 	border-radius: 999px; 	display: inline-flex; 	gap: 16px; 	justify-content: center; 	padding: 12px 20px; 	font-size: 13px; 	font-weight: 600; 	transition: transform 0.2s ease, background 0.2s ease; }  .button:hover { 	transform: translateY(-2px); }  .button-dark { 	color: #fff; 	background: var(--ink); }  .button-light { 	background: #fff; 	border-color: var(--line); }  .panel { 	background: linear-gradient(115deg, #fafafa, #f3f3f5); 	border: 1px solid #f1f1f2; 	border-radius: var(--radius); }  main { 	margin: 0 auto; 	max-width: 1440px; 	padding: 0 3vw 40px; }  .hero { 	display: grid; 	grid-template-columns: 0.8fr 1.2fr; 	min-height: 490px; 	overflow: hidden; }  .hero-copy, .travel-copy { 	align-self: center; 	padding: clamp(40px, 7vw, 100px); 	position: relative; 	z-index: 1; }  .eyebrow { 	color: var(--muted); 	font-size: 12px; 	font-weight: 700; 	letter-spacing: 0.13em; 	margin: 0 0 18px; 	text-transform: uppercase; }  h1, h2, h3, p { 	margin-top: 0; }  h1, h2 { 	font-family: "Space Grotesk", sans-serif; 	letter-spacing: -2.5px; 	line-height: 0.98; }  h1 { 	font-size: clamp(50px, 6vw, 82px); 	margin-bottom: 24px; }  h2 { 	font-size: clamp(30px, 3.1vw, 48px); 	margin-bottom: 16px; }  h3 { 	font-size: 18px; 	margin-bottom: 4px; }  .intro-meta { 	color: var(--muted); 	font-size: 13px; }  .intro-meta i { 	border-left: 1px solid #c4c6c9; 	display: inline-block; 	height: 12px; 	margin: 0 9px; 	vertical-align: -2px; }  .lede { 	color: var(--muted); 	max-width: 440px; }  .button-row { 	display: flex; 	flex-wrap: wrap; 	gap: 12px; 	margin-top: 28px; }  .hero-media { 	align-self: stretch; 	min-height: 400px; }  .image-slot { 	background: #e7e8eb; 	overflow: hidden; 	position: relative; }  .image-slot img { 	display: block; 	height: 100%; 	object-fit: cover; 	width: 100%; }  .hero-media img { 	object-position: center 28%; 	transform: scale(1.08); }  .portrait img { 	object-position: center 18%; }  .project-image img { 	object-position: center 18%; }  .travel-media img { 	object-position: center 20%; }  .image-label { 	background: rgba(255, 255, 255, 0.92); 	bottom: 12px; 	color: #555; 	display: none; 	font-size: 11px; 	left: 12px; 	padding: 5px 8px; 	position: absolute; }  .image-missing { 	align-items: center; 	background: repeating-linear-gradient(135deg, #e6e7e9, #e6e7e9 10px, #eff0f1 10px, #eff0f1 20px); 	display: flex; 	justify-content: center; }  .image-missing img { 	display: none; }  .image-missing .image-label { 	display: block; }  .profile { 	display: grid; 	gap: clamp(26px, 4vw, 70px); 	grid-template-columns: 210px 1fr 1fr; 	margin-top: 12px; 	padding: 42px clamp(24px, 5vw, 72px); }  .portrait { 	align-self: center; 	aspect-ratio: 1; 	border-radius: 50%; }  .details { 	border-right: 1px solid var(--line); 	padding-right: 30px; }  .details h2 { 	font-size: 29px; 	max-width: 370px; }  dl { 	margin: 28px 0 0; }  dl div { 	display: grid; 	grid-template-columns: 100px 1fr; 	margin: 7px 0; }  dt { 	color: var(--muted); }  dd { 	font-weight: 500; 	margin: 0; }  .about-note { 	align-self: center; 	max-width: 410px; }  .role-list { 	display: flex; 	gap: 8px; 	margin-top: 24px; }  .role-list span { 	border: 1px solid var(--line); 	border-radius: 14px; 	padding: 16px 18px; 	font-size: 13px; }  .split-section { 	display: grid; 	gap: 12px; 	grid-template-columns: 1.1fr 0.9fr; 	margin-top: 12px; }  .split-section .panel { 	padding: 40px clamp(24px, 4vw, 58px); }  .section-heading { 	margin-bottom: 28px; }  .section-heading .eyebrow { 	margin-bottom: 10px; }  .section-heading h2 { 	font-size: 34px; }  .section-heading > p:last-child { 	color: var(--muted); }  .timeline { 	border-left: 1px solid #c7c8ca; 	margin-left: 13px; 	padding-left: 34px; }  .timeline article { 	margin-bottom: 25px; 	position: relative; }  .timeline article:last-child { 	margin-bottom: 0; }  .timeline article::before { 	background: var(--ink); 	border: 4px solid #f6f6f7; 	border-radius: 50%; 	content: ""; 	height: 7px; 	left: -42px; 	position: absolute; 	top: 4px; 	width: 7px; }  .timeline-year, .project-number { 	color: var(--muted); 	font-size: 12px; }  .timeline p, .timeline article > span:last-child { 	color: var(--muted); 	font-size: 13px; }  .timeline h3 { 	margin: 4px 0 0; }  .timeline p { 	margin-bottom: 0; }  .skill { 	margin: 17px 0; }  .skill div { 	display: flex; 	font-size: 13px; 	justify-content: space-between; }  .skill div span { 	color: var(--muted); }  .skill b { 	background: #dedfe1; 	border-radius: 99px; 	display: block; 	height: 5px; 	margin-top: 7px; }  .skill b i { 	background: var(--ink); 	border-radius: inherit; 	display: block; 	height: 100%; }  .soft-skills { 	border-top: 1px solid var(--line); 	display: flex; 	flex-wrap: wrap; 	gap: 8px 20px; 	margin-top: 30px; 	padding-top: 20px; }  .soft-skills span { 	color: var(--muted); 	font-size: 12px; }  .projects-section { 	padding: 100px 4vw 72px; }  .projects-section > .section-heading { 	max-width: 540px; }  .project-grid { 	display: grid; 	gap: 16px; 	grid-template-columns: repeat(3, 1fr); }  .project-card { 	border: 1px solid var(--line); 	border-radius: 20px; 	overflow: hidden; }  .project-image { 	aspect-ratio: 1.55; }  .project-info { 	padding: 24px; }  .project-number { 	margin-bottom: 14px; }  .project-info p:not(.project-number) { 	color: var(--muted); 	min-height: 48px; }  .project-info a { 	border-top: 1px solid var(--line); 	display: flex; 	font-weight: 600; 	justify-content: space-between; 	margin-top: 22px; 	padding-top: 16px; }  .travel { 	display: grid; 	grid-template-columns: 0.9fr 1.1fr; 	min-height: 400px; 	overflow: hidden; }  .travel-copy { 	padding-left: clamp(32px, 7vw, 100px); }  .travel-media { 	min-height: 400px; }  .contact { 	display: grid; 	gap: 60px; 	grid-template-columns: 0.8fr 1.2fr; 	margin-top: 12px; 	padding: clamp(30px, 5vw, 70px); }  .contact h2 { 	font-size: clamp(46px, 5vw, 70px); }  .contact-links { 	margin-top: 30px; }  .contact-links a { 	border-bottom: 1px solid var(--line); 	display: flex; 	justify-content: space-between; 	padding: 15px 0; }  .contact-workspace { 	display: grid; 	gap: 24px; }  .contact-form { 	align-content: center; 	display: grid; 	gap: 16px; 	grid-template-columns: 1fr 1fr; }  .contact-form label { 	color: var(--muted); 	font-size: 12px; }  .contact-form label:nth-child(3), .contact-form label:nth-child(4), .contact-form button, .form-status { 	grid-column: 1 / -1; }  input, textarea { 	background: #fff; 	border: 1px solid var(--line); 	border-radius: 12px; 	display: block; 	font: inherit; 	margin-top: 7px; 	padding: 14px; 	resize: vertical; 	width: 100%; }  input:focus, textarea:focus { 	border-color: var(--ink); 	outline: none; }  .form-status { 	color: var(--muted); 	font-size: 12px; 	margin: 0; 	text-align: center; }  .receipt-card { 	background: #fff; 	border: 1px solid var(--line); 	border-radius: 18px; 	padding: 22px; }  .receipt-heading { 	align-items: center; 	display: flex; 	gap: 12px; }  .receipt-heading .eyebrow { 	margin-bottom: 4px; }  .receipt-heading h3 { 	margin: 0; }  .receipt-check { 	align-items: center; 	background: #e6f1e9; 	border-radius: 50%; 	color: #2e7445; 	display: flex; 	font-size: 18px; 	height: 34px; 	justify-content: center; 	width: 34px; }  .receipt-details { 	border-bottom: 1px solid var(--line); 	border-top: 1px solid var(--line); 	margin: 20px 0; 	padding: 12px 0; }  .receipt-details p { 	align-items: center; 	display: flex; 	font-size: 12px; 	gap: 16px; 	justify-content: space-between; 	margin: 7px 0; }  .receipt-details span { 	color: var(--muted); }  .receipt-details strong { 	font-size: 12px; 	font-weight: 600; 	text-align: right; }  .receipt-download { 	width: 100%; }  .site-footer { 	align-items: center; 	display: flex; 	justify-content: space-between; 	margin: 0 auto; 	max-width: 1440px; 	padding: 30px 4vw; }  .site-footer p { 	align-items: center; 	display: flex; 	font-size: 12px; 	gap: 16px; }  .site-footer .brand { 	font-size: 18px; }  .site-footer div { 	display: flex; 	gap: 24px; }  .site-footer a { 	color: var(--muted); 	font-size: 12px; }  @media (max-width: 800px) { 	.site-header { 		padding: 20px 6vw; 	}  	.menu-toggle { 		display: block; 		font-size: 13px; 	}  	.main-nav { 		background: #fff; 		border: 1px solid var(--line); 		border-radius: 16px; 		display: none; 		flex-direction: column; 		gap: 4px; 		left: 6vw; 		margin: 0; 		padding: 12px 18px; 		position: absolute; 		right: 6vw; 		top: 65px; 		z-index: 5; 	}  	.main-nav.open { 		display: flex; 	}  	.header-button { 		display: none; 	}  	main { 		padding: 0 4vw 24px; 	}  	.hero, 	.travel, 	.contact, 	.split-section { 		grid-template-columns: 1fr; 	}  	.hero-copy { 		padding: 48px 28px 30px; 	}  	.hero-media { 		min-height: 260px; 		max-height: 300px; 	}  	.profile { 		grid-template-columns: 100px 1fr; 		padding: 28px; 	}  	.portrait { 		grid-row: span 2; 	}  	.details { 		border: 0; 		padding: 0; 	}  	.about-note { 		grid-column: 1 / -1; 	}  	.project-grid { 		grid-template-columns: 1fr; 	}  	.projects-section { 		padding: 60px 0 42px; 	}  	.travel-copy { 		padding: 48px 28px 30px; 	}  	.travel-media { 		min-height: 260px; 		max-height: 300px; 	}  	.contact { 		gap: 35px; 	}  	.site-footer { 		align-items: flex-start; 		flex-direction: column; 		gap: 20px; 	} }  @media (max-width: 480px) { 	h1 { 		font-size: 48px; 	}  	.profile { 		grid-template-columns: 1fr; 	}  	.portrait { 		width: 130px; 	}  	.details { 		padding-top: 8px; 	}  	dl div { 		grid-template-columns: 90px 1fr; 	}  	.role-list span { 		padding: 12px; 	}  	.contact-form { 		grid-template-columns: 1fr; 	}  	.contact-form label:nth-child(3), 	.contact-form label:nth-child(4), 	.contact-form button, 	.form-status { 		grid-column: auto; 	}  	.site-footer div { 		flex-wrap: wrap; 		gap: 12px; 	}  	.receipt-details strong { 		max-width: 58%; 		overflow-wrap: anywhere; 	} }

.image-slot img {
  cursor: zoom-in;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(8, 16, 28, 0.86);
  backdrop-filter: blur(8px);
  z-index: 9999;
}

.image-lightbox.show {
  display: flex;
}

.image-lightbox img {
  max-width: min(92vw, 960px);
  max-height: min(86vh, 760px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
}

.lightbox-close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 1.35rem;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox-caption {
  margin-top: 1rem;
  color: #f8fafc;
  text-align: center;
  font-size: 0.95rem;
  max-width: 90vw;
}

.map-container {
    width: 500px;          /* Change to your preferred size */
    height: 500px;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.map-container iframe {
    align-content: center;
    width: 100%;
    height: 100%;
    border: white;
    display: bldock;
}