/* ==========================================================================
   Front-page sections: hero, formula, pricing, groups, voucher, FAQ, booking
   ========================================================================== */

/* Scroll reveal (only below-the-fold elements get .is-pending, set by JS) */
@media screen and (prefers-reduced-motion: no-preference) {
	[data-reveal] {
		transition:
			opacity var(--dur-slow) var(--ease-out),
			transform var(--dur-slow) var(--ease-out);
		transition-delay: calc(var(--i, 0) * 90ms);
	}

	[data-reveal].is-pending {
		opacity: 0;
		transform: translateY(1.5rem);
	}
}

/* Hero --------------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: 100svh;
	overflow: hidden;
	background: var(--coal-950);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--coal-950) 5%, rgb(13 16 19 / 0.86) 55%, rgb(13 16 19 / 0.6) 100%);
}

@media (prefers-reduced-motion: no-preference) {
	.hero__img {
		animation: hero-settle 1.6s var(--ease-out) both;
	}
}

@keyframes hero-settle {
	from {
		transform: scale(1.08);
	}
}

.hero__content {
	align-self: end;
	width: 100%;
	max-width: 90rem;
	margin-inline: auto;
	padding: calc(var(--header-h) + 4rem) var(--gutter) 2.5rem;
}

.hero .eyebrow {
	letter-spacing: 0.12em;
}

.hero__title {
	font: 400 var(--text-hero) / 0.86 var(--font-display);
	text-transform: uppercase;
}

.hero__line {
	display: block;
}

.hero__line--accent {
	color: var(--orange);
}

.hero__lead {
	max-width: 34rem;
	margin: 1.5rem 0 2rem;
	font-size: var(--text-lg);
	line-height: 1.55;
	color: var(--cream);
	text-wrap: pretty;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.hero__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 42rem;
	margin-top: 2.75rem;
	border-top: 1px solid var(--line-strong);
}

.fact {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 0.4rem;
	padding: 1.1rem 0.75rem 0 0;
}

.fact + .fact {
	padding-left: 0.9rem;
	border-left: 1px solid var(--line);
}

.fact__value {
	font: 400 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem) / 1 var(--font-display);
	color: var(--cream);
	white-space: nowrap;
}

.fact__value small {
	font: 600 0.875rem / 1 var(--font-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--orange);
}

.fact__label {
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--cream-muted);
}

@media (min-width: 1024px) {
	.hero {
		min-height: min(100svh, 64rem);
	}

	.hero::before {
		content: "";
		position: absolute;
		inset: 0 0 0 46%;
		z-index: -1;
		background: var(--orange);
		clip-path: polygon(14% 0, calc(14% + 7px) 0, 7px 100%, 0 100%);
		transform: translateX(-26px);
	}

	.hero__media {
		left: 46%;
		clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
	}

	.hero__media::after {
		background:
			linear-gradient(to right, rgb(13 16 19 / 0.55), transparent 45%),
			linear-gradient(to top, rgb(13 16 19 / 0.55), transparent 35%);
	}

	.hero__content {
		align-self: center;
		padding-block: calc(var(--header-h) + 3rem) 3rem;
	}

	.hero__copy {
		max-width: 46%;
	}

	.hero__lead {
		color: var(--cream-muted);
	}
}

/* Formula: the guided convoy ---------------------------------------------- */

.formula {
	background: var(--coal-900) var(--grain);
}

.convoy {
	margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.convoy__road {
	position: relative;
}

.convoy__track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1.95rem;
	width: 3px;
	overflow: hidden;
}

.convoy__track::before {
	content: "";
	position: absolute;
	inset: 0 0 -28px;
	background: repeating-linear-gradient(to bottom, var(--orange) 0 14px, transparent 14px 28px);
}

.convoy__list {
	position: relative;
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.convoy__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1.25rem;
	align-items: center;
}

.convoy__icon {
	grid-row: span 2;
	width: 4rem;
	height: 4rem;
	padding: 0.85rem;
	color: var(--cream);
	background: var(--coal-800);
	border: 1px solid var(--line-strong);
	border-radius: 50%;
}

.convoy__item--lead .convoy__icon {
	color: var(--coal-950);
	background: var(--orange);
	border-color: var(--orange);
	box-shadow: 0 0 0 6px rgb(232 98 26 / 0.18);
}

