/* ==========================================================================
   Baku Travel Partner
   Design direction: "Baku After Hours"
   variance 0.7 (asymmetric, photographs break the frame)
   density 0.4 (open, but not precious)
   motion 0.15 (static; only focus and hover states move)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   Wrapped in :where() so every component rule below still wins.
   -------------------------------------------------------------------------- */

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

:where(html) {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
	margin: 0;
}

:where(ul[class], ol[class]) {
	list-style: none;
	padding: 0;
}

:where(img, picture, svg, video) {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

:where(a) {
	color: inherit;
}

:where(table) {
	border-collapse: collapse;
	width: 100%;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
	--bg: #F5F7F6;
	--surface: #FFFFFF;
	--ink: #17201D;
	--muted: #58655F;
	--accent: #B7F27D;
	--accent-hover: #A8E96A;
	--accent-dark: #246144;
	--border: #DAE2DD;
	--night: #17201D;

	--on-night: #F5F7F6;
	--on-night-muted: rgba(245, 247, 246, 0.68);
	--night-hairline: rgba(245, 247, 246, 0.16);

	/* The Arabic face is attached only under .btp-lang-ar, so Latin and Cyrillic
	   pages never pull its 166 KB. */
	--font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

	--fs-display: clamp(2.375rem, 5vw, 4rem);
	--fs-h2: clamp(1.875rem, 3.4vw, 2.75rem);
	--fs-h3: clamp(1.1875rem, 1.5vw, 1.4375rem);
	--fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
	--fs-body: 1.0625rem;
	--fs-small: 0.9375rem;
	--fs-micro: 0.8125rem;

	--lh-display: 1.06;
	--lh-heading: 1.12;
	--lh-body: 1.65;

	--sp-sm: 8px;
	--sp-md: 16px;
	--sp-lg: 32px;
	--sp-xl: 56px;
	--sp-section: clamp(64px, 8vw, 96px);

	--radius-sm: 4px;
	--radius-md: 12px;

	--wrap: 1280px;
	--gutter: clamp(20px, 4vw, 40px);
	--measure: 64ch;

	--ring: 0 0 0 3px rgba(36, 97, 68, 0.28);
	--ring-night: 0 0 0 3px rgba(183, 242, 125, 0.42);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	font-weight: 800;
	line-height: var(--lh-heading);
	letter-spacing: -0.018em;
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
	letter-spacing: -0.008em;
}

p {
	text-wrap: pretty;
}

strong {
	font-weight: 700;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:focus-visible {
	outline: 2px solid var(--accent-dark);
	outline-offset: 3px;
	border-radius: 2px;
}

.site-header :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--accent);
}

/* Hidden by clipping, not by an offset: an offset creates a scrollbar in RTL. */
.skip-link {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	z-index: 200;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	background: var(--accent);
	color: var(--ink);
	font-weight: 700;
}

.skip-link:focus {
	width: auto;
	height: auto;
	padding: 12px 20px;
	overflow: visible;
	clip-path: none;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

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

.site-main {
	display: block;
}

.section {
	padding-block: var(--sp-section);
}

.section--tight {
	padding-block: clamp(48px, 5vw, 64px);
}

.section--night {
	background: var(--night);
	color: var(--on-night);
}

.section__intro p {
	color: var(--muted);
	font-size: var(--fs-lead);
	margin-top: var(--sp-md);
	max-width: 46ch;
}

.section--night .section__intro p {
	color: var(--on-night-muted);
}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--ink);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--ink);
}

.btn--ghost {
	background: transparent;
	border-color: var(--border);
	color: var(--ink);
}

.section--night .btn--ghost,
.hero .btn--ghost,
.cta-band .btn--ghost {
	border-color: var(--night-hairline);
	color: var(--on-night);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	border-color: var(--accent-dark);
	color: var(--accent-dark);
}

.section--night .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.section--night .btn--ghost:focus-visible,
.hero .btn--ghost:focus-visible,
.cta-band .btn--ghost:focus-visible {
	border-color: var(--accent);
	color: var(--accent);
}

.btn--sm {
	min-height: 44px;
	padding: 8px 18px;
	font-size: var(--fs-small);
}

.btn--wide {
	width: 100%;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent-dark);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.link-arrow::after {
	content: "\2192";
	font-weight: 400;
}

