/* ==========================================================================
   Itinerary landing page — paid-traffic template (landingpageitineary.php)
   ==========================================================================

   Loaded only by landingpageitineary.php, enqueued with a dependency on
   `ak-nova` so it lands AFTER assets/css/main.css and can use its tokens
   (--ember, --brand, --gold, spacing, radii) and win the cascade.

   Two kinds of rule live here:

     .lp-*        markup owned by the template — bar, hero, form card, band,
                  footer, action bar, modal.
     .lp-content  markup owned by the page editor. The four pages on this
                  template were authored by hand with a fixed vocabulary of
                  section classes — .gallery / .overview / .destinations /
                  .itinerary (with .day children) / .package / .payment /
                  .contact / .why-book, plus .center wrappers around
                  a.cta-btn#blinking-button. Those class names are the contract:
                  the CSS styles them, the content is not touched.

   Colour hierarchy follows main.css: --ember for money and primary actions,
   --brand for structure and navigation, --gold for endorsement, green for
   inclusions. Nothing else shouts.

   1  Local tokens & page base
   2  Top bar
   3  Hero
   4  Trust row
   5  Enquiry card & Contact Form 7
   6  Authored content sections
   7  Closing CTA band
   8  Footer
   9  Mobile action bar & WhatsApp float
   10 Enquiry modal
   11 Motion & print
   ========================================================================== */

/* 1 — Local tokens & page base -------------------------------------------- */

:root {
	--lp-shell: 1140px;
	--lp-bar-h: 62px;
	--lp-wa: #25d366;
	--lp-night: #0d1f3c;
}

body.page-template-landingpageitineary {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	line-height: 1.65;
}

.lp-shell {
	width: 100%;
	max-width: var(--lp-shell);
	margin: 0 auto;
	padding: 0 20px;
}

/* Nothing on this page is meant to scroll sideways. `clip` rather than `hidden`
   so it never turns the page into a scroll container and breaks the sticky bar
   (which sits outside <main> anyway). */
body.page-template-landingpageitineary > main { overflow-x: clip; }

.lp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 var(--sp-3);
	padding: 5px 12px 5px 10px;
	border-radius: var(--r-pill);
	background: rgba(240, 165, 44, .16);
	border: 1px solid rgba(240, 165, 44, .38);
	color: var(--gold);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Buttons ----------------------------------------------------------------- */

.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}

.lp-btn:hover { transform: translateY(-1px); }
.lp-btn .icon { flex: none; }

.lp-btn--primary {
	background: var(--ember);
	color: #fff;
	box-shadow: 0 10px 24px rgba(199, 79, 21, .28);
}
.lp-btn--primary:hover { background: var(--ember-600); color: #fff; }

.lp-btn--call {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}
.lp-btn--call:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.lp-btn--ghost {
	padding: 9px 16px;
	background: var(--brand-100);
	color: var(--brand);
	font-size: var(--fs-sm);
}
.lp-btn--ghost:hover { background: #dde6f7; color: var(--brand-600); }

.lp-btn--wa {
	background: var(--lp-wa);
	color: #0a2e17;
}
.lp-btn--wa:hover { background: #1fbb59; color: #0a2e17; }

/* 2 — Top bar ------------------------------------------------------------- */

.lp-bar {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-1);
}

/* Logged-in users get WordPress's fixed 32px admin bar above 782px; below that
   the bar is absolute, so no offset applies. */
@media screen and (min-width: 783px) {
	.admin-bar .lp-bar { top: 32px; }
}

.lp-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: var(--lp-bar-h);
}

/* The logo gives way; the phone button never shrinks out of the viewport. */
.lp-bar__brand { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.lp-bar__brand img { max-height: 40px; width: auto; }

.lp-bar__name {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 800;
	color: var(--brand);
	letter-spacing: -.02em;
}

.lp-bar__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--sp-4);
}

.lp-bar__note {
	display: none;
	color: var(--ink-3);
	font-size: var(--fs-sm);
}

