/*
	Theme Name: Finn's Theme
	Author: FinnCo
	Version: 1.0
	Text Domain: custom-gallery-theme
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

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

:root {
	--color-white: #fff;
	--color-black: #080808;
	--color-gray: rgba(255, 255, 255, .35);
	--font-primary: "Inter", Arial, Helvetica, sans-serif;
	--wp-admin-bar-height: 0px;
	--header-height: 96px;

	/* Portfolio background-gradient palette (default / fallback: green) */
	--grad-c1: rgba(30, 92, 58, .85);
	--grad-c2: rgba(18, 56, 36, .52);
	--grad-c3: rgba(24, 72, 46, .68);
	--grad-c4: rgba(10, 36, 22, .38);
	--grad-c5: rgba(42, 110, 72, .48);
	--grad-bg1: #101c16;
	--grad-bg2: #090f0c;
	--grad-bg3: #020202;
}

/* Register the colors as animatable so body::before can transition between palettes */
@property --grad-c1 { syntax: '<color>'; inherits: true; initial-value: rgba(30, 92, 58, .85); }
@property --grad-c2 { syntax: '<color>'; inherits: true; initial-value: rgba(18, 56, 36, .52); }
@property --grad-c3 { syntax: '<color>'; inherits: true; initial-value: rgba(24, 72, 46, .68); }
@property --grad-c4 { syntax: '<color>'; inherits: true; initial-value: rgba(10, 36, 22, .38); }
@property --grad-c5 { syntax: '<color>'; inherits: true; initial-value: rgba(42, 110, 72, .48); }
@property --grad-bg1 { syntax: '<color>'; inherits: true; initial-value: #101c16; }

/* Palettes per portfolio_slider > portfolio_items > color_options value */
body[data-portfolio-color="blue"] {
	--grad-c1: rgba(30, 74, 150, .85);
	--grad-c2: rgba(18, 46, 96, .52);
	--grad-c3: rgba(24, 64, 130, .68);
	--grad-c4: rgba(10, 28, 62, .38);
	--grad-c5: rgba(42, 96, 180, .48);
	--grad-bg1: #0e1428;
}
body[data-portfolio-color="gold"] {
	--grad-c1: rgba(150, 112, 30, .85);
	--grad-c2: rgba(96, 72, 18, .52);
	--grad-c3: rgba(130, 98, 24, .68);
	--grad-c4: rgba(62, 46, 10, .38);
	--grad-c5: rgba(180, 138, 42, .48);
	--grad-bg1: #241c0e;
}
body[data-portfolio-color="red"] {
	--grad-c1: rgba(150, 36, 30, .85);
	--grad-c2: rgba(96, 22, 18, .52);
	--grad-c3: rgba(130, 30, 24, .68);
	--grad-c4: rgba(62, 14, 10, .38);
	--grad-c5: rgba(180, 50, 42, .48);
	--grad-bg1: #240e0e;
}
body[data-portfolio-color="green"] {
	--grad-c1: rgba(30, 92, 58, .85);
	--grad-c2: rgba(18, 56, 36, .52);
	--grad-c3: rgba(24, 72, 46, .68);
	--grad-c4: rgba(10, 36, 22, .38);
	--grad-c5: rgba(42, 110, 72, .48);
	--grad-bg1: #101c16;
}
body[data-portfolio-color="teal"] {
	--grad-c1: rgba(30, 140, 140, .85);
	--grad-c2: rgba(18, 90, 90, .52);
	--grad-c3: rgba(24, 120, 122, .68);
	--grad-c4: rgba(10, 58, 58, .38);
	--grad-c5: rgba(42, 170, 170, .48);
	--grad-bg1: #0e2424;
}
body[data-portfolio-color="purple"] {
	--grad-c1: rgba(96, 30, 150, .85);
	--grad-c2: rgba(60, 18, 96, .52);
	--grad-c3: rgba(82, 24, 130, .68);
	--grad-c4: rgba(40, 10, 62, .38);
	--grad-c5: rgba(120, 42, 180, .48);
	--grad-bg1: #180e24;
}
body[data-portfolio-color="white"] {
	--grad-c1: rgba(160, 160, 170, .85);
	--grad-c2: rgba(100, 100, 108, .52);
	--grad-c3: rgba(136, 136, 144, .68);
	--grad-c4: rgba(64, 64, 70, .38);
	--grad-c5: rgba(190, 190, 198, .48);
	--grad-bg1: #1a1a1e;
}
body.admin-bar {
	--wp-admin-bar-height: 32px;
}
#site-header {
	top: 0;
	padding-top: calc(28px + var(--wp-admin-bar-height));
}
#ghost-header {
	height: calc(var(--header-height) + var(--wp-admin-bar-height));
}
@media screen and (max-width: 782px) {
	body.admin-bar {
		--wp-admin-bar-height: 46px;
	}
}
@media screen and (max-width: 760px) {
	:root {
		--header-height: 76px;
	}
	#site-header {
		padding-top: calc(22px + var(--wp-admin-bar-height));
	}
}	