[dir="rtl"] .link-arrow::after {
	content: "\2190";
}

.link-arrow:hover,
.link-arrow:focus-visible {
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-header {
	background: var(--night);
	color: var(--on-night);
	position: relative;
	z-index: 30;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-lg);
	min-height: 76px;
	padding-block: 14px;
}

.wordmark {
	display: block;
	text-decoration: none;
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -0.02em;
	flex: 0 0 auto;
}

.wordmark__line1,
.wordmark__line2 {
	display: block;
}

.wordmark__line1 {
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.6875rem;
	font-weight: 700;
}

.wordmark__line2 {
	font-size: 1.125rem;
	color: var(--on-night);
	margin-top: 3px;
}

.wordmark--image {
	display: flex;
	align-items: center;
	line-height: 0;
}

.wordmark .custom-logo {
	height: 38px;
	max-height: 38px;
	width: auto;
}

@media (min-width: 700px) {
	.wordmark .custom-logo {
		height: 44px;
		max-height: 44px;
	}
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--sp-lg);
	margin-inline-start: auto;
}

.site-nav .menu {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav .menu a {
	color: var(--on-night);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	padding-block: 6px;
	border-bottom: 1px solid transparent;
}

.site-nav .menu a:hover,
.site-nav .menu a:focus-visible {
	border-bottom-color: var(--accent);
}

.site-nav .menu .current-menu-item > a,
.site-nav .menu .current_page_item > a {
	border-bottom-color: var(--accent);
}

.lang-links {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.lang-links a {
	color: var(--on-night-muted);
	text-decoration: none;
}

.lang-links a:hover,
.lang-links a:focus-visible {
	color: var(--accent);
}

.lang-links [aria-current="true"] {
	color: var(--accent);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
}

.header-phone {
	color: var(--on-night);
	font-size: var(--fs-small);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.header-phone:hover,
.header-phone:focus-visible {
	color: var(--accent);
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
	background: transparent;
	border: 1px solid var(--night-hairline);
	border-radius: var(--radius-sm);
	color: var(--on-night);
	font-size: var(--fs-small);
	font-weight: 700;
	min-height: 44px;
	padding: 0 14px;
	cursor: pointer;
}

.nav-toggle__bars {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: var(--accent);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	width: 18px;
	height: 2px;
	background: var(--accent);
}

.nav-toggle__bars::before {
	top: -6px;
}

.nav-toggle__bars::after {
	top: 6px;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--night);
	color: var(--on-night);
	overflow: hidden;
	padding-block: clamp(48px, 7vw, 88px) clamp(64px, 9vw, 128px);
}

.hero__inner {
	position: relative;
	z-index: 2;
}

/* ch units resolve against the element's own font-size, so the cap has to sit
   on the heading itself, never on a wrapper set in body type. */
.hero__title {
	color: var(--on-night);
	max-width: 17ch;
}

.hero__title .accent {
	color: var(--accent);
}

.hero__lead {
	max-width: 42ch;
	margin-top: var(--sp-lg);
	color: var(--on-night-muted);
	font-size: var(--fs-lead);
	line-height: 1.55;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-md);
	margin-top: var(--sp-xl);
}

.hero__phone {
	color: var(--on-night);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--night-hairline);
	padding-bottom: 4px;
}

.hero__phone:hover,
.hero__phone:focus-visible {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.hero__figure {
	margin: var(--sp-lg) 0 0;
	position: relative;
}

.hero__figure img,
.hero__figure .img-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   8. Rates: one connected panel that straddles the hero edge
   -------------------------------------------------------------------------- */

.rates {
	position: relative;
	z-index: 5;
	margin-top: clamp(-96px, -7vw, -48px);
}

.rates__panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
}

.rate {
	padding: clamp(24px, 3vw, 36px);
	border-top: 1px solid var(--border);
}

.rate:first-child {
	border-top: 0;
}

.rate__label {
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--muted);
	margin: 0;
}

.rate__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 10px;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.rate__unit {
	font-size: var(--fs-body);
	font-weight: 700;
	color: var(--muted);
	letter-spacing: 0;
}

.rate__note {
	margin-top: 12px;
	color: var(--muted);
	font-size: var(--fs-small);
	max-width: 34ch;
}

.rates__aside {
	padding: clamp(24px, 3vw, 36px);
	border-top: 1px solid var(--border);
	background: var(--bg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sp-md);
}

