/* =========================================================
   SJourney Theme - Front-end styles
   Base artboard: 1920x1080. Sizes scale fluidly via clamp().
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
	font-family: 'SJFont';
	src: url('../fonts/sjfont-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'SJFont';
	src: url('../fonts/sjfont-medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'SJFont';
	src: url('../fonts/sjfont-bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'SJFont';
	src: url('../fonts/sjfont-italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ---------- Base reset (standalone theme, no parent reset anymore) ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* ---------- Tokens ---------- */
:root {
	/* Brand colors */
	--sj-dark:   #430C0E;
	--sj-red:    #A72024;
	--sj-gray:   #525252;
	--sj-pink:   #F3767A;
	--sj-yellow: #FFB920;
	/* Supporting colors from the design */
	--sj-cream:  #FEF2F2;
	--sj-rose:   #E84B50;
	--sj-muted:  #7C7C7C;
	--sj-sand:   #FFE388;

	/* Fluid type scale (px value = design @1920) */
	--fs-16: clamp(13px, 0.833vw, 16px);   /* lh 24px, ls -1%  */
	--fs-20: clamp(15px, 1.042vw, 20px);   /* lh 24px          */
	--fs-24: clamp(17px, 1.25vw, 24px);    /* lh 30px          */
	--fs-32: clamp(20px, 1.667vw, 32px);
	--fs-48: clamp(26px, 2.5vw, 48px);
	--fs-72: clamp(36px, 3.75vw, 72px);    /* ls -0.5%          */

	/* Fluid spacing */
	--sp-8:  clamp(6px, 0.417vw, 8px);
	--sp-16: clamp(10px, 0.833vw, 16px);
	--sp-24: clamp(14px, 1.25vw, 24px);
	--sp-48: clamp(20px, 2.5vw, 48px);
	--sp-80: clamp(28px, 4.167vw, 80px);

	--sj-header-h: clamp(84px, 8.333vw, 160px); /* 160 @1920 */
	--sj-boxed: 1824px;
}

body {
	font-family: 'SJFont', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Type presets ---------- */
.sj-text-16 { font-size: var(--fs-16); line-height: 1.5;  letter-spacing: -0.01em; }
.sj-text-20 { font-size: var(--fs-20); line-height: 1.2; }
.sj-text-24 { font-size: var(--fs-24); line-height: 1.25; }
.sj-text-32 { font-size: var(--fs-32); line-height: 1.22; }
.sj-text-48 { font-size: var(--fs-48); line-height: 1.23; }
.sj-text-72 { font-size: var(--fs-72); line-height: 1.1;  letter-spacing: -0.005em; }

/* ---------- Layout helpers ---------- */
.sj-container {
	width: 100%;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sp-48);
	padding-right: var(--sp-48);
}

/* ---------- Icons (SVG mask -> recolor with currentColor) ---------- */
.sj-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	background-color: currentColor;
	-webkit-mask: var(--sj-icon-src) center / contain no-repeat;
	mask: var(--sj-icon-src) center / contain no-repeat;
	margin-left: 16px;
}
.sj-icon--menu        { --sj-icon-src: url('../images/menu_icon.svg'); }
.sj-menu-toggle--expand img { width: 24px; height: 24px; display: block; }

