/* Self-hosted fonts (latin subset): no third-party request, no render-blocking stylesheet. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); }

:root {
	--t: 1;                     /* type/spacing scale; raised on very wide screens (see the ultra-wide block at the end) */
	--gtfc-wave-h: 110px;       /* height of the rolling hero wave, and of the top edge of the About panel */
	--gtfc-div-h: 90px;         /* height of the static wave dividers */
	--gtfc-about-left: 0px;     /* About photo panel: left edge and width (narrowed on very wide screens) */
	--gtfc-about-w: 50%;
	--gtfc-wave-w: max(200vw, 2200px); /* width of one rolling wave layer (shared by the hero divider and the About photo mask) */
	--gtfc-deep: #072934;
	--gtfc-teal: #0c3a47;
	--gtfc-teal-2: #114a59;
	--gtfc-cyan: #5fd0e8;
	--gtfc-cyan-dark: #1aa8c7;
	--gtfc-orange: #f7941d;
	--gtfc-white: #ffffff;
	--gtfc-mist: #bcd6dc;
	--gtfc-ink: #0b2733;
	--gtfc-line: rgba(255, 255, 255, 0.16);
}

body {
	background: var(--gtfc-teal);
	color: var(--gtfc-white);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	overflow-x: hidden;
}

/* Scroll reveal: JS adds .is-visible when an element enters the viewport. */
.js .gtfc-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.js .gtfc-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js .gtfc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Subtle speckled texture used across all dark sections for depth,
   instead of glow blobs — a faint tiling dot pattern, applied as a
   pseudo-element overlay so it never fights a section's own background
   (gradients, band colour, etc). */
.gtfc-section,
.gtfc-hero {
	position: relative;
}
.gtfc-section::before,
.gtfc-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 140px 140px, 190px 190px;
	background-position: 0 0, 60px 40px;
	pointer-events: none;
	z-index: 0;
}

/* Wave dividers: sit at the bottom edge of a section, filled with the
   colour of the section that follows, so bands meet on a curve instead
   of a flat horizontal line. */
.gtfc-divider {
	pointer-events: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: var(--gtfc-div-h);
	display: block;
	z-index: 1;
}

/* Rolling variant: each layer is at least twice the section width and slides
   left by exactly half of itself (a whole number of wave periods), so the end
   frame equals the start frame and it loops cleanly. */
.gtfc-divider--rolling {
	height: var(--gtfc-wave-h);
	overflow: hidden;
	pointer-events: none;
}
/* The artwork is 2400 x 100 units in a 110px-tall box, so its natural width is
   about 2640px. Never go much narrower than that or the waves get squashed on
   phones: width is 200% of the section on wide screens, at least 2200px on
   small ones. The loop still moves by exactly half the layer's own width. */
.gtfc-roll {
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--gtfc-wave-w);
	height: 100%;
	will-change: transform;
	animation: gtfc-roll 40s linear infinite;
}
.gtfc-roll--front {
	animation-duration: 28s;
}
@keyframes gtfc-roll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.gtfc-roll {
		animation: none;
	}
}

.gtfc-onepage h1,
.gtfc-onepage h2,
.gtfc-onepage h3 {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	margin: 0 0 12px;
}

.gtfc-onepage section {
	scroll-margin-top: 92px;
}

.gtfc-center {
	text-align: center;
}

.gtfc-kicker {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 13px;
	font-weight: 600;
	color: var(--gtfc-cyan);
	margin: 0 0 12px;
}
.gtfc-kicker--center {
	text-align: center;
}

.gtfc-placeholder-note {
	font-size: 13px;
	color: #ffdca6;
	background: rgba(247, 148, 29, 0.14);
	border: 1px dashed rgba(247, 148, 29, 0.5);
	display: inline-block;
	padding: 6px 12px;
	border-radius: 4px;
	margin-bottom: 24px;
}

/* Buttons */
.gtfc-btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gtfc-btn:hover {
	transform: translateY(-2px);
}
.gtfc-btn--primary {
	background: var(--gtfc-cyan);
	color: var(--gtfc-ink);
	box-shadow: 0 4px 18px rgba(95, 208, 232, 0.25);
}
.gtfc-btn--primary:hover {
	background: var(--gtfc-cyan-dark);
	box-shadow: 0 8px 26px rgba(95, 208, 232, 0.4);
}
.gtfc-btn--ghost {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--gtfc-white);
}
.gtfc-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}
.gtfc-btn--outline {
	border-color: var(--gtfc-cyan);
	color: var(--gtfc-cyan);
	padding: 10px 22px;
}
.gtfc-btn--outline:hover {
	background: var(--gtfc-cyan);
	color: var(--gtfc-ink);
}

/* Nav */
.gtfc-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}
.admin-bar .gtfc-nav {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .gtfc-nav {
		top: 46px;
	}
}
.gtfc-nav.is-scrolled {
	background: var(--gtfc-deep);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}
.gtfc-nav__inner {
	--nav-gap: 28px;
	--nav-logo-w: 132px;
	max-width: 1248px; /* 1200px content + 24px padding each side, to line up with the hero */
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: var(--nav-gap);
}
/* The big hero logo does the job at the top of the page, so the nav logo
   only appears once the nav goes sticky. Until then its slot is collapsed
   to zero width (and its flex gap cancelled) so the links sit flush left;
   when it slides open the links glide to the centre. Height is unchanged
   so the bar doesn't resize, and visibility keeps it out of the tab order
   while hidden. */
.gtfc-nav__brand {
	display: block;
	flex-shrink: 0;
	width: 0;
	margin-right: calc(var(--nav-gap) * -1);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: width 0.35s ease, margin-right 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s;
}
.gtfc-nav.is-scrolled .gtfc-nav__brand {
	width: var(--nav-logo-w);
	margin-right: 0;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
	.gtfc-nav__brand,
	.gtfc-nav__menu {
		transition: none !important;
	}
}

/* Logo: a transparent wordmark with a thick white outline, so it sits
   directly on the teal. The artwork is 795px wide natively, so keep
   rendered widths at or below ~400px to stay sharp on retina screens. */
.gtfc-logo {
	display: block;
	aspect-ratio: 826 / 347;
	height: auto;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.gtfc-logo--nav {
	width: var(--nav-logo-w);
	max-width: none;
	filter: none;
}
.gtfc-logo--hero {
	width: min(380px, 78vw);
	margin: 0 0 20px -14px;
	filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.4));
	animation: gtfc-float 6s ease-in-out infinite;
}
.gtfc-logo--footer {
	width: 200px;
	margin: 0 auto 20px;
}
.gtfc-nav__menu-wrap {
	flex: 1 1 0;
	min-width: 0;
}
/* Desktop: links start flush left; once the nav is sticky (logo showing)
   they centre. Centring uses margin-left:50% + translateX(-50%) rather than
   auto margins so the move can be animated. */
