:root {
	--bg-start: #ecf2ff;
	--bg-end: #ffffff;
	--ink: #1f2538;
	--muted: #5c6680;
	--primary: #3d5afe;
	--card-bg: rgba(255, 255, 255, 0.95);
	--shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
}

body {
	margin: 0;
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--ink);
	background: linear-gradient(180deg, var(--bg-start), var(--bg-end));
}

a {
	color: inherit;
	text-decoration: none;
}

.nav {
	position: fixed;
	top: 24px;
	right: clamp(18px, 4vw, 48px);
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	box-shadow: 0 16px 32px rgba(22, 33, 56, 0.18);
	padding: 0.6rem 1.2rem;
	backdrop-filter: blur(16px);
}

.nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: clamp(0.75rem, 1.8vw, 1.4rem);
	font-size: 0.94rem;
}

.nav a {
	position: relative;
	font-weight: 600;
	color: var(--muted);
	padding-bottom: 6px;
}

.nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--primary), transparent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 220ms ease;
}

.nav a:hover,
.nav a:focus-visible {
	color: var(--primary);
}

.nav a.active {
	color: var(--primary);
}

.nav a.active::after {
	transform: scaleX(1);
}

.svg-jor {
	position: fixed;
	bottom: 12px;
	left: clamp(18px, 4vw, 48px);
	width: clamp(90px, 12vw, 140px);
	z-index: 50;
	pointer-events: none;
	animation: svgBob 7s ease-in-out infinite;
}

.contact-linkedin {
	position: absolute;
	bottom: 12px;
	right: clamp(18px, 4vw, 48px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 12px 24px rgba(18, 31, 58, 0.16);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(61, 90, 254, 0.08);
	z-index: 10;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.contact-linkedin:hover,
.contact-linkedin:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 28px rgba(18, 31, 58, 0.2);
}

.slides {
	position: relative;
	margin-top: 120px;
}

.screen-only {
	display: block;
}

.print-only {
	display: none;
}

.scene {
	position:relative;
	min-height: 100vh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2.5rem, 7vw, 5.2rem) clamp(1.5rem, 8vw, 6rem);
}

.scene--profile {
	background: linear-gradient(160deg, #f2f6ff, #ffffff 70%);
}

.scene--experience {
	background: linear-gradient(160deg, #fff1e1, #ffffff 65%);
}

.scene--skills {
	background: linear-gradient(160deg, #eefbf7, #ffffff 65%);
}

.scene--education {
	background: linear-gradient(160deg, #f5efff, #ffffff 68%);
}

.scene--projects {
	background: linear-gradient(160deg, #fff3f7, #ffffff 68%);
}

.scene--contact {
	background: linear-gradient(160deg, #edf4ff, #ffffff 70%);
}

/* Scene-specific muted tints */
#scene-profile {
	background: linear-gradient(160deg, #f2f6ff, #ffffff 70%);
}

#scene-experience {
	background: linear-gradient(160deg, #fff4ec, #ffffff 70%);
}

#scene-education {
	background: linear-gradient(160deg, #f6f0ff, #ffffff 70%);
}

#scene-capabilities {
	background: linear-gradient(160deg, #ecf9f6, #ffffff 70%);
}

#scene-skills {
	background: linear-gradient(160deg, #eefbf7, #ffffff 70%);
}

#scene-languages {
	background: linear-gradient(160deg, #f3f8ff, #ffffff 70%);
}

#scene-contact {
	background: linear-gradient(160deg, #edf5ff, #ffffff 70%);
}

@keyframes svgBob {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

.scene__card {
	background: var(--card-bg);
	box-shadow: var(--shadow);
	border-radius: 32px;
	padding: clamp(2rem, 3vw, 3.4rem);
	max-width: min(66ch, 92vw);
	display: grid;
	gap: 1.2rem;
}

.scene__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}

.scene__card h2 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 2.8rem);
	line-height: 1.1;
}

.scene__card p {
	margin: 0;
	line-height: 1.6;
}

.scene__card ul {
	margin: 0;
	padding-left: 1.2rem;
	display: grid;
	gap: 0.5rem;
}

.scene__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1rem, 3vw, 1.8rem);
}


/* Scrollable panels */
.scene__panel {
	width: min(1300px, 95vw);
	max-height: min(90vh, 1000px);
	overflow-y: auto;
	scrollbar-gutter: stable both-edges;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 36px;
	clip-path: inset(0 round 36px);
	background-clip: padding-box;
	padding: clamp(1.8rem, 3vw, 2.6rem);
	box-shadow: 0 25px 60px rgba(18, 31, 56, 0.18);
	border: 1px solid rgba(61, 90, 254, 0.08);
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.scene__panel::-webkit-scrollbar {
	width: 8px;
}

.scene__panel::-webkit-scrollbar-thumb {
	background: rgba(61, 90, 254, 0.4);
	border-radius: 999px;
}

.scene__panel::-webkit-scrollbar-track {
	background: transparent;
	margin: 12px 4px;
	border-radius: 999px;
}

.scene__panel h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

.scene__panel p {
	display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

/* Hero / Profile */
.hero {
	display: grid;
	grid-template-columns: minmax(400px, 6fr) minmax(100px, 1fr);
	gap: clamp(1.8rem, 3vw, 2.2rem);
	width: 100%;
	position: relative;
}

.hero__summary {
	background: var(--card-bg);
	border-radius: 32px;
	box-shadow: var(--shadow);
	padding: clamp(1rem, 3vw, 2rem);
	display: grid;
	gap: 1rem;
	max-width: 1000px;
	position: relative;
	z-index: 2;
}

.hero__bullets {
	margin: 0;
	padding-left: 1.2rem;
	display: grid;
	gap: 0.5rem;
}

.hero__panel {
	display: grid;
	gap: 1.5rem;
	position: relative;
	z-index: 1;
	transition: width 320ms ease, opacity 320ms ease, transform 320ms ease, margin-left 320ms ease;
}

.hero__badges {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3px;
	justify-items: center;
	align-items: center;
}

.hero__badges img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 12px 20px rgba(19, 32, 58, 0.18));
}

.traits-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 0.5rem;
}

.simple-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #ffffff;
	color: #222;
	border-radius: 14px;
	padding: 1rem 1.2rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	border: 1px solid #eee;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.simple-card:hover {
	background: #f9fafb;
	box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}

