/* LNTA Vision & Mission — page design.

   The page is nine sections that are all, structurally, "a heading and a
   bullet list". Left alone that reads as one long undifferentiated stack,
   which is what made it feel unfinished however tidy the boxes were. So the
   job here is hierarchy: give each kind of section its own treatment, turn
   the bullets into something deliberate, and number the focus areas so the
   longest stretch of the page has a spine to follow.

   Everything is cosmetic and keyed to this page's Elementor element IDs —
   no page content is modified, and deactivating the plugin restores the
   page exactly.

   Palette, in step with the rest of the site:
     green #032902 · brand green #225321 · gold #f0a818
     surface #ffffff · hairline #e6e8de · body #39414d

   Colour rules carry !important at two or more classes throughout: the
   site-wide `.elementor * { color:#fff }` in so-css-tourm.css loads after
   plugin stylesheets and beats any single-class selector. */

/* ==========================================================================
   1. Page rhythm
   ========================================================================== */

.elementor-element-f7bd6b7,
.elementor-element-04ed26a,
.elementor-element-41b70d8,
.elementor-element-5f27842,
.elementor-element-f77bf34,
.elementor-element-53b635d {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

.elementor-element-41b70d8 {
	padding-top: 44px !important;
	padding-bottom: 6px !important;
}

/* ==========================================================================
   2. Intro — photograph and standfirst
   ========================================================================== */

/* The page's own two photographs. An earlier pass removed them, having
   checked the wrong setting: this theme's image widget stores its picture
   under `image1` (its layout style decides which), not `image`, so both
   looked empty when they were not. They are back in their original slots —
   only their presentation is set here. */
.elementor-element-ffe7956 > .e-con-inner,
.elementor-element-ffe7956 {
	gap: 44px !important;
	align-items: center !important;
}

.elementor-element-04ed26a > .e-con-inner,
.elementor-element-04ed26a {
	gap: 36px !important;
	align-items: center !important;
}

.elementor-element-8f9acec,
.elementor-element-848e5eb {
	flex: 0 0 38% !important;
}

.elementor-element-8f9acec img,
.elementor-element-c0804b9 img {
	width: 100% !important;
	height: auto !important;
	display: block;
}

/* Both are photographs now — the second slot held an AI-generated cut-out
   until 2026-10-08 and was given a drop-shadow that followed the figure;
   a real photograph wants the same frame as its neighbour. */
.elementor-element-8f9acec img,
.elementor-element-c0804b9 img {
	border-radius: 16px;
	box-shadow: 0 16px 38px rgba(3, 41, 2, 0.16);
}

/* The mandate photograph is landscape where the first is portrait, so it
   is cropped to a shape that sits level with the card beside it. */
.elementor-element-c0804b9 img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* The widget wraps each picture in its own padded frame; the padding was
   set for the old pill-shaped treatment and leaves the photo floating
   inside a box that no longer exists. */
.elementor-element-8f9acec .elementor-widget-container,
.elementor-element-c0804b9 .elementor-widget-container {
	padding: 0 !important;
}

/* Justified text with no hyphenation opens rivers down a long measure. */
.elementor-element-1fc195c,
.elementor-element-1fc195c p {
	text-align: left !important;
}

/* The opening sentence carries the whole page, so it gets standfirst
   treatment rather than running at body size. */
.elementor-element-1fc195c p:first-of-type {
	font-size: 1.12rem !important;
	line-height: 1.75 !important;
	color: #2b333f !important;
}

.elementor-element-1fc195c p {
	color: #39414d !important;
	line-height: 1.8 !important;
}

/* ==========================================================================
   3. Shared: section headings
   ========================================================================== */

/* A short gold rule above each heading, which gives the stack of sections
   a repeating marker to scan by. */
.elementor-element-04ed26a .elementor-widget-heading .elementor-heading-title::before,
.elementor-element-41b70d8 .elementor-widget-heading .elementor-heading-title::before,
.elementor-element-f7bd6b7 .elementor-widget-heading .elementor-heading-title::before,
.elementor-element-f77bf34 .elementor-widget-heading .elementor-heading-title::before,
.elementor-element-53b635d .elementor-widget-heading .elementor-heading-title::before {
	content: '';
	display: block;
	width: 46px;
	height: 4px;
	margin-bottom: 16px;
	border-radius: 999px;
	background: #f0a818;
}

.elementor-element-41b70d8 .elementor-heading-title {
	font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
	color: #225321 !important;
}

/* ==========================================================================
   4. Shared: lists become check lists
   ========================================================================== */

.elementor-element-04ed26a ul,
.elementor-element-5f27842 ul,
.elementor-element-f77bf34 ul,
.elementor-element-53b635d ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.elementor-element-04ed26a li,
.elementor-element-5f27842 li,
.elementor-element-f77bf34 li,
.elementor-element-53b635d li {
	position: relative;
	margin: 0 0 12px !important;
	padding-left: 30px;
	line-height: 1.65;
	list-style: none !important;
	break-inside: avoid;
}

.elementor-element-04ed26a li::marker,
.elementor-element-5f27842 li::marker,
.elementor-element-f77bf34 li::marker,
.elementor-element-53b635d li::marker {
	content: '';
}

/* A gold tick in place of a disc. Drawn as a rotated L rather than a glyph
   so it renders identically everywhere and needs no icon font. */
.elementor-element-04ed26a li::before,
.elementor-element-5f27842 li::before,
.elementor-element-f77bf34 li::before,
.elementor-element-53b635d li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.46em;
	width: 7px;
	height: 12px;
	border: solid #f0a818;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(42deg);
}

