/*!
 * Oberoi Tours — front-end stylesheet
 * Theme developed by CodesDen — https://codesden.com/
 */

/* ==================================================================== *
 * 1. Tokens
 * ==================================================================== */
:root {
	--ot-ink: #10233d;
	--ot-ink-soft: #1d3760;
	--ot-body: #4c5666;
	--ot-muted-text: #7b8695;
	--ot-gold: #b0873a;
	--ot-gold-dark: #96712c;
	--ot-gold-soft: #f4ecdd;
	--ot-wa: #1eaa5c;      /* floating action button only */
	--ot-wa-ink: #0e7c42;  /* icon green readable on white */
	--ot-line: #e5e8ee;
	--ot-surface: #ffffff;
	--ot-surface-alt: #f7f8fa;
	--ot-cream: #faf6ef;

	--ot-radius: 14px;
	--ot-radius-sm: 8px;
	--ot-radius-pill: 999px;

	--ot-shadow-sm: 0 1px 2px rgba(16, 35, 61, .06), 0 4px 12px rgba(16, 35, 61, .05);
	--ot-shadow-md: 0 8px 28px rgba(16, 35, 61, .10);
	--ot-shadow-lg: 0 20px 48px rgba(16, 35, 61, .16);

	--ot-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--ot-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--ot-container: 1200px;
	--ot-gutter: 24px;
	--ot-header-h: 78px;
}

/* ==================================================================== *
 * 2. Base
 * ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ot-header-h) + 16px); }

body {
	margin: 0;
	font-family: var(--ot-sans);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ot-body);
	background: var(--ot-surface);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ot-ink); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ot-gold); }

h1, h2, h3, h4, h5 {
	font-family: var(--ot-serif);
	color: var(--ot-ink);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 .5em;
	letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

:focus-visible { outline: 2px solid var(--ot-gold); outline-offset: 3px; border-radius: 4px; }

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

.ot-skip-link:focus {
	position: fixed; top: 12px; left: 12px; z-index: 999;
	width: auto; height: auto; clip: auto; clip-path: none;
	padding: 12px 20px; background: var(--ot-ink); color: #fff; border-radius: var(--ot-radius-sm);
}

.ot-container {
	width: 100%;
	max-width: var(--ot-container);
	margin-inline: auto;
	padding-inline: var(--ot-gutter);
}
.ot-container-narrow { max-width: 860px; }

.ot-icon { flex: none; }

/* ==================================================================== *
 * 3. Buttons
 * ==================================================================== */
.ot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font-family: var(--ot-sans);
	font-size: .93rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-pill);
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
	white-space: nowrap;
}
.ot-btn:hover { transform: translateY(-2px); }
.ot-btn-lg { padding: 15px 30px; font-size: 1rem; }
.ot-btn-block { width: 100%; }

.ot-btn-primary { background: var(--ot-ink); color: #fff; box-shadow: var(--ot-shadow-sm); }
.ot-btn-primary:hover { background: var(--ot-gold); color: #fff; box-shadow: var(--ot-shadow-md); }

.ot-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.ot-btn-ghost:hover { background: #fff; color: var(--ot-ink); border-color: #fff; }

.ot-section .ot-btn-ghost,
.ot-cta-copy .ot-btn-ghost { color: #fff; }

/* WhatsApp buttons sit inside a navy/gold palette, so they wear the site's own
   outline style and carry the green only on the icon. Flat WhatsApp green is
   reserved for the floating action button, where it reads as the platform's
   own affordance rather than as a brand colour. */
.ot-btn-wa {
	background: #fff;
	color: var(--ot-ink);
	border-color: var(--ot-line);
	box-shadow: var(--ot-shadow-sm);
}
.ot-btn-wa:hover { background: var(--ot-ink); color: #fff; border-color: var(--ot-ink); box-shadow: var(--ot-shadow-md); }
.ot-btn-wa .ot-icon { color: var(--ot-wa-ink); }
.ot-btn-wa:hover .ot-icon { color: #fff; }

/* In the white header it is the only call to action, so it takes the primary
   navy fill rather than a washed-out white-on-white outline. */
.ot-header-actions .ot-btn-wa { background: var(--ot-ink); color: #fff; border-color: var(--ot-ink); }
.ot-header-actions .ot-btn-wa .ot-icon { color: #fff; }
.ot-header-actions .ot-btn-wa:hover { background: var(--ot-gold); color: #fff; border-color: var(--ot-gold); }

/* The CTA band is dark, so the same button has to invert. Scoped to the copy
   column — the enquiry form inside the band is a white card. */
.ot-cta-actions .ot-btn-wa {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
	box-shadow: none;
}
.ot-cta-actions .ot-btn-wa .ot-icon { color: #fff; }
.ot-cta-actions .ot-btn-wa:hover { background: #fff; color: var(--ot-ink); border-color: #fff; }
.ot-cta-actions .ot-btn-wa:hover .ot-icon { color: var(--ot-wa-ink); }

.ot-btn-wa-outline { background: #fff; color: var(--ot-ink-soft); border-color: var(--ot-line); }
.ot-btn-wa-outline .ot-icon { color: var(--ot-wa-ink); }
.ot-btn-wa-outline:hover { background: var(--ot-gold-soft); color: var(--ot-ink); border-color: rgba(176, 135, 58, .45); }
.ot-btn-wa-outline:hover .ot-icon { color: var(--ot-wa-ink); }

/* ==================================================================== *
 * 4. Header
 * ==================================================================== */
.ot-topbar {
	background: var(--ot-ink);
	color: rgba(255, 255, 255, .8);
	font-size: .82rem;
}
.ot-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 40px;
}
.ot-topbar-tag { margin: 0; letter-spacing: .02em; }
.ot-topbar-contact { display: flex; gap: 22px; }
.ot-topbar-contact a {
	display: inline-flex; align-items: center; gap: 7px;
	color: rgba(255, 255, 255, .85);
}
.ot-topbar-contact a:hover { color: var(--ot-gold-soft); }

.ot-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--ot-line);
}
.ot-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--ot-header-h);
}

.ot-brand img { max-height: 54px; width: auto; }
.ot-brand-text { display: block; }
.ot-brand-name {
	display: block;
	font-family: var(--ot-serif);
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--ot-ink);
	line-height: 1.1;
	letter-spacing: .01em;
}
.ot-brand-tagline {
	display: block;
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ot-muted-text);
	margin-top: 3px;
}

.ot-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ot-menu li { position: relative; }
.ot-menu > li > a,
.ot-menu > li > .ot-menu-label {
	display: block;
	padding: 10px 14px;
	font-size: .93rem;
	font-weight: 500;
	color: var(--ot-ink);
	border-radius: var(--ot-radius-sm);
}
.ot-menu > li > a:hover,
.ot-menu > li.current-menu-item > a,
.ot-menu > li.current-menu-parent > a { color: var(--ot-gold); }

.ot-menu .sub-menu,
.ot-menu .children {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
	box-shadow: var(--ot-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 20;
}
.ot-menu li:hover > .sub-menu,
.ot-menu li:focus-within > .sub-menu,
.ot-menu li:hover > .children {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.ot-menu .sub-menu a,
.ot-menu .children a {
	display: block;
	padding: 9px 14px;
	font-size: .9rem;
	border-radius: var(--ot-radius-sm);
}
.ot-menu .sub-menu a:hover { background: var(--ot-surface-alt); color: var(--ot-gold); }
.ot-menu .sub-menu .sub-menu { top: 0; left: 100%; }

.ot-header-actions { display: flex; align-items: center; gap: 12px; }

.ot-nav-toggle {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius-sm);
	cursor: pointer;
}
.ot-nav-toggle span {
	display: block;
	width: 20px; height: 2px;
	margin: 4px auto;
	background: var(--ot-ink);
	transition: transform .25s ease, opacity .2s ease;
}
.ot-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ot-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ot-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==================================================================== *
 * 5. Hero
 * ==================================================================== */
.ot-hero {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--ot-ink) center/cover no-repeat;
	color: #fff;
	padding: 84px 0 72px;
	min-height: 340px;
}
.ot-hero-home { min-height: min(84vh, 760px); padding: 120px 0; }
.ot-hero-tour { min-height: 460px; }

.ot-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 20, 36, .62) 0%, rgba(9, 20, 36, .48) 45%, rgba(9, 20, 36, .82) 100%);
}
.ot-hero-inner { position: relative; z-index: 1; max-width: 880px; }

.ot-hero-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ot-gold-soft);
}
a.ot-hero-eyebrow { border-bottom: 1px solid rgba(244, 236, 221, .35); padding-bottom: 3px; }
a.ot-hero-eyebrow:hover { color: #fff; }

.ot-hero-title { color: #fff; margin-bottom: .35em; text-wrap: balance; }
.ot-hero-title-lg { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }

.ot-hero-text {
	max-width: 620px;
	font-size: 1.06rem;
	color: rgba(255, 255, 255, .88);
}

.ot-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.ot-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}
.ot-hero-meta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	font-size: .87rem;
	font-weight: 500;
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--ot-radius-pill);
	backdrop-filter: blur(4px);
}