.rates__aside p {
	color: var(--muted);
	font-size: var(--fs-small);
	margin: 0;
}

/* --------------------------------------------------------------------------
   9. Services: an open two-column list, not a row of cards
   -------------------------------------------------------------------------- */

.services__head {
	display: grid;
	gap: var(--sp-lg);
	margin-bottom: clamp(40px, 5vw, 64px);
}

.services__list {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: clamp(32px, 5vw, 80px);
}

.service {
	padding-block: clamp(24px, 3vw, 34px);
	border-top: 1px solid var(--border);
}

.service h3 {
	margin-bottom: 10px;
}

.service p {
	color: var(--muted);
	max-width: 46ch;
	margin: 0;
}

/* --------------------------------------------------------------------------
   10. Local knowledge: full bleed photograph, then compact benefits
   -------------------------------------------------------------------------- */

.knowledge {
	background: var(--surface);
	padding-block: var(--sp-section);
	border-block: 1px solid var(--border);
}

.knowledge__head {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.knowledge__head h2 {
	max-width: 22ch;
}

.knowledge__figure {
	margin: 0 0 clamp(40px, 5vw, 64px);
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
}

.knowledge__figure img,
.knowledge__figure .img-placeholder {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.knowledge__figure figcaption {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 10px var(--gutter) 0;
	color: var(--muted);
	font-size: var(--fs-small);
}

.benefits {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 3vw, 40px);
}

.benefit {
	border-top: 2px solid var(--ink);
	padding-top: var(--sp-md);
}

.benefit h3 {
	font-size: 1.0625rem;
	margin-bottom: 8px;
}

.benefit p {
	color: var(--muted);
	font-size: var(--fs-small);
	margin: 0;
}

/* --------------------------------------------------------------------------
   11. Steps
   -------------------------------------------------------------------------- */

.steps {
	counter-reset: step;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: clamp(32px, 4vw, 48px) 0 0;
	padding: 0;
	list-style: none;
}

.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--sp-md);
	align-items: start;
	padding-block: var(--sp-lg);
	border-top: 1px solid var(--night-hairline);
}

.section:not(.section--night) .steps li {
	border-top-color: var(--border);
}

.steps li::before {
	content: counter(step);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--accent);
}

.section:not(.section--night) .steps li::before {
	color: var(--accent-dark);
}

.steps h3 {
	font-size: 1.125rem;
	margin-bottom: 6px;
}

.steps p {
	margin: 0;
	color: var(--on-night-muted);
	max-width: 52ch;
}

.section:not(.section--night) .steps p {
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   12. Tours
   -------------------------------------------------------------------------- */

.tours {
	margin: clamp(32px, 4vw, 48px) 0 0;
	padding: 0;
	list-style: none;
}

.tour {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-sm);
	padding-block: clamp(22px, 2.6vw, 30px);
	border-top: 1px solid var(--border);
}

.tour__name {
	font-size: var(--fs-h3);
	margin: 0;
}

.tour__meta {
	color: var(--muted);
	font-size: var(--fs-small);
	font-weight: 700;
	margin: 0;
}

.tour__text {
	color: var(--muted);
	margin: 0;
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */

.faq {
	margin-top: clamp(32px, 4vw, 48px);
	max-width: 76ch;
}

.faq details {
	border-top: 1px solid var(--border);
}

.faq details:last-of-type {
	border-bottom: 1px solid var(--border);
}

.faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	gap: var(--sp-md);
	align-items: baseline;
	justify-content: space-between;
	padding-block: 20px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1;
	color: var(--accent-dark);
}

.faq details[open] summary::after {
	content: "\2212";
}

.faq details p {
	color: var(--muted);
	margin: 0 0 20px;
	max-width: 66ch;
	padding-inline-end: 40px;
}

/* --------------------------------------------------------------------------
   14. Closing call to action
   -------------------------------------------------------------------------- */

.cta-band {
	background: var(--night);
	color: var(--on-night);
	padding-block: var(--sp-section);
}

.cta-band__inner {
	display: grid;
	gap: var(--sp-lg);
	align-items: end;
}

.cta-band h2 {
	max-width: 18ch;
}

.cta-band p {
	color: var(--on-night-muted);
	max-width: 46ch;
	font-size: var(--fs-lead);
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-md);
}