/* ==========================================================================
   5. Vision / Mission and Diaspora / Culture — the green panels
   ========================================================================== */

.elementor-element-f7bd6b7 > .e-con-inner,
.elementor-element-f77bf34 > .e-con-inner,
.elementor-element-f7bd6b7,
.elementor-element-f77bf34 {
	gap: 26px !important;
	align-items: stretch !important;
}

.elementor-element-5dba7b5,
.elementor-element-11f5b77,
.elementor-element-a6efd1b,
.elementor-element-8301bb8 {
	position: relative;
	width: auto !important;
	flex: 1 1 0 !important;
	/* These panels are column flex containers that Elementor also set to
	   flex-wrap: wrap. That combination is a trap: the moment the panel's
	   height is constrained for ANY reason, the children wrap into a
	   SECOND COLUMN — heading on the left, body text pushed out to the
	   right and clipped by the card. It reproduces exactly by setting a
	   height on the panel, and it is what broke these cards on phones
	   while every automated check passed, because the overflow is clipped
	   inside the card and never widens the document. */
	flex-wrap: nowrap !important;
	flex-direction: column !important;
	border: 0 !important;
	border-radius: 18px !important;
	padding: 44px 40px !important;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(3, 41, 2, 0.18);
}

/* A faint wash in the corner so a 600px block of flat green has somewhere
   for the light to land. Kept under 0.08 — a heavier gold tint turns the
   brand green olive. */
.elementor-element-5dba7b5::after,
.elementor-element-11f5b77::after,
.elementor-element-a6efd1b::after,
.elementor-element-8301bb8::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(90% 70% at 100% 0%, rgba(240, 168, 24, 0.07), rgba(240, 168, 24, 0) 60%),
		radial-gradient(80% 60% at 0% 100%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%);
}

.elementor-element-5dba7b5 > *,
.elementor-element-11f5b77 > *,
.elementor-element-a6efd1b > *,
.elementor-element-8301bb8 > * {
	position: relative;
	z-index: 1;
}

/* Each widget inside these panels carries 50px of its own padding — set
   back when the panels were full-bleed bands and that was the only spacing
   they had. Inside a card with 44px padding of its own it just pushes the
   heading down and leaves a band of empty green under the last line; on a
   phone that was 100px of a 448px card. */
.elementor-element-5dba7b5 > .elementor-widget > .elementor-widget-container,
.elementor-element-11f5b77 > .elementor-widget > .elementor-widget-container,
.elementor-element-a6efd1b > .elementor-widget > .elementor-widget-container,
.elementor-element-8301bb8 > .elementor-widget > .elementor-widget-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Keep a gap between the heading and the copy that follows it. */
.elementor-element-5dba7b5 > .elementor-widget-heading,
.elementor-element-11f5b77 > .elementor-widget-heading,
.elementor-element-a6efd1b > .elementor-widget-heading,
.elementor-element-8301bb8 > .elementor-widget-heading {
	margin-bottom: 14px !important;
}

.elementor-element-f7bd6b7 .elementor-heading-title,
.elementor-element-f77bf34 .elementor-heading-title {
	color: #ffffff !important;
	font-size: clamp(1.4rem, 1.9vw, 1.75rem) !important;
	line-height: 1.25 !important;
}

.elementor-element-f7bd6b7 p,
.elementor-element-f7bd6b7 li,
.elementor-element-f77bf34 p,
.elementor-element-f77bf34 li {
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: 1rem !important;
	line-height: 1.8 !important;
}

/* The theme's paragraph margin is still there on the last line of a card,
   so every card carried a band of empty green under its final sentence on
   top of the card's own padding. */