/* ==================================================================== *
 * 6. Breadcrumb
 * ==================================================================== */
.ot-breadcrumb { font-size: .82rem; margin-bottom: 18px; }
.ot-breadcrumb ol {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	list-style: none; margin: 0; padding: 0;
}
.ot-breadcrumb li { display: flex; align-items: center; gap: 6px; }
.ot-breadcrumb li + li::before { content: "/"; opacity: .5; }
.ot-breadcrumb a { color: inherit; opacity: .82; }
.ot-breadcrumb a:hover { opacity: 1; }
.ot-breadcrumb span[aria-current] { opacity: .7; }
.ot-breadcrumb-light { color: rgba(255, 255, 255, .9); }
.ot-breadcrumb-light a:hover { color: var(--ot-gold-soft); }

/* ==================================================================== *
 * 7. Sections
 * ==================================================================== */
/* padding-block, not the shorthand: several templates use
   `class="ot-container ot-section"` on one element, and `padding: 84px 0`
   would reset .ot-container's side gutter to zero — putting the copy hard
   against the screen edge on anything narrower than 1200px. */
.ot-section { padding-block: 84px; }
.ot-section-muted { background: var(--ot-surface-alt); }
.ot-section-cream { background: var(--ot-cream); }

.ot-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 42px;
}
.ot-section-head-center {
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}
.ot-section-title { margin: 0 0 .2em; }
.ot-section-text { color: var(--ot-muted-text); margin: 0; }

.ot-eyebrow {
	margin: 0 0 10px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ot-gold);
}

.ot-link-more {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: .92rem; font-weight: 600; color: var(--ot-gold);
	white-space: nowrap;
}
.ot-link-more:hover { gap: 11px; color: var(--ot-gold-dark); }
.ot-link-more .ot-icon { transition: transform .2s ease; }

.ot-intro { margin-bottom: 48px; max-width: 900px; }
.ot-empty { color: var(--ot-muted-text); }