.trait-emoji {
	width: 36px;
	height: 36px;
	object-fit: contain;
	flex-shrink: 0;
	opacity: 0.9;
	display: inline-block;
	background-color: #273a53;
}

.simple-card h4 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.simple-card p {
	margin: 0.2rem 0 0;
	color: #555;
	font-size: 0.85rem;
	line-height: 1.35rem;
}

.trait-emoji--curious {
	mask: url("../assets/svgs/icon-abstract-mono-traits-curious.svg") center/contain no-repeat;
	-webkit-mask: url("../assets/svgs/icon-abstract-mono-traits-curious.svg") center/contain no-repeat;
}
.trait-emoji--handson {
	mask: url("../assets/svgs/icon-abstract-mono-traits-handson.svg") center/contain no-repeat;
	-webkit-mask: url("../assets/svgs/icon-abstract-mono-traits-handson.svg") center/contain no-repeat;
}
.trait-emoji--engineer {
	mask: url("../assets/svgs/icon-abstract-mono-traits-engineer.svg") center/contain no-repeat;
	-webkit-mask: url("../assets/svgs/icon-abstract-mono-traits-engineer.svg") center/contain no-repeat;
}
.trait-emoji--leader {
	mask: url("../assets/svgs/icon-abstract-mono-traits-leader.svg") center/contain no-repeat;
	-webkit-mask: url("../assets/svgs/icon-abstract-mono-traits-leader.svg") center/contain no-repeat;
}
.trait-emoji--interface {
	mask: url("../assets/svgs/icon-abstract-mono-traits-interface.svg") center/contain no-repeat;
	-webkit-mask: url("../assets/svgs/icon-abstract-mono-traits-interface.svg") center/contain no-repeat;
}
.trait-emoji--improvement {
	mask: url("../assets/svgs/icon-abstract-mono-traits-improvement.svg") center/contain no-repeat;
	-webkit-mask: url("../assets/svgs/icon-abstract-mono-traits-improvement.svg") center/contain no-repeat;
}

/* Timeline (Experience) */
.scene--experience .timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-left: 40px;
}

.scene--experience .timeline::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(180deg, #f7b500, #5ec8ff);
	opacity: 0.8;
}

#panel-experience {
	overflow-x: hidden;
}

.timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	align-items: flex-start;
	gap: 1rem;
}

