/* Green Orbit Core: Hero Slideshow (04 §10.6, §9; 05 D16). Colours, fonts and buttons come from the theme's tokens. */

.go-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	width: 100%;
	/* Back to the earlier size (30 Oct 2026 review): the 20% shrink of 29 Oct (54svh / 368 / 512) is undone. */
	height: 68vh;
	height: 68svh;
	min-height: 460px;
	max-height: 640px;
	overflow: hidden;
	background: var(--go-forest-950, #0A3B61);
	color: var(--go-white, #fff);
}

.go-hero__slides,
.go-hero__slide,
.go-hero__overlay {
	position: absolute;
	inset: 0;
}

.go-hero__slide {
	opacity: 0;
	transition: opacity 900ms ease-in-out;
}

.go-hero__slide.is-active {
	opacity: 1;
}

/* Two classes, to beat Elementor's .elementor img { height: auto }. */
.go-hero .go-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* The overlay sits above the photos and paints the hero gradient. It also carries the theme's .go-hero-overlay
   class (lime accent word), whose position: relative this rule overrides. */
.go-hero .go-hero__overlay {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

/* Stronger than the theme's --go-grad-hero: the text must stay readable over bright skies (04 §10.6, 03 §4.2), so
   the shade holds at about 60% behind the text block, with soft shades along the bottom (controls) and the top
   (the see-through header's links). */
.go-hero .go-hero__overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(10, 59, 97, .82) 0%, rgba(10, 59, 97, .66) 34%, rgba(10, 59, 97, .3) 58%, rgba(10, 59, 97, 0) 78%),
		linear-gradient(0deg, rgba(10, 59, 97, .55) 0%, rgba(10, 59, 97, 0) 24%),
		linear-gradient(180deg, rgba(10, 59, 97, .5) 0%, rgba(10, 59, 97, 0) 20%);
}

.go-hero__content {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--go-content-width, 1200px) + 2 * var(--go-gutter, 24px));
	margin: 0 auto;
	padding: 72px var(--go-gutter, 24px) 92px;
}

.go-hero__content > * {
	max-width: 560px;
}

.go-hero__eyebrow {
	margin: 0 0 var(--go-space-3, 12px);
	font: 600 12px/1.2 var(--go-font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--go-accent, #F4C542);
}

.go-hero__lead {
	margin: 0;
	font: 400 16px/1.5 var(--go-font-body);
	color: #FFFFFF;
}

.go-hero__title {
	margin: 4px 0 0;
	font-family: var(--go-font-display);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--go-white, #fff);
	text-wrap: balance;
}

.go-hero__title .go-accent {
	font-size: .98em;
	color: var(--go-accent, #F4C542);
	background: none;
}

.go-hero__subline {
	margin: var(--go-space-3, 12px) 0 0;
	font: 400 16px/1.5 var(--go-font-body);
	color: #FFFFFF;
}

.go-hero__buttons,
.go-hero__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--go-space-3, 12px);
}

.go-hero__buttons {
	margin-top: var(--go-space-5, 20px);
}

/* Smaller buttons (26 Oct 2026, "reduce the size of the buttons"). */
.go-hero .go-hero__buttons > a {
	min-height: 42px;
	padding: 0 20px;
	font-size: 14px;
}

/* YouTube and Instagram: the hero's main buttons when the other two are switched off (the home page since the
   agency's second review, 20 Oct 2026, as in the blueprint). Since 25 Oct 2026 each pill is filled in the network's
   own brand colour with a white name and glyph (YouTube red, Instagram's gradient): brand colours, not site tokens. */
.go-hero__socials {
	margin-top: var(--go-space-5, 20px);
}

.go-hero__buttons + .go-hero__socials {
	margin-top: var(--go-space-4, 16px);
}

.go-hero .go-hero__social.go-social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 18px 0 6px;
	border: 0;
	border-radius: var(--go-radius-pill, 999px);
	background: var(--go-white, #fff);
	box-shadow: 0 8px 24px rgba(10, 59, 97, .28);
	font: 600 14px/1 var(--go-font-body);
	color: #fff;
	text-decoration: none;
	transition: background-color var(--go-dur-hover, 120ms) ease, transform var(--go-dur-hover, 120ms) ease;
}

.go-hero .go-hero__social.go-social--youtube {
	background: #ff0000;
}