.gtfc-nav__menu {
	list-style: none;
	display: flex;
	gap: 26px;
	width: max-content;
	margin: 0;
	padding: 0;
	transition: margin-left 0.35s ease, transform 0.35s ease;
}
@media (min-width: 901px) {
	.gtfc-nav.is-scrolled .gtfc-nav__menu {
		margin-left: 50%;
		transform: translateX(-50%);
	}
}
.gtfc-nav__menu a {
	position: relative;
	color: var(--gtfc-white);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	padding-bottom: 4px;
}
.gtfc-nav__menu a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--gtfc-cyan);
	transition: right 0.25s ease;
}
.gtfc-nav__menu a:hover {
	color: var(--gtfc-cyan);
}
.gtfc-nav__menu a:hover::after {
	right: 0;
}
.gtfc-nav__menu-phone {
	display: none;
}
.gtfc-nav__social {
	display: flex;
	gap: 10px;
}
/* Round social buttons: solid brand colour, 3px white ring, white icon.
   Shared by the nav, footer and Coming Soon page. */
.gtfc-social {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: 50%;
	border: 3px solid #fff;
	background: var(--social-bg, var(--gtfc-teal-2));
	color: #fff;
	flex-shrink: 0;
	transition: transform 0.2s ease, filter 0.2s ease;
}
.gtfc-social:hover {
	transform: translateY(-2px);
	filter: brightness(1.12);
}
.gtfc-social--facebook { --social-bg: #1877f2; }
.gtfc-social--instagram { --social-bg: #e1306c; }
.gtfc-social--tripadvisor { --social-bg: #00af87; }
.gtfc-nav__social a {
	width: 36px;
	height: 36px;
}
.gtfc-nav__social svg {
	width: 16px;
	height: 16px;
}
.gtfc-nav__cta {
	box-sizing: border-box;
	background: var(--gtfc-teal);
	color: #fff;
	border: 3px solid #fff;
	padding: 7px 20px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s ease, background 0.2s ease;
}
.gtfc-nav__cta:hover {
	background: var(--gtfc-teal-2);
	transform: translateY(-2px);
}
.gtfc-nav__toggle {
	display: none;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--gtfc-white);
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

/* Hero */
.gtfc-hero {
	position: relative;
	background: var(--gtfc-deep);
	isolation: isolate;
	/* Generous bottom padding: the wave divider takes the last 110px, and the extra
	   space beneath the buttons lets more of the background photo show. */
	padding: 130px 24px calc(var(--gtfc-wave-h) + 110px);
	overflow: hidden;
}
/* Hero photo layer. The image is oversized so it can move without showing its
   edges. Two motions are layered:
   - .gtfc-hero__float loops a slow pitch / roll / heave, like a boat riding
     calm water (pure CSS, always on).
   - the img tilts and shifts a touch with the pointer (--mx / --my, -1..1,
     set by front-page.js from the mouse position anywhere in the window).
   Without JS or a mouse the pointer effect simply rests at centre. */
.gtfc-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.gtfc-hero__float {
	position: absolute;
	inset: 0;
	perspective: 900px;
	transform-origin: 50% 60%;
	animation: gtfc-hero-float 11s ease-in-out infinite;
	will-change: transform;
}
.gtfc-hero__bg.is-paused .gtfc-hero__float {
	animation-play-state: paused;
}
.gtfc-hero__float img {
	position: absolute;
	top: -5%;
	left: -5%;
	width: 110%;
	height: 110%;
	max-width: none;
	object-fit: cover;
	object-position: center 38%;
	transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -8px), 0) rotateY(calc(var(--mx, 0) * 1.2deg)) rotateX(calc(var(--my, 0) * -0.9deg)) scale(1.02);
	will-change: transform;
}
/* Roll (rotateZ) and pitch (rotateX) run a quarter-cycle apart so the motion
   traces a soft ellipse rather than a mechanical see-saw; heave lifts and drops
   the boat twice per loop. The end frame matches the start for a seamless loop. */
@keyframes gtfc-hero-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(0deg);
	}
	25% {
		transform: translate3d(0, 5px, 0) rotateZ(0.7deg) rotateX(0.35deg);
	}
	50% {
		transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(-0.45deg);
	}
	75% {
		transform: translate3d(0, 5px, 0) rotateZ(-0.7deg) rotateX(0.35deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.gtfc-hero__float {
		animation: none;
	}
}

.gtfc-skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 200;
	padding: 10px 16px;
	background: #fff;
	color: var(--gtfc-ink);
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: top 0.15s ease;
}
.gtfc-skip:focus {
	top: 12px;
}

/* The photo is pale pastel, so tint it teal: darker behind the text on the
   left, darker at the top for the nav, and fading into the page colour
   at the bottom where the wave divider meets it. */
