/* WP-Journeys: the site's layer on top of the scroll hero package (hero.css / hero.js stay as shipped).
   It dresses the package in the site's own type and colours and lays out the copy chosen by the
   owner ("from the sea to the sky"): headline on the left, a glowing route on the right that draws
   with the scroll and lights four stops. Everything is scoped under .wpj-hero.wpj-peaks. */

.wpj-hero.wpj-peaks {
	--page: #0A5B8C;                 /* the blue section that follows */
	--can-yellow: #FFCC00;
	--p-ivory: #F4F1EA;
	--p-sun: #FFCC00;
	--p-basalt: 23, 27, 26;
	--p-display: "Anton", "Arial Narrow", Impact, sans-serif;
	--p-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--p-body: "Karla", "Helvetica Neue", Arial, sans-serif;
	--p-hand: "Caveat", "Segoe Script", cursive;
	--p-pad: clamp(16px, 4.4vw, 64px);
	height: 620vh;                   /* mountains, a hold on the finished picture, then the words: see peaks.js */
	color: var(--p-ivory);
	font-family: var(--p-body);
	z-index: 1;
}

/* Elementor gives every container a padding, a gap and a transform transition */
body .wpj-page .wpj-hero.wpj-peaks {
	display: block;
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	transition: none;
}

/* peak labels in the site's faces instead of a fourth font family */
.wpj-hero.wpj-peaks .wpj-label .pill {
	font-family: var(--p-display);
	font-weight: 400;
	letter-spacing: 0.06em;
}

.wpj-hero.wpj-peaks .wpj-label .pill i {
	font-family: var(--p-body);
	font-weight: 700;
}

/* the package's white ground mist is not used; the site's dark veil (driven by peaks.js, after the
   hold with the peak names) carries the ivory text and hands the picture over to the blue section */
.wpj-hero.wpj-peaks .wpj-mist {
	background: none;
}

.wpj-hero.wpj-peaks .wpj-c-veil {
	position: absolute;
	inset: 0;
	z-index: 5;
	opacity: 0;
	pointer-events: none;
	background:
		linear-gradient(0deg, var(--page) 0%, rgba(10, 91, 140, 0.55) 9%, rgba(10, 91, 140, 0) 26%),
		linear-gradient(90deg, rgba(var(--p-basalt), 0.9) 0%, rgba(var(--p-basalt), 0.62) 36%, rgba(var(--p-basalt), 0.34) 60%, rgba(var(--p-basalt), 0.74) 100%);
}

/* The theme's old mountain section also had a class called .wpj-haze (blurred, masked photo haze).
   Those rules must not reach the package's haze, which is a plain soft gradient. */
.wpj-hero.wpj-peaks .wpj-haze {
	z-index: auto;
	flex: initial;
	width: auto;
	filter: none;
	-webkit-mask-image: none;
	mask-image: none;
	will-change: auto;
}

/* once the words arrive, the peak labels step back so nothing competes with the headline */
.wpj-hero.wpj-peaks .wpj-label {
	transition: visibility 0s linear 0.5s, filter 0.5s ease;
}

.wpj-hero.wpj-peaks.wpj-peaks-reading .wpj-label {
	opacity: 0 !important;
	visibility: hidden;
}

/* ---- the scene is fitted to the stage
   The package sizes every mountain from the height of the window (vh) and expects its stage to be
   that tall. Here the stage is the window minus the sticky header, so the scene is laid out for a
   full window and scaled down to the stage (--wpj-fit = stage height / window height, from
   peaks.js), anchored at the bottom centre. Widths that come from the window's width are divided
   by the same factor, so the picture still reaches both edges. Nothing else about the package's
   sizing changes. */
.wpj-hero.wpj-peaks .wpj-scene {
	inset: auto;
	left: 50%;
	bottom: 0;
	width: calc(100% / var(--wpj-fit, 1));
	height: calc(100% / var(--wpj-fit, 1));
	transform: translateX(-50%) scale(var(--wpj-fit, 1));
	transform-origin: 50% 100%;
}

