/*
Theme Name: Rare Latitudes
Theme URI: https://rarelatitudes.com
Description: The Rare Latitudes site. The design is the original custom.css, carried over unchanged as css/original.css; css/grid.css reproduces the Bootstrap 4.6.2 layer it was written against. This file holds only what the original got from Slick and Lenis. No parent theme, no framework, no jQuery.
Author: Influvate
Version: 2.1.0
License: GNU General Public License v2 or later
Text Domain: rare-latitudes
*/

/* ============================================================
   Everything else comes from the original: the design from
   css/original.css, the layout layer from css/grid.css. This
   file is only what the original got from its libraries.
   ============================================================ */

/* ------------------------------------------------------------------
   Headline slider -- the layer Slick applied as inline styles.

   Read off the live site: every headline fades on its .item over
   1000ms on cubic-bezier(0.86, 0, 0.07, 1), while the design CSS
   separately lifts the .txt inside it 60px over 1s. The two curves
   overlap, which is the glide. Non-current slides sit at z-index 998
   under the current one's 999, as Slick set them.

   Slick also kept the hidden slides from catching the mouse. With
   all five stacked in place, an invisible slide would otherwise sit
   on top and swallow the hover, and Explore More would never open.
   ------------------------------------------------------------------ */
.main-slider .text-slider .item {
	opacity: 0;
	z-index: 998;
	transition: opacity 1000ms cubic-bezier(0.86, 0, 0.07, 1);
	pointer-events: none;
}
.main-slider .text-slider .item.slick-current {
	opacity: 1;
	z-index: 999;
	pointer-events: auto;
}
/* Phones: the design CSS puts the headline in the page flow below 768px
   (.txt position: relative), and there Slick's fade still kept all five
   slides in one spot. Without that, each new headline appeared lower down
   the screen. Floats with a -100% margin do what Slick's track did: every
   slide starts in the same place, and the slider is as tall as its
   tallest slide. */
