	<style>
		/* ---------- Reset & Tokens ---------- */
		*,
		*::before,
		*::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		:root {
			--ink: #0d0d0f;
			--ink-soft: #1a1a1d;
			--paper: #f5f0e8;
			--paper-soft: #ede7dc;
			--line: #d8d2c5;
			--muted: #6b6b6b;
			--accent: #e85d3c;
			--accent-soft: #f3a78f;
			--serif: "Fraunces", "Times New Roman", serif;
			--sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
			--mono: "JetBrains Mono", "SF Mono", monospace;
			--ease: cubic-bezier(0.22, 1, 0.36, 1);
		}

		html {
			scroll-behavior: smooth;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		body {
			font-family: var(--sans);
			background: var(--paper);
			color: var(--ink);
			line-height: 1.5;
			overflow-x: hidden;
		}

		img {
			max-width: 100%;
			display: block;
		}

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

		::selection {
			background: var(--ink);
			color: var(--paper);
		}

		/* ---------- Layout primitives ---------- */
		.container {
			width: 100%;
			max-width: 1320px;
			margin: 0 auto;
			padding: 0 32px;
		}

		.eyebrow {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			color: var(--muted);
			display: inline-flex;
			align-items: center;
			gap: 12px;
		}

		.eyebrow::before {
			content: "";
			width: 32px;
			height: 1px;
			background: currentColor;
		}

		.serif {
			font-family: var(--serif);
			font-weight: 400;
		}

		/* ---------- Top Nav ---------- */
		.nav {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 50;
			padding: 14px 32px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: var(--ink);
			background: rgba(245, 240, 232, 0.78);
			-webkit-backdrop-filter: blur(14px) saturate(140%);
			backdrop-filter: blur(14px) saturate(140%);
			border-bottom: 1px solid transparent;
			transition: padding 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
		}

		.nav.scrolled {
			padding: 10px 32px;
			border-bottom-color: var(--line);
			background: rgba(245, 240, 232, 0.92);
		}

		.nav__logo {
			font-family: var(--mono);
			font-size: 12px;
			letter-spacing: 0.2em;
			text-transform: uppercase;
		}

		.nav__logo span {
			color: var(--accent);
		}

		.nav__links {
			display: flex;
			gap: 28px;
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.15em;
			text-transform: uppercase;
		}

		.nav__links a {
			position: relative;
			padding: 4px 0;
			transition: opacity 0.3s var(--ease);
		}

		.nav__links a::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 0;
			height: 1px;
			background: currentColor;
			transition: width 0.4s var(--ease);
		}

		.nav__links a:hover::after {
			width: 100%;
		}

		.nav__lang {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.15em;
			text-transform: uppercase;
			padding: 6px 14px;
			border: 1px solid currentColor;
			border-radius: 999px;
			transition: background 0.3s var(--ease), color 0.3s var(--ease);
		}

		.nav__lang:hover {
			background: var(--paper);
			color: var(--ink);
		}

		/* ---------- Hero ---------- */
		.hero {
			position: relative;
			min-height: 100vh;
			background: var(--paper);
			color: var(--ink);
			overflow: hidden;
			padding: 64px 32px 40px;
			display: flex;
			align-items: center;
		}

		.hero::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 55%;
			background:
				radial-gradient(ellipse 55% 70% at 18% 0%, rgba(251, 232, 216, 0.95) 0%, transparent 60%),
				radial-gradient(ellipse 45% 60% at 88% 15%, rgba(243, 167, 143, 0.28) 0%, transparent 55%);
			pointer-events: none;
			z-index: 0;
		}

		.hero__deco {
			position: absolute;
			bottom: 90px;
			left: 0;
			right: 0;
			height: 1px;
			background: var(--line);
			opacity: 0.4;
			pointer-events: none;
		}

		.hero__inner {
			position: relative;
			z-index: 2;
			width: 100%;
			max-width: 1320px;
			margin: 0 auto;
		}

		.hero__top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			gap: 16px;
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			color: var(--muted);
			margin-bottom: 64px;
		}

		.hero__status {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			color: var(--ink);
		}

		.hero__meta-dot {
			display: inline-block;
			width: 7px;
			height: 7px;
			background: var(--accent);
			border-radius: 50%;
			animation: pulse 2s var(--ease) infinite;
		}

		.hero__main {
			display: block;
			margin-bottom: 48px;
		}

		.hero__name {
			font-family: var(--serif);
			font-weight: 300;
			font-size: clamp(56px, 10vw, 150px);
			line-height: 0.86;
			letter-spacing: -0.045em;
			margin-bottom: 24px;
		}

		.hero__name em {
			font-style: italic;
			font-weight: 300;
			color: var(--accent);
		}

		.hero__name .line {
			display: block;
			overflow: hidden;
		}

		.hero__name .line span {
			display: inline-block;
			animation: rise 1.2s var(--ease) backwards;
		}

		.hero__name .line:nth-child(2) span {
			animation-delay: 0.15s;
		}

		.hero__role {
			font-family: var(--serif);
			font-weight: 400;
			font-style: italic;
			font-size: clamp(17px, 1.55vw, 22px);
			line-height: 1.45;
			max-width: 640px;
			color: var(--ink-soft);
			margin-bottom: 24px;
		}

		.hero__role a {
			color: var(--ink);
			text-decoration: underline;
			text-decoration-color: var(--accent);
			text-underline-offset: 5px;
			text-decoration-thickness: 1.5px;
		}

		.hero__links {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-bottom: 24px;
		}

		.hero__link {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.15em;
			text-transform: uppercase;
			padding: 13px 22px;
			border: 1px solid var(--ink);
			border-radius: 999px;
			display: inline-flex;
			align-items: center;
			gap: 10px;
			transition: all 0.4s var(--ease);
			color: var(--ink);
			background: transparent;
		}

		.hero__link:hover {
			background: var(--ink);
			color: var(--paper);
			transform: translateY(-2px);
		}

		.hero__link--primary {
			background: var(--ink);
			color: var(--paper);
		}

		.hero__link--primary:hover {
			background: var(--accent);
			border-color: var(--accent);
		}

		.hero__link .arrow {
			transition: transform 0.4s var(--ease);
		}

		.hero__link:hover .arrow {
			transform: translateX(4px);
		}

		.hero__now {
			font-family: var(--mono);
			font-size: 12px;
			color: var(--muted);
			padding-top: 14px;
			border-top: 1px dashed var(--line);
			max-width: 560px;
		}

		.hero__now-label {
			color: var(--accent);
			text-transform: uppercase;
			letter-spacing: 0.2em;
			font-size: 10px;
			margin-right: 10px;
		}

		/* ---------- Latest piece (editorial banner) ---------- */
		.latest {
			background: var(--paper-soft);
			padding: 100px 0 120px;
			border-top: 1px solid var(--line);
		}

		.latest__grid {
			display: grid;
			grid-template-columns: 1fr 1.5fr;
			gap: 80px;
			align-items: center;
		}

		.latest__text .eyebrow {
			margin-bottom: 20px;
		}

		.latest__title {
			font-family: var(--serif);
			font-weight: 300;
			font-size: clamp(32px, 4.2vw, 56px);
			line-height: 1.05;
			letter-spacing: -0.02em;
			margin-bottom: 20px;
		}

		.latest__title em {
			font-style: italic;
			color: var(--accent);
		}

		.latest__desc {
			font-size: 15px;
			line-height: 1.7;
			color: var(--muted);
			margin-bottom: 28px;
			max-width: 420px;
		}

		.latest__cta {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			display: inline-flex;
			align-items: center;
			gap: 12px;
			padding: 12px 22px;
			border: 1px solid var(--ink);
			border-radius: 999px;
			color: var(--ink);
			transition: all 0.4s var(--ease);
		}

		.latest__cta:hover {
			background: var(--ink);
			color: var(--paper);
		}

		.latest__cta .arrow {
			transition: transform 0.4s var(--ease);
		}

		.latest__cta:hover .arrow {
			transform: translateX(4px);
		}

		.latest__media {
			position: relative;
			aspect-ratio: 16 / 10;
			overflow: hidden;
			border-radius: 8px;
			background: var(--ink);
			box-shadow:
				0 1px 0 rgba(13, 13, 15, 0.04),
				0 40px 80px -30px rgba(13, 13, 15, 0.35),
				0 16px 32px -16px rgba(13, 13, 15, 0.18);
			display: block;
		}

		.latest__img,
		.latest__video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 1s var(--ease);
		}

		.latest__media:hover .latest__img,
		.latest__media:hover .latest__video {
			transform: scale(1.04);
		}

		.latest__media-tag {
			position: absolute;
			top: 20px;
			left: 20px;
			padding: 6px 12px;
			background: var(--paper);
			color: var(--ink);
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			border-radius: 999px;
		}

		.latest__media-tag::before {
			content: "";
			display: inline-block;
			width: 6px;
			height: 6px;
			background: var(--accent);
			border-radius: 50%;
			margin-right: 8px;
			vertical-align: middle;
		}

		.latest__media-info {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 24px 28px;
			color: var(--paper);
			background: linear-gradient(0deg, rgba(13, 13, 15, 0.85) 0%, rgba(13, 13, 15, 0) 100%);
		}

		.latest__media-title {
			font-family: var(--serif);
			font-size: 18px;
			line-height: 1.3;
			font-weight: 400;
		}

		.hero__bar {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 0;
			border-top: 1px solid var(--ink);
			padding-top: 18px;
		}

		.hero__bar-item {
			display: flex;
			flex-direction: column;
			gap: 6px;
			padding: 4px 28px;
			border-right: 1px solid var(--line);
		}

		.hero__bar-item:first-child {
			padding-left: 0;
		}

		.hero__bar-item:last-child {
			border-right: none;
			padding-right: 0;
			align-items: flex-start;
		}

		.hero__bar-num {
			font-family: var(--serif);
			font-size: clamp(32px, 3.4vw, 44px);
			line-height: 1;
			letter-spacing: -0.02em;
			color: var(--ink);
			font-weight: 400;
		}

		.hero__bar-num small {
			color: var(--accent);
		}

		.hero__bar-label {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			color: var(--muted);
		}

		.hero__bar-cta {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			color: var(--ink);
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 10px 18px;
			border: 1px solid var(--ink);
			border-radius: 999px;
			transition: all 0.3s var(--ease);
		}

		.hero__bar-cta:hover {
			background: var(--ink);
			color: var(--paper);
		}

		.hero__scroll {
			position: absolute;
			bottom: 20px;
			left: 32px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: 0.22em;
			text-transform: uppercase;
			color: var(--muted);
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.hero__scroll-line {
			width: 56px;
			height: 1px;
			background: var(--ink);
			position: relative;
			overflow: hidden;
		}

		.hero__scroll-line::after {
			content: "";
			position: absolute;
			top: 0;
			left: -50%;
			width: 50%;
			height: 100%;
			background: var(--accent);
			animation: scrollRight 2s var(--ease) infinite;
		}

		@keyframes scrollRight {
			from {
				left: -50%;
			}

			to {
				left: 100%;
			}
		}

		@keyframes pulse {

			0%,
			100% {
				opacity: 1;
				transform: scale(1);
			}

			50% {
				opacity: 0.5;
				transform: scale(1.3);
			}
		}

		@keyframes rise {
			from {
				transform: translateY(110%);
			}

			to {
				transform: translateY(0);
			}
		}

		/* ---------- Marquee ---------- */
		.marquee {
			background: var(--ink);
			color: var(--paper);
			padding: 22px 0;
			overflow: hidden;
			border-top: 1px solid rgba(245, 240, 232, 0.1);
			border-bottom: 1px solid rgba(245, 240, 232, 0.1);
		}

		.marquee__track {
			display: flex;
			gap: 48px;
			white-space: nowrap;
			animation: marquee 35s linear infinite;
			font-family: var(--serif);
			font-style: italic;
			font-size: 20px;
		}

		.marquee__track span {
			display: inline-flex;
			align-items: center;
			gap: 48px;
		}

		.marquee__track span::after {
			content: "✦";
			font-style: normal;
			color: var(--accent);
			font-size: 14px;
		}

		@keyframes marquee {
			from {
				transform: translateX(0);
			}

			to {
				transform: translateX(-50%);
			}
		}

		/* ---------- Sections ---------- */
		.section {
			padding: 140px 0;
			position: relative;
		}

		.section__head {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 64px;
			margin-bottom: 80px;
			align-items: end;
		}

		.section__num {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.18em;
			color: var(--muted);
			margin-bottom: 20px;
		}

		.section__title {
			font-family: var(--serif);
			font-weight: 300;
			font-size: clamp(48px, 7vw, 96px);
			line-height: 0.95;
			letter-spacing: -0.03em;
		}

		.section__title em {
			font-style: italic;
			color: var(--accent);
		}

		.section__desc {
			font-size: 15px;
			line-height: 1.7;
			color: var(--muted);
			max-width: 460px;
		}

		.section__desc strong {
			color: var(--ink);
			font-weight: 500;
		}

		/* ---------- Projects (Bento) ---------- */
		.work {
			background: var(--paper);
		}

		.work-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
		}

		.work-card {
			display: flex;
			flex-direction: column;
			position: relative;
			background: var(--paper);
			border: 1px solid var(--line);
			border-radius: 6px;
			overflow: hidden;
			cursor: pointer;
			transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease);
		}

		.work-card:hover {
			transform: translateY(-4px);
			border-color: rgba(13, 13, 15, 0.25);
			box-shadow: 0 24px 48px -24px rgba(13, 13, 15, 0.18);
		}

		.work-card__media {
			position: relative;
			width: 100%;
			aspect-ratio: 4 / 3;
			overflow: hidden;
			background: var(--paper-soft);
		}

		.work-card__img,
		.work-card__video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.8s var(--ease), filter 0.5s var(--ease);
			filter: saturate(1.05) contrast(1.02);
		}

		.work-card:hover .work-card__img,
		.work-card:hover .work-card__video {
			transform: scale(1.05);
			filter: saturate(1.15) contrast(1.05);
		}

		.work-card__body {
			padding: 14px 16px 16px;
			background: var(--paper);
			color: var(--ink);
			border-top: 1px solid var(--line);
			flex-shrink: 0;
		}

		.work-card__top {
			display: flex;
			justify-content: space-between;
			gap: 10px;
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: var(--accent);
			margin-bottom: 6px;
		}

		.work-card__title {
			font-family: var(--serif);
			font-size: 16px;
			line-height: 1.35;
			font-weight: 500;
			color: var(--ink);
			letter-spacing: -0.01em;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.work-card__cta {
			display: none;
		}

		.tools {
			margin-top: 80px;
			padding-top: 60px;
			border-top: 1px solid var(--line);
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
			align-items: center;
		}

		.tools__label {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			color: var(--muted);
			margin-right: 12px;
		}

		.tools__item {
			font-family: var(--mono);
			font-size: 12px;
			padding: 8px 14px;
			border: 1px solid var(--line);
			border-radius: 999px;
			color: var(--ink);
			transition: all 0.3s var(--ease);
		}

		.tools__item:hover {
			background: var(--ink);
			color: var(--paper);
			border-color: var(--ink);
		}

		/* ---------- Maps ---------- */
		.maps {
			background: var(--paper);
		}

		.maps__grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 24px;
		}

		.map-card {
			position: relative;
			aspect-ratio: 4 / 3;
			overflow: hidden;
			background: var(--ink);
			border-radius: 4px;
			cursor: pointer;
		}

		.map-card__img,
		.map-card__video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
			filter: saturate(1.05) contrast(1.02);
		}

		.map-card:hover .map-card__img,
		.map-card:hover .map-card__video {
			transform: scale(1.08);
			filter: saturate(1.15) contrast(1.05);
		}

		.map-card__caption {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 16px 18px;
			background: linear-gradient(0deg, rgba(13, 13, 15, 0.85), transparent);
			color: var(--paper);
			display: flex;
			justify-content: space-between;
			align-items: end;
			gap: 12px;
			transform: translateY(20%);
			opacity: 0;
			transition: all 0.4s var(--ease);
		}

		.map-card:hover .map-card__caption {
			transform: translateY(0);
			opacity: 1;
		}

		.map-card__title {
			font-family: var(--serif);
			font-size: 15px;
			line-height: 1.3;
		}

		.map-card__arrow {
			font-size: 18px;
			flex-shrink: 0;
		}

		/* ---------- Contact / Footer ---------- */
		.footer {
			background: var(--ink);
			color: var(--paper);
			padding: 140px 0 60px;
			position: relative;
			overflow: hidden;
		}

		.footer__big {
			font-family: var(--serif);
			font-weight: 300;
			font-size: clamp(56px, 11vw, 180px);
			line-height: 0.9;
			letter-spacing: -0.04em;
			margin-bottom: 80px;
		}

		.footer__big em {
			font-style: italic;
			color: var(--accent);
		}

		.footer__cta {
			display: inline-flex;
			align-items: center;
			gap: 16px;
			padding: 24px 36px;
			border: 1px solid var(--paper);
			border-radius: 999px;
			font-family: var(--mono);
			font-size: 12px;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			transition: all 0.4s var(--ease);
		}

		.footer__cta:hover {
			background: var(--paper);
			color: var(--ink);
			transform: translateY(-3px);
		}

		.footer__bottom {
			margin-top: 100px;
			padding-top: 32px;
			border-top: 1px solid rgba(245, 240, 232, 0.15);
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			gap: 16px;
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: 0.15em;
			text-transform: uppercase;
			opacity: 0.6;
		}

		.footer__socials {
			display: flex;
			gap: 24px;
		}

		.footer__socials a:hover {
			opacity: 1;
			color: var(--accent);
		}

		/* ---------- Reveal animation ---------- */
		.reveal {
			opacity: 0;
			transform: translateY(40px);
			transition: opacity 1s var(--ease), transform 1s var(--ease);
		}

		.reveal.in {
			opacity: 1;
			transform: translateY(0);
		}

		.reveal--stagger > * {
			opacity: 0;
			transform: translateY(30px);
			transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
		}

		.reveal--stagger.in > *:nth-child(1) { transition-delay: 0.0s; }
		.reveal--stagger.in > *:nth-child(2) { transition-delay: 0.1s; }
		.reveal--stagger.in > *:nth-child(3) { transition-delay: 0.2s; }
		.reveal--stagger.in > *:nth-child(4) { transition-delay: 0.3s; }
		.reveal--stagger.in > *:nth-child(5) { transition-delay: 0.4s; }
		.reveal--stagger.in > *:nth-child(6) { transition-delay: 0.5s; }
		.reveal--stagger.in > *:nth-child(7) { transition-delay: 0.6s; }
		.reveal--stagger.in > *:nth-child(8) { transition-delay: 0.7s; }
		.reveal--stagger.in > * {
			opacity: 1;
			transform: translateY(0);
		}

		/* ---------- Responsive ---------- */
		@media (max-width: 960px) {
			.section {
				padding: 90px 0;
			}

			.section__head {
				grid-template-columns: 1fr;
				gap: 32px;
			}

			.work-grid {
				grid-template-columns: repeat(2, 1fr);
			}

			.maps__grid {
				grid-template-columns: repeat(2, 1fr);
			}

			.hero__main {
				margin-bottom: 40px;
			}

			.hero__top {
				margin-bottom: 48px;
			}

			.hero__bar {
				grid-template-columns: repeat(2, 1fr);
				gap: 24px 0;
			}

			.hero__bar-item:nth-child(2) {
				border-right: none;
				padding-right: 0;
			}

			.hero__bar-item:nth-child(1),
			.hero__bar-item:nth-child(2) {
				padding-bottom: 14px;
				border-bottom: 1px solid var(--line);
			}

			.hero__bar-item:nth-child(3),
			.hero__bar-item:nth-child(4) {
				padding-top: 0;
			}

			.latest__grid {
				grid-template-columns: 1fr;
				gap: 40px;
			}

			.latest__title {
				font-size: clamp(28px, 5vw, 40px);
			}

			.nav__links {
				display: none;
			}
		}

		@media (max-width: 600px) {
			.container {
				padding: 0 20px;
			}

			.hero {
				padding: 72px 20px 40px;
			}

			.hero__scroll {
				left: 20px;
			}

			.work-grid,
			.maps__grid {
				grid-template-columns: 1fr;
			}

			.footer {
				padding: 80px 0 40px;
			}
		}
	</style>