.timeline__rail {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	column-gap: 0.2rem;
	align-items: center;
}

.timeline__year {
	letter-spacing: 0.02em;
	grid-column: 1;
	grid-row: 1;
}

.timeline__location {
	font-size: 0.85rem;
	color: #888;
	grid-column: 1;
	grid-row: 2;
	margin-top: 0rem;
	align-self: start;
}

.timeline__icon {
	width: 40px;
	height: 40px;
	border-radius: 14px;
	background: var(--icon-bg, #ffffff);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
	display: grid;
	place-items: center;
	font-size: 22px;
	color: #0a1524;
	position: relative;
	overflow: hidden;
	grid-column: 1;
	grid-row: 3;
	place-self:center;
	margin-top: 1rem;
}

.timeline__icon::before {
	content: "";
	width: 22px;
	height: 22px;
	display: block;
	background: currentColor;
	mask: var(--icon-mask) center/contain no-repeat;
	-webkit-mask: var(--icon-mask) center/contain no-repeat;
}

.timeline__icon--asr {
	--icon-mask: url("../assets/svgs/icon-mono-jobs-asr.svg");
	color: var(--icon-color-asr, #273a53);
}

.timeline__icon--grc {
	--icon-mask: url("../assets/svgs/icon-mono-jobs-grc.svg");
	color: var(--icon-color-grc, #273a53);
}

.timeline__icon--audit {
	--icon-mask: url("../assets/svgs/icon-mono-jobs-audit.svg");
	color: var(--icon-color-audit, #273a53);
}

.timeline__icon--sysadmin {
	--icon-mask: url("../assets/svgs/icon-mono-jobs-sysadmin.svg");
	color: var(--icon-color-sysadmin, #273a53);
}

.timeline__icon--support {
	--icon-mask: url("../assets/svgs/icon-mono-jobs-support.svg");
	color: var(--icon-color-support, #273a53);
}

.timeline__card {
	position: relative;
	display: grid;
	gap: 0.5rem;
}

.timeline__face {
	position: relative;
	background: #ffffff;
	border: 1px solid #eee;
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	padding: 0.75rem 1rem;
	display: grid;
	gap: 0.4rem;
	color: #222;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.timeline__face h3 {
    font-size: 1.1em;
    margin: 0.1rem 0;
}

.timeline__subtitle {
	margin: 0;
	color: #555;
	font-weight: 600;
}

.timeline__blurb {
	margin: 0;
	color: #333;
	line-height: 1.5;
}

.timeline__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.timeline__pills-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	align-items: center;
}

.timeline__pill {
	background: #f0f3f7;
	color: #333;
	border-radius: 999px;
	padding: 0.25rem 0.6rem;
	font-size: 0.75rem;
	box-shadow: none;
}

.timeline__pill:hover {
	background: #0c2846;
	color: #e8f1ff;
}

.timeline__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.01em;
	background: #0c2846;
	color: #e8f1ff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 12px rgba(12, 40, 70, 0.25);
	width: auto;
	justify-self: start;
	cursor: pointer;
	margin-left: auto;
	border: none;
}

.timeline__cta--front {
    position: relative;
    display: inline-block;
	justify-self: end;
	margin-left: auto;

    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e8ecf4;

    cursor: pointer;
    overflow: hidden;

    transition: all 0.25s ease;
}

/* Hide the word "Details" */
.timeline__cta--front {
    color: transparent;
}

/* Arrow */
.timeline__cta--front::after {
    content: "›"; /* or ">" but › looks smoother */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 600;
    color: #3d5afe;
    transition: all 0.25s ease;
}

/* Hover animation */
.timeline__cta--front:hover {
    background: #3d5afe;
}

.timeline__cta--front:hover::after {
    color: white;
    transform: translate(-35%, -50%); /* slight slide to the right */
}

.timeline__card--open .timeline__cta--front::after {
    content: "‹";
}


.timeline__cta--ghost {
    background: rgba(12, 18, 79, 0.9);
    color: #dce7ff;
    font-weight: 700;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 8px;
	font-size: 0.9rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.timeline__cta--ghost:hover {
    background: rgba(255, 18, 79, 0.9);
    color: #ffffff;
}

.timeline__details {
	padding-left: 1rem;
	display: grid;
	color: #333;
	line-height: 1.5;
}

.timeline__details li {
	margin-bottom: 10px;
	font-size: 0.95rem;
}

.timeline__details-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.28s ease, margin-top 0.28s ease;
	border-radius: 12px;
}

.timeline__details-inner {
	position: relative;
	background: #f5f7fb;
	border: 1px solid #e4e8f0;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	padding: 0rem 1rem;
	display: grid;
	gap: 0.6rem;
	overflow: auto;
	max-height: 400px;
	scrollbar-gutter: stable both-edges;
	background-clip: padding-box;
}

.timeline__card--open .timeline__details-panel {
	margin-top: 0.3rem;
}

.timeline__title-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
}

.kw {
	font-weight: 600;
}

@media (hover: hover) {
	.timeline__card:hover .timeline__cta {
		filter: brightness(1.05);
	}
}

/* Capability cards */
.capability-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.2rem;
}

.capability-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--cap-bg-1, #ffffff), var(--cap-bg-2, #fdfefe));
	border-radius: 24px;
	padding: 1.5rem;
	box-shadow: 0 12px 24px rgba(18, 31, 58, 0.1);
	border: 1px solid rgba(61, 90, 254, 0.05);
	display: grid;
	gap: 0.7rem;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.capability-card::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cap-accent, #5ec8ff), transparent 70%);
}

.capability-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 28px rgba(18, 31, 58, 0.12);
	border-color: rgba(61, 90, 254, 0.12);
}