.cta-band__phone {
	color: var(--on-night);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--night-hairline);
	padding-bottom: 4px;
}

.cta-band__phone:hover,
.cta-band__phone:focus-visible {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   15. Prose pages
   -------------------------------------------------------------------------- */

.prose-page {
	padding-block: clamp(48px, 6vw, 80px) var(--sp-section);
}

.prose-page__header {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.prose-page__header h1 {
	max-width: 20ch;
}

.prose-page__meta {
	color: var(--muted);
	font-size: var(--fs-small);
	margin-top: var(--sp-md);
}

.prose-page__figure {
	margin: 0 0 var(--sp-lg);
}

.prose-page__cta {
	margin-top: var(--sp-xl);
	padding-top: var(--sp-lg);
	border-top: 1px solid var(--border);
}

.prose {
	max-width: var(--measure);
}

.prose h2 {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	margin-top: var(--sp-xl);
	margin-bottom: var(--sp-md);
}

.prose h3 {
	margin-top: var(--sp-lg);
	margin-bottom: var(--sp-sm);
}

.prose p,
.prose ul,
.prose ol {
	margin-bottom: var(--sp-md);
	color: var(--muted);
}

.prose ul,
.prose ol {
	padding-inline-start: 1.25em;
}

.prose li {
	margin-bottom: 6px;
}

.prose a {
	color: var(--accent-dark);
	font-weight: 600;
}

.post-list {
	display: grid;
	gap: var(--sp-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: var(--measure);
}

.post-list__item {
	border-top: 1px solid var(--border);
	padding-top: var(--sp-lg);
}

.post-list__title {
	font-size: var(--fs-h3);
	margin-bottom: 8px;
}

.post-list__title a {
	text-decoration: none;
}

.post-list__excerpt {
	color: var(--muted);
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   16. Error page
   -------------------------------------------------------------------------- */

.error-page {
	padding-block: clamp(64px, 9vw, 128px);
}

.error-page__code {
	font-size: clamp(3.5rem, 12vw, 8rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--border);
	margin: 0 0 var(--sp-md);
}

.error-page__title {
	max-width: 18ch;
}

.error-page__text {
	max-width: 52ch;
	margin-top: var(--sp-md);
	color: var(--muted);
}

.error-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-md);
	margin-top: var(--sp-lg);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--night);
	color: var(--on-night);
	padding-block: var(--sp-section) var(--sp-lg);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 4vw, 56px);
}

.site-footer__tagline {
	margin-top: var(--sp-md);
	color: var(--on-night-muted);
	max-width: 34ch;
	font-size: var(--fs-small);
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.site-footer__phone {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.site-footer__phone:hover,
.site-footer__phone:focus-visible {
	color: var(--accent);
}

.site-footer__wa {
	color: var(--accent);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}

.site-footer__nav .menu {
	display: grid;
	gap: 10px;
	margin: 0 0 var(--sp-lg);
	padding: 0;
	list-style: none;
}

.site-footer__nav .menu a {
	color: var(--on-night-muted);
	font-size: var(--fs-small);
	text-decoration: none;
}

.site-footer__nav .menu a:hover,
.site-footer__nav .menu a:focus-visible {
	color: var(--accent);
}

.lang-links--footer {
	gap: 14px;
}

.site-footer__legal {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: var(--sp-md);
	border-top: 1px solid var(--night-hairline);
	color: var(--on-night-muted);
	font-size: var(--fs-micro);
}

/* --------------------------------------------------------------------------
   18. Persistent mobile contact bar
   -------------------------------------------------------------------------- */

.mobile-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background: rgba(23, 32, 29, 0.96);
	box-shadow: 0 -6px 24px rgba(23, 32, 29, 0.22);
	backdrop-filter: blur(6px);
}

.mobile-bar__call,
.mobile-bar__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	text-decoration: none;
	padding-inline: 20px;
}

.mobile-bar__call {
	border: 1px solid var(--night-hairline);
	color: var(--on-night);
}

.mobile-bar__wa {
	background: var(--accent);
	color: var(--ink);
}

@media (min-width: 900px) {
	.mobile-bar {
		display: none;
	}
}

@media (max-width: 899px) {
	body {
		padding-bottom: 84px;
	}
}

