/**
 * Farearc.
 *
 * One stylesheet, no build step. Tokens first, then elements, then components.
 *
 * Palette rule that is easy to break and matters: orange is a CTA and accent
 * colour only, and it never carries white text. Ink on orange, always. There is
 * a contrast reason and a brand reason and they point the same way.
 */

/* ---------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------ */

:root {
	--ink: #052635;
	--paper: #FBFBF8;
	--blue: #0E93E0;
	--blue-deep: #0B76B5;
	--orange: #F36326;
	--sky: #EAF5FC;

	/* Derived, not brand tokens. Kept separate so nobody mistakes them. */
	--muted: #5B7382;
	--line: #D8E4EC;
	--warn: #8A6D00;

	--font-display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	/* No monospace anywhere. What used to be set in mono (codes, dates, labels)
	   is the body face with tabular figures, which reads as data without
	   reading as a terminal. The variable stays so old rules keep resolving. */
	--font-mono: var(--font-body);

	--wrap: 74rem;
	--wrap-narrow: 44rem;
	--gap: 1.5rem;
	--radius: 12px;
	--radius-lg: 20px;
	--shadow-sm: 0 1px 2px rgba(5, 38, 53, 0.06), 0 2px 8px rgba(5, 38, 53, 0.04);
	--shadow-md: 0 2px 6px rgba(5, 38, 53, 0.06), 0 14px 32px -12px rgba(5, 38, 53, 0.22);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	--step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
	--step-2: clamp(1.65rem, 1.35rem + 1.5vw, 2.6rem);
	--step-3: clamp(2.4rem, 1.7rem + 3.4vw, 4.5rem);
}

/* Font files are not in the repository. Drop the woff2 files into
   assets/fonts/ and these pick them up. Until then the fallback stack renders
   and nothing breaks. */
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/BricolageGrotesque-Bold.woff2") format("woff2");
	font-weight: 700 800;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/InstrumentSans-Regular.woff2") format("woff2");
	font-weight: 400 600;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchored sections land below the sticky header, not under it. */
	scroll-padding-top: 6.5rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	/* Room for the sticky bar on small screens. */
	padding-bottom: 4.5rem;
}

@media (min-width: 48em) {
	body {
		padding-bottom: 0;
	}
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: var(--step-3); letter-spacing: -0.04em; }
h2 { font-size: var(--step-2); margin-top: 1.6em; }
h3 { font-size: var(--step-1); margin-top: 1.4em; font-weight: 700; }

/* The departure-board voice. Mono is a design element here, not a label size. */
.eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue-deep);
	margin-bottom: 0.9rem;
}

p, ul, ol, table, figure {
	margin: 0 0 1.1em;
}

p {
	max-width: 72ch;
	text-wrap: pretty;
}

a {
	color: var(--blue-deep);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

a:hover,
a:focus-visible {
	color: var(--ink);
}

/* Links inside running text still need to look like links, so they get a
   soft rule that fills in on hover rather than a hard underline. */
.entry-content a,
.answer-capsule a,
.callback__foot a,
.faq__a a,
.desk-note a,
.route-notice a,
.privacy-note a,
.lede a {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 1px;
	transition: background-size 0.25s var(--ease), color 0.2s var(--ease);
}

.entry-content a:hover,
.answer-capsule a:hover,
.callback__foot a:hover,
.faq__a a:hover,
.desk-note a:hover,
.route-notice a:hover,
.privacy-note a:hover,
.lede a:hover {
	background-size: 100% 2px;
}

/* A standalone link: text and an arrow that moves. */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 600;
	color: var(--ink);
}

.link-arrow::after {
	content: "\2192";
	color: var(--orange);
	transition: transform 0.25s var(--ease);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
	transform: translateX(4px);
}

:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
	border-radius: 3px;
}

strong { font-weight: 600; }

.mono,
code,
time.stamp {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.5rem 0;
}

/* ---------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------ */

.wrap {
	width: min(100% - 2.5rem, var(--wrap));
	margin-inline: auto;
}

