html, body { 
		margin: 0;
		font-family: sans-serif;
		font-size: 14px;
		font-weight: 300;
		color: #433953;
		line-height: 1.4rem;
		font-smooth: always;
		background: rgba(250, 249, 255, 1);
	}
	.hide {
		display: none !important;
	}
	a {
		color: #101010;
	}
	p + p {
		margin-top: 1em;
	}
	header {
		position: sticky;
		top: 0;
		background: rgba(250, 249, 255, 0.94);
		z-index: 1;
		width: 100%;
		flex: 0 0 80px;
		backdrop-filter: blur(5px);
		z-index: 1000;
	}
	.hero, header {
		max-width: 1400px;
		padding: 0 100px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	.hero h1,
	h2,
	h1 {
		font-size: 40px;
		line-height: 46px;
		letter-spacing: -0.015em;
		font-family: "Domine", serif;
		font-optical-sizing: auto;
		font-weight: 900;
		font-style: normal;
		color: #433953;
		position: relative;
	}
	h2 {
		font-size: 32px;
		line-height: 34px;
		padding-bottom: 1em;
		padding-top: 1em;
	}
	.hero h2 {
		font-size: 24px;
		line-height: 34px;
		font-weight: lighter;
	}
	.hero h3 {
		font-size: 18px;
	}
	.hero .avatar {
		border-radius: 100px;
		display: inline-block;
		width: 80px;
		height: 80px;
		box-shadow: 0 0 30px 5px white;
	}
	.hero h1 a,
	.hero h1 a:visited {
		text-decoration: none;
	}
	.hero h1 a:hover span {
		text-decoration: underline;
	}
	.content {
		max-width: 700px;
		margin: 0 auto;
	}
	
	.content p, .content h1, .content h2, .content h3 {
		margin-bottom: 1em;
	}
	.content h2 {
		margin-top: 1em;
	}
	.brand {
		width: auto;
		height: 50px;
		margin-bottom: 10px;
		margin-top: 10px;
		filter: grayscale(100%) brightness(0%);
		opacity: 0.4;
	}
	.brand:hover {
		opacity: 1;
	}
	.hottake {
		border-radius: 24px;
		padding: 40px 80px 80px;
		border: 1px solid #e1d2f2;
		background-color: #ece4f5;
		font-size: 18px;
		line-height: 22px;
	}
	blockquote, q {
		quotes: none;
		font-size: 32px;
		line-height: 34px;
		font-style: italic;
		font-family: "Domine", serif;
		text-align: center;
		padding: 80px;
		color: #8a62b6;
  	}
	.logos {
		display: flex;
		align-items: center;
		justify-content: left;
		max-width: 1400px;
		padding: 0 100px;
		width: 100%;
		flex-wrap: wrap;
		box-sizing: border-box;
		margin: 0 auto 20px;
	}
	.logos img {
		margin-right: 30px;
		height: 30px;
	}
	.logos img:hover {
		opacity: 1;
	}
	.home hr {
		margin-bottom: 100px;
		opacity: 0.2;
		margin-top: 10px;
		border-style: dotted;
	}
	.home > section {
		min-height: 65vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.dark-mode {
		background-color: #F4F2F7;
		padding: 120px 0;
		  text-align: center;
		  justify-content: center;
			align-items: center;
			margin-bottom: 40px;
	}
	.dark-mode .title h2 {
		font-size: 24px;
		line-height: 24px;
		font-weight: lighter;
	}
	.cards {
		display: flex;
		flex-direction: row;
		gap: 40px;
		align-items: stretch;
	}
	.card {
		border-radius: 24px;
		overflow: hidden;
		flex: 1;
		text-decoration: none;
		background-size: cover;
		background-position: center center;
	}
	.card > div {
		padding: 32px;
	}
	.card .header {
		
		aspect-ratio: 1/1;
		justify-content: center;
		  align-items: center;
		  display: flex;
		  flex-direction: column;
		  color: white;
		  gap: 40px;
		  position: relative;
	}
	.card.data {
		background-image: 
		linear-gradient(rgba(119, 104, 255, 0.4), rgba(0, 0, 0, 0.7)), 
		url('/data.png');
	}
	.card.data:hover .header {
		background-image: 
		linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
	}
	.card.growth {
		background-image: 
		linear-gradient(rgba(119, 104, 255, 0.4), rgba(0, 0, 0, 0.7)), 
		url('/loop.png');
	}
	.card.growth:hover .header {
		background-image: 
		linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
	}
	.card.ai {
		background-image: 
		linear-gradient(rgba(119, 104, 255, 0.4), rgba(0, 0, 0, 0.7)), 
		url('/ai-bg.png');
	}
	.card.ai:hover .header {
		background-image: 
		linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
	}
	
	.card .header div {
		width: 100%;
		display: flex;
		justify-content: center;
		  align-items: center;
		  text-align: center;
		  gap: 8px;
		  position: absolute;
		  bottom: 32px;
	}
	.card .header div img {
		width: 40px;
		border-radius: 0;
	}
	.dark-mode .cards h2 {
		color: white;
	}
	.card .body {
		background-color: white;
	}
	video {
		cursor: pointer;
	}
	hr {
		margin-top: 4em;
		opacity: 0.2;
		border-style: dotted;
	}
	main ul {
		list-style-position: outside; /* Places bullet outside of the text block */
		padding-left: 1.5em;        /* Standard indentation for the bullet */
		margin-top: 1em;           /* Space above the list */
		margin-bottom: 1.5em;
	}
	main li {
		list-style-type: disc;
	}
	main li + li {
		margin-top: 0.8em;
	}
	main h3 {
		font-size: 18px;
		font-weight: bold;	
	}
	main {
		font-size: 18px;
		line-height: 24px;
	}
	.networks {
		margin: 10px 0 10px;
		width: 100%;
		display: block;
		padding: 5px 0 5px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.networks li {
		display: inline-block;
	}
	.networks img {
		width: 24px;
	}
	.networks a {
		margin-right: 40px;
		text-transform: uppercase;
		text-decoration: none;
		font-size: 1rem;
		font-weight: 600;
		opacity: 0.4;
		padding: 20px 0;
	}
	.networks a:hover {
		opacity: 1;
	}
	.networks .button,
	.button {
		background-color: #8a62b6;
		color: white;
		padding: 10px 30px;
		border-radius: 8px;
		opacity: 1;
		text-transform: none;
		margin-right: 0;
		text-decoration: none;
		font-weight: 600;
	}
	body .button:hover {
		background-color: #573A78;
	}
	section {
		max-width: 1400px;
		padding: 0 100px;
		width: 100%;
		box-sizing: border-box;
		margin: 0 auto 100px;
	}
	section img {
		border-radius: 24px;
		width: 100%;
		height: auto;
		display: block;
	}
	#resume section {
		margin-bottom: 24px;
	}
	.resume-item {
		background-color: rgba(255,255,255,0.8);
	}
	#resume:has(.resume-item:hover) .resume-item {
		background-color: rgba(255,255,255,0.3);
	}
	.resume-item.password > div {
		text-align: center;
		width: 100%;
	}
	#submit-btn {
		padding: 18px;
		border-radius: 8px;
		outline: none;
		background-color: #8a62b6;
		border: none;
		color: #fff;
	}
	#pass {
		padding: 16px;
		border-radius: 8px;
		margin-top: 16px;
		outline: none;
		border: 1px solid #ddd;
	}
	/* Keep the hovered box fully visible */
	#resume:has(.resume-item:hover) .resume-item:hover {
	  background-color: rgba(255,255,255,1);
	  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
	  transition: all 400ms;
	}
	.info {
		display: flex;
	}
	.info > div {
		width: 50%;
		padding: 40px 40px 40px 0;
	}
	.title h2 {
		padding-bottom: 16px;
		padding-top: 0;
	}
	.title .subhead {
		color: #8a62b6;
	}
	.description {
		font-size: 18px;
		line-height: 22px;
	}
	.case-study .description, .case-study p, .case-study ul, .case-study ol {
		font-size: 18px;
		line-height: 25px;
	}
	.case-study-header {
		position: sticky;
		top: 80px;
		padding-top: 28px;
	}
	.case-study-header .button {
		position: absolute;
	}
	.image .figma-link {
		position: absolute;
		  right: 20px;
		  bottom: 106px;
		  box-shadow: 0px 0px 9px rgba(255,255,255,0.3);
		  background-color: rgba(0, 0, 0, 0.4);
		  backdrop-filter: blur(5px);
	}
	.image .figma-link:hover {
		background-color: rgba(0, 0, 0, 0.6);
	}
	
	@media only screen and (max-width: 1225px) {
		.case-study-header {
			max-width: 700px;
			margin: 0 auto;
			
		}
		body .case-study-header .button,
		body .figma {
			position: relative;
			margin-bottom: 24px;
		}
		.case-study-header {
			position: relative;
			display: block;
			padding-bottom: 40px;
			top: auto;
			padding-top: 0;
		}
	}
	.status {
		height: 80px;
		display: inline-block;
		top: 0;
		position: absolute;
	}
	.dot {
		display: block;
		width: 14px;
		height: 14px;
		border-radius: 50px;
		border: 2px solid #fff;
		background-color: rgb(35, 190, 92);
		position: absolute;
		top: 60px;
		left: -17px;
	}
	h1 .greeting {
		background-color: rgb(35, 190, 92);
		border-radius: 100px;
		color: #fff;
		font-family: sans-serif;
		font-size: 16px;
		padding: 10px 20px;
		top: 16px;
		position: relative;
		left: 10px;
		opacity: 0;
		font-weight: 300
	}
	h1 .greeting a {
		text-decoration: underline;
	}
	.hero {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.hero h1 .greeting a:hover,
	.hero h1 .greeting a {
		color: #fff;
	}
	.hero:hover .greeting {
		opacity: 1;
		transition: all 500ms;
		top: 6px;
	}
	strong {
		font-weight: 700;
	}
	.selected a {
		color: #433953;
		text-decoration: none;
	}
	.networks .logo img {
		height: 24px;
		width: auto;
	}
	.networks .logo {
		opacity: 1;
	}
	#resume {
		padding-bottom: 100px;
		padding-top: 100px;
	}
	.image, .resume-item {
		position: relative;
		overflow: auto;
		border-radius: 24px;
	}
	.resume-item {
		padding: 0 0 0 32px;
	}
	.resume-item .title h2 {
		padding-bottom: 8px;
	}
	.image-overlay {
	  height: 100%;
	  width: 100%;
	  display: block;
	  position: absolute;
	  top: 0;
	  left: 0;
	  opacity: 0;
	  transition: all 500ms;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  text-decoration: none;
	}
	.image-overlay:hover {
		opacity: 1;
		transition: all 500ms;
	}
	.header-wrapper {
		display: flex;
		  flex-direction: column;
		min-height: calc(100vh - 113px);
	}