.ot-prose { font-size: 1.02rem; }
.ot-prose h2 { margin-top: 1.6em; }
.ot-prose h3 { margin-top: 1.4em; }
.ot-prose ul, .ot-prose ol { padding-left: 1.3em; }
.ot-prose li { margin-bottom: .45em; }
.ot-prose img { border-radius: var(--ot-radius); margin: 1.4em 0; }
.ot-prose a { color: var(--ot-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ==================================================================== *
 * 8. Grids
 * ==================================================================== */
.ot-tour-grid,
.ot-category-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ot-cols-2 { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.ot-cols-4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.ot-listing-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 32px;
}
.ot-listing-count { margin: 0; font-size: .9rem; color: var(--ot-muted-text); }

/* ---- Vertical rhythm inside the hand-coded templates -----------------
 * The archive, category and contact templates stack independent blocks —
 * category grid, listing head, tour grid, pagination, FAQ — as plain siblings
 * inside one .ot-section, so spacing depended on whichever block happened to
 * carry a margin. The category grid carries none, which left "All Tours"
 * sitting flush against the cards above it. This gives every block a shared
 * gap. Sibling margins collapse, so blocks with their own margin do not double
 * up. Elementor pages are unaffected — they do not use this container. */
.ot-container.ot-section > * + * { margin-top: 68px; }

/* A listing head belongs to the grid below it, so that pair stays tight. */
.ot-container.ot-section > .ot-listing-head + .ot-tour-grid,
.ot-container.ot-section > .ot-listing-head + .ot-category-grid { margin-top: 0; }

/* Pagination reads as part of the list it pages through. */
.ot-container.ot-section > .navigation { margin-top: 44px; }

/* ==================================================================== *
 * 9. Tour card
 * ==================================================================== */
.ot-card {
	display: flex;
	flex-direction: column;
	background: var(--ot-surface);
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ot-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ot-shadow-lg);
	border-color: transparent;
}

.ot-card-media {
	position: relative;
	aspect-ratio: 18 / 13;
	overflow: hidden;
	background: var(--ot-surface-alt);
}
.ot-card-img,
.ot-card-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ot-card:hover .ot-card-img { transform: scale(1.07); }
.ot-card-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e9edf3, #dfe5ee); }

.ot-badge {
	position: absolute; top: 14px; left: 14px;
	padding: 6px 13px;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: #fff;
	background: var(--ot-gold);
	border-radius: var(--ot-radius-pill);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.ot-badge-popular { background: #b0453a; }
.ot-badge-recommended { background: var(--ot-ink-soft); }

.ot-card-duration {
	position: absolute; bottom: 14px; left: 14px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px;
	font-size: .78rem; font-weight: 600;
	color: var(--ot-ink);
	background: rgba(255, 255, 255, .94);
	border-radius: var(--ot-radius-pill);
	backdrop-filter: blur(4px);
}

.ot-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }

.ot-card-location {
	display: flex; align-items: center; gap: 6px;
	margin: 0 0 8px;
	font-size: .78rem; font-weight: 500;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--ot-gold);
}
.ot-card-location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ot-card-title { font-size: 1.3rem; margin: 0 0 10px; line-height: 1.28; }
.ot-card-title a { color: var(--ot-ink); }
.ot-card:hover .ot-card-title a { color: var(--ot-gold); }

.ot-card-excerpt { font-size: .92rem; color: var(--ot-muted-text); margin: 0 0 16px; }

.ot-card-features {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; margin: 0 0 18px; padding: 0;
}
.ot-card-features li {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px;
	font-size: .76rem; font-weight: 500;
	color: var(--ot-ink-soft);
	background: var(--ot-gold-soft);
	border-radius: var(--ot-radius-pill);
}

.ot-card-actions {
	display: flex; gap: 10px; align-items: center;
	margin-top: auto; padding-top: 4px;
}
.ot-card-actions .ot-btn { padding: 11px 18px; font-size: .87rem; }
.ot-card-actions .ot-btn-primary { flex: 1; }

/* ==================================================================== *
 * 10. Category card
 * ==================================================================== */
/* Tall portrait cards: the photograph carries the card and the copy sits in a
   deep navy wash at the foot, so the title always has contrast to land on. */
.ot-category-card {
	position: relative;
	display: block;
	border-radius: 20px;
	overflow: hidden;
	min-height: clamp(420px, 36vw, 540px);
	background: var(--ot-ink);
	box-shadow: var(--ot-shadow-md);
	transition: transform .35s ease, box-shadow .35s ease;
}
.ot-category-card:hover { transform: translateY(-8px); box-shadow: var(--ot-shadow-lg); }

.ot-category-media { position: absolute; inset: 0; }
.ot-category-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.ot-category-card:hover .ot-category-media img { transform: scale(1.07); }
.ot-category-media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(9, 20, 36, 0) 26%,
		rgba(9, 20, 36, .58) 52%,
		rgba(9, 20, 36, .93) 78%,
		rgba(9, 20, 36, .97) 100%);
}

.ot-category-badge {
	position: absolute;
	top: 20px; left: 20px;
	z-index: 2;
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: #fff;
	color: var(--ot-gold-dark);
	box-shadow: 0 4px 14px rgba(9, 20, 36, .22);
	transition: transform .35s ease;
}
.ot-category-card:hover .ot-category-badge { transform: scale(1.06); }

.ot-category-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: inherit;
	padding: 28px 26px 26px;
	color: #fff;
}
.ot-category-title {
	color: #fff;
	margin: 0;
	font-size: clamp(1.35rem, 1.7vw, 1.7rem);
	line-height: 1.18;
}
.ot-category-rule {
	display: block;
	flex: none; /* a flex item would otherwise be free to collapse the 2px */
	width: 46px; height: 2px;
	margin: 16px 0 14px;
	background: var(--ot-gold);
}
.ot-category-text {
	margin: 0 0 22px;
	font-size: .92rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .86);
}

/* Count pill with the gold arrow disc tucked into its right end. */
.ot-category-cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 5px 5px 5px 20px;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: var(--ot-radius-pill);
	transition: border-color .3s ease, background-color .3s ease;
}
.ot-category-card:hover .ot-category-cta { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); }

.ot-category-count {
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ot-category-arrow {
	display: grid; place-items: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--ot-gold);
	color: #fff;
	transition: background-color .3s ease, transform .3s ease;
}
.ot-category-card:hover .ot-category-arrow { background: var(--ot-gold-dark); transform: translateX(3px); }

/* Gold rule with a centred motif, under a section intro. */
.ot-ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 22px;
	color: var(--ot-gold);
}
.ot-ornament-line {
	display: block;
	width: clamp(60px, 12vw, 120px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ot-gold));
}
.ot-ornament-line:last-child { background: linear-gradient(90deg, var(--ot-gold), transparent); }
.ot-ornament-mark { flex: none; }

/* ==================================================================== *
 * 11. Tour detail
 * ==================================================================== */
.ot-tour-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 56px;
	padding-block: 72px;
	align-items: start;
}