.wrap.narrow,
.narrow {
	width: min(100% - 2.5rem, var(--wrap-narrow));
	margin-inline: auto;
}

.site-main {
	display: block;
	padding-block: 1.25rem 2.5rem;
}

.section {
	margin-block: 2.25rem;
}

.section--tint {
	background: var(--sky);
	padding-block: 2.25rem;
	margin-block: 2.25rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 999;
	width: auto;
	height: auto;
	clip-path: none;
	background: var(--ink);
	color: var(--paper);
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--step-0);
	line-height: 1.2;
	padding: 0.85em 1.5em;
	border: 1.5px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

/* Ink on orange. Never white on orange. */
.btn--primary {
	background: var(--orange);
	color: var(--ink);
	border-color: var(--orange);
	box-shadow: 0 6px 18px -8px rgba(243, 99, 38, 0.7);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: #e05517;
	border-color: #e05517;
	color: var(--ink);
}

.btn--secondary {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: var(--ink);
	color: var(--paper);
}

.btn--tertiary {
	background: none;
	border: 0;
	padding-inline: 0.5em;
	color: var(--ink);
}

.btn--tertiary::after {
	content: "\2192";
	color: var(--orange);
	transition: transform 0.25s var(--ease);
}

.btn--tertiary:hover {
	transform: none;
}

.btn--tertiary:hover::after {
	transform: translateX(4px);
}

.btn--sm {
	font-size: var(--step--1);
	padding: 0.55em 0.9em;
}

.cta-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-block: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Header and footer
   ------------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	border-bottom: 1px solid transparent;
	background: rgba(251, 251, 248, 0.82);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.site-header.is-scrolled {
	border-bottom-color: var(--line);
	box-shadow: 0 8px 24px -18px rgba(5, 38, 53, 0.35);
}

.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	padding-block: 1rem;
}

.site-brand {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.site-brand a {
	color: var(--ink);
	text-decoration: none;
	display: block;
	line-height: 0;
}

/* The supplied logo is a stacked lockup, mark above wordmark, so it is sized by
   height. 56px keeps the wordmark legible without making the header tall. */
.site-brand__logo {
	display: block;
	height: 56px;
	width: auto;
}

@media (max-width: 48em) {
	.site-brand__logo {
		height: 46px;
	}
}

.site-nav {
	flex: 1 1 auto;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	position: relative;
	color: var(--ink);
	font-weight: 500;
	padding-block: 0.3rem;
}

.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: var(--orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--ease);
}

.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after {
	transform: scaleX(1);
}

.site-header__cta {
	display: none;
	gap: 0.5rem;
}

@media (min-width: 48em) {
	.site-header__cta {
		display: flex;
	}
}

.site-footer {
	background: var(--ink);
	color: var(--paper);
	padding-block: 3rem 2rem;
	margin-top: 4rem;
}

.site-footer a {
	color: var(--sky);
}

.footer-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.footer-col__title {
	font-size: var(--step-0);
	margin: 0 0 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(234, 245, 252, 0.6);
}

.site-footer a {
	transition: color 0.2s var(--ease);
}

.site-footer a:hover {
	color: #fff;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.footer-phone a {
	font-size: 1.15rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.footer-bottom {
	border-top: 1px solid rgba(251, 251, 248, 0.18);
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	font-size: var(--step--1);
}

.footer-legal {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0.5rem 0 0;
	padding: 0;
}

.trust-line {
	max-width: none;
}

/* ---------------------------------------------------------------------------
   Sticky bar. Every page, WhatsApp first.
   ------------------------------------------------------------------------ */

.sticky-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 50;
	display: flex;
	border-top: 1px solid var(--line);
	background: var(--paper);
	box-shadow: 0 -2px 12px rgba(5, 38, 53, 0.09);
}

.sticky-bar__item {
	flex: 1;
	text-align: center;
	padding: 0.95rem 0.5rem;
	font-weight: 600;
	font-size: var(--step--1);
	text-decoration: none;
	color: var(--ink);
}

