@font-face {
	font-family: "PFScandalPro";
	font-weight: 700;
	font-style: normal;
	src: url("/assets/fonts/PFScandalPro/PFScandalPro-Bold.eot");
	src: url("/assets/fonts/PFScandalPro/PFScandalPro-Bold.eot#iefix") format("embedded-opentype"),
		url("/assets/fonts/PFScandalPro/PFScandalPro-Bold.svg#PFScandalPro-Bold") format("svg"),
		url("/assets/fonts/PFScandalPro/PFScandalPro-Bold.ttf") format("truetype"),
		url("/assets/fonts/PFScandalPro/PFScandalPro-Bold.woff") format("woff"),
		url("/assets/fonts/PFScandalPro/PFScandalPro-Bold.woff2") format("woff2");
	font-display: swap;
}

:root {
	--white: #FFFFFF;
	--black: #2E2A30;
	--beige: #DECBBA;
	--gray: #EDE9E3;
	--lightgray: #F4F3F1;
	--mediumgray: #717171;
	--darkgray: #474241;
	--green: #8AA2A0;
	--salmon: #CDA696;
	--red: #AA0000;
	--title: #363535;
	--subtitle: #333333;
	--transparent: rgb(0 0 0 / 0);

	--pad: clamp(20px, 5vw, 50px);
	--header: clamp(80px, 20vmin, 150px);
	--width: 1670px;
	--narrow: 1180px;
}

::-moz-selection {
	color: var(--black);
	background-color: var(--salmon);
}
::selection {
	color: var(--black);
	background-color: var(--salmon);
}

::-webkit-scrollbar {
	width: .5rem;
	height: .5rem;
}
::-webkit-scrollbar-track {
	background: var(--salmon);
}
::-webkit-scrollbar-thumb {
	background-color: var(--darkgray);
	border-radius: .5rem;
}

html {
	scrollbar-gutter: stable;
}

