/* ==========================================================================
   Tavitano — design system
   Values come from the "Private tours WordPress design" handoff.
   Border radius is 0 everywhere. This is deliberate.
   ========================================================================== */

:root {
	--tv-navy: #04152F;
	--tv-navy-hover: #0A2140;
	--tv-page: #FBFAF8;
	--tv-white: #FFFFFF;
	--tv-brass: #C08A2E;
	--tv-body: #3A4C64;
	--tv-muted: #4A5D75;
	/* Measured against --tv-page (#FBFAF8): the old #6B7C93 came out at 4.08
	   and #97A3B4 at 2.45, both under the 4.5 that AA asks of text. These pass
	   at 5.32 and 4.61, and the label stays darker than the placeholder so the
	   hierarchy survives the fix. */
	--tv-label: #5A6A80;
	--tv-placeholder: #63748C;
	--tv-link: #35597E;
	--tv-border: #E4E8EE;
	--tv-border-light: #EEF1F5;
	--tv-input-border: #DEE3EA;
	--tv-fill-a: #E7EBF0;
	--tv-fill-b: #F3F5F8;
	/* Draws the "·" between the facts on a card. At 1.51 it was the worst of
	   the lot, despite being the least noticeable thing on the page; #7C8AA0
	   only reached 3.36, so it ends up at the placeholder's value. A separator
	   that quiet is still a character a screen renders as text. */
	--tv-dot: #63748C;

	--tv-gutter: 40px;
	/* The design was drawn on a 1440px canvas: 1360px of content between two
	   40px gutters. Past that width the content column stops growing and
	   centres instead, so nothing stretches edge to edge on a wide monitor.
	   Full-bleed bands (hero, footer, navy CTA) still span the viewport —
	   only what sits inside them lines up with the column. */
	--tv-max: 1360px;
	--tv-pad: max(var(--tv-gutter), calc((100% - var(--tv-max)) / 2));
	--tv-header-h: 76px;
	--tv-sticky-top: 100px; /* header 76 + 24 */

	--tv-shadow-widget: 0 20px 50px -28px rgba(4, 21, 47, 0.35);
	--tv-shadow-card: 0 20px 50px -32px rgba(4, 21, 47, 0.3);

	--tv-sans: "Sora", "Helvetica Neue", Helvetica, sans-serif;
	--tv-serif: "Cinzel", Georgia, "Times New Roman", serif;
	--tv-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html {
	-webkit-text-size-adjust: 100%;
	/* Anything scrolled to — a field with an error, an in-page link — stops
	   below the sticky header instead of under it. The bug this fixes is that
	   the top of the field you were just sent to is invisible. */
	scroll-padding-top: calc(var(--tv-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--tv-page);
	color: var(--tv-navy);
	font-family: var(--tv-sans);
	letter-spacing: -0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-wrap: pretty;
}

img { max-width: 100%; height: auto; display: block; }

/* Any author `display` beats the browser rule that makes [hidden] work, and
   this codebase hides flex and grid children with the attribute all over the
   place. Said once here so it never has to be said per component again. */
[hidden] { display: none !important; }

a { color: var(--tv-navy); text-decoration: none; }
a:hover { color: var(--tv-link); }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::placeholder { color: var(--tv-placeholder); opacity: 1; }

h1, h2, h3, p { margin: 0; }

/* Visible focus ring — the prototype has none, production needs one. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--tv-link);
	outline-offset: 2px;
}

.tv-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--tv-navy);
	color: #fff;
	padding: 12px 20px;
	font-size: 13px;
	font-weight: 500;
}
.tv-skip-link:focus {
	left: 0;
	color: #fff;
}

.tv-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.tv-site { min-height: 100vh; background: var(--tv-page); display: flex; flex-direction: column; }
.tv-main { flex: 1; }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.tv-micro {
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tv-label);
}
.tv-micro--field {
	font-size: 10px;
	letter-spacing: 0.16em;
}
.tv-micro--cell {
	font-size: 10px;
	letter-spacing: 0.14em;
}

.tv-h1 {
	font-family: var(--tv-sans);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.08;
}
.tv-h2 {
	font-family: var(--tv-sans);
	font-weight: 600;
	letter-spacing: -0.03em;
	font-size: 26px;
	line-height: 1.16;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.tv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	padding: 14px 24px;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: normal;
	white-space: nowrap;
	color: var(--tv-navy);
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.tv-btn--fill {
	background: var(--tv-navy);
	color: #fff;
}
.tv-btn--fill:hover { background: var(--tv-navy-hover); color: #fff; }

.tv-btn--outline {
	border: 1px solid var(--tv-navy);
	background: none;
}
.tv-btn--outline:hover { background: var(--tv-navy); color: #fff; }

/* Outlined navy that fills grey instead of navy on hover (custom-trip CTA, confirmation). */
.tv-btn--outline-soft {
	border: 1px solid var(--tv-navy);
	background: none;
}
.tv-btn--outline-soft:hover { background: #F1F3F6; color: var(--tv-navy); }

.tv-btn--grey {
	border: 1px solid var(--tv-input-border);
	background: none;
}
.tv-btn--grey:hover { border-color: var(--tv-navy); }

.tv-btn--text {
	padding: 14px 8px;
	color: var(--tv-link);
}
.tv-btn--text:hover { color: var(--tv-navy); }

.tv-btn--white {
	background: #fff;
	color: var(--tv-navy);
	padding: 15px 30px;
}
.tv-btn--white:hover { background: var(--tv-fill-a); color: var(--tv-navy); }

.tv-btn--lg { padding: 16px 34px; font-size: 14px; }
.tv-btn--block { width: 100%; }

.tv-btn[disabled],
.tv-btn[aria-disabled="true"] { opacity: 0.55; cursor: progress; }

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.tv-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* A placeholder longer than its field was sliced mid-word, which reads as a
   rendering fault rather than as text that carries on. The property belongs on
   the input, not on ::placeholder — the pseudo-element does not lay out its own
   text, the field does, so setting it there does nothing at all. */
.tv-field input[type="text"],
.tv-field input[type="tel"],
.tv-field input[type="email"],
.tv-search__cell input[type="text"] { text-overflow: ellipsis; }

.tv-field input,
.tv-field select,
.tv-field textarea {
	border: 1px solid var(--tv-input-border);
	background: #fff;
	padding: 13px 14px;
	font-size: 15px;
	color: var(--tv-navy);
	outline: 0;
	border-radius: 0;
	width: 100%;
	min-width: 0;
	transition: border-color 140ms ease;
	-webkit-appearance: none;
	appearance: none;
}
.tv-field textarea { resize: vertical; line-height: 1.55; }
.tv-field input:focus,
.tv-field select:focus,
.tv-field textarea:focus { border-color: var(--tv-navy); }

.tv-field select {
	background-image: linear-gradient(45deg, transparent 50%, var(--tv-label) 50%), linear-gradient(135deg, var(--tv-label) 50%, transparent 50%);
	background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
}

.tv-field--sm input,
.tv-field--sm select { padding: 11px 12px; font-size: 14px; }

.tv-field-hint {
	font-size: 12px;
	line-height: 1.45;
	color: var(--tv-label);
}

.tv-field-error {
	font-size: 12px;
	color: #9B2C2C;
}
.tv-field input[aria-invalid="true"],
.tv-field textarea[aria-invalid="true"] { border-color: #9B2C2C; }

/* --------------------------------------------------------------------------
   Location combobox
   -------------------------------------------------------------------------- */

.tv-combo { position: relative; min-width: 0; width: 100%; }
.tv-combo input { width: 100%; min-width: 0; }

.tv-combo__list {
	position: absolute;
	top: calc(100% + 8px);
	left: -22px;
	right: -22px;
	z-index: 30;
	max-height: 300px;
	overflow-y: auto;
	/* Tells the browser up front that a finger here scrolls vertically. Without
	   it iOS waits to see what the gesture becomes, and a plain tap can be
	   cancelled before it ever reaches the lift that chooses. */
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid var(--tv-border);
	box-shadow: var(--tv-shadow-widget);
	padding: 6px 0;
}
.tv-combo__list[hidden] { display: none; }

.tv-combo__hint {
	padding: 10px 22px 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tv-muted);
	border-bottom: 1px solid var(--tv-border-light);
	margin-bottom: 4px;
}

.tv-combo__group {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tv-label);
	padding: 12px 22px 6px;
}
.tv-combo__group[hidden] { display: none; }

.tv-combo__opt {
	padding: 9px 22px;
	font-size: 14px;
	color: var(--tv-navy);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tv-combo__opt[hidden] { display: none; }
.tv-combo__opt:hover,
.tv-combo__opt.is-active { background: #F1F3F6; }

.tv-combo__empty {
	padding: 12px 22px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tv-muted);
}
.tv-combo__empty[hidden] { display: none; }

.tv-combo__error,
.tv-search__cell .tv-combo__error {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.005em;
	text-transform: none;
	color: #9B2C2C;
}
.tv-combo__error[hidden] { display: none; }

.tv-combo.has-error input { color: #7B2020; }
.tv-search__cell:has(.tv-combo.has-error) { box-shadow: inset 0 -2px 0 #9B2C2C; }
.tv-search__cell input[aria-invalid="true"] { color: #7B2020; }

/* Inside a bordered field (booking step 1) the list lines up with the box. */
.tv-field .tv-combo__list { left: 0; right: 0; }
.tv-field .tv-combo__group { padding-left: 14px; padding-right: 14px; }
.tv-field .tv-combo__opt { padding-left: 14px; padding-right: 14px; }
.tv-field .tv-combo__empty { padding-left: 14px; padding-right: 14px; }

@media (max-width: 720px) {
	.tv-combo__list { left: 0; right: 0; }
}

/* --------------------------------------------------------------------------
   Location sheet — the phone version of the list

   A dropdown under a field in a one-column form has to be under its field,
   clear of the software keyboard, and clear of the next field. On a phone
   those three cannot all hold, and what the guest got instead was a list that
   covered the drop-off box. So below 721px the field leaves the form for a
   layer of its own: input at the top where the keyboard cannot reach it, the
   suggestions filling everything under it, and nothing else competing.

   combobox.js moves the real .tv-combo in and out of here, so there is one
   input, one hidden handle and one set of listeners — no copy to keep in step.
   -------------------------------------------------------------------------- */

.tv-sheet {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	background: var(--tv-white);
}
.tv-sheet[hidden] { display: none; }

.tv-sheet__head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px 8px 4px;
	border-bottom: 1px solid var(--tv-border);
	flex: 0 0 auto;
}
.tv-sheet__back {
	border: 0;
	background: none;
	color: var(--tv-navy);
	font-size: 22px;
	line-height: 1;
	/* 44px square: the smallest target the guidelines will accept for a
	   control whose only job is to get you back out of here. */
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tv-sheet__title {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tv-label);
}

/* min-height 0 so the list, not the sheet, is what scrolls. */
.tv-sheet__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 14px 16px 0;
}

.tv-sheet .tv-combo {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.tv-sheet .tv-combo input[type="text"] {
	flex: 0 0 auto;
	border: 1px solid var(--tv-input-border);
	padding: 14px 15px;
	/* 16px exactly: iOS zooms the page in on any focused field below it, and
	   a zoomed page puts the field back under the keyboard. */
	font-size: 16px;
	color: var(--tv-navy);
	background: var(--tv-white);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* In the sheet the list is the page, not a layer over it. */
.tv-sheet .tv-combo__list {
	position: static;
	left: auto;
	right: auto;
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	margin-top: 10px;
	border: 0;
	border-top: 1px solid var(--tv-border-light);
	box-shadow: none;
	padding: 0 0 20px;
	-webkit-overflow-scrolling: touch;
}
.tv-sheet .tv-combo__hint { padding-left: 0; padding-right: 0; }
.tv-sheet .tv-combo__group { padding-left: 0; padding-right: 0; }
.tv-sheet .tv-combo__empty { padding-left: 0; padding-right: 0; }
.tv-sheet .tv-combo__opt {
	padding: 15px 0;
	font-size: 15px;
	border-bottom: 1px solid var(--tv-border-light);
	/* Long hotel names get two lines here rather than an ellipsis: this is the
	   screen where the guest is deciding which one is theirs. */
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}
.tv-sheet .tv-combo__error { padding: 8px 0 0; }

/* Nothing behind the sheet scrolls while it is up. */
html.tv-sheet-open,
html.tv-sheet-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Image placeholders — until real photography lands
   -------------------------------------------------------------------------- */

.tv-ph {
	background: repeating-linear-gradient(135deg, var(--tv-fill-a) 0 8px, var(--tv-fill-b) 8px 16px);
	display: flex;
	align-items: flex-end;
	padding: 14px;
	overflow: hidden;
	position: relative;
}
.tv-ph__cap {
	font: 500 10px/1.3 var(--tv-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7C8B9E;
}
.tv-ph img,
.tv-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tv-ph.has-image .tv-ph__cap { display: none; }

.tv-media { position: relative; overflow: hidden; background: var(--tv-fill-b); }

/* --------------------------------------------------------------------------
   Hairline grid — 1px rules produced by gap over a border-coloured wrapper
   -------------------------------------------------------------------------- */

.tv-hairline {
	display: grid;
	gap: 1px;
	background: var(--tv-border);
	border: 1px solid var(--tv-border);
}
.tv-hairline > * { background: var(--tv-page); }
.tv-hairline--3 { grid-template-columns: repeat(3, 1fr); }
.tv-hairline--4 { grid-template-columns: repeat(4, 1fr); }
.tv-hairline--2 { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.tv-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0 var(--tv-pad);
	height: var(--tv-header-h);
	background: var(--tv-page);
	border-bottom: 1px solid var(--tv-border);
	flex-wrap: nowrap;
}

.tv-wordmark { display: flex; flex: none; }
.tv-wordmark__img {
	/* 164, jer je toliko široka slika kojoj je visina verzala 14,7 px — točno
	   ona koju je davao stari tekst na 21 px. Zamjena se tako ne vidi kao
	   promjena veličine, nego samo kao logotip koji je konačno cijeli:
	   s mjedenom crtom i mjedenim podnaslovom. */
	display: block;
	width: 164px;
	height: auto;
}
@media (max-width: 420px) {
	/* Na najužim zaslonima zaglavlje dijeli 76 px s izbornikom i gumbom. */
	.tv-wordmark__img { width: 140px; }
}

.tv-nav { display: flex; align-items: center; gap: 4px; }
.tv-nav a {
	position: relative;
	padding: 10px 9px;
	font-size: 13px;
	font-weight: 500;
	color: var(--tv-navy);
	white-space: nowrap;
}
.tv-nav a:hover { color: var(--tv-navy); }
.tv-nav .current-menu-item > a::after,
.tv-nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 9px;
	right: 9px;
	bottom: 2px;
	height: 2px;
	background: var(--tv-navy);
}
.tv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }

.tv-nav__phone,
.tv-nav__mail { display: none; }

.tv-header__right { display: flex; align-items: center; gap: 14px; flex: none; }
.tv-header__phones { display: flex; align-items: center; gap: 12px; }
.tv-header__phone {
	font-size: 13px;
	font-weight: 500;
	color: var(--tv-link);
	white-space: nowrap;
}
/* Middot between the two numbers, drawn rather than typed so it never lands in
   a screen reader's reading of either number. */
.tv-header__phone + .tv-header__phone { position: relative; padding-left: 13px; }
.tv-header__phone + .tv-header__phone::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 50%;
	background: var(--tv-placeholder);
}
.tv-header__lang {
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--tv-placeholder);
}
.tv-header__cta { padding: 12px 22px; font-size: 13px; }

.tv-burger {
	display: none;
	/* The box around it read as an unfinished element rather than an icon. The
	   44px hit area stays; only the outline goes. */
	border: 0;
	background: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	padding: 0;
}
.tv-burger span { display: block; width: 18px; height: 1px; background: var(--tv-navy); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.tv-footer {
	background: var(--tv-navy);
	color: #fff;
	padding: 64px var(--tv-pad) 32px;
}
.tv-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.tv-footer__logo {
	display: block;
	width: 156px;
	height: auto;
	/* Zamjenjuje razmak koji su prije nosila dva retka teksta. */
	margin-bottom: 22px;
}
.tv-footer__tagline {
	font-family: var(--tv-serif);
	font-size: 15px;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.8);
}
.tv-footer__col {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.72);
}
.tv-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.tv-footer__head {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 4px;
}
.tv-footer a { color: rgba(255, 255, 255, 0.72); }
.tv-footer a:hover { color: #fff; }
.tv-footer__legal {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.45);
}
.tv-footer__legal a { color: rgba(255, 255, 255, 0.45); }
.tv-footer__legal a:hover { color: #fff; }
.tv-footer__legal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }

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

.tv-hero {
	position: relative;
	background: var(--tv-navy);
	color: #fff;
	height: 620px;
	overflow: hidden;
}
.tv-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tv-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(4, 21, 47, 0.92) 0%, rgba(4, 21, 47, 0.78) 42%, rgba(4, 21, 47, 0.28) 78%, rgba(4, 21, 47, 0.35) 100%);
}
.tv-hero__inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: 0 var(--tv-pad) 90px;
	pointer-events: none;
}
.tv-hero__copy { max-width: 660px; }
/* The booking page's band. The homepage hero's clothes in a quarter of its
   height: above the first field is the only part of this page that is not
   earning, so it gets 240px and two sentences. */
