/*
 * Travel Lite — base stylesheet.
 *
 * Scope rule: this file only styles the document shell and the fallback
 * templates (blog, search, 404, comments). It must never style anything
 * inside .elementor, so that every section stays fully controlled by the
 * Elementor editor.
 */

/* ---------------------------------------------------------------- Tokens */

:root {
	--tl-container: 1240px;
	--tl-gutter: 20px;
	--tl-text: #1F2A37;
	--tl-muted: #5B6773;
	--tl-accent: #2E9BD6;
	--tl-border: #E2E6EA;
	--tl-bg: #ffffff;
	--tl-radius: 8px;
	--tl-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--tl-head: 'Poppins', system-ui, sans-serif;
	--tl-orange: #F97316;
	--tl-orange-dark: #EA640C;
	--tl-sand: #F5F5F5;
}

/* ----------------------------------------------------------------- Reset */

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

body {
	margin: 0;
	font-family: var(--tl-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--tl-text);
	background: var(--tl-bg);
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
iframe {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--tl-accent);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	line-height: 1.25;
	font-weight: 700;
}

p, ul, ol, figure, blockquote, table {
	margin: 0 0 1.25em;
}

/* ------------------------------------------------------------- Structure */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1 0 auto;
}

.site-container {
	width: 100%;
	max-width: var(--tl-container);
	margin-inline: auto;
	padding-inline: var(--tl-gutter);
}

/* Blog/archive two-column shell. */
.site-content > .site-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	padding-block: 48px;
}

@media (min-width: 900px) {
	.site-content > .site-container:has(.widget-area) {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

.site-main--full,
.site-main--wide {
	grid-column: 1 / -1;
}

/* Pages built with Elementor manage their own spacing. */
.trishika-lite-elementor .site-content > .site-container {
	padding-block: 0;
	gap: 0;
}

.site-main--wide,
.site-main--blank {
	max-width: none;
}

/* ---------------------------------------------------------------- Header */

.site-header {
	border-bottom: 1px solid var(--tl-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 76px;
}

.site-title {
	margin: 0;
	font-size: 1.375rem;
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

.site-description {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--tl-muted);
}

.custom-logo {
	display: block;
	max-height: 56px;
	width: auto;
}

/* ------------------------------------------------------------ Navigation */

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation a {
	display: block;
	padding: 8px 0;
	color: var(--tl-text);
	text-decoration: none;
	font-weight: 500;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--tl-accent);
}

.main-navigation .sub-menu {
	display: none;
	position: absolute;
	z-index: 20;
	flex-direction: column;
	min-width: 220px;
	padding: 8px 16px;
	background: var(--tl-bg);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius);
	box-shadow: 0 12px 32px rgba(16, 30, 45, 0.12);
}

.main-navigation li {
	position: relative;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	display: flex;
}

.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius);
	cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: currentColor;
	content: "";
}

.menu-toggle__bars::before {
	transform: translateY(-6px);
}

.menu-toggle__bars::after {
	transform: translateY(4px);
}

@media (max-width: 899px) {
	.menu-toggle {
		display: block;
	}

	.main-navigation {
		display: none;
		flex-basis: 100%;
	}

	.main-navigation.is-open {
		display: block;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 0;
	}

	.main-navigation .sub-menu {
		display: flex;
		position: static;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 16px;
	}

	.site-header__inner {
		flex-wrap: wrap;
		padding-block: 12px;
	}
}

/* ----------------------------------------------------------- Post cards */

.post-list {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius);
}

.post-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.post-card__body {
	padding: 20px;
}

.post-card__title {
	font-size: 1.125rem;
}

.post-card__title a {
	color: inherit;
	text-decoration: none;
}

.entry-meta {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 0.8125rem;
	color: var(--tl-muted);
}

.entry-thumbnail img {
	width: 100%;
	border-radius: var(--tl-radius);
}

/* -------------------------------------------------- Pagination & footer */

.pagination .nav-links,
.comments-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
}

.pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
}

.site-footer {
	flex-shrink: 0;
	padding-block: 32px;
	border-top: 1px solid var(--tl-border);
	font-size: 0.9375rem;
	color: var(--tl-muted);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-info {
	margin: 0;
}

/* -------------------------------------------------------- Forms, widgets */

.search-form {
	display: flex;
	gap: 8px;
	max-width: 420px;
}

.search-field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	color: inherit;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-radius);
	background: #fff;
}

.search-submit,
.button,
button,
input[type="submit"] {
	padding: 10px 20px;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--tl-accent);
	border: 0;
	border-radius: var(--tl-radius);
	cursor: pointer;
	text-decoration: none;
}

.widget-area {
	font-size: 0.9375rem;
}

.widget {
	margin-bottom: 32px;
}

.widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li + li {
	margin-top: 8px;
}

.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list ol {
	list-style: none;
	padding-left: 24px;
}

/* ------------------------------------------------------- Accessibility */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 1000;
	padding: 12px 20px;
	background: #fff;
	color: var(--tl-text);
	border-radius: var(--tl-radius);
}

.skip-link:focus {
	top: 8px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--tl-accent);
	outline-offset: 2px;
}

.alignwide,
.alignfull {
	max-width: none;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

/* ------------------------------------------------------------ Breadcrumbs */

.tl-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--tl-muted);
}

.tl-breadcrumbs li + li::before {
	margin-right: 8px;
	content: "/";
	color: var(--tl-border);
}

.tl-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.tl-breadcrumbs a:hover {
	color: var(--tl-accent);
	text-decoration: underline;
}

.tl-breadcrumbs [aria-current="page"] {
	color: var(--tl-text);
	font-weight: 600;
}

/* Respect reduced-motion — an explicit Lighthouse accessibility expectation. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   HEADER AND FOOTER — matching the approved design
   Fonts: Poppins headings, Inter body. Blue links, orange buttons, light
   backgrounds only.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

h1, h2, h3, h4, .site-title { font-family: var(--tl-head); }

/* ---- header ---- */

.site-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--tl-border);
}
.site-header__inner { min-height: 74px; gap: 30px; }
.custom-logo { max-height: 34px; }
.site-title { font-family: var(--tl-head); font-weight: 700; letter-spacing: -.02em; }

.main-navigation ul { gap: 4px 32px; }
.main-navigation a {
	font-family: var(--tl-head); font-size: 15px; font-weight: 500;
	color: var(--tl-text); padding: 8px 0;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: var(--tl-accent); }
.main-navigation .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--tl-orange); }

.header-cta { display: flex; align-items: center; gap: 20px; }
.header-phone {
	font-family: var(--tl-head); font-size: 15px; font-weight: 600;
	color: var(--tl-text); white-space: nowrap; text-decoration: none;
}
.header-phone:hover { color: var(--tl-accent); }
.btn.btn-primary, .header-enquire {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--tl-head); font-size: 14px; font-weight: 600;
	background: var(--tl-orange); color: #fff;
	padding: 15px 30px; border: 0; border-radius: 0;
	text-decoration: none; transition: background .25s;
}
.btn.btn-primary:hover, .header-enquire:hover { background: var(--tl-orange-dark); color: #fff; }

/* ---- footer ---- */

.site-footer {
	background: var(--tl-sand); border-top: 1px solid var(--tl-border);
	padding-block: 96px 48px; color: var(--tl-muted); font-size: 15px;
}
.footer-top {
	text-align: center; padding-bottom: 48px; margin-bottom: 48px;
	border-bottom: 1px solid var(--tl-border);
}
.footer-top .custom-logo { margin: 0 auto 16px; max-height: 46px; }
.footer-name { font-family: var(--tl-head); font-size: 30px; font-weight: 700; color: var(--tl-text); }
.footer-tagline {
	font-family: var(--tl-head); font-size: 11px; font-weight: 600;
	letter-spacing: 2.6px; text-transform: uppercase; color: var(--tl-accent);
}

.footer-cols {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px; align-items: start;
}
.site-footer h4 {
	font-family: var(--tl-head); font-size: 19px; font-weight: 600;
	color: var(--tl-text); margin: 0 0 22px; text-transform: none; letter-spacing: 0;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 14px; line-height: 1.6; }
.site-footer li, .site-footer li a {
	font-family: var(--tl-head); font-size: 11px; font-weight: 500;
	letter-spacing: 1.76px; text-transform: uppercase; color: var(--tl-muted);
	text-decoration: none;
}
.site-footer li a:hover { color: var(--tl-accent); }

.footer-icons { display: flex; gap: 12px; margin-top: 24px; }
.footer-icons a {
	width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--tl-border); background: #fff; color: var(--tl-text);
	transition: all .25s;
}
.footer-icons svg { width: 17px; height: 17px; }
.footer-icons a:hover { background: var(--tl-accent); border-color: var(--tl-accent); color: #fff; }
.footer-icons a.soon { opacity: .4; }

.footer-legal {
	display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
	margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--tl-border);
}
.footer-legal a, .footer-legal span {
	font-family: var(--tl-head); font-size: 11px; font-weight: 500;
	letter-spacing: 1.76px; text-transform: uppercase; color: var(--tl-muted);
	text-decoration: none;
}
.footer-legal a:hover { color: var(--tl-accent); }
.footer-legal span { margin-left: auto; }

.footer-credit {
	margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--tl-border);
	text-align: center; font-size: 13.5px;
}
.footer-credit a { color: var(--tl-accent); font-weight: 600; }

/* ---- floating WhatsApp ---- */

.fab {
	position: fixed; right: 22px; bottom: 22px; z-index: 90;
	width: 54px; height: 54px; background: #25D366; color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 26px rgba(37,211,102,.4); transition: transform .25s;
}
.fab svg { width: 26px; height: 26px; }
.fab:hover { transform: scale(1.07); }

@media (max-width: 1000px) {
	.footer-cols { grid-template-columns: 1fr 1fr; gap: 34px; }
	.site-footer { padding-block: 64px 40px; }
	.footer-legal { gap: 18px; margin-top: 40px; }
	.footer-legal span { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
	.footer-cols { grid-template-columns: 1fr; }
	.site-header__inner { min-height: 62px; gap: 10px; }
	.custom-logo { max-height: 32px; }
	.header-phone { display: none; }
	.header-cta { gap: 8px; }
	.header-enquire { padding: 12px 16px; font-size: 13px; white-space: nowrap; }
}

/* bundled logo — same mark as the HTML design */
.site-logo { display: block; line-height: 0; }
.site-logo img { height: 34px; width: auto; display: block; }
.footer-logo { height: 46px; width: auto; margin: 0 auto 16px; display: block; }
@media (max-width: 640px) { .site-logo img { height: 30px; } }

/* drop-down menu — same panel as the HTML design */
.main-navigation li { position: relative; }
.main-navigation .sub-menu {
	position: absolute; top: 100%; left: -20px; min-width: 220px;
	background: #fff; border: 1px solid var(--tl-border);
	padding: 12px 0; margin: 0; list-style: none;
	display: block; opacity: 0; visibility: hidden;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	box-shadow: 0 18px 40px rgba(31,42,55,.08);
	z-index: 70;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.main-navigation .sub-menu a {
	display: block; padding: 10px 22px; font-size: 14.5px; white-space: nowrap;
}
.main-navigation .sub-menu a:hover { background: var(--tl-sand); }

/* ---- destination tiles ----
   Same shape and overlay as the approved HTML design: a 4:5 photo with the
   name and price over a dark gradient at the bottom. The tile is identified
   by the photo inside it, so it works without relying on a custom class. */

.e-con:has(> .tk-tile-img) {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	padding: 0;
	min-height: 0;
	justify-content: flex-end;
	gap: 0;
}

/* the photo fills the tile */
.tk-tile-img,
.tk-tile-img .elementor-widget-container,
.tk-tile-img figure,
.tk-tile-img figure > a {
	position: absolute; inset: 0;
	margin: 0; width: 100%; height: 100%;
}
.tk-tile-img img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.e-con:has(> .tk-tile-img):hover .tk-tile-img img { transform: scale(1.06); }

/* dark wash so the white text stays readable */
.e-con:has(> .tk-tile-img)::after {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top,
		rgba(14,34,48,.82) 0%,
		rgba(14,34,48,.15) 55%,
		transparent 80%);
	pointer-events: none;
}

/* name and price ride on top of the wash */
.e-con:has(> .tk-tile-img) > .elementor-widget-heading,
.e-con:has(> .tk-tile-img) > .elementor-widget-text-editor {
	position: relative; z-index: 2;
	width: 100%;
	padding-inline: 28px;
}
.e-con:has(> .tk-tile-img) > .elementor-widget-heading { padding-bottom: 8px; }
.e-con:has(> .tk-tile-img) > .elementor-widget-text-editor { padding-bottom: 30px; }
.e-con:has(> .tk-tile-img) > .elementor-widget-text-editor p { margin: 0; }

/* The tile rows are a real 3-column grid, exactly as in the design.
   Percentage widths plus a gap overflow the 1240px container and push the
   third tile onto its own line, which is what made the section twice as tall. */
.e-con:has(> .e-con > .tk-tile-img) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	align-items: stretch;
}
.e-con:has(> .tk-tile-img) { width: auto; }

@media (max-width: 900px) {
	.e-con:has(> .e-con > .tk-tile-img) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.e-con:has(> .e-con > .tk-tile-img) { grid-template-columns: 1fr; }
}

/* ============================================================
   MATCH THE APPROVED DESIGN — page geometry
   Measured from the HTML design and applied to Elementor's
   containers so the live pages line up exactly.
   ============================================================ */

/* Content column: a 1240px wrap with a 30px gutter = 1180px of content. */
.elementor > .e-con { padding-inline: 30px; }
.elementor .e-con > .e-con-inner { max-width: 1180px; }

/* Sections stack their blocks with no extra flex gap — the design uses
   margins on the heading block instead, so the gap doubled the spacing. */
.elementor > .e-con > .e-con-inner { gap: 0; }

/* Centred heading block above a grid: 930px wide, 50px clear beneath.
   Only a block made purely of text widgets counts as a heading block — a row
   of cards or figures also sits first in its section and must not be caught. */
.elementor > .e-con > .e-con-inner > .e-con:first-child:not(:has(.e-con)):has(> .elementor-widget-heading) {
	max-width: 930px;
	margin-inline: auto;
	margin-bottom: 50px;
	gap: 0;
}

/* Card and tile rows carry no padding of their own. */
.e-con:has(> .e-con > .tk-tile-img) { padding: 0; margin-bottom: 30px; }
.e-con:has(> .e-con > .tk-tile-img):last-child { margin-bottom: 0; }

/* ---- trust bar ----
   Four figures under the hero. The design gives this strip 40px of padding
   and no gaps between the number and its label; Elementor's defaults were
   adding roughly 130px of extra height. */

.e-con:has(.tk-stat-num) { padding-block: 0; }
.elementor > .e-con > .e-con-inner:has(.tk-stat-num) { padding-block: 40px; }

.e-con:has(> .e-con > .tk-stat-num) {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	padding: 0;
}
/* four equal columns — Elementor overrides grid-template-columns, so the
   widths are set on the figures themselves instead. */
.e-con:has(> .tk-stat-num) { flex: 1 1 0; width: auto; min-width: 0; }

@media (max-width: 780px) {
	.e-con:has(> .e-con > .tk-stat-num) { flex-wrap: wrap; }
	.e-con:has(> .tk-stat-num) { flex: 1 1 40%; }
}
.e-con:has(> .tk-stat-num) { padding: 0; gap: 18px; }
.tk-stat-num .elementor-heading-title { line-height: 1.2; }
.tk-stat-label p { margin: 0; }


/* ============================================================
   TT-FOOTER-DARK — footer matched to HTML FILES/assets/site.css
   ============================================================ */