.marquee {
	  --gap: 40px;
	  display: flex;
	  overflow: hidden;
	  user-select: none;
	  gap: var(--gap);
	  flex: 0 0 80px;
	}
	
	.marquee__content {
	  flex-shrink: 0;
	  display: flex;
	  justify-content: center;
	  min-width: 100%;
	  gap: 40px;
	  display: flex;
	  align-items: center;
	  will-change: transform;
	}
	.marquee__content img {
		height: 30px;
		width: auto;
	}
	
	.focus {
	  background: linear-gradient(to right, rgb(121, 84, 196), #4809c0, rgb(107, 67, 171),  rgb(121, 84, 196));
	  background-clip: text;
	  text-fill-color: transparent;
	  color: transparent;
	  background-size: 200% auto;
	  animation: textShine 2s linear infinite;
	}
	
	.company {
		max-width: 60px;
		border-radius: 8px;
		float: left;
		margin-right: 16px;
	}
	.pill {
		float: right;
		margin-left: 8px;
		display: block;
		padding: 8px;
		font-size: 13px;
		border-radius: 8px;
		line-height: 10px;
		background-color: #eee;
		margin-top: -9px;
		font-weight: 400;
		letter-spacing: 3%;
	}
	.pill:first-child {
		margin-right: -8px;
	}
	.pill.remote {
		background-color: #e78cff;
		color: #fff;
	}
	.pill.ai {
		background-color: rgb(35, 190, 92);
		color: #fff;
	}
	.pill.dev {
		background-color: rgb(21, 167, 199);
		color: #fff;
	}
	.pill.mentor {
		background-color: rgb(255, 174, 0);
		color: #fff;
	}
	.figma {
		position: sticky;
		top: 40px;
	}
	.lightbox + .button {
		margin-top: 20px;
		display: inline-block;
	}
	
	  /* Password form defaults */
	  #password-form {
		opacity: 1;
		transition: opacity 0.5s ease;
	  }
	  
	  /* Protected section defaults (hidden initially) */
	  #protected {
		display: none;
		opacity: 0;
		transition: opacity 0.5s ease;
	  }
	  
	  /* Fade-out animation for the form */
	  #password-form.fade-out {
		opacity: 0;
		pointer-events: none;
	  }
	  
	  /* Fade-in animation for protected section */
	  #protected.fade-in {
		display: block;
		opacity: 1;
	  }
	  
	  /* Message styling */
	  .message {
		margin-top: 1rem;
		color: green;
		transition: opacity 0.3s ease;
	  }
	@keyframes textShine {
	  0% {
		background-position: 0% 50%;
	  }
	  100% {
		background-position: 200% 50%;
	  }
	}
	@media only screen and (max-width: 1024px) {
		.hero, header, section {
			padding-right: 20px;
			padding-left: 20px;
		}
		.info {
			flex-wrap: wrap;
		}
		.info > div {
			width: 100%;
		}
		.info:not(.resume-item) > div,
		.resume-item > div:last-child {
			padding-top: 0;
		}
		.pill,
		.pill:first-child {
			margin-right: 0;
			float: left;
		}
		body .pill:first-child {
			margin-left: 0px;
		}
		.pill + p {
			clear: b