.tv-bhero {
	position: relative;
	background: var(--tv-navy);
	color: #fff;
	height: 240px;
	overflow: hidden;
}
.tv-bhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.tv-bhero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(4, 21, 47, 0.93) 0%, rgba(4, 21, 47, 0.82) 46%, rgba(4, 21, 47, 0.42) 100%);
}
/* The padding here is the page gutter, which on a wide screen is most of the
   viewport. Capping the width of this box as well left the text about a word
   wide and it wrapped down out of the band. The cap belongs on the copy
   inside, the same way the homepage hero does it. */
.tv-bhero__inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: 0 var(--tv-pad);
}
.tv-bhero__copy { max-width: 620px; }
.tv-bhero__title {
	font-size: 34px;
	line-height: 1.12;
	letter-spacing: -0.025em;
	font-weight: 600;
	margin: 16px 0 10px;
}
.tv-bhero__lead { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin: 0; }

@media (max-width: 720px) {
	.tv-bhero { height: 200px; }
	.tv-bhero__title { font-size: 25px; margin: 12px 0 8px; }
	.tv-bhero__lead { font-size: 14px; }
}


.tv-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	padding: 7px 14px;
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}
.tv-hero h1 {
	font-size: 54px;
	line-height: 1.06;
	letter-spacing: -0.03em;
	font-weight: 600;
	margin: 26px 0 20px;
}
.tv-hero__lead {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	max-width: 470px;
}
/* On navy, placeholder stripes go light-on-dark. */
.tv-hero .tv-ph {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0 8px, rgba(255, 255, 255, 0.03) 8px 16px);
	padding: 20px var(--tv-pad);
}
.tv-hero .tv-ph__cap { color: rgba(255, 255, 255, 0.5); }

