/*
Theme Name: Pixel Story House
Theme URI: http://localhost:8080
Author: Codex
Description: A cinematic, editorial photography portfolio theme.
Version: 2.0.0
Text Domain: fvogel-clone
*/

:root {
	--fv-bg: #02080b;
	--fv-ink: #f5f3ee;
	--fv-muted: rgba(236, 239, 239, 0.66);
	--fv-line: rgba(229, 235, 235, 0.23);
	--fv-nav-height: clamp(74px, 9.2svh, 92px);
	--fv-dial-size: clamp(430px, min(55.5vw, 70svh), 680px);
	--fv-content-max: 1320px;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--fv-bg);
	color: var(--fv-ink);
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.home {
	overflow: hidden;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fv-stage,
.fv-hero {
	width: 100%;
	height: 100vh;
	height: 100svh;
	min-height: 620px;
}

.fv-stage {
	overflow: hidden;
	background: var(--fv-bg);
}

.fv-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 46%, rgba(10, 24, 29, 0.46) 0, rgba(3, 11, 15, 0.72) 38%, #02080b 73%),
		var(--fv-bg);
}

.fv-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	top: calc(var(--fv-nav-height) - min(28vw, 260px));
	width: clamp(850px, 98vw, 1540px);
	aspect-ratio: 1;
	transform: translateX(-50%) rotate(-8deg);
	border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, rgba(9, 28, 55, 0.42) 0deg 7.5deg, transparent 7.5deg 20deg),
		radial-gradient(circle, transparent 0 68%, rgba(8, 27, 50, 0.28) 68.3% 75%, transparent 75.3%);
	-webkit-mask: radial-gradient(circle, transparent 0 57%, #000 57.3% 77%, transparent 77.3%);
	mask: radial-gradient(circle, transparent 0 57%, #000 57.3% 77%, transparent 77.3%);
	opacity: 0.52;
	pointer-events: none;
}

.fv-nav {
	position: relative;
	z-index: 10;
	width: min(100%, var(--fv-content-max));
	height: var(--fv-nav-height);
	margin: 0 auto;
	padding-inline: clamp(28px, 5vw, 72px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	background: linear-gradient(180deg, rgba(2, 8, 11, 0.95), rgba(2, 8, 11, 0.76) 74%, transparent);
}

.fv-nav-left,
.fv-nav-right {
	display: flex;
	align-items: center;
	gap: clamp(22px, 2.35vw, 38px);
}

.fv-nav-right {
	justify-content: flex-end;
}

.fv-nav a,
.fv-menu {
	color: rgba(242, 244, 244, 0.68);
	font: 600 14px/1 Inter, "Helvetica Neue", Arial, sans-serif;
	text-decoration: none;
	transition: color 180ms ease, opacity 180ms ease;
}

.fv-nav a:hover,
.fv-nav a:focus-visible,
.fv-menu:hover,
.fv-menu:focus-visible {
	color: #fff;
}

.fv-nav a:focus-visible,
.fv-menu:focus-visible,
.fv-controls button:focus-visible {
	outline: 1px solid rgba(255, 255, 255, 0.92);
	outline-offset: 5px;
}

.fv-logo {
	font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif !important;
	font-size: clamp(18px, 1.5vw, 23px) !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	color: rgba(249, 248, 244, 0.92) !important;
	text-transform: uppercase;
}

.fv-menu,
.fv-icon-link,
.fv-control {
	display: inline-grid;
	place-items: center;
	border: 0;
	background: transparent;
	padding: 0;
}

.fv-menu {
	display: none;
	width: 23px;
	height: 23px;
	cursor: pointer;
}

.fv-mobile-only {
	display: none;
}

.fv-menu svg,
.fv-icon-link svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fv-icon-link {
	width: 23px;
	height: 23px;
	opacity: 0.84;
}

.fv-visual {
	position: absolute;
	z-index: 1;
	inset: var(--fv-nav-height) 0 0;
	pointer-events: none;
}

.fv-portrait {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100vw, calc((100svh - var(--fv-nav-height)) * 1.5));
	height: 100%;
	transform: translate(-50%, -50%);
	object-fit: contain;
	object-position: center center;
	filter: brightness(0.88) contrast(1.08) saturate(0.84);
}

.fv-portrait {
	z-index: 1;
	opacity: 0.92;
	-webkit-mask-image: radial-gradient(ellipse 52% 67% at 52% 49%, #000 0 54%, rgba(0, 0, 0, 0.85) 69%, transparent 91%);
	mask-image: radial-gradient(ellipse 52% 67% at 52% 49%, #000 0 54%, rgba(0, 0, 0, 0.85) 69%, transparent 91%);
}

.fv-dial {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: clamp(52px, 8.8svh, 90px);
	width: var(--fv-dial-size);
	aspect-ratio: 1;
	transform: translateX(-50%);
	border: 1px solid rgba(234, 239, 239, 0.16);
	border-radius: 50%;
	box-shadow: 0 0 100px rgba(15, 28, 36, 0.22);
	opacity: 0.82;
	-webkit-mask-image: radial-gradient(ellipse 22% 66% at 50% 54%, transparent 0 60%, rgba(0, 0, 0, 0.12) 68%, #000 80%);
	mask-image: radial-gradient(ellipse 22% 66% at 50% 54%, transparent 0 60%, rgba(0, 0, 0, 0.12) 68%, #000 80%);
}

.fv-dial::before,
.fv-dial::after {
	content: "";
	position: absolute;
	border-radius: inherit;
	pointer-events: none;
}

.fv-dial::before {
	inset: -1px;
	background:
		repeating-conic-gradient(from -0.4deg, rgba(237, 241, 241, 0.48) 0deg 0.18deg, transparent 0.18deg 4.09deg);
	-webkit-mask: radial-gradient(circle, transparent 0 89.4%, #000 89.8% 97%, transparent 97.4%);
	mask: radial-gradient(circle, transparent 0 89.4%, #000 89.8% 97%, transparent 97.4%);
}

.fv-dial::after {
	inset: -1px;
	background:
		repeating-conic-gradient(from -0.4deg, rgba(237, 241, 241, 0.46) 0deg 0.32deg, transparent 0.32deg 16.36deg);
	-webkit-mask: radial-gradient(circle, transparent 0 85.2%, #000 85.6% 97%, transparent 97.4%);
	mask: radial-gradient(circle, transparent 0 85.2%, #000 85.6% 97%, transparent 97.4%);
}

.fv-tick {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1px;
	height: 31px;
	background: linear-gradient(180deg, rgba(234, 239, 239, 0.48), rgba(234, 239, 239, 0.06));
	transform:
		translate(-50%, -50%)
		rotate(calc(var(--fv-tick) * 4.0909deg))
		translateY(calc(-1 * ((var(--fv-dial-size) / 2) - 17px)));
	transform-origin: center;
	opacity: 0.72;
}

.fv-tick:nth-child(4n) {
	height: 42px;
	background: linear-gradient(180deg, rgba(234, 239, 239, 0.56), rgba(234, 239, 239, 0.07));
}

.fv-visual::after {
	content: "";
	position: absolute;
	z-index: 4;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(2, 8, 11, 0.58) 0, transparent 23%, transparent 74%, rgba(2, 8, 11, 0.33) 100%),
		linear-gradient(180deg, rgba(2, 8, 11, 0.16) 0, transparent 18%, transparent 71%, rgba(2, 8, 11, 0.93) 100%);
}

.fv-title {
	position: absolute;
	z-index: 8;
	left: 50%;
	top: clamp(320px, 48svh, 470px);
	width: min(92vw, 1120px);
	margin: 0;
	transform: translate(-50%, -50%) scaleX(1.045);
	color: #fbfaf6;
	font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
	font-size: clamp(40px, min(4.55vw, 6.7svh), 64px);
	font-style: italic;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.065em;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 10px 30px rgba(0, 0, 0, 0.78);
	white-space: nowrap;
	pointer-events: none;
}

.fv-slide-index {
	position: absolute;
	z-index: 8;
	left: max(7vw, calc((100vw - var(--fv-content-max)) / 2 + 54px));
	bottom: clamp(48px, 10.8svh, 110px);
	width: 82px;
	height: 50px;
	font-family: Didot, "Bodoni 72", Georgia, serif;
	font-size: 24px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.fv-slide-index span {
	position: absolute;
}

.fv-slide-index span:first-child {
	left: 0;
	top: 0;
}

.fv-slide-index span:last-child {
	left: 34px;
	top: 24px;
	font-size: 17px;
	opacity: 0.66;
}

.fv-controls {
	position: absolute;
	z-index: 9;
	right: max(7vw, calc((100vw - var(--fv-content-max)) / 2 + 54px));
	bottom: clamp(50px, 10.7svh, 108px);
	display: flex;
	gap: 34px;
}

.fv-control {
	width: 38px;
	height: 38px;
	border: 3px solid rgba(231, 236, 236, 0.58);
	border-radius: 50%;
	color: rgba(239, 243, 243, 0.67);
	cursor: pointer;
	transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.fv-control:hover {
	border-color: rgba(255, 255, 255, 0.94);
	color: #fff;
	transform: scale(1.06);
}

.fv-control svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 900px) {
	:root {
		--fv-dial-size: clamp(330px, min(68vw, 63svh), 520px);
	}

	.fv-nav {
		padding-inline: 28px;
	}

	.fv-menu {
		display: inline-grid;
	}

	.fv-nav a:not(.fv-logo):not(.fv-icon-link) {
		display: none;
	}

	.fv-nav-right.is-open {
		position: absolute;
		top: calc(var(--fv-nav-height) - 8px);
		left: 20px;
		right: 20px;
		padding: 22px 24px;
		justify-content: center;
		background: rgba(2, 8, 11, 0.96);
		border: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
	}

	.fv-nav-right.is-open a:not(.fv-icon-link) {
		display: block;
	}

	.fv-title {
		font-size: clamp(34px, 6.7vw, 52px);
	}
}

@media (max-width: 560px) {
	:root {
		--fv-nav-height: 68px;
		--fv-dial-size: min(79vw, 47svh);
	}

	.fv-stage,
	.fv-hero {
		min-height: 560px;
	}

	.fv-nav {
		padding-inline: 20px;
	}

	.fv-nav-left,
	.fv-nav-right {
		gap: 17px;
	}

	.fv-logo {
		font-size: 16px !important;
	}

	.fv-portrait {
		width: max(116vw, calc((100svh - var(--fv-nav-height)) * 1.5));
		object-position: 48% center;
	}

	.fv-dial {
		top: 13svh;
	}

	.fv-title {
		top: 47svh;
		width: 94vw;
		font-size: clamp(27px, 8.2vw, 38px);
		line-height: 0.96;
		white-space: normal;
	}

	.fv-title span {
		display: block;
	}

	.fv-slide-index {
		left: 7vw;
		bottom: 7svh;
		font-size: 20px;
	}

	.fv-controls {
		right: 7vw;
		bottom: 7svh;
		gap: 16px;
	}

	.fv-control {
		width: 34px;
		height: 34px;
		border-width: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Homepage content system -------------------------------------------------- */

body.home {
	overflow-x: hidden;
	overflow-y: auto;
}

.fv-stage {
	height: auto;
	min-height: 100vh;
	min-height: 100svh;
	overflow: clip;
}

.fv-shell {
	width: min(calc(100% - 96px), var(--fv-content-max));
	margin-inline: auto;
}

.fv-eyebrow {
	margin: 0 0 24px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.fv-display {
	margin: 0;
	font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
	font-size: clamp(52px, 6.2vw, 92px);
	font-weight: 500;
	line-height: 0.91;
	letter-spacing: -0.055em;
}

.fv-display em {
	font-weight: 500;
}

.fv-text-link,
.fv-button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.11em;
	text-decoration: none;
	text-transform: uppercase;
}

.fv-text-link svg,
.fv-button svg,
.fv-service-arrow svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fv-text-link svg,
.fv-button svg {
	transition: transform 180ms ease;
}

.fv-text-link:hover svg,
.fv-button:hover svg {
	transform: translateX(4px);
}

.fv-intro {
	position: relative;
	z-index: 2;
	padding: clamp(112px, 14vw, 210px) 0 clamp(100px, 12vw, 180px);
	background: #e9e5dc;
	color: #111619;
}

.fv-intro::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 1px;
	height: 64px;
	background: rgba(17, 22, 25, 0.3);
}

.fv-intro-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
	gap: clamp(60px, 9vw, 150px);
	align-items: end;
}

.fv-intro .fv-display {
	font-size: clamp(58px, 7.1vw, 108px);
}

.fv-intro-copy {
	padding-bottom: 8px;
}

.fv-intro-copy > p {
	margin: 0 0 38px;
	color: rgba(17, 22, 25, 0.68);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.65;
}

.fv-intro .fv-text-link {
	color: #111619;
}

.fv-services {
	padding: 40px 0 clamp(120px, 14vw, 210px);
	background: #e9e5dc;
	color: #111619;
}

.fv-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
	gap: 60px;
	align-items: end;
	margin-bottom: clamp(68px, 8vw, 112px);
	padding-top: 48px;
	border-top: 1px solid rgba(17, 22, 25, 0.22);
}

.fv-section-head > p {
	margin: 0 0 5px;
	color: rgba(17, 22, 25, 0.62);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1.6;
}

.fv-service-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(26px, 3.2vw, 54px);
	align-items: start;
}

.fv-service-card:nth-child(2) {
	margin-top: 86px;
}

.fv-service-image {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #0b1013;
	color: #f8f6f0;
}

.fv-service-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(2, 7, 10, 0.52));
	opacity: 0.66;
	transition: opacity 300ms ease;
}

.fv-service-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.84) contrast(1.04);
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 300ms ease;
}

.fv-service-image:hover img {
	transform: scale(1.035);
	filter: saturate(0.98) contrast(1.02);
}

.fv-service-image:hover::after {
	opacity: 0.35;
}

.fv-service-arrow {
	position: absolute;
	z-index: 2;
	right: 22px;
	bottom: 22px;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.62);
	border-radius: 50%;
	transition: background 180ms ease, color 180ms ease;
}

.fv-service-image:hover .fv-service-arrow {
	background: #f6f3ec;
	color: #101518;
}

.fv-service-body {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 12px;
	padding-top: 26px;
}

.fv-service-body > span {
	padding-top: 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.fv-service-body h3 {
	margin: 0 0 13px;
	font-family: Didot, "Bodoni 72", Georgia, serif;
	font-size: clamp(26px, 2.2vw, 36px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
}

.fv-service-body p {
	margin: 0;
	color: rgba(17, 22, 25, 0.62);
	font-size: 14px;
	line-height: 1.72;
}

.fv-process {
	position: relative;
	padding: clamp(120px, 14vw, 210px) 0;
	background:
		radial-gradient(circle at 82% 20%, rgba(11, 46, 58, 0.32), transparent 34%),
		#030a0e;
	color: var(--fv-ink);
}

.fv-process::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, 0.025) calc(25% - 1px) 25%);
	pointer-events: none;
}

.fv-process-head {
	position: relative;
	display: grid;
	grid-template-columns: 0.38fr 1fr;
	gap: 48px;
	align-items: start;
	margin-bottom: clamp(84px, 10vw, 144px);
}

.fv-process-head .fv-eyebrow {
	margin-top: 15px;
	color: var(--fv-muted);
}

.fv-process-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--fv-line);
}