.ot-block { margin-bottom: 56px; scroll-margin-top: 100px; }
.ot-block:last-child { margin-bottom: 0; }
.ot-block .ot-section-title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .7em; }

.ot-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 28px; list-style: none; margin: 0; padding: 0; }
.ot-highlights li { display: flex; gap: 11px; align-items: flex-start; font-size: .97rem; }
.ot-highlights .ot-icon { color: var(--ot-gold); margin-top: 4px; }

.ot-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; background: var(--ot-line); border: 1px solid var(--ot-line); border-radius: var(--ot-radius); overflow: hidden; }
.ot-info-item { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: #fff; }
.ot-info-icon { color: var(--ot-gold); }
.ot-info-label { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ot-muted-text); }
.ot-info-value { font-size: .97rem; font-weight: 500; color: var(--ot-ink); }

.ot-timeline { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; }
.ot-timeline::before {
	content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
	width: 2px; background: linear-gradient(180deg, var(--ot-gold), var(--ot-line));
}
.ot-timeline-item { position: relative; padding-bottom: 30px; }
.ot-timeline-item:last-child { padding-bottom: 0; }
.ot-timeline-dot {
	position: absolute; left: -30px; top: 6px;
	width: 16px; height: 16px;
	background: #fff;
	border: 3px solid var(--ot-gold);
	border-radius: 50%;
}
.ot-timeline-title { font-size: 1.15rem; margin: 0 0 .35em; color: var(--ot-ink); }
.ot-timeline-body { font-size: .97rem; }