.gtfc-hero::before {
	background-image:
		linear-gradient(180deg, rgba(7, 41, 52, 0.6) 0, rgba(7, 41, 52, 0) 150px),
		linear-gradient(90deg, rgba(7, 41, 52, 0.7) 0%, rgba(7, 41, 52, 0.42) 45%, rgba(7, 41, 52, 0.02) 100%),
		linear-gradient(180deg, rgba(12, 58, 71, 0) 62%, rgba(12, 58, 71, 0.8) 100%);
	background-size: 100% 100%;
	background-position: 0 0;
}
.gtfc-hero__grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.gtfc-hero h1 {
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1.15;
	display: flex;
	flex-direction: column;
}
.gtfc-hero h1 .is-light {
	font-weight: 400;
	color: var(--gtfc-mist);
	font-size: 0.6em;
}
.gtfc-hero h1 .is-bold {
	font-weight: 700;
	color: var(--gtfc-white);
}
.gtfc-hero h1,
.gtfc-hero__lede {
	text-shadow: 0 1px 14px rgba(7, 41, 52, 0.55);
}
.gtfc-hero__lede {
	color: var(--gtfc-mist);
	font-size: 17px;
	max-width: 46ch;
	margin: 18px 0 32px;
}
.gtfc-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.gtfc-hero__media {
	position: relative;
}
.gtfc-hero__media img {
	height: auto;
	width: 100%;
	border-radius: 16px;
	display: block;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
	transition: transform 0.6s ease;
}
.gtfc-hero__media:hover img {
	transform: scale(1.02);
}
@keyframes gtfc-float {
	0%, 100% { transform: translateY(0) rotate(-1.5deg); }
	50% { transform: translateY(-7px) rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
	.gtfc-logo--hero {
		animation: none;
	}
}

/* Sections */
.gtfc-section {
	padding: 80px 24px;
	position: relative;
}
.gtfc-section--band {
	background: var(--gtfc-teal-2);
}
.gtfc-section--deep {
	background: var(--gtfc-deep);
}
.gtfc-section__inner {
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.gtfc-section h2 {
	font-size: clamp(26px, 3.6vw, 34px);
}

/* About: the photo set is a full-height panel from the left edge of the screen
   to the centre. Its top edge is cut by the same rolling wave as the hero's
   divider (a mask that animates in step with it); its bottom edge is covered by
   the static wave divider drawn in front. The copy sits in the right half. */
.gtfc-about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	/* This wrapper spans the page above the photo panel, so let the mouse and
	   fingers fall through it to the photos; only the copy stays interactive. */
	pointer-events: none;
}
/* Wide desktops get a taller About section (about 20% at 1400px+): the padding grows
   from 80px at 1000px wide to 150px, and the photo panel follows the section's height.
   Phones and tablets (<=900px) keep the normal padding. */
@media (min-width: 901px) {
	.gtfc-section--about {
		padding-top: clamp(80px, calc(80px + (100vw - 1000px) * 0.15), 150px);
		padding-bottom: clamp(80px, calc(80px + (100vw - 1000px) * 0.15), 150px);
	}
}
.gtfc-about__copy {
	pointer-events: auto;
	grid-column: 2;
	justify-self: center;
	max-width: 560px;
	padding: 0 8px 0 44px; /* clear gap from the photo's edge, even at narrow desktop widths */
}
/* Crossfading photo set: four stacked images, each visible for 5s then
   fading (1s) into the next while the next fades in. Pure CSS, so it works
   without JS; each slide is offset with a negative delay so the loop starts
   on the slide in --cur (0 by default) and never pops.
   With a mouse or a finger, front-page.js adds .is-scrubbing: the auto loop
   stops and the pointer's horizontal position picks the slide (.is-active). */
.gtfc-about__slides {
	position: absolute;
	left: var(--gtfc-about-left);
	top: calc(var(--gtfc-wave-h) * -1); /* reach up under the hero's wave divider */
	bottom: 0;
	width: var(--gtfc-about-w);
	z-index: 0;
	overflow: hidden;
	background: var(--gtfc-deep);
	touch-action: pan-y; /* sideways drags scrub the photos; vertical swipes still scroll the page */
	-webkit-mask-image: var(--gtfc-wave-mask), linear-gradient(#000, #000);
	mask-image: var(--gtfc-wave-mask), linear-gradient(#000, #000);
	-webkit-mask-repeat: repeat-x, no-repeat;
	mask-repeat: repeat-x, no-repeat;
	-webkit-mask-size: var(--gtfc-wave-w) var(--gtfc-wave-h), 100% calc(100% - var(--gtfc-wave-h));
	mask-size: var(--gtfc-wave-w) var(--gtfc-wave-h), 100% calc(100% - var(--gtfc-wave-h));
	-webkit-mask-position: calc(var(--gtfc-about-left) * -1) 0, 0 var(--gtfc-wave-h);
	mask-position: calc(var(--gtfc-about-left) * -1) 0, 0 var(--gtfc-wave-h);
	animation: gtfc-mask-roll 28s linear infinite; /* same duration as the hero's front wave */
}
/* Soft right edge: the photos dissolve into the section colour instead of ending
   on a hard vertical line. It is part of the masked panel, so its top still follows
   the wave. Ease-out stops keep the fade smooth rather than a visible ramp. */
.gtfc-about__slides:focus-visible {
	outline: 3px solid var(--gtfc-cyan);
	outline-offset: -6px;
}
.gtfc-about__slides::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 28%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(12, 58, 71, 0) 0%,
		rgba(12, 58, 71, 0.18) 25%,
		rgba(12, 58, 71, 0.5) 55%,
		rgba(12, 58, 71, 0.85) 82%,
		rgb(12, 58, 71) 100%
	);
}
@keyframes gtfc-mask-roll {
	from {
		-webkit-mask-position: calc(var(--gtfc-about-left) * -1) 0, 0 var(--gtfc-wave-h);
		mask-position: calc(var(--gtfc-about-left) * -1) 0, 0 var(--gtfc-wave-h);
	}
	to {
		-webkit-mask-position: calc(var(--gtfc-about-left) * -1 + var(--gtfc-wave-w) / -2) 0, 0 var(--gtfc-wave-h);
		mask-position: calc(var(--gtfc-about-left) * -1 + var(--gtfc-wave-w) / -2) 0, 0 var(--gtfc-wave-h);
	}
}
.gtfc-about__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	display: block;
	opacity: 0;
	animation: gtfc-slide calc(var(--n, 4) * 6s) linear infinite;
	animation-delay: calc((var(--i, 0) - var(--cur, 0)) * 6s - var(--n, 4) * 6s);
}
.gtfc-about__slide:first-child {
	opacity: 1;
}
.gtfc-about__slides[data-count="1"] .gtfc-about__slide {
	animation: none;
}
.gtfc-about__slides.is-paused .gtfc-about__slide,
.gtfc-about__slides.is-paused .gtfc-about__dot::after {
	animation-play-state: paused;
}
.gtfc-about__slides.is-scrubbing .gtfc-about__slide,
.gtfc-about__slides.is-scrubbing .gtfc-about__dot::after {
	animation: none;
	opacity: 0;
	transition: opacity 0.35s ease;
}
.gtfc-about__slides.is-scrubbing .gtfc-about__slide.is-active,
.gtfc-about__slides.is-scrubbing .gtfc-about__dot.is-active::after {
	opacity: 1;
}
/* @keyframes gtfc-slide is generated in front-page.php (gtfc_about_keyframes_css) because its
   percentages depend on how many photos are chosen. */

/* Position indicator: one pill per photo, lit in step with the slides. */
.gtfc-about__dots {
	z-index: 2;
	position: absolute;
	left: 50%;
	bottom: calc(var(--gtfc-div-h) + 30px); /* above the bottom wave divider */
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 999px;
	background: rgba(4, 30, 38, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.gtfc-about__dot {
	position: relative;
	width: 22px;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.35);
	overflow: hidden;
}
.gtfc-about__dot::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	animation: gtfc-slide calc(var(--n, 4) * 6s) linear infinite;
	animation-delay: calc((var(--i, 0) - var(--cur, 0)) * 6s - var(--n, 4) * 6s);
}
.gtfc-about__dot:first-child::after {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.gtfc-about__slides,
	.gtfc-about__slide,
	.gtfc-about__dot::after {
		animation: none;
		transition: none !important;
	}
}
.gtfc-about__copy p {
	color: var(--gtfc-mist);
	line-height: 1.7;
}