.fv-process-list article {
	min-height: 290px;
	padding: 36px clamp(26px, 3vw, 48px) 28px 0;
	border-right: 1px solid var(--fv-line);
}

.fv-process-list article + article {
	padding-left: clamp(26px, 3vw, 48px);
}

.fv-process-list article:last-child {
	border-right: 0;
}

.fv-process-list span {
	display: block;
	margin-bottom: 72px;
	color: rgba(242, 244, 244, 0.48);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.fv-process-list h3 {
	margin: 0 0 18px;
	font-family: Didot, "Bodoni 72", Georgia, serif;
	font-size: 34px;
	font-weight: 500;
	letter-spacing: -0.04em;
}

.fv-process-list p {
	max-width: 330px;
	margin: 0;
	color: var(--fv-muted);
	font-size: 14px;
	line-height: 1.75;
}

.fv-assurance {
	padding: clamp(100px, 11vw, 165px) 0;
	background: #091b23;
	color: var(--fv-ink);
}

.fv-assurance-grid {
	display: grid;
	grid-template-columns: 0.26fr 1fr;
	gap: 58px;
}

.fv-assurance .fv-eyebrow {
	margin-top: 15px;
	color: var(--fv-muted);
}

.fv-assurance-title {
	margin: 0;
	font-family: Didot, "Bodoni 72", Georgia, serif;
	font-size: clamp(48px, 6vw, 88px);
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: -0.055em;
}

.fv-assurance-title em {
	font-weight: 500;
}

.fv-assurance-points {
	grid-column: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 45px;
	border-top: 1px solid var(--fv-line);
	border-bottom: 1px solid var(--fv-line);
}

.fv-assurance-points span {
	padding: 22px 20px 22px 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.fv-booking {
	padding: clamp(110px, 13vw, 195px) 0;
	background: #e9e5dc;
	color: #111619;
}

.fv-booking-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1.18fr);
	gap: clamp(64px, 8vw, 130px);
	align-items: center;
}