.elementor-element-f7bd6b7 .elementor-widget-container > p:last-child,
.elementor-element-f77bf34 .elementor-widget-container > p:last-child,
.elementor-element-04ed26a .elementor-widget-container > p:last-child,
.elementor-element-5f27842 .elementor-widget-container > p:last-child,
.elementor-element-53b635d .elementor-widget-container > p:last-child,
.elementor-element-f7bd6b7 .elementor-widget-container > ul:last-child,
.elementor-element-f77bf34 .elementor-widget-container > ul:last-child,
.elementor-element-04ed26a .elementor-widget-container > ul:last-child,
.elementor-element-5f27842 .elementor-widget-container > ul:last-child,
.elementor-element-53b635d .elementor-widget-container > ul:last-child {
	margin-bottom: 0 !important;
}

.elementor-element-f7bd6b7 em,
.elementor-element-f7bd6b7 i {
	color: #f0a818 !important;
	font-style: normal;
	font-weight: 700;
}

/* ==========================================================================
   6. Our Mandate
   ========================================================================== */

.elementor-element-c3a334a {
	width: auto !important;
	flex: 1 1 0 !important;
	background-color: #ffffff !important;
	border: 1px solid #e6e8de !important;
	border-radius: 18px !important;
	padding: 44px !important;
	box-shadow: 0 2px 12px rgba(15, 47, 15, 0.07) !important;
}

.elementor-element-04ed26a .elementor-heading-title {
	color: #225321 !important;
	font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
}

.elementor-element-04ed26a .elementor-widget-text-editor > .elementor-widget-container > p:first-child {
	margin-bottom: 20px !important;
	font-weight: 600;
	/* Lifted out of the <ul>, so it lost the inline colour the list items
	   carry and `.elementor * { color:#fff }` rendered it white on white. */
	color: #14181f !important;
}

/* One column: the mandate card shares its row with a photograph, so it is
   no longer wide enough for two. */
.elementor-element-04ed26a ul {
	columns: 1;
}

.elementor-element-04ed26a li {
	color: #39414d !important;
}

/* ==========================================================================
   7. Strategic focus areas — numbered cards
   ========================================================================== */

.elementor-element-5f27842 > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 26px !important;
	align-items: stretch !important;
	counter-reset: lvm-focus;
}