html {background: #050505;}
body {
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	margin: 0;
	overflow-x: hidden;
	background: #080808;
	color: var(--color-white);
	font-family: var(--font-primary);
}
body::before {
	position: fixed;
	z-index: -1;
	inset: -60%;
	background:
		radial-gradient(circle at 24% 28%, var(--grad-c1) 0, var(--grad-c2) 22%, transparent 48%),
		radial-gradient(circle at 76% 68%, var(--grad-c3) 0, var(--grad-c4) 26%, transparent 50%),
		radial-gradient(circle at 58% 18%, var(--grad-c5) 0, transparent 36%),
		linear-gradient(135deg, var(--grad-bg1) 0%, var(--grad-bg2) 48%, var(--grad-bg3) 100%);
	content: "";
	transform-origin: center;
	animation: body-gradient-rotate 16s linear infinite;
	transition: --grad-c1 1.2s ease, --grad-c2 1.2s ease, --grad-c3 1.2s ease,
		--grad-c4 1.2s ease, --grad-c5 1.2s ease, --grad-bg1 1.2s ease;
	pointer-events: none;
}
@keyframes body-gradient-rotate {
	from {transform: rotate(0deg) scale(1.05);}
	to {transform: rotate(360deg) scale(1.05);}
}
@media (prefers-reduced-motion: reduce) {
	body::before {animation: none;}
}


#site-header {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	padding-right: 34px;
	padding-bottom: 28px;
	padding-left: 34px;
	padding-top: calc(28px + var(--wp-admin-bar-height));
}
.site-header-inner {display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 auto;}
.site-logo, .site-header-actions {pointer-events: auto;}
.site-header-actions {display: flex; align-items: center; gap: 32px;}
.site-logo {display: inline-flex; align-items: center; color: var(--color-white); text-decoration: none;}
.site-logo-img {display: block; height: clamp(1.75rem, 2.4vw, 2.5rem); width: auto; filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, .45));}
#main-nav ul {display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none;}
#main-nav a {position: relative; display: inline-block; padding: 6px 0; color: var(--color-white); font-size: 1.1rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; text-decoration: none;}
#main-nav a::after {position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform .25s ease;}
#main-nav a:hover::after, #main-nav a:focus-visible::after, #main-nav .current-menu-item > a::after {transform: scaleX(1); transform-origin: left;}
#main-nav a:focus-visible, .site-logo:focus-visible {outline: 2px solid #fff; outline-offset: 6px;}
.btn-contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 26px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: var(--color-white);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.2;
	text-decoration: none;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.btn-contact:hover {background: rgba(255, 255, 255, .18); border-color: #fff; transform: scale(1.035);}
.btn-contact:focus-visible {outline: 2px solid #fff; outline-offset: 3px;}
.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--color-white);
	font-size: 1.2rem;
	text-decoration: none;
	transition: color 180ms ease, transform 180ms ease;
}
.social-link:hover {color: rgba(255, 255, 255, .7); transform: scale(1.12) rotate(-4deg);}
.social-link:focus-visible {outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%;}
@media (max-width: 760px) {
	.site-header-actions {gap: 16px;}
	.btn-contact {padding: 8px 18px; font-size: .9rem;}
	.social-link {width: 34px; height: 34px; font-size: 1.05rem;}
}
@media (max-width: 760px) {
	#site-header {padding: 22px 20px;}
	.site-logo-img {height: 1.7rem;}
	#main-nav ul {gap: 20px;}
	#main-nav a {font-size: .95rem;}
}