.convoy__label {
	align-self: end;
	font: 600 1.125rem / 1.2 var(--font-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.convoy__item--lead .convoy__label {
	color: var(--orange);
}

.convoy__meta {
	align-self: start;
	font-size: 0.875rem;
	color: var(--cream-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.convoy.is-moving .convoy__track::before {
		animation: convoy-up 1.1s linear 4;
	}
}

@keyframes convoy-up {
	to {
		transform: translateY(-28px);
	}
}

@media (min-width: 768px) {
	.convoy__track {
		top: 2.5rem;
		bottom: auto;
		left: 12.5%;
		right: 12.5%;
		width: auto;
		height: 3px;
	}

	.convoy__track::before {
		inset: 0 -28px 0 0;
		background: repeating-linear-gradient(to right, var(--orange) 0 14px, transparent 14px 28px);
	}

	@media (prefers-reduced-motion: no-preference) {
		.convoy.is-moving .convoy__track::before {
			animation-name: convoy-left;
		}
	}

	.convoy__list {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.convoy__item {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: 0.3rem;
		text-align: center;
	}

	.convoy__icon {
		grid-row: auto;
		width: 5rem;
		height: 5rem;
		margin-bottom: 0.6rem;
		padding: 1.1rem;
	}

	/* The column drives left, so the quads face the guide in front of them. */
	.convoy__icon {
		transform: scaleX(-1);
	}
}

@keyframes convoy-left {
	to {
		transform: translateX(-28px);
	}
}

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2.5rem 1.75rem;
	margin: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.step {
	position: relative;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-strong);
}

.step::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 3rem;
	height: 3px;
	background: var(--orange);
}

.step__num {
	display: block;
	margin-bottom: 0.9rem;
	font: 400 3.75rem / 1 var(--font-display);
	color: transparent;
	-webkit-text-stroke: 1.5px var(--orange);
}

.step__title {
	margin-bottom: 0.5rem;
	font: 600 1.375rem / 1.2 var(--font-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.step__text {
	color: var(--cream-muted);
}

/* Pricing ------------------------------------------------------------------ */

.pricing {
	overflow: hidden;
	background: var(--coal-850);
}

.pricing::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/topo.svg") center / 900px auto repeat;
	opacity: 0.06;
	pointer-events: none;
}

.section-note {
	margin-top: 1.25rem;
	font: 600 0.9375rem / 1.3 var(--font-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cream-muted);
}

.pricing__grid {
	position: relative;
	display: grid;
	gap: 1.25rem;
	margin-top: 3rem;
}

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--coal-800);
	border: 1px solid var(--line);
}

.plan__cta {
	margin-top: auto;
}

.plan__duration {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font: 600 0.9375rem / 1 var(--font-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cream-muted);
}

.plan__duration .icon {
	color: var(--orange);
}

.plan__name {
	font: 400 var(--text-h3) / 1 var(--font-display);
	text-transform: uppercase;
}

.plan__desc {
	color: var(--cream-muted);
}

.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.5rem;
	font-variant-numeric: tabular-nums;
}

.price__from,
.price__unit {
	font: 600 1rem / 1 var(--font-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cream-muted);
}

.price__amount {
	font: 400 clamp(3rem, 2.4rem + 2.4vw, 4.5rem) / 0.9 var(--font-display);
	color: var(--cream);
}

.price--featured .price__amount {
	font-size: clamp(3.5rem, 2.5rem + 3.6vw, 6rem);
	color: var(--orange);
}

.checklist {
	display: grid;
	gap: 0.65rem;
	margin: 0.25rem 0 1rem;
	padding: 0;
	list-style: none;
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
}

.checklist .icon {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2em;
	color: var(--orange);
	stroke-width: 3;
}

.plan--featured {
	display: grid;
	padding: 0;
	background: var(--coal-900);
	border-color: rgb(232 98 26 / 0.5);
}

.plan--featured::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	height: 8px;
	background: var(--hazard), var(--coal-950);
}

.plan__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.plan__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.plan__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.plan__badge {
	align-self: flex-start;
	padding: 0.4rem 1.2rem 0.4rem 0.75rem;
	font: 600 0.875rem / 1 var(--font-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--coal-950);
	background: var(--orange);
	clip-path: polygon(0 0, 100% 0, calc(100% - 0.5rem) 100%, 0 100%);
}

@media (min-width: 900px) {
	.pricing__grid {
		grid-template-columns: 5fr 8fr;
	}
}

@media (min-width: 1180px) {
	.plan--featured {
		grid-template-columns: 5fr 6fr;
	}

	.plan__media {
		aspect-ratio: auto;
	}
}

.pricing__extra {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-top: 1.25rem;
	padding: 1rem 1.5rem;
	border: 1px dashed var(--line-strong);
}