.lp-bar__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: var(--r-pill);
	background: var(--brand);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition: background .16s var(--ease);
}
.lp-bar__phone:hover { background: var(--brand-600); color: #fff; }

/* 3 — Hero ---------------------------------------------------------------- */

.lp-hero {
	position: relative;
	padding: var(--sp-8) 0 var(--sp-9);
	background:
		radial-gradient(900px 420px at 12% -10%, rgba(199, 79, 21, .34), transparent 62%),
		radial-gradient(760px 380px at 88% 0%, rgba(27, 59, 111, .55), transparent 60%),
		linear-gradient(160deg, #16305c 0%, var(--lp-night) 55%, #0a1830 100%);
	color: #fff;
	overflow: hidden;
}

/* Hairline horizon so the hero reads as a band, not a colour accident. */
.lp-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}

.lp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: var(--sp-7);
	align-items: start;
}

.lp-hero__title {
	margin: 0 0 var(--sp-4);
	color: #fff;
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -.028em;
}

/* The `pickup` ACF field is authored HTML — a single paragraph of pipe-separated
   facts. Set it as a quiet spec line rather than body copy. */
.lp-hero__meta {
	margin: 0 0 var(--sp-5);
	color: rgba(255, 255, 255, .82);
	font-size: var(--fs-lg);
	line-height: 1.55;
}
.lp-hero__meta p { margin: 0; }
.lp-hero__meta strong { color: #fff; font-weight: 700; }

.lp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.lp-hero__note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: var(--sp-4) 0 0;
	color: rgba(255, 255, 255, .68);
	font-size: var(--fs-sm);
}
.lp-hero__note .icon { color: var(--gold); }

/* 4 — Trust row ----------------------------------------------------------- */

.lp-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px var(--sp-5);
	margin: var(--sp-5) 0 0;
	padding: 0;
	list-style: none;
}

.lp-trust li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: rgba(255, 255, 255, .9);
	font-size: var(--fs-base);
	line-height: 1.4;
}

.lp-trust .icon {
	margin-top: 2px;
	color: var(--gold);
}

/* 5 — Enquiry card & Contact Form 7 --------------------------------------- */

.lp-card {
	position: relative;
	padding: var(--sp-5);
	background: var(--surface);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-3);
	color: var(--ink);
}

.lp-card__flag {
	display: inline-block;
	margin-bottom: var(--sp-3);
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: var(--save-bg);
	color: var(--save-ink);
	font-size: var(--fs-xs);
	font-weight: 700;
}

.lp-card__title {
	margin: 0 0 6px;
	font-size: var(--fs-xl);
}

.lp-card__sub {
	margin: 0 0 var(--sp-4);
	color: var(--ink-3);
	font-size: var(--fs-sm);
}

.lp-card__fine {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: var(--sp-3) 0 0;
	color: var(--ink-3);
	font-size: var(--fs-xs);
	line-height: 1.45;
}
.lp-card__fine .icon { flex: none; color: var(--ok); }

/* The form on these pages puts every field in one <p>, separated by <br>.
   Drop the breaks and lay the wrappers out on a grid instead. */
.lp-form .wpcf7-form > p {
	display: grid;
	gap: 10px;
	width: 100%;
	margin: 0;
}
.lp-form .wpcf7-form br { display: none; }

.lp-form input[type="text"],
.lp-form input[type="email"],
.lp-form input[type="tel"],
.lp-form textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: var(--fs-base);
}

.lp-form textarea { height: 84px; min-height: 84px; }

.lp-form input[type="submit"] {
	padding: 15px 18px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	box-shadow: 0 10px 24px rgba(199, 79, 21, .26);
}

.lp-form .wpcf7-spinner { margin-top: 6px; }

/* 6 — Authored content sections ------------------------------------------- */

.lp-content {
	position: relative;
	z-index: 1;
	padding-bottom: var(--sp-7);
}

/* The first card lifts into the hero. Scoped to a section rather than to the
   container so a page whose content opens with a bare paragraph never puts dark
   text over the dark hero. */
.lp-content > section:first-of-type {
	margin-top: calc(var(--sp-7) * -1);
}

.lp-content section {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-6);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-2);
}

.lp-content section:last-child { margin-bottom: 0; }

.lp-content h2 {
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--line);
	color: var(--brand);
	font-size: clamp(1.35rem, 2.4vw, var(--fs-2xl));
}