.fv-booking-copy > p:not(.fv-eyebrow) {
	max-width: 590px;
	margin: 38px 0 40px;
	color: rgba(17, 22, 25, 0.64);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1.72;
}

.fv-button {
	padding: 18px 24px;
	background: #111619;
	color: #f8f5ee;
}

.fv-booking-media {
	position: relative;
	min-height: 680px;
}

.fv-booking-media img {
	position: absolute;
	object-fit: cover;
	box-shadow: 0 26px 70px rgba(13, 18, 20, 0.17);
}

.fv-booking-media img:first-child {
	left: 0;
	top: 0;
	width: 64%;
	height: 82%;
}

.fv-booking-media img:last-child {
	right: 0;
	bottom: 0;
	width: 48%;
	height: 61%;
	border: 10px solid #e9e5dc;
}

.fv-footer {
	padding: 92px 0 34px;
	background: #02080b;
	color: var(--fv-ink);
}

.fv-footer-top {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 48px;
	align-items: center;
	padding-bottom: 78px;
}

.fv-footer-logo {
	color: var(--fv-ink);
	font-family: Didot, "Bodoni 72", Georgia, serif;
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 600;
	letter-spacing: -0.075em;
	text-decoration: none;
}

.fv-footer-top > p {
	max-width: 300px;
	margin: 0;
	color: var(--fv-muted);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 17px;
	line-height: 1.55;
}