.sticky-bar__item--primary {
	background: var(--orange);
	color: var(--ink);
}

@media (min-width: 48em) {
	.sticky-bar {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Answer capsule. Every page opens with one.
   ------------------------------------------------------------------------ */

.answer-capsule {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.6rem 1.75rem;
	margin-block: 1.5rem 2rem;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.answer-capsule::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: linear-gradient(180deg, var(--blue), var(--orange));
}

.answer-capsule p {
	margin: 0;
	font-size: var(--step-1);
	line-height: 1.5;
	max-width: 62ch;
}

.answer-capsule p + p {
	margin-top: 0.6em;
	font-size: var(--step-0);
}

.lede {
	font-size: var(--step-1);
	color: var(--ink);
	max-width: 60ch;
}

/* ---------------------------------------------------------------------------
   Fare block. The 14-day rule is visible here.
   ------------------------------------------------------------------------ */

.fare-block {
	border: 1px solid var(--line);
	background: #fff;
	box-shadow: var(--shadow-sm);
	border-radius: var(--radius-lg);
	padding: 1.25rem 1.4rem;
	margin-block: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
}

.fare-block__amount {
	font-family: var(--font-display);
	font-size: var(--step-3);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.fare-block__meta {
	font-variant-numeric: tabular-nums;
	font-size: var(--step--1);
	color: var(--muted);
}

.fare-block__stamp {
	flex-basis: 100%;
	font-variant-numeric: tabular-nums;
	font-size: var(--step--1);
	color: var(--muted);
	margin: 0;
}

/* The stale state. No number, muted date, an invitation instead. */
.fare-block--stale,
.fare-block--none {
	border-color: var(--line);
	background: var(--paper);
}

.fare-block--stale .fare-block__ask,
.fare-block--none .fare-block__ask {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 700;
	margin: 0;
	flex-basis: 100%;
}

.fare-block--stale .fare-block__stamp {
	color: var(--muted);
	opacity: 0.75;
}

.fare-block__note {
	flex-basis: 100%;
	margin: 0.4rem 0 0;
	font-size: var(--step--1);
	color: var(--muted);
	max-width: 58ch;
}

/* ---------------------------------------------------------------------------
   Notices for the honest edge cases
   ------------------------------------------------------------------------ */

.route-notice {
	border: 1px solid var(--line);
	border-left: 4px solid var(--blue-deep);
	background: var(--sky);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 1.1rem 1.3rem;
	margin-block: 1.5rem;
}

.route-notice h2,
.route-notice h3 {
	margin-top: 0;
	font-size: var(--step-1);
}

.route-notice p:last-child {
	margin-bottom: 0;
}

.route-notice--seasonal {
	border-left-color: var(--orange);
}

/* ---------------------------------------------------------------------------
   Cards, boards, tables
   ------------------------------------------------------------------------ */

.card-grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	margin-block: 1.5rem;
}

.card {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.25rem 1.35rem;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}

.card__title {
	margin: 0;
	font-size: var(--step-1);
}

.card__title a {
	text-decoration: none;
	color: var(--ink);
}

/* The whole card is the link. */
.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.card__body {
	margin: 0;
	font-size: var(--step--1);
	color: var(--muted);
}

/* The route board. A photograph of where you are going, the stop count on it,
   and underneath the price and the day we last checked it. */
.card-grid--routes {
	grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.route-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.route-card:hover,
.route-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}

.route-card[hidden] {
	display: none;
}

.route-card p {
	margin: 0;
	max-width: none;
}

.route-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--sky), #d9ecf8);
	overflow: hidden;
}

.route-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.route-card:hover .route-card__media img {
	transform: scale(1.06);
}

.route-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 38, 53, 0) 45%, rgba(5, 38, 53, 0.35) 100%);
	pointer-events: none;
}

.route-card__tags {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.route-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1rem 1.15rem 1.1rem;
}