.site-footer {
	background: linear-gradient(135deg, #1A1410 0%, #0F0C0A 100%) !important;
	border-top: 4px solid #2E9BD6 !important;
	padding-block: 56px 32px !important;
	color: rgba(250,247,240,.62) !important;
}
.site-footer h4 { color: #FAF7F0 !important; }
.site-footer li,
.site-footer li a,
.footer-legal a,
.footer-legal span { color: rgba(250,247,240,.62) !important; }
.site-footer li a:hover,
.footer-legal a:hover { color: #FAF7F0 !important; }
.site-footer li { margin-bottom: 12px !important; }
.site-footer li a.soon { opacity: .4; }

.footer-top {
	border-bottom: 1px solid rgba(250,247,240,.12) !important;
	padding-bottom: 32px !important;
	margin-bottom: 36px !important;
}
.footer-top .footer-logo { filter: none; opacity: 1; }
.footer-top .tagline { color: #2E9BD6 !important; }
.footer-cols { align-items: start; }

.footer-legal {
	border-top: 1px solid rgba(250,247,240,.12) !important;
	margin-top: 40px !important;
	padding-top: 26px !important;
}
.footer-credit {
	border-top: 1px solid rgba(250,247,240,.12) !important;
	color: rgba(250,247,240,.55) !important;
	margin-top: 20px !important;
	padding-top: 18px !important;
}
.footer-credit a { color: #2E9BD6 !important; }

/* social icons — 42px transparent circles, thin light outline */
.site-footer .footer-icons { gap: 14px !important; }
.site-footer .footer-icons a {
	width: 42px !important; height: 42px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(250,247,240,.18) !important;
	background: transparent !important;
	color: #FAF7F0 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
}
.site-footer .footer-icons svg { width: 18px !important; height: 18px !important; display: block; }
.site-footer .footer-icons a:hover {
	background: #2E9BD6 !important; border-color: #2E9BD6 !important; color: #fff !important;
}

@media (min-width: 1025px) {
	.site-footer {
		min-height: calc(100vh - 75px);
		display: flex;
		align-items: center;
		padding-block: 48px !important;
	}
	.site-footer > .wrap { width: 100%; }
}


/* ============================================================
   TT-WA-FLOAT — floating WhatsApp button (round, official logo)
   ============================================================ */
.wa-float {
	position: fixed;
	right: 32px;
	bottom: 32px;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 10px;
}
.wa-float-label {
	background: #1A7AB5;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	padding: 6px 12px;
	border-radius: 20px;
	opacity: 0;
	transform: translateX(10px);
	transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
}
.wa-float:hover .wa-float-label { opacity: 1; transform: translateX(0); }

.site-footer ~ .wa-float .wa-float-btn,
.wa-float .wa-float-btn {
	width: 58px !important;
	height: 58px !important;
	border-radius: 50% !important;
	background: #25D366 !important;
	color: #fff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 4px 20px rgba(37,211,102,.4) !important;
	transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1) !important;
}
.wa-float .wa-float-btn svg {
	width: 28px !important;
	height: 28px !important;
	display: block;
}
.wa-float .wa-float-btn:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 28px rgba(37,211,102,.55) !important;
	background: #25D366 !important;
	color: #fff !important;
}

@media (max-width: 640px) {
	.wa-float { right: 18px; bottom: 18px; }
	.wa-float .wa-float-btn { width: 52px !important; height: 52px !important; }
	.wa-float .wa-float-btn svg { width: 25px !important; height: 25px !important; }
	.wa-float-label { display: none; }
}


/* ===== TT-PKG-CARD : package cards matched to packages.html ===== */
/* card = the container that directly holds .tt-title */
.e-con:has(> .tt-title){display:flex;flex-direction:column}
/* media = the container that directly holds .tt-pill */
.e-con:has(> .tt-pill){position:relative;aspect-ratio:4/5;overflow:hidden;display:block}
.e-con:has(> .tt-pill) > .elementor-widget-image{width:100%;height:100%;margin:0}
.e-con:has(> .tt-pill) > .elementor-widget-image .elementor-widget-container,
.e-con:has(> .tt-pill) > .elementor-widget-image a,
.e-con:has(> .tt-pill) > .elementor-widget-image figure{display:block;width:100%;height:100%;margin:0}
.e-con:has(> .tt-pill) > .elementor-widget-image img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.e-con:has(> .tt-title):hover .elementor-widget-image img{transform:scale(1.06)}
.tt-pill{position:absolute;top:0;left:0;z-index:2;margin:0;width:auto;
  background:rgba(255,255,255,.95);padding:9px 14px}
.tt-pill.tt-pill-orange{background:#F97316;left:auto;right:0}
.tt-title{margin-top:25px}
.tt-title .elementor-heading-title{text-transform:none}
.tt-desc{margin-top:4px}
.tt-incl ul{list-style:none;padding:0;margin:12px 0 18px}
.tt-incl li{font-size:15px;padding-left:20px;position:relative;margin-bottom:7px;line-height:1.6}
.tt-incl li::before{content:"\2014";position:absolute;left:0;color:#2E9BD6}
.tt-price{margin-top:auto}
.tt-perperson{margin-top:4px}
.tt-btns{margin-top:14px}

/* ===== TT-CHIPS : filter row matched to packages.html ===== */
.tt-chips{display:flex;gap:0;flex-wrap:wrap;justify-content:center}
.tt-chips a{display:inline-block;padding:13px 24px;font-family:'Poppins',sans-serif;
  font-size:14.5px;font-weight:600;color:#1F2A37;text-decoration:none;
  border:1px solid #E2E6EA;margin:-1px 0 0 -1px;transition:all .25s cubic-bezier(.16,1,.3,1)}
.tt-chips a:hover{background:#EAF6FC}
.tt-chips a.active{background:#1F2A37;border-color:#1F2A37;color:#fff}
/* ===== end TT-PKG-CARD ===== */

/* ===== TT-CRUMBS : breadcrumb bar matched to the HTML files ===== */
.tt-crumbs{border-bottom:1px solid #E2E6EA;background:#fff}
.tt-crumbs-wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:30px;
  padding-block:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-family:'Inter',sans-serif;font-size:14px}
.tt-crumbs a{color:#5B6773;text-decoration:none}
.tt-crumbs a:hover{color:#2E9BD6}
.tt-crumbs i{color:#E2E6EA;font-style:normal}
.tt-crumbs span{color:#1F2A37}
/* chips sit in their own band, 50px above and below, like .section-sm */
.tt-chips{padding-block:50px}
@media(max-width:767px){.tt-crumbs-wrap{padding-inline:20px}.tt-chips{padding-block:32px}}


/* ===== TT-HTML-BLOCKS start ===== */
.tt-html{--white: #FFFFFF;
	--sand: #F5F5F5;          
	--pale: #EAF6FC;
	--blue: #2E9BD6;
	--blue-dark: #1E7BAE;
	--blue-light: #6EC6EF;
	--orange: #F97316;
	--orange-dark: #EA640C;
	--ink: #1F2A37;
	--body: #5B6773;
	--line: #E2E6EA;

	--font-head: 'Poppins', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;

	
	--section: 90px;
	--section-sm: 50px;
	--gutter: 30px;
	--max: 1200px;
	--max-narrow: 930px;      

	--ease: cubic-bezier(.22, .61, .36, 1);}
.tt-html{font-family:var(--font-body);color:var(--body);}
.tt-html img{max-width: 100%; display: block;}
.tt-html a{color: var(--blue); text-decoration: none;}
.tt-html p{margin: 0 0 1.3em;}
.tt-html h1, .tt-html h2, .tt-html h3, .tt-html h4{font-family: var(--font-head);
	color: var(--ink);
	margin: 0 0 20px;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.015em;
	text-transform: none;}
.tt-html h1{font-size: clamp(2.3rem, 4.6vw, 3.6rem);}
.tt-html h2{font-size: clamp(1.8rem, 3vw, 2.5rem);}
.tt-html h3{font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em;}
.tt-html h4{font-size: 1rem; font-weight: 600;}
.tt-html .wrap{width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);}
.tt-html .wrap-narrow{max-width: var(--max-narrow);}
.tt-html .section{padding-block: var(--section);}
.tt-html .section-sm{padding-block: var(--section-sm);}
.tt-html .bg-sand{background: var(--sand);}
.tt-html .bg-pale{background: var(--pale);}
.tt-html .center{text-align: center;}
.tt-html .grid{display: grid; gap: 30px;}
.tt-html .g2{grid-template-columns: repeat(2, 1fr);}
.tt-html .g3{grid-template-columns: repeat(3, 1fr);}
.tt-html .g4{grid-template-columns: repeat(4, 1fr);}
.tt-html .eyebrow{font-family: var(--font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 16px;
	display: block;}
.tt-html .lead{font-size: 18px; color: var(--body);}
.tt-html .section-head{max-width: var(--max-narrow);
	margin-inline: auto;
	margin-bottom: 50px;
	text-align: center;}
.tt-html .section-head p{margin-bottom: 0;}
.tt-html .textbox{max-width: var(--max-narrow);
	margin-inline: auto;
	background: var(--sand);
	padding: 80px 60px;
	text-align: center;}
.tt-html .btn{display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 600;
	padding: 16px 32px;
	border-radius: 0;
	border: 0;
	cursor: pointer;
	transition: all .3s var(--ease);}
.tt-html .btn-primary{background: var(--orange); color: #fff;}
.tt-html .btn-primary:hover{background: var(--orange-dark);}
.tt-html .btn-blue{background: var(--blue); color: #fff;}
.tt-html .btn-blue:hover{background: var(--blue-dark);}
.tt-html .btn-ghost{background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.8);}
.tt-html .btn-ghost:hover{background: #fff; color: var(--ink);}
.tt-html .btn-line{background: transparent; color: var(--ink); border: 1px solid var(--ink);}
.tt-html .btn-line:hover{background: var(--ink); color: #fff;}
.tt-html .view-link{display: inline-block;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	padding-bottom: 3px;
	border-bottom: 1px solid var(--ink);
	margin-top: 14px;}
.tt-html .view-link:hover{color: var(--blue); border-color: var(--blue);}
.tt-html .split{display: grid;
	grid-template-columns: calc(58% - 4px) calc(42% - 4px);
	gap: 8px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 600;}
.tt-html .split a{display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 6px; text-align: center; transition: background .25s, border-color .25s, color .25s;}
.tt-html .split .wa{background: var(--orange); color: #fff;}
.tt-html .split .wa:hover{background: var(--orange-dark); color: #fff;}
.tt-html .split .view{background: #fff; color: var(--ink); border: 1px solid #D5DBE1;}
.tt-html .split .view:hover{border-color: var(--blue); color: var(--blue);}
@media (max-width: 380px) {.tt-html .split{grid-template-columns: 1fr;}}
.tt-html .split-cta{grid-template-columns: 25% 75%; gap: 0;}
.tt-html .split-cta .call{background: var(--blue); color: #fff;}
.tt-html .split-cta .call:hover{background: var(--blue-dark);}
@media (max-width: 380px) {.tt-html .split-cta{grid-template-columns: 25% 75%;}}
.tt-html .trust{border-bottom: 1px solid var(--line); background: #fff;}
.tt-html .trust .wrap{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 40px;}
.tt-html .trust-item{text-align: center;}
.tt-html .trust-item strong{display: block; font-family: var(--font-head);
	font-size: 2.1rem; font-weight: 700; color: var(--blue); line-height: 1.2;}
.tt-html .trust-item span{font-family: var(--font-head); font-size: 10px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase; color: var(--body);}
.tt-html .card{background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	height: 100%;
	display: flex;
	flex-direction: column;}
.tt-html .card-media{position: relative; aspect-ratio: 4/5; overflow: hidden;}
.tt-html .card-media img{width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease);}
.tt-html .card:hover .card-media img{transform: scale(1.05);}
.tt-html .card-body{padding: 25px 0 0; display: flex; flex-direction: column; flex: 1;}
.tt-html .card h3{margin-bottom: 10px; font-size: 1.25rem;}
.tt-html .card p{font-size: 16px; margin-bottom: 14px;}
.tt-html .pill{position: absolute; top: 0; left: 0; z-index: 2;
	background: rgba(255,255,255,.95); color: var(--ink);
	font-family: var(--font-head); font-size: 10px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase; padding: 9px 14px;}
.tt-html .pill-orange{background: var(--orange); color: #fff; left: auto; right: 0;}
.tt-html .price{font-family: var(--font-head); font-weight: 700; color: var(--ink);
	font-size: 1.35rem;}
.tt-html .price small{display: block; font-size: 10px; font-weight: 700;
	letter-spacing: 2.5px; color: var(--body); margin-top: 4px;}
.tt-html .card-foot{margin-top: auto; padding-top: 18px;}
.tt-html .incl{list-style: none; padding: 0; margin: 0 0 18px;}
.tt-html .incl li{font-size: 15px; padding-left: 20px; position: relative; margin-bottom: 7px;}
.tt-html .incl li::before{content: "—"; position: absolute; left: 0; color: var(--blue);}
.tt-html .tile{position: relative; overflow: hidden; aspect-ratio: 4/5; display: block;}
.tt-html .tile img{width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease);}
.tt-html .tile:hover img{transform: scale(1.06);}
.tt-html .tile::after{content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(14,34,48,.82) 0%, rgba(14,34,48,.15) 55%, transparent 80%);}
.tt-html .tile-text{position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 28px; z-index: 2; color: #fff;}
.tt-html .tile-text h3{color: #fff; margin-bottom: 8px; font-size: 1.5rem; letter-spacing: -.01em;}
.tt-html .tile-text p{font-size: 15px; margin: 0 0 10px;}
.tt-html .tile-text .meta{font-family: var(--font-head); font-size: 10px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase;
	color: rgba(255,255,255,.9); display: flex; gap: 10px; align-items: center;}
.tt-html .tile-text .from{color: #fff;}
.tt-html .feature .ico{width: 46px; height: 46px; display: flex; align-items: center;
	justify-content: center; margin-bottom: 22px; font-size: 26px;}
.tt-html .feature h3{margin-bottom: 12px;}
.tt-html .feature p{font-size: 16px; margin: 0;}
.tt-html .step .num{font-family: var(--font-head); font-size: 3rem; font-weight: 700;
	color: var(--blue-light); line-height: 1; margin-bottom: 18px;}
.tt-html .step h3{margin-bottom: 10px;}
.tt-html .step p{font-size: 16px; margin: 0;}
.tt-html .quote{background: #fff; border: 1px solid var(--line); padding: 40px 34px; height: 100%;}
.tt-html .stars{color: var(--orange); letter-spacing: 4px; margin-bottom: 18px; font-size: 13px;}
.tt-html .quote p{color: var(--ink); font-size: 17px;}
.tt-html .who{display: flex; align-items: center; gap: 14px; margin-top: 24px;}
.tt-html .who .av{width: 42px; height: 42px; border-radius: 50%; background: var(--sand);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--blue);}
.tt-html .who strong{font-family: var(--font-head); font-size: 15px; font-weight: 600;
	color: var(--ink); display: block;}
.tt-html .who span{font-size: 13px;}
.tt-html .faq-item{border-bottom: 1px solid var(--line);}
.tt-html .faq-q{width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
	font-family: var(--font-head); font-size: 1.06rem; font-weight: 600;
	color: var(--ink); padding: 26px 44px 26px 0; position: relative;}
.tt-html .faq-q::after{content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	font-size: 20px; color: var(--blue); font-weight: 200; transition: transform .3s;}
.tt-html .faq-item.open .faq-q::after{transform: translateY(-50%) rotate(45deg);}
.tt-html .faq-a{max-height: 0; overflow: hidden; transition: max-height .4s var(--ease);}
.tt-html .faq-item.open .faq-a{max-height: 400px;}
.tt-html .faq-a p{padding-bottom: 26px; margin: 0; font-size: 16.5px;}
.tt-html .form-card{background: #fff; border: 1px solid var(--line); padding: 44px 40px;}
.tt-html .field{margin-bottom: 20px;}
.tt-html .field label{display: block; font-family: var(--font-head); font-size: 10px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase; color: var(--ink); margin-bottom: 9px;}
.tt-html .field input, .tt-html .field select, .tt-html .field textarea{width: 100%; padding: 14px 0; font: inherit; font-size: 16px; color: var(--ink);
	border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
	background: transparent; transition: border-color .25s;}
.tt-html .field input:focus, .tt-html .field select:focus, .tt-html .field textarea:focus{outline: none; border-color: var(--blue);}
.tt-html .field textarea{min-height: 90px; resize: vertical;}
.tt-html .contact-row{display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line);}
.tt-html .contact-row .ico{width: 34px; flex: 0 0 34px; font-size: 20px;}
.tt-html .contact-row strong{display: block; font-family: var(--font-head); font-size: 10px; font-weight: 700;
	letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink); margin-bottom: 4px;}
.tt-html .contact-row span, .tt-html .contact-row a{font-size: 16.5px;}
.tt-html .facts{background: var(--sand); padding: 46px 40px;}
.tt-html .facts h3{margin-bottom: 26px;}
.tt-html .facts dl{margin: 0;}
.tt-html .facts dt{font-family: var(--font-head); font-size: 10px; font-weight: 700;
	letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue);}
.tt-html .facts dd{margin: 5px 0 22px; color: var(--ink); font-size: 16.5px;}
.tt-html .strip{display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;}
.tt-html .strip img{aspect-ratio: 1; object-fit: cover; transition: opacity .4s;}
.tt-html .strip img:hover{opacity: .82;}
.tt-html .post-media{aspect-ratio: 4/5; overflow: hidden;}
.tt-html .post-media img{width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease);}
.tt-html .card:hover .post-media img{transform: scale(1.05);}
.tt-html .post-date{font-family: var(--font-head); font-size: 10px; font-weight: 700;
	letter-spacing: 2.5px; text-transform: uppercase;
	color: var(--body); margin-bottom: 12px; display: block;}
.tt-html .cta-band{background: var(--pale);}
.tt-html .chips{display: flex; gap: 0; flex-wrap: wrap; justify-content: center;}
.tt-html .chip{display: inline-block; padding: 13px 24px;
	font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: var(--ink);
	border: 1px solid var(--line); margin: -1px 0 0 -1px; transition: all .25s var(--ease);}
.tt-html .chip:hover{background: var(--sand); color: var(--blue);}
.tt-html .chip.active{background: var(--ink); border-color: var(--ink); color: #fff;}
.tt-html .card-media.ph{background: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 40px;}
.tt-html .post h2{font-size: 1.7rem; margin-top: 56px;}
.tt-html .post p{font-size: 18px; line-height: 1.85;}
.tt-html .post .answer{background: var(--sand); padding: 40px 44px; margin-bottom: 50px;}
.tt-html .post .answer p{margin: 0; color: var(--ink); font-size: 19px;}
.tt-html .tbl{width: 100%; border-collapse: collapse; margin: 26px 0 10px; font-size: 16.5px;}
.tt-html .tbl th{text-align: left; padding: 16px 18px; background: var(--sand);
	font-family: var(--font-head); font-size: 10px; font-weight: 700;
	letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink);
	border-bottom: 1px solid var(--line);}
.tt-html .tbl td{padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top;}
.tt-html .tbl td strong{color: var(--ink); font-family: var(--font-head); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;}
.tt-html .post .note{background: var(--pale); padding: 34px 40px; margin: 56px 0;}
.tt-html .post .note strong{font-family: var(--font-head); font-size: 11px; font-weight: 700;
	letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink);
	display: block; margin-bottom: 10px;}
.tt-html .post .note p{margin: 0; font-size: 17px;}
.tt-html .post .sources{font-size: 15px; color: var(--body); font-style: italic; margin-top: 46px;}
.tt-html .post .faq-item:first-child{border-top: 1px solid var(--line);}
.tt-html .trips{background: var(--sand); padding-block: 104px;}
.tt-html .trips-head{display: flex; align-items: flex-end; justify-content: space-between;
	gap: 30px; margin-bottom: 56px; flex-wrap: wrap;}
.tt-html .trips-head .txt{max-width: 640px;}
.tt-html .trips-head h2{margin-bottom: 14px;}
.tt-html .trips-head p{margin: 0;}
.tt-html .trips-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.tt-html .trip{display: block;}
.tt-html .trip-media{aspect-ratio: 256/319; overflow: hidden; margin-bottom: 22px;}
.tt-html .trip-media img{width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease);}
.tt-html .trip:hover .trip-media img{transform: scale(1.05);}
.tt-html .trip .dur{font-family: var(--font-head); font-size: 11px; font-weight: 600;
	letter-spacing: 2.2px; text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 10px;}
.tt-html .trip h3{font-size: 1.45rem; font-weight: 700; margin-bottom: 8px;}
.tt-html .trip .tag{display: inline-block; font-family: var(--font-head); font-size: 10px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase; color: #fff; background: var(--orange);
	padding: 5px 10px; margin-bottom: 12px;}
.tt-html .trip p{font-size: 16px; margin-bottom: 14px;}
.tt-html .trip .from{font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 1.15rem;}
.tt-html .cta-line{background: var(--sand); padding: 104px 0 56px; text-align: center;}
.tt-html .cta-line h2{max-width: 820px; margin-inline: auto; margin-bottom: 34px;}
.tt-html .reveal{opacity: 1; transform: none;}
@media (prefers-reduced-motion: reduce) {.tt-html .reveal{opacity: 1; transform: none; transition: none;}}
@media (max-width: 1000px) {.tt-html .g4, .tt-html .g3{grid-template-columns: repeat(2, 1fr);}.tt-html .strip{grid-template-columns: repeat(3, 1fr);}.tt-html .textbox{padding: 56px 34px;}}
@media (max-width: 640px) {.tt-html h2{font-size: 1.65rem;}.tt-html .g2, .tt-html .g3, .tt-html .g4{grid-template-columns: 1fr;}.tt-html .trust .wrap{grid-template-columns: repeat(2, 1fr); gap: 30px;}.tt-html .form-card{padding: 30px 22px;}.tt-html .post .answer{padding: 26px 22px;}}
.tt-html .blog-layout{display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 50px; align-items: start;}
.tt-html .sidebar{position: sticky; top: 100px; display: flex; flex-direction: column; gap: 34px;}
.tt-html .side-block{border: 1px solid var(--line); padding: 28px 26px;}
.tt-html .side-block h3{margin-bottom: 16px; font-size: 1.05rem;}
.tt-html .side-block ul{list-style: none; padding: 0; margin: 0;}
.tt-html .side-block li{margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line);}
.tt-html .side-block li:last-child{margin-bottom: 0; padding-bottom: 0; border-bottom: 0;}
.tt-html .side-block a{font-size: 15.5px; color: var(--body); line-height: 1.5; display: block;}
.tt-html .side-block a:hover{color: var(--blue);}
.tt-html .side-cta{background: var(--pale); border-color: transparent;}
.tt-html .side-cta p{font-size: 15.5px; margin-bottom: 18px;}
.tt-html .post .sources{font-style: normal; margin-top: 56px; border-top: 1px solid var(--line); padding-top: 34px;}
.tt-html .post .sources h3{margin-bottom: 14px;}
.tt-html .post .sources p{font-size: 16px;}
.tt-html .post .sources ul{padding-left: 20px; margin: 0;}
.tt-html .post .sources li{margin-bottom: 9px; font-size: 15.5px;}
@media (max-width: 1000px) {.tt-html .blog-layout{grid-template-columns: 1fr; gap: 44px;}.tt-html .sidebar{position: static;}}
.tt-html .blog-layout{display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 50px; align-items: start;}
.tt-html .sidebar{position: sticky; top: 100px; display: flex; flex-direction: column; gap: 34px;}
.tt-html .side-block{border: 1px solid var(--line); padding: 28px 26px;}
.tt-html .side-block h3{margin-bottom: 16px; font-size: 1.05rem;}
.tt-html .side-block ul{list-style: none; padding: 0; margin: 0;}
.tt-html .side-block li{margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line);}
.tt-html .side-block li:last-child{margin-bottom: 0; padding-bottom: 0; border-bottom: 0;}
.tt-html .side-block a{font-size: 15.5px; color: var(--body); line-height: 1.5; display: block;}
.tt-html .side-block a:hover{color: var(--blue);}
.tt-html .side-cta{background: var(--pale); border-color: transparent;}
.tt-html .side-cta p{font-size: 15.5px; margin-bottom: 18px;}
.tt-html .post .sources{font-style: normal; margin-top: 56px; border-top: 1px solid var(--line); padding-top: 34px;}
.tt-html .post .sources h3{margin-bottom: 14px;}
.tt-html .post .sources p{font-size: 16px;}
.tt-html .post .sources ul{padding-left: 20px; margin: 0;}
.tt-html .post .sources li{margin-bottom: 9px; font-size: 15.5px;}
@media (max-width: 1000px) {.tt-html .blog-layout{grid-template-columns: 1fr; gap: 44px;}.tt-html .sidebar{position: static;}}
.tt-html .quicklinks{border-bottom: 1px solid var(--line); background: #fff;}
.tt-html .quicklinks .wrap{display: flex; flex-wrap: wrap; justify-content: center;
	gap: 46px; padding-block: 52px;}
.tt-html .quicklinks a{font-family: var(--font-head); font-size: 14px; font-weight: 600;
	color: var(--ink); position: relative; padding-bottom: 5px;}
.tt-html .quicklinks a::after{content: ""; position: absolute; left: 50%; right: 50%; bottom: 0;
	height: 1px; background: var(--orange); transition: all .3s var(--ease);}
.tt-html .quicklinks a:hover{color: var(--blue);}
.tt-html .quicklinks a:hover::after{left: 0; right: 0;}
.tt-html .text-box{background: var(--sand);}
.tt-html .text-box .inner{max-width: var(--max-narrow); margin-inline: auto;
	padding: 80px 40px; text-align: center;}
.tt-html .text-box h2{margin-bottom: 26px;}
.tt-html .text-box p{font-size: 19px; line-height: 1.85; margin-bottom: 0;}
.tt-html .text-box p + p{margin-top: 20px;}
.tt-html .exp{display: grid; grid-template-columns: 51% 49%; min-height: 620px;}
.tt-html .exp + .exp{margin-top: 0;}
.tt-html .exp-media{position: relative; overflow: hidden;}
.tt-html .exp-media img{width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease);}
.tt-html .exp:hover .exp-media img{transform: scale(1.04);}
.tt-html .exp-text{display: flex; flex-direction: column; justify-content: center;
	padding: 70px 90px; background: #fff;}
.tt-html .exp-text .eyebrow{color: var(--orange);}
.tt-html .exp-text h3{font-size: 2rem; font-weight: 700; margin-bottom: 18px; letter-spacing: -.02em;}
.tt-html .exp-text p{font-size: 17.5px; line-height: 1.8; margin-bottom: 26px;}
.tt-html .exp-text .view-link{align-self: flex-start;}
.tt-html .exp.flip .exp-media{order: 2;}
.tt-html .exp.flip .exp-text{order: 1;}
.tt-html .exp.alt .exp-text{background: var(--sand);}
.tt-html .quote-band{position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden;}
.tt-html .quote-band-bg{position: absolute; inset: 0;}
.tt-html .quote-band-bg img{width: 100%; height: 100%; object-fit: cover;}
.tt-html .quote-band-bg::after{content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 42%, rgba(255,255,255,.22) 75%, rgba(255,255,255,0) 100%);}
.tt-html .quote-band .inner{position: relative; z-index: 2; max-width: 620px;}
.tt-html .quote-band blockquote{margin: 0 0 30px; font-family: var(--font-head); font-weight: 300;
	font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.4; color: var(--ink);}
.tt-html .quote-band cite{font-style: normal; font-family: var(--font-head); font-size: 12px;
	font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue);
	display: block;}
.tt-html .quote-band cite span{display: block; color: var(--body); font-weight: 500; margin-top: 6px; letter-spacing: 1.5px;}
.tt-html .promo-band{display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; background: var(--pale);}
.tt-html .promo-media{overflow: hidden;}
.tt-html .promo-media img{width: 100%; height: 100%; object-fit: cover;}
.tt-html .promo-text{display: flex; flex-direction: column; justify-content: center; padding: 60px 80px;}
.tt-html .promo-text h2{margin-bottom: 16px;}
.tt-html .promo-text p{font-size: 17.5px; margin-bottom: 28px;}
.tt-html .promo-text .btn{align-self: flex-start;}
@media (max-width: 900px) {.tt-html .exp, .tt-html .promo-band{grid-template-columns: 1fr;}.tt-html .exp.flip .exp-media{order: 0;}.tt-html .exp.flip .exp-text{order: 0;}.tt-html .exp-media{min-height: 300px;}.tt-html .exp-text{padding: 44px 28px;}.tt-html .promo-text{padding: 44px 28px;}.tt-html .promo-media{min-height: 260px;}.tt-html .quicklinks .wrap{gap: 22px 26px; padding-block: 30px;}.tt-html .quicklinks a{font-size: 13px;}.tt-html .text-box .inner{padding: 54px 24px;}.tt-html .quote-band{min-height: 480px;}.tt-html .quote-band-bg::after{background: linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 60%, rgba(255,255,255,.6) 100%);}}
.tt-html .pgrid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;}
.tt-html .pcard{background: #fff; border: 1px solid var(--line); border-radius: 14px;
	overflow: hidden; display: flex; flex-direction: column;
	box-shadow: 0 2px 14px rgba(20,30,45,.06); transition: box-shadow .3s, transform .3s;}
.tt-html .pcard:hover{box-shadow: 0 10px 28px rgba(20,30,45,.12); transform: translateY(-3px);}
.tt-html .pcard-feat{border: 2px solid var(--orange); box-shadow: 0 6px 22px rgba(20,30,45,.10);}
.tt-html .pcard-media{position: relative; aspect-ratio: 16/10; overflow: hidden;}
.tt-html .pcard-media img{width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease);}
.tt-html .pcard:hover .pcard-media img{transform: scale(1.05);}
.tt-html .pcard-flag{position: absolute; top: 14px; left: 14px; background: var(--orange); color: #fff;
	font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
	text-transform: uppercase; padding: 8px 16px; border-radius: 100px;}
.tt-html .pcard-body{padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1;}
.tt-html .pcard-meta{display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 10px;}
.tt-html .pcard-dur{font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
	letter-spacing: 1.6px; text-transform: uppercase; color: #6B7580;}
.tt-html .pcard-price{font-size: 13px; color: #6B7580; white-space: nowrap;}
.tt-html .pcard-price b{font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--orange); margin-left: 3px;}
.tt-html .pcard h3{font-size: 22px; line-height: 1.25; margin-bottom: 10px;}
.tt-html .pcard p{font-size: 15px; line-height: 1.65; color: var(--body); margin-bottom: 16px; flex: 1;}
.tt-html .pcard-places{display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;}
.tt-html .pcard-places span{background: var(--pale); color: #1E6E96; font-size: 12.5px; font-weight: 500;
	padding: 7px 14px; border-radius: 100px;}
.tt-html .pcard-actions{display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px;}
.tt-html .pcard-cta{background: var(--orange); color: #fff; font-family: var(--font-head); font-size: 12px;
	font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
	padding: 11px 8px; border-radius: 7px; text-align: center; transition: background .25s;}
.tt-html .pcard-cta:hover{background: var(--orange-dark); color: #fff;}
.tt-html .pcard-alt{border: 1px solid #D5DBE1; color: var(--ink); font-size: 13px; font-weight: 600;
	padding: 11px 8px; border-radius: 7px; text-align: center; background: #fff;
	transition: border-color .25s, color .25s;}
.tt-html .pcard-alt:hover{border-color: var(--blue); color: var(--blue);}
@media (max-width: 980px) {.tt-html .pgrid{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 640px) {.tt-html .pgrid{grid-template-columns: 1fr;}}

/* ===== TT-HTML-BLOCKS end ===== */

/* ---- HERO BANNERS - from the approved HTML design ---- */
.tt-html .hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; }
.tt-html .hero-sm { min-height: 44vh; }
.tt-html .hero-md { min-height: 60vh; }
.tt-html .hero-bg { position: absolute; inset: 0; }
.tt-html .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.tt-html .hero-bg::after { content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(18,42,60,.6) 0%, rgba(18,42,60,.26) 55%, rgba(18,42,60,.08) 100%); }
.tt-html .hero-inner { position: relative; z-index: 2; color: #fff; max-width: 780px; padding-block: 70px; }
.tt-html .hero-inner h1 { color: #fff; }
.tt-html .hero-inner .eyebrow { color: #CFEAF8; }
.tt-html .hero-inner p { color: rgba(255,255,255,.95); font-size: 18px; max-width: 560px;
	font-family: var(--font-body); letter-spacing: .3px; }
.tt-html .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.tt-html .hero-sm .hero-inner, .tt-html .hero-md .hero-inner { padding-block: 50px; }
@media (max-width: 640px) {
  .tt-html .hero { min-height: 74vh; }
  .tt-html .hero-actions .btn { width: 100%; }
}

/* ---- FULL-WIDTH BANNERS - hero runs edge to edge ---- */
.elementor > .e-con:has(.tt-html > .hero) { padding-inline: 0; }
.elementor > .e-con:has(.tt-html > .hero) > .e-con-inner { max-width: none; }
.tt-html .hero .wrap { max-width: 1240px; margin-inline: auto; padding-inline: 30px; width: 100%; }

/* ---- FULL-WIDTH BANNERS on the Elementor-built pages (Home, About, Destinations, Packages) ---- */
.elementor > .e-con:first-child:not(:has(.tt-html)) {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}
.elementor > .e-con:first-child:not(:has(.tt-html)) > .e-con-inner {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 30px;
	width: 100%;
}

/* ---- Elementor pages run full width; each block keeps its own 1180px content ---- */
.trishika-lite-elementor .site-content > .site-container {
	max-width: none;
	padding-inline: 0;
}

/* ---- SQUARE CORNERS - no rounding on cards, photos, boxes or buttons ---- */
.elementor .e-con,
.elementor .e-con-inner,
.elementor img,
.elementor .elementor-widget-image img,
.tt-html img,
.tt-html .card,
.tt-html .post-media,
.tt-html .post-media img,
.tt-html .form-card,
.tt-html .field input,
.tt-html .field select,
.tt-html .field textarea,
.tt-html .note,
.tt-html .sources,
.tt-html .faq-item,
.tt-html .quick-facts,
.tt-html .pkg-card {
	border-radius: 0 !important;
}


/* ---- Live enquiry form - design card look (v2) ---- */
.elementor-widget-shortcode .fluentform {
	background: #fff;
	border: 1px solid var(--tl-border);
	padding: 32px;
	box-shadow: 0 18px 40px rgba(31,42,55,.06);
}
.elementor-widget-shortcode .ff-el-input--label label {
	font-family: var(--tl-head);
	font-size: 11px; font-weight: 600;
	letter-spacing: 1.6px; text-transform: uppercase;
	color: var(--tl-muted);
}
.elementor-widget-shortcode input[type="text"],
.elementor-widget-shortcode input[type="email"],
.elementor-widget-shortcode input[type="tel"],
.elementor-widget-shortcode input[type="date"],
.elementor-widget-shortcode select,
.elementor-widget-shortcode textarea {
	border: 0; border-bottom: 1px solid var(--tl-border);
	border-radius: 0; padding: 10px 0; background: transparent;
}
.elementor-widget-shortcode input:focus,
.elementor-widget-shortcode select:focus,
.elementor-widget-shortcode textarea:focus { border-bottom-color: var(--tl-accent); outline: none; }
.elementor-widget-shortcode .ff-btn-submit {
	width: 100%; background: var(--tl-orange) !important;
	border: 0; border-radius: 0; padding: 15px 30px;
	font-family: var(--tl-head); font-weight: 600; color: #fff;
}
.elementor-widget-shortcode .ff-btn-submit:hover { background: var(--tl-orange-dark) !important; }

/* ---- FIX PACK 1 ---- */

/* Theme's own "Next post" link - the design has its own guides strip instead */
.trishika-lite-elementor .post-navigation { display: none; }

/* Every design block runs edge to edge; the .wrap inside keeps text at 1240px.
   This covers the map, Before you write, Plan your trip and every other band. */
.elementor > .e-con:has(> .e-con-inner > .elementor-widget-html .tt-html),
.elementor > .e-con:has(> .elementor-widget-html .tt-html) {
	padding-inline: 0;
	max-width: none;
}
.elementor > .e-con:has(.tt-html) > .e-con-inner { max-width: none; padding-inline: 0; }
.tt-html .wrap {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 30px;
	width: 100%;
}
.tt-html iframe { display: block; width: 100%; }

/* ---- MAP + OFFICE CARD - contact page ---- */
.tt-html .tt-map-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	background: #fff;
	border: 1px solid var(--tl-border);
	box-shadow: 0 18px 40px rgba(31,42,55,.10);
	padding: 28px 32px;
	margin-top: -56px;
	position: relative;
	z-index: 2;
}
.tt-html .tt-map-info { min-width: 260px; flex: 1 1 340px; }
.tt-html .tt-map-info h3 {
	font-family: var(--tl-head);
	font-size: 22px; font-weight: 700;
	margin: 6px 0 8px;
	color: var(--tl-text);
}
.tt-html .tt-map-info p {
	margin: 0; font-size: 15px; line-height: 1.65; color: var(--tl-muted);
}
.tt-html .tt-map-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tt-html .tt-map-actions .btn {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 48px; padding: 0 26px;
	font-family: var(--tl-head); font-size: 15px; font-weight: 600;
	text-decoration: none; border-radius: 0; cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tt-html .tt-map-actions .btn svg { width: 18px; height: 18px; flex: none; }
.tt-html .tt-map-actions .btn-primary { background: var(--tl-orange); color: #fff; border: 1px solid var(--tl-orange); }
.tt-html .tt-map-actions .btn-primary:hover { background: var(--tl-orange-dark); border-color: var(--tl-orange-dark); }
.tt-html .tt-map-actions .btn-outline { background: #fff; color: var(--tl-text); border: 1px solid var(--tl-border); }
.tt-html .tt-map-actions .btn-outline:hover { border-color: var(--tl-accent); color: var(--tl-accent); }
.tt-html .tt-map-actions .btn:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 2px; }

@media (max-width: 780px) {
	.tt-html .tt-map-card { margin-top: 0; padding: 24px; gap: 20px; }
	.tt-html .tt-map-actions { width: 100%; }
	.tt-html .tt-map-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-html .tt-map-actions .btn { transition: none; }
}

/* ==========================================================
   PACKAGE CARDS - grouped by destination
   ========================================================== */
.tt-html .tt-pkg-group { padding-block: 72px; }
.tt-html .tt-pkg-group:nth-of-type(even) { background: var(--tl-sand); }

.tt-html .tt-pkg-head {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: space-between; gap: 20px; margin-bottom: 36px;
}
.tt-html .tt-pkg-head h2 {
	font-family: var(--tl-head); font-size: 34px; font-weight: 700;
	margin: 4px 0 6px; color: var(--tl-text);
}
.tt-html .tt-pkg-head p { margin: 0; color: var(--tl-muted); font-size: 15.5px; }

.tt-html .tt-pkg-grid {
	display: grid; gap: 30px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tt-html .tt-pkg {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--tl-border);
	overflow: hidden; transition: box-shadow .25s ease, transform .25s ease;
}
.tt-html .tt-pkg:hover { box-shadow: 0 18px 40px rgba(31,42,55,.12); transform: translateY(-3px); }

.tt-html .tt-pkg-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tt-html .tt-pkg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-html .tt-pkg-nights {
	position: absolute; top: 0; left: 0;
	background: rgba(15,23,32,.86); color: #fff;
	font-family: var(--tl-head); font-size: 11.5px; font-weight: 600;
	letter-spacing: 1.6px; text-transform: uppercase; padding: 9px 16px;
}

.tt-html .tt-pkg-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.tt-html .tt-pkg-body h3 {
	font-family: var(--tl-head); font-size: 20px; font-weight: 700;
	margin: 0 0 6px; color: var(--tl-text); line-height: 1.3;
}
.tt-html .tt-pkg-route {
	margin: 0 0 10px; font-family: var(--tl-head);
	font-size: 12px; font-weight: 600; letter-spacing: 1.2px;
	text-transform: uppercase; color: var(--tl-accent);
}
.tt-html .tt-pkg-blurb { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--tl-muted); }

.tt-html .tt-pkg-incl { list-style: none; margin: 0 0 20px; padding: 0; }
.tt-html .tt-pkg-incl li {
	position: relative; padding-left: 22px; margin-bottom: 7px;
	font-size: 14px; color: var(--tl-muted);
}
.tt-html .tt-pkg-incl li::before {
	content: ""; position: absolute; left: 0; top: 7px;
	width: 12px; height: 7px; border-left: 2px solid var(--tl-accent);
	border-bottom: 2px solid var(--tl-accent); transform: rotate(-45deg);
}

.tt-html .tt-pkg-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--tl-border); }
.tt-html .tt-pkg-price {
	font-family: var(--tl-head); font-size: 26px; font-weight: 700;
	color: var(--tl-text); margin-bottom: 16px;
}
.tt-html .tt-pkg-price small {
	display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.6px;
	text-transform: uppercase; color: var(--tl-muted); margin-top: 2px;
}

/* ---- buttons: one size everywhere a package appears ---- */
.tt-html .tt-pkg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tt-html .tt-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 20px;
	font-family: var(--tl-head); font-size: 14.5px; font-weight: 600;
	text-align: center; text-decoration: none; border-radius: 0;
	cursor: pointer; white-space: nowrap;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tt-html .tt-btn-primary { background: var(--tl-orange); color: #fff; border: 1px solid var(--tl-orange); }
.tt-html .tt-btn-primary:hover { background: var(--tl-orange-dark); border-color: var(--tl-orange-dark); color: #fff; }
.tt-html .tt-btn-outline { background: #fff; color: var(--tl-text); border: 1px solid var(--tl-border); }
.tt-html .tt-btn-outline:hover { border-color: var(--tl-accent); color: var(--tl-accent); }
.tt-html .tt-btn-ghost {
	background: transparent; color: var(--tl-accent);
	border: 1px solid var(--tl-accent); min-height: 48px; padding: 0 24px;
}
.tt-html .tt-btn-ghost:hover { background: var(--tl-accent); color: #fff; }
.tt-html .tt-btn:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 2px; }

@media (max-width: 1000px) {
	.tt-html .tt-pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.tt-html .tt-pkg-grid { grid-template-columns: 1fr; gap: 24px; }
	.tt-html .tt-pkg-group { padding-block: 48px; }
	.tt-html .tt-pkg-head h2 { font-size: 28px; }
	.tt-html .tt-pkg-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-html .tt-pkg, .tt-html .tt-btn { transition: none; }
	.tt-html .tt-pkg:hover { transform: none; }
}

/* ---- CUSTOM TRIP CARD - an invitation, not a third product ---- */
.tt-html .tt-pkg-custom {
	background: #EAF4FB;
	border: 1px dashed var(--tl-accent);
	box-shadow: none;
}
.tt-html .tt-pkg-custom:hover {
	background: #E1EFFA;
	box-shadow: none;
	transform: none;
}
.tt-html .tt-pkg-custom .tt-pkg-body { justify-content: center; padding: 32px 24px; }
.tt-html .tt-pkg-tag {
	display: inline-block; margin-bottom: 10px;
	font-family: var(--tl-head); font-size: 11px; font-weight: 600;
	letter-spacing: 1.8px; text-transform: uppercase; color: var(--tl-accent);
}
.tt-html .tt-pkg-custom h3 { font-size: 22px; }
.tt-html .tt-pkg-custom .tt-pkg-foot { border-top-color: rgba(46,155,214,.28); }
.tt-html .tt-pkg-custom .tt-pkg-price { font-size: 19px; }
.tt-html .tt-pkg-actions-single { grid-template-columns: 1fr; }

/* ==========================================================
   ALIGNMENT + RHYTHM FIX
   Every band is full width; the content inside every band
   lines up on the same 1240px column.
   ========================================================== */

/* the enquiry form row was sitting 85px left of everything else */
.elementor > .e-con:has(> .e-con-inner > .elementor-widget-shortcode),
.elementor > .e-con:has(.elementor-widget-shortcode) > .e-con-inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 30px;
	width: 100%;
	box-sizing: border-box;
}

/* one vertical rhythm across the whole site */
.tt-html .tt-pkg-group { padding-block: 90px; }
.tt-html section.section,
.tt-html section.section.bg-sand,
.tt-html section.section.bg-pale,
.tt-html section.cta-band { padding-block: 90px; }
.tt-html section.section-sm { padding-block: 60px; }

@media (max-width: 640px) {
	.tt-html .tt-pkg-group,
	.tt-html section.section,
	.tt-html section.cta-band { padding-block: 56px; }
	.tt-html section.section-sm { padding-block: 40px; }
}

/* enquiry band: the outer padding was doubling up with the inner column */
.elementor > .e-con:has(.elementor-widget-shortcode) { padding-inline: 0; }

/* inside the enquiry band the column already provides the gutter,
   so the .wrap inside it must not add a second one */
.elementor > .e-con:has(.elementor-widget-shortcode) .tt-html .wrap {
	padding-inline: 0;
	max-width: none;
}

/* ---- MOST BOOKED - the middle option carries a badge ---- */
.tt-html .tt-pkg-flag {
	position: absolute; top: 0; right: 0;
	background: var(--tl-orange); color: #fff;
	font-family: var(--tl-head); font-size: 11.5px; font-weight: 600;
	letter-spacing: 1.6px; text-transform: uppercase; padding: 9px 16px;
}
.tt-html .tt-pkg-featured { border-color: var(--tl-orange); }
.tt-html .tt-pkg-featured .tt-pkg-price { color: var(--tl-orange-dark); }
.tt-html .tt-trip-block .tt-pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tt-html .tt-trip-block .section-head { margin-bottom: 40px; }
@media (max-width: 1000px) {
	.tt-html .tt-trip-block .tt-pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.tt-html .tt-trip-block .tt-pkg-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   MOTION — 150-300ms, ease-out, never hover-only for anything
   that matters. Everything below is decoration on top of a
   state that already works without it.
   ========================================================== */

/* --- links: underline grows from the left --- */
.tt-html a:not(.tt-btn):not(.btn):not(.tt-card-link) {
	position: relative;
	transition: color .2s ease-out;
}
.tt-html .tt-pkg-blurb a,
.tt-html p a,
.tt-html li a {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .25s ease-out, color .2s ease-out;
	text-decoration: none;
}
.tt-html p a:hover,
.tt-html li a:hover { background-size: 100% 1px; }

/* --- photos inside cards: slow zoom --- */
.tt-html .tt-pkg-media img,
.tt-html .post-media img,
.tt-html .card-media img {
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
	will-change: transform;
}
.tt-html .tt-pkg:hover .tt-pkg-media img,
.tt-html .card:hover .post-media img { transform: scale(1.05); }

/* --- buttons: lift + shadow, and the arrow slides --- */
.tt-html .tt-btn,
.tt-html .btn {
	transition: background-color .2s ease-out, color .2s ease-out,
	            border-color .2s ease-out, transform .18s ease-out, box-shadow .2s ease-out;
}
.tt-html .tt-btn:hover,
.tt-html .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31,42,55,.16); }
.tt-html .tt-btn:active,
.tt-html .btn:active { transform: translateY(0); box-shadow: none; }

/* --- guide cards and read links --- */
.tt-html .card {
	transition: box-shadow .25s ease-out, transform .25s ease-out;
}
.tt-html .card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(31,42,55,.12); }
.tt-html .view-link {
	display: inline-block;
	transition: color .2s ease-out, transform .2s ease-out;
}
.tt-html .view-link:hover { transform: translateX(4px); color: var(--tl-accent); }

/* --- destination tiles on Home and Destinations --- */
.e-con:has(> .tk-tile-img) { transition: transform .3s ease-out; }
.e-con:has(> .tk-tile-img):hover { transform: translateY(-4px); }

/* --- header links --- */
.main-navigation a { transition: color .2s ease-out; }
.header-enquire, .btn.btn-primary {
	transition: background-color .2s ease-out, transform .18s ease-out;
}
.header-enquire:hover { transform: translateY(-1px); }

/* --- the FAQ rows --- */
.tt-html .faq-item button { transition: color .2s ease-out; }
.tt-html .faq-item:hover button { color: var(--tl-accent); }

/* --- everything off for people who ask for less motion --- */
@media (prefers-reduced-motion: reduce) {
	.tt-html *, .e-con, .header-enquire {
		transition: none !important;
		animation: none !important;
	}
	.tt-html .tt-pkg:hover .tt-pkg-media img,
	.tt-html .card:hover,
	.tt-html .tt-btn:hover,
	.e-con:has(> .tk-tile-img):hover { transform: none !important; }
}

/* --- touch screens: no hover lift, it sticks after tapping --- */
@media (hover: none) {
	.tt-html .tt-btn:hover,
	.tt-html .card:hover,
	.tt-html .tt-pkg:hover { transform: none; box-shadow: none; }
}

/* ==========================================================
   MOBILE
   ========================================================== */

/* the header Enquire button crowds a small screen — the floating
   WhatsApp button and the in-page forms already cover the same job */
@media (max-width: 640px) {
	.site-header .header-enquire { display: none; }
	.site-header__inner { gap: 12px; }
	.custom-logo, .site-logo img { max-height: 30px; }

	/* text sizes that were set for a wide screen */
	.tt-html .hero-inner h1 { font-size: clamp(30px, 8vw, 40px); line-height: 1.15; }
	.tt-html h2 { font-size: clamp(24px, 6.5vw, 30px); line-height: 1.25; }
	.tt-html .hero-inner p { font-size: 16px; }
	.tt-html .lead { font-size: 16.5px; }

	/* stop long words and prices breaking the layout */
	.tt-html h1, .tt-html h2, .tt-html h3 { overflow-wrap: break-word; }
	.tt-html .tt-pkg-price { font-size: 22px; }

	/* tables in the blog guides */
	.tt-html table { font-size: 14px; }
	.tt-html div[style*="overflow-x"] { -webkit-overflow-scrolling: touch; }
}

/* nothing may push the page sideways */
html, body { overflow-x: hidden; }
.tt-html img, .tt-html iframe, .tt-html table { max-width: 100%; }

/* ==========================================================
   HEADER FIX — menu button was white on white and invisible
   ========================================================== */
.menu-toggle {
	color: var(--tl-text);
	border-color: var(--tl-border);
	background: #fff;
	transition: border-color .2s ease-out, color .2s ease-out;
}
.menu-toggle:hover { border-color: var(--tl-accent); color: var(--tl-accent); }
.menu-toggle:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 2px; }
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after { background: currentColor; }

/* the Enquire button hides as soon as the menu collapses, not 260px later */
@media (max-width: 899px) {
	.site-header .header-enquire { display: none; }
	.site-header__inner { gap: 12px; }
}

/* open menu: readable, full width, comfortable rows */
@media (max-width: 899px) {
	.main-navigation.is-open {
		background: #fff;
		border-top: 1px solid var(--tl-border);
		padding: 8px 0 14px;
	}
	.main-navigation.is-open a { padding: 12px 4px; font-size: 16px; }
	.main-navigation.is-open .sub-menu a { font-size: 15px; }
}

/* ==========================================================
   MOBILE MENU — the desktop hover dropdown was leaking in and
   leaving the sub-items invisible (opacity 0) while still
   taking up space. On mobile the sub-menu is just a nested list.
   ========================================================== */
@media (max-width: 899px) {
	.main-navigation .sub-menu {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		display: block !important;
		box-shadow: none !important;
		border: 0 !important;
		background: transparent !important;
		padding: 0 0 0 14px !important;
		margin: 2px 0 6px !important;
		border-left: 2px solid var(--tl-border) !important;
		min-width: 0 !important;
	}
	.main-navigation .sub-menu a {
		padding: 11px 8px !important;
		font-size: 15px;
		color: var(--tl-muted);
	}
	.main-navigation .sub-menu a:hover { color: var(--tl-accent); background: transparent !important; }

	/* the panel itself */
	.main-navigation.is-open {
		width: 100%;
		max-height: calc(100vh - 74px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 18px;
	}
	.main-navigation.is-open > ul > li { border-bottom: 1px solid var(--tl-border); }
	.main-navigation.is-open > ul > li:last-child { border-bottom: 0; }
	.main-navigation.is-open > ul > li > a { font-weight: 600; }

	/* a way to enquire lives at the bottom of the open menu instead of the header */
	.main-navigation.is-open::after {
		content: "";
		display: block;
		height: 4px;
	}
}

/* ==========================================================
   CLICKABLE TILES — the stretched link was sizing against its
   own Elementor wrapper (height 0) instead of the tile, so it
   had no clickable area. The wrapper is taken out of the
   positioning chain so the link fills the tile itself.
   ========================================================== */
.elementor-widget-html:has(.tt-tile-link),
.elementor-widget-html:has(.tt-tile-link) > .elementor-widget-container,
.elementor-widget-html:has(.tt-card-link),
.elementor-widget-html:has(.tt-card-link) > .elementor-widget-container {
	position: static !important;
	width: 0;
	height: 0;
	margin: 0 !important;
	padding: 0 !important;
}
.tt-tile-link,
.tt-card-link {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	text-indent: -9999px;
	overflow: hidden;
}
.tt-tile-link:focus-visible,
.tt-card-link:focus-visible { outline: 3px solid var(--tl-accent); outline-offset: -3px; }

/* the name and price must stay above the link so text is still selectable,
   but the whole tile stays clickable */
.e-con:has(.tt-tile-link) > .elementor-widget-heading,
.e-con:has(.tt-tile-link) > .elementor-widget-text-editor { position: relative; z-index: 7; pointer-events: none; }

/* ---- CLICKABLE TILES v2 ----
   v1 zeroed the wrapper's width/height, which clipped the link and made it
   unclickable. The wrapper only needs to leave the positioning chain; being
   empty it collapses on its own. ---- */
.elementor-widget-html:has(.tt-tile-link),
.elementor-widget-html:has(.tt-tile-link) > .elementor-widget-container,
.elementor-widget-html:has(.tt-card-link),
.elementor-widget-html:has(.tt-card-link) > .elementor-widget-container {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
.tt-tile-link,
.tt-card-link {
	position: absolute !important;
	inset: 0 !important;
	z-index: 8 !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	text-indent: 0;
	overflow: visible;
	font-size: 0;
}

/* ==========================================================
   MOTION v2 — the first pass only covered the imported pages.
   These rules cover the Elementor-built sections too, so the
   whole site behaves the same way.
   ========================================================== */

/* buttons anywhere on the site */
.elementor .elementor-button,
.elementor .elementor-widget-button a {
	transition: background-color .2s ease-out, color .2s ease-out,
	            border-color .2s ease-out, transform .18s ease-out, box-shadow .2s ease-out;
}
.elementor .elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(31,42,55,.16);
}
.elementor .elementor-button:active { transform: translateY(0); box-shadow: none; }

/* any image inside a container that also holds a heading — i.e. a card or tile */
.elementor .elementor-widget-image img,
.elementor .e-con img {
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.elementor .e-con:hover > .elementor-widget-image img { transform: scale(1.04); }

/* destination tiles */
.e-con:has(> .tk-tile-img) { transition: transform .3s ease-out, box-shadow .3s ease-out; }
.e-con:has(> .tk-tile-img):hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,34,48,.22); }

/* icon boxes (the trust rows) */
.elementor .elementor-widget-icon-box { transition: transform .25s ease-out; }
.elementor .elementor-widget-icon-box:hover { transform: translateY(-3px); }

/* links inside Elementor text */
.elementor .elementor-widget-text-editor a,
.elementor .elementor-widget-heading a { transition: color .2s ease-out; }

/* accordion / FAQ rows */
.elementor .elementor-accordion-title,
.elementor .elementor-tab-title { transition: color .2s ease-out, background-color .2s ease-out; }

@media (prefers-reduced-motion: reduce) {
	.elementor *, .elementor .elementor-button, .e-con { transition: none !important; }
	.elementor .elementor-button:hover,
	.elementor .elementor-widget-icon-box:hover,
	.e-con:has(> .tk-tile-img):hover { transform: none !important; }
	.elementor .e-con:hover > .elementor-widget-image img { transform: none !important; }
}
@media (hover: none) {
	.elementor .elementor-button:hover,
	.elementor .elementor-widget-icon-box:hover,
	.e-con:has(> .tk-tile-img):hover { transform: none; box-shadow: none; }
}


/* ==========================================================
   TYPOGRAPHY — line height 1.5-1.75, line length 65-75 chars
   ========================================================== */
.tt-html p,
.elementor .elementor-widget-text-editor p {
	line-height: 1.7;
}
.tt-html li,
.elementor .elementor-widget-text-editor li { line-height: 1.65; }

/* reading columns capped so lines do not run too long */
.tt-html .wrap-narrow p,
.tt-html .wrap-narrow li { max-width: 68ch; }
.tt-html .lead { line-height: 1.6; max-width: 62ch; }
.tt-html .hero-inner p { line-height: 1.6; }

/* headings breathe, and never sit tight on the text under them */
.tt-html h1, .elementor h1 { line-height: 1.12; letter-spacing: -0.02em; }
.tt-html h2, .elementor h2 { line-height: 1.2;  letter-spacing: -0.01em; margin-bottom: .5em; }
.tt-html h3, .elementor h3 { line-height: 1.3;  margin-bottom: .4em; }

/* the small uppercase labels */
.tt-html .eyebrow, .elementor .eyebrow { line-height: 1.4; }

/* ==========================================================
   BUTTON HOVER FIX
   The hero "WhatsApp Us" button went white-on-white on hover —
   contrast 1:1, the text vanished. Every hover state below is
   checked to stay readable.
   ========================================================== */

/* outline / ghost buttons on a photo: fill white, text goes dark */
.elementor .elementor-button:not(.elementor-button-primary):hover,
.tt-html .btn-ghost:hover,
.tt-html .tt-btn-outline:hover {
	background-color: #fff !important;
	color: var(--tl-text) !important;
	border-color: #fff !important;
}

/* the hero pair specifically — white outline button, dark text when filled */
.elementor .e-con:has(.tt-tile-img) ~ * .elementor-button,
.elementor-widget-button .elementor-button.elementor-size-md:hover,
.elementor-widget-button .elementor-button:hover .elementor-button-text {
	color: var(--tl-text) !important;
}

/* orange buttons: darker orange, text stays white — 4.6:1 */
.elementor .elementor-button.elementor-button-primary:hover,
.tt-html .tt-btn-primary:hover,
.tt-html .btn-primary:hover,
.header-enquire:hover {
	background-color: #C2410C !important;
	border-color: #C2410C !important;
	color: #fff !important;
}

/* every button lifts and changes colour, like the package cards */
.elementor .elementor-button,
.tt-html .tt-btn,
.tt-html .btn {
	transition: background-color .2s ease-out, color .2s ease-out,
	            border-color .2s ease-out, transform .18s ease-out, box-shadow .2s ease-out;
}
.elementor .elementor-button:hover,
.tt-html .tt-btn:hover,
.tt-html .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(31,42,55,.18);
}

/* floating WhatsApp: darken on hover so there is real feedback */
.wa-float .wa-float-btn:hover,
.fab:hover { background: #1DA851 !important; }

/* footer social icons: solid dark blue on hover, white icon = 5.1:1 */
.site-footer .footer-icons a:hover {
	background: #1A7AB5 !important;
	border-color: #1A7AB5 !important;
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.elementor .elementor-button:hover,
	.tt-html .tt-btn:hover,
	.tt-html .btn:hover { transform: none; }
}


/* ==========================================================
   EMPHASIS — prices, durations and key facts carry weight
   ========================================================== */
.tt-html .tt-pkg-price { font-weight: 700; }
.tt-html .tt-pkg-blurb { font-size: 15.5px; }
.tt-html .quick-facts strong,
.tt-html .contact-row strong { font-weight: 600; color: var(--tl-text); }
.tt-html .note strong,
.tt-html .answer strong { font-weight: 700; color: var(--tl-text); }
.tt-html table th { font-weight: 700; }

/* ==========================================================
   FAQ — was a <div>+<button> that needed JavaScript the live
   site never loaded, so nothing opened. Now native <details>.
   ========================================================== */
.tt-html details.faq-item {
	border-bottom: 1px solid var(--tl-border);
	padding: 0;
}
.tt-html details.faq-item summary.faq-q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 0;
	font-family: var(--tl-head);
	font-size: 17px;
	font-weight: 600;
	color: var(--tl-text);
	text-align: left;
	transition: color .2s ease-out;
}
.tt-html details.faq-item summary::-webkit-details-marker { display: none; }
.tt-html details.faq-item summary.faq-q::after {
	content: "";
	flex: none;
	width: 16px; height: 16px;
	margin-top: 4px;
	background:
		linear-gradient(currentColor, currentColor) center/16px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center/2px 16px no-repeat;
	transition: transform .25s ease-out;
}
.tt-html details.faq-item[open] summary.faq-q::after { transform: rotate(45deg); }
.tt-html details.faq-item summary.faq-q:hover { color: var(--tl-accent); }
.tt-html details.faq-item summary.faq-q:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 3px; }
.tt-html details.faq-item .faq-a { padding: 0 0 22px; }
.tt-html details.faq-item .faq-a p { margin: 0; color: var(--tl-muted); line-height: 1.7; }
.tt-html details.faq-item[open] summary.faq-q { color: var(--tl-accent); }


/* ==========================================================
   CALL + WHATSAPP pair on the contact page
   ========================================================== */
.tt-html .split-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.tt-html .tt-btn-call,
.tt-html .tt-btn-wa {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 26px;
	font-family: var(--tl-head); font-size: 15px; font-weight: 600;
	text-decoration: none; border-radius: 0; cursor: pointer;
	transition: background-color .2s ease-out, color .2s ease-out,
	            border-color .2s ease-out, transform .18s ease-out, box-shadow .2s ease-out;
}
.tt-html .tt-btn-call svg,
.tt-html .tt-btn-wa svg { width: 19px; height: 19px; flex: none; }
.tt-html .tt-btn-call { background: #fff; color: var(--tl-text); border: 1px solid var(--tl-border); flex: 0 0 auto; }
.tt-html .tt-btn-call:hover { border-color: var(--tl-accent); color: var(--tl-accent); transform: translateY(-2px); }
.tt-html .tt-btn-wa { background: #25D366; color: #fff; border: 1px solid #25D366; flex: 1 1 200px; }
.tt-html .tt-btn-wa:hover { background: #1DA851; border-color: #1DA851; color: #fff;
	transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37,211,102,.35); }

/* the small round icons beside the contact details */
.tt-html .contact-row .ico {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; flex: none;
	border: 1px solid var(--tl-border); color: var(--tl-accent);
	transition: border-color .2s ease-out, background .2s ease-out;
}
.tt-html .contact-row .ico svg { width: 18px; height: 18px; }
.tt-html .contact-row:hover .ico { border-color: var(--tl-accent); background: #EAF4FB; }
.tt-html .feature .ico { color: var(--tl-accent); }
.tt-html .feature .ico svg { width: 26px; height: 26px; }


/* ==========================================================
   GUIDE CARDS — photos were free-height so the boxes did not
   line up. One fixed shape, cropped from the centre.
   ========================================================== */
.tt-html .post-media,
.elementor .e-con:has(> .elementor-widget-heading + .elementor-widget-button) > .elementor-widget-image {
	overflow: hidden;
}
.tt-html .post-media { aspect-ratio: 16 / 10; }
.tt-html .post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the Elementor-built guide cards on Home */
.elementor .elementor-widget-image:has(+ .elementor-widget-heading) img,
.elementor .e-con .elementor-widget-image img.attachment-large {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.tt-html .tt-btn-call, .tt-html .tt-btn-wa,
	.tt-html details.faq-item summary.faq-q::after { transition: none; }
	.tt-html .tt-btn-call:hover, .tt-html .tt-btn-wa:hover { transform: none; }
}


/* Anchor jump: keep heading clear of the sticky header */
.post h2[id]{scroll-margin-top:110px}


/* Hero background slideshow - 6 photo crossfade with slow zoom */
.hero-slide {
	position: absolute; inset: 0; opacity: 0;
	animation: heroFade 24s infinite;
}
.hero-slide img { animation: heroZoom 24s infinite; transform-origin: center; }
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(1) img { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: -4s; }
.hero-slide:nth-child(2) img { animation-delay: -4s; }
.hero-slide:nth-child(3) { animation-delay: -8s; }
.hero-slide:nth-child(3) img { animation-delay: -8s; }
.hero-slide:nth-child(4) { animation-delay: -12s; }
.hero-slide:nth-child(4) img { animation-delay: -12s; }
.hero-slide:nth-child(5) { animation-delay: -16s; }
.hero-slide:nth-child(5) img { animation-delay: -16s; }
.hero-slide:nth-child(6) { animation-delay: -20s; }
.hero-slide:nth-child(6) img { animation-delay: -20s; }

@keyframes heroFade {
	0% { opacity: 0; }
	2% { opacity: 1; }
	14% { opacity: 1; }
	16.5% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes heroZoom {
	0% { transform: scale(1); }
	100% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-slide, .hero-slide img { animation: none; opacity: 0; }
	.hero-slide:first-child { opacity: 1; }
}


/* ============================================================
   HOMEPAGE HERO + HEADER REFRESH
   ============================================================ */

/* --- 2. Nav links: BOLD UPPERCASE ----------------------------- */
.site-header .nav a,
.site-header .main-navigation a {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .6px;
}
body.home .site-header .nav a,
body.home .site-header .main-navigation a,
body.home .site-header .header-phone {
	text-shadow: 0 1px 3px rgba(255,255,255,.55);
}

/* --- 3. Enquire Now = round pill ------------------------------ */
.site-header .header-enquire,
.site-header .header-cta .btn-primary {
	border-radius: 999px;
	padding-inline: 26px;
}

/* --- 4. Hero CTAs as underlined text links -------------------- */
.elementor-element-526ccae {
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}
.elementor-element-526ccae .elementor-button {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 12px 0 !important;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: #fff !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-size: 14px;
	border-bottom: 1px solid rgba(255,255,255,.85) !important;
	transition: border-color .2s ease, opacity .2s ease;
}
.elementor-element-526ccae .elementor-button:hover {
	opacity: .8;
	border-bottom-color: #fff !important;
}

/* --- 5. Hero heading smaller, fits 3 lines -------------------- */
body.home .elementor-element-cb9fdd1 h1,
body.home .elementor-element-6ae2c2d h1,
body.home .elementor-element-6ae2c2d .elementor-heading-title {
	font-size: clamp(1.75rem, 3.3vw, 2.7rem) !important;
	line-height: 1.12 !important;
}
body.home .elementor-element-8b52b79 {
	max-width: 860px;
	width: 100%;
}

/* --- 6. Hero content sits at the bottom ----------------------- */
body.home .elementor-element-cb9fdd1 > .e-con-inner {
	justify-content: flex-end;
	padding-top: 150px;
	padding-bottom: 60px;
}

@media (max-width: 900px) {
	body.home .site-header {
		position: sticky;
		background: rgba(255,255,255,.96);
		backdrop-filter: blur(10px);
	}
	body.home .site-header .nav a,
	body.home .site-header .main-navigation a,
	body.home .site-header .header-phone { text-shadow: none; }
	.elementor-element-526ccae { gap: 18px; }
	body.home .elementor-element-cb9fdd1 > .e-con-inner {
		padding-top: 60px;
		padding-bottom: 40px;
	}
}




/* ============================================================
   SMART HEADER
   Over the hero: fully transparent, white text.
   Past the hero: hides on scroll down, returns solid on scroll up.
   ============================================================ */

body.home .site-header {
	position: fixed; left: 0; right: 0; top: 0;
	z-index: 60;
	background: transparent;
	backdrop-filter: none;
	border-bottom: none;
	transition: transform .25s ease, background-color .25s ease,
	            box-shadow .25s ease, border-color .25s ease;
	will-change: transform;
}
body.home.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.home.admin-bar .site-header { top: 46px; }
}

/* --- State: sitting over the hero photos --------------------- */
body.home .site-header.is-over-hero {
	background: transparent;
	box-shadow: none;
	border-bottom: none;
}
body.home .site-header.is-over-hero .nav a,
body.home .site-header.is-over-hero .main-navigation a,
body.home .site-header.is-over-hero .header-phone {
	color: #fff;
}
body.home .site-header.is-over-hero .nav a.active {
	color: #fff;
	border-bottom-color: var(--orange);
}
body.home .site-header.is-over-hero .site-logo img,
body.home .site-header.is-over-hero .logo img {
	filter: brightness(0) invert(1);
}
body.home .site-header.is-over-hero .burger,
body.home .site-header.is-over-hero .menu-toggle { color: #fff; }

/* --- State: scrolled past the hero, solid bar ---------------- */
body.home .site-header.is-solid {
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 6px 24px rgba(18,42,60,.08);
}

/* --- State: hidden while scrolling down ---------------------- */
body.home .site-header.is-hidden {
	transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
	body.home .site-header { transition: none; }
	body.home .site-header.is-hidden { transform: none; }
}

/* Hero starts at the very top; the fixed header floats over it */
body.home .elementor-element-cb9fdd1 { margin-top: 0; }

/* --- Hero heading: Title Case, three tidy lines -------------- */
body.home .elementor-element-6ae2c2d .elementor-heading-title,
body.home .elementor-element-cb9fdd1 h1 {
	text-transform: none !important;
	font-size: clamp(1.85rem, 3.4vw, 2.9rem) !important;
	line-height: 1.18 !important;
	letter-spacing: -.4px;
}

/* --- Hero spacing rhythm ------------------------------------- */
body.home .elementor-element-8b52b79 { gap: 0; max-width: 860px; }
body.home .elementor-element-2e49336 { margin-bottom: 14px; }   /* eyebrow */
body.home .elementor-element-6ae2c2d { margin-bottom: 18px; }   /* heading */
body.home .elementor-element-75bc534 { margin-bottom: 30px; }   /* paragraph */
body.home .elementor-element-75bc534 p { max-width: 56ch; margin: 0; }
body.home .elementor-element-526ccae { margin-top: 0; }

@media (max-width: 900px) {
	body.home .site-header {
		position: sticky;
		background: rgba(255,255,255,.96);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--line);
	}
	body.home .site-header.is-hidden { transform: none; }
	body.home .site-header.is-over-hero .nav a,
	body.home .site-header.is-over-hero .main-navigation a,
	body.home .site-header.is-over-hero .header-phone { color: var(--ink); }
	body.home .site-header.is-over-hero .site-logo img,
	body.home .site-header.is-over-hero .logo img { filter: none; }
	body.home .elementor-element-6ae2c2d .elementor-heading-title,
	body.home .elementor-element-75bc534 { margin-bottom: 22px; }
}


/* ============================================================
   HERO SPACING — final override.
   Elementor sets the container gap via its own --gap variable and
   its stylesheet loads after this file, so set both, with !important.
   ============================================================ */
body.home .elementor-element-8b52b79 {
	--gap: 22px;
	--row-gap: 22px;
	--column-gap: 22px;
	gap: 22px !important;
	row-gap: 22px !important;
	max-width: 880px !important;
}
body.home .elementor-element-8b52b79 > .elementor-element-2e49336 {
	margin-bottom: -8px !important;
}
body.home .elementor-element-8b52b79 > .elementor-element-526ccae {
	margin-top: 10px !important;
}


/* ============================================================
   SMART HEADER — mobile parity.
   Keep the same transparent-over-hero treatment on phones, so the
   logo and menu button stay readable against the hero photos.
   ============================================================ */
@media (max-width: 900px) {
	body.home .site-header {
		position: fixed;
		background: transparent;
		border-bottom: none;
		backdrop-filter: none;
	}
	body.home .site-header.is-over-hero {
		background: transparent;
		border-bottom: none;
		box-shadow: none;
	}
	body.home .site-header.is-over-hero .site-logo img,
	body.home .site-header.is-over-hero .logo img {
		filter: brightness(0) invert(1);
	}
	body.home .site-header.is-over-hero .menu-toggle {
		background: rgba(255,255,255,.12) !important;
		border-color: rgba(255,255,255,.55) !important;
		color: #fff !important;
	}
	body.home .site-header.is-over-hero .menu-toggle__bars,
	body.home .site-header.is-over-hero .menu-toggle__bars::before,
	body.home .site-header.is-over-hero .menu-toggle__bars::after {
		background: #fff !important;
	}
	body.home .site-header.is-solid {
		background: rgba(255,255,255,.97);
		border-bottom: 1px solid var(--line);
		backdrop-filter: blur(10px);
	}
	body.home .site-header.is-hidden { transform: translateY(-100%); }

	/* Hero clears the fixed bar */
	body.home .elementor-element-cb9fdd1 > .e-con-inner {
		padding-top: 110px;
		padding-bottom: 48px;
	}
}


/* ============================================================
   HERO / HEADER — round 3 fixes
   ============================================================ */

/* --- 1. Logo: coloured icon + white wordmark over the hero ---- */
body.home .site-header.is-over-hero .site-logo img,
body.home .site-header.is-over-hero .logo img {
	filter: none !important;
	content: url("../img/logo-white.svg");
}

/* --- 2. Dropdown links stay dark on their white panel --------- */
body.home .site-header.is-over-hero .main-navigation ul ul a,
body.home .site-header.is-over-hero .nav .sub a,
body.home .site-header.is-over-hero .sub-menu a {
	color: var(--ink) !important;
	text-shadow: none !important;
}
body.home .site-header.is-over-hero .main-navigation ul ul a:hover,
body.home .site-header.is-over-hero .nav .sub a:hover,
body.home .site-header.is-over-hero .sub-menu a:hover {
	color: var(--blue) !important;
}

/* --- 3. Sharpen the white nav text over busy photos ----------- */
body.home .site-header.is-over-hero .nav > a,
body.home .site-header.is-over-hero .main-navigation > ul > li > a,
body.home .site-header.is-over-hero .header-phone,
body.home .site-header.is-over-hero .site-logo {
	text-shadow: 0 1px 10px rgba(10,26,38,.55), 0 1px 2px rgba(10,26,38,.4);
}
body.home .site-header.is-over-hero .site-logo img {
	filter: drop-shadow(0 1px 6px rgba(10,26,38,.45)) !important;
}
/* Never let the shadow leak into the dropdown panel */
body.home .site-header.is-over-hero .main-navigation ul ul,
body.home .site-header.is-over-hero .nav .sub { text-shadow: none; }

/* --- 6. Ken Burns zoom must finish within one slide ----------- */
body.home .elementor-background-slideshow__slide__image {
	transition: transform 12s linear !important;
}

/* --- 5. Mobile menu button: clearly visible ------------------- */
@media (max-width: 900px) {
	body.home .site-header.is-over-hero .menu-toggle {
		background: rgba(12,32,48,.55) !important;
		border: 1px solid rgba(255,255,255,.9) !important;
		box-shadow: 0 2px 10px rgba(10,26,38,.35);
	}
	body.home .site-header.is-over-hero .menu-toggle__bars,
	body.home .site-header.is-over-hero .menu-toggle__bars::before,
	body.home .site-header.is-over-hero .menu-toggle__bars::after {
		background: #fff !important;
		height: 2px;
	}

	/* --- 4. Heading: let it flow, ignore the desktop breaks ---- */
	body.home .elementor-element-6ae2c2d h1 br { display: none; }
	body.home .elementor-element-6ae2c2d h1,
	body.home .elementor-element-cb9fdd1 h1 {
		font-size: clamp(1.55rem, 7.4vw, 2rem) !important;
		line-height: 1.22 !important;
		letter-spacing: -.2px;
	}
	body.home .elementor-element-8b52b79 {
		gap: 16px !important;
		row-gap: 16px !important;
	}
	body.home .elementor-element-75bc534 p { font-size: 15px; line-height: 1.6; }
}


/* ==========================================================================
   HOME — DESTINATION ROWS (alternating full-width image / text)
   Added for the "Where we go" section. Square corners, 48px buttons.
   ========================================================================== */

.tt-dest-rows { padding: 0 !important; }

.tt-drow { align-items: stretch; min-height: 540px; }
.tt-drow-alt { flex-direction: row-reverse; }

.tt-dmedia { position: relative; overflow: hidden; min-height: inherit; }
.tt-dmedia .tt-dimg,
.tt-dmedia .tt-dimg > .elementor-widget-container,
.tt-dmedia .tt-dimg figure { height: 100%; margin: 0; }
.tt-dimg img {
	width: 100%; height: 100%; min-height: 540px;
	object-fit: cover; display: block; border-radius: 0;
	transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.tt-drow:hover .tt-dimg img { transform: scale(1.045); }

.tt-dbody { background: #fff; }
.tt-drow-alt .tt-dbody { background: var(--tl-sand, #F5F5F5); }

/* tweak: caps + round */
.tt-dname .elementor-heading-title {
	font-family: var(--tl-head); font-weight: 800;
	font-size: clamp(1.75rem, 2.8vw, 2.45rem); line-height: 1.08;
	text-transform: uppercase; letter-spacing: -.005em;
	color: var(--tl-text); margin: 0;
}
.tt-dtag p {
	font-family: var(--tl-head); font-weight: 700;
	font-size: clamp(.98rem, 1.35vw, 1.15rem); line-height: 1.35;
	text-transform: uppercase; letter-spacing: .02em;
	color: var(--tl-accent); margin: 10px 0 0;
}
.tt-ddesc p {
	font-size: 17px; line-height: 1.75; color: var(--tl-muted);
	margin: 20px 0 0; max-width: 48ch;
}
.tt-dmeta p {
	font-family: var(--tl-head); font-size: 14.5px; font-weight: 500;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--tl-text); margin: 24px 0 0;
}
.tt-dmeta strong { font-weight: 600; color: var(--tl-text); }

.tt-dbtn { margin-top: 26px; }
.tt-dbtn .elementor-button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 34px; border: 0; border-radius: 999px !important;
	background: var(--tl-accent); color: #fff;
	font-family: var(--tl-head); font-weight: 600; font-size: 15.5px;
	letter-spacing: .02em; transition: background .25s ease;
}
.tt-dbtn .elementor-button:hover,
.tt-dbtn .elementor-button:focus-visible { background: #1E7BAE; color: #fff; }
.tt-dbtn .elementor-button:focus-visible { outline: 3px solid #1E7BAE; outline-offset: 3px; }

/* ---- Tablet ---- */
@media (max-width: 1024px) {
	.tt-drow { min-height: 440px; }
	.tt-dimg img { min-height: 440px; }
	.tt-dbody { padding: 44px 40px !important; }
	.tt-ddesc p { font-size: 16px; }
}

/* ---- Mobile: image on top, text below, same order every row ---- */
@media (max-width: 767px) {
	.tt-drow,
	.tt-drow-alt { flex-direction: column; min-height: 0; }
	.tt-drow > .tt-dmedia,
	.tt-drow > .tt-dbody { width: 100% !important; }
	.tt-dmedia { aspect-ratio: 4 / 3; min-height: 0; }
	.tt-dimg img { min-height: 0; }
	.tt-ddesc p { max-width: none; }
	.tt-dbtn .elementor-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.tt-dimg img,
	.tt-drow:hover .tt-dimg img { transition: none; transform: none; }
}


/* ==========================================================================
   BATCH 2 — caps section headings, round buttons site-wide, review photos
   ========================================================================== */

/* ---- 1. Homepage section headings: caps + larger ---- */
body.home .elementor-element-5d64c2a h2,
body.home .elementor-element-8dee15c h2,
body.home .elementor-element-fc05cdb h2,
body.home .elementor-element-28ba906 h2,
body.home .elementor-element-1fe5397 h2,
body.home .elementor-element-5579a92 h2,
body.home .elementor-element-0ded206 h2,
body.home .elementor-element-50bfb59 h2 {
	text-transform: uppercase;
	font-size: clamp(1.85rem, 3.4vw, 2.85rem) !important;
	line-height: 1.12 !important;
	letter-spacing: -.005em;
}
@media (max-width: 767px) {
	body.home .elementor-element-5d64c2a h2,
	body.home .elementor-element-8dee15c h2,
	body.home .elementor-element-fc05cdb h2,
	body.home .elementor-element-28ba906 h2,
	body.home .elementor-element-1fe5397 h2,
	body.home .elementor-element-5579a92 h2,
	body.home .elementor-element-0ded206 h2,
	body.home .elementor-element-50bfb59 h2 {
		font-size: clamp(1.5rem, 6.6vw, 1.95rem) !important;
	}
}

/* ---- 2. Package card titles in caps (home, destinations, packages) ---- */
.tt-pkg .tt-pkg-body h3 {
	text-transform: uppercase;
	letter-spacing: .01em;
}

/* ---- 3. Round buttons, site-wide ---- */
html body .tt-btn,
html body a.tt-btn,
html body .btn,
html body a.btn,
html body .elementor-button,
html body a.elementor-button,
html body .elementor-widget-button .elementor-button,
html body .ff-btn,
html body button.ff-btn-submit,
html body .ff-btn-submit,
html body input[type="submit"],
html body button[type="submit"] {
	border-radius: 999px !important;
}

/* hero text links stay square - they are underlined links, not buttons */
html body .elementor-element-526ccae .elementor-button,
html body .elementor-element-526ccae a.elementor-button {
	border-radius: 0 !important;
}

/* hero links: no button look on hover - only the text highlights */
html body .elementor .elementor-element-526ccae .elementor-button:hover,
html body .elementor .elementor-element-526ccae .elementor-button:focus,
html body .elementor .elementor-element-526ccae .elementor-button:focus-visible,
html body .elementor .elementor-element-526ccae .elementor-button:active,
html body .elementor .elementor-element-526ccae .elementor-button:hover .elementor-button-text {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-bottom: 1px solid #fff !important;
	border-radius: 0 !important;
	color: #fff !important;
	transform: none !important;
	outline: 0 !important;
	opacity: 1;
}

/* ---- 4. Review photos ---- */
.tt-rev-photo { margin-bottom: 18px; }
.tt-rev-photo img {
	width: 100%; height: 210px; object-fit: cover;
	border-radius: 0; display: block;
}
@media (max-width: 767px) {
	.tt-rev-photo img { height: 190px; }
}


/* ==========================================================================
   BLOG / TRAVEL GUIDE CARDS ("Before you pack")
   Bigger edge-to-edge photo, equal card heights, button pinned to the bottom.
   ========================================================================== */

html body .tt-guide-row { align-items: stretch; }

html body .tt-guide-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 !important;
	overflow: hidden;
}

/* photo: edge to edge, taller, no white gap */
html body .tt-guide-img { margin: 0 !important; width: 100%; }
html body .tt-guide-img > .elementor-widget-container { margin: 0 !important; }
html body .tt-guide-img figure { margin: 0 !important; }
html body .tt-guide-img img {
	width: 100% !important;
	height: 260px !important;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
	transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
html body .tt-guide-card:hover .tt-guide-img img { transform: scale(1.04); }

/* text block sits inside its own padding */
html body .tt-guide-label { margin: 26px 26px 0 !important; }
html body .tt-guide-title { margin: 8px 26px 0 !important; }

/* button pinned to the bottom so all three line up */
html body .tt-guide-btn {
	margin: 18px 26px 26px !important;
	margin-top: auto !important;
}

@media (max-width: 1024px) {
	html body .tt-guide-img img { height: 230px !important; }
}
@media (max-width: 767px) {
	html body .tt-guide-img img { height: 210px !important; }
	html body .tt-guide-label { margin: 22px 20px 0 !important; }
	html body .tt-guide-title { margin: 8px 20px 0 !important; }
	html body .tt-guide-btn { margin: 16px 20px 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
	html body .tt-guide-img img,
	html body .tt-guide-card:hover .tt-guide-img img { transition: none; transform: none; }
}

/* ==========================================================================
   ITINERARY CARDS - HOMEPAGE ONLY
   Top-left corner rounded (18px), taller clean photo, tags moved off the photo.
   Scoped to body.home so the packages and destination pages are untouched.
   ========================================================================== */

html body.home .tt-pkg {
	border-radius: 18px 0 0 0 !important;
	overflow: hidden;
}

/* photo: taller, nothing sitting on top of it */
html body.home .tt-pkg .tt-pkg-media {
	aspect-ratio: auto !important;
	height: 300px;
}
html body.home .tt-pkg .tt-pkg-media img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}

/* the tag row now lives at the top of the text block */
html body.home .tt-pkg .tt-pkg-tags {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
html body.home .tt-pkg .tt-pkg-tags .tt-pkg-nights,
html body.home .tt-pkg .tt-pkg-tags .tt-pkg-flag {
	position: static !important;
	top: auto !important; right: auto !important;
	left: auto !important; bottom: auto !important;
	inset: auto !important;
}
html body.home .tt-pkg .tt-pkg-tags .tt-pkg-nights {
	background: transparent !important;
	color: var(--tl-muted) !important;
	padding: 0 !important;
	font-family: var(--tl-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
html body.home .tt-pkg .tt-pkg-tags .tt-pkg-flag {
	margin-left: auto;
	background: var(--tl-orange) !important;
	color: #fff !important;
	padding: 5px 14px !important;
	border-radius: 999px;
	font-family: var(--tl-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* blog cards match the same corner */
html body.home .tt-guide-card {
	border-radius: 18px 0 0 0 !important;
}

@media (max-width: 1024px) {
	html body.home .tt-pkg .tt-pkg-media,
	html body.home .tt-pkg .tt-pkg-media img { height: 260px; }
}
@media (max-width: 767px) {
	html body.home .tt-pkg .tt-pkg-media,
	html body.home .tt-pkg .tt-pkg-media img { height: 230px; }
}

/* ==========================================================================
   ABOUT PAGE + SITEWIDE CAPS HEADINGS
   ========================================================================== */

/* ---- 1. Section headings in capitals, every page ---- */
html body .tt-html .section-head h2,
html body .tt-html section > .wrap > h2,
html body .tt-html .section h2 {
	text-transform: uppercase;
	font-size: clamp(1.85rem, 3.4vw, 2.85rem);
	line-height: 1.12;
	letter-spacing: -.005em;
}
@media (max-width: 767px) {
	html body .tt-html .section-head h2,
	html body .tt-html section > .wrap > h2,
	html body .tt-html .section h2 { font-size: clamp(1.5rem, 6.6vw, 1.95rem); }
}

/* ---- 2. "Plan your trip": stop the heading squeezing into 4 lines ---- */
html body .tt-html .tt-plan-inner { display: block; width: 100%; max-width: 560px; }
html body .tt-html .cta-band h2 { max-width: 19ch; }
html body .tt-html .cta-band .contact-row { align-items: flex-start; gap: 14px; }
html body .tt-html .cta-band .contact-row strong { display: block; margin-bottom: 2px; }
html body .tt-html .cta-band .contact-row span,
html body .tt-html .cta-band .contact-row a { display: block; line-height: 1.5; }

/* ---- 3. Team cards: real photographs ---- */
html body .tt-html .tt-person { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
html body .tt-html .tt-person .card-media {
	background: none;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
html body .tt-html .tt-person .card-media img {
	width: 100%; height: 100%; object-fit: cover; object-position: top center;
	display: block; border-radius: 0;
}
html body .tt-html .tt-person .card-body { padding-top: 18px; }
html body .tt-html .tt-person h3 { margin: 0 0 2px; font-size: 1.15rem; }
html body .tt-html .tt-person .tt-person-role {
	margin: 0 0 8px; font-family: var(--tl-head); font-size: 12.5px;
	font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--tl-accent);
}

/* ---- 4. Blog cards on inner pages: match the homepage ---- */
html body .tt-guide-html .grid { align-items: stretch; }
html body .tt-guide-html .card {
	display: flex; flex-direction: column; height: 100%;
	padding: 0; overflow: hidden; border-radius: 18px 0 0 0 !important;
}
html body .tt-guide-html .post-media { margin: 0; }
html body .tt-guide-html .post-media img {
	width: 100%; height: 260px; object-fit: cover; display: block;
	border-radius: 0;
	transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
html body .tt-guide-html .card:hover .post-media img { transform: scale(1.04); }
html body .tt-guide-html .card-body {
	display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px;
}
html body .tt-guide-html .card-body .view-link { margin-top: auto; }
@media (max-width: 1024px) { html body .tt-guide-html .post-media img { height: 230px; } }
@media (max-width: 767px)  { html body .tt-guide-html .post-media img { height: 210px; } }

@media (prefers-reduced-motion: reduce) {
	html body .tt-guide-html .post-media img,
	html body .tt-guide-html .card:hover .post-media img { transition: none; transform: none; }
}

/* feature rows: keep all four aligned */
html body .tt-html .grid .feature { display: flex; flex-direction: column; }
html body .tt-html .grid .feature .ico { flex: none; }


/* ---- TRAVELLER STORY CARDS with guest photo ---- */
html body .tt-html .tt-quote {
	display: flex; flex-direction: column; height: 100%;
	padding: 0 !important; overflow: hidden;
	border-radius: 18px 0 0 0 !important;
}
html body .tt-html .tt-quote .tt-quote-photo { margin: 0; }
html body .tt-html .tt-quote .tt-quote-photo img {
	width: 100%; height: 260px; object-fit: cover; object-position: center;
	display: block; border-radius: 0 !important;
}
html body .tt-html .tt-quote .stars { margin: 22px 26px 0; }
html body .tt-html .tt-quote p { margin: 10px 26px 0; }
html body .tt-html .tt-quote .who { margin: 18px 26px 26px; margin-top: auto; padding-top: 18px; }
@media (max-width: 767px) {
	html body .tt-html .tt-quote .tt-quote-photo img { height: 210px; }
	html body .tt-html .tt-quote .stars { margin: 18px 20px 0; }
	html body .tt-html .tt-quote p { margin: 10px 20px 0; }
	html body .tt-html .tt-quote .who { margin: 16px 20px 22px; margin-top: auto; }
}

/* ---- match the homepage guide card exactly ---- */
html body .tt-guide-html .card {
	background: #fff !important;
	border: 1px solid var(--tl-border, #E2E6EA) !important;
}
html body .tt-guide-html .grid { gap: 28px; }
/* label: same as the homepage "TRAVEL GUIDE" line */
html body .tt-guide-html .card-body .post-date {
	font-family: var(--tl-head);
	font-size: 12.5px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
	color: var(--tl-accent) !important;
	margin-bottom: 8px;
	display: block;
}

/* ===================================================================
   CONSISTENCY LAYER — 2026-08-25
   Makes repeated sections look identical on every page.
   Appended only; nothing above this line was changed or removed.
   =================================================================== */

/* --- 1. "Plan your trip" band: one rhythm on every page -------------
   Pages had drifted to gap 48px / 56px / 64px and top vs centre
   alignment. The About page version is the master. !important is
   needed because the old gaps are inline styles on the page. */
.tt-html section.cta-band .grid.g2 {
	gap: 64px !important;
	align-items: center !important;
}

/* --- 2. Feature cards: nothing sits lower than its neighbours -------
   A card carrying an icon was taller than the icon-less cards beside
   it, so the last card dropped down. Reserve the icon's space. */
.tt-html .grid > .feature { align-self: start; }
.tt-html .feature:not(:has(.ico))::before {
	content: "";
	display: block;
	width: 46px;
	height: 46px;
	margin-bottom: 22px;
}

/* --- 3. Contact "We are easy to find": one line --------------------- */
.tt-html .tt-reach {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.tt-html .tt-reach .contact-row {
	border-bottom: 0;
	border-right: 1px solid var(--line);
	padding: 26px 24px;
	align-items: flex-start;
	gap: 14px;
}
.tt-html .tt-reach .contact-row:last-child { border-right: 0; }
.tt-html .tt-reach .contact-row span,
.tt-html .tt-reach .contact-row a { font-size: 15.5px; line-height: 1.5; }

@media (max-width: 900px) {
	.tt-html .tt-reach { grid-template-columns: repeat(2, 1fr); }
	.tt-html .tt-reach .contact-row:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
	.tt-html .tt-reach { grid-template-columns: 1fr; }
	.tt-html .tt-reach .contact-row { border-right: 0; border-bottom: 1px solid var(--line); }
	.tt-html .tt-reach .contact-row:last-child { border-bottom: 0; }
}


/* ===================================================================
   CONTACT PAGE — 2026-08-25
   Appended only; nothing above this line was changed.
   =================================================================== */

/* --- 1. "We are easy to find": stop the text being squeezed --------
   The old markup declared a 2-column grid but held only one child, so
   the column collapsed to ~257px and the address broke over 3 lines.
   Elementor already provides the two columns. */
.tt-html .tt-reach-col { display: block; width: 100%; }
.tt-html .tt-reach-col .contact-row { padding: 20px 0; }
.tt-html .tt-reach-col .contact-row > div:last-child { min-width: 0; }
.tt-html .tt-reach-col .contact-row span,
.tt-html .tt-reach-col .contact-row a { line-height: 1.55; }

/* --- 2. Icons that respond to the pointer ------------------------- */
.tt-html .contact-row .ico {
	transition: transform .25s cubic-bezier(.34,1.3,.64,1),
	            background-color .25s ease, border-color .25s ease;
}
.tt-html .contact-row:hover .ico { transform: translateY(-3px) scale(1.06); }
.tt-html .contact-row .ico svg { transition: transform .25s ease; }
/* the phone gives a small ring-shake, the rest just lift */
@keyframes tt-ring {
	0%,100% { transform: rotate(0); }
	20%     { transform: rotate(-12deg); }
	40%     { transform: rotate(10deg); }
	60%     { transform: rotate(-6deg); }
	80%     { transform: rotate(4deg); }
}
.tt-html .contact-row.is-phone:hover .ico svg { animation: tt-ring .6s ease; }

/* --- 3. Social buttons ------------------------------------------- */
.tt-html .tt-socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.tt-html .tt-socials a {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--tl-border);
	color: var(--tl-text);
	background: #fff;
	transition: transform .25s cubic-bezier(.34,1.3,.64,1),
	            color .25s ease, border-color .25s ease;
}
.tt-html .tt-socials a svg { width: 19px; height: 19px; }
.tt-html .tt-socials a:hover {
	transform: translateY(-3px);
	color: var(--tl-accent);
	border-color: var(--tl-accent);
}
.tt-html .tt-socials a:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 2px; }

/* --- 4. Office card: close the empty gap in the middle ------------
   The card spanned the full 1180px, leaving a 300px hole between the
   address and the buttons. Narrowing and centring it pulls the two
   halves back together. */
.tt-html .tt-map-card {
	justify-content: space-between;
	align-items: center;
	max-width: 940px;
	margin-inline: auto;
	gap: 40px;
}
.tt-html .tt-map-info { flex: 1 1 auto; min-width: 0; }
.tt-html .tt-map-actions { flex: 0 0 auto; }
@media (max-width: 860px) {
	.tt-html .tt-map-card { max-width: none; gap: 20px; }
	.tt-html .tt-map-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.tt-html .contact-row .ico,
	.tt-html .contact-row .ico svg,
	.tt-html .tt-socials a { transition: none; }
	.tt-html .contact-row:hover .ico,
	.tt-html .tt-socials a:hover { transform: none; }
	.tt-html .contact-row.is-phone:hover .ico svg { animation: none; }
}


/* --- 5. FAQ: let <details> open properly -------------------------
   An older rule clipped .faq-a to max-height:0 and only released it
   when a JS "open" class was added. These FAQs are native <details>,
   which never get that class, so answers stayed shut and a 22px
   sliver of text leaked out below each question. <details> already
   hides its own content when closed, so the clip is not needed. */
.tt-html details.faq-item .faq-a {
	max-height: none;
	overflow: visible;
}
.tt-html details.faq-item[open] .faq-a { animation: tt-faq-in .25s ease-out; }
@keyframes tt-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.tt-html details.faq-item[open] .faq-a { animation: none; }
}


/* ===================================================================
   PACKAGE CARDS + HERO ZOOM + BLOG SIDEBAR — 2026-08-25
   Appended only; nothing above this line was changed.
   =================================================================== */

/* --- 1. The Home package-card design, applied to every page --------
   These rules already existed but were locked behind body.home, so
   only the Home page got them. Same rules, no page restriction. */
html body .tt-pkg { border-radius: 18px 0 0 0 !important; overflow: hidden; }

html body .tt-pkg .tt-pkg-media { aspect-ratio: auto !important; height: 300px; }
html body .tt-pkg .tt-pkg-media img {
	width: 100%; height: 300px; object-fit: cover; display: block;
}

html body .tt-pkg .tt-pkg-tags {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
}
html body .tt-pkg .tt-pkg-tags .tt-pkg-nights,
html body .tt-pkg .tt-pkg-tags .tt-pkg-flag {
	position: static !important;
	top: auto !important; right: auto !important;
	left: auto !important; bottom: auto !important;
	inset: auto !important;
}
html body .tt-pkg .tt-pkg-tags .tt-pkg-nights {
	background: transparent !important;
	color: var(--tl-muted) !important;
	padding: 0 !important;
	font-family: var(--tl-head);
	font-size: 13px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
}
html body .tt-pkg .tt-pkg-tags .tt-pkg-flag {
	margin-left: auto;
	background: var(--tl-orange) !important;
	color: #fff !important;
	padding: 5px 14px !important;
	border-radius: 999px;
	font-family: var(--tl-head);
	font-size: 11.5px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 1024px) {
	html body .tt-pkg .tt-pkg-media,
	html body .tt-pkg .tt-pkg-media img { height: 260px; }
}
@media (max-width: 767px) {
	html body .tt-pkg .tt-pkg-media,
	html body .tt-pkg .tt-pkg-media img { height: 230px; }
}

/* --- 2. Slow 15-second zoom on inner-page heroes -------------------
   The Home hero is a slideshow and already has its own zoom. This is
   for the single-photo heroes on the other pages. */
.tt-html .hero .hero-bg img {
	animation: tt-hero-zoom 15s ease-out forwards;
	transform-origin: center;
	will-change: transform;
}
@keyframes tt-hero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
	.tt-html .hero .hero-bg img { animation: none; transform: none; }
}

/* --- 3. Blog sidebar "Planning a trip?" buttons --------------------
   In a 300px sidebar the 25%/75% split squashed "Call us" to 86px and
   pushed its icon over the text. Full width, stacked, even. */
.tt-html .side-cta .split-cta {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 10px !important;
}
.tt-html .side-cta .split-cta .tt-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 18px;
	white-space: nowrap;
}
.tt-html .side-cta .split-cta .tt-btn svg { width: 18px; height: 18px; flex: none; }


/* ===================================================================
   DESTINATIONS PAGE — region rows — 2026-08-25
   The Home version is built from Elementor widgets, so its rules key
   off .elementor-* classes. This is the same look for the plain-HTML
   block used on the Destinations page. Scoped to .tt-html so Home is
   untouched. Appended only.
   =================================================================== */

.tt-html .tt-dest-rows { padding: 0; }

.tt-html .tt-dest-rows .tt-drow {
	display: flex;
	align-items: stretch;
	min-height: 540px;
}
.tt-html .tt-dest-rows .tt-drow--flip { flex-direction: row-reverse; }

.tt-html .tt-dest-rows .tt-dmedia {
	flex: 0 0 50%;
	position: relative;
	overflow: hidden;
}
.tt-html .tt-dest-rows .tt-dmedia img {
	width: 100%; height: 100%; min-height: 540px;
	object-fit: cover; display: block; border-radius: 0;
	transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.tt-html .tt-dest-rows .tt-drow:hover .tt-dmedia img { transform: scale(1.045); }

.tt-html .tt-dest-rows .tt-dbody {
	flex: 0 0 50%;
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 56px 64px;
}
.tt-html .tt-dest-rows .tt-drow--flip .tt-dbody { background: var(--tl-sand, #F5F5F5); }

.tt-html .tt-dest-rows .tt-dname {
	font-family: var(--tl-head); font-weight: 800;
	font-size: clamp(1.75rem, 2.8vw, 2.45rem); line-height: 1.08;
	text-transform: uppercase; letter-spacing: -.005em;
	color: var(--tl-text); margin: 0;
}
.tt-html .tt-dest-rows .tt-dtag {
	font-family: var(--tl-head); font-weight: 700;
	font-size: clamp(.98rem, 1.35vw, 1.15rem); line-height: 1.35;
	text-transform: uppercase; letter-spacing: .02em;
	color: var(--tl-accent); margin: 10px 0 0;
}
.tt-html .tt-dest-rows .tt-ddesc {
	font-size: 17px; line-height: 1.75; color: var(--tl-muted);
	margin: 20px 0 0; max-width: 48ch;
}
.tt-html .tt-dest-rows .tt-dmeta {
	font-family: var(--tl-head); font-size: 14.5px; font-weight: 500;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--tl-text); margin: 24px 0 0;
}
.tt-html .tt-dest-rows .tt-dcta {
	align-self: flex-start;
	margin-top: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 34px;
	border: 0; border-radius: 999px;
	background: var(--tl-accent); color: #fff;
	font-family: var(--tl-head); font-weight: 600; font-size: 15.5px;
	letter-spacing: .02em; text-decoration: none;
	transition: background .25s ease;
}
.tt-html .tt-dest-rows .tt-dcta:hover,
.tt-html .tt-dest-rows .tt-dcta:focus-visible { background: #1E7BAE; color: #fff; }
.tt-html .tt-dest-rows .tt-dcta:focus-visible { outline: 3px solid #1E7BAE; outline-offset: 3px; }

@media (max-width: 1024px) {
	.tt-html .tt-dest-rows .tt-drow { min-height: 440px; }
	.tt-html .tt-dest-rows .tt-dmedia img { min-height: 440px; }
	.tt-html .tt-dest-rows .tt-dbody { padding: 44px 40px; }
	.tt-html .tt-dest-rows .tt-ddesc { font-size: 16px; }
}
@media (max-width: 767px) {
	.tt-html .tt-dest-rows .tt-drow,
	.tt-html .tt-dest-rows .tt-drow--flip { flex-direction: column; min-height: 0; }
	.tt-html .tt-dest-rows .tt-dmedia,
	.tt-html .tt-dest-rows .tt-dbody { flex: 0 0 100%; width: 100%; }
	.tt-html .tt-dest-rows .tt-dmedia { aspect-ratio: 4 / 3; }
	.tt-html .tt-dest-rows .tt-dmedia img { min-height: 0; }
	.tt-html .tt-dest-rows .tt-ddesc { max-width: none; }
	.tt-html .tt-dest-rows .tt-dcta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-html .tt-dest-rows .tt-dmedia img,
	.tt-html .tt-dest-rows .tt-drow:hover .tt-dmedia img { transition: none; transform: none; }
}


/* ===================================================================
   BLUE BUTTONS + HEADER ON EVERY PAGE — 2026-08-25
   Appended only; nothing above this line was changed.
   =================================================================== */

/* --- 1. Buttons: blue everywhere ----------------------------------
   Orange is kept for two things only: the "Submit Form" button on
   enquiry forms, and the "Most Booked" pill + its card outline. */

/* top menu button: smaller and blue */
.btn.btn-primary,
.header-enquire {
	background: var(--tl-accent);
	color: #fff;
}
.btn.btn-primary:hover,
.header-enquire:hover {
	background: #1E7BAE;
	color: #fff;
}
.site-header .header-enquire {
	font-size: 13px;
	padding: 11px 22px;
	min-height: 42px;
}

/* package-card and inline buttons */
.tt-html .tt-btn-primary {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
}
.tt-html .tt-btn-primary:hover {
	background: #1E7BAE;
	border-color: #1E7BAE;
	color: #fff;
}

/* contact office card */
.tt-html .tt-map-actions .btn-primary {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
}
.tt-html .tt-map-actions .btn-primary:hover {
	background: #1E7BAE;
	border-color: #1E7BAE;
}

/* Elementor buttons that were set to orange in the builder.
   The hero's underlined text links (526ccae) and the destination-row
   buttons (tt-dbtn) are deliberately left alone. */
.elementor .elementor-button:not(.tt-dbtn .elementor-button) {
	background-color: var(--tl-accent) !important;
	color: #fff !important;
}
.elementor .elementor-button:not(.tt-dbtn .elementor-button):hover {
	background-color: #1E7BAE !important;
	color: #fff !important;
}
/* …but never the hero text links, which have no background at all */
.elementor .elementor-element-526ccae .elementor-button,
.elementor .elementor-element-526ccae .elementor-button:hover {
	background-color: transparent !important;
	color: #fff !important;
}

/* KEPT ORANGE ON PURPOSE — the enquiry form's submit button */
.elementor-widget-shortcode .ff-btn-submit,
.ff-btn-submit {
	background: var(--tl-orange) !important;
	color: #fff !important;
}
.elementor-widget-shortcode .ff-btn-submit:hover,
.ff-btn-submit:hover { background: var(--tl-orange-dark) !important; }


/* --- 2. The Home menu behaviour, now on every page -----------------
   All of this already existed but every rule was written as
   "body.home", so no other page received it. Same rules, no page
   restriction. The transparent state is guarded so it only applies
   where a hero photo actually exists — otherwise white text would
   land on a white page. */

.site-header {
	position: fixed; left: 0; right: 0; top: 0;
	z-index: 60;
	transition: transform .25s ease, background-color .25s ease,
	            box-shadow .25s ease, border-color .25s ease;
	will-change: transform;
}
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

/* the page content must start below the fixed bar */
body:not(.home) .site-content { padding-top: 74px; }
@media (max-width: 900px) {
	body:not(.home) .site-content { padding-top: 62px; }
}
/* a page that opens with a hero photo sits under the bar instead */
body:not(.home):has(.hero) .site-content { padding-top: 0; }

/* over the hero: see-through, white text */
body:has(.hero) .site-header.is-over-hero {
	background: transparent;
	backdrop-filter: none;
	box-shadow: none;
	border-bottom: none;
}
body:has(.hero) .site-header.is-over-hero .nav a,
body:has(.hero) .site-header.is-over-hero .main-navigation a,
body:has(.hero) .site-header.is-over-hero .header-phone { color: #fff; }
body:has(.hero) .site-header.is-over-hero .nav a.active {
	color: #fff;
	border-bottom-color: var(--orange);
}
body:has(.hero) .site-header.is-over-hero .site-logo img,
body:has(.hero) .site-header.is-over-hero .logo img { filter: brightness(0) invert(1); }
body:has(.hero) .site-header.is-over-hero .burger,
body:has(.hero) .site-header.is-over-hero .menu-toggle { color: #fff; }

/* scrolled past the hero: solid white bar */
.site-header.is-solid {
	background: rgba(255,255,255,.97);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 6px 24px rgba(18,42,60,.08);
}

/* scrolling down: slide out of the way */
.site-header.is-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
	.site-header.is-hidden { transform: none; }
}


/* --- CORRECTION 2026-08-25 -----------------------------------------
   The blanket blue rule above used :not(), which inflated its weight
   to four class-levels. The Home hero exception only had three, so it
   lost and the hero's three underlined text links were painted blue.
   They must stay transparent with a white underline. This selector is
   deliberately heavier so it wins. */
.elementor .elementor-element.e-con[data-id="526ccae"] .elementor-button,
.elementor .elementor-element.e-con[data-id="526ccae"] .elementor-button:hover,
.elementor .elementor-element.e-con[data-id="526ccae"] .elementor-button:focus {
	background: transparent !important;
	background-color: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
	transform: none !important;
}


/* ===================================================================
   FIXES TO MY OWN HEADER CHANGE — 2026-08-25
   Copying the Home menu behaviour to every page brought three faults
   with it. Home already had guards for these; I had not copied them.
   =================================================================== */

/* --- 1. Logo stays full colour on every page except Home ----------
   Home sits on a dark hero and wants the white logo. The other pages
   should keep the normal coloured logo. A soft shadow keeps it clear
   against a photo. */
body:not(.home) .site-header.is-over-hero .site-logo img,
body:not(.home) .site-header.is-over-hero .logo img,
body:not(.home) .site-header.is-over-hero .custom-logo {
	filter: drop-shadow(0 1px 6px rgba(10,26,38,.45)) !important;
}

/* --- 2. Dropdown links must stay dark on their white panel --------
   Without this the Destinations dropdown was white text on white. */
body:not(.home) .site-header.is-over-hero .main-navigation ul ul a,
body:not(.home) .site-header.is-over-hero .nav .sub a,
body:not(.home) .site-header.is-over-hero .sub-menu a {
	color: var(--ink) !important;
	text-shadow: none !important;
}
body:not(.home) .site-header.is-over-hero .main-navigation ul ul a:hover,
body:not(.home) .site-header.is-over-hero .nav .sub a:hover,
body:not(.home) .site-header.is-over-hero .sub-menu a:hover {
	color: var(--blue) !important;
}
body:not(.home) .site-header.is-over-hero .main-navigation ul ul,
body:not(.home) .site-header.is-over-hero .nav .sub { text-shadow: none; }

/* --- 3. Top-level nav text readable over a photo ------------------ */
body:not(.home) .site-header.is-over-hero .nav > a,
body:not(.home) .site-header.is-over-hero .main-navigation > ul > li > a,
body:not(.home) .site-header.is-over-hero .header-phone {
	text-shadow: 0 1px 10px rgba(10,26,38,.55), 0 1px 2px rgba(10,26,38,.4);
}

/* --- 4. Mobile menu button must always be visible -----------------
   Over a photo it needs to be white; on the solid white bar it needs
   to be dark. Before this it was white in both states, so it vanished
   against the white bar. */
@media (max-width: 900px) {
	.site-header .menu-toggle {
		display: inline-flex !important;
		align-items: center; justify-content: center;
		width: 44px; height: 44px;
		background: transparent;
		border: 0;
	}
	.site-header .menu-toggle__bars,
	.site-header .menu-toggle__bars::before,
	.site-header .menu-toggle__bars::after {
		background-color: currentColor;
	}
	/* over the hero photo: white, with a shadow so it reads */
	body:has(.hero) .site-header.is-over-hero .menu-toggle {
		color: #fff !important;
		filter: drop-shadow(0 1px 4px rgba(10,26,38,.6));
	}
	/* on the solid white bar, and on pages with no hero: dark */
	.site-header.is-solid .menu-toggle,
	body:not(:has(.hero)) .site-header .menu-toggle {
		color: var(--ink) !important;
		filter: none;
	}
}


/* ===================================================================
   INNER-PAGE HERO BREATHING ROOM — 2026-08-25
   Making the header fixed meant it now floats ON TOP of the hero.
   The hero heights and padding were set for a header that pushed the
   page down, so the text ended up squeezed right under the bar —
   only 26px of clearance on Contact. Home has 277px. These heroes are
   made taller and given proper top padding to clear the fixed bar.
   =================================================================== */

.tt-html .hero-sm { min-height: 62vh; }
.tt-html .hero-md { min-height: 76vh; }

/* clear the fixed 74px bar, then breathe */
.tt-html .hero-sm .hero-inner,
.tt-html .hero-md .hero-inner {
	padding-block: 150px 70px;
}

@media (max-width: 900px) {
	.tt-html .hero-sm { min-height: 56vh; }
	.tt-html .hero-md { min-height: 62vh; }
	.tt-html .hero-sm .hero-inner,
	.tt-html .hero-md .hero-inner { padding-block: 120px 56px; }
}


/* ---- Home "Before you pack" guide links ----
   These are button widgets, but they must read as the plain underlined
   text links used on the About page (.tt-html .view-link). Same exception
   pattern as the hero text links (526ccae) above. */
html body .elementor .tt-guide-btn.tt-guide-btn .elementor-button.elementor-button,
html body .elementor .tt-guide-btn.tt-guide-btn a.elementor-button.elementor-button {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--tl-text) !important;
	fill: var(--tl-text) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tl-text) !important;
	border-radius: 0 !important;
	padding: 0 0 3px !important;
	min-height: 0 !important;
	box-shadow: none !important;
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	justify-content: flex-start !important;
	font-family: var(--tl-head);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
}

html body .elementor .tt-guide-btn .elementor-button-content-wrapper {
	justify-content: flex-start !important;
}

html body .elementor .tt-guide-btn.tt-guide-btn .elementor-button.elementor-button:hover,
html body .elementor .tt-guide-btn.tt-guide-btn .elementor-button.elementor-button:focus,
html body .elementor .tt-guide-btn.tt-guide-btn .elementor-button.elementor-button:focus-visible,
html body .elementor .tt-guide-btn.tt-guide-btn .elementor-button.elementor-button:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--tl-accent) !important;
	border-bottom-color: var(--tl-accent) !important;
	transform: none !important;
	box-shadow: none !important;
}