.fv-footer .fv-text-link {
	color: var(--fv-ink);
}

.fv-footer-bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 36px;
	align-items: center;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	color: rgba(242, 244, 244, 0.5);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.fv-footer-bottom p {
	margin: 0;
}

.fv-footer-bottom nav {
	display: flex;
	gap: 28px;
}

.fv-footer-bottom a {
	color: inherit;
	text-decoration: none;
}

.fv-footer-bottom > a:last-child {
	justify-self: end;
}

.fv-footer-bottom a:hover {
	color: var(--fv-ink);
}

.is-reveal-ready [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 700ms ease, transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.is-reveal-ready [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 980px) {
	.fv-shell {
		width: min(calc(100% - 56px), var(--fv-content-max));
	}

	.fv-intro-grid,
	.fv-section-head,
	.fv-process-head,
	.fv-assurance-grid,
	.fv-booking-grid {
		grid-template-columns: 1fr;
	}

	.fv-intro-copy {
		max-width: 620px;
	}

	.fv-section-head > p {
		max-width: 600px;
	}

	.fv-service-card:nth-child(2) {
		margin-top: 48px;
	}

	.fv-process-head {
		gap: 18px;
	}

	.fv-process-head .fv-eyebrow,
	.fv-assurance .fv-eyebrow {
		margin-top: 0;
	}

	.fv-assurance-points {
		grid-column: 1;
	}

	.fv-booking-copy {
		max-width: 720px;
	}

	.fv-booking-media {
		width: min(100%, 720px);
		margin-inline: auto;
	}
}

@media (max-width: 700px) {
	.fv-shell {
		width: calc(100% - 36px);
	}

	.fv-display {
		font-size: clamp(43px, 13vw, 68px);
	}

	.fv-intro .fv-display {
		font-size: clamp(48px, 14vw, 76px);
	}

	.fv-intro-grid,
	.fv-section-head {
		gap: 44px;
	}

	.fv-service-grid,
	.fv-process-list,
	.fv-assurance-points {
		grid-template-columns: 1fr;
	}

	.fv-service-grid {
		gap: 66px;
	}

	.fv-service-card:nth-child(2) {
		margin-top: 0;
	}

	.fv-service-body h3 {
		font-size: 30px;
	}

	.fv-process-list article,
	.fv-process-list article + article {
		min-height: 0;
		padding: 30px 0 42px;
		border-right: 0;
		border-bottom: 1px solid var(--fv-line);
	}

	.fv-process-list article:last-child {
		border-bottom: 0;
	}

	.fv-process-list span {
		margin-bottom: 38px;
	}

	.fv-assurance-points span {
		border-bottom: 1px solid var(--fv-line);
	}

	.fv-assurance-points span:last-child {
		border-bottom: 0;
	}

	.fv-booking-grid {
		gap: 70px;
	}

	.fv-booking-media {
		min-height: 490px;
	}

	.fv-footer-top,
	.fv-footer-bottom {
		grid-template-columns: 1fr;
	}

	.fv-footer-top {
		gap: 32px;
		padding-bottom: 56px;
	}

	.fv-footer-bottom {
		gap: 24px;
	}

	.fv-footer-bottom nav {
		flex-wrap: wrap;
		gap: 18px 24px;
	}

	.fv-footer-bottom > a:last-child {
		justify-self: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-reveal-ready [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Inner pages ------------------------------------------------------------- */

.fv-inner-page {
	min-height: 100vh;
	background: #02080b;
	overflow: clip;
}

.fv-inner-header {
	position: relative;
	z-index: 20;
	width: min(100%, var(--fv-content-max));
	height: var(--fv-nav-height);
	margin-inline: auto;
	padding-inline: clamp(28px, 5vw, 72px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	background: #02080b;
}

.fv-inner-header a,
.fv-inner-header .fv-menu {
	color: rgba(242, 244, 244, 0.68);
	font: 600 14px/1 Inter, "Helvetica Neue", Arial, sans-serif;
	text-decoration: none;
	transition: color 180ms ease;
}

.fv-inner-header a:hover,
.fv-inner-header a:focus-visible,
.fv-inner-header .fv-menu:hover,
.fv-inner-header .fv-menu:focus-visible {
	color: #fff;
}

.fv-inner-header .fv-logo {
	color: rgba(249, 248, 244, 0.92) !important;
}

.fv-page-hero-copy h1,
.fv-portfolio-hero h1,
.fv-contact-hero h1,
.fv-inner-cta h2 {
	margin: 0;
	font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
	font-size: clamp(66px, 8vw, 122px);
	font-weight: 500;
	line-height: 0.88;
	letter-spacing: -0.06em;
}

.fv-page-hero-copy h1 em,
.fv-portfolio-hero h1 em,
.fv-contact-hero h1 em,
.fv-inner-cta h2 em {
	font-weight: 500;
}

.fv-about-hero {
	padding: clamp(80px, 8vw, 126px) 0 clamp(112px, 13vw, 190px);
	background:
		radial-gradient(circle at 78% 30%, rgba(18, 50, 61, 0.26), transparent 35%),
		#02080b;
	color: var(--fv-ink);
}

.fv-about-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.68fr);
	gap: clamp(70px, 9vw, 150px);
	align-items: center;
}

.fv-page-hero-copy > p:last-child {
	max-width: 570px;
	margin: 42px 0 0;
	color: var(--fv-muted);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1.75;
}

.fv-about-portrait {
	margin: 0;
}

.fv-about-portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 28%;
	filter: saturate(0.82) contrast(1.04);
}

.fv-about-portrait figcaption {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-top: 15px;
	color: rgba(242, 244, 244, 0.48);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fv-about-story {
	padding: clamp(110px, 13vw, 190px) 0;
	background: #e9e5dc;
	color: #111619;
}

.fv-about-story-grid {
	display: grid;
	grid-template-columns: 0.3fr 1fr;
	gap: 60px;
}

.fv-about-story .fv-eyebrow {
	margin-top: 15px;
}

.fv-about-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(38px, 6vw, 90px);
	margin-top: 58px;
}

.fv-about-columns p,
.fv-about-craft-copy > p:last-child {
	margin: 0;
	color: rgba(17, 22, 25, 0.65);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1.75;
}

.fv-about-values {
	padding: 0 0 clamp(110px, 12vw, 175px);
	background: #e9e5dc;
	color: #111619;
}

.fv-about-values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid rgba(17, 22, 25, 0.23);
}

.fv-about-values article {
	min-height: 240px;
	padding: 32px clamp(24px, 3vw, 44px) 24px 0;
	border-right: 1px solid rgba(17, 22, 25, 0.2);
}

.fv-about-values article + article {
	padding-left: clamp(24px, 3vw, 44px);
}

.fv-about-values article:last-child {
	border-right: 0;
}

.fv-about-values span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
}