/* Charters list */
.gtfc-charter-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 40px;
}
.gtfc-charter-list .gtfc-charter-row:nth-child(2) { transition-delay: 0.1s; }
.gtfc-charter-list .gtfc-charter-row:nth-child(3) { transition-delay: 0.2s; }
.gtfc-charter-list .gtfc-charter-row:nth-child(4) { transition-delay: 0.3s; }
.gtfc-charter-row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 24px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--gtfc-line);
	border-radius: 14px;
	padding: 22px 28px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.2);
	transition: opacity 0.6s ease, transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.gtfc-charter-row:hover {
	transform: translateY(-4px);
	border-color: var(--gtfc-cyan);
	background: rgba(95, 208, 232, 0.06);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 34px rgba(0, 0, 0, 0.3);
}
.gtfc-charter-icon {
	transition: transform 0.3s ease;
}
.gtfc-charter-row:hover .gtfc-charter-icon {
	transform: scale(1.12) rotate(-4deg);
}
.gtfc-charter-row.is-featured {
	border-color: var(--gtfc-cyan);
	background: rgba(95, 208, 232, 0.08);
}
.gtfc-charter-icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	color: var(--gtfc-cyan);
}
.gtfc-charter-icon svg {
	width: 100%;
	height: 100%;
}
.gtfc-icon-mask {
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask-image: var(--gtfc-icon-src);
	mask-image: var(--gtfc-icon-src);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.gtfc-charter-row__body h3 {
	font-size: 18px;
	margin-bottom: 4px;
}
.gtfc-charter-row__body h3 em {
	font-style: normal;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gtfc-orange);
	margin-left: 10px;
	vertical-align: middle;
}
.gtfc-charter-row__body p {
	color: var(--gtfc-mist);
	margin: 0;
	font-size: 15px;
}
/* Price: a proper price tag. Big figure with a small cyan dollar sign, "per person"
   underneath, the kids' price in its own pill, and a fine divider from the description. */
.gtfc-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 7px;
	box-sizing: border-box;
	min-width: 176px; /* same width on every row so the dividers line up */
	padding-left: 28px;
	border-left: 1px solid var(--gtfc-line);
	text-align: right;
	white-space: nowrap;
}
.gtfc-price__amount {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: #ffffff;
}
.gtfc-price__currency {
	margin-right: 2px;
	font-size: 0.5em;
	font-weight: 600;
	vertical-align: 0.85em;
	color: var(--gtfc-cyan);
}
.gtfc-price__unit {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gtfc-mist);
}
.gtfc-price__kids {
	margin-top: 4px;
	padding: 4px 11px;
	border: 1px solid rgba(95, 208, 232, 0.45);
	border-radius: 999px;
	background: rgba(95, 208, 232, 0.1);
	font-size: 12px;
	color: var(--gtfc-mist);
}
.gtfc-price__kids strong {
	font-weight: 700;
	color: var(--gtfc-cyan);
}
.gtfc-price__contact {
	font-weight: 600;
	color: var(--gtfc-cyan);
}
/* Stacked card layouts (tablet and phone): figure and details sit side by side under the text. */
@media (max-width: 900px) {
	.gtfc-price {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 6px 14px;
		min-width: 0;
		padding-left: 0;
		border-left: 0;
		text-align: left;
		white-space: normal;
	}
	.gtfc-price__kids {
		margin-top: 0;
	}
}
/* What's included and gift vouchers: two panels, big enough that they are not missed. */
.gtfc-perks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 44px;
}
.gtfc-perk {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 28px 30px;
	border: 1px solid rgba(95, 208, 232, 0.35);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.05);
}
.gtfc-perk--gift {
	border-color: rgba(247, 148, 29, 0.6);
	background: rgba(247, 148, 29, 0.1);
}
.gtfc-perk__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(95, 208, 232, 0.16);
	color: var(--gtfc-cyan);
}
.gtfc-perk--gift .gtfc-perk__icon {
	background: rgba(247, 148, 29, 0.2);
	color: var(--gtfc-orange);
}
.gtfc-perk__icon svg {
	width: 30px;
	height: 30px;
}
.gtfc-perk__title {
	margin: 2px 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: #ffffff;
}
.gtfc-perk__text {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.6;
	color: #ffffff;
}
@media (max-width: 900px) {
	.gtfc-perks {
		grid-template-columns: 1fr;
		margin-top: 32px;
	}
	.gtfc-perk {
		padding: 22px 20px;
		gap: 16px;
	}
	.gtfc-perk__icon {
		width: 48px;
		height: 48px;
	}
	.gtfc-perk__icon svg {
		width: 26px;
		height: 26px;
	}
}
@media (max-width: 480px) {
	.gtfc-perk {
		padding: 18px 16px;
		gap: 12px;
	}
	.gtfc-perk__icon {
		width: 40px;
		height: 40px;
	}
	.gtfc-perk__icon svg {
		width: 22px;
		height: 22px;
	}
	.gtfc-perk__title {
		font-size: 18px;
	}
	.gtfc-perk__text {
		font-size: 16px;
	}
}

/* FAQ: native <details> accordion, one card per question. */
.gtfc-faq__list {
	max-width: 820px;
	margin: 40px auto 0;
}
.gtfc-faq__item {
	margin-bottom: 12px;
	border: 1px solid var(--gtfc-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.gtfc-faq__item[open] {
	border-color: rgba(95, 208, 232, 0.45);
	background: rgba(255, 255, 255, 0.08);
}
.gtfc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 22px;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 17.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #ffffff;
	cursor: pointer;
	list-style: none;
}
.gtfc-faq__q::-webkit-details-marker {
	display: none;
}
.gtfc-faq__q::after {
	content: '';
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin: 0 4px 4px 0;
	border-right: 2.5px solid var(--gtfc-cyan);
	border-bottom: 2.5px solid var(--gtfc-cyan);
	transform: rotate(45deg);
	transition: transform 0.25s ease, margin 0.25s ease;
}
.gtfc-faq__item[open] > .gtfc-faq__q::after {
	margin: 4px 4px 0 0;
	transform: rotate(-135deg);
}
.gtfc-faq__q:hover {
	color: var(--gtfc-cyan);
}
.gtfc-faq__q:focus-visible {
	outline: 2px solid var(--gtfc-cyan);
	outline-offset: 2px;
	border-radius: 14px;
}
.gtfc-faq__a {
	padding: 0 22px 20px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--gtfc-mist);
}
.gtfc-faq__a > :first-child { margin-top: 0; }
.gtfc-faq__a > :last-child { margin-bottom: 0; }
.gtfc-faq__a a {
	color: var(--gtfc-cyan);
}
.gtfc-faq__more {
	margin-top: 28px;
	color: var(--gtfc-mist);
}
.gtfc-faq__more a {
	color: var(--gtfc-cyan);
	font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
	.gtfc-faq__item[open] .gtfc-faq__a {
		animation: gtfc-faq-open 0.3s ease;
	}
}
@keyframes gtfc-faq-open {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
	.gtfc-faq__q { padding: 16px 16px; font-size: 16.5px; gap: 12px; }
	.gtfc-faq__a { padding: 0 16px 18px; font-size: 15.5px; }
}

/* The Boat: copy and a spec list beside a photo set (same widget as the gallery). */
.gtfc-boat {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 56px;
	align-items: center;
}
.gtfc-boat--no-photos {
	grid-template-columns: 1fr;
	max-width: 720px;
}
.gtfc-boat__copy p {
	color: var(--gtfc-mist);
	line-height: 1.7;
}
.gtfc-specs {
	margin: 28px 0 0;
	border-top: 1px solid var(--gtfc-line);
}
.gtfc-specs > div {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 13px 0;
	border-bottom: 1px solid var(--gtfc-line);
}
.gtfc-specs dt {
	flex: none;
	color: var(--gtfc-cyan);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding-top: 2px;
}
.gtfc-specs dd {
	margin: 0;
	color: #ffffff;
	font-weight: 600;
	text-align: right;
}