.ot-incl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.ot-incl { padding: 26px; border: 1px solid var(--ot-line); border-radius: var(--ot-radius); background: #fff; }
.ot-incl h3 { display: flex; align-items: center; gap: 9px; font-size: 1.1rem; margin: 0 0 14px; }
.ot-incl ul { list-style: none; margin: 0; padding: 0; }
.ot-incl li { position: relative; padding-left: 22px; margin-bottom: 9px; font-size: .94rem; }
.ot-incl li::before { position: absolute; left: 0; top: -1px; font-weight: 700; }
.ot-incl-in { background: #f6fbf7; border-color: #d9ecdf; }
.ot-incl-in h3 { color: #1d7a45; }
.ot-incl-in li::before { content: "✓"; color: #1d7a45; }
.ot-incl-out { background: #fdf7f6; border-color: #f0dcd9; }
.ot-incl-out h3 { color: #a8443a; }
.ot-incl-out li::before { content: "✕"; color: #a8443a; font-size: .85em; top: 1px; }

.ot-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ot-gallery-item { margin: 0; border-radius: var(--ot-radius-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.ot-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ot-gallery-item:hover img { transform: scale(1.06); }

.ot-tour-side { position: relative; }
.ot-sticky { position: sticky; top: calc(var(--ot-header-h) + 20px); }

/* ==================================================================== *
 * 12. FAQ accordion
 * ==================================================================== */
.ot-faq { margin-top: 8px; }
.ot-accordion { border: 1px solid var(--ot-line); border-radius: var(--ot-radius); overflow: hidden; background: #fff; }
.ot-accordion-item + .ot-accordion-item { border-top: 1px solid var(--ot-line); }
.ot-accordion-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 24px;
	font-family: var(--ot-serif);
	font-size: 1.12rem; font-weight: 600; color: var(--ot-ink);
	cursor: pointer;
	list-style: none;
	transition: background-color .2s ease;
}
.ot-accordion-item summary::-webkit-details-marker { display: none; }
.ot-accordion-item summary:hover { background: var(--ot-surface-alt); }
.ot-accordion-item summary .ot-icon { color: var(--ot-gold); transition: transform .25s ease; }
.ot-accordion-item[open] summary .ot-icon { transform: rotate(180deg); }
.ot-accordion-body { padding: 0 24px 22px; font-size: .97rem; }
.ot-accordion-body p:last-child { margin-bottom: 0; }

/* ==================================================================== *
 * 13. Enquiry form
 * ==================================================================== */
.ot-enquiry {
	background: #fff;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
	padding: 28px;
	box-shadow: var(--ot-shadow-md);
}
.ot-enquiry-head { margin-bottom: 20px; }
.ot-enquiry-title { font-size: 1.4rem; margin: 0 0 6px; }
.ot-enquiry-intro { margin: 0; font-size: .9rem; color: var(--ot-muted-text); }

.ot-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ot-form-row { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ot-form-full { grid-column: 1 / -1; }
.ot-enquiry-compact .ot-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ot-form-row label {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ot-ink);
}
.ot-req { color: #c0392b; }

.ot-form input[type="text"],
.ot-form input[type="email"],
.ot-form input[type="tel"],
.ot-form input[type="number"],
.ot-form input[type="date"],
.ot-form select,
.ot-form textarea,
.ot-search input[type="search"] {
	width: 100%;
	padding: 11px 14px;
	font-family: inherit;
	font-size: .93rem;
	color: var(--ot-ink);
	background: #fff;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius-sm);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.ot-form textarea { resize: vertical; min-height: 96px; }

/* Date fields — the browser's native control does not match the rest of the
   form, so the box is normalised and the calendar button is replaced with a
   gold icon on the same 44px rhythm as every other field. */
.ot-form input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-height: 44px;
	line-height: 1.2;
	cursor: text;
}
.ot-form input[type="date"]::-webkit-datetime-edit { padding: 0; }
.ot-form input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.ot-form input[type="date"]::-webkit-inner-spin-button,
.ot-form input[type="date"]::-webkit-clear-button { display: none; }

/* The dd-mm-yyyy mask is not a real value, so it reads as placeholder text
   until a date is picked — main.js flags the empty state. */
.ot-form input[type="date"].is-empty::-webkit-datetime-edit { color: var(--ot-muted-text); }
.ot-form input[type="date"]:focus::-webkit-datetime-edit { color: var(--ot-ink); }

.ot-form input[type="date"]::-webkit-calendar-picker-indicator {
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	opacity: .75;
	background: transparent no-repeat center / 18px 18px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0873a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3.5v3M16 3.5v3'/%3E%3C/svg%3E");
}
.ot-form input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Firefox has no picker button, so the field keeps its own padding. */
@supports (-moz-appearance: none) {
	.ot-form input[type="date"] { padding-block: 10px; }
}
.ot-form input:focus,
.ot-form select:focus,
.ot-form textarea:focus {
	outline: none;
	border-color: var(--ot-gold);
	box-shadow: 0 0 0 3px rgba(176, 135, 58, .14);
}

.ot-form-actions { display: grid; gap: 10px; margin-top: 20px; }
.ot-form-note { margin: 12px 0 0; font-size: .78rem; color: var(--ot-muted-text); text-align: center; }

.ot-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ot-notice {
	padding: 13px 16px;
	margin-bottom: 18px;
	font-size: .9rem;
	border-radius: var(--ot-radius-sm);
	border: 1px solid;
}
.ot-notice-success { background: #f0f9f3; border-color: #bfe3cd; color: #16663a; }
.ot-notice-error { background: #fdf3f2; border-color: #f2ccc7; color: #94322a; }

.ot-search { display: flex; gap: 10px; max-width: 560px; }
.ot-search-bar { margin-top: 28px; }

/* ==================================================================== *
 * 14. Features / services / testimonials
 * ==================================================================== */
.ot-feature-grid,
.ot-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.ot-feature {
	padding: 30px 26px;
	background: #fff;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
	transition: transform .3s ease, box-shadow .3s ease;
}
.ot-feature:hover { transform: translateY(-4px); box-shadow: var(--ot-shadow-md); }
.ot-feature-icon,
.ot-service-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	margin-bottom: 16px;
	color: var(--ot-gold);
	background: var(--ot-gold-soft);
	border-radius: 14px;
}
.ot-feature-title, .ot-service-title { font-size: 1.16rem; margin: 0 0 8px; }
.ot-feature-text, .ot-service-text { font-size: .93rem; color: var(--ot-muted-text); margin: 0; }

.ot-service {
	display: block;
	padding: 30px 26px;
	background: #fff;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ot-service:hover { transform: translateY(-4px); box-shadow: var(--ot-shadow-md); border-color: transparent; }
.ot-service-more {
	display: inline-flex; align-items: center; gap: 7px;
	margin-top: 16px;
	font-size: .86rem; font-weight: 600; color: var(--ot-gold);
}
.ot-service:hover .ot-service-more { gap: 11px; }

.ot-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.ot-testimonial {
	position: relative;
	margin: 0;
	padding: 32px 28px 26px;
	background: #fff;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
}
.ot-testimonial-mark { position: absolute; top: -18px; left: 26px; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; background: var(--ot-gold); border-radius: 50%; }
.ot-testimonial blockquote { margin: 10px 0 18px; font-family: var(--ot-serif); font-size: 1.16rem; line-height: 1.5; color: var(--ot-ink); }
.ot-testimonial figcaption { display: flex; flex-direction: column; font-size: .86rem; }
.ot-testimonial figcaption strong { color: var(--ot-ink); }
.ot-testimonial figcaption span { color: var(--ot-muted-text); }

/* ==================================================================== *
 * 15. Contact CTA
 * ==================================================================== */
.ot-cta { background: var(--ot-ink); color: #fff; padding: 84px 0; }
.ot-cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; }
.ot-cta-title { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.ot-cta-text { color: rgba(255, 255, 255, .82); max-width: 520px; }
.ot-cta-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; }
.ot-cta-points li { display: flex; align-items: center; gap: 11px; font-size: .95rem; color: rgba(255, 255, 255, .9); }
.ot-cta-points .ot-icon { color: var(--ot-gold-soft); }
.ot-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ot-cta-form .ot-enquiry { box-shadow: var(--ot-shadow-lg); }

/* ==================================================================== *
 * 16. Contact page
 * ==================================================================== */
.ot-contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; align-items: start; }
.ot-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.ot-contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.ot-contact-list strong { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ot-muted-text); margin-bottom: 3px; }
.ot-contact-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex: none;
	color: var(--ot-gold); background: var(--ot-gold-soft); border-radius: 12px;
}
.ot-map { margin-top: 56px; border-radius: var(--ot-radius); overflow: hidden; border: 1px solid var(--ot-line); }
.ot-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ==================================================================== *
 * 16b. Interior page layout — trust strip, two columns, sticky sidebar
 * ==================================================================== */
.ot-usp {
	background: var(--ot-surface-alt);
	border-bottom: 1px solid var(--ot-line);
}
.ot-usp-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px 28px;
	padding-block: 22px;
}
.ot-usp-item { display: flex; align-items: center; gap: 13px; }
.ot-usp-icon {
	flex: none;
	display: grid; place-items: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--ot-gold-soft);
	color: var(--ot-gold-dark);
}
.ot-usp-copy { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.ot-usp-copy strong { font-size: .92rem; color: var(--ot-ink); }
.ot-usp-copy span { font-size: .82rem; color: var(--ot-muted-text); }

.ot-page-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 56px;
	align-items: start;
}
.ot-page-side { position: relative; }
.ot-page-side .ot-sticky { display: grid; gap: 20px; }

.ot-side-card {
	background: var(--ot-surface-alt);
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
	padding: 22px 24px;
}
.ot-side-title { font-size: 1.15rem; margin: 0 0 12px; }
.ot-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ot-side-list li { display: flex; align-items: center; gap: 11px; font-size: .92rem; }
.ot-side-list .ot-icon { color: var(--ot-gold); }
.ot-side-list a { color: var(--ot-ink); }
.ot-side-list a:hover { color: var(--ot-gold); }

/* The CTA band with no form — one full-width call to action. */
.ot-cta-slim .ot-cta-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.ot-cta-slim .ot-cta-text { max-width: 640px; }
.ot-cta-slim .ot-cta-points { justify-items: center; grid-auto-flow: row; }
.ot-cta-slim .ot-cta-actions { justify-content: center; }

/* ==================================================================== *
 * 16c. Rich prose — lifts the imported copy without editing it
 * ==================================================================== */
.ot-prose-rich > h2 {
	margin-top: 2em;
	padding-bottom: .35em;
	border-bottom: 2px solid var(--ot-gold-soft);
}
.ot-prose-rich > h2:first-child { margin-top: 0; }

.ot-prose-rich > h3 {
	margin-top: 1.6em;
	padding-left: 16px;
	border-left: 3px solid var(--ot-gold);
	font-size: 1.3rem;
}

/* Replaces the "[» Book Now]" placeholders the client's copy carried. */
.ot-inline-cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 4px;
	padding: 4px 13px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ot-gold-dark);
	background: var(--ot-gold-soft);
	border-radius: var(--ot-radius-pill);
	text-decoration: none;
	white-space: nowrap;
}
.ot-inline-cta::after { content: "\2192"; }
.ot-prose .ot-inline-cta { text-decoration: none; }
.ot-inline-cta:hover { background: var(--ot-gold); color: #fff; }

/* Plain bullet lists become two-column check-lists. */
.ot-prose-rich > ul {
	list-style: none;
	margin: 1.2em 0;
	padding: 22px 26px;
	background: var(--ot-surface-alt);
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
	columns: 2;
	column-gap: 34px;
}
.ot-prose-rich > ul > li {
	position: relative;
	padding-left: 26px;
	margin-bottom: .6em;
	break-inside: avoid;
	font-size: .95rem;
}
.ot-prose-rich > ul > li::before {
	content: "";
	position: absolute;
	left: 0; top: .45em;
	width: 8px; height: 5px;
	border-left: 2px solid var(--ot-gold);
	border-bottom: 2px solid var(--ot-gold);
	transform: rotate(-45deg);
}

/* ==================================================================== *
 * 16d. Elementor pages
 *
 * The static pages are built in Elementor, the tour pages are not. These
 * rules make Elementor's own widgets wear the theme's design language so the
 * two halves of the site look like one website — and so no Elementor addon
 * plugin is needed to get there.
 * ==================================================================== */

/* Elementor's frontend stylesheet loads after the theme's, so these rules
   carry an extra class to win the cascade rather than relying on load order. */

/* Elementor writes a container's Min Height, Padding, Margin and Width as CSS
   variables (--min-height and friends) which .e-con then reads through var().
   The theme's .ot-hero / .ot-hero-home declare min-height directly, and a
   direct declaration always beats a var() rule — so the panel's Min Height
   control looked like it did nothing. On an Elementor container the panel owns
   the box model; the theme only supplies the fallback. */
.e-con.ot-el-hero { min-height: var(--min-height, 340px); }
.e-con.ot-hero-home { min-height: var(--min-height, min(84vh, 760px)); }

.ot-el-hero .elementor-heading-title { color: #fff; }
.ot-el-hero .ot-breadcrumb { margin-bottom: 10px; }

/* Section headings keep the ruled / gold-tab treatment of .ot-prose-rich. */
.elementor-widget.ot-el-h2 .elementor-heading-title {
	font-family: var(--ot-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--ot-ink);
	padding-bottom: .35em;
	border-bottom: 2px solid var(--ot-gold-soft);
}
.elementor-widget.ot-el-h3 .elementor-heading-title {
	font-family: var(--ot-serif);
	font-size: 1.3rem;
	color: var(--ot-ink);
	padding-left: 16px;
	border-left: 3px solid var(--ot-gold);
}
.elementor-widget.ot-el-center { text-align: center; }

/* Icon boxes read as the theme's feature cards. */
.elementor-widget.ot-el-iconbox .elementor-icon-box-wrapper { text-align: left; }
.elementor-widget.ot-el-iconbox .elementor-icon-box-icon { margin-bottom: 14px; }
.elementor-widget.ot-el-iconbox .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	font-size: 21px;
	border-radius: 50%;
	background: var(--ot-gold-soft);
	color: var(--ot-gold-dark);
}
.elementor-widget.ot-el-iconbox .elementor-icon-box-title {
	margin: 0 0 8px;
	font-family: var(--ot-serif);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--ot-ink);
}
.elementor-widget.ot-el-iconbox .elementor-icon-box-title a { color: inherit; }
.elementor-widget.ot-el-iconbox .elementor-icon-box-description {
	margin: 0;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--ot-body);
}

/* Card variant, used for the services cross-links. */
.elementor-widget.ot-el-card {
	height: 100%;
	padding: 30px 26px;
	background: #fff;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
	transition: transform .3s ease, box-shadow .3s ease;
}
.elementor-widget.ot-el-card:hover { transform: translateY(-4px); box-shadow: var(--ot-shadow-md); }

/* Compact variant for the trust strip under a hero. */
.elementor-widget.ot-el-usp .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 13px; text-align: left; }
.elementor-widget.ot-el-usp .elementor-icon-box-icon { margin: 0; flex: none; }
.elementor-widget.ot-el-usp .elementor-icon { width: 42px; height: 42px; font-size: 17px; }
.elementor-widget.ot-el-usp .elementor-icon-box-title { margin: 0 0 2px; font-family: var(--ot-sans); font-size: .92rem; }
.elementor-widget.ot-el-usp .elementor-icon-box-description { font-size: .82rem; color: var(--ot-muted-text); }

/* Buttons inherit the theme's pill styling. */
.elementor-widget.ot-el-button .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	font-family: var(--ot-sans);
	font-size: .95rem;
	font-weight: 600;
	background: var(--ot-ink);
	color: #fff;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-pill);
	box-shadow: var(--ot-shadow-sm);
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.elementor-widget.ot-el-button .elementor-button:hover { background: var(--ot-gold); color: #fff; transform: translateY(-2px); box-shadow: var(--ot-shadow-md); }
.elementor-widget.ot-el-button-ghost .elementor-button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.elementor-widget.ot-el-button-ghost .elementor-button:hover { background: #fff; color: var(--ot-ink); border-color: #fff; }

/* Sections that sit on the dark CTA band. */
.ot-el-dark .elementor-heading-title { color: #fff; }
.ot-el-dark .elementor-widget-text-editor { color: rgba(255, 255, 255, .82); }

/* ---- Fleet cards (Car Rental) ----------------------------------------
 * Photo on the left, copy on the right. The vehicle artwork is a cut-out on
 * white, so it is never cropped — object-fit: contain keeps the whole vehicle
 * visible whatever the card's proportions. */
.elementor-widget.ot-el-fleet-media { align-self: stretch; }
.elementor-widget.ot-el-fleet-media .elementor-widget-container,
.elementor-widget.ot-el-fleet-media figure,
.elementor-widget.ot-el-fleet-media .elementor-image { height: 100%; }
.elementor-widget.ot-el-fleet-media img {
	width: 100%;
	height: 100%;
	min-height: 230px;
	object-fit: contain;
	background: #fff;
	padding: 12px;
}

.e-con.ot-el-fleet {
	background: #fff;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
	overflow: hidden;
	box-shadow: var(--ot-shadow-sm);
	transition: transform .3s ease, box-shadow .3s ease;
}
.e-con.ot-el-fleet:hover { transform: translateY(-3px); box-shadow: var(--ot-shadow-md); }

.elementor-widget.ot-el-fleet-title .elementor-heading-title {
	font-family: var(--ot-serif);
	font-size: clamp(1.25rem, 1.7vw, 1.55rem);
	color: var(--ot-ink);
	padding-left: 14px;
	border-left: 3px solid var(--ot-gold);
}
.elementor-widget.ot-el-fleet-text { font-size: .95rem; line-height: 1.65; color: var(--ot-body); }

/* Gold pill, matching the "Book Now" call to action in the client's design. */
.elementor-widget.ot-el-fleet-btn .elementor-button {
	background: var(--ot-gold);
	color: #fff;
	padding: 11px 26px;
	font-size: .9rem;
}
.elementor-widget.ot-el-fleet-btn .elementor-button:hover { background: var(--ot-gold-dark); color: #fff; }

/* Section intro above each vehicle group. */
.elementor-widget.ot-el-fleet-lead .elementor-heading-title {
	font-family: var(--ot-serif);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	color: var(--ot-ink);
}
.elementor-widget.ot-el-fleet-sub { color: var(--ot-muted-text); font-size: 1rem; }

@media (max-width: 780px) {
	.elementor-widget.ot-el-fleet-media img { min-height: 200px; }
}

/* Testimonials: no photographs yet, so the widget's avatar placeholder is
   replaced by the gold quote mark the theme uses. */
/* Elementor always prints its placeholder avatar and sets display on it from a
   four-class selector, so this one has to be more specific still. */
.elementor-widget.elementor-widget-testimonial.ot-el-quote .elementor-testimonial-meta .elementor-testimonial-image { display: none; }
.elementor-widget.ot-el-quote .elementor-testimonial-content {
	position: relative;
	margin: 0 0 18px;
	padding-top: 34px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ot-body);
}
.elementor-widget.ot-el-quote .elementor-testimonial-content::before {
	content: "\201C";
	position: absolute;
	top: -14px; left: -2px;
	font-family: var(--ot-serif);
	font-size: 4rem;
	line-height: 1;
	color: var(--ot-gold);
}
.elementor-widget.ot-el-quote .elementor-testimonial-name {
	font-weight: 600;
	color: var(--ot-ink);
}
.elementor-widget.ot-el-quote .elementor-testimonial-job {
	font-size: .84rem;
	color: var(--ot-muted-text);
}

/* FAQ accordion picks up the theme's own accordion look. */
.elementor-widget.ot-el-accordion .elementor-accordion-item {
	margin-bottom: 10px;
	background: #fff;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius-sm);
	overflow: hidden;
}
.elementor-widget.ot-el-accordion .elementor-tab-title {
	padding: 16px 20px;
	font-family: var(--ot-serif);
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--ot-ink);
	border: 0;
	background: #fff;
}
.elementor-widget.ot-el-accordion .elementor-tab-title.elementor-active { color: var(--ot-gold-dark); }
.elementor-widget.ot-el-accordion .elementor-tab-content {
	padding: 0 20px 18px;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--ot-body);
	border: 0;
}
.elementor-widget.ot-el-accordion .elementor-accordion-icon { color: var(--ot-gold); }

/* Each copy section is its own widget now, so the rhythm that .ot-prose-rich
   gave through sibling margins has to live on the widgets themselves. */
.elementor-widget.ot-el-h2 { margin-top: 2.2em; }
.elementor-widget.ot-el-h3 { margin-top: 1.6em; }
.e-con > .elementor-widget.ot-el-h2:first-child,
.e-con-inner > .elementor-widget.ot-el-h2:first-child { margin-top: 0; }
.elementor-widget-text-editor.ot-prose { margin-top: .9em; }
.elementor-widget-text-editor.ot-prose-rich > ul { margin: 1.2em 0; }

/* ==================================================================== *
 * 16e. Blog post — meta line, lead image, prev/next
 * ==================================================================== */
.ot-post-meta {
	margin: 0;
	color: rgba(255, 255, 255, .82);
	font-size: .9rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.ot-post-meta a { color: rgba(255, 255, 255, .82); text-decoration: underline; text-underline-offset: 3px; }
.ot-post-meta a:hover { color: var(--ot-gold-soft); }
.ot-post-meta-sep { opacity: .6; }

.ot-post-thumb { margin: 0 0 32px; }
.ot-post-thumb img { width: 100%; height: auto; border-radius: var(--ot-radius); display: block; }

.ot-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--ot-line);
}
.ot-post-nav-link {
	display: grid;
	gap: 4px;
	padding: 16px 20px;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius);
	color: var(--ot-ink);
	transition: border-color .2s ease;
}
.ot-post-nav-link:hover { border-color: var(--ot-gold); }
.ot-post-nav-link span { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ot-muted-text); }
.ot-post-nav-link strong { font-size: .96rem; font-weight: 600; line-height: 1.35; }
.ot-post-nav-next { text-align: right; grid-column: 2; }

/* ==================================================================== *
 * 17. Pagination
 * ==================================================================== */
.pagination, .navigation.pagination { margin-top: 48px; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 14px;
	font-size: .92rem; font-weight: 600;
	color: var(--ot-ink);
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius-sm);
	transition: all .2s ease;
}
.page-numbers:hover { border-color: var(--ot-gold); color: var(--ot-gold); }
.page-numbers.current { background: var(--ot-ink); border-color: var(--ot-ink); color: #fff; }

/* ==================================================================== *
 * 18. Footer
 * ==================================================================== */
.ot-footer { background: #0b1a2e; color: rgba(255, 255, 255, .7); padding-top: 72px; font-size: .93rem; }
.ot-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; padding-bottom: 56px; }
.ot-footer img { max-height: 56px; width: auto; margin-bottom: 18px; }
.ot-footer-brand { color: #fff; font-size: 1.5rem; margin-bottom: 14px; }
.ot-footer-title { color: #fff; font-size: 1.05rem; margin-bottom: 18px; letter-spacing: .02em; }

.ot-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ot-footer-list a { color: rgba(255, 255, 255, .7); }
.ot-footer-list a:hover { color: var(--ot-gold-soft); }

.ot-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ot-footer-contact li { display: flex; gap: 11px; align-items: flex-start; }
.ot-footer-contact .ot-icon { color: var(--ot-gold); margin-top: 3px; }
.ot-footer-contact a { color: rgba(255, 255, 255, .78); }
.ot-footer-contact a:hover { color: var(--ot-gold-soft); }

.ot-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ot-social a {
	padding: 7px 15px;
	font-size: .82rem;
	color: rgba(255, 255, 255, .82);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--ot-radius-pill);
	transition: all .2s ease;
}
.ot-social a:hover { background: var(--ot-gold); border-color: var(--ot-gold); color: #fff; }

.ot-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0; font-size: .85rem; }
.ot-footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.ot-footer-bottom p { margin: 0; }
.ot-legal-menu { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.ot-legal-menu a { color: rgba(255, 255, 255, .65); }
.ot-legal-menu a:hover { color: var(--ot-gold-soft); }

.ot-wa-float {
	position: fixed;
	right: 20px; bottom: 20px;
	z-index: 300;
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	color: #fff;
	background: var(--ot-wa);
	border-radius: 50%;
	box-shadow: 0 10px 26px rgba(30, 170, 92, .42);
	transition: transform .25s ease;
}
.ot-wa-float:hover { transform: scale(1.08); color: #fff; }

/* ==================================================================== *
 * 19. 404
 * ==================================================================== */
.ot-404 { text-align: center; padding-block: 110px; }
.ot-404-title { color: var(--ot-ink); }
.ot-404 .ot-hero-actions, .ot-404 .ot-search { justify-content: center; margin-inline: auto; }

/* ==================================================================== *
 * 20. Responsive
 * ==================================================================== */
@media (max-width: 1080px) {
	.ot-tour-layout,
	.ot-page-layout { grid-template-columns: 1fr; gap: 44px; }
	.ot-sticky { position: static; }
	.ot-cta-inner, .ot-contact-layout { grid-template-columns: 1fr; gap: 40px; }
	.ot-usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ot-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
	:root { --ot-header-h: 66px; }

	.ot-topbar-tag { display: none; }
	.ot-topbar-inner { justify-content: center; }
	.ot-topbar-contact { gap: 16px; font-size: .78rem; }

	.ot-nav-toggle { display: block; }

	.ot-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: #fff;
		border-bottom: 1px solid var(--ot-line);
		box-shadow: var(--ot-shadow-md);
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}
	.ot-nav.is-open { max-height: 80vh; overflow-y: auto; }

	.ot-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--ot-gutter) 20px; }
	.ot-menu > li > a { padding: 13px 4px; border-bottom: 1px solid var(--ot-line); border-radius: 0; }
	.ot-menu .sub-menu,
	.ot-menu .children {
		position: static;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding: 0 0 0 16px;
		min-width: 0;
		display: none;
	}
	.ot-menu li.is-open > .sub-menu,
	.ot-menu li.is-open > .children { display: block; }

	.ot-header-actions .ot-btn-wa span { display: none; }
	.ot-header-actions .ot-btn-wa { padding: 11px 13px; }

	.ot-section { padding-block: 60px; }
	.ot-cta { padding: 60px 0; }
	.ot-hero { padding: 60px 0 52px; min-height: 280px; }
	.ot-hero-home { min-height: 74vh; padding: 90px 0; }

	.ot-section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.ot-tour-layout { padding-block: 48px; }
	.ot-block { margin-bottom: 44px; }
}

@media (max-width: 620px) {
	:root { --ot-gutter: 18px; }

	.ot-tour-grid, .ot-category-grid, .ot-cols-2, .ot-cols-4 { grid-template-columns: 1fr; gap: 22px; }
	.ot-form-grid, .ot-enquiry-compact .ot-form-grid { grid-template-columns: 1fr; }
	.ot-footer-grid { grid-template-columns: 1fr; }
	.ot-enquiry { padding: 22px; }
	.ot-card-actions { flex-direction: column; align-items: stretch; }
	.ot-card-actions .ot-btn { width: 100%; }
	.ot-search { flex-direction: column; }
	.ot-listing-head { flex-direction: column; gap: 6px; }
	.ot-wa-float { right: 14px; bottom: 14px; }
	.ot-usp-grid { grid-template-columns: 1fr; gap: 14px; }
	.ot-prose-rich > ul { columns: 1; padding: 18px 20px; }
	.ot-post-nav { grid-template-columns: 1fr; }
	.ot-post-nav-next { text-align: left; grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Print — keep tour pages readable when a traveller prints an itinerary. */
@media print {
	.ot-topbar, .ot-header, .ot-footer, .ot-cta, .ot-tour-side, .ot-wa-float, .ot-breadcrumb { display: none !important; }
	.ot-hero { min-height: 0; padding: 20px 0; color: #000; background: none !important; }
	.ot-hero-overlay { display: none; }
	.ot-hero-title, .ot-hero-meta li { color: #000; }
	body { font-size: 12pt; }
}