/* ---------- Buttons ---------- */
.sj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-16) var(--sp-80);
	font-family: inherit;
	font-weight: 500;
	font-size: var(--fs-24);
	line-height: 1.25;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity .25s ease, transform .25s ease;
}
.sj-btn:hover { opacity: .88; text-decoration: none; }
.sj-btn--dark   { background: var(--sj-dark);   color: #fff; }
.sj-btn--dark:hover, .sj-btn--dark:focus { color: #fff; }
.sj-btn--red    { background: var(--sj-red);    color: #fff; }
.sj-btn--red:hover, .sj-btn--red:focus { color: #fff; }
.sj-btn--light  { background: var(--sj-cream);  color: var(--sj-red); }
.sj-btn--light:hover, .sj-btn--light:focus { color: var(--sj-red); }
.sj-btn--yellow { background: var(--sj-yellow); color: #fff; }
.sj-btn--yellow:hover, .sj-btn--yellow:focus { color: #fff; }

/* Header CTA: identical in transparent & normal header, no fluid scaling */
.sj-header .sj-header__cta,
.sj-header.is-scrolled .sj-header__cta,
body.sj-has-transparent-header .sj-header .sj-header__cta {
	background: var(--sj-red);
	color: #fff;
	font-size: 24px;
	line-height: 30px;
	padding: 16px 80px;
	text-transform: uppercase;
}

/* =========================================================
   HEADER (1920x160, padding 48 -> boxed 1824)
   ========================================================= */
.sj-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 990;
	background: transparent; /* no background / shadow, even on scroll */
	color: var(--sj-red);    /* normal version: #A72024 */
	transition: color .3s ease;
}

/* Transparent version (over hero, before scrolling): white */
body.sj-has-transparent-header .sj-header:not(.is-scrolled) {
	color: #fff;
}
body:not(.sj-has-transparent-header) #main { padding-top: var(--sj-header-h); }


.sj-header__inner {
	height: var(--sj-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-24);
}

.sj-menu-toggle__img { width: 24px; height: 24px; display: block; }

.sj-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	font-family: inherit;
	font-weight: 500;
	font-size: var(--fs-24);
	line-height: 1.25;
	text-transform: uppercase;
}

/* =========================================================
   EXPAND MENU (mega menu)
   ========================================================= */
.sj-menu-overlay {
	position: fixed;
	inset: -32px; /* extend past viewport: removes the light blur fringe at the top edge */
	background: rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	z-index: 995;
}
body.sj-menu-open { overflow: hidden; }
body.sj-menu-open .sj-menu-overlay { opacity: 1; visibility: visible; }

.sj-megamenu {
	position: fixed;
	top: var(--sp-48);
	left: max(var(--sp-48), calc((100% - var(--sj-boxed)) / 2));
	width: min(1285px, calc(100% - 2 * var(--sp-48)));
	max-height: calc(100dvh - var(--sp-48) - 16px);
	overflow-y: auto;
	scrollbar-width: none;      /* Firefox */
	background: var(--sj-red);
	color: #fff;
	padding: var(--sp-48);
	z-index: 996;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-16px);
	transition: width .6s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, transform .3s ease, visibility .3s ease;
}
body.sj-menu-open .sj-megamenu { opacity: 1; visibility: visible; transform: none; }
body.admin-bar .sj-megamenu { top: max(var(--sp-48), 40px); }
.sj-megamenu::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari */
.sj-megamenu.is-journey { width: min(var(--sj-boxed), calc(100% - 2 * var(--sp-48))); }

/* Toggle inside panel: 16px left / 18px top */
.sj-megamenu > .sj-menu-toggle--expand {
	position: absolute;
	top: 18px;
	left: 16px;
	color: #fff;
	z-index: 2;
}

.sj-megamenu__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-48);
}

.sj-megamenu__row {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: var(--sp-48);
}

/* --- Row 1: menu + preview --- */
.sj-megamenu__nav {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	padding: 24px 0;
}
.sj-label {
	font-weight: 400;
	font-size: var(--fs-20);
	line-height: 1.2;
	text-transform: uppercase;
}
.sj-label--pink { color: var(--sj-pink); }

.sj-mainmenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
}
.sj-mainmenu__item a {
	display: inline-flex;
	align-items: center;
	color: var(--sj-cream);
	font-weight: 500;
	font-size: var(--fs-48);
	line-height: 1.23; /* 59/48 */
	text-transform: uppercase;
	text-decoration: none;
	transition: color .2s ease;
}
.sj-mainmenu__item:hover a,
.sj-mainmenu__item.is-active a {
	color: var(--sj-pink);
	text-decoration: underline;
	text-underline-offset: .12em;
}
.sj-mainmenu__item a::before {
	content: '';
	display: inline-block;
	width: 0;
	height: .72em;
	margin-right: 0;
	opacity: 0;
	background-color: currentColor;
	-webkit-mask: url('../images/link_arrow.svg') center / contain no-repeat;
	mask: url('../images/link_arrow.svg') center / contain no-repeat;
	transition: width .35s cubic-bezier(.22, 1, .36, 1), margin-right .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}
.sj-mainmenu__item:hover a::before,
.sj-mainmenu__item.is-active a::before {
	width: .72em;
	margin-right: .25em;
	opacity: 1;
}