.fv-about-values h3 {
	margin: 54px 0 14px;
	font-family: Didot, "Bodoni 72", Georgia, serif;
	font-size: 33px;
	font-weight: 500;
	letter-spacing: -0.04em;
}

.fv-about-values p {
	max-width: 320px;
	margin: 0;
	color: rgba(17, 22, 25, 0.62);
	font-size: 14px;
	line-height: 1.7;
}

.fv-about-craft {
	padding: clamp(110px, 13vw, 190px) 0;
	background: #071820;
	color: var(--fv-ink);
}

.fv-about-craft img {
	width: 100%;
	aspect-ratio: 3 / 1.55;
	object-fit: cover;
	filter: saturate(0.78) contrast(1.05);
}

.fv-about-craft-copy {
	display: grid;
	grid-template-columns: 0.28fr 1fr 0.62fr;
	gap: 44px;
	align-items: start;
	margin-top: 72px;
}

.fv-about-craft-copy .fv-display {
	font-size: clamp(48px, 5.8vw, 84px);
}

.fv-about-craft-copy > p:last-child {
	padding-top: 10px;
	color: var(--fv-muted);
}

.fv-inner-cta {
	padding: clamp(110px, 14vw, 210px) 0;
	background: #e9e5dc;
	color: #111619;
	text-align: center;
}