.portfolio-heading {width: 100%; margin: 0 0 30px; padding: 0 30px; text-align: center;}
.portfolio-heading h1 {margin: 0; font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 400; line-height: 1.2;}
.portfolio-section {background-color: transparent;position: relative; overflow: hidden; margin-bottom: 40px; padding: 0; background-position: center; background-size: cover;}
.portfolio-slider {position: relative; width: 100%;}
.portfolio-slider .splide__track {overflow: hidden;}
.portfolio-slider .splide__list {align-items: center;}
.portfolio-slider .splide__arrow--prev {left: 200px;}
.portfolio-slider .splide__arrow--next {right: 200px;}
.portfolio-slide {display: flex; align-items: center; justify-content: center; opacity: .45; transition: opacity .4s ease, transform .4s ease;}
.portfolio-slide.is-active {z-index: 2; opacity: 1;}
.portfolio-slide.is-active[data-full] {cursor: zoom-in;}
.portfolio-slide-inner {display: flex; align-items: center; justify-content: center; width: 100%; height: 500px; transform: scale(.78); transition: transform .4s ease;}
.portfolio-slide.is-active .portfolio-slide-inner {transform: scale(1);}
.portfolio-slide img {display: block; width: auto; max-width: 100%; height: auto; max-height: 500px; object-fit: contain;}

.portfolio-lightbox {
	position: fixed;
	z-index: 2000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(0, 0, 0, .88);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.portfolio-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease, visibility 0s linear 0s;
}
.portfolio-lightbox-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	transform: scale(.96);
	transition: transform .3s ease;
}
.portfolio-lightbox.is-open .portfolio-lightbox-img {transform: scale(1);}
.portfolio-lightbox-close {
	position: absolute;
	top: 24px;
	right: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--color-white);
	font-size: 1.2rem;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.portfolio-lightbox-close:hover {background: rgba(255, 255, 255, .2); transform: scale(1.06);}