.sj-megamenu__media { position: relative; display: flex; min-width: 0; }
.sj-megamenu__preview {
	width: clamp(300px, 32.7vw, 628px); /* 628 @1920 */
	aspect-ratio: 628 / 522;             /* -> 522px  */
	overflow: hidden;
	background: rgba(255, 255, 255, .08);
	transition: opacity .3s ease;
}
.sj-megamenu__preview.is-empty img { display: none; }
.sj-megamenu__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- The Journey: 4 sub-menu columns --- */
/* Journey grid overlays the media area (absolute) so the panel height
   never collapses/expands when switching hover between menu items */
.sj-megamenu__journey {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	visibility: hidden;
	pointer-events: none;
	transition: visibility .45s;
}
.sj-megamenu.is-journey .sj-megamenu__preview { opacity: 0; }
.sj-megamenu.is-journey .sj-megamenu__journey {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* Each route card slides in left -> right with increasing opacity (staggered) */
.sj-megamenu__journey .sj-journey-card {
	opacity: 0;
	transform: translateX(-48px);
	transition: opacity .35s ease, transform .45s cubic-bezier(0.33, 1, 0.68, 1);
}
.sj-megamenu.is-journey .sj-journey-card { opacity: 1; transform: none; }
.sj-megamenu.is-journey .sj-journey-card:nth-child(1) { transition-delay: .18s; }
.sj-megamenu.is-journey .sj-journey-card:nth-child(2) { transition-delay: .27s; }
.sj-megamenu.is-journey .sj-journey-card:nth-child(3) { transition-delay: .36s; }
.sj-megamenu.is-journey .sj-journey-card:nth-child(4) { transition-delay: .45s; }
.sj-megamenu.is-journey .sj-megamenu__media   { flex: 1; }

.sj-journey-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	text-decoration: none;
}
.sj-journey-card__img {
	display: block;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, .1);
}
.sj-journey-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sj-journey-card__body {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--sp-24);
	background: var(--sj-cream);
	transition: background-color .2s ease;
}
.sj-journey-card__title {
	font-weight: 500;
	font-size: var(--fs-32);
	line-height: 1.22;
	text-transform: uppercase;
	color: var(--sj-dark);
}
.sj-journey-card__desc {
	font-weight: 300;
	font-size: var(--fs-20);
	line-height: 1.3;
	color: var(--sj-muted);
}
.sj-journey-card:hover .sj-journey-card__body { background: var(--sj-sand); }
.sj-journey-card:hover .sj-journey-card__title {
	text-decoration: underline;
	text-underline-offset: .12em;
}
.sj-journey-card__title::before {
	content: '';
	display: inline-block;
	width: 0;
	height: .7em;
	margin-right: 0;
	opacity: 0;
	background-color: currentColor;
	-webkit-mask: url('../images/link_arrow.svg') center / contain no-repeat;
	mask: url('../images/link_arrow.svg') center / contain no-repeat;
	transition: width .35s cubic-bezier(.22, 1, .36, 1), margin-right .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}
.sj-journey-card:hover .sj-journey-card__title::before {
	width: .7em;
	margin-right: .25em;
	opacity: 1;
}