/* --------------------------------------------------------------------------
   Search widget
   -------------------------------------------------------------------------- */

.tv-search-wrap {
	padding: 0 var(--tv-pad);
	margin-top: -70px;
	position: relative;
	z-index: 5;
}
.tv-search {
	background: #fff;
	border: 1px solid var(--tv-border);
	box-shadow: var(--tv-shadow-widget);
}
.tv-search__tabs { display: flex; border-bottom: 1px solid var(--tv-border); }
.tv-search__tab {
	position: relative;
	border: 0;
	background: none;
	padding: 18px 26px;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--tv-muted);
}
.tv-search__tab[aria-selected="true"] { color: var(--tv-navy); }
.tv-search__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--tv-navy);
}
.tv-search__row {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.35fr) minmax(0, 0.95fr) minmax(0, 0.7fr) minmax(0, 0.85fr) auto;
	align-items: stretch;
}
/* The hour needs less room than a date and far less than an address. Given an
   equal share it sat in the middle of a cell twice its width, which reads as a
   field somebody forgot to finish. */
.tv-search__cell--time input { max-width: 8ch; }
/* Adults and children share the guests cell, one under the other, so the row
   keeps its columns and a family is not sent to the next step to say so. */
.tv-search__cell--guests select + select { margin-top: 6px; }

/* Child seats: a full-width row under the search fields, shown only once
   children are picked. */
/* Inside the search grid: on a phone and a tablet it sits above the button,
   which spans the row there; on a wide screen, where the button is the last
   column, it is ordered after everything so it takes a row of its own. */
.tv-search__seats {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	padding: 16px 22px;
	border-top: 1px solid var(--tv-border-light);
}
.tv-search__seats[hidden] { display: none; }
@media (min-width: 1181px) {
	.tv-search__seats { order: 1; }
}
.tv-search__seats-title {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tv-label);
}
.tv-search__seat { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tv-navy); }
.tv-search__seat select {
	border: 1px solid var(--tv-border-light);
	padding: 6px 10px;
	font-size: 14px;
	color: var(--tv-navy);
	background: #fff;
	border-radius: 0;
}
@media (max-width: 720px) {
	.tv-search__seats { flex-direction: column; align-items: stretch; }
	.tv-search__seat { justify-content: space-between; }
}

/* With a return date there is one cell more, and without this the button would
   be pushed onto a second row. Bounded to the width where the row is one line
   at all: :has() outranks the narrow-screen rules below on specificity, so an
   unbounded version would hold six columns open on a phone. */