/* Gallery: one large photo that crossfades on its own, a thumbnail strip
   underneath, and a full-screen lightbox (all behaviour in gallery.js). */
.gtfc-gallery__hint {
	margin: 6px 0 0;
	color: var(--gtfc-mist);
	font-size: 14px;
}
.gtfc-gallery {
	/* Up to 840px wide, but never so wide that photo + thumbnails outgrow the
	   screen height (keeps them in view together on laptops). */
	max-width: clamp(480px, calc((100vh - 215px) * 1.3333), 840px);
	margin: 36px auto 0;
}
.gtfc-gallery--boat {
	max-width: none;
	margin: 0;
	min-width: 0;
}
.gtfc-gallery__stage {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	background: var(--gtfc-deep);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
.gtfc-gallery__open {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: pan-y; /* sideways swipes change photo, vertical swipes still scroll */
}
.gtfc-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.9s ease;
}
.gtfc-gallery__img.is-visible {
	opacity: 1;
}
.gtfc-gallery__nav,
.gtfc-gallery__play,
.gtfc-gallery__strip,
.gtfc-lightbox__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	background: rgba(4, 30, 38, 0.55);
	color: #ffffff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.gtfc-gallery__nav:hover,
.gtfc-gallery__play:hover,
.gtfc-gallery__strip:hover,
.gtfc-lightbox__btn:hover {
	background: rgba(4, 30, 38, 0.85);
}
.gtfc-gallery__nav svg,
.gtfc-gallery__play svg,
.gtfc-gallery__strip svg,
.gtfc-lightbox__btn svg {
	width: 55%;
	height: 55%;
}
.gtfc-gallery__nav {
	position: absolute;
	top: 50%;
	width: 46px;
	height: 46px;
	transform: translateY(-50%);
}
.gtfc-gallery__nav--prev { left: 12px; }
.gtfc-gallery__nav--next { right: 12px; }
.gtfc-gallery__play {
	position: absolute;
	left: 12px;
	bottom: 12px;
	width: 38px;
	height: 38px;
}
.gtfc-gallery__play svg { width: 50%; height: 50%; }
.gtfc-gallery__icon-play { display: none; }
.gtfc-gallery__play[aria-pressed="true"] .gtfc-gallery__icon-play { display: block; }
.gtfc-gallery__play[aria-pressed="true"] .gtfc-gallery__icon-pause { display: none; }
.gtfc-gallery__count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(4, 30, 38, 0.6);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.gtfc-gallery__thumbs-wrap {
	position: relative;
	margin-top: 14px;
}
.gtfc-gallery__thumbs {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 4px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
	-webkit-overflow-scrolling: touch;
}
.gtfc-gallery__thumbs li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}
/* Big photo sets (more than 12): the strip becomes 3 rows (2 on phones) that scroll sideways together. */
.gtfc-gallery--rows .gtfc-gallery__thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	grid-template-rows: repeat(3, auto);
}
.gtfc-gallery__thumb {
	display: block;
	width: 104px;
	aspect-ratio: 4 / 3;
	border: 3px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	background: var(--gtfc-deep);
	opacity: 0.6;
	transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.gtfc-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gtfc-gallery__thumb:hover,
.gtfc-gallery__thumb:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
}
.gtfc-gallery__thumb.is-active {
	opacity: 1;
	border-color: var(--gtfc-cyan);
}
.gtfc-gallery__strip {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 36px;
	transform: translateY(-50%);
	z-index: 2;
}
.gtfc-gallery__strip--prev { left: -8px; }
.gtfc-gallery__strip--next { right: -8px; }
.gtfc-gallery__strip[hidden] { display: none; }
@media (hover: none) {
	.gtfc-gallery__strip { display: none; }
}
.gtfc-gallery__open:focus-visible,
.gtfc-gallery__nav:focus-visible,
.gtfc-gallery__play:focus-visible,
.gtfc-gallery__strip:focus-visible,
.gtfc-gallery__thumb:focus-visible,
.gtfc-lightbox__btn:focus-visible {
	outline: 3px solid var(--gtfc-cyan);
	outline-offset: 2px;
}

/* Lightbox */
.gtfc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(3, 15, 20, 0.95);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	touch-action: pan-y;
}
.gtfc-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}
.gtfc-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(96vw, 1200px);
	max-height: 86vh;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	user-select: none;
	-webkit-user-drag: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.gtfc-lightbox__img.is-ready {
	opacity: 1;
}
.gtfc-lightbox__btn {
	position: absolute;
	width: 48px;
	height: 48px;
}
.gtfc-lightbox__btn--close { top: 14px; right: 14px; }
.gtfc-lightbox__btn--prev { left: 14px; top: 50%; margin-top: -24px; }
.gtfc-lightbox__btn--next { right: 14px; top: 50%; margin-top: -24px; }
.gtfc-lightbox__count {
	position: absolute;
	top: 26px;
	left: 20px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}
html.gtfc-lightbox-open,
html.gtfc-lightbox-open body {
	overflow: hidden;
}