.fv-inner-cta h2 {
	font-size: clamp(62px, 8.5vw, 126px);
}

.fv-inner-cta .fv-button {
	margin-top: 52px;
}

.fv-button-light {
	background: #111619;
	color: #f8f5ee;
}

/* Portfolio */

.fv-portfolio-hero {
	padding: clamp(90px, 10vw, 152px) 0 clamp(100px, 12vw, 180px);
	background:
		radial-gradient(circle at 70% 10%, rgba(16, 45, 56, 0.28), transparent 35%),
		#02080b;
	color: var(--fv-ink);
}

.fv-portfolio-hero h1 {
	font-size: clamp(78px, 11.5vw, 170px);
}

.fv-portfolio-intro {
	display: grid;
	grid-template-columns: minmax(300px, 520px) auto;
	justify-content: space-between;
	gap: 40px;
	align-items: end;
	margin-top: 74px;
	padding-top: 30px;
	border-top: 1px solid var(--fv-line);
}

.fv-portfolio-intro p {
	margin: 0;
	color: var(--fv-muted);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 17px;
	line-height: 1.7;
}

.fv-portfolio-intro span {
	color: rgba(242, 244, 244, 0.48);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fv-portfolio-gallery {
	padding: 70px 0 clamp(120px, 14vw, 210px);
	background: #e9e5dc;
	color: #111619;
}

.fv-portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 76px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(17, 22, 25, 0.22);
}