/* --- Row 2: contact + CTA --- */
.sj-contact {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--sp-24);
}
.sj-contact__logo { flex: 0 0 auto; }
.sj-contact__logo img {
	display: block;
	width: clamp(90px, 7.6vw, 146px);
	height: auto;
	flex-shrink: 0;
}
.sj-contact__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #fff;
	font-size: var(--fs-20);
	line-height: 1.2;
}
.sj-contact__info a { color: #fff; text-decoration: none; }
.sj-contact__info a:hover { color: var(--sj-pink); }

.sj-socials { display: flex; align-items: center; gap: var(--sp-24); }
.sj-socials a { display: inline-flex; align-items: center; line-height: 1; }
.sj-socials img { width: 24px; height: 24px; object-fit: contain; display: block; }

.sj-megamenu__cta {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	gap: var(--sp-24);
}
.sj-heritage { display: inline-flex; color: var(--sj-pink); }
.sj-heritage svg { height: 26px; width: auto; display: block; }
.sj-btn-group { display: flex; flex-wrap: nowrap; gap: var(--sp-24); justify-content: flex-end; }
.sj-btn-group .sj-btn { min-width: 0; }

/* =========================================================
   FOOTER (1920x1264, padding 160 48)
   ========================================================= */
.sj-footer {
	background: #1a100c url('../images/footer_background.png') center / cover no-repeat;
	padding: clamp(64px, 8.333vw, 160px) var(--sp-48);
	color: #fff;
}

.sj-footer__hero {
	max-width: var(--sj-boxed);
	margin: 0 auto 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.sj-footer__rating {
	margin: 0 0 var(--sp-16);
	font-size: var(--fs-16);
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: #fff;
}
.sj-footer__rating .sj-stars { color: var(--sj-yellow); letter-spacing: 2px; margin-right: 8px; }
.sj-footer__title {
	margin: 0;
	font-weight: 400;
	font-size: var(--fs-72);
	line-height: 1.08;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: #fff;
}
.sj-footer__hero-cta {
	display: flex;
	gap: var(--sp-24);
	padding: 16px 0;
}
.sj-footer__hero-cta a {
	color: #fff;
	font-size: var(--fs-20);
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
}
.sj-footer__hero-cta a:first-child,
.sj-footer__hero-cta a:hover {
	text-decoration: underline;
	text-underline-offset: .2em;
	color: #fff;
}

.sj-footer__panel {
	max-width: var(--sj-boxed);
	margin: 0 auto;
	background: var(--sj-red);
	padding: var(--sp-48);
}

.sj-footer__main {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: var(--sp-48);
}
.sj-footer__col { min-width: 0; }
.sj-footer .sj-label { color: var(--sj-rose); }

/* Column 1: contact (no socials) + information menu */
.sj-footer__col--info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-48);
}
.sj-footer .sj-contact { align-items: center; }
.sj-footer__menu { display: flex; flex-direction: column; gap: 8px; }
.sj-footer__menu ul,
.sj-footer__col--journey ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sj-footer__menu a,
.sj-footer__col--journey a {
	color: var(--sj-cream);
	font-weight: 500;
	font-size: var(--fs-32);
	line-height: 1.22; /* 39/32 */
	text-transform: uppercase;
	text-decoration: none;
	transition: color .2s ease;
}
.sj-footer__menu a:hover,
.sj-footer__col--journey a:hover {
	color: var(--sj-pink);
	text-decoration: underline;
	text-underline-offset: .12em;
}

/* Column 2: main sitemap */
.sj-footer__col--sitemap { display: flex; flex-direction: column; gap: var(--sp-16); }
.sj-footer__col--sitemap ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
}
.sj-footer__col--sitemap a {
	color: var(--sj-cream);
	font-weight: 500;
	font-size: var(--fs-48);
	line-height: 1.23;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .2s ease;
}
.sj-footer__col--sitemap a:hover {
	color: var(--sj-pink);
	text-decoration: underline;
	text-underline-offset: .12em;
}

/* Column 3: The Journey + heritage icon */
.sj-footer__col--journey { display: flex; flex-direction: column; gap: var(--sp-16); }
.sj-heritage--footer {
	margin-top: auto;
	justify-content: flex-end;
	color: var(--sj-rose);
}

/* Footer link hover: same mechanism as header (arrow slides in, text shifts right),
   implemented with transform so column widths and the /titles never move */
.sj-footer__menu a,
.sj-footer__col--journey a,
.sj-footer__col--sitemap a {
	position: relative;
	display: inline-block;
	transition: color .2s ease, transform .3s ease;
}
.sj-footer__menu a::before,
.sj-footer__col--journey a::before,
.sj-footer__col--sitemap a::before {
	content: '';
	position: absolute;
	left: -0.95em;
	top: 50%;
	width: .72em;
	height: .72em;
	opacity: 0;
	transform: translateY(-50%);
	background-color: currentColor;
	-webkit-mask: url('../images/link_arrow.svg') center / contain no-repeat;
	mask: url('../images/link_arrow.svg') center / contain no-repeat;
	transition: opacity .3s ease;
}
.sj-footer__menu a:hover,
.sj-footer__col--journey a:hover,
.sj-footer__col--sitemap a:hover {
	transform: translateX(0.95em);
}
.sj-footer__menu a:hover::before,
.sj-footer__col--journey a:hover::before,
.sj-footer__col--sitemap a:hover::before {
	opacity: 1;
}