.wpj-hero.wpj-peaks [data-layer=teide] .wpj-fit {
	--w: clamp(185vh, calc(100vw / var(--wpj-fit, 1)), 205vh);
}

.wpj-hero.wpj-peaks [data-layer=gigantes] .wpj-fit {
	--w: min(127vh, calc(78vw / var(--wpj-fit, 1)));
}

.wpj-hero.wpj-peaks [data-layer=anaga] .wpj-fit,
.wpj-hero.wpj-peaks [data-layer=bridge] .wpj-fit {
	--w: min(122vh, calc(85vw / var(--wpj-fit, 1)));
}

.wpj-hero.wpj-peaks [data-layer=clouds] .wpj-fit {
	--w: max(calc(100vw / var(--wpj-fit, 1)), 125vh);
}

@media (max-aspect-ratio: 6/5) {
	.wpj-hero.wpj-peaks [data-layer=gigantes] .wpj-fit {
		--w: min(127vh, calc(105vw / var(--wpj-fit, 1)));
	}

	.wpj-hero.wpj-peaks [data-layer=anaga] .wpj-fit,
	.wpj-hero.wpj-peaks [data-layer=bridge] .wpj-fit {
		--w: min(122vh, calc(105vw / var(--wpj-fit, 1)));
	}
}

@media (max-aspect-ratio: 3/4) {
	.wpj-hero.wpj-peaks [data-layer=gigantes] .wpj-fit {
		--w: 125vh;
	}

	.wpj-hero.wpj-peaks [data-layer=anaga] .wpj-fit,
	.wpj-hero.wpj-peaks [data-layer=bridge] .wpj-fit {
		--w: 110vh;
	}
}

/* Option: the flowers behind the Anaga ridge, looking out above its slope between the Los Gigantes
   cliffs and Roque de Taborno (section attribute data-flowers="ridge"). The default is the
   package's own place, in front of the cliffs. Their box is Anaga's own box, so these shares keep
   them on the ridge at every window size. */
.wpj-hero.wpj-peaks[data-flowers="ridge"] [data-layer=bridge] .wpj-fit img {
	left: 20.3%;
	bottom: 16.5%;
	width: 47.4%;
}

/* Portrait tablets (601 to 1024px wide, at most a little wider than tall): the flowers stand where they
   stand on a computer, in front of the Los Gigantes cliffs at the bottom left, all of them in sight
   (the package keeps them locked to Anaga's box, which pushes them off the left edge here), and the
   cliffs come a little further into the picture. */
@media (min-width: 601px) and (max-width: 1024px) and (max-aspect-ratio: 6/5) {
	.wpj-hero.wpj-peaks [data-layer=gigantes] .wpj-fit {
		left: calc(var(--w) * -0.36);
	}

	.wpj-hero.wpj-peaks [data-layer=bridge] .wpj-fit {
		--w: calc(70vw / var(--wpj-fit, 1));
		--b: 0px;
		left: 1%;
		right: auto;
	}

	.wpj-hero.wpj-peaks [data-layer=bridge] .wpj-fit img {
		inset: auto;
		left: 0;
		bottom: -2%;
		width: 100%;
		height: auto;
	}
}

/* ---- the cue in the middle of the still empty sky: "scroll", with a dot running down a line */
.wpj-peaks .wpj-c-cue {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 0.6s ease;
	pointer-events: none;
	color: var(--p-ivory);
	text-shadow: 0 1px 2px rgba(10, 18, 34, 0.7), 0 0 18px rgba(10, 18, 34, 0.55);
}

.wpj-peaks .wpj-c-cue.wpj-c-cue-on {
	opacity: 1;
}

.wpj-peaks .wpj-c-cue-t {
	padding-left: 0.34em;                 /* the tracking after the last letter, so the word sits centred */
	font-family: var(--p-body);
	font-weight: 700;
	font-size: clamp(16px, 1.45vw, 21px);
	letter-spacing: 0.34em;
	line-height: 1;
	text-transform: uppercase;
}