.portfolio-lightbox-close:focus-visible {outline: 2px solid #fff; outline-offset: 3px;}
body.lightbox-open {overflow: hidden;}

@media screen and (max-width: 760px) {
	.portfolio-lightbox {padding: 20px;}
	.portfolio-lightbox-close {top: 14px; right: 14px; width: 40px; height: 40px;}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-lightbox, .portfolio-lightbox-img, .portfolio-lightbox-close {transition: none;}
}

@media screen and (max-width: 760px) {
	.portfolio-slider {padding-bottom: 25px;}
	.portfolio-slide-inner {height: 400px;}
	.portfolio-slide {transform: scale(.84);}
	.portfolio-slider .splide__arrow--prev {left: 16px;}
	.portfolio-slider .splide__arrow--next {right: 16px;}
}

.portfolio-filters {
	--filter-count: 3;
	--filter-index: 0;
	--glass-light: #fff;
	--glass-dark: #000;
	--glass-color: #b9c8be;
	--glass-reflex-light: .55;
	--glass-reflex-dark: 1.8;
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--filter-count), minmax(0, 1fr));
	width: min(calc(100% - 48px), 980px);
	margin: 38px auto 0;
	padding: 7px;
	border: 0;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--glass-color) 12%, transparent);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 16%), transparent),
		inset 2px 3px 0 -2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 85%), transparent),
		inset -2px -2px 0 -2px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 75%), transparent),
		inset -3px -8px 2px -6px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 55%), transparent),
		inset -1px -1px 5px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
		inset 0 4px 5px -3px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 16%), transparent),
		0 8px 20px rgba(0,0,0,.18),
		0 26px 70px rgba(0,0,0,.3);
	backdrop-filter: blur(18px) saturate(170%);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	isolation: isolate;
}
.portfolio-filters::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(circle at 20% 0%, rgba(255,255,255,.28), transparent 34%),
		radial-gradient(circle at 80% 100%, rgba(28,96,58,.24), transparent 38%);
	content: "";
	pointer-events: none;
}
.portfolio-filters::after {
	position: absolute;
	z-index: 1;
	top: 7px;
	bottom: 7px;
	left: 7px;
	width: calc((100% - 14px) / var(--filter-count));
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--glass-color) 32%, transparent);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 18%), transparent),
		inset 2px 2px 0 -1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 90%), transparent),
		inset -2px -2px 0 -1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 72%), transparent),
		inset -3px -7px 2px -5px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 48%), transparent),
		inset -1px 2px 4px -1px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 18%), transparent),
		inset 0 -5px 2px -3px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
		0 5px 14px rgba(0,0,0,.2),
		0 0 28px rgba(32,110,68,.14);
	content: "";
	transform: translateX(calc(var(--filter-index) * 100%));
	transform-origin: center;
	transition:
		transform 440ms cubic-bezier(.7, 0, .2, 1),
		background-color 400ms cubic-bezier(1, 0, .4, 1),
		box-shadow 400ms cubic-bezier(1, 0, .4, 1);
	pointer-events: none;
}
.portfolio-filters.is-moving::after {animation: liquid-pill 440ms ease;}
.portfolio-filters button {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
	min-height: 60px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba(255,255,255,.65);
	font: inherit;
	font-weight: 600;
	letter-spacing: -.02em;
	cursor: pointer;
	transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease;
}
.portfolio-filters button:hover {color: #fff; transform: scale(1.035);}
.portfolio-filters button.is-active {color: #fff; text-shadow: 0 1px 12px rgba(255,255,255,.3);}
.portfolio-filters button i {flex: 0 0 auto; font-size: 1.15em; opacity: .78; transform: scale(.94); transition: opacity 180ms ease, transform 220ms cubic-bezier(.5, 0, 0, 1);}
.portfolio-filters button span {min-width: 0;}
.portfolio-filters button:hover i {opacity: 1; transform: scale(1.12) rotate(-4deg);}
.portfolio-filters button.is-active i {opacity: 1; transform: scale(1.08);}
.portfolio-filters button:focus-visible {outline: 2px solid #fff; outline-offset: 3px;}

@keyframes liquid-pill {
	0% {scale: 1 1;}
	50% {scale: 1.08 .94;}
	100% {scale: 1 1;}
}

@media screen and (max-width: 760px) {
	.portfolio-filters {grid-template-columns: 1fr; width: calc(100% - 32px); border-radius: 28px;}
	.portfolio-filters::after {
		top: 7px;
		right: 7px;
		bottom: auto;
		left: 7px;
		width: auto;
		height: calc((100% - 14px) / var(--filter-count));
		transform: translateY(calc(var(--filter-index) * 100%));
	}
	.portfolio-filters button {min-height: 54px;}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-filters::after, .portfolio-filters button, .portfolio-filters button i {transition: none; animation: none;}
}

/* ===== Book Now page ===== */

.book-now-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 24px 100px;
}
.book-now-heading {margin: 0 0 32px; text-align: center;}
.book-now-heading h1 {margin: 0 0 8px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; line-height: 1.2;}
.book-now-heading p {margin: 0; color: rgba(255, 255, 255, .7);}

.book-now-carousel {margin-bottom: 32px;}
.book-now-carousel .splide__track {overflow: hidden; border-radius: 16px;}
.book-now-carousel .splide__list {align-items: center;}
.book-now-preview-slide {
	position: relative;
	height: 220px;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
	opacity: .45;
	transform: scale(.85);
	transition: opacity .4s ease, transform .4s ease;
}
.book-now-preview-slide.is-active {opacity: 1; transform: scale(1); z-index: 2;}
.book-now-preview-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
.book-now-preview-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	color: var(--color-white);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 180ms ease;
}
.book-now-preview-remove:hover {background: rgba(0, 0, 0, .85);}
.book-now-preview-remove:focus-visible {outline: 2px solid #fff; outline-offset: 2px;}
.book-now-preview-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 220px;
	border: 1px dashed rgba(255, 255, 255, .25);
	border-radius: 12px;
	color: rgba(255, 255, 255, .5);
	font-size: .9rem;
	text-align: center;
}
.book-now-preview-empty p {margin: 0; padding: 0 20px;}

.book-now-notice {padding: 14px 18px; margin-bottom: 24px; border-radius: 10px; font-size: .9rem;}
.book-now-notice--success {background: rgba(60, 160, 90, .18); border: 1px solid rgba(120, 220, 150, .4);}
.book-now-notice--error {background: rgba(200, 60, 60, .18); border: 1px solid rgba(240, 120, 120, .4);}
.book-now-notice--error ul {margin: 0; padding-left: 18px;}

.book-now-form {display: flex; flex-direction: column; gap: 20px;}
.book-now-field {display: flex; flex-direction: column; gap: 8px;}
.book-now-field label {font-size: .95rem; font-weight: 600; letter-spacing: -.01em;}
.book-now-field input[type="email"],
.book-now-field input[type="tel"],
.book-now-field textarea {
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	color: var(--color-white);
	font: inherit;
	resize: vertical;
}
.book-now-field input[type="email"]:focus-visible,
.book-now-field input[type="tel"]:focus-visible,
.book-now-field textarea:focus-visible {outline: 2px solid #fff; outline-offset: 2px;}
.book-now-field input[type="file"] {color: rgba(255, 255, 255, .85); font: inherit;}
.book-now-field-hint {margin: 0; font-size: .8rem; color: rgba(255, 255, 255, .5);}

.book-now-submit {align-self: flex-start; border: 1px solid rgba(255, 255, 255, .5); font: inherit; cursor: pointer;}

@media screen and (max-width: 760px) {
	.book-now-page {padding: 32px 20px 80px;}
	.book-now-preview-slide, .book-now-preview-empty {height: 170px;}
}

/* ===== Contact section (Gravity Forms) ===== */

.contact-section {padding: 80px 24px; background-color: transparent;}
.contact-section-inner {max-width: 640px; margin: 0 auto; text-align: center;}
.contact-section-inner h2 {margin: 0 0 16px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; line-height: 1.2;}
.contact-intro {margin: 0 0 32px; color: rgba(255, 255, 255, .7); line-height: 1.6;}
.contact-intro p:last-child {margin-bottom: 0;}
.contact-form {text-align: left;}

/* Gravity Forms (Orbital theme) overrides — liquid glass look, matching the
   same recipe used by .portfolio-filters / .btn-contact: a color-mix
   background, backdrop blur+saturate, and layered inset shadows that fake a
   glossy highlight/reflection, rather than a flat translucent box.
   !important is used deliberately: Orbital ships its own fairly specific
   CSS driven by --gf-* custom properties, so plain specificity isn't
   reliable for guaranteeing these win. */
.contact-form .gform_wrapper.gform-theme {
	--glass-light: #fff;
	--glass-dark: #000;
	--glass-color: #b9c8be;
	--glass-reflex-light: .55;
	--glass-reflex-dark: 1.8;
	color: var(--color-white);
}
.contact-form .gform_wrapper.gform-theme .gform_body {max-width: 100%;}
.contact-form .gform_wrapper.gform-theme .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}
.contact-form .gform_wrapper.gform-theme .gfield {grid-column: 1 / -1;}
.contact-form .gform_wrapper.gform-theme .gfield--width-half {grid-column: span 1;}
.contact-form .gform_wrapper.gform-theme .gfield_label,
.contact-form .gform_wrapper.gform-theme .gform-field-label {
	color: var(--color-white) !important;
	font-size: .95rem !important;
	font-weight: 600 !important;
	letter-spacing: -.01em;
	margin-bottom: 10px !important;
}
.contact-form .gform_wrapper.gform-theme .gfield_description,
.contact-form .gform_wrapper.gform-theme .gform_description {color: rgba(255, 255, 255, .6) !important;}

.contact-form .gform_wrapper.gform-theme input[type="text"],
.contact-form .gform_wrapper.gform-theme input[type="email"],
.contact-form .gform_wrapper.gform-theme input[type="tel"],
.contact-form .gform_wrapper.gform-theme input[type="url"],
.contact-form .gform_wrapper.gform-theme input[type="number"],
.contact-form .gform_wrapper.gform-theme select,
.contact-form .gform_wrapper.gform-theme .textarea {
	padding: 14px 18px !important;
	border: 0 !important;
	border-radius: 14px !important;
	background-color: color-mix(in srgb, var(--glass-color) 12%, transparent) !important;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 16%), transparent),
		inset 1px 2px 0 -1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 60%), transparent),
		inset -1px -1px 0 -1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 42%), transparent),
		inset -1px -4px 3px -3px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
		0 4px 12px rgba(0, 0, 0, .14) !important;
	backdrop-filter: blur(14px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
	color: var(--color-white) !important;
	font: inherit !important;
	transition: box-shadow 220ms ease, background-color 220ms ease;
}
.contact-form .gform_wrapper.gform-theme input::placeholder,
.contact-form .gform_wrapper.gform-theme textarea::placeholder {color: rgba(255, 255, 255, .4) !important;}
.contact-form .gform_wrapper.gform-theme input:focus-visible,
.contact-form .gform_wrapper.gform-theme select:focus-visible,
.contact-form .gform_wrapper.gform-theme textarea:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px;
}