/* Divider + bottom */
.sj-footer__divider { height: 1px; background: var(--sj-rose); margin: var(--sp-24) 0; }
.sj-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--sp-24);
	flex-wrap: wrap;
}
.sj-socials--named { gap: 32px; }
.sj-socials--named a {
	gap: 8px;
	color: #fff;
	font-size: var(--fs-16);
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-decoration: none;
}
.sj-socials--named a:hover { color: var(--sj-pink); }
.sj-footer__copy { margin: 0; font-size: var(--fs-16); line-height: 1.5; color: var(--sj-rose); }

/* =========================================================
   Responsive
   ========================================================= */
/* Footer link hover: sliding arrow like the header menu */
.sj-footer__menu a,
.sj-footer__col--journey a,
.sj-footer__col--sitemap a {
	display: inline-flex;
	align-items: center;
}
.sj-footer__menu a::before,
.sj-footer__col--journey a::before,
.sj-footer__col--sitemap a::before {
	content: '';
	display: inline-block;
	width: 0;
	height: .72em;
	margin-right: 0;
	opacity: 0;
	background-color: currentColor;
	-webkit-mask: url('../images/link_arrow.svg') center / contain no-repeat;
	mask: url('../images/link_arrow.svg') center / contain no-repeat;
	transition: width .35s cubic-bezier(.22, 1, .36, 1), margin-right .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}
.sj-footer__menu a:hover::before,
.sj-footer__col--journey a:hover::before,
.sj-footer__col--sitemap a:hover::before {
	width: .72em;
	margin-right: .25em;
	opacity: 1;
}

@media (max-width: 1366px) {
	.sj-megamenu__journey { gap: 8px; }
}

@media (max-width: 1180px) {
	.sj-megamenu {
		left: var(--sp-24);
		width: calc(100% - 2 * var(--sp-24));
	}
	.sj-megamenu.is-journey { width: calc(100% - 2 * var(--sp-24)); }
	.sj-megamenu__journey { grid-template-columns: repeat(2, 1fr); }
	.sj-footer__main { flex-wrap: wrap; }
}

@media (max-width: 1024px) {
	.sj-megamenu {
		top: 0;
		left: 0;
		width: 100%;
		height: 100dvh;
		max-height: none;
	}
	body.admin-bar .sj-megamenu { top: 32px; height: calc(100dvh - 32px); }
	.sj-megamenu.is-journey { width: 100%; }
	.sj-megamenu__row--top { flex-direction: column; }
	.sj-megamenu__preview { display: none; }
	.sj-megamenu__journey { /* always visible, in normal flow on touch devices */
		position: static;
		visibility: visible;
		pointer-events: auto;
	}
	.sj-megamenu__journey .sj-journey-card { opacity: 1; transform: none; }
	.sj-journey-card__img { flex: 0 0 auto; aspect-ratio: 1 / 1; }
	.sj-megamenu__row--bottom { flex-direction: column; align-items: flex-start; }
	.sj-megamenu__cta { align-items: flex-start; }
	.sj-btn-group { justify-content: flex-start; }
	.sj-footer__main { flex-direction: column; }
	.sj-footer__col--info { gap: var(--sp-24); }
}

@media (max-width: 640px) {
	.sj-btn { padding: 12px 28px; width: auto; }
	.sj-megamenu { padding: 72px 20px 32px; }
	.sj-megamenu > .sj-menu-toggle--expand { top: 18px; left: 16px; }
	.sj-megamenu__journey { grid-template-columns: 1fr; }
	.sj-btn-group .sj-btn { padding: 12px 20px; }
	.sj-contact { flex-direction: column; }
	.sj-footer { padding-left: 20px; padding-right: 20px; }
	.sj-footer__panel { padding: 24px 20px; }
	.sj-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 782px) {
	body.admin-bar .sj-megamenu { top: 46px; height: calc(100dvh - 46px); }
}

