/*
 * Pillar pages.
 *
 * One vertical rhythm and one type scale for the whole page. The live private tours page
 * mixed five heading sizes, three band paddings and cards that lined up with nothing, so
 * everything here comes off a small set of variables instead.
 */

.tgp {
	--tgp-gutter: clamp(20px, 5vw, 40px);
	--tgp-max: 1160px;
	--tgp-band: clamp(38px, 4.4vw, 64px);
	--tgp-gap: clamp(18px, 2vw, 28px);
	--tgp-head-gap: clamp(20px, 2.2vw, 30px);
	--tgp-pad: clamp(18px, 1.9vw, 26px);

	--tgp-h1: clamp(38px, 6vw, 66px);
	--tgp-h2: clamp(28px, 3.4vw, 40px);
	--tgp-h3: clamp(19px, 1.6vw, 22px);
	--tgp-lead: clamp(17px, 1.5vw, 19px);
	--tgp-body: 16px;
	--tgp-small: 13px;

	--tgp-ink: #14202b;
	--tgp-soft: #5a6672;
	--tgp-line: #e3ded4;
	--tgp-cream: #faf8f4;
	--tgp-navy: #0e1620;
	--tgp-gold: #c8a44a;
	--tgp-gold-dark: #a8862e;
	--tgp-teal: #1a6e8a;
	--tgp-ocean: #2a7f9e;
	--tgp-olive: #6b7a4b;
	--tgp-terracotta: #c66a45;
	--tgp-aubergine: #6b4b6b;

	color: var(--tgp-ink);
	font-family: var(--font-body);
	font-size: var(--tgp-body);
	line-height: 1.65;
}

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

/* Scrolled to from a link in the page, a band stops below the sticky header rather
   than under it. */
.tgp-band { padding-block: var(--tgp-band); scroll-margin-top: 96px; }
.tgp-band--cream { background: var(--tgp-cream); }
.tgp-band--white { background: #fff; }

/* The one band that is not on the alternating rhythm. */
.tgp-band--cta {
	background: var(--tgp-navy);
	color: #fff;
}
.tgp-band--cta .tgp-title,
.tgp-band--cta .tgp-lead { color: #fff; }
.tgp-band--cta .tgp-kicker { color: var(--tgp-gold); }

/* ---------------------------------------------------------------- hero */

.tgp-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 46vh, 500px);
	background: var(--tgp-navy) var(--tgp-hero-image, none) center / cover no-repeat;
	color: #fff;
}
.tgp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Dark enough on the left for the words to hold, and across the bottom so the band
	   below does not start against a bright photograph. */
	background:
		linear-gradient(90deg, rgba(14, 22, 32, 0.86) 0%, rgba(14, 22, 32, 0.6) 45%, rgba(14, 22, 32, 0.25) 100%),
		linear-gradient(180deg, rgba(14, 22, 32, 0.25) 0%, rgba(14, 22, 32, 0.7) 100%);
}
.tgp-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(32px, 3.6vw, 52px);
}
/* The words, not the box, are what is narrow: the box stays the width of every other
   band so the hero's left edge lines up with the page. */
.tgp-hero__title, .tgp-hero__lead { max-width: 20ch; }
.tgp-hero__lead { max-width: 54ch; }
.tgp-hero .tgt-breadcrumbs,
.tgp-hero .tgt-breadcrumbs a {
	color: rgba(255, 255, 255, 0.86);
	text-shadow: 0 1px 2px rgba(14, 22, 32, 0.5);
}
.tgp-hero .tgt-breadcrumbs a:hover { color: #fff; }

.tgp-hero__title {
	margin: 6px 0 16px;
	font-family: var(--font-head);
	font-size: var(--tgp-h1);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: #fff;
}
.tgp-hero__lead {
	margin: 0 0 22px;
	max-width: 58ch;
	font-size: var(--tgp-lead);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}
.tgp-hero__act { margin: 0 0 18px; }
.tgp-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--tgp-small);
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.78);
}
.tgp-hero__trust span[aria-hidden] { color: var(--tgp-gold); }

/* ---------------------------------------------------------------- headings */

.tgp-head { max-width: 60ch; margin: 0 0 var(--tgp-head-gap); }
.tgp-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--tgp-gold-dark);
}
/* The hairline that opens every heading. */
.tgp-kicker::before {
	content: "";
	flex: none;
	width: 34px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}
.tgp-kicker--light { color: var(--tgp-gold); }