@media only screen and (max-width: 767px) {
	.main-slider .text-slider .item {
		float: left;
		width: 100%;
		margin-right: -100%;
	}
	.main-slider .text-slider::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* Home video on phones: the balloon flies about 70% of the way across the
   frame, and a portrait phone shows only the middle quarter of it, so the
   balloon was cut in half at the right edge. This moves the visible part of
   the video (and its still frame) across to the balloon. Client request,
   1 October 2026. */
@media only screen and (max-width: 767px) {
	.home .main-slider .img video {
		object-position: 76% 50%;
	}
}

/* ------------------------------------------------------------------
   Contact page: two things the original template meant but never got,
   because they were written as Bootstrap 5 classes on a Bootstrap 4
   site. Scoped to this page: defining the v5 classes site-wide would
   move other pages.
   - The hero photo is marked .top-0. Without it the photo started below
     the hero's 130px phone padding, leaving a white strip at the top
     with the white logo invisible on it.
   - The two name fields are marked .gap-3. Without it "First Name
     (required)" ran into "Last Name". On narrow phones there isn't room
     for two labels side by side, so there they stack.
   ------------------------------------------------------------------ */
.page-contact .main-slider .img {
	top: 0;
	left: 0;
}
.page-contact .inquire-form-group .d-flex.gap-3 {
	gap: 1rem;
}
@media (max-width: 575px) {
	.page-contact .inquire-form-group .d-flex.gap-3 {
		flex-direction: column;
		gap: 10px;
	}
}
/* The form card is a fixed 536px tall that centres its content. On
   phones the form is taller than that, and the overflow above the centre
   can't be scrolled to, so the heading was cut off. There the card grows
   to fit instead; the hero has the room. */
@media (max-width: 767px) {
	.page-contact .contact-form-card {
		height: auto;
	}
}

/* Home intro and Contact details (added 27 Sep 2026 at the client's
   request). Both are built from the Why Us intro's classes; this only adds
   the gap between the intro's paragraphs (the design CSS zeroes paragraph
   margins) and styles the small labels, which it has no class for. */
.rl-home-intro p + p {
	margin-top: 1rem;
}
.rl-intro-note {
	text-transform: uppercase;
	margin-top: 1.75rem;
}
.rl-detail-label {
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #053724;
	margin: 0 0 12px;
}
.rl-detail-link {
	font-size: .9rem;
	color: #053724;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Destination pages: the country name on the photo is a div.h1, the page's H1
   being the heading in the intro. On phones the design's
   `h1, .h1 { font-size: 2rem !important }` comes after
   `.banner-title { font-size: 2.1rem !important }`; as an h1 the title lost
   to it on specificity, as a .h1 it would win. This keeps the title's size. */
@media (max-width: 767px) {
	div.h1.banner-title {
		font-size: 2.1rem !important;
	}
}

/* New pages (page.php): the title band, then the page's own blocks at a
   readable width, spaced the way the rest of the site is. */
.rl-page-band {
	min-height: 50vh;
	padding: 170px 0 90px;
}
.rl-page-content {
	max-width: 900px;
}
.rl-page-content > * + * {
	margin-top: 1.25rem;
}
.rl-page-content h2 {
	font-size: 2.3rem;
	margin: 2.75rem 0 1rem;
	color: #053724;
}
.rl-page-content h3 {
	font-size: 1.6rem;
	margin: 2rem 0 .75rem;
	color: #053724;
}
.rl-page-content p,
.rl-page-content li {
	color: #5c715e;
}
.rl-page-content ul,
.rl-page-content ol {
	padding-left: 1.25rem;
}
.rl-page-content img {
	max-width: 100%;
	height: auto;
}
.rl-page-content a {
	color: #053724;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Services: each card opens the Contact page with its service chosen. The
   title's link is stretched over the whole card (which already lifts on
   hover); the destination links inside a description sit above it and keep
   working, underlined so they read as links. The same underline marks the
   destination links in the Home introduction. Client request, 1 October 2026. */
.service-grid-card {
	position: relative;
}
.service-grid-card .rl-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 6;
}
.service-grid-card .description a,
.rl-home-intro p a {
	position: relative;
	z-index: 7;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Card titles in the three-card layout of the AI brief: the design's h3 is
   3rem, far too large for a card. */
.rl-card-heading {
	font-size: 1.6rem;
	margin: 0 0 .75rem;
	color: #053724;
}

/* Page not found (404.php): the brand green band, its text clear of the
   fixed header. */
.page-404 section {
	min-height: 70vh;
	padding: 170px 0 90px;
}

/* ------------------------------------------------------------------
   Slick's own layout rules -- the part of slick.css the partners
   strip needs. Class names kept so the design CSS keeps matching.
   ------------------------------------------------------------------ */
.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.slick-track::before,
.slick-track::after { content: ""; display: table; }
.slick-track::after { clear: both; }
.slick-slide {
	float: left;
	height: 100%;
	min-height: 1px;
	display: none;
}
.slick-initialized .slick-slide { display: block; }

/* ------------------------------------------------------------------
   Lenis's own stylesheet, unchanged. js/rl.js does the smooth
   scrolling Lenis did, and sets the same classes on <html>.
   ------------------------------------------------------------------ */
html.lenis,
html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}
.lenis.lenis-stopped {
	overflow: hidden;
}
.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* ------------------------------------------------------------------
   The two controls that were <a> tags with no href are buttons
   here, so a keyboard can reach them. This takes the browser's
   button chrome off, leaving only the design CSS's own styling.
   ------------------------------------------------------------------ */
button.header-menu,
button.cls {
	background: none;
	padding: 0;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}
button.cls { border: 0; }

/* Keyboard users reach Explore More by tab, so it opens on focus as
   well as on hover. Invisible to anyone using a mouse. */
.main-slider .text-slider .txt:focus-within .button-wrap {
	height: 52px;
}
.main-slider .text-slider .txt:focus-within .button-wrap .button {
	opacity: 1;
}

/* ------------------------------------------------------------------
   Preloader: the logo reveal.

   Added at the client's request - the original site had none. The
   logo is their own vector mark (preloader.php). White, so it follows
   straight on from the white veil the page-exit transition fades to:
   leave a page, the screen goes white, the logo is already there.

   Every page (.is-draw): the eight compass rays draw themselves round
   the dial, the ring closes, the needle swings round and settles, and
   the wordmark rises in letter by letter - at full length (about 2s) on
   the heavy pages with a video hero, at double speed on the rest. A
   click starts it on the page being left, and the next page carries on
   from the same point. The panel then lifts away on the same curve the
   hero headline uses, and the page's own entrance starts underneath it.
   ------------------------------------------------------------------ */
/* No scrolling underneath. The gutter is kept, so when the lock comes off
   and the scrollbar returns the page does not shift sideways mid-reveal. */
html.rl-preloading {
	overflow: hidden;
	scrollbar-gutter: stable;
}
.rl-preloader {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	/* If the script never runs, get out of the way regardless. */
	animation: rl-pl-failsafe 0s linear 6s forwards;
}
@keyframes rl-pl-failsafe {
	to { visibility: hidden; opacity: 0; }
}
.rl-preloader__logo {
	width: min(400px, 70vw);
	opacity: 0;
}
.rl-preloader.is-draw .rl-preloader__logo {
	opacity: 1;
}
.rl-preloader.is-calm .rl-preloader__logo {
	animation: rl-pl-in .3s ease forwards;
}
/* A click brings the same panel back over the page it leaves (js/rl.js):
   it fades in over a quarter of a second while the drawing starts. */
.rl-preloader.is-entering {
	animation: rl-pl-in .25s ease forwards;
}
.rl-preloader.is-gone {
	display: none;
}
.rl-preloader.is-reset,
.rl-preloader.is-reset * {
	transition: none !important;
}
.rl-preloader__logo svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* the logo's own colours, from logo.svg */
.rl-pl-disc { fill: #fff; }
.rl-pl-line {
	fill: none;
	stroke: #00573f;
	stroke-width: 3px;
	stroke-miterlimit: 10;
}
.rl-pl-needle,
.rl-pl-letter { fill: #00573f; }

/* The drawing. Every duration and delay is a multiple of --rl-s (1 on heavy
   pages, 0.5 on the rest), so the double-speed version is the same drawing
   compressed, and --rl-t is subtracted from every delay so a page can start
   part-way through: where the click on the previous page had got to. */
.rl-preloader {
	--rl-s: 1;
	--rl-t: 0ms;
}
.is-draw .rl-pl-line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: rl-pl-draw calc(.8s * var(--rl-s)) cubic-bezier(.65, 0, .35, 1) forwards;
	animation-delay: calc(0s - var(--rl-t));
}
.is-draw .rl-pl-ray {
	animation-delay: calc(var(--i) * 60ms * var(--rl-s) - var(--rl-t));
}
.is-draw .rl-pl-ring {
	animation-duration: calc(.7s * var(--rl-s));
	animation-delay: calc(.25s * var(--rl-s) - var(--rl-t));
}
.is-draw .rl-pl-ring-inner {
	animation-delay: calc(.35s * var(--rl-s) - var(--rl-t));
}
.is-draw .rl-pl-disc {
	opacity: 0;
	animation: rl-pl-in calc(.4s * var(--rl-s)) ease calc(.55s * var(--rl-s) - var(--rl-t)) forwards;
}
.is-draw .rl-pl-needle {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: 50% 50%;
	animation: rl-pl-needle calc(1s * var(--rl-s)) cubic-bezier(.34, 1.56, .64, 1) calc(.75s * var(--rl-s) - var(--rl-t)) forwards;
}
.is-draw .rl-pl-letter {
	opacity: 0;
	transform: translateY(14px);
	animation: rl-pl-rise calc(.7s * var(--rl-s)) cubic-bezier(.16, 1, .3, 1) forwards;
	animation-delay: calc((.85s + var(--i) * 45ms) * var(--rl-s) - var(--rl-t));
}
@keyframes rl-pl-draw {
	to { stroke-dashoffset: 0; }
}
@keyframes rl-pl-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes rl-pl-needle {
	0% { opacity: 0; transform: rotate(-220deg) scale(.6); }
	30% { opacity: 1; }
	100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes rl-pl-rise {
	to { opacity: 1; transform: none; }
}

/* lifting away */
.rl-preloader.is-leaving {
	transform: translateY(-100%);
	transition: transform .9s cubic-bezier(.86, 0, .07, 1);
}
/* An animation rather than a transition: the calm version's fade-in is an
   animation held with 'forwards', and a held animation beats any plain
   declaration - a transition to opacity 0 would simply never show. */
.rl-preloader.is-leaving .rl-preloader__logo {
	animation: rl-pl-out .6s cubic-bezier(.86, 0, .07, 1) forwards;
}
@keyframes rl-pl-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(-40px); }
}

@media (prefers-reduced-motion: reduce) {
	.rl-preloader.is-leaving {
		transform: none;
		opacity: 0;
		transition: opacity .3s ease;
	}
}

/* Anyone who has asked their system for less motion gets the page
   without the reveals. Nobody else sees a difference. */
@media (prefers-reduced-motion: reduce) {
	.anim { opacity: 1 !important; transform: none !important; }
}