.go-hero .go-hero__social.go-social--instagram {
	/* Purple to pink to orange, darkest under the white name so it reads (the old glow left yellow under the glyph). */
	background: linear-gradient(115deg, #515bd4 0%, #8134af 32%, #dd2a7b 68%, #f58529 100%);
}

.go-hero .go-hero__social.go-social:hover,
.go-hero .go-hero__social.go-social:focus {
	color: #fff;
	filter: brightness(1.08);
}

/* The glyph sits straight on the pill, so the network's circle is dropped. */
.go-hero .go-hero__social.go-social .go-icon {
	background: none;
}

.go-hero .go-hero__social.go-social:active {
	transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
	.go-hero .go-hero__social.go-social:hover {
		transform: translateY(-2px);
	}
}

.go-hero .go-hero__social .go-icon {
	width: 30px;
	height: 30px;
	padding: 7px;
}

/* ---------- Place label: the current photo's caption, beside the pause button (top left on phones) ---------- */
.go-hero__place {
	position: absolute;
	z-index: 3;
	left: calc(max(0px, (100% - var(--go-content-width, 1200px) - 2 * var(--go-gutter, 24px)) / 2) + var(--go-gutter, 24px) + 56px);
	bottom: calc(var(--go-space-6, 24px) + 7px);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 12px 6px 9px;
	border-radius: var(--go-radius-pill, 999px);
	background: rgba(10, 59, 97, .5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font: 600 13px/1.2 var(--go-font-body);
	color: var(--go-white, #fff);
	white-space: nowrap;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms var(--go-ease-in, cubic-bezier(.2, .8, .2, 1));
}

.go-hero__place[hidden] {
	display: none;
}

.go-hero__place .go-icon {
	width: 16px;
	height: 16px;
	color: var(--go-accent, #F4C542);
}

.go-hero__place.is-changing {
	opacity: 0;
	transform: translateY(4px);
}

/* ---------- Controls: pause bottom-left; arrows and dots bottom-right ----------
   Every control rule has three classes. The Elementor kit styles all <button>s (Forest fill, 16 × 24 px padding,
   square corners) and adds .elementor-kit-N button:hover / :focus (0,2,1); with one class the padding squeezed the
   icons to nothing and the dots became 48 px dark circles. Three classes win in every state. */
.go-hero__controls {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: var(--go-space-6, 24px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: calc(var(--go-content-width, 1200px) + 2 * var(--go-gutter, 24px));
	margin: 0 auto;
	padding: 0 var(--go-gutter, 24px);
}

.go-hero__nav {
	display: flex;
	align-items: center;
	gap: var(--go-space-2, 8px);
}

.go-hero .go-hero__controls :is(.go-hero__pause, .go-hero__prev, .go-hero__next) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(10, 59, 97, .35);
	box-shadow: none;
	color: var(--go-white, #fff);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color var(--go-dur-hover, 120ms) ease, border-color var(--go-dur-hover, 120ms) ease, transform var(--go-dur-hover, 120ms) ease;
}

.go-hero .go-hero__controls :is(.go-hero__pause, .go-hero__prev, .go-hero__next):is(:hover, :focus) {
	border-radius: 50%;
	background: rgba(10, 59, 97, .6);
	border-color: rgba(255, 255, 255, .7);
	color: var(--go-white, #fff);
}

.go-hero .go-hero__controls :is(.go-hero__pause, .go-hero__prev, .go-hero__next):active {
	transform: scale(.94);
}

.go-hero .go-hero__controls :is(.go-hero__pause, .go-hero__prev, .go-hero__next) .go-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

.go-hero .go-hero__controls .go-hero__pause :is(.go-icon--pause, .go-icon--play) {
	width: 16px;
	height: 16px;
	fill: currentColor;
	stroke: none;
}

.go-hero .go-hero__controls .go-hero__pause .go-icon--play,
.go-hero.is-paused .go-hero__controls .go-hero__pause .go-icon--pause {
	display: none;
}

.go-hero.is-paused .go-hero__controls .go-hero__pause .go-icon--play {
	display: block;
}

.go-hero__dots {
	display: flex;
	align-items: center;
}

/* 8 px dots inside 24 × 44 px tap targets; the current one is a 24 px pill. While the slideshow runs, Lime fills
   that pill over the slide's seconds, so the next change is never a surprise (hero.js restarts it with is-timing). */
.go-hero .go-hero__dots .go-hero__dot {
	position: relative;
	flex: none;
	width: 24px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 0;
	cursor: pointer;
	transition: width var(--go-dur-ui, 200ms) var(--go-ease-in);
}

.go-hero .go-hero__dots .go-hero__dot:is(:hover, :focus) {
	border-radius: 0;
	background: transparent;
}

.go-hero .go-hero__dots .go-hero__dot::before,
.go-hero .go-hero__dots .go-hero__dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 8px;
	border-radius: 999px;
}

.go-hero .go-hero__dots .go-hero__dot::before {
	width: 8px;
	background: rgba(255, 255, 255, .6);
	transform: translate(-50%, -50%);
	transition: width var(--go-dur-ui, 200ms) var(--go-ease-in), background-color var(--go-dur-ui, 200ms) ease;
}

.go-hero .go-hero__dots .go-hero__dot:hover::before {
	background: var(--go-white, #fff);
}

.go-hero .go-hero__dots .go-hero__dot::after {
	width: 24px;
	margin: -4px 0 0 -12px;
	background: var(--go-accent, #F4C542);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
}

.go-hero .go-hero__dots .go-hero__dot.is-active {
	width: 36px;
}

.go-hero .go-hero__dots .go-hero__dot.is-active::before {
	width: 24px;
	background: var(--go-accent, #F4C542);
}

.go-hero.is-timing .go-hero__dots .go-hero__dot.is-active::before {
	background: rgba(255, 255, 255, .35);
}

.go-hero.is-timing .go-hero__dots .go-hero__dot.is-active::after {
	opacity: 1;
	animation: go-hero-progress var(--go-hero-seconds, 6s) linear forwards;
}

@keyframes go-hero-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.go-hero :is(button, a):focus-visible {
	outline: 3px solid var(--go-accent, #F4C542);
	outline-offset: 2px;
}

/* ---------- Motion (04 §9) ----------
   The current photo drifts in slowly (a slow zoom, linear, so it never seems to stop and start; kept slow on 5 Nov 2026, a faster one was "too fast"); the outgoing
   one keeps drifting while it fades (hero.js marks it is-leaving), so nothing jumps. The text block rises in
   once, line by line, when the page opens. Both only for visitors who allow motion. */
@media (prefers-reduced-motion: no-preference) {
	.go-hero__slide:is(.is-active, .is-leaving) .go-hero__img {
		animation: go-hero-drift calc(var(--go-hero-seconds, 6s) + .8s) linear forwards;
	}

	.go-hero.is-paused .go-hero__slide.is-active .go-hero__img {
		animation-play-state: paused;
	}

	/* On a phone only a slice of the landscape photo shows, so 1.085 hardly reads: zoom further (5 Nov 2026). */
	@media (max-width: 767px) {
		.go-hero__slide:is(.is-active, .is-leaving) .go-hero__img {
			animation-name: go-hero-drift-phone;
		}
	}

	.go-hero__content > * {
		animation: go-hero-rise 700ms var(--go-ease-in) both;
	}

	.go-hero__controls {
		animation: go-hero-fade 600ms ease-out 450ms both;
	}

	/* Backwards only: a fill after the end would hold the label visible and stop its fade on each photo change. */
	.go-hero__place {
		animation: go-hero-fade 600ms ease-out 450ms backwards;
	}
}

/* The text arrives line by line, 70 ms apart: rising with motion, fading without (below). */
.go-hero__content > :nth-child(2) { animation-delay: 70ms; }
.go-hero__content > :nth-child(3) { animation-delay: 140ms; }
.go-hero__content > :nth-child(4) { animation-delay: 210ms; }
.go-hero__content > :nth-child(5) { animation-delay: 280ms; }
.go-hero__content > :nth-child(6) { animation-delay: 350ms; }

@keyframes go-hero-drift {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.085);
	}
}

@keyframes go-hero-drift-phone {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.2);
	}
}

@keyframes go-hero-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes go-hero-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.go-hero__title {
		font-size: 40px;
	}

	.go-hero__lead,
	.go-hero__subline {
		font-size: 16px;
	}
}

/* ---------- Mobile: text at the bottom over the scrim ---------- */
@media (max-width: 767px) {
	.go-hero {
		align-items: flex-end;
		height: 50vh;
		height: 50svh;
		min-height: 380px;
		max-height: none;
	}

	.go-hero .go-hero__overlay::before {
		/* Same idea as desktop (5 Nov 2026 review): the shade sits on the left and fades out a little past the middle
		   of the width (62%), so the right side of the photo stays clear. Nothing covers the full width. */
		background:
			linear-gradient(0deg, rgba(10, 59, 97, .34) 0, rgba(10, 59, 97, 0) 76px),
			linear-gradient(90deg,
				rgba(10, 59, 97, .9) 0%,
				rgba(10, 59, 97, .86) 24%,
				rgba(10, 59, 97, .76) 38%,
				rgba(10, 59, 97, .6) 50%,
				rgba(10, 59, 97, .42) 60%,
				rgba(10, 59, 97, .25) 69%,
				rgba(10, 59, 97, .11) 77%,
				rgba(10, 59, 97, .03) 84%,
				rgba(10, 59, 97, 0) 90%);
	}

	/* A soft shadow keeps white text readable where it crosses the clear half of the photo. */
	.go-hero__content :is(.go-hero__eyebrow, .go-hero__title, .go-hero__lead, .go-hero__subline) {
		text-shadow: 0 1px 10px rgba(10, 59, 97, .65);
	}

	.go-hero__content {
		padding: 56px var(--go-gutter, 16px) 60px;
	}

	/* Smaller type and buttons (26 Oct 2026, "the wording and the buttons are too big"): the text covered the photo. */
	.go-hero .go-hero__title {
		font-size: 25px;
	}

	.go-hero .go-hero__eyebrow {
		margin-bottom: var(--go-space-2, 8px);
		font-size: 10px;
	}

	.go-hero .go-hero__lead,
	.go-hero .go-hero__subline {
		font-size: 13px;
		line-height: 1.45;
	}

	.go-hero__subline {
		margin-top: var(--go-space-2, 8px);
	}

	.go-hero__buttons {
		margin-top: var(--go-space-4, 16px);
	}

	.go-hero .go-hero__buttons > a {
		flex: 1 1 100%;
		min-height: 38px;
		font-size: 13px;
	}

	.go-hero__socials {
		margin-top: var(--go-space-4, 16px);
	}

	.go-hero .go-hero__social.go-social {
		flex: 0 1 auto;
		min-height: 34px;
		padding: 0 14px 0 5px;
		font-size: 12px;
	}

	.go-hero .go-hero__social .go-icon {
		width: 24px;
		height: 24px;
		padding: 5px;
	}

	.go-hero__controls {
		bottom: var(--go-space-3, 12px);
	}

	/* Arrows 1.5x smaller (30 Oct 2026 review): 44 px became 29 px, the chevron 20 px became 13 px. */
	.go-hero .go-hero__controls :is(.go-hero__prev, .go-hero__next) {
		width: 29px;
		height: 29px;
	}

	.go-hero .go-hero__controls :is(.go-hero__prev, .go-hero__next) .go-icon {
		width: 13px;
		height: 13px;
	}

	/* The photos are landscape and the phone's frame is portrait, so only about 40% of a photo's width shows and the
	   subject on the right was cut: the cable car on Mount Titlis, the Merlion in Singapore (26 Oct 2026).
	   !important beats the slide's own inline object-position. shortcut: matches the file name, so a new photo
	   needs a new match; move it to a per-slide mobile focus setting if more slides need one. */
	.go-hero__img[src*="titlis"] {
		object-position: 80% center !important;
	}

	.go-hero__img[src*="singapore"] {
		object-position: 88% center !important;
	}

	.go-hero__img[src*="vietnam"] {
		object-position: 68% center !important;
	}

	/* Japan: 100% (the slide's own setting) put the pagoda's spire at the left edge with its roofs cut off; 84% centres it. */
	.go-hero__img[src*="japan"] {
		object-position: 84% center !important;
	}

	/* No room beside the controls on a phone: the place label goes to the top left of the photo. */
	.go-hero__place {
		top: 16px;
		bottom: auto;
		left: var(--go-gutter, 16px);
	}
}

/* ---------- Reduced motion: gentle fades only (agency's choice, 20 Oct 2026) ----------
   hero.js keeps the photo still until the visitor presses play or picks one. The text fades in once, line by line,
   when the page opens; a chosen photo crossfades in; the place label fades. Nothing zooms, rises or slides.
   !important, because the theme's site-wide reduced-motion rule stops every transition and animation; these
   selectors are more specific, so they win. */
@media (prefers-reduced-motion: reduce) {
	.go-hero .go-hero__slide {
		transition: opacity 600ms ease !important;
	}

	.go-hero .go-hero__content > * {
		animation-name: go-hero-fade !important;
		animation-duration: 500ms !important;
		animation-timing-function: ease;
		animation-fill-mode: both;
	}

	.go-hero .go-hero__place {
		transition: opacity 180ms ease !important;
	}

	.go-hero .go-hero__place.is-changing {
		transform: none;
	}

	.go-hero .go-hero__dots .go-hero__dot,
	.go-hero .go-hero__dots .go-hero__dot::before {
		transition: none;
	}
}