.pricing__extra-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.pricing__extra-item .icon {
	color: var(--orange);
}

.pricing__extra strong {
	color: var(--cream);
	white-space: nowrap;
}

/* Groups ------------------------------------------------------------------- */

.groups {
	display: grid;
	padding: 0;
	background: var(--coal-900) var(--grain);
}

.groups__media {
	position: relative;
	min-height: 17rem;
}

.groups__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.groups__content {
	width: 100%;
	max-width: 46rem;
	padding: var(--section-y) var(--gutter);
}

.groups__offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 2rem 0;
	padding-block: 1.25rem;
	border-block: 1px solid var(--line-strong);
}

.groups__offer .price__amount {
	color: var(--orange);
}

.groups__offer-note {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--cream-muted);
}

.checklist--columns {
	margin-bottom: 2.25rem;
}

@media (min-width: 560px) {
	.checklist--columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.groups__media {
		clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
	}

	.groups__content {
		align-self: center;
		padding-left: clamp(1.5rem, 3vw, 4rem);
	}
}

/* Voucher ------------------------------------------------------------------ */

.voucher {
	overflow: hidden;
	background: var(--coal-850);
}

.voucher__grid {
	display: grid;
	align-items: center;
	gap: 3.5rem;
}

.voucher__price {
	margin-top: 1.25rem;
	color: var(--cream-muted);
}

.voucher__price strong {
	color: var(--orange);
	white-space: nowrap;
}

.voucher__copy .btn {
	margin-top: 2rem;
}

.voucher__visual {
	position: relative;
	padding-block: 1.5rem;
}

.voucher__visual::before {
	content: "";
	position: absolute;
	inset: 6% -40% 6% 20%;
	background: var(--orange);
	transform: skewX(-14deg);
}

.voucher__visual img {
	position: relative;
	width: 100%;
	box-shadow:
		0 32px 60px -24px rgb(0 0 0 / 0.75),
		0 0 0 1px rgb(246 241 231 / 0.08);
	transform: rotate(-3deg);
	transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
	.voucher__visual:hover img {
		transform: rotate(-1deg) translateY(-6px);
	}
}

@media (min-width: 960px) {
	.voucher__grid {
		grid-template-columns: 5fr 6fr;
	}
}

/* FAQ ---------------------------------------------------------------------- */

.faq {
	background: var(--coal-900) var(--grain);
}

.faq__grid {
	display: grid;
	gap: 2.5rem;
}

.faq__list {
	border-top: 1px solid var(--line-strong);
}

.faq__item {
	border-bottom: 1px solid var(--line-strong);
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3rem;
	padding-block: 1.3rem;
	font: 600 clamp(1.125rem, 1rem + 0.5vw, 1.375rem) / 1.3 var(--font-label);
	letter-spacing: 0.02em;
	list-style: none;
	cursor: pointer;
	transition: color var(--dur-fast);
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__chevron {
	color: var(--orange);
	transition: transform var(--dur) var(--ease-out);
}

.faq__item[open] .faq__chevron {
	transform: rotate(180deg);
}

@media (hover: hover) {
	.faq__question:hover {
		color: var(--orange-hot);
	}
}

.faq__answer {
	padding: 0 3rem 1.5rem 0;
	color: var(--cream-muted);
}

@supports selector(::details-content) {
	@media (prefers-reduced-motion: no-preference) {
		.faq__list {
			interpolate-size: allow-keywords;
		}

		.faq__item::details-content {
			block-size: 0;
			overflow: hidden;
			transition:
				block-size var(--dur) var(--ease-out),
				content-visibility var(--dur) allow-discrete;
		}

		.faq__item[open]::details-content {
			block-size: auto;
		}
	}
}

@media (min-width: 960px) {
	.faq__grid {
		grid-template-columns: 4fr 7fr;
		gap: 4rem;
	}

	.faq__intro {
		position: sticky;
		top: calc(var(--header-h) + 2rem);
		align-self: start;
	}
}

/* Booking ------------------------------------------------------------------ */

.booking {
	background: var(--coal-850);
}

.booking__grid {
	display: grid;
	gap: 3rem;
}

.contact-list {
	display: grid;
	gap: 0.75rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.contact-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	text-decoration: none;
	background: var(--coal-900);
	border: 1px solid var(--line);
	transition: border-color var(--dur-fast);
}

a.contact-item:hover {
	border-color: var(--orange);
}

.contact-item__icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.15rem;
	color: var(--orange);
}

.contact-item small {
	display: block;
	margin-bottom: 0.2rem;
	font: 600 0.8125rem / 1.2 var(--font-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cream-muted);
}