.route-card__title {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.route-card__link {
	color: var(--ink);
}

/* The whole card is the link. */
.route-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.route-card__arrow {
	display: inline-block;
	color: var(--orange);
	margin-inline: 0.1em;
	transition: transform 0.3s var(--ease);
}

.route-card:hover .route-card__arrow {
	transform: translateX(3px);
}

.route-card__codes {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.route-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.9rem;
}

.route-card__fare {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.route-card__from {
	display: block;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--muted);
	margin-bottom: 0.2rem;
}

.route-card__ask {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ink);
}

.route-card__stamp {
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Board filters. Rendered hidden and switched on by the script, so without it
   the board is simply every route. */
.board__tools {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block: 1.5rem 1.25rem;
}

.board__tools .route-search {
	margin: 0;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.chips__sep {
	width: 1px;
	height: 1.5rem;
	margin-inline: 0.25rem;
	background: var(--line);
}

.chip {
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.5em 1em;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.chip:hover {
	border-color: var(--ink);
}

.chip.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.board__empty {
	padding: 1.5rem;
	border: 1px dashed var(--line);
	border-radius: var(--radius-lg);
	color: var(--muted);
}

.board__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 1.75rem;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.3em 0.75em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
	border: 1px solid rgba(5, 38, 53, 0.08);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.badge--nonstop {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}

.badge--nonstop::before {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: var(--orange);
}

.badge--lane {
	background: var(--orange);
	color: var(--ink);
	border-color: var(--orange);
}

.badge--seasonal,
.badge--soon {
	background: #FFF8E6;
	color: var(--warn);
	border-color: var(--warn);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1);
}

th,
td {
	text-align: left;
	padding: 0.7rem 0.8rem;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

th {
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.table-scroll {
	overflow-x: auto;
	margin-block: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Desk notes. The one thing competitors cannot copy, so it looks like it.
   ------------------------------------------------------------------------ */

.desk-note {
	background: var(--sky);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.6rem;
	margin-block: 2rem;
}

.desk-note__label {
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--blue-deep);
	margin: 0 0 0.6rem;
}

.desk-note p:last-child {
	margin-bottom: 0;
}

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

.faq {
	margin-block: 2.5rem;
}

.faq__item {
	border-bottom: 1px solid var(--line);
	padding-block: 1.1rem;
}

.faq__q {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 700;
	margin: 0 0 0.4rem;
}

.faq__a {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Breadcrumbs, meta
   ------------------------------------------------------------------------ */

.breadcrumbs {
	font-size: var(--step--1);
	color: var(--muted);
	margin-block: 0 1rem;
}

.breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}

.breadcrumbs a {
	color: var(--muted);
}

.breadcrumbs a:hover {
	color: var(--ink);
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.4rem;
	color: var(--line);
}

.last-updated {
	font-variant-numeric: tabular-nums;
	font-size: var(--step--1);
	color: var(--muted);
}

/* ---------------------------------------------------------------------------
   SVG components
   ------------------------------------------------------------------------ */

.fa-svg {
	display: block;
	width: 100%;
	height: auto;
	margin-block: 1.5rem;
	font-family: var(--font-body);
}

.fa-svg .mono {
	font-weight: 600;
	letter-spacing: 0.04em;
}

.diagram-figure {
	margin: 2rem 0;
}

.diagram-figure figcaption {
	font-size: var(--step--1);
	color: var(--muted);
	text-align: center;
	margin-top: 0.4rem;
}

/* ---------------------------------------------------------------------------
   Verify ticket tool
   ------------------------------------------------------------------------ */

.verify-tool {
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	margin-block: 2rem;
	background: var(--paper);
}

.verify-tool__row {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-bottom: 1rem;
}

@media (min-width: 40em) {
	.verify-tool__row {
		grid-template-columns: 1fr 1fr auto;
		align-items: end;
	}
}

.verify-tool label {
	display: block;
	font-weight: 600;
	font-size: var(--step--1);
	margin-bottom: 0.3rem;
}

.verify-tool select,
.verify-tool input {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--step-0);
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
}

.verify-tool input#farearc-pnr {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.verify-tool__status {
	font-size: var(--step--1);
	margin: 0;
	min-height: 1.5em;
}

.verify-tool__status[data-state="error"] {
	color: #B32D2E;
}

.privacy-note {
	background: var(--sky);
	border-radius: var(--radius);
	padding: 1.2rem 1.3rem;
	font-size: var(--step--1);
}

.privacy-note p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Typeahead. Replaces the inline airport list that made the old homepage read
   as a glossary to crawlers.
   ------------------------------------------------------------------------ */

.route-search {
	position: relative;
	max-width: 32rem;
	margin-block: 1.5rem;
}

.route-search input {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--step-0);
	padding: 0.9rem 1.1rem 0.9rem 2.9rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B7382' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1.1rem 50%;
	color: var(--ink);
	box-shadow: var(--shadow-sm);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.route-search input:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 4px rgba(14, 147, 224, 0.15);
}

.route-search__results {
	position: absolute;
	inset: calc(100% + 4px) 0 auto 0;
	z-index: 20;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	max-height: 18rem;
	overflow-y: auto;
	box-shadow: 0 8px 24px rgba(5, 38, 53, 0.12);
}

.route-search__results:empty {
	display: none;
}

.route-search__results li a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.65rem 0.9rem;
	text-decoration: none;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
}