/* Centred headings get the rule on both sides. */
.tgp-head--mid { margin-inline: auto; text-align: center; }
.tgp-head--mid .tgp-kicker { justify-content: center; }
.tgp-head--mid .tgp-kicker::after {
	content: "";
	flex: none;
	width: 34px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}
.tgp-head--mid .tgp-lead { margin-inline: auto; }

.tgp-title {
	margin: 0 0 12px;
	font-family: var(--font-head);
	font-size: var(--tgp-h2);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--tgp-ink);
	text-wrap: balance;
}
.tgp-lead {
	margin: 0;
	max-width: 56ch;
	font-size: var(--tgp-lead);
	line-height: 1.62;
	color: var(--tgp-soft);
}
.tgp-note {
	margin: 18px 0 0;
	font-size: var(--tgp-small);
	color: var(--tgp-soft);
}
.tgp-note a, .tgp-lead a { color: var(--tgp-teal); }

/* ---------------------------------------------------------------- buttons and links */

.tgp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border: 0;
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.tgp-btn--gold { background: var(--tgp-gold); color: var(--tgp-navy); }
.tgp-btn--gold:hover { background: var(--tgp-gold-dark); color: #fff; }
.tgp-btn--big { padding: 18px 38px; }
.tgp-btn--wa { background: #25d366; color: #fff; }
.tgp-btn--wa:hover { background: #1db457; color: #fff; }
.tgp-btn--wa svg { width: 17px; height: 17px; }

.tgp-textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tgp-gold-dark);
	transition: gap 0.2s ease;
}
.tgp-textlink:hover { gap: 14px; color: var(--tgp-teal); }

/* ---------------------------------------------------------------- the answer */

.tgp-answer {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
.tgp-answer__main .tgp-head { margin-bottom: 18px; }
.tgp-answer__copy { padding-top: 16px; }
.tgp-answer__copy p { margin: 0 0 14px; max-width: 60ch; }
.tgp-answer__copy p:last-child { margin-bottom: 0; }

/* The fold. A summary styled as a control, so it works with no script at all. */
.tgp-more { margin-top: 4px; }
.tgp-more__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tgp-gold-dark);
}
.tgp-more__btn::-webkit-details-marker { display: none; }
.tgp-more__btn:hover { color: var(--tgp-teal); }
.tgp-more__mark { position: relative; width: 12px; height: 12px; }
.tgp-more__mark::before, .tgp-more__mark::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease;
}
.tgp-more__mark::after { transform: rotate(90deg); }
.tgp-more[open] .tgp-more__mark::after { transform: rotate(0deg); }
.tgp-more__shut, .tgp-more[open] .tgp-more__open { display: none; }
.tgp-more[open] .tgp-more__shut { display: inline; }

.tgp-facts {
	align-self: start;
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--tgp-line);
	border: 1px solid var(--tgp-line);
}
.tgp-fact {
	display: grid;
	grid-template-columns: 26px 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	padding: 14px 18px;
	background: #fff;
}
.tgp-band--white .tgp-fact { background: var(--tgp-cream); }
.tgp-fact__icon { grid-row: 1 / 3; color: var(--tgp-teal); }
.tgp-fact__icon svg { width: 22px; height: 22px; }
.tgp-fact strong { font-family: var(--font-head); font-size: 17px; line-height: 1.3; }
.tgp-fact span:last-child { font-size: var(--tgp-small); color: var(--tgp-soft); }

/* ---------------------------------------------------------------- tour cards */

.tgp-tours { margin-top: 0; }
.tgp-band .tgt-car { margin-top: 0; }
.tgp-tours .tgt-car__track { padding-bottom: 6px; }

.tgp-card {
	background: #fff;
	border: 1px solid var(--tgp-line);
	border-radius: 0;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease;
}
.tgp-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -16px rgba(14, 22, 32, 0.18); }
.tgp-card--gold { --tgp-accent: var(--tgp-gold-dark); }
.tgp-card--teal { --tgp-accent: var(--tgp-teal); }
.tgp-card--ocean { --tgp-accent: var(--tgp-ocean); }
.tgp-card--olive { --tgp-accent: var(--tgp-olive); }
.tgp-card--terracotta { --tgp-accent: var(--tgp-terracotta); }
.tgp-card--aubergine { --tgp-accent: var(--tgp-aubergine); }