.capability-card h3 {
	margin: 0;
}

.capability-card--engineer {
	--cap-accent: rgba(64, 200, 166, 0.4);
	--cap-bg-1: #ffffff;
	--cap-bg-2: #f7fffb;
}

.capability-card--glue {
	--cap-accent: rgba(255, 179, 71, 0.4);
	--cap-bg-1: #ffffff;
	--cap-bg-2: #fffaf2;
}

.capability-card--accelerator {
	--cap-accent: rgba(155, 140, 255, 0.4);
	--cap-bg-1: #ffffff;
	--cap-bg-2: #f8f6ff;
}

/* Skill matrix */
.skill-matrix {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
	align-items: stretch;
}

.skill-card {
	position: relative;
	overflow: hidden;
	--skill-accent: #5ec8ff;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	padding: 1.2rem;
	box-shadow: 0 12px 24px rgba(20, 30, 55, 0.12);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 170px;
	height: 100%;
	border: 1px solid rgba(61, 90, 254, 0.06);
}

.skill-card::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--skill-accent), transparent 75%);
}

.skill-card h3 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: auto;
}

.skill-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--skill-accent, #5ec8ff) 15%, #f0f3f7);
	color: #223;
	font-size: 0.82rem;
	box-shadow: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.skill-tag:hover {
	background: color-mix(in srgb, var(--skill-accent, #5ec8ff) 65%, #0c2846);
	color: #e8f1ff;
}

.skill-card:nth-child(1) { --skill-accent: #5ec8ff; }
.skill-card:nth-child(2) { --skill-accent: #ffb347; }
.skill-card:nth-child(3) { --skill-accent: #9b8cff; }
.skill-card:nth-child(4) { --skill-accent: #4cd3b5; }
.skill-card:nth-child(5) { --skill-accent: #ffa5c0; }
.skill-card:nth-child(6) { --skill-accent: #7dd28d; }
.skill-card:nth-child(7) { --skill-accent: #8ac5ff; }
.skill-card:nth-child(8) { --skill-accent: #f7d46b; }

/* Certifications / Education */
.edu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(1rem, 3vw, 1.8rem);
}

.edu-card {
	position: relative;
	background: #ffffff;
	border: 2px solid #e7ecf5;
	border-radius: 22px;
	padding: 1.1rem 1.2rem 1.2rem;
	box-shadow: 0 16px 30px rgba(12, 26, 64, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.edu-card__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 64px;
}

.edu-card__badge {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: radial-gradient(circle at 30% 30%, #fff, #e9efff);
	/*border: 1px solid rgba(61, 90, 254, 0.25);*/
	display: grid;
	place-items: center;
	color: var(--edu-badge-color, #273a53);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
	flex-shrink: 0;
}

.edu-card__badge::before {
	content: "";
	width: 26px;
	height: 26px;
	background: currentColor;
	mask: var(--edu-badge-icon) center/contain no-repeat;
	-webkit-mask: var(--edu-badge-icon) center/contain no-repeat;
}

.edu-card__badge--engineer {
	--edu-badge-icon: url("../assets/svgs/icon-abstract-mono-traits-engineer.svg");
}

.edu-card__badge--certs {
	--edu-badge-icon: url("../assets/svgs/icon-abstract-mono-traits-curious.svg");
}

.edu-card__body {
	position: relative;
	padding: 1.1rem 1.1rem;
	border: 1px dashed rgba(61, 90, 254, 0.18);
	border-radius: 16px;
	background: linear-gradient(135deg, #ffffff 0%, rgba(247, 249, 255, 0.9) 100%);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

.edu-card__header h3 {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
}

.edu-card__meta {
	margin: 0;
	color: #556;
	font-weight: 600;
	line-height: 1.4;
	min-height: 1.4em;
}

.edu-card__copy {
	margin: 0.6rem 0 0.4rem;
	color: #374054;
	font-size: 1rem;
}

.edu-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.5rem;
}

.edu-card__list {
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.35rem;
}

.edu-card__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.edu-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: #f0f3f7;
	color: #333;
	/*font-weight: 700;*/
	font-size: 0.82rem;
	box-shadow: 0 2px 4px rgba(12, 26, 64, 0.08);
}

.edu-tag:hover {
	background: #0c2846;
	color: #e8f1ff;
}

.edu-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(12, 26, 64, 0.18);
	border-color: rgba(61, 90, 254, 0.4);
}

.edu-card--certs {
	background: linear-gradient(135deg, #ffffff, #f7f9ff);
}

.edu-card--degree {
	background: linear-gradient(135deg, #ffffff, #f8fbf6);
}

.edu-cert__name {
	font-weight: 800;
	color: #1f2538;
	flex: 0 0 auto;
}

.edu-cert__desc {
	color: #4a5266;
	font-size: 0.95rem;
	margin-top: 2px;
	text-align: right;
	flex: 1 1 auto;
}

.languages-list {
	margin: 0;
	padding-left: 1.2rem;
	display: grid;
	gap: 0.4rem;
}

.lang-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
}

.lang-card {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.92));
	box-shadow: 0 14px 28px rgba(18, 31, 58, 0.12);
	border: 1px solid rgba(18, 31, 58, 0.05);
	min-height: 220px; /*220px;*/
	display: grid;
	grid-template-columns: 1fr;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lang-card__flag {
	display: none;
}

.lang-card__content {
	position: relative;
	padding: 1.2rem 1.2rem 3rem;
	display: grid;
	gap: 0.6rem;
}

.lang-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-size: 1.6rem;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 10px 20px rgba(18, 31, 58, 0.14);
	border: 1px solid rgba(18, 31, 58, 0.08);
}

.lang-card__flagimg {
	width: 70%;
	height: 70%;
	object-fit: contain;
}

.lang-card__header {
	display: grid;
	gap: 0.2rem;
	align-items: start;
	padding-right: 60px;
}

.lang-card__header h3 {
	display: block;
    font-size: 1.17em;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

.lang-card__level {
	font-weight: 700;
	color: var(--lang-accent, #3d5afe);
}

.lang-card__note {
	margin: 0;
	color: #445;
	line-height: 1.4;
}

.lang-card__gauge {
	position: relative;
	background: #eef2fb;
	border-radius: 10px;
	height: 12px;
	overflow: hidden;
}

.lang-card__gauge-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(var(--gauge, 0) * 100%);
	background: var(--lang-gauge, linear-gradient(90deg, var(--lang-accent, #5ec8ff), rgba(61, 90, 254, 0.8)));
	border-radius: 10px;
}

.lang-card__gauge-label {
	font-weight: 700;
	color: #223;
	font-size: 0.9rem;
}

.lang-card--es .lang-card__flag {
	/* reserved if flags return */
}

.lang-card--en .lang-card__flag {
	/* reserved if flags return */
}

.lang-card--pt .lang-card__flag {
	/* reserved if flags return */
}

.lang-card--es {
	--lang-accent: #74acdf; /*Argentina Light Blue*/
	--lang-gauge: linear-gradient(90deg, #2f7bb6, #74acdf, #2f7bb6);
}

.lang-card--en {
	--lang-accent: #bd3d44; /*US Flag Red*/
	--lang-gauge: linear-gradient(90deg, #192f5d,  #bd3d44);
}

.lang-card--pt {
	--lang-accent: #229e45; /*Brazil Green*/
	--lang-gauge: linear-gradient(90deg, #229e45, #2b49a3);
}

.lang-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 32px rgba(18, 31, 58, 0.16);
	border-color: rgba(61, 90, 254, 0.12);
}

.contact-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 32px;
	padding: clamp(1.8rem, 3vw, 3rem);
	box-shadow: 0 20px 40px rgba(18, 31, 56, 0.18);
	display: grid;
	gap: 1rem;
}
.scene__contact-list {
	margin: 0;
	padding-left: 1.2rem;
	display: grid;
	gap: 0.5rem;
}
.scene__contact-list strong {
	font-weight: 600;
}

@media screen and (max-width: 950px) {
	/*Originally cutting off at 950*/
	.hero {
		grid-template-columns: minmax(450px, 8fr) minmax(0px, 1fr);
	}

	.hero__summary {
		max-width: none;
	}

	.hero__panel {
		margin-left: calc(-250px + 20vw);
	}

	.hero__badges img {
		width: min(100%, clamp(150px, 40vw, 220px));
	}

	.traits-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.5rem
	}

	.scene__panel h2 {
		margin: 0;
		font-size: 1.2rem;
		line-height: 1.1;
	}

	.scene__eyebrow {
		margin: 0;
		margin-block: 0;
		font-size: 0.65rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--muted);
	}

	.simple-card {
		gap: 0.5rem;
		padding: 0.6rem 0.8rem;
	}

	.trait-emoji {
		width: 30px;
		height: 30px;
	}

	/*Originally cutting off at 900*/
	.scene--experience .timeline {
		padding-left: 30px;
	}

	.scene--experience .timeline::before {
		left: 10px;
	}

	.timeline__item {
		grid-template-columns: 80px minmax(0, 1fr);
	}

	.timeline__rail {
		font-size: 0.8rem;
	}

}

@media (max-width: 820px) {
	.scene--experience .timeline {
		padding-left: 0;
	}

	.scene--experience .timeline::before {
		display: none;
	}

	.timeline__item {
		grid-template-columns: 52px minmax(0, 1fr);
		align-items: stretch;
		gap: 0.6rem;
	}

	.timeline__rail {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.4rem;
	}

	.timeline__year {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		text-align: center;
	}

	.timeline__location {
		display: none;
	}

	.timeline__icon {
		width: 34px;
		height: 34px;
		margin-top: 10px;
		border-radius: 11px;
	}

	.timeline__details li {
		margin-bottom: 9px;
		font-size: 0.85rem;
	}

	.edu-tag {
		padding: 0.2rem 0.55rem;
		font-size: 0.78rem;
	}

	.skill-card {
		min-height: unset;
	}
}

@media (max-width: 720px) {
	/*Originally cutting off at 780*/
	.hero {
		grid-template-columns: 1fr;
	}
	
	.hero__panel {
		display:none;
	}

	/*Originally cutting off at 720*/
	.scene {
		padding: clamp(1.8rem, 6vw, 2.6rem) clamp(1rem, 6vw, 2.4rem);
	}

	.scene__panel {
		width: 100%;
		max-height: none;
		padding: clamp(1.4rem, 4vw, 2.1rem);
		overflow: visible;
	}

	.hero__summary {
		padding: clamp(1rem, 4vw, 1.4rem);
	}

	.timeline__face {
		padding: 0.95rem 1rem;
	}

	.timeline__pills-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.timeline__cta--front {
		margin-left: 0;
	}

	.skill-tag {
		padding: 0.3rem 0.7rem;
		font-size: 0.75rem;
	}
}

@media (max-width: 670px) {
	.nav {
		top: 14px;
		left: 16px;
		right: 16px;
		padding: 0.45rem 0.9rem;
	}
	
	.nav ul {
		gap: 0.6rem;
		font-size: 0.88rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	.simple-card {
		gap: 0.4rem;
		padding: 0.4rem 0.5rem;
	}

	.trait-emoji {
		width: 25px;
		height: 25px;
	}

	.simple-card h4 {
		font-size: 1rem;
		font-weight: 550;
	}

	.simple-card p {
		font-size: 0.8rem;
		line-height: 1.25rem;
	}

	.timeline__face {
		padding: 1.3rem;
	}

	.edu-card__badge {
		display: none;
	}

	.edu-cert__desc {
		font-size: 0.7rem;
	}

	.edu-card__copy {
		font-size: 0.95rem;
	}

	.edu-tag {
		padding: 0.15rem 0.5rem;
		font-size: 0.72rem;
	}

	.skill-tag {
		padding: 0.25rem 0.65rem;
		font-size: 0.72rem;
	}

	.lang-card {
		min-height: 150px;
	}

	.lang-card__content {
		padding: 1.2rem;
	}
}


@media (min-width: 531px) {
	.edu-grid {
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	}
}

@media (max-width: 530px) {
	html {
		scroll-snap-type: y proximity;
	}

	.nav {
		top: 5px;
		left: 5px;
		right: 5px;
		padding: 0.25rem 0.6rem;
	}

	.nav ul {
		font-size: 0.7rem;
		gap: 0.5rem;
	}

	.nav ul li:last-child {
		display: none;
	}

	.scene {
		padding: clamp(1.2rem, 5vw, 1.6rem) clamp(0.8rem, 5vw, 1.6rem);
	}

	.scene__panel {
		border-radius: 20px;
		padding: clamp(1.1rem, 4vw, 1.5rem);
	}

	.hero__summary {
		border-radius: 22px;
	}

	.timeline__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.timeline__rail {
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.5rem;
		grid-column: 1;
	}

	.timeline__year {
		writing-mode: horizontal-tb;
		transform: none;
		margin-left: 10px;
	}

	.timeline__icon {
		margin-top: 0;
		margin-left: auto;
		margin-right: 10px;
		width: 30px;
		height: 30px;
		font-size: 18px;
		border-radius: 8px;
	}

	.timeline__pills {
		gap: 0.22rem;
	}

	.timeline__pill {
		font-size: 0.72rem;
	}

	.hero__badges {
		display: none;
	}

	.edu-cert__desc {
		font-size: 0.7rem;
	}

	.edu-cert__desc[data-compact]::before {
		content: attr(data-compact);
		font-size: 0.7rem;
		display: block;
	}

	.edu-cert__desc[data-compact] {
		font-size: 0;
	}

	.edu-card__copy {
		font-size: 0.9rem;
	}

	/*Character*/
	.svg-jor {
		bottom: 5px;
		left: clamp(5px, 3vw, 48px);
		width: clamp(65px, 12vw, 140px);
	}
}

/* iPad-friendly layout (landscape/short height) */
@media (max-width: 1100px) and (min-width: 810px), (max-height: 900px) and (min-width: 700px) {
	.scene__panel {
		gap: 0.5rem;
		padding: 1.3rem;
	}

	.edu-cert__desc[data-compact]::before {
		content: attr(data-compact);
		font-size: 0.7rem;
		display: block;
	}

	.edu-cert__desc[data-compact] {
		font-size: 0;
	}

	.edu-tag {
		padding: 0.15rem 0.5rem;
		font-size: 0.72rem;
	}

	.edu-card__copy {
		font-size: 0.9rem;
	}

	.skill-card {
		min-height: unset;
	}
	.skill-tag {
		padding: 0.25rem 0.65rem;
		font-size: 0.72rem;
	}

}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.svg-jor {
		animation: none;
	}
}

@media print {
	@page {
		margin: 12mm 10mm;
	}

	.print-only {
		display: block;
	}

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

	* {
		box-shadow: none !important;
		filter: none !important;
	}

	body {
		background: #ffffff;
		font-size: 12px;
	}

	.nav,
	.svg-jor,
	.contact-linkedin {
		display: none !important;
	}

	html {
		scroll-snap-type: none;
	}

	.scene {
		min-height: auto;
		scroll-snap-align: unset;
		padding: 0.6rem 0;
		page-break-inside: auto;
		page-break-after: auto;
	}

	.h2 {
		margin: 10px;
		font-size: 2rem;
		line-height: 1.1;
	}

	.scene__card h2 {
		margin: 10px;
		font-size: 2rem;
		line-height: 1.1;
	}

	.scene__panel {
		border-radius: 0px;
		clip-path: none !important;
		width: 100%;
		max-height: none;
		overflow: visible;
		padding: 0.2rem 0 0.4rem;
		background: transparent !important;
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;
	}

	.timeline__details-panel {
		max-height: none !important;
	}

	.hero__summary {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: none !important;
	}

	.timeline__face,
	.capability-card,
	.skill-card,
	.edu-card,
	.lang-card,
	.contact-card {
		background: transparent !important;
		border: 1px solid #ccc !important;
		box-shadow: none !important;
		border-radius: none !important;
	}

	.hero {
		border: 0 !important;
		outline: 0 !important;
	}

	/*.hero__summary {
		padding: 0;
	}*/

	.traits-grid {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}

	.hero__badges {
		display: none !important;
	}

	.timeline__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.4rem;
	}

	.timeline__rail {
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.5rem;
	}

	.timeline__year {
		writing-mode: horizontal-tb;
		transform: none;
	}

	.timeline__icon {
		margin-top: 0;
	}

	.timeline__pills-row {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.3rem;
	}

	.capability-grid,
	.skill-matrix,
	.edu-grid,
	.lang-grid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 0.6rem;
	}

	.lang-card__badge {
		display: none;
	}

	.lang-card__content {
		padding: 0.8rem;
	}

	.contact-linkedin {
		display: none !important;
	}

	.scene--contact {
		page-break-before: avoid;
	}

	.scene__eyebrow {
		margin-left: 30px;
		margin-block: 10px;
	}

	.edu-cert__desc[data-compact]::before {
		content: attr(data-compact);
		font-size: 0.7rem;
		display: block;
	}

	.edu-cert__desc[data-compact] {
		font-size: 0;
	}

	.edu-card__tags { display: none}

	.lang-card {
		min-height: 100px;
	}

	.lang-card__content {
		padding: 1rem;
	}
}

/* Flipwords banner */
.flipwords {
  font-family: "Poppins", sans-serif;
  background: transparent;
}
.loader {
  color: rgb(124, 124, 124);
  font-weight: 500;
  font-size: 25px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 8px;
}

.flipper_intro {
	margin: 0;
}

.roles {
  overflow: hidden;
  position: relative;
}
.roles::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--bg-color) 10%,
    transparent 30%,
    transparent 70%,
    var(--bg-color) 90%
  );
  z-index: 20;
}

.role {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #956afa;
  animation: spin_roles_slower_6 15s infinite;
}

@keyframes spin_roles {
  10% {-webkit-transform: translateY(-102%); transform: translateY(-102%);}
  25% {-webkit-transform: translateY(-100%); transform: translateY(-100%);}
  35% {-webkit-transform: translateY(-202%); transform: translateY(-202%);}
  50% {-webkit-transform: translateY(-200%); transform: translateY(-200%);}
  60% {-webkit-transform: translateY(-302%); transform: translateY(-302%);}
  75% {-webkit-transform: translateY(-300%); transform: translateY(-300%);}
  85% {-webkit-transform: translateY(-402%); transform: translateY(-402%);}
  100% {-webkit-transform: translateY(-400%);transform: translateY(-400%);}
}

@keyframes spin_roles_slower {
  5% {-webkit-transform: translateY(-102%); transform: translateY(-102%);}
  25% {-webkit-transform: translateY(-100%); transform: translateY(-100%);}
  30% {-webkit-transform: translateY(-202%); transform: translateY(-202%);}
  50% {-webkit-transform: translateY(-200%); transform: translateY(-200%);}
  55% {-webkit-transform: translateY(-302%); transform: translateY(-302%);}
  75% {-webkit-transform: translateY(-300%); transform: translateY(-300%);}
  80% {-webkit-transform: translateY(-402%); transform: translateY(-402%);}
  100% {-webkit-transform: translateY(-400%);transform: translateY(-400%);}
}

@keyframes spin_roles_slower_6 {
  4% {-webkit-transform: translateY(-102%); transform: translateY(-102%);}
  17% {-webkit-transform: translateY(-100%); transform: translateY(-100%);}
  21% {-webkit-transform: translateY(-202%); transform: translateY(-202%);}
  34% {-webkit-transform: translateY(-200%); transform: translateY(-200%);}
  37% {-webkit-transform: translateY(-302%); transform: translateY(-302%);}
  50% {-webkit-transform: translateY(-300%); transform: translateY(-300%);}
  54% {-webkit-transform: translateY(-402%); transform: translateY(-402%);}
  67% {-webkit-transform: translateY(-400%);transform: translateY(-400%);}
  71% {-webkit-transform: translateY(-502%);transform: translateY(-502%);}
  84% {-webkit-transform: translateY(-500%);transform: translateY(-500%);}
  87% {-webkit-transform: translateY(-602%);transform: translateY(-602%);}
  100% {-webkit-transform: translateY(-600%);transform: translateY(-600%);}
}