@media (max-width: 640px) {
	.gtfc-gallery { margin-top: 28px; }
	.gtfc-gallery__stage { border-radius: 12px; }
	.gtfc-gallery__nav { width: 40px; height: 40px; }
	.gtfc-gallery__nav--prev { left: 8px; }
	.gtfc-gallery__nav--next { right: 8px; }
	.gtfc-gallery__play { left: 8px; bottom: 8px; }
	.gtfc-gallery__count { right: 8px; bottom: 8px; }
	.gtfc-gallery__thumbs { gap: 8px; }
	.gtfc-gallery--rows .gtfc-gallery__thumbs { grid-template-rows: repeat(2, auto); }
	.gtfc-gallery__thumb { width: 84px; border-width: 2px; }
	.gtfc-lightbox__btn { width: 44px; height: 44px; }
	.gtfc-lightbox__btn--prev { left: 8px; margin-top: -22px; }
	.gtfc-lightbox__btn--next { right: 8px; margin-top: -22px; }
	.gtfc-lightbox__btn--close { top: 10px; right: 10px; }
	.gtfc-lightbox__count { top: 22px; left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.gtfc-gallery__img,
	.gtfc-gallery__thumb,
	.gtfc-lightbox,
	.gtfc-lightbox__img {
		transition: none;
	}
	.gtfc-gallery__thumbs {
		scroll-behavior: auto;
	}
}

/* Contact */
.gtfc-contact-section {
	background: linear-gradient(180deg, var(--gtfc-teal-2) 0%, var(--gtfc-deep) 100%);
	overflow: hidden;
}
.gtfc-contact-section .gtfc-glow {
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgba(247, 148, 29, 0.16) 0%, transparent 70%);
	bottom: -160px;
	left: -100px;
}
.gtfc-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
	position: relative;
	z-index: 1;
}
.gtfc-contact__phone {
	display: block;
	font-size: 34px;
	font-weight: 700;
	color: var(--gtfc-white);
	text-decoration: none;
	margin: 12px 0 6px;
}
.gtfc-contact__intro a {
	color: var(--gtfc-cyan);
}
.gtfc-contact__location {
	color: var(--gtfc-mist);
}
.gtfc-contact__near {
	margin-top: -8px;
}
.gtfc-contact__form {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.gtfc-contact__form label {
	font-size: 13px;
	font-weight: 600;
	color: var(--gtfc-mist);
	margin-top: 10px;
}
.gtfc-contact__form input,
.gtfc-contact__form textarea {
	background: rgba(255, 255, 255, 0.06);
	border: none;
	border-bottom: 2px solid var(--gtfc-line);
	color: var(--gtfc-white);
	padding: 10px 4px;
	font: inherit;
}
.gtfc-contact__form input:focus,
.gtfc-contact__form textarea:focus {
	outline: none;
	border-color: var(--gtfc-cyan);
}
.gtfc-contact__form button {
	margin-top: 20px;
	align-self: flex-start;
}

/* Contact: Fluent Forms enquiry form, restyled to sit on the teal band. */
.gtfc-contact__form--fallback {
	gap: 18px;
	align-items: flex-start;
	color: var(--gtfc-mist);
}
.gtfc-contact__form--fallback p {
	margin: 0;
}
.gtfc-contact__form .fluentform {
	width: 100%;
}
.gtfc-contact__form .fluentform .ff-el-group {
	margin-bottom: 14px;
}
.gtfc-contact__form .fluentform .ff-el-input--label label {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gtfc-mist);
}
.gtfc-contact__form .fluentform .ff-el-is-required.asterisk-right label::after {
	color: var(--gtfc-orange);
}
.gtfc-contact__form .fluentform .ff-el-form-control {
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.06);
	border: none;
	border-bottom: 2px solid var(--gtfc-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--gtfc-white);
	color-scheme: dark;
	padding: 10px 4px;
	font: inherit;
	transition: border-color 0.2s ease;
}
.gtfc-contact__form .fluentform textarea.ff-el-form-control {
	min-height: 110px;
}
.gtfc-contact__form .fluentform .ff-el-form-control:focus {
	outline: none;
	border-bottom-color: var(--gtfc-cyan);
	background-color: rgba(255, 255, 255, 0.09);
	color: var(--gtfc-white);
}
.gtfc-contact__form .fluentform .ff-el-form-control::placeholder {
	color: rgba(188, 214, 220, 0.6);
}
.gtfc-contact__form .fluentform select.ff-el-form-control option {
	background: #0c3a47;
	color: #ffffff;
}
.gtfc-contact__form .fluentform .ff-el-is-error .ff-el-form-control {
	border-bottom-color: #ff9c9c;
}
.gtfc-contact__form .fluentform .text-danger,
.gtfc-contact__form .fluentform .error {
	margin-top: 4px;
	font-size: 13px;
	color: #ffb4b4;
}
.gtfc-contact__form .fluentform .ff-btn-submit {
	margin-top: 8px;
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--gtfc-cyan) !important; /* beats the button colours Fluent Forms sets inline */
	box-shadow: 0 4px 18px rgba(95, 208, 232, 0.25);
	color: var(--gtfc-ink) !important;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.gtfc-contact__form .fluentform .ff-btn-submit:hover,
.gtfc-contact__form .fluentform .ff-btn-submit:focus-visible {
	background: var(--gtfc-cyan-dark) !important;
	box-shadow: 0 8px 26px rgba(95, 208, 232, 0.4);
	color: var(--gtfc-ink) !important;
	transform: translateY(-2px);
}
.gtfc-contact__form .fluentform .ff-message-success {
	padding: 22px 24px;
	border: 1px solid rgba(95, 208, 232, 0.45);
	border-radius: 14px;
	background: rgba(95, 208, 232, 0.12);
	box-shadow: none;
	color: var(--gtfc-white);
	font-size: 17px;
}
.gtfc-contact__form .fluentform .ff-message-success p {
	margin: 0;
}
@media (max-width: 900px) {
	.gtfc-contact__form .fluentform .ff-btn-submit {
		width: 100%;
	}
}

/* Charter cards: a few photos from each trip; click for full screen. */
.gtfc-trip-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.gtfc-trip-photos li {
	margin: 0;
}
.gtfc-trip-photos__btn {
	position: relative;
	display: block;
	width: 92px;
	aspect-ratio: 4 / 3;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--gtfc-line);
	border-radius: 8px;
	background: var(--gtfc-deep);
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.2s ease;
}
.gtfc-trip-photos__btn:hover,
.gtfc-trip-photos__btn:focus-visible {
	border-color: var(--gtfc-cyan);
	transform: translateY(-2px);
}
.gtfc-trip-photos__btn:focus-visible {
	outline: 2px solid var(--gtfc-cyan);
	outline-offset: 2px;
}
.gtfc-trip-photos__btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gtfc-trip-photos__btn.has-more::after {
	content: attr(data-more);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(7, 41, 52, 0.66);
	color: #ffffff;
	font-weight: 700;
	font-size: 17px;
}
@media (max-width: 900px) {
	.gtfc-trip-photos {
		gap: 6px;
	}
	.gtfc-trip-photos li {
		flex: 1 1 calc(20% - 6px);
		min-width: 0;
	}
	.gtfc-trip-photos__btn {
		width: 100%;
	}
}
@media (max-width: 520px) {
	/* three across on phones, so each photo is big enough to tap */
	.gtfc-trip-photos li {
		flex: 0 0 calc(33.333% - 4px);
	}
}

/* Footer */
.site-footer {
	background: var(--gtfc-deep);
	color: var(--gtfc-white);
	text-align: center;
	padding: 48px 24px;
}
.site-footer__inner {
	max-width: 640px;
	margin: 0 auto;
}
.site-footer__contact,
.site-footer__gear {
	color: var(--gtfc-mist);
	margin: 0 0 10px;
	font-size: 14px;
}
.site-footer__contact a,
.site-footer__gear a {
	color: var(--gtfc-white);
}
.site-footer__gear a {
	color: var(--gtfc-cyan);
}
.site-footer__sponsors {
	display: flex;
	justify-content: center;
	margin: 8px 0 0;
}
.site-footer__sponsor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gtfc-white);
	border-radius: 8px;
	padding: 10px 18px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.site-footer__sponsor:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
.site-footer__sponsor img {
	height: 18px;
	width: auto;
	display: block;
}
.site-footer__social {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 18px 0 0;
}
.site-footer__social a {
	width: 42px;
	height: 42px;
}
.site-footer__social svg {
	width: 18px;
	height: 18px;
}
.site-footer__copyright {
	margin-top: 20px;
	font-size: 12px;
	color: #6f8f9a;
}