.tgp-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.tgp-card__img {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--tgp-navy);
	overflow: hidden;
}
.tgp-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgp-card__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(14, 22, 32, 0.45) 100%);
}
.tgp-card__price {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	padding: 9px 13px;
	background: rgba(255, 255, 255, 0.96);
	text-align: right;
	line-height: 1.2;
}
.tgp-card__from {
	display: block;
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tgp-soft);
}
.tgp-card__amount { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--tgp-ink); }
.tgp-card__amount small { font-size: 11px; font-weight: 400; color: var(--tgp-soft); }

.tgp-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--tgp-pad);
	border-top: 3px solid var(--tgp-accent, var(--tgp-gold));
}
.tgp-card__meta {
	display: block;
	margin-bottom: 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tgp-soft);
}
.tgp-card__title {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-head);
	font-size: var(--tgp-h3);
	font-weight: 700;
	line-height: 1.25;
	color: var(--tgp-ink);
}
.tgp-card__text { display: block; margin-bottom: 16px; color: var(--tgp-soft); }
.tgp-card__cta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tgp-accent, var(--tgp-gold-dark));
	transition: gap 0.2s ease;
}
.tgp-card:hover .tgp-card__cta { gap: 14px; }

/* ---------------------------------------------------------------- which tour */

.tgp-choose, .tgp-places, .tgp-reasons, .tgp-links, .tgp-reviews {
	display: grid;
	gap: var(--tgp-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.tgp-choose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tgp-choose__item { padding: var(--tgp-pad); background: #fff; border: 1px solid var(--tgp-line); }
.tgp-band--white .tgp-choose__item { background: var(--tgp-cream); }
.tgp-choose__when {
	margin: 0 0 8px;
	font-family: var(--font-head);
	font-size: var(--tgp-h3);
	line-height: 1.3;
	color: var(--tgp-teal);
}
.tgp-choose__then { margin: 0 0 12px; color: var(--tgp-soft); }

/* ---------------------------------------------------------------- compare table */

.tgp-tablewrap { overflow-x: auto; border: 1px solid var(--tgp-line); background: #fff; }
.tgp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tgp-table th, .tgp-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--tgp-line); }
.tgp-table thead th {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tgp-soft);
	background: var(--tgp-cream);
	white-space: nowrap;
}
.tgp-table tbody th { font-family: var(--font-head); font-size: 16px; font-weight: 700; }
.tgp-table tbody th a { color: var(--tgp-teal); text-decoration: none; }
.tgp-table tbody th a:hover { text-decoration: underline; }
.tgp-table tbody tr:last-child th, .tgp-table tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- pricing */

.tgp-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tgp-gap); }
.tgp-pricing__col { padding: var(--tgp-pad); border: 1px solid var(--tgp-line); background: #fff; }
.tgp-band--white .tgp-pricing__col { background: var(--tgp-cream); }
.tgp-pricing__col h3 { margin: 0 0 12px; font-family: var(--font-head); font-size: var(--tgp-h3); }
.tgp-pricing__col ul { margin: 0; padding: 0; list-style: none; }
.tgp-pricing__col li { position: relative; padding: 5px 0 5px 26px; color: var(--tgp-soft); }
.tgp-pricing__col li::before {
	position: absolute;
	left: 0;
	font-weight: 700;
}
.tgp-pricing__col--yes li::before { content: "\2713"; color: #2f8f4e; }
.tgp-pricing__col--no li::before { content: "\2715"; color: #c0563f; }

/* ---------------------------------------------------------------- places */

.tgp-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tgp-place { padding-top: 16px; border-top: 2px solid var(--tgp-gold); }
.tgp-place__name { margin: 0 0 3px; font-family: var(--font-head); font-size: var(--tgp-h3); }
.tgp-place__meta {
	margin: 0 0 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tgp-soft);
}
.tgp-place__text { margin: 0 0 12px; color: var(--tgp-soft); }
.tgp-place__text a { color: var(--tgp-teal); }

/* ---------------------------------------------------------------- reasons */

.tgp-reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tgp-reason__icon { display: inline-flex; color: var(--tgp-teal); }
.tgp-reason__icon svg { width: 28px; height: 28px; }
.tgp-reason__title { margin: 11px 0 6px; font-family: var(--font-head); font-size: var(--tgp-h3); line-height: 1.3; }
.tgp-reason__text { margin: 0; font-size: 15px; color: var(--tgp-soft); }
.tgp-reason__text a { color: var(--tgp-teal); }

/* ---------------------------------------------------------------- steps */

.tgp-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tgp-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.tgp-step { position: relative; padding-top: 4px; }
.tgp-step__no {
	display: block;
	margin-bottom: 7px;
	font-family: var(--font-head);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	color: var(--tgp-gold);
}
.tgp-step__title { margin: 0 0 5px; font-family: var(--font-head); font-size: var(--tgp-h3); }
.tgp-step__text { margin: 0; font-size: 15px; color: var(--tgp-soft); }

/* ---------------------------------------------------------------- reviews */

.tgp-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tgp-review { padding: var(--tgp-pad); background: #fff; border: 1px solid var(--tgp-line); }
.tgp-band--white .tgp-review { background: var(--tgp-cream); }
.tgp-review__stars { margin: 0 0 9px; color: var(--tgp-gold); letter-spacing: 2px; font-size: 14px; }
.tgp-review__text {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-family: var(--font-head);
	font-size: 16px;
	font-style: italic;
	line-height: 1.55;
}
.tgp-review__by { margin: 0; font-size: var(--tgp-small); color: var(--tgp-soft); }
.tgp-review__by strong { color: var(--tgp-ink); }
.tgp-review__by span::before { content: " \00b7 "; }

/* ---------------------------------------------------------------- prose */

.tgp-prose--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tgp-gap); }
.tgp-prose__part h3 { margin: 0 0 8px; font-family: var(--font-head); font-size: var(--tgp-h3); }
.tgp-prose__part p { margin: 0 0 12px; color: var(--tgp-soft); max-width: 62ch; }

/* ---------------------------------------------------------------- faq */

.tgp-faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--tgp-line); }
.tgp-faq__item { border-bottom: 1px solid var(--tgp-line); }
.tgp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--tgp-ink);
}
.tgp-faq__q::-webkit-details-marker { display: none; }
.tgp-faq__mark { position: relative; flex: none; width: 14px; height: 14px; }
.tgp-faq__mark::before, .tgp-faq__mark::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: var(--tgp-gold-dark);
	transition: transform 0.2s ease;
}
.tgp-faq__mark::after { transform: rotate(90deg); }
.tgp-faq__item[open] .tgp-faq__mark::after { transform: rotate(0deg); }
.tgp-faq__a { padding: 0 0 18px; max-width: 70ch; }
.tgp-faq__a p { margin: 0; color: var(--tgp-soft); }
.tgp-faq__a a { color: var(--tgp-teal); }