.fv-portfolio-filters button {
	padding: 10px 15px;
	border: 1px solid rgba(17, 22, 25, 0.24);
	border-radius: 999px;
	background: transparent;
	color: rgba(17, 22, 25, 0.62);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.fv-portfolio-filters button:hover,
.fv-portfolio-filters button.is-active {
	background: #111619;
	color: #f8f5ee;
}

.fv-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: clamp(64px, 8vw, 120px) clamp(30px, 5vw, 78px);
	align-items: start;
}

.fv-project.is-wide {
	grid-column: 1 / -1;
}

.fv-project.is-filtered-out {
	display: none;
}

.fv-project-image {
	overflow: hidden;
	background: #111619;
}

.fv-project.is-tall .fv-project-image {
	aspect-ratio: 4 / 5;
}

.fv-project.is-wide .fv-project-image {
	aspect-ratio: 16 / 8.5;
}

.fv-project-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.83) contrast(1.04);
	transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 300ms ease;
}

.fv-project:hover img {
	transform: scale(1.025);
	filter: saturate(0.98) contrast(1.02);
}

.fv-project-meta {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	gap: 14px;
	align-items: baseline;
	padding-top: 20px;
}

.fv-project-meta span,
.fv-project-meta p {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.fv-project-meta p {
	margin: 0;
	color: rgba(17, 22, 25, 0.48);
}

.fv-project-meta h2 {
	margin: 0;
	font-family: Didot, "Bodoni 72", Georgia, serif;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -0.04em;
}

/* Contact */

.fv-contact-hero {
	padding: clamp(80px, 9vw, 140px) 0 clamp(100px, 11vw, 165px);
	background: #02080b;
	color: var(--fv-ink);
}

.fv-contact-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(480px, 1.15fr);
	gap: clamp(60px, 8vw, 120px);
	align-items: center;
}

.fv-contact-hero h1 {
	font-size: clamp(65px, 7.3vw, 108px);
}

.fv-contact-hero div > p:last-child {
	max-width: 560px;
	margin: 42px 0 0;
	color: var(--fv-muted);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1.75;
}

.fv-contact-hero img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: saturate(0.78) contrast(1.05);
}

.fv-contact-form-section {
	padding: clamp(110px, 13vw, 190px) 0;
	background: #e9e5dc;
	color: #111619;
}

.fv-contact-form-grid {
	display: grid;
	grid-template-columns: minmax(300px, 0.65fr) minmax(480px, 1fr);
	gap: clamp(70px, 10vw, 160px);
	align-items: start;
}

.fv-contact-details {
	margin-top: 70px;
	padding-top: 28px;
	border-top: 1px solid rgba(17, 22, 25, 0.22);
}

.fv-contact-details p {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 16px;
	margin: 0;
	padding: 12px 0;
	font-size: 13px;
}

.fv-contact-details span {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.fv-contact-details a {
	color: inherit;
	text-decoration: none;
}

.fv-contact-form {
	display: grid;
	gap: 30px;
}

.fv-field-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}

.fv-contact-form label:not(.fv-consent):not(.fv-honeypot) {
	display: grid;
	gap: 11px;
}

.fv-contact-form label > span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fv-contact-form input:not([type="checkbox"]),
.fv-contact-form select,
.fv-contact-form textarea {
	width: 100%;
	padding: 12px 0 14px;
	border: 0;
	border-bottom: 1px solid rgba(17, 22, 25, 0.3);
	border-radius: 0;
	background: transparent;
	color: #111619;
	font: 16px/1.5 Georgia, "Times New Roman", serif;
}

.fv-contact-form textarea {
	resize: vertical;
}

.fv-contact-form input:focus,
.fv-contact-form select:focus,
.fv-contact-form textarea:focus {
	outline: 0;
	border-color: #111619;
}

.fv-consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: rgba(17, 22, 25, 0.62);
}

.fv-consent input {
	margin-top: 1px;
}