/* --------------------------------------------------------------------------
   19. Mobile navigation
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-md);
		margin: 0;
		padding: var(--sp-md) var(--gutter) var(--sp-lg);
		background: var(--night);
		border-top: 1px solid var(--night-hairline);
	}

	.site-nav.is-open {
		display: flex;
	}

	.site-nav .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav .menu a {
		display: block;
		padding-block: 14px;
		border-bottom: 1px solid var(--night-hairline);
		font-size: 1.0625rem;
	}

	.site-nav .menu a:hover,
	.site-nav .menu a:focus-visible {
		border-bottom-color: var(--accent);
	}

	.site-header__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.site-header__actions .btn {
		width: 100%;
	}

	.header-phone {
		padding-block: 8px;
	}
}

/* --------------------------------------------------------------------------
   20. Desktop composition
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
	.rates__panel {
		grid-template-columns: 1fr 1fr;
	}

	.rate {
		border-top: 0;
	}

	.rate + .rate {
		border-inline-start: 1px solid var(--border);
	}

	.rates__aside {
		grid-column: 1 / -1;
		border-top: 1px solid var(--border);
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.services__list {
		grid-template-columns: 1fr 1fr;
	}

	.benefits {
		grid-template-columns: 1fr 1fr;
	}

	.tour {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: var(--sp-lg);
		align-items: start;
	}

	.tour__name {
		grid-row: 1;
	}

	.tour__meta {
		grid-column: 1;
		grid-row: 2;
	}

	.tour__text {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.site-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr;
	}

	.cta-band__inner {
		grid-template-columns: 1.1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.hero {
		padding-block: clamp(72px, 7vw, 104px) clamp(96px, 10vw, 150px);
		min-height: min(84vh, 760px);
		display: flex;
		align-items: center;
	}

	.hero__inner {
		width: 100%;
		padding-inline-end: 42%;
	}

	.hero__figure {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		width: 42%;
		margin: 0;
	}

	.hero__figure img,
	.hero__figure .img-placeholder {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	.hero__figure::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, var(--night) 0%, rgba(23, 32, 29, 0.55) 26%, rgba(23, 32, 29, 0) 62%);
	}

	[dir="rtl"] .hero__figure::after {
		background: linear-gradient(to left, var(--night) 0%, rgba(23, 32, 29, 0.55) 26%, rgba(23, 32, 29, 0) 62%);
	}

	.services__head {
		grid-template-columns: 1.1fr 1fr;
		align-items: end;
	}

	.benefits {
		grid-template-columns: repeat(4, 1fr);
	}

	.steps {
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(40px, 5vw, 80px);
	}
}

/* --------------------------------------------------------------------------
   21. Arabic
   Different face, looser heading leading, no negative tracking.
   -------------------------------------------------------------------------- */

/* Russian and Turkish set the same sentence longer than English, and the hero
   headline has to stay at two lines. */
.btp-lang-ru,
.btp-lang-tr {
	--fs-display: clamp(2.25rem, 4.3vw, 3.5rem);
}

.btp-lang-ar {
	font-family: "Noto Sans Arabic", "Manrope", system-ui, sans-serif;

	/* Arabic sets wider at the same size, so the display step comes down a
	   notch to keep the hero headline at two lines. */
	--fs-display: clamp(2rem, 4.1vw, 3.25rem);
	--fs-h2: clamp(1.625rem, 2.9vw, 2.375rem);
}

.btp-lang-ar .hero__title {
	max-width: 22ch;
}

.btp-lang-ar h1,
.btp-lang-ar h2,
.btp-lang-ar h3,
.btp-lang-ar h4 {
	letter-spacing: 0;
	line-height: 1.4;
	font-weight: 700;
}

.btp-lang-ar .rate__price,
.btp-lang-ar .error-page__code,
.btp-lang-ar .site-footer__phone,
.btp-lang-ar .wordmark {
	letter-spacing: 0;
}

.btp-lang-ar .wordmark__line1 {
	letter-spacing: 0.08em;
}

.btp-lang-ar .lang-links {
	letter-spacing: 0;
}

/* margin-inline-start on a 100vw block already bleeds correctly in both
   directions, so RTL needs no override here. */