.wpj-peaks .wpj-c-cue-line {
	position: relative;
	display: block;
	width: 3px;
	height: 84px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(244, 241, 234, 0.5);
	box-shadow: 0 0 10px rgba(10, 18, 34, 0.35);
}

.wpj-peaks .wpj-c-cue-line::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 28px;
	border-radius: 2px;
	background: var(--p-sun);
	animation: wpjPeaksCue 1.7s ease-in-out infinite;
}

@keyframes wpjPeaksCue {
	0% { transform: translateY(-30px); }
	100% { transform: translateY(86px); }
}

@media (prefers-reduced-motion: reduce) {
	.wpj-peaks .wpj-c-cue-line::after {
		animation: none;
	}
}

/* ---- the copy */
.wpj-hero.wpj-peaks .wpj-copy {
	top: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(20px, 5vw, 90px);
	align-items: center;
	padding: clamp(18px, 3vh, 40px) var(--p-pad) clamp(56px, 9.5vw, 170px);   /* the foot belongs to the wave of the next section */
	text-align: left;
}

.wpj-peaks .wpj-c-lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(10px, 1.8vh, 18px);
	max-width: 640px;
}

body .wpj-page .wpj-peaks .wpj-peaks-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--p-sun);
	font-family: var(--p-body);
	font-weight: 700;
	font-size: clamp(12px, 1.1vw, 16px);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	opacity: 1;
}

.wpj-peaks .wpj-peaks-kicker::before {
	content: "";
	flex: none;
	width: clamp(28px, 4vw, 56px);
	height: 3px;
	background: currentColor;
}

body .wpj-page .wpj-peaks .wpj-peaks-h {
	margin: 0;
	font-family: var(--p-display);
	font-weight: 400;
	font-size: clamp(38px, min(6.2vw, 11.5vh), 104px);
	line-height: 0.95;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--p-ivory);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
	text-wrap: balance;
}

/* the two sentences of the headline share one place: the first dissolves letter by letter (the last
   letter first), the second rises into it; the last word of each grows a little, as it used to */
body .wpj-page .wpj-peaks .wpj-peaks-h {
	display: grid;
	padding-bottom: 0.1em;
	line-height: 1.06;
}

.wpj-peaks .wpj-c-ha,
.wpj-peaks .wpj-c-hb {
	grid-area: 1 / 1;
}

.wpj-peaks .wpj-c-w {
	display: inline-block;
	white-space: nowrap;
}

.wpj-peaks .wpj-c-ch {
	display: inline-block;
	transition: filter 1s ease, opacity 1s ease;
	transition-delay: calc(var(--i) * 45ms);
}

.wpj-peaks .wpj-c-swapped .wpj-c-ch {
	filter: blur(12px);
	opacity: 0;
}

.wpj-peaks .wpj-c-hb {
	color: var(--p-sun);
	opacity: 0;
	transform: translateY(38%);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.wpj-peaks .wpj-c-swapped .wpj-c-hb {
	opacity: 1;
	transform: none;
	transition: opacity 0.9s ease 0.95s, transform 1.2s cubic-bezier(0.16, 0.84, 0.24, 1) 0.95s;
}

/* the last word grows a touch from its bottom-left corner: upwards into the air between the lines
   and to the right, never down onto the paragraph under the headline */
.wpj-peaks .wpj-c-pop {
	transform-origin: 0% 92%;
	transition: transform 1.1s cubic-bezier(0.2, 1.2, 0.3, 1);
}

.wpj-peaks .wpj-c-in .wpj-c-ha .wpj-c-pop {
	transform: scale(1.07);
	transition-delay: 0.7s;
}

.wpj-peaks .wpj-c-swapped .wpj-c-hb .wpj-c-pop {
	transform: scale(1.07);
	transition-delay: 1.9s;
}

.wpj-peaks .wpj-c-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* the closing words and the button travel together (peaks.js) */
.wpj-peaks .wpj-c-close {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(10px, 1.8vh, 18px);
}

body .wpj-page .wpj-peaks .wpj-peaks-lead,
body .wpj-page .wpj-peaks .wpj-peaks-end {
	max-width: 34em;
	margin: 0;
	font-family: var(--p-body);
	font-weight: 500;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.55;
	color: #E9E6DE;
	opacity: 1;
}

.wpj-peaks .wpj-c-hand {
	font-family: var(--p-hand);
	font-weight: 700;
	font-size: 1.34em;
	line-height: 0.8;
	color: var(--p-sun);
	white-space: nowrap;
}

/* the button. Its label (.wpj-c-pill) and its arrow (.wpj-c-chip) are separate parts (peaks.js).
   The owner picked look b: a quiet text link with a sun rule, like "Read our story" in the footer. */
body .wpj-page .wpj-peaks .wpj-peaks-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin-top: 6px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--p-ivory);
	font-family: var(--p-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
}