body {
	font: 500 normal 16px / 1.4 "Geologica", sans-serif;
	height: auto;
	margin: 0;
	color: var(--black);
	background-color: var(--beige);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
body.flyout-menu {
	overflow: hidden;
}
body.page {
	display: grid;
	grid-template-rows: auto 1fr auto;
	text-align: center;
	min-height: 100svh;
	padding-top: min(200px, 20vw);
	box-sizing: border-box;
}
body.page::before {
    content: url(/assets/images/line-page.png);
    position: absolute;
    inset: calc(min(200px, 20vw) + var(--header) / 4) 45vw 0 auto;
    z-index: 1;
}
div {
	position: relative; 
}
a {
	color: inherit; 
	cursor: pointer; 
	text-decoration: none; 
	outline: none;
}
img,
svg,
iframe {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
p {
	margin-block: 0;
}
section p + p {
	margin-top: 1em;
}
.pad {
	padding-inline: var(--pad);
	box-sizing: border-box;
}
.container {
	width: min(var(--width), 100%);
	margin-inline: auto;
}
body.home header,
body.home header .inner {
	height: var(--header);
}
header {
	inset: 0 0 auto;
	z-index: 2;
}
body.home header {
	position: fixed;
}
body.page header {
	position: sticky;
}
header.sticky,
header.sticky .inner {
	--header: clamp(60px, 15vmin, 100px);
}
header .inner {
	padding-block: 10px;
	will-change: height, background-color, backdrop-filter;
	transition: height .5s, background-color .5s, backdrop-filter .5s;
	-webkit-transition: height .5s, background-color .5s, -webkit-backdrop-filter .5s;
}
header.sticky .inner {
	background-color: color-mix(in srgb, var(--beige) 95%, var(--transparent));
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
header .inner::before {
	content: "";
	position: absolute;
	inset: 100% 0 auto;
	height: 10px;
	background-image: linear-gradient(color-mix(in srgb, var(--black) 10%, var(--transparent)), var(--transparent));
	opacity: 0;
	will-change: opacity;
	transition: opacity .5s;
	-webkit-transition: opacity .5s;
}
header.sticky .inner::before {
	opacity: 1;
}
header .container {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 50px;
}
header .logo {
	z-index: 1;
}
body.page .logo {
	display: inline-block;
}
header .logo img {
	will-change: max-height;
	transition: max-height .5s;
	-webkit-transition: max-height .5s;
}
body.home header .logo img {
	max-height: min(60px, calc(var(--header) - 20px));
}
body.page header .logo img {
	max-height: min(80px, calc(var(--header) - 20px));
}
header nav {
	position: fixed;
	inset: 0;
	place-content: center;
	font-size: clamp(1.25rem, 4vw, 1.5rem);
	line-height: 2.5;
	text-align: center;
	height: 100svh;
	background-color: color-mix(in srgb, var(--beige) 95%, var(--transparent));
	padding-block: calc(var(--header) + var(--pad)) var(--pad);
	opacity: 0;
	visibility: hidden;
	will-change: opacity, visibility;
	transition: opacity .5s, visibility .5s;
	-webkit-transition: opacity .5s, visibility .5s;
}
body.flyout-menu header nav {
	opacity: 1;
	visibility: visible;
}
header .burger {
	position: relative;
	z-index: 1;
	display: grid;
	place-content: center;
	width: min(40px, 9vw);
	aspect-ratio: 3 / 2;
}
header .burger::before,
header .burger::after,
header .burger .line {
	height: 3px;
	background-color: var(--black);
	will-change: inset, transform;
	transition: inset .25s, transform .25s;
	transition-delay: .25s, 0s;
}
header .burger::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
header .burger::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	transform: translateY(50%);
	-webkit-transform: translateY(50%);
}
header .burger .line {
	width: min(40px, 9vw);
	margin-inline: auto;
	will-change: max-width;
	transition: max-width .25s;
}
body.flyout-menu header .burger::before,
body.flyout-menu header .burger::after {
	transition-delay: 0s, .25s;
}
body.flyout-menu header .burger::before {
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	-webkit-transform: translateY(-50%) rotate(-45deg);
}
body.flyout-menu header .burger::after {
	bottom: 50%;
	transform: translateY(50%) rotate(45deg);
	-webkit-transform: translateY(50%) rotate(45deg);
}
body.flyout-menu header .burger .line {
	max-width: 0;
	transition-delay: .25s;
}
header nav .item {
	position: relative;
	color: var(--title);
}
header nav .item + .item {
	margin-top: .5em;
}
header nav .item a {
	position: relative;
	display: inline-block;
}
header nav .item a::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	width: 0;
	height: 2px;
	background-color: var(--title);
	margin-inline: auto 0;
	will-change: width;
	transition: width .5s;
}
header nav .item a:hover::before,
header nav .item.active a::before {
	width: 100%;
	margin-inline: 0 auto;
}
main {
	overflow: hidden;
}
body.page main {
	display: grid;
    place-content: center;
	line-height: 1;
}
.grid {
	display: grid;
	gap: var(--pad);
}
section .title {
	font-size: clamp(1.875rem, 3.75vw, 3.125rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--title);
	margin-block: 0 min(80px, 8vw);
}
body.page .title {
	font-size: clamp(3rem, 12vw, 8.25rem);
	font-weight: 300;
	color: var(--white);
	margin-block: min(90px, 9vw) 0;
}
body.page .privacy .title {
	font-size: clamp(1.5rem, 5vw, 3.5rem);
}
.subtitle {
	font-size: clamp(1.5rem, 3vw, 2.188rem);
	font-weight: 300;
	line-height: 1.2;
	color: var(--subtitle);
}
body.page .subtitle {
	font-size: clamp(1.125rem, 2.25vw, 1.375rem);
	font-weight: 600;
	color: var(--darkgray);
	margin-block: min(50px, 5vw) 0;
}
section .text {
	font-size: clamp(1.125rem, 2.25vw, 1.375rem);
}
.text a,
.footer-menu a {
	will-change: color;
	transition: color .5s;
}
section .text a {
	border-bottom: 1px solid;
}
.text a:hover,
.footer-menu a:hover {
	color: var(--salmon);
}
.image {
	z-index: 1;
}
section:is(#about, #services) .image {
    max-width: 75vw;
    margin-inline: auto;
}
.image:has(.frame) {
    text-align: center;
}
.image .frame {
    display: inline-block;
}
.image .frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-repeat: no-repeat;
}
.image .mask {
    -webkit-mask: no-repeat center center / contain;
    mask: no-repeat center center / contain;
    overflow: hidden;
}
#hero {
    position: relative;
    z-index: 1;
    color: var(--white);
    background-color: var(--beige);
    padding-block: calc(var(--header) + min(160px, 16vw)) min(160px, 16vw);
}
#hero::before {
    content: url("/assets/images/line-hero.png");
    position: absolute;
    inset: auto 10vw -5% auto;
    max-height: 100%;
}
#hero .box {
    max-width: 750px;
    margin-left: auto;
}
#hero .title {
    font-size: clamp(2rem, 4vw, 3.438rem);
    line-height: 1;
    color: var(--white);
}
#hero .quote {
    font: 700 normal clamp(2.5rem, 3.5vw, 3.438rem) / 1 "PFScandalPro", sans-serif;
    z-index: 1;
    position: relative;
}
#hero .quote::before {
    content: "";
    position: absolute;
    inset: -.5em auto auto -1.5em;
    z-index: -1;
    height: min(73px, 1.35em);
    aspect-ratio: 115 / 73;
    background: url("/assets/images/quotes.png") no-repeat top left / contain;
}
#hero .author {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    margin-top: 2em;
}
#hero .image {
    text-align: right;
}
#hero .image .mask {
    display: inline-block;
    max-width: min(100%, 80vw);
    margin-left: auto;
    -webkit-mask-image: url("/assets/images/hero.png");
    mask-image: url("/assets/images/hero.png");
}
#about {
    position: relative;
    color: var(--darkgray);
    background-color: var(--lightgray);
    padding-block: min(160px, 18vw);
}
#about::before {
    content: url("/assets/images/line-about.png");
    position: absolute;
    inset: min(160px, 18vw) auto auto 25vw;
    z-index: 1;
}
#about .few-words {
    --width: var(--narrow);
    font-weight: 600;
    z-index: 1;
}
#about .few-words .box {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: center;
}
#about .profile .title {
    position: relative;
    display: inline-block;
}
#about .profile .title::before {
    content: "";
    position: absolute;
    inset: 1em auto auto 100%;
    width: 100vw;
    height: 2px;
    background-color: var(--beige);
    margin-left: .25em;
}
#about .frame {
    padding: 3% 3% 0;
}
#about .frame::before {
    background-image: url("/assets/images/frame-about.png");
    background-size: contain;
}
#about .few-words .frame .mask {
    -webkit-mask-image: url("/assets/images/about.png");
    mask-image: url("/assets/images/about.png");
}
#about .few-words .image img {
    margin-inline: auto;
}
#about .profile {
    margin-top: min(90px, 9vw);
}
#about .profile .text {
    list-style: none;
    padding: 0;
    margin: 0;
}
#about .profile .text li {
    position: relative;
    padding-left: 1.5em;
}
#about .profile .text li::before {
    content: "";
    position: absolute;
    inset: .318em auto auto 0;
    width: .636em;
    aspect-ratio: 1;
    border: 2px solid;
    border-radius: 50%;
    box-sizing: border-box;
}
#about .profile .mask.p1 {
    -webkit-mask-image: url("/assets/images/profile-1.png");
    mask-image: url("/assets/images/profile-1.png");
}
#about .profile .mask.p2 {
    -webkit-mask-image: url("/assets/images/profile-2.png");
    mask-image: url("/assets/images/profile-2.png");
}
#about .profile .image {
    max-width: 570px;
}
#hero .image img,
#about .image img,
#services .image img,
#photos .image img {
    will-change: transform;
    transition: transform .5s;
}
#hero .image img:hover,
#about .image img:hover,
#services .image img:hover,
#photos .image img:hover {
    transform: scale(1.05);
}
#about .profile .image .p1 {
    max-width: 75%;
    margin-left: auto;
}
#about .profile .image .p2 {
    max-width: 52%;
    margin-top: -20%;
}
#services {
    --width: var(--narrow);
}
#services .top {
    background-color: var(--beige);
    padding-block: min(90px, 9vw) min(140px, 14vw);
}
#services .bottom {
    background-color: var(--gray);
    padding-block: min(140px, 14vw);
}
#services .title {
    text-align: center;
}
#services .grid + .grid {
    margin-top: min(80px, 8vw);
}
#services .frame:is(.f1, .f4) {
    padding: max(20px, 2vw) 0 0 max(20px, 2vw);
}
#services .frame:is(.f2, .f3) {
    padding: max(20px, 2vw) max(20px, 2vw) 0 0;
}
#services .frame::before {
    background-size: min(456px, 94%);
}
#services .top .frame::before {
    background-image: url("/assets/images/frame-services-top.png");
}
#services .bottom .frame::before {
    background-image: url("/assets/images/frame-services-bottom.png");
}
#services .frame:is(.f1, .f4)::before {
    background-position: top left;
}
#services .frame:is(.f2, .f3)::before {
    background-position: top right;
}
#services .frame.f1 .mask {
    -webkit-mask-image: url("/assets/images/service-1.png");
    mask-image: url("/assets/images/service-1.png");
}
#services .frame.f2 .mask {
    -webkit-mask-image: url("/assets/images/service-2.png");
    mask-image: url("/assets/images/service-2.png");
}
#services .frame.f3 .mask {
    -webkit-mask-image: url("/assets/images/service-3.png");
    mask-image: url("/assets/images/service-3.png");
}
#services .frame.f4 .mask {
    -webkit-mask-image: url("/assets/images/service-4.png");
    mask-image: url("/assets/images/service-4.png");
}
#services .image img {
    margin-inline: auto;
}
#services .text {
    font-weight: 300;
    color: var(--mediumgray);
}
#photos {
    display: grid;
    gap: 10px;
    background-color: var(--white);
}
#photos .image {
    overflow: hidden;
}
#contact {
    --width: var(--narrow);
    background-color: var(--beige);
    padding-block: min(80px, 8vw) min(150px, 15vw);
}
#contact .title {
    text-align: center;
}
#contact form {
	max-width: 450px;
	margin-inline: auto;
}
#contact form .field:has(:is(input, textarea))::before {
    content: "!";
    position: absolute;
    inset: auto auto 1em 100%;
    display: inline-grid;
    place-content: center;
    font-size: 1em;
    color: var(--white);
    background-color: var(--red);
    width: 1em;
    height: 1em;
    padding: .125em;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    transition: opacity .5s;
}
#contact form .field:has(:is(input, textarea):not(:focus):not(:placeholder-shown):invalid)::before {
    opacity: 1;
}
#contact form .field label {
    position: absolute;
    inset: 0 auto auto 0;
    padding-inline: .5em;
    transform-origin: left top;
    will-change: transform;
    transition: transform .5s;
}
#contact form .field :is(label, input, textarea, button, .response) {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 300;
}
#contact form :is(input, textarea) {
    width: 100%;
    color: var(--darkgray);
    background: no-repeat;
    padding: 1.25em .5em .25em;
    border: none;
    border-bottom: 2px solid;
    outline: none;
    box-sizing: border-box;
}
#contact form :is(input, textarea)::placeholder {
    color: var(--transparent);
}
#contact form :is(input, textarea):focus ~ label,
#contact form :is(input, textarea):not(:placeholder-shown) ~ label {
    transform: scale(.65);
}
#contact form textarea {
    overflow: hidden;
    resize: none;
}
#contact form .bottom,
#contact form .response {
    display: grid;
    place-content: center;
}
#contact form .field button {
    color: var(--black);
    background-color: var(--lightgray);
    padding: .25em 3em;
    border: 1px solid var(--salmon);
    border-radius: 2em;
    cursor: pointer;
    will-change: background-color;
    transition: background-color .5s;
}
#contact form .field button:hover {
    background-color: var(--salmon);
}
#contact form .response {
    position: absolute;
    inset: 0;
    background-color: var(--beige);
    opacity: 0;
    will-change: opacity, visibility;
    visibility: hidden;
    transition: opacity .5s, visibility .5s;
}
#contact form .response.visible {
    opacity: 1;
    visibility: visible;
}
#contact form .response.error {
    color: var(--red);
}
#map iframe {
    width: 100%;
    height: min(400px, 50svh);
}
body.home footer {
    background-color: var(--white);
}
body.page footer {
	position: relative;
	margin-top: min(100px, 10vw);
}
body.page footer::before {
    content: "";
    position: absolute;
    inset: max(-75px, -7.5vw) 0;
    z-index: 1;
    width: 1px;
    height: min(140px, 20vw);
    background-color: var(--darkgray);
    margin-inline: auto;
}
footer .info {
    row-gap: 30px;
    font-size: clamp(1rem, 2vw, 1.25rem);
	text-align: center;
}
body.page footer .inner {
    padding-block: min(85px, 15vw) 2em;
    overflow: hidden;
}
body.page footer .inner::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 50%;
    background-color: var(--lightgray);
    min-height: min(1670px, 120vw);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateX(-50%);
}
body.home footer .info {
	place-items: center;
    padding-block: min(120px, 12vw);
}
footer .info .logo {
    max-width: 80vw;
    margin-inline: auto;
}
footer .info .logo img {
    max-height: 70px;
}
footer .info .title {
    margin-block: 0;
}
body.home footer .info .text {
    margin-top: 1em;
}
footer .footer-menu,
footer .copyright {
    font-size: clamp(.875rem, 1.75vw, 1.125rem);
    padding-top: 2em;
}
footer .footer-menu,
body.home footer .copyright {
    text-align: center;
    padding-bottom: 2em;
}
body.home footer .copyright {
    border-top: 1px solid var(--green);
}
body.page footer .copyright {
    padding-top: min(110px, 11vw);
}