@media (max-height: 900px) {
	.sj-megamenu { padding: 28px var(--sp-48) 24px; }
	.sj-megamenu__inner { gap: 24px; }
	.sj-megamenu__nav { padding: 10px 0; gap: 12px; }
	.sj-mainmenu { gap: 10px; }
	.sj-megamenu__preview { max-height: calc(100dvh - 430px); }
	.sj-contact__logo img { width: 110px; }
	.sj-megamenu__cta { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.sj-header, .sj-megamenu, .sj-menu-overlay, .sj-btn,
	.sj-journey-card__body, .sj-mainmenu__item a { transition: none; }
	.sj-megamenu.is-journey .sj-journey-card { animation: none; }
}


/* =========================================================
   PAGE: HOME
   ========================================================= */

/* ---------- Shared arrow (link_arrow.svg, recolor via currentColor) ---------- */
.sj-arrow {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url('../images/link_arrow.svg') center / contain no-repeat;
	mask: url('../images/link_arrow.svg') center / contain no-repeat;
}
.sj-arrow--down  { transform: rotate(135deg); }
.sj-arrow--right { transform: rotate(45deg); }
.sj-arrow--left  { transform: rotate(225deg); }

/* ---------- 1. HERO ---------- */
.sj-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	background: var(--sj-dark) center / cover no-repeat;
	color: #fff;
}
.sj-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(243, 118, 122, .45), rgba(167, 32, 36, .35));
	pointer-events: none;
}
.sj-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-24);
	padding-top: calc(var(--sj-header-h) + var(--sp-80));
}
.sj-hero__title {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
}
.sj-hero__title p { margin: 0; }
.sj-hero__desc {
	margin: 0;
	max-width: 920px;
	color: #fff;
}
.sj-hero__bottom {
	position: relative;
	z-index: 1;
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: var(--sp-24);
}
.sj-hero__logo img {
	width: clamp(48px, 3.75vw, 72px);
	display: block;
}
.sj-hero__scroll {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-8);
	padding: 0;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
}
.sj-hero__scroll-label {
	text-transform: uppercase;
	letter-spacing: .04em;
}
.sj-hero__scroll .sj-arrow--down { font-size: var(--fs-16); }
.sj-hero__clock {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--sp-8);
	text-transform: uppercase;
	text-align: right;
	margin-left: auto;
}
.sj-hero__city { opacity: .8; }

/* ---------- 2. PHILOSOPHY ---------- */
.sj-philosophy {
	background: var(--sj-cream);
	padding: var(--sp-80) var(--sp-48);
}
.sj-philosophy__inner {
	max-width: var(--sj-boxed);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-48);
}
.sj-philosophy__label { color: var(--sj-muted); }
.sj-philosophy__title {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sj-dark);
}
.sj-philosophy__title p { margin: 0; }
.sj-philosophy__title span { color: var(--sj-red); }
.sj-philosophy__gallery {
	display: flex;
	justify-content: center;
	gap: var(--sp-48);
	flex-wrap: wrap;
}
.sj-philosophy__img {
	margin: 0;
	width: min(420px, 100%); /* 420 x 630 */
	aspect-ratio: 420 / 630;
	overflow: hidden;
	background: rgba(67, 12, 14, .06);
}
.sj-philosophy__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sj-philosophy__quote {
	margin: 0;
	max-width: 46.5%; /* 46.5% body width */
	color: var(--sj-gray);
	text-align: left;
	position: relative;
	padding: 0 var(--sp-24);
}
.sj-philosophy__quote::before,
.sj-philosophy__quote::after {
	position: absolute;
	color: var(--sj-red);
	font-weight: 700;
	font-size: var(--fs-24);
	line-height: 1;
}
.sj-philosophy__quote::before { content: '\201C'; left: 0; top: 0; }
.sj-philosophy__quote::after  { content: '\201D'; right: 0; bottom: 0; }
.sj-philosophy__heritage { color: var(--sj-muted); }