@media (min-width: 1181px) {
	.tv-search__row:has([data-tv-return-cell]:not([hidden])) {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.65fr) minmax(0, 0.9fr) minmax(0, 0.8fr) auto;
	}
}
.tv-search__cell {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 20px 22px;
	border-right: 1px solid var(--tv-border-light);
	min-width: 0;
}
.tv-search__cell > span:first-child {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tv-label);
}
.tv-search__cell input,
.tv-search__cell select {
	border: 0;
	outline: 0;
	font-size: 15px;
	color: var(--tv-navy);
	background: none;
	padding: 0;
	width: 100%;
	min-width: 0;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
.tv-search__submit {
	border: 0;
	background: var(--tv-navy);
	color: #fff;
	padding: 0 38px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background-color 140ms ease;
}
.tv-search__submit:hover { background: var(--tv-navy-hover); }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

/* Facts strip — sits directly under the booking widget, so it is tighter than
   the trust pillars below it and reads as a continuation of the form, not as a
   second section competing with it. */
.tv-strip { margin: 40px var(--tv-pad) 0; }
.tv-strip > div { padding: 20px 22px; display: flex; flex-direction: column; gap: 5px; }
.tv-strip__title { font-size: 13.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--tv-navy); }
.tv-strip__body { font-size: 12.5px; line-height: 1.5; color: var(--tv-muted); }

/* A saving reads as good news, so it is the one line in the summary that is
   allowed a colour of its own. */
.tv-summary__line--save,
.tv-summary__line--save span { color: var(--tv-link); font-weight: 600; }

/* WhatsApp button. Brand green, because a guest scans for the colour rather
   than reads the label — but only as the outline, so it stays a Tavitano page. */
.tv-wa {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 12px;
	padding: 11px 18px;
	border: 1px solid #25D366;
	color: #128C4B;
	background: #F2FCF6;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	align-self: flex-start;
}
.tv-wa:hover { background: #E4F8EC; color: #0E6E3B; }
.tv-wa__icon { width: 18px; height: 18px; flex: none; }

/* The three things a guest is actually trusting at the moment of paying. */
.tv-assure { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tv-assure li { position: relative; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--tv-muted); }
.tv-assure li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tv-link);
}

.tv-vehicle__note { font-size: 12.5px; line-height: 1.5; color: var(--tv-link); display: block; margin-top: 3px; }

.tv-trust { margin: 56px var(--tv-pad) 0; }
.tv-trust > div { padding: 26px 28px; display: flex; flex-direction: column; gap: 7px; }
.tv-trust__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.tv-trust__body { font-size: 13.5px; line-height: 1.55; color: var(--tv-muted); }

/* --------------------------------------------------------------------------
   Section header + tour grid
   -------------------------------------------------------------------------- */

.tv-section { padding: 88px var(--tv-pad) 0; }
.tv-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 28px;
}
.tv-section-head .tv-micro { margin-bottom: 12px; }
.tv-section-head h2 { font-size: 34px; line-height: 1.12; letter-spacing: -0.01em; font-weight: 600; }
.tv-section-head__note { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--tv-muted); max-width: 62ch; }
.tv-section-head .tv-btn { padding: 13px 22px; font-size: 13px; }

.tv-tour-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.tv-card {
	border: 1px solid var(--tv-border);
	background: #fff;
	display: flex;
	flex-direction: column;
	color: var(--tv-navy);
	transition: border-color 140ms ease;
}
.tv-card:hover { border-color: var(--tv-navy); color: var(--tv-navy); }
.tv-card__media { height: 190px; }
.tv-card__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tv-card__title { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.tv-card__blurb { font-size: 13px; color: var(--tv-muted); line-height: 1.5; flex: 1; }
.tv-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tv-label);
}
.tv-card__meta i { font-style: normal; color: var(--tv-dot); }
.tv-card__price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-top: 1px solid var(--tv-border-light);
	padding-top: 14px;
}
.tv-card__from { font-size: 11px; color: var(--tv-label); }
.tv-card__amount { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   Custom-trip CTA band
   -------------------------------------------------------------------------- */

.tv-band { padding: 80px var(--tv-pad) 96px; }
.tv-band__inner {
	border: 1px solid var(--tv-navy);
	padding: 52px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.tv-band__inner h2 { font-size: 32px; line-height: 1.14; margin-bottom: 10px; font-weight: 600; letter-spacing: -0.03em; }
.tv-band__inner p { font-size: 15px; color: var(--tv-muted); }
.tv-band__actions { display: flex; gap: 12px; flex: none; }
.tv-band__actions .tv-btn { flex: none; padding: 15px 26px; }
.tv-band__actions .tv-btn--fill { padding: 15px 28px; }

.tv-band--navy .tv-band__inner {
	background: var(--tv-navy);
	color: #fff;
	border: 0;
}
.tv-band--navy h2 { font-size: 30px; }
.tv-band--navy p { color: rgba(255, 255, 255, 0.7); }

/* --------------------------------------------------------------------------
   Tour detail
   -------------------------------------------------------------------------- */

.tv-gallery {
	padding: 40px var(--tv-pad) 0;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 12px;
}
.tv-gallery__main { height: 420px; padding: 18px; }
.tv-gallery__main .tv-ph__cap { font-size: 10.5px; }
.tv-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }

.tv-detail {
	display: grid;
	grid-template-columns: 1.6fr 0.85fr;
	gap: 56px;
	padding: 44px var(--tv-pad) 96px;
	align-items: start;
}
.tv-detail__eyebrow { margin-bottom: 14px; }
.tv-detail h1 { font-size: 42px; line-height: 1.08; letter-spacing: -0.015em; font-weight: 600; margin-bottom: 20px; }
.tv-detail__lead { font-size: 17px; line-height: 1.65; color: var(--tv-body); margin-bottom: 32px; max-width: 620px; }

.tv-facts {
	display: flex;
	gap: 1px;
	background: var(--tv-border);
	border: 1px solid var(--tv-border);
	margin-bottom: 44px;
}
.tv-facts > div { background: var(--tv-page); padding: 16px 20px; flex: 1; min-width: 0; }
.tv-facts .tv-micro--cell { margin-bottom: 6px; }
.tv-facts strong { font-size: 15px; font-weight: 700; display: block; }

.tv-itinerary { margin-bottom: 44px; }
.tv-itinerary__row {
	display: grid;
	grid-template-columns: 82px 1fr;
	gap: 24px;
	padding: 20px 0;
	border-top: 1px solid var(--tv-border);
}
.tv-itinerary__time { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--tv-brass); }
.tv-itinerary__title { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.tv-itinerary__text { font-size: 14px; line-height: 1.6; color: var(--tv-muted); }

.tv-includes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	border-top: 1px solid var(--tv-border);
	padding-top: 34px;
}
.tv-includes .tv-micro { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 16px; }
.tv-includes ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14.5px;
	color: var(--tv-body);
	line-height: 1.5;
}

.tv-booking-card {
	position: sticky;
	top: var(--tv-sticky-top);
	border: 1px solid var(--tv-border);
	background: #fff;
	box-shadow: var(--tv-shadow-card);
}
.tv-booking-card__head { padding: 24px 24px 20px; border-bottom: 1px solid var(--tv-border-light); }
.tv-booking-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tv-booking-card__price b { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; }
.tv-booking-card__price span { font-size: 13px; color: var(--tv-label); font-weight: 400; }
.tv-booking-card__note { font-size: 12.5px; color: var(--tv-muted); margin-top: 8px; }
.tv-booking-card__form { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.tv-booking-card__form .tv-btn { margin-top: 4px; padding: 15px; font-size: 14px; }
.tv-booking-card__fine { font-size: 12px; color: var(--tv-label); text-align: center; }
.tv-booking-card__foot {
	border-top: 1px solid var(--tv-border-light);
	padding: 18px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--tv-page);
}
.tv-booking-card__foot small { font-size: 12.5px; color: var(--tv-body); }
.tv-booking-card__foot a { font-size: 15px; font-weight: 700; }

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