.elementor-element-761b876,
.elementor-element-8858b94,
.elementor-element-a7ddd28,
.elementor-element-6ca4ffa {
	position: relative;
	counter-increment: lvm-focus;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	overflow: hidden;
	background-color: #ffffff !important;
	border: 1px solid #e6e8de !important;
	border-radius: 18px !important;
	padding: 36px 34px !important;
	box-shadow: 0 2px 12px rgba(15, 47, 15, 0.07) !important;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.elementor-element-761b876:hover,
.elementor-element-8858b94:hover,
.elementor-element-a7ddd28:hover,
.elementor-element-6ca4ffa:hover {
	transform: translateY(-4px);
	border-color: #d9e2d6 !important;
	box-shadow: 0 16px 36px rgba(15, 47, 15, 0.12) !important;
}

/* 01-04 set large and pale behind the top-right corner: it orders the four
   areas without competing with the headings. */
/* Elementor gives every container a `::before` of its own for the
   background overlay (`content: var(--background-overlay)`, which resolves
   to none), and its stylesheet loads after plugin stylesheets — so at equal
   specificity it wins and the numeral never renders. Hence !important on
   content, and the page-class prefix for good measure. */
.elementor-1277 .elementor-element-761b876::before,
.elementor-1277 .elementor-element-8858b94::before,
.elementor-1277 .elementor-element-a7ddd28::before,
.elementor-1277 .elementor-element-6ca4ffa::before {
	content: counter(lvm-focus, decimal-leading-zero) !important;
	display: block !important;
	position: absolute !important;
	/* Elementor's own container ::before sets inset: 0; leaving `left` at 0
	   stretches this box across the card and the numeral prints against the
	   left edge, on top of the heading. */
	inset: auto !important;
	top: 4px !important;
	right: 22px !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	font-size: 5.2rem;
	font-weight: 800;
	line-height: 1;
	color: rgba(34, 83, 33, 0.10) !important;
	background: none !important;
	pointer-events: none;
	z-index: 0;
}

.elementor-element-5f27842 .elementor-widget {
	position: relative;
	z-index: 1;
}

.elementor-element-5f27842 .elementor-heading-title {
	position: relative;
	padding-right: 56px;
	color: #225321 !important;
	font-size: 1.16rem !important;
	line-height: 1.35 !important;
}

.elementor-element-5f27842 li {
	color: #39414d !important;
	font-size: 0.97rem !important;
}

/* ==========================================================================
   8. Core Services / Tourism Investment
   ========================================================================== */

.elementor-element-53b635d > .e-con-inner,
.elementor-element-53b635d {
	gap: 26px !important;
	align-items: stretch !important;
}

.elementor-element-eed117a,
.elementor-element-718381f {
	width: auto !important;
	flex: 1 1 0 !important;
	/* These columns carried their own padding, which set their cards 18px
	   inside the edges every other card sits on. */
	padding: 0 !important;
}

.elementor-element-af25eda,
.elementor-element-c1bb9fa {
	width: 100% !important;
	max-width: 100% !important;
	align-self: stretch !important;
	height: 100%;
	background-color: #ffffff !important;
	/* `border: 4px groove` is a 3D bevel from the table-layout era and
	   rendered as a muddy double line — one card had it in orange, the
	   other in green. */
	border: 1px solid #e6e8de !important;
	border-radius: 18px !important;
	padding: 40px 36px !important;
	box-shadow: 0 2px 12px rgba(15, 47, 15, 0.07) !important;
}

.elementor-element-53b635d .elementor-heading-title {
	color: #225321 !important;
	font-size: clamp(1.3rem, 1.8vw, 1.6rem) !important;
}

.elementor-element-53b635d li {
	color: #39414d !important;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

/* The page's side gutters are not padding: they are what is left over when
   the 1344px content box is centred. Below roughly 1392px there is nothing
   left over, so every card ran into both screen edges. */
@media (max-width: 1391px) {
	.elementor-element-ffe7956 > .e-con-inner,
	.elementor-element-f7bd6b7 > .e-con-inner,
	.elementor-element-04ed26a > .e-con-inner,
	.elementor-element-41b70d8 > .e-con-inner,
	.elementor-element-5f27842 > .e-con-inner,
	.elementor-element-f77bf34 > .e-con-inner,
	.elementor-element-53b635d > .e-con-inner {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

@media (max-width: 991px) {
	.elementor-element-ffe7956 > .e-con-inner,
	.elementor-element-ffe7956,
	.elementor-element-04ed26a > .e-con-inner,
	.elementor-element-04ed26a,
	.elementor-element-f7bd6b7 > .e-con-inner,
	.elementor-element-f77bf34 > .e-con-inner,
	.elementor-element-53b635d > .e-con-inner {
		flex-direction: column !important;
		gap: 22px !important;
	}

	.elementor-element-ffe7956 > .e-con-inner,
	.elementor-element-f7bd6b7 > .e-con-inner,
	.elementor-element-04ed26a > .e-con-inner,
	.elementor-element-41b70d8 > .e-con-inner,
	.elementor-element-5f27842 > .e-con-inner,
	.elementor-element-f77bf34 > .e-con-inner,
	.elementor-element-53b635d > .e-con-inner {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.elementor-element-5f27842 > .e-con-inner {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.elementor-element-8f9acec,
	.elementor-element-848e5eb {
		flex: 1 1 auto !important;
		width: 100% !important;
	}

	.elementor-element-5dba7b5,
	.elementor-element-11f5b77,
	.elementor-element-a6efd1b,
	.elementor-element-8301bb8 {
		padding: 32px 26px !important;
		/* `flex: 1 1 0` makes the pair share a row evenly on a wide screen.
		   Once the row stacks, that same rule makes them share the COLUMN
		   evenly — so the shorter card is padded out to match the taller
		   one and its text floats in the middle of a half-empty box. Each
		   card should simply be as tall as its own content here. */
		flex: 0 0 auto !important;
		justify-content: flex-start !important;
	}

	.elementor-element-af25eda,
	.elementor-element-c1bb9fa,
	.elementor-element-eed117a,
	.elementor-element-718381f {
		flex: 0 0 auto !important;
		height: auto !important;
	}

	.elementor-element-c3a334a,
	.elementor-element-af25eda,
	.elementor-element-c1bb9fa {
		padding: 30px 24px !important;
	}
}

@media (max-width: 575px) {
	.elementor-element-761b876,
	.elementor-element-8858b94,
	.elementor-element-a7ddd28,
	.elementor-element-6ca4ffa {
		padding: 28px 22px !important;
	}

	.elementor-element-761b876::before,
	.elementor-element-8858b94::before,
	.elementor-element-a7ddd28::before,
	.elementor-element-6ca4ffa::before {
		font-size: 4rem;
		right: 16px;
	}
}