.route-search__results li:last-child a {
	border-bottom: 0;
}

.route-search__results li a:hover,
.route-search__results li a:focus-visible,
.route-search__results li[aria-selected="true"] a {
	background: var(--sky);
}

.route-search__codes {
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Hero and homepage
   ------------------------------------------------------------------------ */

.hero {
	padding-block: 2rem 0.5rem;
}

/* With no photograph the arc carries the hero on its own, full width under the
   copy, rather than leaving a column of nothing where the picture would go. */
.hero__arcband {
	grid-column: 1 / -1;
	margin-top: 0.5rem;
}

.hero__arcband svg {
	display: block;
	width: 100%;
	max-height: 11rem;
}

.hero__inner {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 56em) {
	.hero--has-media .hero__inner {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.hero h1 {
	margin-bottom: 0.4em;
}

.hero__sub {
	font-size: var(--step-1);
	color: var(--ink);
	max-width: 52ch;
	line-height: 1.45;
}

/* The arc overlays in HTML rather than being baked into the photograph, so it
   stays crisp at any size. When there is no hero image the arc renders alone
   and the layout holds. */
.hero__media {
	position: relative;
}

.hero__media img {
	display: block;
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

/* The route arc on the hero photograph draws itself once, then the dashes
   keep drifting toward India. */
.hero__arc path {
	stroke-dasharray: 8 7;
	animation: fa-arc-flow 1.6s linear infinite;
}

@keyframes fa-arc-flow {
	to {
		stroke-dashoffset: -30;
	}
}

.hero__arc {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	margin: 0;
}

.trust-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2.25rem;
	padding-block: 1.25rem;
	border-block: 1px solid var(--line);
	margin-block: 2rem;
}

.trust-row p {
	margin: 0;
}

.trust-row__mark {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--step--1);
	color: var(--ink);
}

.trust-row__mark a {
	color: var(--ink);
	font-weight: 500;
}

.trust-row__mark a:hover {
	color: var(--blue-deep);
}

.trust-row__icon {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--sky);
	color: var(--blue-deep);
	flex: none;
}

.trust-row__icon svg {
	display: block;
}

.trust-row__years {
	font-weight: 600;
}

.situation-grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* The page photograph. Wider than the prose column on purpose: the text stays
   readable at 72ch while the picture gets room to be a picture. */
.page-media {
	margin: 0 0 1.75rem;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--sky);
}

.page-media img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	max-height: 26rem;
	object-fit: cover;
}

/* The answer capsule has to stay near the top, because it is the passage a
   retrieval system lifts. A banner crop keeps the picture doing its job
   without pushing the capsule off the first screen. */
@media (max-width: 48em) {
	.page-media img {
		aspect-ratio: 16 / 10;
	}
}