.contact-item em {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--cream-muted);
}

.booking__reviews {
	margin-top: 1rem;
}

.contact-item--primary > span {
	font: 400 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) / 1.1 var(--font-display);
	letter-spacing: 0.02em;
}

.booking__panel {
	position: relative;
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	background: var(--coal-900);
	border: 1px solid var(--line-strong);
}

.booking__panel::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto;
	height: 6px;
	background: var(--hazard), var(--coal-950);
}

@media (min-width: 1024px) {
	.booking__grid {
		grid-template-columns: 5fr 7fr;
		align-items: start;
		gap: 4.5rem;
	}
}

.notice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid;
}

.notice__icon {
	width: 1.5rem;
	height: 1.5rem;
	stroke-width: 3;
}

.notice:focus {
	outline: none;
}

.notice--success {
	color: var(--cream);
	background: rgb(111 207 138 / 0.1);
	border-color: var(--success);
}

.notice--success .notice__icon {
	color: var(--success);
}

.notice--error {
	color: var(--cream);
	background: rgb(255 142 112 / 0.1);
	border-color: var(--error);
}

.notice--error .notice__icon {
	color: var(--error);
}

/* Form */
.form-group {
	min-width: 0;
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
}

.form-group__legend {
	margin-bottom: 1rem;
	padding: 0;
	font: 600 0.875rem / 1.2 var(--font-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange);
}

.form-grid {
	display: grid;
	gap: 1rem;
}

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

	.field--full {
		grid-column: 1 / -1;
	}
}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.field label {
	font-size: var(--text-sm);
	font-weight: 600;
}

.req {
	color: var(--orange);
}

.field__optional {
	font-weight: 400;
	color: var(--cream-muted);
}

.field :is(input, select, textarea) {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	font: 400 1rem / 1.4 var(--font-body);
	color: var(--cream);
	background: var(--coal-850);
	border: 1px solid var(--coal-600);
	border-radius: var(--radius);
	color-scheme: dark;
	transition:
		border-color var(--dur-fast),
		box-shadow var(--dur-fast);
}

.field textarea {
	min-height: 6rem;
	resize: vertical;
}

.field select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23e8621a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.25rem;
	appearance: none;
}

.field :is(input, select, textarea)::placeholder {
	color: rgb(191 185 173 / 0.7);
}

.field :is(input, select, textarea):focus {
	border-color: var(--orange);
	box-shadow: 0 0 0 3px rgb(232 98 26 / 0.35);
}

.field :is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--error);
}

.field :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}

.field__hint {
	font-size: 0.8125rem;
	color: var(--cream-muted);
}

.field__error {
	font-size: 0.875rem;
	color: var(--error);
}

.field__error:empty {
	display: none;
}

.field--check {
	flex-flow: row wrap;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0.25rem 0 1.5rem;
}

.field--check input {
	flex: none;
	width: 1.375rem;
	min-height: 0;
	height: 1.375rem;
	margin: 0.15rem 0 0;
	padding: 0;
	accent-color: var(--orange);
}

.field--check label {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--cream-muted);
}

.field--check label a {
	color: var(--cream);
}

.field--check .field__error {
	flex-basis: 100%;
}

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

.estimate {
	padding: 0.75rem 1rem;
	font-weight: 600;
	color: var(--cream);
	background: rgb(232 98 26 / 0.12);
	border: 1px dashed rgb(232 98 26 / 0.6);
}

.form-status {
	margin-bottom: 1rem;
	font-size: 0.9375rem;
	color: var(--error);
}

.form-status:empty {
	display: none;
}

.form-foot {
	margin-top: 1rem;
	font-size: 0.8125rem;
	color: var(--cream-muted);
}

/* Mobile booking bar -------------------------------------------------------- */

.mobile-cta {
	position: fixed;
	inset: auto 0 0;
	z-index: var(--z-cta);
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
	background: rgb(13 16 19 / 0.96);
	border-top: 1px solid var(--line);
	transition:
		transform var(--dur) var(--ease-out),
		visibility 0s linear;
}

.mobile-cta .btn {
	flex: 1;
	padding-inline: 1rem;
}

.mobile-cta .btn--primary {
	flex: 2;
}

.mobile-cta.is-hidden {
	visibility: hidden;
	transform: translateY(110%);
	transition:
		transform var(--dur) var(--ease-out),
		visibility 0s linear var(--dur);
}

@media (max-width: 1023px) {
	.sq-front .site-footer {
		padding-bottom: 5rem;
	}
}

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