/* Mobile */
@media (max-width: 900px) {
	.gtfc-hero__grid,
	.gtfc-about,
	.gtfc-contact {
		grid-template-columns: 1fr;
	}
	.gtfc-about__copy {
		grid-column: 1;
		max-width: none;
		padding: 0;
	}
	/* Phones and tablets: the photo set becomes a full-width band above the copy,
	   still tucked up under the hero's wave. */
	.gtfc-about__slides {
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
		width: auto;
		height: calc(110px + 72vw);
		margin: -190px -24px 36px;
	}
	.gtfc-about__dots {
		bottom: 14px;
	}
	.gtfc-about__slides::after {
		display: none;
	}
	.gtfc-boat {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.gtfc-boat .gtfc-gallery {
		order: -1;
	}
	.gtfc-charter-row {
		grid-template-columns: auto 1fr;
		row-gap: 10px;
	}
	.gtfc-charter-row__price,
	.gtfc-charter-row .gtfc-btn {
		grid-column: 2;
	}
	.gtfc-hero::before {
		background-image:
			linear-gradient(180deg, rgba(7, 41, 52, 0.6) 0, rgba(7, 41, 52, 0) 150px),
			linear-gradient(180deg, rgba(7, 41, 52, 0.58) 0%, rgba(7, 41, 52, 0.5) 100%),
			linear-gradient(180deg, rgba(12, 58, 71, 0) 62%, rgba(12, 58, 71, 0.8) 100%);
	}
	.gtfc-logo--hero {
		margin: 0 auto 20px;
	}
	.gtfc-nav__inner {
		--nav-gap: 12px;
		--nav-logo-w: 108px;
		padding: 10px 16px;
	}
	.gtfc-nav__social {
		gap: 8px;
	}
	.gtfc-nav__social a {
		width: 32px;
		height: 32px;
	}
	.gtfc-nav__social svg {
		width: 14px;
		height: 14px;
	}
	.gtfc-nav__toggle {
		padding: 7px 14px;
	}
	.gtfc-hero {
		padding-top: 116px;
		padding-bottom: 180px;
	}
}

@media (max-width: 400px) {
	.gtfc-nav__inner {
		--nav-gap: 8px;
		--nav-logo-w: 92px;
		padding: 10px 12px;
	}
	.gtfc-nav__social {
		gap: 6px;
	}
	.gtfc-nav__social a {
		width: 28px;
		height: 28px;
	}
	.gtfc-nav__social svg {
		width: 12px;
		height: 12px;
	}
	.gtfc-nav__toggle {
		padding: 6px 12px;
	}
}

@media (max-width: 900px) {
	.gtfc-nav__menu-wrap {
		display: contents;
	}
	.gtfc-nav__menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		flex-direction: column;
		align-items: center;
		text-align: center;
		background: var(--gtfc-deep);
		padding: 16px 24px;
		gap: 16px;
		display: none;
	}
	.gtfc-nav__menu.is-open {
		display: flex;
	}
	/* Menu button sits dead centre of the bar; socials hug the right. */
	.gtfc-nav__toggle {
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}
	.gtfc-nav__social {
		margin-left: auto;
	}
	.gtfc-nav__cta {
		display: none;
	}
	.gtfc-nav__menu-phone {
		display: list-item;
	}
	.gtfc-nav__menu-phone a {
		color: var(--gtfc-cyan);
		font-weight: 700;
	}
}

/* Phones: stacked full-width buttons, no hero boat photo, no package icons. */
@media (max-width: 640px) {
	/* Hero buttons fill the content width, leaving the hero's 24px side gutters. */
	.gtfc-hero__actions {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 12px;
	}
	.gtfc-hero__actions .gtfc-btn {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		padding: 16px 24px;
	}
	/* The boat photo is desktop/tablet only; the hero background stays. */
	.gtfc-hero__media {
		display: none;
	}
	/* Charter packages: text, then price, then a full-width Enquire button. */
	.gtfc-charter-icon {
		display: none;
	}
	.gtfc-charter-row {
		grid-template-columns: 1fr;
		padding: 20px;
	}
	.gtfc-charter-row__body,
	.gtfc-charter-row__price,
	.gtfc-charter-row .gtfc-btn {
		grid-column: 1;
	}
	.gtfc-charter-row__price {
		text-align: left;
	}
	.gtfc-charter-row .gtfc-btn {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		padding: 13px 22px;
	}
}

/* ------------------------------------------------------------------
   Depth gauge: a slim sounder-style scale at the right edge. The marker
   sinks from 0 m at the top of the page to 30 m at the bottom as you scroll
   (front-page.js sets --p, 0 to 1). Decorative, so hidden from screen readers.
   Only on screens wide enough not to touch the content.
   ------------------------------------------------------------------ */
.gtfc-depth {
	display: none;
	position: fixed;
	right: 16px;
	top: 50%;
	z-index: 40;
	width: 64px;
	height: min(56vh, 520px);
	transform: translateY(-50%) scale(var(--t));
	transform-origin: right center;
	pointer-events: none;
	color: #ffffff;
	filter: drop-shadow(0 0 4px rgba(4, 30, 38, 0.55));
}
@media (min-width: 1280px) {
	.gtfc-depth { display: block; }
}
@media print {
	.gtfc-depth { display: none; }
}
.gtfc-depth__track {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 16px;
	border-right: 1px solid rgba(255, 255, 255, 0.55);
	/* minor tick every metre, longer tick every 5 m */
	background:
		repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 1px, transparent 1px, transparent calc(100% / 6)) right top / 15px 100% no-repeat,
		repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.4) 1px, transparent 1px, transparent calc(100% / 30)) right top / 8px 100% no-repeat;
}
.gtfc-depth__track::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 15px;
	height: 1px;
	background: rgba(255, 255, 255, 0.7);
}
.gtfc-depth__fill {
	position: absolute;
	top: 0;
	right: -1px;
	width: 3px;
	height: calc(var(--p, 0) * 100%);
	border-radius: 2px;
	background: linear-gradient(to bottom, rgba(95, 208, 232, 0.15), var(--gtfc-cyan));
}
.gtfc-depth__label {
	position: absolute;
	right: 22px;
	transform: translateY(-50%);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}