.tv-stepper {
	border-bottom: 1px solid var(--tv-border);
	padding: 22px var(--tv-pad);
	display: flex;
	align-items: center;
}
ol.tv-stepper__list { list-style: none; margin: 0; padding: 0; }

.tv-stepper__list { display: flex; align-items: center; gap: 14px; flex: 1; }
.tv-stepper__item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tv-stepper__marker {
	width: 26px;
	height: 26px;
	border: 1px solid var(--tv-input-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--tv-placeholder);
	background: #fff;
	flex: none;
}
.tv-stepper__item.is-done .tv-stepper__marker { color: var(--tv-navy); }
.tv-stepper__label { font-size: 13px; font-weight: 500; color: var(--tv-navy); white-space: nowrap; }
.tv-stepper__line { flex: 1; height: 1px; background: var(--tv-border); min-width: 12px; }

.tv-flow {
	display: grid;
	grid-template-columns: 1.6fr 0.8fr;
	gap: 48px;
	padding: 40px var(--tv-pad) 96px;
	align-items: start;
}
.tv-flow__main { min-width: 0; }
.tv-flow h1 { font-size: 31px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 8px; }
.tv-flow__intro { font-size: 15px; color: var(--tv-muted); margin-bottom: 30px; }
.tv-flow__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
.tv-flow__actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Fine print that qualifies the control above it — the payment note, the
   cancellation line under the button that commits. Sits close to what it
   qualifies, so it is read as a condition and not as decoration. */
.tv-flow__fine {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--tv-muted);
	max-width: 62ch;
}
/* The one line of fine print that is not fine print. "We charge nothing until
   we confirm" is the sentence a guest weighs before typing a card number, so
   it reads at body size and sits on paper rather than dissolving into the
   cancellation and waiting notes below it. */
.tv-flow__fine--lead {
	margin-top: 16px;
	padding: 14px 16px;
	font-size: 14px;
	background: var(--tv-fill-b);
	border-left: 2px solid var(--tv-brass);
	color: var(--tv-body);
}
.tv-flow__fine--lead strong { color: var(--tv-navy); }

.tv-flow__actions .tv-btn--grey.tv-btn--lg { padding: 16px 26px; }
.tv-flow__step[hidden] { display: none; }

.tv-recap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border: 1px solid var(--tv-border);
	background: #fff;
	padding: 14px 18px;
	margin-bottom: 26px;
}
.tv-recap__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 13.5px;
	color: var(--tv-body);
}
.tv-recap__items span i { font-style: normal; color: var(--tv-label); }
.tv-recap .tv-btn { padding: 9px 16px; font-size: 12.5px; flex: none; }

.tv-vehicles { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.tv-vehicle {
	display: grid;
	grid-template-columns: 150px 1fr auto;
	gap: 22px;
	align-items: center;
	border: 1px solid var(--tv-border);
	background: #fff;
	padding: 16px;
	cursor: pointer;
	text-align: left;
	width: 100%;
	font-family: inherit;
	transition: border-color 140ms ease;
}
.tv-vehicle:hover { border-color: var(--tv-navy); }
.tv-vehicle__media { height: 92px; padding: 10px; }
.tv-vehicle__media .tv-ph__cap { font-size: 9px; letter-spacing: 0.1em; }
.tv-vehicle__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tv-vehicle__name { font-size: 17px; font-weight: 700; }
.tv-vehicle__cap { font-size: 13.5px; color: var(--tv-muted); }

/* Guests, boot, hand luggage. Three numbers a guest can count on their fingers,
   which the sentence they replaced could not be. */
.tv-caps { display: flex; align-items: center; gap: 14px; color: var(--tv-muted); }
.tv-caps__item { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; }
.tv-caps__icon { width: 16px; height: 16px; flex: none; }
.tv-caps__item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tv-vehicle__price { text-align: right; padding-right: 8px; }
.tv-vehicle__price b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; display: block; }
.tv-vehicle__price span { font-size: 11.5px; color: var(--tv-label); }

.tv-selected {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tv-brass);
}
.tv-vehicle:not([aria-pressed="true"]) .tv-selected,
.tv-pay:not([aria-pressed="true"]) .tv-selected { visibility: hidden; }

/* A vehicle that cannot seat the party is shown, but plainly not bookable. */
.tv-vehicle.is-too-small { opacity: 0.45; cursor: not-allowed; }
.tv-vehicle.is-too-small:hover { border-color: var(--tv-border); }
.tv-vehicle.is-too-small .tv-selected { display: none; }
.tv-vehicle__warn {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9B2C2C;
}
.tv-vehicle__warn[hidden] { display: none; }

.tv-pay-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.tv-pay {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border: 1px solid var(--tv-border);
	background: #fff;
	padding: 18px 20px;
	cursor: pointer;
	text-align: left;
	width: 100%;
	font-family: inherit;
	transition: border-color 140ms ease;
}
.tv-pay:hover { border-color: var(--tv-navy); }
.tv-pay__title { font-size: 15px; font-weight: 700; }
.tv-pay__sub { font-size: 13px; color: var(--tv-muted); margin-top: 4px; }

/* The return offer. Sits where the price has just appeared, because that is
   the moment the second leg becomes a real number rather than a question. */
.tv-return-offer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	border: 1px solid var(--tv-navy);
	background: #fff;
	padding: 16px 20px;
	margin: 0 0 26px;
}
.tv-return-offer__text b { display: block; font-size: 15px; }
.tv-return-offer__text span { display: block; font-size: 13px; color: var(--tv-muted); margin-top: 3px; }
.tv-return-offer .tv-btn b { font-weight: 700; margin-left: 6px; }

/* Child seats by size: three small selects under one heading, each with its
   age band, so "how many of which" is answered in one glance. */
.tv-seats { border: 0; padding: 0; margin: 0; }
.tv-seats[hidden] { display: none; }
.tv-seats legend { padding: 0; margin-bottom: 7px; }
.tv-seats__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tv-seats__one { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tv-seats__one > span { font-size: 13px; color: var(--tv-muted); }
.tv-seats .tv-field-hint { margin-top: 7px; }
@media (max-width: 560px) {
	.tv-seats__row { grid-template-columns: 1fr; gap: 10px; }
	.tv-seats__one { display: grid; grid-template-columns: 1fr 110px; align-items: center; }
}

/* Kit a guest ticks. Same card as the payment rows, because it is the same
   kind of decision: one line, a price on the right, no hunting. */
.tv-extras { border: 0; padding: 0; margin: 0 0 30px; }
.tv-extras legend { padding: 0; margin-bottom: 10px; }
.tv-extras__list { display: flex; flex-direction: column; gap: 10px; }
.tv-extra {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	border: 1px solid var(--tv-border);
	background: #fff;
	padding: 14px 18px;
	cursor: pointer;
	transition: border-color 140ms ease;
}
.tv-extra:hover { border-color: var(--tv-navy); }
.tv-extra:focus-within { border-color: var(--tv-navy); }
.tv-extra input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--tv-navy); }
.tv-extra__body { min-width: 0; }
.tv-extra__name { display: flex; flex-wrap: wrap; gap: 10px; font-size: 15px; font-weight: 700; }
.tv-extra__name b { font-weight: 600; color: var(--tv-link); }
.tv-extra__note { display: block; font-size: 13px; color: var(--tv-muted); margin-top: 3px; }
.tv-extra:has(input:checked) { border-color: var(--tv-navy); box-shadow: inset 0 0 0 1px var(--tv-navy); }