@media (min-width: 62em) {
	.narrow .page-media {
		width: calc(100% + 8rem);
		margin-left: -4rem;
	}
}

.icon-slot {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.9rem;
}

.situation-card {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	text-decoration: none;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	background: #fff;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.situation-card:hover,
.situation-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
	color: var(--ink);
}

.situation-card .icon-slot {
	box-sizing: content-box;
	width: 30px;
	height: 30px;
	padding: 12px;
	margin-bottom: 0.4rem;
	border-radius: 14px;
	background: var(--sky);
	transition: background-color 0.3s var(--ease);
}

.situation-card:hover .icon-slot {
	background: #FFE9DE;
}

.situation-card__more {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--blue-deep);
	transition: color 0.2s var(--ease);
}

.situation-card:hover .situation-card__more {
	color: var(--orange);
}

.situation-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--step-1);
	margin: 0;
}

.situation-card__body {
	font-size: var(--step--1);
	color: var(--muted);
	margin: 0;
}

/* An icon slot that collapses cleanly when no file exists. Missing images are
   not gates. They render nothing and the layout holds. */
/* The page photograph. Wider than the prose column on purpose: the text stays
   readable at 72ch while the picture gets room to be a picture. */
.page-media {
	margin: 0 0 1.75rem;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--sky);
}

.page-media img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	max-height: 26rem;
	object-fit: cover;
}

/* The answer capsule has to stay near the top, because it is the passage a
   retrieval system lifts. A banner crop keeps the picture doing its job
   without pushing the capsule off the first screen. */
@media (max-width: 48em) {
	.page-media img {
		aspect-ratio: 16 / 10;
	}
}

@media (min-width: 62em) {
	.narrow .page-media {
		width: calc(100% + 8rem);
		margin-left: -4rem;
	}
}

.icon-slot {
	display: block;
	width: 40px;
	height: 40px;
}

.icon-slot:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
   Callback form, the tertiary CTA
   ------------------------------------------------------------------------ */

.callback {
	display: grid;
	gap: 1.5rem 3rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	margin-block: 3rem;
}

@media (min-width: 60em) {
	.callback {
		grid-template-columns: 0.8fr 1.2fr;
		align-items: start;
	}
}

.callback__intro h2 {
	margin-top: 0;
}

.callback__intro p {
	color: var(--muted);
}

.callback__fields {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 36em) {
	.callback__fields {
		grid-template-columns: 1fr 1fr;
	}
}

.callback__wide {
	grid-column: 1 / -1;
}

.callback label {
	display: block;
	font-weight: 600;
	font-size: var(--step--1);
	margin-bottom: 0.35rem;
}

.callback input,
.callback textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--step-0);
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

.callback textarea {
	resize: vertical;
	min-height: 5.5rem;
}

.callback input::placeholder,
.callback textarea::placeholder {
	color: #9AADB9;
}

.callback input:focus,
.callback textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--blue);
	box-shadow: 0 0 0 4px rgba(14, 147, 224, 0.15);
}

.callback__submit {
	margin: 1.25rem 0 0;
}

.callback__foot {
	font-size: var(--step--1);
	color: var(--muted);
	margin: 1rem 0 0;
}

/* ---------------------------------------------------------------------------
   CTA band
   ------------------------------------------------------------------------ */