/* ---------- 3. DESTINATIONS ---------- */
.sj-destinations {
	position: relative;
	background: var(--sj-cream) center / cover no-repeat;
	padding: var(--sp-48) 0;
	overflow: hidden;
}
.sj-destinations__top { padding: 0 var(--sp-48); }
.sj-destinations__pane {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-24);
	width: 50vw; /* prev/next stay inside the left half */
	max-width: 100%;
}
.sj-destinations__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-16);
	min-width: 0;
	flex: 1 1 auto;
	padding: var(--sp-80) 0;
}
.sj-destinations__label { color: var(--sj-muted); }
.sj-destinations__slides { position: relative; width: 100%; }
.sj-destinations__slide {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-16);
}
.sj-destinations__slide.is-active { display: flex; }
.sj-destinations__title {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sj-dark);
}
.sj-destinations__desc {
	margin: 0;
	max-width: 100%;
	color: var(--sj-muted);
}
.sj-destinations__more {
	color: var(--sj-dark);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: .2em;
	font-weight: 500;
}
.sj-destinations__book { gap: var(--sp-16); }
.sj-destinations__book .sj-arrow { font-size: var(--fs-24); }
.sj-destinations__nav {
	flex: 0 0 auto;
	width: var(--sp-48);
	height: var(--sp-48);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--sj-dark);
	border-radius: 50%;
	color: var(--sj-dark);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.sj-destinations__nav:hover { background: var(--sj-dark); color: #fff; }
.sj-destinations__nav .sj-arrow { font-size: var(--fs-16); }
.sj-destinations__dots {
	display: flex;
	gap: var(--sp-8);
}
.sj-destinations__dot {
	width: var(--sp-8);
	height: var(--sp-8);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(67, 12, 14, .25);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.sj-destinations__dot.is-active {
	background: var(--sj-red);
	transform: scale(1.25);
}
.sj-destinations__carousel {
	overflow: hidden;
	cursor: grab;
}
.sj-destinations__carousel.is-dragging { cursor: grabbing; }
.sj-destinations__track {
	display: flex;
	gap: var(--sp-16);
	padding: 0 var(--sp-48);
	will-change: transform;
	transition: transform .45s cubic-bezier(.22, 1, .36, 1);
	width: max-content;
}
.sj-destinations__track.is-dragging { transition: none; }
.sj-destinations__card {
	display: flex;
	align-items: stretch;
	text-decoration: none;
	flex: 0 0 auto;
	user-select: none;
	-webkit-user-select: none;
}
.sj-destinations__card-media {
	width: clamp(96px, 7.5vw, 144px);
	aspect-ratio: 1;
	overflow: hidden;
	background: rgba(67, 12, 14, .12);
	flex: 0 0 auto;
}
.sj-destinations__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.sj-destinations__card-body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--sp-8);
	background: #fff;
	color: var(--sj-dark);
	padding: var(--sp-16);
	width: clamp(200px, 14.6vw, 280px);
	transition: box-shadow .2s ease;
}
.sj-destinations__card.is-active .sj-destinations__card-body,
.sj-destinations__card:hover .sj-destinations__card-body {
	box-shadow: 0 8px 24px rgba(67, 12, 14, .12);
}
.sj-destinations__card-head {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
}
.sj-destinations__card-head .sj-arrow { font-size: var(--fs-16); flex: 0 0 auto; }
.sj-destinations__card-title {
	font-weight: 700;
	text-transform: uppercase;
}
.sj-destinations__card-stops {
	--fs-12: clamp(10px, 0.625vw, 12px);
	font-size: var(--fs-12);
	line-height: 1.5;
	color: var(--sj-muted);
	text-transform: uppercase;
}

/* ---------- 4. CTA BAND ---------- */
.sj-cta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(360px, 32.5vw, 624px); /* 624 @1920 */
	padding: calc(var(--sp-80) * 2) var(--sp-48); /* 160 / 48 @1920 */
	background: var(--sj-dark) center / cover no-repeat;
	color: #fff;
	overflow: hidden;
}
.sj-cta__logo {
	position: absolute;
	top: var(--sp-48);
	right: var(--sp-48);
	opacity: .5;
	pointer-events: none;
}
.sj-cta__logo img {
	width: clamp(48px, 3.75vw, 72px);
	display: block;
}
.sj-cta__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-24);
	width: 100%;
}
.sj-cta__title {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
}
.sj-cta__desc {
	margin: 0;
	max-width: 760px;
	color: #fff;
}