.tv-confirm {
	border: 1px solid var(--tv-navy);
	background: #fff;
	padding: 40px 44px;
}
.tv-confirm__ref {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tv-brass);
	margin-bottom: 16px;
}
.tv-confirm h1 { font-size: 34px; line-height: 1.12; margin-bottom: 16px; }
.tv-confirm p { font-size: 16px; line-height: 1.65; color: var(--tv-body); margin-bottom: 28px; max-width: 520px; }
.tv-confirm__grid { margin-bottom: 28px; }
.tv-confirm__grid > div { padding: 18px 20px; }
.tv-confirm__grid strong { font-size: 15px; font-weight: 700; display: block; }
.tv-confirm .tv-btn { padding: 14px 24px; font-size: 13.5px; }

.tv-summary {
	position: sticky;
	top: var(--tv-sticky-top);
	border: 1px solid var(--tv-border);
	background: #fff;
}
.tv-summary__head { padding: 22px 24px; border-bottom: 1px solid var(--tv-border-light); }
.tv-summary__head .tv-micro { font-size: 10.5px; letter-spacing: 0.18em; margin-bottom: 12px; }
.tv-summary__tour { font-size: 17px; font-weight: 700; line-height: 1.3; }
.tv-summary__meta { font-size: 13px; color: var(--tv-muted); margin-top: 6px; }
.tv-summary__lines { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.tv-summary__line { display: flex; justify-content: space-between; gap: 16px; }
.tv-summary__line span:first-child { color: var(--tv-muted); }
.tv-summary__line span:last-child { font-weight: 500; white-space: nowrap; }
.tv-summary__total {
	padding: 18px 24px;
	border-top: 1px solid var(--tv-border-light);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}
.tv-summary__total span:first-child {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tv-label);
}
.tv-summary__total span:last-child { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.tv-summary__note {
	padding: 16px 24px;
	background: var(--tv-page);
	border-top: 1px solid var(--tv-border-light);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--tv-muted);
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.tv-about-intro { padding: 80px var(--tv-pad) 0; }
.tv-about-intro > * { max-width: 820px; }
.tv-about-intro .tv-micro { margin-bottom: 16px; }
.tv-about-intro h1 { font-size: 46px; line-height: 1.08; letter-spacing: -0.015em; font-weight: 600; margin-bottom: 24px; }
.tv-about-intro p { font-size: 18px; line-height: 1.65; color: var(--tv-body); }

.tv-about-photo { padding: 56px var(--tv-pad) 0; }
.tv-about-photo .tv-ph { height: 360px; padding: 20px; }
.tv-about-photo .tv-ph__cap { font-size: 10.5px; }

.tv-stats { padding: 56px var(--tv-pad) 0; }
.tv-stats > .tv-hairline > div { padding: 32px 28px; }
/* These held single figures once. They now hold two or three words, so the
   size comes down and the line is allowed to wrap. */
.tv-stats__num {
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: 26px;
	line-height: 1.15;
	margin-bottom: 10px;
	text-wrap: balance;
}
.tv-stats__cap { font-size: 13.5px; color: var(--tv-muted); line-height: 1.45; }

.tv-two-col {
	padding: 80px var(--tv-pad) 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
}
.tv-two-col h2 { margin-bottom: 18px; }
.tv-prose { display: flex; flex-direction: column; gap: 18px; font-size: 15px; line-height: 1.65; color: var(--tv-body); }

.tv-deflist { display: flex; flex-direction: column; font-size: 14.5px; color: var(--tv-body); }
.tv-deflist > div {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	border-top: 1px solid var(--tv-border);
}
.tv-deflist dt, .tv-deflist dd { margin: 0; }
.tv-deflist dd { font-weight: 500; text-align: right; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.tv-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	padding: 80px var(--tv-pad) 96px;
	align-items: start;
}
.tv-contact h1 { font-size: 44px; line-height: 1.08; letter-spacing: -0.015em; font-weight: 600; margin-bottom: 22px; }
.tv-contact__lead { font-size: 17px; line-height: 1.65; color: var(--tv-body); margin-bottom: 36px; max-width: 460px; }
.tv-contact__list { display: flex; flex-direction: column; margin-bottom: 36px; }
.tv-contact__list > div {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 18px 0;
	border-top: 1px solid var(--tv-border);
}
.tv-contact__list > div:last-child { border-bottom: 1px solid var(--tv-border); }
.tv-contact__value { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.tv-contact__value--sm { font-size: 16px; line-height: 1.5; font-weight: 400; }
.tv-contact__map { height: 240px; padding: 16px; }
.tv-contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* .tv-ph is flex/align-items:flex-end for the caption; an embed must fill instead. */
.tv-contact__map.has-embed { padding: 0; align-items: stretch; background: var(--tv-fill-b); }
.tv-contact__map.has-embed > * { flex: 1; min-width: 0; }

.tv-quote {
	border: 1px solid var(--tv-border);
	background: #fff;
	padding: 34px 36px;
}
.tv-quote__title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.tv-quote__sub { font-size: 13.5px; color: var(--tv-muted); margin-bottom: 26px; }
.tv-quote__form { display: flex; flex-direction: column; gap: 16px; }
.tv-quote__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tv-quote__form .tv-btn { margin-top: 4px; padding: 16px; font-size: 14px; }
.tv-quote__fine { font-size: 12px; color: var(--tv-label); text-align: center; }

.tv-notice {
	border: 1px solid var(--tv-border);
	background: var(--tv-page);
	padding: 14px 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tv-body);
	margin-bottom: 20px;
}
.tv-notice--ok { border-color: var(--tv-navy); }
.tv-notice--err { border-color: #9B2C2C; color: #7B2020; }
/* Not an error: the booking goes through. Brass because it is the same thing
   the badge on a price says — pay attention, this one is different. */
.tv-notice--warn { border-color: var(--tv-brass); background: #FDF8EF; }

/* The short notice warning sits inside the two-column field grid and has to
   cross it, or it reads as a caption under the time field alone. */
.tv-field--wide { grid-column: 1 / -1; margin: -4px 0 0; }

/* Honeypot */
.tv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Simple pages / archive / 404
   -------------------------------------------------------------------------- */

.tv-confirm__cancel { margin-top: 26px; font-size: 14px; color: var(--tv-muted); }
.tv-confirm__cancel a { text-decoration: underline; text-underline-offset: 3px; }
.tv-confirm__cancel span { display: block; margin-top: 4px; font-size: 13px; }

/* Reviews. Quoted, not embedded: a widget from a review site would drag a
   third party's script and cookies onto a page that needs neither. */
.tv-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--tv-border); border: 1px solid var(--tv-border); }
.tv-review { margin: 0; background: #fff; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.tv-review__stars { color: var(--tv-brass); letter-spacing: 2px; font-size: 14px; }
.tv-review blockquote { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--tv-body); }
.tv-review figcaption { margin-top: auto; font-size: 13px; }
.tv-review figcaption b { display: block; }
.tv-review figcaption span { color: var(--tv-muted); }

@media (max-width: 900px) {
	.tv-reviews__grid { grid-template-columns: 1fr; }
}

/* The rating under the booking form. One line, no badge, no box: it is a fact
   a guest can click through to, not a decoration. */
.tv-rating { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px var(--tv-pad) 0; font-size: 14px; color: var(--tv-muted); flex-wrap: wrap; }
.tv-rating__stars { color: var(--tv-brass); letter-spacing: 2px; font-size: 15px; }
.tv-rating a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.tv-popular__more { margin-top: 22px; font-size: 14px; }
.tv-popular__more a { text-decoration: underline; text-underline-offset: 3px; }

.tv-credits { font-size: 12px; color: var(--tv-muted); margin: 0 0 8px; }
.tv-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Route pages ------------------------------------------------------------
   A leg on its own page: the same two-column detail layout the tours use, but
   with a price table instead of a gallery, because the price is what the guest
   came for. */
.tv-detail--route { padding-top: 72px; }

.tv-route-prices { display: flex; flex-direction: column; gap: 1px; background: var(--tv-border); border: 1px solid var(--tv-border); margin-bottom: 44px; }
.tv-route-price { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; padding: 18px 22px; flex-wrap: wrap; }
.tv-route-price__name { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tv-route-price__name > b { font-size: 16px; }
.tv-route-price__note { font-size: 13px; color: var(--tv-muted); }
.tv-route-price__amount { text-align: right; }
.tv-route-price__amount b { display: block; font-size: 22px; font-weight: 600; }
.tv-route-price__amount span { font-size: 12px; color: var(--tv-muted); }

.tv-rules { margin: 0 0 44px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--tv-body); max-width: 680px; }

.tv-route-list { display: flex; flex-direction: column; gap: 1px; background: var(--tv-border); border: 1px solid var(--tv-border); max-width: 860px; }
.tv-route-row { display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: center; gap: 20px; background: #fff; padding: 20px 24px; text-decoration: none; color: inherit; transition: background 140ms ease; }
.tv-route-row:hover { background: var(--tv-page); }
.tv-route-row__name { font-size: 17px; font-weight: 600; }
.tv-route-row__meta { font-size: 13.5px; color: var(--tv-muted); }
.tv-route-row__price { text-align: right; }
.tv-route-row__price b { display: block; font-size: 19px; font-weight: 600; }
.tv-route-row__price span { font-size: 12px; color: var(--tv-muted); }

@media (max-width: 720px) {
	.tv-route-row { grid-template-columns: 1fr auto; }
	.tv-route-row__meta { grid-column: 1 / -1; order: 3; }
}


.tv-page { padding: 80px var(--tv-pad) 96px; }
.tv-page__narrow > * { max-width: 760px; }
.tv-page h1 { font-size: 42px; line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 24px; }
.tv-page .tv-prose h2 { font-size: 24px; margin: 16px 0 0; }
.tv-page .tv-prose h3 { font-size: 18px; margin: 12px 0 0; font-weight: 700; }
.tv-page .tv-prose ul,
.tv-page .tv-prose ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.tv-page .tv-prose a { text-decoration: underline; text-underline-offset: 2px; }

.tv-archive-head { padding: 80px var(--tv-pad) 0; }
.tv-archive-head > * { max-width: 720px; }
.tv-archive-head h1 { font-size: 42px; line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; margin: 14px 0 20px; }
.tv-archive-head p { font-size: 17px; line-height: 1.65; color: var(--tv-body); }
.tv-archive-grid { padding: 40px var(--tv-pad) 96px; }

/* Season filter on the day transfers page: three plain links, the current one
   filled. Links rather than buttons, so each list is a page of its own. */
.tv-season-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 32px var(--tv-pad) 0; }
.tv-season-filter a {
	padding: 9px 18px;
	border: 1px solid var(--tv-border-light);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--tv-navy);
	text-decoration: none;
	transition: border-color 140ms ease;
}
.tv-season-filter a:hover { border-color: var(--tv-navy); }
.tv-season-filter a[aria-current="page"] { background: var(--tv-navy); border-color: var(--tv-navy); color: #fff; }
.tv-season-filter + .tv-archive-grid { padding-top: 24px; }

/* Which season a card belongs to, so the winter ones stand out in winter. */
.tv-card__season {
	align-self: flex-start;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 8px;
	margin-bottom: -4px;
	border: 1px solid currentColor;
}
.tv-card__season--winter { color: #35597E; }
.tv-card__season--summer { color: var(--tv-brass); }

/* --------------------------------------------------------------------------
   Responsive — not in the design; collapse order taken from the handoff.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	/* The bar cannot hold wordmark, nav, two numbers, EN and the CTA at once.
	   The open menu below 1024px still lists both. */
	.tv-header__phone + .tv-header__phone { display: none; }

	.tv-tour-grid { grid-template-columns: repeat(2, 1fr); }
	.tv-detail { grid-template-columns: 1.4fr 0.9fr; gap: 40px; }
	.tv-flow { grid-template-columns: 1.4fr 0.9fr; gap: 32px; }
	.tv-footer__cols { gap: 32px; }
	.tv-search__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.tv-search__cell:nth-child(2n) { border-right: 0; }
	.tv-search__cell { border-bottom: 1px solid var(--tv-border-light); }
	.tv-search__submit { grid-column: 1 / -1; padding: 18px 38px; }
}

@media (max-width: 1024px) {
	:root { --tv-gutter: 28px; }

	/* Measured at 375px: wordmark, burger, "EN" and the button came to 379px
	   against a 375px screen, so the whole page scrolled sideways by four
	   pixels. "EN" is aria-hidden decoration and the first thing that can go. */
	.tv-header__lang { display: none; }
	.tv-header { gap: 12px; }
	.tv-header__cta { padding: 12px 16px; }

	.tv-nav { display: none; }
	.tv-burger { display: flex; }
	.tv-header__phone { display: none; }

	.tv-nav.is-open {
		display: flex;
		position: absolute;
		top: var(--tv-header-h);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--tv-page);
		border-bottom: 1px solid var(--tv-border);
		padding: 8px var(--tv-pad) 20px;
		box-shadow: var(--tv-shadow-widget);
	}
	.tv-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; }
	.tv-nav.is-open a {
		padding: 14px 0;
		font-size: 15px;
		border-bottom: 1px solid var(--tv-border-light);
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	.tv-nav.is-open a[aria-current="page"]::after { left: 0; right: auto; width: 18px; bottom: 8px; }
	.tv-nav.is-open .tv-nav__phone { display: flex; color: var(--tv-link); font-weight: 700; border-bottom: 0; }
	/* One notch quieter than the number: both are there, but the phone is still
	   the faster way to reach a driver. */
	.tv-nav.is-open .tv-nav__mail { display: flex; color: var(--tv-link); font-weight: 500; border-bottom: 0; padding-top: 0; }
	/* Both numbers are listed; only the last one closes the menu's rule stack. */
	.tv-nav.is-open .tv-nav__phone:not(:last-child) { padding-bottom: 0; }

	.tv-hero { height: 520px; }
	.tv-hero h1 { font-size: 40px; }

	.tv-gallery { grid-template-columns: 1fr; }
	.tv-gallery__main { height: 320px; }
	.tv-gallery__side { grid-template-rows: 200px; grid-template-columns: 1fr 1fr; }

	.tv-detail,
	.tv-flow,
	.tv-contact,
	.tv-two-col { grid-template-columns: 1fr; gap: 40px; }

	.tv-booking-card,
	.tv-summary { position: static; }

	.tv-facts { flex-wrap: wrap; }
	.tv-facts > div { flex: 1 1 calc(50% - 1px); }

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

	.tv-band__inner { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
	.tv-section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
	.tv-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	:root { --tv-gutter: 20px; }

	.tv-hero { height: 460px; }
	.tv-hero h1 { font-size: 32px; margin: 20px 0 16px; }
	.tv-hero__lead { font-size: 15px; }
	.tv-hero__inner { padding: 0 var(--tv-pad) 70px; }

	.tv-search-wrap { margin-top: -50px; }
	.tv-search__row { grid-template-columns: 1fr; }
	.tv-search__cell { border-right: 0; }
	.tv-search__tab { padding: 16px 18px; font-size: 13px; }

	.tv-tour-grid,
	.tv-hairline--3,
	.tv-hairline--4,
	.tv-hairline--2,
	.tv-flow__grid,
	.tv-quote__pair,
	.tv-includes { grid-template-columns: 1fr; }

	.tv-facts > div { flex: 1 1 100%; }

	.tv-section { padding-top: 64px; }
	.tv-band { padding-bottom: 72px; }
	.tv-band__actions { flex-direction: column; align-items: stretch; width: 100%; }
	.tv-band__actions .tv-btn { width: 100%; }

	.tv-section-head h2 { font-size: 26px; }
	.tv-detail h1 { font-size: 30px; }
	.tv-about-intro { padding-top: 56px; }
	.tv-about-intro h1 { font-size: 32px; }
	.tv-about-intro p { font-size: 16px; }
	.tv-contact { padding-top: 56px; }
	.tv-contact h1 { font-size: 32px; }
	.tv-page h1,
	.tv-archive-head h1 { font-size: 30px; }

	.tv-quote { padding: 26px 22px; }
	.tv-confirm { padding: 28px 22px; }
	.tv-confirm h1 { font-size: 26px; }
	.tv-confirm .tv-flow__actions { flex-direction: column; align-items: stretch; }

	.tv-vehicle { grid-template-columns: 96px 1fr; gap: 16px; }
	.tv-vehicle__media { height: 68px; }
	.tv-vehicle__price { grid-column: 1 / -1; text-align: left; padding-right: 0; }

	.tv-stepper { padding: 16px var(--tv-pad); overflow-x: auto; }
	.tv-stepper__label { display: none; }
	.tv-stepper__item.is-current .tv-stepper__label { display: block; }

	.tv-recap { flex-direction: column; align-items: stretch; gap: 14px; }
	.tv-recap .tv-btn { align-self: flex-start; }

	.tv-flow__actions .tv-btn { flex: 1; }

	.tv-footer { padding: 48px var(--tv-pad) 28px; }
	.tv-footer__cols { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
	.tv-footer__legal { flex-direction: column; gap: 14px; }
	.tv-footer__legal ul { flex-wrap: wrap; gap: 16px; }

	.tv-btn { min-height: 44px; }
	.tv-nav a { min-height: 44px; }
}

@media print {
	.tv-header, .tv-footer, .tv-flow__actions, .tv-stepper { display: none !important; }
}

/* What the drive actually is, under the trip fields — the evidence behind the
   price. Quiet on purpose: it is a fact, not a selling line. */
.tv-quote-line {
	margin: -10px 0 24px;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tv-muted, #6B7280);
}

/* The way out of the transfer box for somebody who wants a whole day instead. */
.tv-search__aside {
	margin: 0;
	padding: 14px 22px;
	border-top: 1px solid var(--tv-border-light);
	font-size: 13px;
	color: var(--tv-muted);
	background: #fff;
}
.tv-search__aside a { color: var(--tv-navy); text-decoration: underline; text-underline-offset: 3px; }
.tv-search__aside a:hover { color: var(--tv-brass); }

/* The registry line above the footer's legal row. Deliberately the quietest
   type on the page — required reading, not selling. */
.tv-footer__company {
	padding-top: 26px;
	font-size: 11.5px;
	line-height: 1.7;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.42);
	max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Popular routes — the prices under the widget

   Reads as a price list, not as a card grid: a hairline between rows, the
   amount ranged right where an eye scanning for money expects it, and the
   route in the design's serif so the leg is the first thing read. Three
   columns on a wide screen, one on a phone, where it becomes a list you thumb
   down rather than a wall of boxes.
   -------------------------------------------------------------------------- */

.tv-popular__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* 1px of background showing through the gap draws every rule at once,
	   so no cell has to know whether it is on an edge. */
	gap: 1px;
	background: var(--tv-border);
	border: 1px solid var(--tv-border);
}

.tv-popular__link {
	display: grid;
	/* The leg and its facts on the left, the money on the right, on both rows
	   — so the amounts line up down the column whatever the route is called. */
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 18px;
	row-gap: 4px;
	height: 100%;
	padding: 20px 22px;
	background: var(--tv-white);
	text-decoration: none;
	color: inherit;
	transition: background-color 140ms ease;
}
.tv-popular__link:hover,
.tv-popular__link:focus-visible { background: var(--tv-fill-b); }

.tv-popular__leg {
	font-family: var(--tv-serif);
	font-size: 16px;
	line-height: 1.35;
	color: var(--tv-navy);
	/* The arrow and the two places wrap as one phrase rather than the arrow
	   ending up alone at the start of a line. */
	display: block;
}
.tv-popular__arrow { color: var(--tv-brass); padding: 0 4px; }

.tv-popular__facts {
	grid-column: 1;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tv-muted);
}