/* --------------------------------------------------------------------------
   22. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	:where(html) {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.mobile-bar,
	.cta-band {
		display: none;
	}

	body {
		padding-bottom: 0;
		background: #FFFFFF;
	}
}

/* --------------------------------------------------------------------------
   23. Declared image placeholder
   Holds the composition on palette until the photograph is in place.
   -------------------------------------------------------------------------- */

.img-placeholder {
	display: block;
	width: 100%;
	background:
		linear-gradient(200deg, rgba(245, 247, 246, 0.12) 0%, rgba(245, 247, 246, 0) 55%),
		linear-gradient(20deg, rgba(183, 242, 125, 0.18) 0%, rgba(183, 242, 125, 0) 48%),
		var(--night);
}

/* --------------------------------------------------------------------------
   24. Tours teaser on the homepage
   A split, deliberately not another hairline list like the services block.
   -------------------------------------------------------------------------- */

.tours-teaser {
	display: grid;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.tours-teaser__intro p {
	color: var(--muted);
	font-size: var(--fs-lead);
	margin-top: var(--sp-md);
	max-width: 44ch;
}

.tours-teaser__more {
	margin-top: var(--sp-lg);
}

.tours-teaser__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--ink);
}

.tours-teaser__list li {
	padding-block: 14px;
	border-bottom: 1px solid var(--border);
	font-weight: 700;
	font-size: 1.0625rem;
}

.tours-teaser__list span {
	display: block;
	color: var(--muted);
	font-weight: 400;
	font-size: var(--fs-small);
	margin-top: 2px;
}

@media (min-width: 900px) {
	.tours-teaser {
		grid-template-columns: 1fr 1fr;
	}
}

/* --------------------------------------------------------------------------
   25. Small shared pieces
   -------------------------------------------------------------------------- */

.section__more {
	margin-top: clamp(28px, 3vw, 40px);
}

.section__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-md);
	margin-top: clamp(32px, 4vw, 48px);
}

.lead {
	font-size: var(--fs-lead);
	color: var(--muted);
	max-width: 56ch;
	margin-top: var(--sp-md);
}

.section--night .lead {
	color: var(--on-night-muted);
}

.note {
	color: var(--muted);
	font-size: var(--fs-small);
	max-width: 60ch;
	margin-top: var(--sp-md);
}

.contact-lines {
	display: grid;
	gap: var(--sp-lg);
	margin-top: clamp(32px, 4vw, 48px);
	max-width: 62ch;
}

.contact-line {
	border-top: 1px solid var(--border);
	padding-top: var(--sp-md);
}

.contact-line__label {
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--muted);
	margin: 0 0 6px;
}

.contact-line__value {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
}

.contact-line__value a {
	text-decoration: none;
}

.contact-line__value a:hover,
.contact-line__value a:focus-visible {
	color: var(--accent-dark);
}

.contact-line p:last-child {
	color: var(--muted);
	font-size: var(--fs-small);
	margin-top: 6px;
}

@media (min-width: 700px) {
	.contact-lines {
		grid-template-columns: 1fr 1fr;
	}
}

/* --------------------------------------------------------------------------
   26. Inner page header
   -------------------------------------------------------------------------- */

.page-head {
	padding-block: clamp(48px, 7vw, 96px);
}

.page-head h1 {
	max-width: 20ch;
}

.page-head .lead {
	max-width: 52ch;
}

.contact-phone {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   27. WhatsApp glyph
   Drawn in the current text colour: the mark identifies the action without
   importing a second green into a palette that has one accent.
   -------------------------------------------------------------------------- */

.wa-icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	display: block;
}

.btn .wa-icon {
	margin-inline-end: 10px;
}

.btn--sm .wa-icon {
	width: 1.05em;
	height: 1.05em;
	margin-inline-end: 8px;
}

.site-footer__wa,
.mobile-bar__wa {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.site-footer__wa {
	align-items: baseline;
}

.site-footer__wa .wa-icon {
	align-self: center;
}

/* The glyph costs the mobile bar its one line label, so the bar tightens. */
.mobile-bar__call,
.mobile-bar__wa {
	padding-inline: 14px;
	font-size: 1rem;
	white-space: nowrap;
	gap: 8px;
}

.mobile-bar .wa-icon {
	width: 1.05em;
	height: 1.05em;
}

@media (max-width: 359px) {
	.mobile-bar__call,
	.mobile-bar__wa {
		font-size: 0.9375rem;
		padding-inline: 10px;
	}
}