/* File upload field */
.contact-form .gform_wrapper.gform-theme .gform_drop_area {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 28px 24px !important;
	border: 1px dashed color-mix(in srgb, var(--glass-light) 30%, transparent) !important;
	border-radius: 16px !important;
	background-color: color-mix(in srgb, var(--glass-color) 8%, transparent) !important;
	backdrop-filter: blur(14px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
}
.contact-form .gform_wrapper.gform-theme .gform_drop_instructions {color: rgba(255, 255, 255, .6) !important;}
.contact-form .gform_wrapper.gform-theme .gform_button_select_files {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 22px !important;
	border: 1px solid rgba(255, 255, 255, .5) !important;
	border-radius: 999px !important;
	background-color: color-mix(in srgb, var(--glass-color) 20%, transparent) !important;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 18%), transparent),
		inset 2px 2px 0 -1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 85%), transparent),
		inset -2px -2px 0 -1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 68%), transparent),
		inset -1px 2px 4px -1px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 16%), transparent),
		0 4px 10px rgba(0, 0, 0, .18) !important;
	color: var(--color-white) !important;
	font: inherit !important;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 220ms ease, box-shadow 220ms ease, transform 180ms ease;
}
.contact-form .gform_wrapper.gform-theme .gform_button_select_files:hover {
	background-color: color-mix(in srgb, var(--glass-color) 32%, transparent) !important;
	transform: scale(1.035);
}
.contact-form .gform_wrapper.gform-theme .gform_fileupload_rules {color: rgba(255, 255, 255, .5) !important; font-size: .8rem;}