.tv-popular__price {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
}
.tv-popular__from-label {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tv-label);
}
.tv-popular__amount {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tv-navy);
}

/* Without this the cheapest car's price reads as a price per person. */
.tv-popular__who {
	grid-column: 2;
	grid-row: 2;
	text-align: right;
	font-size: 12px;
	color: var(--tv-muted);
	white-space: nowrap;
}

@media (max-width: 1080px) {
	.tv-popular__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.tv-popular__grid { grid-template-columns: 1fr; }
	.tv-popular__link { padding: 16px 18px; }
	.tv-popular__leg { font-size: 15px; }
	/* On one column the party size under the amount pushes the rows apart for
	   no gain — it goes back on the facts line instead. */
	.tv-popular__who { grid-column: 1; grid-row: 2; text-align: left; }
	.tv-popular__facts { grid-column: 1; grid-row: 3; }
}

/* Stands in for the price while there is none: the summary used to show a
   column of dashes before the two addresses were in, which reads as a fault
   rather than as a form still being filled. */
/* Sits between the priced lines and the total, so it carries the same side
   padding they do. Without it the sentence ran to both edges of the card while
   every line above and below it was indented, which reads as a mistake. */
.tv-summary__awaiting {
	margin: 0;
	padding: 2px 24px 16px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--tv-muted);
}
.tv-summary__awaiting[hidden] { display: none; }