.gtfc-depth__marker {
	position: absolute;
	right: 8px;
	top: calc(var(--p, 0) * 100%);
	display: flex;
	align-items: center;
	transform: translateY(-50%);
}
.gtfc-depth__value {
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--gtfc-cyan);
	color: var(--gtfc-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.gtfc-depth__marker::after {
	content: '';
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid var(--gtfc-cyan);
}

/* ------------------------------------------------------------------
   Ultra-wide screens (1800px and up). Instead of leaving a small 1200px
   layout floating in a huge screen, the type, spacing, frames, waves and
   photo panel all scale up together (--t: 1.2 from 1800px, 1.4 from 2400px),
   and the About photo panel stops at a sensible width, its outer edge fading
   out like the inner one. Everything below 1800px is untouched.
   ------------------------------------------------------------------ */
@media (min-width: 1800px) {
	:root {
		--t: 1.2;
		--gtfc-wave-h: calc(110px * var(--t));
		--gtfc-div-h: calc(90px * var(--t));
		--gtfc-about-w: min(50vw, calc(750px * var(--t)));
		--gtfc-about-left: calc(50vw - var(--gtfc-about-w));
	}

	.gtfc-onepage,
	.site-footer {
		font-size: calc(16px * var(--t));
	}

	/* navigation */
	.gtfc-nav__inner {
		--nav-logo-w: calc(132px * var(--t));
		--nav-gap: calc(28px * var(--t));
		max-width: calc(1248px * var(--t));
		padding: calc(14px * var(--t)) 24px;
	}
	.gtfc-nav__menu a { font-size: calc(15px * var(--t)); }
	.gtfc-nav__cta {
		font-size: calc(14px * var(--t));
		padding: calc(7px * var(--t)) calc(20px * var(--t));
	}
	.gtfc-nav__social a {
		width: calc(36px * var(--t));
		height: calc(36px * var(--t));
	}

	/* hero */
	.gtfc-hero { padding-top: calc(130px * var(--t)); }
	.gtfc-hero__grid {
		max-width: calc(1200px * var(--t));
		gap: calc(48px * var(--t));
	}
	.gtfc-hero h1 { font-size: calc(46px * var(--t)); }
	.gtfc-hero__lede {
		font-size: calc(17px * var(--t));
		margin: calc(18px * var(--t)) 0 calc(32px * var(--t));
	}
	.gtfc-logo--hero { width: min(calc(380px * var(--t)), 78vw); }
	.gtfc-hero__actions { gap: calc(16px * var(--t)); }
	.gtfc-btn {
		font-size: calc(16px * var(--t));
		padding: calc(14px * var(--t)) calc(30px * var(--t));
	}
	.gtfc-btn--outline { padding: calc(10px * var(--t)) calc(22px * var(--t)); }

	/* sections */
	.gtfc-section {
		padding-top: calc(80px * var(--t));
		padding-bottom: calc(80px * var(--t));
	}
	.gtfc-section--about {
		padding-top: calc(150px * var(--t));
		padding-bottom: calc(150px * var(--t));
	}
	.gtfc-section__inner { max-width: calc(1100px * var(--t)); }
	.gtfc-section h2 { font-size: calc(34px * var(--t)); }
	.gtfc-kicker { font-size: calc(13px * var(--t)); }

	/* about */
	.gtfc-about__copy {
		max-width: calc(560px * var(--t));
		padding: 0 8px 0 calc(44px * var(--t));
	}
	.gtfc-about__dot {
		width: calc(22px * var(--t));
		height: calc(4px * var(--t));
	}
	/* outer edge fade (the inner one already exists as ::after) */
	.gtfc-about__slides::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 26%;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(
			to left,
			rgba(12, 58, 71, 0) 0%,
			rgba(12, 58, 71, 0.18) 25%,
			rgba(12, 58, 71, 0.5) 55%,
			rgba(12, 58, 71, 0.85) 82%,
			rgb(12, 58, 71) 100%
		);
	}

	/* charters */
	.gtfc-charter-list {
		gap: calc(18px * var(--t));
		margin-top: calc(40px * var(--t));
	}
	.gtfc-charter-row {
		gap: calc(24px * var(--t));
		padding: calc(22px * var(--t)) calc(28px * var(--t));
	}
	.gtfc-charter-icon {
		width: calc(48px * var(--t));
		height: calc(48px * var(--t));
	}
	.gtfc-charter-row__body h3 { font-size: calc(18px * var(--t)); }
	.gtfc-charter-row__body p { font-size: calc(15px * var(--t)); }
	.gtfc-price { min-width: calc(176px * var(--t)); padding-left: calc(28px * var(--t)); gap: calc(7px * var(--t)); }
	.gtfc-price__amount { font-size: calc(38px * var(--t)); }
	.gtfc-price__unit { font-size: calc(11px * var(--t)); }
	.gtfc-price__kids { font-size: calc(12px * var(--t)); }
	.gtfc-perks { gap: calc(20px * var(--t)); margin-top: calc(44px * var(--t)); }
	.gtfc-perk { gap: calc(20px * var(--t)); padding: calc(28px * var(--t)) calc(30px * var(--t)); }
	.gtfc-perk__icon { width: calc(56px * var(--t)); height: calc(56px * var(--t)); }
	.gtfc-perk__icon svg { width: calc(30px * var(--t)); height: calc(30px * var(--t)); }
	.gtfc-perk__title { font-size: calc(20px * var(--t)); }
	.gtfc-perk__text { font-size: calc(16.5px * var(--t)); }
	.gtfc-faq__list { max-width: calc(820px * var(--t)); margin-top: calc(40px * var(--t)); }
	.gtfc-faq__item { margin-bottom: calc(12px * var(--t)); }
	.gtfc-faq__q { padding: calc(18px * var(--t)) calc(22px * var(--t)); font-size: calc(17.5px * var(--t)); }
	.gtfc-faq__a { padding: 0 calc(22px * var(--t)) calc(20px * var(--t)); font-size: calc(16px * var(--t)); }
	.gtfc-faq__more { font-size: calc(16px * var(--t)); }

	/* boat, gallery */
	.gtfc-boat { gap: calc(56px * var(--t)); }
	.gtfc-specs dt { font-size: calc(12px * var(--t)); }
	.gtfc-specs > div { padding: calc(13px * var(--t)) 0; }
	.gtfc-gallery {
		max-width: clamp(480px, calc((100vh - 215px) * 1.3333), calc(840px * var(--t)));
	}
	.gtfc-gallery--boat { max-width: none; }
	.gtfc-gallery__thumb { width: calc(104px * var(--t)); }
	.gtfc-gallery__hint { font-size: calc(14px * var(--t)); }

	/* contact and footer */
	.gtfc-contact { gap: calc(56px * var(--t)); }
	.gtfc-contact__phone { font-size: calc(34px * var(--t)); }
	.gtfc-contact__form label { font-size: calc(13px * var(--t)); }
	.gtfc-contact__form .fluentform .ff-el-input--label label { font-size: calc(13px * var(--t)); }
	.gtfc-contact__form .fluentform .ff-el-form-control { font-size: calc(16px * var(--t)); }
	.gtfc-contact__form .fluentform .ff-btn-submit { font-size: calc(16px * var(--t)); }
	.gtfc-trip-photos { gap: calc(8px * var(--t)); margin-top: calc(14px * var(--t)); }
	.gtfc-trip-photos__btn { width: calc(92px * var(--t)); }
	.gtfc-trip-photos__btn.has-more::after { font-size: calc(17px * var(--t)); }
	.site-footer__inner { max-width: calc(640px * var(--t)); }
	.site-footer__gear { font-size: calc(14px * var(--t)); }

	/* full-screen photo viewer: use the big screen */
	.gtfc-lightbox__img {
		max-width: min(96vw, 1800px);
		max-height: 88vh;
	}
}
@media (min-width: 2400px) {
	:root { --t: 1.4; }
}