.cta-band {
	position: relative;
	overflow: hidden;
	background: radial-gradient(120% 140% at 100% 0%, #0B4F77 0%, var(--ink) 55%);
	color: var(--paper);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
	margin-block: 3rem;
}

.cta-band::after {
	content: "";
	position: absolute;
	right: -4rem;
	bottom: -7rem;
	width: 22rem;
	height: 22rem;
	border: 2px dashed rgba(14, 147, 224, 0.35);
	border-radius: 50%;
	pointer-events: none;
}

.cta-band h2 {
	margin-top: 0;
	color: var(--paper);
}

.cta-band p {
	color: var(--sky);
}

.cta-band .btn--secondary {
	color: var(--paper);
	border-color: var(--paper);
}

.cta-band .btn--secondary:hover {
	background: var(--paper);
	color: var(--ink);
}

.cta-band .btn--tertiary {
	color: #fff;
}

/* The bereavement register. No band, no urgency, just a way to reach a person.
   The restraint is the brand. */
.register-gentle .cta-band {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
	padding: 1.5rem 0 0;
	border-inline: 0;
	border-bottom: 0;
	border-radius: 0;
}

.register-gentle .cta-band h2 {
	color: var(--ink);
	font-size: var(--step-1);
}

.register-gentle .cta-band p {
	color: var(--ink);
}

.register-gentle .cta-band .btn--secondary {
	color: var(--ink);
	border-color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Related links
   ------------------------------------------------------------------------ */

.related {
	margin-block: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.related__title {
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin: 0 0 0.6rem;
}

.related__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	font-size: var(--step--1);
}

.related__list a {
	display: inline-block;
	padding: 0.45em 0.95em;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.related__list a:hover {
	border-color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Reviews
   ------------------------------------------------------------------------ */

.review {
	border-left: 3px solid var(--blue);
	padding-left: 1.1rem;
	margin-block: 1.5rem;
}

.review blockquote {
	margin: 0 0 0.4rem;
	font-size: var(--step-1);
}

.review figcaption {
	font-size: var(--step--1);
	color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Print
   ------------------------------------------------------------------------ */

@media print {
	.sticky-bar,
	.site-header__cta,
	.cta-band,
	.callback,
	.route-search {
		display: none !important;
	}

	body {
		padding-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
   Steps. Numbered cards, joined by a line on wide screens.
   ------------------------------------------------------------------------ */

.steps {
	list-style: none;
	margin: 2rem 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	counter-reset: none;
}

.steps__item {
	position: relative;
	padding: 1.4rem 1.35rem 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.steps__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.steps__num {
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	margin-bottom: 1rem;
}

.steps__item:last-child .steps__num {
	background: var(--orange);
	color: var(--ink);
}

.steps__label {
	margin: 0 0 0.35rem;
	font-size: 1.2rem;
}

.steps__body {
	margin: 0;
	font-size: var(--step--1);
	color: var(--muted);
}

@media (min-width: 60em) {
	.steps__item:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 2.7rem;
		right: -1rem;
		width: 1rem;
		height: 2px;
		background: var(--line);
	}
}

/* ---------------------------------------------------------------------------
   Motion. Sections ease in as they arrive. Only when the script is running,
   and never for someone who has asked for less motion.
   ------------------------------------------------------------------------ */

.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
	transition-delay: var(--reveal-delay, 0s);
}

.js-reveal [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.hero__arc path {
		animation: none;
	}
}

/* Section titles on the homepage get more room than body h2s. */
.section > .wrap > h2:first-child {
	margin-top: 0;
}

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

.section--tint {
	padding-block: clamp(3rem, 2rem + 3vw, 5rem);
	background: linear-gradient(180deg, var(--sky), #F3F9FD);
}

/* ---------------------------------------------------------------------------
   Small screens. A sticky header has to be one short row, and the filter
   chips scroll sideways rather than stacking four deep.
   ------------------------------------------------------------------------ */

@media (max-width: 48em) {
	.site-header__inner {
		flex-wrap: nowrap;
		gap: 1rem;
		padding-block: 0.6rem;
	}

	.site-brand__logo {
		height: 40px;
	}

	.site-nav {
		min-width: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.site-nav::-webkit-scrollbar {
		display: none;
	}

	.site-nav__list {
		flex-wrap: nowrap;
		gap: 1.1rem;
		white-space: nowrap;
		font-size: 0.95rem;
	}

	.chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: -1.25rem;
		padding: 0.25rem 1.25rem;
		scrollbar-width: none;
	}

	.chips::-webkit-scrollbar {
		display: none;
	}

	.chip {
		flex: none;
	}

	.route-card__media {
		aspect-ratio: 2 / 1;
	}
}