.wpj-peaks .wpj-c-pill,
.wpj-peaks .wpj-c-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.42s cubic-bezier(0.3, 0.86, 0.28, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* b: a quiet text link with a sun rule under it, like "Read our story" in the footer */
body .wpj-page .wpj-peaks-btn-b .wpj-peaks-btn {
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--p-sun);
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

body .wpj-page .wpj-peaks-btn-b .wpj-c-chip {
	color: var(--p-sun);
	font-size: 20px;
}

body .wpj-page .wpj-peaks-btn-b .wpj-peaks-btn:hover .wpj-c-chip,
body .wpj-page .wpj-peaks-btn-b .wpj-peaks-btn:focus-visible .wpj-c-chip {
	transform: translateX(8px);
}

/* everything in the copy waits for its moment in the scroll */
.wpj-peaks .wpj-c-rv {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body .wpj-page .wpj-peaks .wpj-c-rv:not(.wpj-c-in) {
	opacity: 0;
}

.wpj-peaks .wpj-c-rv.wpj-c-in {
	opacity: 1;
	transform: none;
}

body .wpj-page .wpj-peaks .wpj-c-rv.wpj-c-out {
	opacity: 0;
	transform: translateY(-18px);
	pointer-events: none;
}

/* ---- the route, sea to sky */
.wpj-peaks .wpj-c-route {
	position: relative;
	height: min(56vh, 560px);
	min-height: 320px;
	margin: 30px 0 34px;
}

.wpj-peaks .wpj-c-route > svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 70px;
	height: 100%;
	overflow: visible;
}

.wpj-peaks .wpj-c-route path {
	fill: none;
	stroke: var(--p-ivory);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: 1;             /* pathLength=1: no non-scaling-stroke here, it would lay the dashes out in screen pixels */
	stroke-dashoffset: 1;
	filter: blur(0.8px) drop-shadow(0 0 10px rgba(255, 204, 0, 0.7)) drop-shadow(0 0 26px rgba(255, 204, 0, 0.35));
}

.wpj-peaks .wpj-c-route path.wpj-c-ghost {
	stroke: rgba(244, 241, 234, 0.24);
	stroke-width: 2;
	stroke-dasharray: 2 10;
	stroke-dashoffset: 0;
	filter: none;
}

.wpj-peaks .wpj-c-ends {
	position: absolute;
	left: 0;
	width: 70px;
	font-family: var(--p-hand);
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	text-align: center;
	color: var(--p-ivory);
	opacity: 0.85;
}

body .wpj-page .wpj-peaks .wpj-c-route .wpj-peaks-pt {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 18px;
	width: auto;
	min-height: 22px;
	padding: 0 0 0 84px;
	transform: translateY(50%);
	transition: none;
}

.wpj-peaks .wpj-c-route .wpj-peaks-pt::before {
	content: "";
	position: absolute;
	inset: auto;
	left: calc(var(--wpj-c-x, 35px) - 11px);   /* --wpj-c-x: where the curve is at this height (peaks.js) */
	top: 50%;
	display: block;
	width: 22px;
	height: 22px;
	margin: -11px 0 0;
	border: 3px solid var(--p-ivory);
	border-radius: 50%;
	background: rgb(var(--p-basalt));
	opacity: 0.35;
	transform: scale(0.4);
	transition: transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.3s, background 0.3s, border-color 0.3s;
}

body .wpj-page .wpj-peaks .wpj-c-route .wpj-peaks-pt.wpj-c-on::before {
	border-color: var(--p-sun);
	background: var(--p-sun);
	opacity: 1;
	transform: scale(1);
}

body .wpj-page .wpj-peaks .wpj-c-pt-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: auto;
	padding: 0;
	opacity: 0;
	transform: translateX(18px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body .wpj-page .wpj-peaks .wpj-c-on .wpj-c-pt-body {
	opacity: 1;
	transform: none;
}

body .wpj-page .wpj-peaks .wpj-peaks-pt-k {
	margin: 0;
	font-family: var(--p-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--p-sun);
}

body .wpj-page .wpj-peaks .wpj-peaks-pt-t {
	max-width: 16em;
	margin: 0;
	font-family: var(--p-head);
	font-weight: 800;
	font-size: clamp(18px, 1.9vw, 28px);
	line-height: 1.12;
	color: var(--p-ivory);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* ---- portrait tablets (601 to 860px): one thing at a time (headline and lead, then the route, then
   the close). Phones have their own layout below. */
@media (min-width: 601px) and (max-width: 860px) {
	.wpj-hero.wpj-peaks .wpj-copy {
		display: block;
		padding-top: clamp(18px, 4vh, 40px);
	}

	.wpj-hero.wpj-peaks .wpj-c-veil {
		background:
			linear-gradient(0deg, var(--page) 0%, rgba(10, 91, 140, 0.55) 9%, rgba(10, 91, 140, 0) 26%),
			linear-gradient(180deg, rgba(var(--p-basalt), 0.86) 0%, rgba(var(--p-basalt), 0.7) 55%, rgba(var(--p-basalt), 0.5) 100%);
	}

	body .wpj-page .wpj-peaks .wpj-peaks-h {
		font-size: clamp(34px, 10.5vw, 60px);
	}

	.wpj-peaks .wpj-c-route {
		position: absolute;
		left: var(--p-pad);
		right: var(--p-pad);
		top: 50%;
		height: min(54vh, 430px);
		min-height: 0;
		margin: 0;
		transform: translateY(-44%);
	}

	body .wpj-page .wpj-peaks .wpj-peaks-pt-t {
		font-size: 18px;
	}

	/* what has left makes room for what comes next */
	body .wpj-page .wpj-peaks .wpj-c-lead .wpj-c-out {
		position: absolute;
	}
}

/* ---- phones (class wpj-peaks-m, set by peaks.js up to 600px wide)
   Only Teide. It rises and shows its name while the stage is pinned; then the words scroll over it
   as ordinary blocks: first the four stops (big outlined words that fill with sun yellow), then the
   kicker and the headline that trades its sentences, the intro and the close. The copy follows the
   stage inside the section (peaks.js moves it there), so the section is as tall as the copy. */
body .wpj-page .wpj-hero.wpj-peaks.wpj-peaks-m,
body .wpj-page .wpj-hero.wpj-peaks.wpj-peaks-m.wpj-peaks-welded {
	height: auto;
}

.wpj-hero.wpj-peaks.wpj-peaks-m [data-layer=clouds],
.wpj-hero.wpj-peaks.wpj-peaks-m [data-layer=anaga],
.wpj-hero.wpj-peaks.wpj-peaks-m [data-layer=gigantes],
.wpj-hero.wpj-peaks.wpj-peaks-m [data-layer=bridge] {
	visibility: hidden;              /* not display: none, the package measures every layer's width */
}

/* Teide stays in sight behind the words, a little darker */
.wpj-hero.wpj-peaks.wpj-peaks-m .wpj-c-veil {
	background: linear-gradient(180deg, rgba(var(--p-basalt), 0.62) 0%, rgba(var(--p-basalt), 0.42) 45%, rgba(var(--p-basalt), 0.7) 100%);
}

/* the copy starts one screen up (over the pinned stage) and leaves the sky to Teide first: the
   hand-over from the video, then Teide rising with its name, then a short hold */
.wpj-hero.wpj-peaks.wpj-peaks-m .wpj-copy {
	position: relative;
	inset: auto;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	max-width: 620px;
	margin: calc(var(--wpj-top, 0px) - 100vh) 0 0;
	margin-top: calc(var(--wpj-top, 0px) - 100svh);
	padding: calc(var(--wpj-weld-h, 0px) + 190vh) var(--p-pad) 30vh;
	padding-top: calc(var(--wpj-weld-h, 0px) + 190svh);
	text-align: left;
	pointer-events: none;
}

.wpj-hero.wpj-peaks.wpj-peaks-m .wpj-copy > *,
.wpj-hero.wpj-peaks.wpj-peaks-m .wpj-copy a {
	pointer-events: auto;
}

.wpj-peaks.wpj-peaks-m .wpj-c-lead {
	display: contents;
}

.wpj-peaks.wpj-peaks-m .wpj-c-route { order: 1; }
body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-kicker { order: 2; margin: 26vh 0 16px; }
body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-h { order: 3; }
body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-lead { order: 4; margin-top: 26px; }
.wpj-peaks.wpj-peaks-m .wpj-c-close { order: 5; }

/* how a block comes in: from the left */
body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-m-rv {
	opacity: 0;
	transform: translateX(-56px);
	transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-m-rv.wpj-c-in {
	opacity: 1;
	transform: none;
}

/* the headline: big, its letters come in one after another; higher up the screen the first
   sentence dissolves letter by letter (the last one first) and the second rises in its place */
body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-h {
	font-size: clamp(48px, 15vw, 96px);
	line-height: 0.98;
}

.wpj-peaks.wpj-peaks-m .wpj-peaks-h .wpj-c-ch {
	opacity: 0;
	transform: translateY(0.35em);
	filter: none;
	transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: calc(var(--j, 0) * 38ms);
}

.wpj-peaks.wpj-peaks-m .wpj-peaks-h.wpj-c-in .wpj-c-ch {
	opacity: 1;
	transform: none;
}

.wpj-peaks.wpj-peaks-m .wpj-peaks-h.wpj-c-in.wpj-c-swapped .wpj-c-ch {
	opacity: 0;
	filter: blur(12px);
	transition: filter 1s ease, opacity 1s ease;
	transition-delay: calc(var(--i) * 45ms);
}

body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-lead,
body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-end {
	max-width: 30em;
	font-size: clamp(17px, 4.6vw, 20px);
	line-height: 1.55;
	color: var(--p-ivory);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* the four stops: the place as a big outlined word (like the titles in the video at the top of the
   page) that fills with sun yellow from the bottom while it crosses the screen and drifts a little
   sideways (--wpj-fill, --wpj-drift from peaks.js); once it is more than half full its sentence
   slides in, and when it is full it glows. Every other stop stands on the right. */
.wpj-peaks.wpj-peaks-m .wpj-c-route {
	position: static;
	display: flex;
	flex-direction: column;
	gap: 18vh;
	height: auto;
	min-height: 0;
	margin: 0;
	opacity: 1;
	transform: none;
}

.wpj-peaks.wpj-peaks-m .wpj-c-route > svg {
	display: none;
}

body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-c-route .wpj-peaks-pt {
	position: static;
	display: block;
	min-height: 0;
	padding: 0;
	transform: none;
}

body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-c-route .wpj-peaks-pt.wpj-m-r {
	text-align: right;
}

.wpj-peaks.wpj-peaks-m .wpj-c-route .wpj-peaks-pt::before {
	display: none;
}

body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-c-pt-body {
	align-items: flex-start;
	gap: 10px;
	opacity: 1;
	transform: none;
}

body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-pt.wpj-m-r .wpj-c-pt-body {
	align-items: flex-end;
}

body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-pt-k {
	display: inline-block;
	font-family: var(--p-display);
	font-weight: 400;
	font-size: clamp(58px, 18.5vw, 110px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	color: transparent;
	-webkit-text-stroke: 1.6px var(--p-sun);
	background: linear-gradient(0deg, var(--p-sun) 0, var(--p-sun) var(--wpj-fill, 0%), rgba(255, 204, 0, 0) var(--wpj-fill, 0%));
	-webkit-background-clip: text;
	background-clip: text;
	transform: translateX(var(--wpj-drift, 0px));
	transition: filter 0.6s ease;
	will-change: transform;
}

body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-pt.wpj-c-full .wpj-peaks-pt-k {
	filter: drop-shadow(0 0 16px rgba(255, 204, 0, 0.45));
}

body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-pt-t {
	max-width: 15em;
	font-size: clamp(20px, 5.6vw, 30px);
	line-height: 1.15;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body .wpj-page .wpj-peaks.wpj-peaks-m .wpj-peaks-pt.wpj-c-said .wpj-peaks-pt-t {
	opacity: 1;
	transform: none;
}

/* the close: the words and the link */
.wpj-peaks.wpj-peaks-m .wpj-c-close {
	gap: 22px;
	margin-top: 26px;
}

body .wpj-page .wpj-peaks.wpj-peaks-m.wpj-peaks-btn-b .wpj-peaks-btn {
	gap: 10px;
	font-size: 13px;
	letter-spacing: 0.14em;
	white-space: nowrap;
}

/* no motion: the last frame, everything readable at once */
@media (prefers-reduced-motion: reduce) {
	.wpj-hero.wpj-peaks {
		height: auto;
		min-height: 100vh;
	}

	.wpj-peaks .wpj-c-rv,
	.wpj-peaks .wpj-c-pt-body,
	.wpj-peaks .wpj-c-route .wpj-peaks-pt::before {
		transition: none;
	}
}

/* ---- the weld: the hero video fills the screen exactly and lies on top of the peaks stage, which is
   pulled up behind it. During the flip the video stays in place and dissolves into the stage's sky. */
body .wpj-page .wpj-hero-stack.wpj-weld {
	position: relative;
	z-index: 3;
	height: calc(100vh - var(--wpj-weld-top, 84px));
	height: calc(100svh - var(--wpj-weld-top, 84px));
	min-height: 620px;
	transition: none;
	will-change: transform, opacity;
}

/* Desktop: the hero's inner boxes had the old fixed height (62.7cqw) and sat against the hero's
   bottom, so a shorter hero pushed its texts up under the header. They follow the hero's height
   instead and keep the texts exactly where they were, measured from the top; the large bottom
   padding was room for the old mountain photos that overlapped the hero.
   Tablets and phones are left alone: there the hero grows to the screen's height and the texts
   stay against its bottom, as they were designed. */
@media (min-width: 1025px) {
	body .wpj-page .wpj-hero-stack.wpj-weld .wpj-hero-front,
	body .wpj-page .wpj-hero-stack.wpj-weld .wpj-hero-inner {
		height: 100%;
		min-height: 0;
	}

	body .wpj-page .wpj-hero-stack.wpj-weld .wpj-hero-inner {
		padding-bottom: 24px;
	}
}

body .wpj-page .wpj-hero.wpj-peaks.wpj-peaks-welded {
	height: calc(620vh + var(--wpj-weld-h, 0px));
	margin-top: calc(-1 * var(--wpj-weld-h, 0px));
}

/* ---- the blue section used to hang 28.5cqw lower, to leave room for the copy that lay on the old
   mountain photos. Now it follows the stage directly; its own wave and glow draw over the stage's foot. */
body .wpj-page .wpj-peaks + .wpj-section-tint {
	margin-top: 0;
}

/* the site's back-to-top button would sit on the words while the stage is pinned (peaks.js) */
html.wpj-peaks-pinned #ast-scroll-top {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}