.lp-content h2 + h2 { margin-top: var(--sp-6); }

.lp-content h3 {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-lg);
	color: var(--ink);
}

.lp-content p {
	margin: 0 0 var(--sp-4);
	color: var(--ink-2);
	font-size: var(--fs-md);
}
.lp-content p:last-child { margin-bottom: 0; }

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

/* Gallery ----------------------------------------------------------------- */

.lp-content .gallery { padding: var(--sp-6); }

.lp-content .gallery-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--sp-3);
}

/* The images are authored one per line, so wpautop turns each newline between
   them into a <br>. A <br> that is a direct child of a grid is a grid item like
   any other, and it was taking the second cell of every row — one image per row
   with a hole beside it. */
.lp-content .gallery-container br { display: none; }

.lp-content .gallery-container img {
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r);
	background: var(--surface-3);
	transition: transform .3s var(--ease);
}

.lp-content .gallery-container img:hover { transform: scale(1.03); }

/* Overview — "Duration: 8 Nights / 9 Days" pairs become a spec grid. -------- */

.lp-content .overview ul,
.lp-content .why-book ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: var(--sp-3);
}

.lp-content .overview li,
.lp-content .why-book li {
	padding: var(--sp-3) var(--sp-4);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r);
	color: var(--ink);
	font-size: var(--fs-md);
	font-weight: 600;
}

.lp-content .overview li strong,
.lp-content .why-book li strong {
	display: block;
	margin-bottom: 2px;
	color: var(--ink-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Destinations — the copy already carries its own ✅, so no marker is added. */

.lp-content .destinations ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
}

/* A rounded rectangle rather than a pill: several of these routes wrap onto two
   lines on a phone, and a stadium shape around wrapped text reads as a mistake. */
.lp-content .destinations li {
	padding: 12px var(--sp-4);
	background: var(--brand-100);
	border-radius: var(--r);
	color: var(--brand-600);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.45;
}

/* Itinerary — each .day is a stop on a vertical line. ---------------------- */

.lp-content .itinerary .day {
	position: relative;
	margin: 0 0 var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--ember);
	border-radius: 0 var(--r) var(--r) 0;
}

.lp-content .itinerary .day::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 22px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--surface);
	border: 3px solid var(--ember);
}

.lp-content .itinerary .day:last-of-type { margin-bottom: 0; }

.lp-content .itinerary .day h3 {
	color: var(--brand);
	font-size: var(--fs-lg);
	line-height: 1.3;
}

.lp-content .itinerary .day p {
	margin-bottom: 0;
	white-space: pre-line; /* the day copy is authored as line-broken steps */
	font-size: var(--fs-base);
}

/* Package — inclusions in the first list, exclusions in the second. The order
   is fixed in every page authored on this template; a page with only one list
   simply loses the second rule. */

@media (min-width: 860px) {
	.lp-content .package {
		column-count: 2;
		column-gap: var(--sp-7);
	}
	.lp-content .package h2 { break-after: avoid; }
	.lp-content .package h2 + ul { break-inside: avoid; }
	.lp-content .package h2:nth-of-type(2) { break-before: column; margin-top: 0; }
}

.lp-content .package ul { display: grid; gap: 9px; }

.lp-content .package li {
	position: relative;
	padding-left: 30px;
	color: var(--ink-2);
	font-size: var(--fs-base);
}

.lp-content .package li::before {
	position: absolute;
	left: 0;
	top: 3px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
}

.lp-content .package ul:nth-of-type(1) li::before {
	content: "✓";
	background: var(--save-bg);
	color: var(--save-ink);
}

.lp-content .package ul:nth-of-type(2) li::before {
	content: "✕";
	background: var(--surface-3);
	color: var(--ink-3);
}

/* Payment — a numbered sequence. ------------------------------------------ */

.lp-content .payment ul {
	display: grid;
	gap: 10px;
	counter-reset: lp-step;
}

.lp-content .payment li {
	position: relative;
	counter-increment: lp-step;
	padding: 11px var(--sp-4) 11px 46px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r);
	color: var(--ink);
	font-size: var(--fs-base);
	font-weight: 600;
}