/* ---------------------------------------------------------------- related links */

.tgp-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tgp-link {
	display: block;
	padding: calc(var(--tgp-pad) * 0.8) var(--tgp-pad);
	background: #fff;
	border: 1px solid var(--tgp-line);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.tgp-band--white .tgp-link { background: var(--tgp-cream); }
.tgp-link:hover { border-color: var(--tgp-gold); transform: translateY(-3px); }
.tgp-link strong { display: block; margin-bottom: 3px; font-family: var(--font-head); font-size: 17px; color: var(--tgp-ink); }
.tgp-link span { font-size: var(--tgp-small); color: var(--tgp-soft); }

/* ---------------------------------------------------------------- closing call */

.tgp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.tgp-micro {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 16px 0 0;
	font-size: var(--tgp-small);
	color: rgba(255, 255, 255, 0.72);
}

/* ---------------------------------------------------------------- narrower */

@media (max-width: 1024px) {
	.tgp-reasons, .tgp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tgp-links, .tgp-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tgp-answer { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.tgp-choose, .tgp-places, .tgp-pricing, .tgp-prose--cols,
	.tgp-reasons, .tgp-steps, .tgp-links, .tgp-reviews { grid-template-columns: minmax(0, 1fr); }
	.tgp-hero__inner { padding-block: 30px 34px; }

	/* The comparison reads as a stack of cards rather than a table that has to scroll. */
	.tgp-tablewrap { border: 0; background: none; overflow: visible; }
	.tgp-table, .tgp-table tbody, .tgp-table tr, .tgp-table th, .tgp-table td { display: block; width: 100%; }
	.tgp-table thead { display: none; }
	.tgp-table tr { margin-bottom: 16px; border: 1px solid var(--tgp-line); background: #fff; }
	.tgp-table th, .tgp-table td { border-bottom: 1px solid var(--tgp-line); }
	.tgp-table td { display: flex; justify-content: space-between; gap: 16px; }
	.tgp-table td::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--tgp-soft);
	}
	.tgp-table tr:last-child { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tgp-card, .tgp-link, .tgp-btn { transition: none; }
}