/* Submit button */
.contact-form .gform_wrapper.gform-theme .gform_footer,
.contact-form .gform_wrapper.gform-theme .gform-footer {margin-top: 8px !important; padding: 0 !important;}
.contact-form .gform_wrapper.gform-theme .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 30px !important;
	border: 1px solid rgba(255, 255, 255, .5) !important;
	border-radius: 999px !important;
	background-color: color-mix(in srgb, var(--glass-color) 20%, transparent) !important;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 18%), transparent),
		inset 2px 2px 0 -1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 90%), transparent),
		inset -2px -2px 0 -1px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 72%), transparent),
		inset -3px -7px 2px -5px color-mix(in srgb, var(--glass-light) calc(var(--glass-reflex-light) * 48%), transparent),
		inset -1px 2px 4px -1px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 18%), transparent),
		inset 0 -5px 2px -3px color-mix(in srgb, var(--glass-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
		0 5px 14px rgba(0, 0, 0, .2),
		0 0 28px rgba(32, 110, 68, .14) !important;
	backdrop-filter: blur(18px) saturate(170%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(170%) !important;
	color: var(--color-white) !important;
	font: inherit !important;
	font-weight: 600;
	letter-spacing: -.02em;
	cursor: pointer;
	transition: background-color 220ms ease, transform 180ms ease;
}
.contact-form .gform_wrapper.gform-theme .gform_button:hover {
	background-color: color-mix(in srgb, var(--glass-color) 32%, transparent) !important;
	transform: scale(1.035);
}
.contact-form .gform_wrapper.gform-theme .gform_button:focus-visible {outline: 2px solid #fff !important; outline-offset: 3px;}

/* Validation & confirmation messages */
.contact-form .gform_wrapper.gform-theme .validation_error,
.contact-form .gform_wrapper.gform-theme .gfield_validation_message,
.contact-form .gform_wrapper.gform-theme .gfield_description.validation_message {
	color: #ff9a9a !important;
	background: rgba(200, 60, 60, .18) !important;
	border: 1px solid rgba(240, 120, 120, .4) !important;
	border-radius: 10px !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
}
.contact-form .gform_wrapper.gform-theme .gform_confirmation_message {
	padding: 14px 18px;
	border-radius: 10px;
	background: rgba(60, 160, 90, .18);
	border: 1px solid rgba(120, 220, 150, .4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--color-white);
}

@media screen and (max-width: 760px) {
	.contact-form .gform_wrapper.gform-theme .gform_fields {grid-template-columns: 1fr;}
	.contact-form .gform_wrapper.gform-theme .gfield--width-half {grid-column: 1 / -1;}
}

@media screen and (max-width: 760px) {
	.contact-section {padding: 56px 20px;}
}


/* ===== Generic static page (page.php) ===== */

.page-content {max-width: 720px; margin: 0 auto; padding: 40px 24px 100px;}
.page-header {margin: 0 0 24px; text-align: center;}
.page-header h1 {margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; line-height: 1.2;}
.page-body {line-height: 1.7; color: rgba(255, 255, 255, .85);}
.page-body p {margin: 0 0 1.2em;}
.page-body a {color: var(--color-white);}
.page-body img {max-width: 100%; height: auto; border-radius: 12px;}

@media screen and (max-width: 760px) {
	.page-content {padding: 32px 20px 80px;}
}