.lp-content .payment li::before {
	content: counter(lp-step);
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 800;
}

/* Contact section holds nothing but a CTA. -------------------------------- */

.lp-content .contact {
	background: linear-gradient(135deg, var(--ember-100), var(--surface));
	border-color: #f3d9c9;
	text-align: center;
}

/* In-content CTAs. #blinking-button repeats on every one of them, so the id is
   matched explicitly — a class alone loses to it. */

.lp-content .center {
	margin: var(--sp-5) 0 0;
	text-align: center;
	font-size: inherit;
	font-weight: inherit;
}

.lp-content .center:first-child { margin-top: 0; }

.lp-content .cta-btn,
.lp-content #blinking-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
	padding: 15px 30px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--ember);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(199, 79, 21, .26);
	animation: lp-pulse 2.6s ease-in-out infinite;
	transition: background .16s var(--ease), transform .16s var(--ease);
}

.lp-content .cta-btn:hover,
.lp-content #blinking-button:hover {
	background: var(--ember-600);
	color: #fff;
	transform: translateY(-1px);
}

@keyframes lp-pulse {
	0%, 100% { box-shadow: 0 10px 24px rgba(199, 79, 21, .26); }
	50%      { box-shadow: 0 10px 30px rgba(199, 79, 21, .48); }
}

/* Same beat, less bloom — a full-width button on a phone throws a much bigger
   glow for the same shadow values. An animation beats any static box-shadow
   declaration, so the small screen needs its own keyframes, not just a rule. */
@keyframes lp-pulse-sm {
	0%, 100% { box-shadow: 0 6px 16px rgba(199, 79, 21, .22); }
	50%      { box-shadow: 0 6px 20px rgba(199, 79, 21, .36); }
}

/* 7 — Closing CTA band ---------------------------------------------------- */

.lp-band {
	padding: var(--sp-8) 0;
	background:
		radial-gradient(700px 300px at 20% 0%, rgba(199, 79, 21, .3), transparent 60%),
		linear-gradient(160deg, #16305c, var(--lp-night));
	color: #fff;
	text-align: center;
}

.lp-band h2 {
	margin: 0 0 var(--sp-3);
	color: #fff;
	font-size: clamp(1.5rem, 3vw, var(--fs-3xl));
}

.lp-band p {
	max-width: 58ch;
	margin: 0 auto var(--sp-5);
	color: rgba(255, 255, 255, .8);
	font-size: var(--fs-md);
}

.lp-band__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
}

/* 8 — Footer -------------------------------------------------------------- */

.lp-foot {
	padding: var(--sp-7) 0 var(--sp-6);
	background: var(--ink);
	color: rgba(255, 255, 255, .72);
	font-size: var(--fs-sm);
	text-align: center;
}

.lp-foot__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2) var(--sp-5);
	margin-bottom: var(--sp-5);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.lp-foot__links a {
	color: rgba(255, 255, 255, .82);
	font-weight: 600;
	text-decoration: none;
}
.lp-foot__links a:hover { color: var(--gold); }

.lp-foot p { margin: 0 0 8px; line-height: 1.6; }
.lp-foot p:last-child { margin-bottom: 0; }
.lp-foot strong { color: #fff; }
.lp-foot a { color: var(--gold); }
.lp-foot a:hover { color: #fff; }

.lp-foot__legal { color: rgba(255, 255, 255, .5); font-size: var(--fs-xs); }

/* 9 — Mobile action bar & WhatsApp float ---------------------------------- */

.lp-actionbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: none;
	grid-template-columns: repeat(3, 1fr);
	box-shadow: 0 -2px 14px rgba(19, 25, 34, .22);
	/* Clears the iOS home indicator; 0 everywhere else. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.lp-actionbar a,
.lp-actionbar button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 54px;
	padding: 8px 6px;
	border: 0;
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 800;
	text-decoration: none;
}

.lp-actionbar__call { background: var(--brand); }
.lp-actionbar__wa   { background: var(--lp-wa); color: #06301a; }
.lp-actionbar__ask  { background: var(--ember); }

.lp-float {
	position: fixed;
	right: 18px;
	bottom: 22px;
	z-index: 9997;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--lp-wa);
	color: #06301a;
	box-shadow: 0 8px 22px rgba(37, 211, 102, .45);
	transition: transform .18s var(--ease);
}
.lp-float:hover { transform: scale(1.06); color: #06301a; }

/* 10 — Enquiry modal ------------------------------------------------------ */

.lp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--sp-4);
	background: rgba(9, 16, 28, .68);
	overflow-y: auto;
}