/* ---------- 5. LIFESTYLE (pinned, horizontal scroll) ---------- */
.sj-lifestyle {
	position: relative;
	background: var(--sj-cream);
	scroll-snap-align: start;
	scroll-snap-stop: normal;
}
.sj-lifestyle__sticky {
	position: sticky;
	top: 0;
	height: 100dvh;
	padding: var(--sp-48) 0;
	overflow: hidden;
	display: flex;
	align-items: stretch;
}
.sj-lifestyle__track {
	display: flex;
	gap: 0;
	width: max-content;
	height: 100%;
	will-change: transform;
}
.sj-lifestyle__col {
	flex: 0 0 auto;
	width: 33.3333vw; /* 1/3 of the section width */
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 var(--sp-48);
	overflow: visible;
}
.sj-lifestyle__col--1 { padding: 0 var(--sp-48) 0 0; gap: var(--sp-24); }
.sj-lifestyle__col--2 { gap: var(--sp-80); }
.sj-lifestyle__col--3 { padding-top: var(--sp-80); }
.sj-lifestyle__col--4 { gap: var(--sp-24); }
.sj-lifestyle__col--5 { padding: 0 0 0 var(--sp-48); gap: var(--sp-24); }

.sj-lifestyle__img { margin: 0; overflow: hidden; }
.sj-lifestyle__img img { width: 100%; height: auto; display: block; }
.sj-lifestyle__img--square {
	width: min(543px, 100%); /* 543 x 543 */
	aspect-ratio: 1 / 1;
}
.sj-lifestyle__img--square img { height: 100%; object-fit: cover; }
.sj-lifestyle__img--left  { margin-right: auto; }
.sj-lifestyle__img--right { margin-left: auto; }

.sj-lifestyle__text {
	color: var(--sj-gray);
	text-align: justify;
}
.sj-lifestyle__text p { margin: 0 0 var(--sp-16); }
.sj-lifestyle__text p:last-child { margin-bottom: 0; }
.sj-lifestyle__text--right { margin-left: auto; }

.sj-lifestyle__heading {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
	margin-top: auto;
}
.sj-lifestyle__label { color: var(--sj-muted); }
.sj-lifestyle__title {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sj-dark);
	margin-right: calc(var(--sp-48) * -1); /* title ignores the column padding */
}
.sj-lifestyle__title p { margin: 0; }
.sj-lifestyle__title span { color: var(--sj-red); }
.sj-lifestyle__subtitle {
	margin: 0;
	font-size: 48px; /* fixed per spec */
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
	color: #430C0E;
}
.sj-lifestyle__heritage { color: var(--sj-muted); }
.sj-lifestyle__logo-box {
	margin: auto 0 0 auto;
	width: 189px;
	height: 196px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sj-lifestyle__logo {
	width: 93px;
	height: 100px;
	background-color: var(--sj-red);
	-webkit-mask: var(--sj-logo) center / contain no-repeat;
	mask: var(--sj-logo) center / contain no-repeat;
}

/* ---------- Home responsive ---------- */
@media (max-width: 1024px) {
	.sj-destinations__pane { width: 100%; }

	.sj-lifestyle { height: auto !important; }
	.sj-lifestyle__sticky {
		position: static;
		height: auto;
		padding: var(--sp-48) var(--sp-48);
	}
	.sj-lifestyle__track {
		flex-direction: column;
		width: 100%;
		transform: none !important;
		gap: var(--sp-48);
	}
	.sj-lifestyle__col,
	.sj-lifestyle__col--1,
	.sj-lifestyle__col--5 {
		width: 100%;
		height: auto;
		padding: 0;
	}
	.sj-lifestyle__title { margin-right: 0; }
	.sj-lifestyle__logo-box { margin: 0 0 0 auto; }
}

@media (max-width: 900px) {
	.sj-philosophy__quote { max-width: 100%; }
}

@media (max-width: 768px) {
	.sj-cta { padding: var(--sp-80) var(--sp-48); }
	.sj-lifestyle__subtitle { font-size: var(--fs-32); }
}

/* Vertical snap so the pinned lifestyle section always lands at 100dvh */
@media (min-width: 1025px) {
	html.sj-snap-y { scroll-snap-type: y proximity; }
}

@media (prefers-reduced-motion: reduce) {
	html.sj-snap-y { scroll-snap-type: none; }
}