.privacy .container {
	width: min(1120px, 100%);
}
.privacy section {
	margin-block: 4em;
}
.privacy .content-wrapper {
	text-align: start;
    line-height: 1.5;
}
.privacy .content-wrapper a {
    border-bottom: 1px solid var(--black);
	word-break: break-all;
}
.privacy .content-wrapper h3 {
	margin-block: 2em .5em;
}

@media screen and (min-width: 576px) {
	#photos {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
	#photos .image:is(.i1, .i3, .i5) {
		grid-row: span 2;
	}
	#photos .image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#contact form {
		max-width: none;
	}
	#contact form .full {
		grid-column: span 2;
	}
	body.home footer .info {
		grid-template-columns: 1fr 1fr;
		column-gap: min(80px, 4vw);
	}
	footer .info .logo {
		grid-column: span 2;
		max-width: 85%;
		margin-inline: inherit;
	}
}

@media screen and (min-width: 768px) {
	#contact form {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: min(70px, 7vw) min(100px, 10vw);
	}
}

@media screen and (min-width: 1024px) {
	body.flyout-menu {
		overflow: auto;
	}
	header .container {
		grid-template-columns: auto 1fr;
	}
	header .burger {
		display: none;
	}
	header nav {
		position: relative;
		display: flex;
		gap: 2vw;
		font-size: clamp(1rem, 1.75vw, 1.25rem);
		line-height: 2.5;
		text-align: inherit;
		height: auto;
		background: none;
		padding: 0 !important;
		opacity: 1;
		visibility: visible;
	}
	header nav .item + .item {
		margin-top: 0;
	}
	body:not(.page) :not(footer) .grid {
		grid-template-columns: 1fr 1fr;
	}
	.order {
		order: -1;
	}
	#hero {
		align-items: end;
	}
	#hero::before {
		right: 60vw;
	}
	#about::before {
		left: calc(50vw + min(var(--narrow), 100%) / 4);
	}
	#about .few-words .title {
		margin-bottom: 0;
	}
	#about .profile .grid {
		grid-template-columns: 1.75fr 1fr;
	}
	#photos {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr 1fr 1fr;
	}
	#photos .image:is(.i1, .i3) {
		grid-row: 1 / 3;
	}
	#photos .image.i2 {
		grid-row: 1;
	}
	#photos .image.i5 {
		grid-row: 2 / 4;
	}
	body.home footer .info {
		grid-template-columns: 1fr .5fr .5fr;
		place-items: inherit;
		align-items: center;
		text-align: inherit;
        place-items: flex-start;
	}
	footer .info .logo {
        margin-top: 3px;
		grid-column: inherit;
		transform: none;
		align-self: center;
	}
	body.home footer .info .text {
		margin-top: 1.5em;
	}
}

@media screen and (min-width: 1200px) {
	header nav {
		gap: min(3em, 3vw);
	}
}

@media screen and (min-width: 1400px) {
	header nav {
		gap: min(3em, 4vw);
	}
}