.lp-modal.is-open { display: flex; }

.lp-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	margin: auto;
	padding: var(--sp-5);
	background: var(--surface);
	border-radius: var(--r-lg);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
	animation: lp-rise .22s var(--ease) both;
}

@keyframes lp-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.lp-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--surface-3);
	color: var(--ink-2);
	line-height: 1;
}
.lp-modal__close:hover { background: var(--line-2); }

.lp-modal__title {
	margin: 0 0 6px;
	padding-right: 32px;
	font-size: var(--fs-xl);
}

.lp-modal__sub {
	margin: 0 0 var(--sp-4);
	color: var(--ink-3);
	font-size: var(--fs-sm);
}

body.lp-locked { overflow: hidden; }

/* 11 — Responsive --------------------------------------------------------- */

@media (min-width: 1024px) {
	.lp-bar__note { display: block; }
}

@media (max-width: 979px) {
	.lp-hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
	.lp-hero { padding: var(--sp-7) 0 var(--sp-8); }

	/* Once the hero stacks, the form card fills the column. An earlier cap here
	   held it to 520px, which on a ~600px screen left a band of dead hero
	   beside it while the CTA above ran the full width. */
	.lp-hero__form { width: 100%; max-width: none; }
}

@media (max-width: 767px) {
	.lp-shell { padding: 0 14px; }

	.lp-actionbar { display: grid; }
	.lp-float { display: none; }

	/* Clear the fixed action bar, plus the iOS home indicator under it. */
	body.page-template-landingpageitineary {
		padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
	}

	/* The number stays readable rather than collapsing to a bare icon — on a
	   phone it is the fastest route to a lead. */
	.lp-bar { --lp-bar-h: 56px; }
	.lp-bar__note { display: none; }
	.lp-bar__brand img { max-height: 32px; }
	.lp-bar__phone { padding: 8px 13px; font-size: var(--fs-xs); gap: 6px; }

	.lp-hero { padding: var(--sp-6) 0 var(--sp-7); }
	.lp-hero__meta { font-size: var(--fs-md); }
	.lp-trust { grid-template-columns: 1fr; gap: 8px; }
	.lp-hero__cta .lp-btn { width: 100%; }
	.lp-card { padding: var(--sp-4); }

	.lp-content > section:first-of-type { margin-top: calc(var(--sp-6) * -1); }
	.lp-content section { padding: var(--sp-5) var(--sp-4); }
	.lp-content .itinerary .day { padding: var(--sp-4); }

	/* One column beats two cramped ones: at these widths a two-up grid gives
	   each cell ~150px and wraps every label onto three lines. */
	.lp-content .overview ul,
	.lp-content .why-book ul,
	.lp-content .destinations ul { grid-template-columns: 1fr; }

	/* The gallery is the exception — thumbnails read fine two-up. */
	.lp-content .gallery-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.lp-content .cta-btn,
	.lp-content #blinking-button {
		width: 100%;
		padding: 14px 16px;
		font-size: var(--fs-base);
		animation-name: lp-pulse-sm;
	}

	.lp-band { padding: var(--sp-7) 0; }
	.lp-band__cta .lp-btn { width: 100%; }
	.lp-foot__links { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.lp-content .cta-btn,
	.lp-content #blinking-button,
	.lp-modal__dialog { animation: none; }

	.lp-btn:hover,
	.lp-float:hover,
	.lp-content .gallery-container img:hover { transform: none; }
}

@media print {
	.lp-bar, .lp-actionbar, .lp-float, .lp-modal, .lp-band, .lp-hero__form { display: none !important; }
	.lp-hero { background: none; color: var(--ink); }
	.lp-hero__title, .lp-hero__meta { color: var(--ink); }
	.lp-content section { box-shadow: none; }
}