.fv-consent span {
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1.5;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.fv-contact-form .fv-button {
	justify-self: start;
	border: 0;
	cursor: pointer;
}

.fv-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fv-form-notice {
	margin-bottom: 34px;
	padding: 16px 18px;
	border: 1px solid rgba(17, 22, 25, 0.22);
	font-size: 13px;
	line-height: 1.5;
}

.fv-form-notice.is-success {
	border-color: rgba(21, 99, 63, 0.42);
	background: rgba(21, 99, 63, 0.07);
}

.fv-form-notice.is-error {
	border-color: rgba(137, 46, 46, 0.42);
	background: rgba(137, 46, 46, 0.07);
}

.fv-contact-faq {
	padding: clamp(110px, 13vw, 190px) 0;
	background: #071820;
	color: var(--fv-ink);
}

.fv-contact-faq > .fv-shell {
	display: grid;
	grid-template-columns: 0.7fr 1fr;
	gap: clamp(70px, 10vw, 150px);
}

.fv-contact-faq .fv-display {
	font-size: clamp(52px, 6.1vw, 88px);
}

.fv-faq-list {
	border-top: 1px solid var(--fv-line);
}

.fv-faq-list details {
	border-bottom: 1px solid var(--fv-line);
}

.fv-faq-list summary {
	padding: 28px 0;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-family: Didot, "Bodoni 72", Georgia, serif;
	font-size: 25px;
	letter-spacing: -0.02em;
	cursor: pointer;
	list-style: none;
}

.fv-faq-list summary::-webkit-details-marker {
	display: none;
}

.fv-faq-list summary span {
	font-family: Inter, Arial, sans-serif;
	font-size: 20px;
	font-weight: 300;
	transition: transform 180ms ease;
}

.fv-faq-list details[open] summary span {
	transform: rotate(45deg);
}

.fv-faq-list details p {
	max-width: 620px;
	margin: -6px 0 30px;
	color: var(--fv-muted);
	font-size: 14px;
	line-height: 1.75;
}

@media (max-width: 980px) {
	.fv-inner-header {
		padding-inline: 28px;
	}

	.fv-inner-header .fv-menu {
		display: inline-grid;
	}

	.fv-inner-header a:not(.fv-logo):not(.fv-icon-link) {
		display: none;
	}

	.fv-inner-header .fv-nav-right.is-open {
		position: absolute;
		top: calc(var(--fv-nav-height) - 8px);
		left: 20px;
		right: 20px;
		padding: 22px 24px;
		justify-content: center;
		background: rgba(2, 8, 11, 0.98);
		border: 1px solid rgba(255, 255, 255, 0.08);
	}

	.fv-inner-header .fv-nav-right.is-open a:not(.fv-icon-link) {
		display: block;
	}

	.fv-about-hero-grid,
	.fv-contact-hero-grid,
	.fv-contact-form-grid,
	.fv-contact-faq > .fv-shell {
		grid-template-columns: 1fr;
	}

	.fv-about-hero-grid {
		align-items: start;
	}

	.fv-about-portrait {
		width: min(100%, 620px);
		margin-inline: auto;
	}

	.fv-about-story-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.fv-about-story .fv-eyebrow {
		margin-top: 0;
	}

	.fv-about-craft-copy {
		grid-template-columns: 1fr 1fr;
	}

	.fv-about-craft-copy .fv-eyebrow {
		grid-column: 1 / -1;
	}

	.fv-contact-hero img {
		max-width: 760px;
	}

	.fv-contact-form-grid > aside {
		max-width: 700px;
	}
}

@media (max-width: 700px) {
	.fv-inner-header {
		padding-inline: 20px;
	}

	.fv-page-hero-copy h1,
	.fv-contact-hero h1 {
		font-size: clamp(54px, 16vw, 76px);
	}

	.fv-about-hero,
	.fv-portfolio-hero,
	.fv-contact-hero {
		padding-top: 62px;
	}

	.fv-about-columns,
	.fv-about-values-grid,
	.fv-about-craft-copy,
	.fv-field-row {
		grid-template-columns: 1fr;
	}

	.fv-about-values article,
	.fv-about-values article + article {
		min-height: 0;
		padding: 28px 0 38px;
		border-right: 0;
		border-bottom: 1px solid rgba(17, 22, 25, 0.2);
	}

	.fv-about-values article:last-child {
		border-bottom: 0;
	}

	.fv-about-values h3 {
		margin-top: 32px;
	}

	.fv-about-craft img {
		aspect-ratio: 4 / 3;
	}

	.fv-about-craft-copy .fv-eyebrow {
		grid-column: 1;
	}

	.fv-inner-cta h2 {
		font-size: clamp(56px, 17vw, 80px);
	}

	.fv-portfolio-hero h1 {
		font-size: clamp(72px, 22vw, 105px);
	}

	.fv-portfolio-intro {
		grid-template-columns: 1fr;
	}

	.fv-portfolio-filters {
		margin-bottom: 52px;
	}

	.fv-portfolio-grid {
		grid-template-columns: 1fr;
		gap: 68px;
	}

	.fv-project.is-wide {
		grid-column: auto;
	}

	.fv-project.is-wide .fv-project-image,
	.fv-project.is-tall .fv-project-image {
		aspect-ratio: 4 / 5;
	}

	.fv-project-meta {
		grid-template-columns: 28px 1fr;
	}

	.fv-project-meta p {
		grid-column: 2;
	}

	.fv-contact-hero-grid {
		gap: 58px;
	}

	.fv-contact-hero img {
		aspect-ratio: 4 / 5;
	}

	.fv-contact-details {
		margin-top: 48px;
	}

	.fv-contact-form-section,
	.fv-contact-faq {
		padding-block: 100px;
	}

	.fv-faq-list summary {
		font-size: 22px;
	}
}