/* Self-hosted fonts (17 September 2026). Variable woff2 files copied from Google Fonts
   into wp-content/uploads/htt-vendor/fonts/; nothing is fetched from Google any more.
   Licences: Fraunces, Inter and Source Serif 4 are all SIL Open Font Licence. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('/wp-content/uploads/htt-vendor/fonts/fraunces-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('/wp-content/uploads/htt-vendor/fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/wp-content/uploads/htt-vendor/fonts/fraunces-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/wp-content/uploads/htt-vendor/fonts/fraunces-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/wp-content/uploads/htt-vendor/fonts/inter-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/wp-content/uploads/htt-vendor/fonts/inter-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url('/wp-content/uploads/htt-vendor/fonts/source-serif-4-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url('/wp-content/uploads/htt-vendor/fonts/source-serif-4-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url('/wp-content/uploads/htt-vendor/fonts/source-serif-4-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url('/wp-content/uploads/htt-vendor/fonts/source-serif-4-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ===========================================================
   Heathrow Travel Tips — Master Custom CSS
   Paste-into-target: Appearance -> Custom CSS (Simple Custom CSS)
   Sections:
   1. Blocksy chrome strip on hotel singles
   2. Hotel single page (.htt-* classes ported from mockup)
   =========================================================== */

:root {
	--htt-navy: #1D2234;
	--htt-navy-soft: #2A3148;
	--htt-amber: #E1963D;
	--htt-amber-soft: #EBB874;
	--htt-stone: #F4F1EA;
	--htt-cream: #FAF7F0;
	--htt-white: #FFFFFF;
	--htt-ink: #1D2234;
	--htt-muted: #6B7280;
	--htt-line: #E5E0D5;
	/* Shared page-shell width cap. Single source of truth for the centred
	   container used by header, hero, content layout, footer, directory and
	   place pages. Raise/lower here (or set 100% for full-bleed) to change the
	   side margins site-wide. Was a hardcoded 1280px in ~14 places. */
	--htt-max: 1520px;
}

/* ===========================================================
   SECTION 1 - Blocksy chrome strip
   The shortcode renders its own header + footer. Hide
   Blocksy's defaults on hotel singles so they don't double up.
   =========================================================== */

body.single-hotel header[data-id="header"],
body.single-hotel .ct-header,
body.single-hotel #header,
body.single-hotel .site-header,
body.single-hotel footer[data-id="footer"],
body.single-hotel .ct-footer,
body.single-hotel #footer,
body.single-hotel .site-footer,
body.htt-no-blocksy-chrome header[data-id="header"],
body.htt-no-blocksy-chrome .ct-header,
body.htt-no-blocksy-chrome #header,
body.htt-no-blocksy-chrome .site-header,
body.htt-no-blocksy-chrome footer[data-id="footer"],
body.htt-no-blocksy-chrome .ct-footer,
body.htt-no-blocksy-chrome #footer,
body.htt-no-blocksy-chrome .site-footer {
	display: none !important;
}

body.single-hotel .entry-header,
body.single-hotel .entry-title,
body.single-hotel .ct-container,
body.single-hotel .ct-main-styles-wrapper > .ct-container {
	display: none !important;
}

body.single-hotel main,
body.single-hotel main.site-main,
body.single-hotel .content-area,
body.single-hotel .ct-main-styles-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

body.single-hotel article,
body.single-hotel article.post,
body.single-hotel article.hotel {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

body.single-hotel .entry-content {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

/* Force full width on hotel singles — override every Blocksy container variant */
body.single-hotel #main,
body.single-hotel .ct-main,
body.single-hotel .ct-container,
body.single-hotel [class*="ct-container"],
body.single-hotel article,
body.single-hotel article.hotel,
body.single-hotel .ct-page-wrapper,
body.single-hotel .entry-content,
body.single-hotel .entry-content > .htt-page {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.single-hotel .ct-sidebar,
body.single-place .ct-sidebar { display: none !important; }

/* Guide single posts: full-bleed like hotels, but the article lives inside
   the_content, so widen the containers WITHOUT hiding entry-content. */
body.htt-single-guide .entry-header,
body.htt-single-guide .page-title,
body.htt-single-guide .hero-section,
body.htt-single-guide .entry-card-meta,
body.htt-single-guide .ct-featured-image,
body.htt-single-guide .ct-sidebar { display: none !important; }

body.htt-single-guide main,
body.htt-single-guide main.site-main,
body.htt-single-guide .content-area,
body.htt-single-guide .ct-main-styles-wrapper,
body.htt-single-guide #main,
body.htt-single-guide .ct-main,
body.htt-single-guide .ct-container,
body.htt-single-guide [class*="ct-container"],
body.htt-single-guide article,
body.htt-single-guide article.post,
body.htt-single-guide .entry-content {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}


/* ===========================================================
   SECTION 2 - Hotel single page
   Ported from htt-hotel-mockup. Class prefix .htt-*.
   =========================================================== */

.htt-page,
.htt-page * {
	box-sizing: border-box;
}

.htt-page {
	font-family: 'Inter', system-ui, sans-serif;
	color: var(--htt-ink);
	background: var(--htt-white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.htt-page h1,
.htt-page h2,
.htt-page h3,
.htt-page h4 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
}

.htt-page p {
	margin: 0;
}

/* Wordmark fallback (used by header + footer) */
.htt-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}
.htt-wordmark-icon {
	width: 40px;
	height: 40px;
	background: var(--htt-navy);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--htt-amber);
	font-family: 'Fraunces', serif;
	font-weight: 700;
	font-size: 24px;
	font-style: italic;
}
.htt-wordmark-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.htt-wordmark-top {
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-size: 22px;
	color: var(--htt-navy);
	font-weight: 600;
}
.htt-wordmark-bot {
	font-family: 'Inter', sans-serif;
	font-size: 9.5px;
	color: var(--htt-amber);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 3px;
}
.htt-wordmark-white .htt-wordmark-icon {
	background: var(--htt-amber);
	color: var(--htt-navy);
}
.htt-wordmark-white .htt-wordmark-top {
	color: var(--htt-white);
}
.htt-wordmark-white .htt-wordmark-bot {
	color: var(--htt-amber);
}

/* Disclaimer band (always visible, top of page) */
.htt-disclaimer-band {
	background: var(--htt-navy);
	color: var(--htt-stone);
	text-align: center;
	padding: 9px 16px;
	font-size: 12px;
	letter-spacing: 0.04em;
}
.htt-disclaimer-band strong {
	color: var(--htt-white);
	font-weight: 600;
}

/* Header */
.htt-site-header {
	background: var(--htt-white);
	border-bottom: 1px solid var(--htt-line);
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .htt-site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .htt-site-header { top: 46px; }
}
.htt-site-header-inner {
	max-width: var(--htt-max);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.htt-logo-link {
	display: flex;
	align-items: center;
}
.htt-primary-nav {
	display: flex;
	gap: 28px;
}
.htt-primary-nav a {
	color: var(--htt-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.htt-primary-nav a:hover {
	border-bottom-color: var(--htt-amber);
}
.htt-search-btn {
	background: var(--htt-navy);
	color: var(--htt-white);
	border: none;
	padding: 9px 18px;
	border-radius: 999px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}
.htt-search-btn:hover {
	background: var(--htt-navy-soft);
	color: var(--htt-white);
}

/* Hero */
.htt-hero {
	width: 100%;
	aspect-ratio: 16 / 6;
	min-height: 360px;
	max-height: 520px;
	background-size: cover;
	background-position: center;
	background-color: var(--htt-navy);
	position: relative;
	display: flex;
	align-items: flex-end;
}
.htt-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(29,34,52,0) 0%,
		rgba(29,34,52,0) 55%,
		rgba(29,34,52,0.55) 88%,
		rgba(29,34,52,0.88) 100%);
	pointer-events: none;
}
.htt-hero-inner {
	max-width: var(--htt-max);
	margin: 0 auto;
	padding: 48px 24px;
	width: 100%;
	color: var(--htt-white);
	position: relative;
	z-index: 1;
}
.htt-hero-badges-top {
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	z-index: 2;
	max-width: var(--htt-max);
	margin: 0 auto;
}
.htt-hero-pill {
	background: rgba(29,34,52,0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--htt-white);
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 0.04em;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid rgba(255,255,255,0.15);
	display: inline-block;
}
.htt-pill-amber {
	background: var(--htt-amber);
	color: var(--htt-navy);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-color: var(--htt-amber);
}
.htt-hero-utility {
	position: absolute;
	bottom: 24px;
	right: 24px;
	z-index: 2;
	display: flex;
	gap: 8px;
}
.htt-hero h1 {
	font-size: clamp(38px, 5vw, 64px);
	font-weight: 500;
	font-style: italic;
	max-width: 900px;
	margin-bottom: 14px;
	color: var(--htt-white);
}
.htt-hero-sub {
	font-size: 18px;
	max-width: 620px;
	color: rgba(255,255,255,0.92);
	font-weight: 300;
}

/* Title block */
.htt-title-block {
	background: var(--htt-cream);
	border-bottom: 1px solid var(--htt-line);
}
.htt-title-block-inner {
	max-width: var(--htt-max);
	margin: 0 auto;
	padding: 28px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.htt-title-meta {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.htt-stars {
	color: var(--htt-amber);
	font-size: 18px;
	letter-spacing: 2px;
}
.htt-meta-line {
	color: var(--htt-muted);
	font-size: 14px;
}
.htt-meta-line strong {
	color: var(--htt-ink);
}
.htt-title-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.htt-btn {
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform 0.1s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Inter', sans-serif;
}
.htt-btn:hover {
	transform: translateY(-1px);
}
.htt-btn-primary {
	background: var(--htt-amber);
	color: var(--htt-navy);
}
.htt-btn-primary:hover {
	color: var(--htt-navy);
}
.htt-btn-ghost {
	background: transparent;
	color: var(--htt-navy);
	border: 1.5px solid var(--htt-navy);
}
.htt-btn-block {
	display: flex;
	width: 100%;
}

.htt-title-block-tags {
	border-top: 1px solid var(--htt-line);
	background: var(--htt-cream);
}
.htt-title-block-tags-inner {
	max-width: var(--htt-max);
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.htt-ctx-tag {
	background: var(--htt-white);
	color: var(--htt-navy);
	border: 1px solid var(--htt-line);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Main layout */
.htt-main-layout {
	max-width: var(--htt-max);
	margin: 0 auto;
	padding: 56px 24px 80px;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) 340px;
	gap: 48px;
	align-items: start;
}
.htt-main-layout > * {
	min-width: 0;
}

/* TOC rail */
.htt-toc-rail {
	position: sticky;
	top: 90px;
	align-self: start;
}
.htt-toc-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--htt-muted);
	margin-bottom: 14px;
}
.htt-toc-rail ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.htt-toc-rail ul li {
	margin-bottom: 6px;
}
.htt-toc-rail ul a {
	display: block;
	color: var(--htt-ink);
	text-decoration: none;
	font-size: 14px;
	padding: 6px 0 6px 12px;
	border-left: 2px solid var(--htt-line);
	transition: all 0.15s ease;
}
.htt-toc-rail ul a:hover {
	border-left-color: var(--htt-amber);
	color: var(--htt-navy);
}
.htt-toc-rail ul a.active {
	border-left-color: var(--htt-amber);
	color: var(--htt-navy);
	font-weight: 600;
}

/* Content sections */
.htt-content {
	scroll-margin-top: 88px;
	margin-bottom: 56px;
}
.htt-content h2 {
	font-size: 30px;
	font-weight: 500;
	margin-bottom: 18px;
	letter-spacing: -0.01em;
	color: var(--htt-navy);
}
.htt-kicker {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--htt-amber);
	margin-bottom: 6px;
	font-style: normal;
}
.htt-content p {
	font-size: 17px;
	color: var(--htt-ink);
	margin-bottom: 18px;
	max-width: 70ch;
	line-height: 1.7;
}
.htt-content .htt-lead {
	font-size: 20px;
	color: var(--htt-ink);
}
.htt-content .htt-lead::first-letter {
	font-family: 'Fraunces', serif;
	font-size: 58px;
	float: left;
	line-height: 0.9;
	margin-right: 8px;
	margin-top: 4px;
	color: var(--htt-navy);
	font-weight: 500;
}
.htt-review-body p,
.htt-rooms-body p,
.htt-food-body p {
	font-size: 17px;
	color: var(--htt-ink);
	margin-bottom: 18px;
	line-height: 1.7;
}

/* Fact box */
.htt-fact-box {
	background: var(--htt-cream);
	border: 1px solid var(--htt-line);
	border-radius: 4px;
	padding: 24px;
	margin: 8px 0 32px;
}
.htt-fact-box h3 {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--htt-amber);
	margin-bottom: 16px;
}
.htt-fact-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 24px;
}
.htt-fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.htt-fact-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--htt-muted);
	font-weight: 500;
}
.htt-fact-value {
	font-size: 15px;
	color: var(--htt-ink);
	font-weight: 500;
}
.htt-fact-value small {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--htt-muted);
	margin-top: 3px;
}

/* What we love list */
.htt-love-list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}
.htt-love-list li {
	padding: 12px 0 12px 36px;
	position: relative;
	border-bottom: 1px solid var(--htt-line);
	font-size: 16px;
	line-height: 1.6;
}
.htt-love-list li:last-child {
	border-bottom: none;
}
.htt-love-list li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 12px;
	color: var(--htt-amber);
	font-weight: 700;
	font-size: 18px;
}

/* Pull quote */
.htt-pull-quote {
	border-left: 3px solid var(--htt-amber);
	padding: 14px 0 14px 24px;
	margin: 28px 0;
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-size: 24px;
	color: var(--htt-navy);
	line-height: 1.4;
}

/* Byline */
.htt-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding: 16px;
	background: var(--htt-cream);
	border-radius: 4px;
}
.htt-byline-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--htt-stone);
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}
.htt-byline-info {
	font-size: 13px;
}
.htt-byline-info strong {
	color: var(--htt-navy);
	font-size: 14px;
	display: block;
}
.htt-byline-role {
	color: var(--htt-muted);
}

/* Transport table */
.htt-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
.htt-transport-table {
	width: 100%;
	min-width: 540px;
	border-collapse: collapse;
	font-size: 15px;
}
.htt-transport-table thead tr {
	background: var(--htt-navy);
	color: var(--htt-white);
}
.htt-transport-table th,
.htt-transport-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--htt-line);
	vertical-align: top;
}
.htt-transport-table th {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}
.htt-transport-method {
	font-weight: 600;
}
.htt-transport-table tbody tr:nth-child(even) {
	background: var(--htt-cream);
}
.htt-transport-pill {
	display: inline-block;
	background: var(--htt-amber);
	color: var(--htt-navy);
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-left: 8px;
}

/* v2 transport: quick-ref table + per-terminal prose blocks */
.htt-quickref-table {
	width: 100%;
	min-width: 540px;
	border-collapse: collapse;
	font-size: 15px;
	margin-bottom: 28px;
}
.htt-quickref-table thead tr {
	background: var(--htt-navy);
	color: var(--htt-white);
}
.htt-quickref-table th,
.htt-quickref-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--htt-line);
	vertical-align: top;
}
.htt-quickref-table th {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}
.htt-quickref-table tbody tr:nth-child(even) {
	background: var(--htt-cream);
}
.htt-quickref-table tr.htt-recommended-row {
	background: rgba(225, 150, 61, 0.08);
}
.htt-quickref-table tr.htt-recommended-row td {
	border-bottom-color: rgba(225, 150, 61, 0.25);
}
.htt-qr-terminal {
	font-weight: 600;
	color: var(--htt-navy);
}
.htt-bus-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--htt-navy);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	border-bottom: 1px solid var(--htt-amber);
	padding-bottom: 1px;
}
.htt-bus-link:hover {
	color: var(--htt-amber);
}

.htt-directions-block {
	background: var(--htt-cream);
	border-left: 3px solid var(--htt-amber);
	padding: 18px 22px;
	margin: 18px 0;
	border-radius: 0 4px 4px 0;
}
.htt-directions-heading {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--htt-amber);
	margin-bottom: 12px;
}
.htt-directions-row + .htt-directions-row {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--htt-line);
}
.htt-directions-label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--htt-navy);
	margin-bottom: 6px;
}
.htt-directions-row p {
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
	color: var(--htt-ink);
}

.htt-bus-footer {
	background: var(--htt-stone);
	border-radius: 4px;
	padding: 16px 20px;
	font-size: 14px;
	color: var(--htt-ink);
	line-height: 1.6;
	margin-top: 24px;
}
.htt-bus-footer em {
	font-style: italic;
	font-weight: 500;
}
.htt-bus-footer a {
	color: var(--htt-navy);
	font-weight: 600;
	border-bottom: 1px solid var(--htt-amber);
	text-decoration: none;
	padding-bottom: 1px;
	margin-left: 4px;
}
.htt-bus-footer a:hover {
	color: var(--htt-amber);
}

/* Price band display on title block + booking rail */
.htt-price-band strong {
	font-size: 16px;
	letter-spacing: 0.04em;
	color: var(--htt-navy);
}
.htt-price-typical,
.htt-booking-typical {
	font-size: 12px;
	color: var(--htt-muted);
	margin-left: 6px;
	font-weight: 400;
	display: inline-block;
}
.htt-booking-typical {
	display: block;
	margin-left: 0;
	margin-top: 4px;
}

/* Good to know cards */
.htt-gtk-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 6px;
}
.htt-gtk-card {
	background: var(--htt-stone);
	padding: 22px;
	border-radius: 4px;
}
.htt-gtk-card h4 {
	font-family: 'Fraunces', serif;
	font-size: 19px;
	font-weight: 500;
	font-style: italic;
	margin-bottom: 10px;
	color: var(--htt-navy);
}
.htt-gtk-card p {
	font-size: 14px;
	margin: 0;
	color: var(--htt-ink);
	line-height: 1.55;
}

/* Nearby restaurants */
.htt-restaurants-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 6px;
}
.htt-restaurant-card {
	border: 1px solid var(--htt-line);
	border-radius: 4px;
	overflow: hidden;
	background: var(--htt-white);
}
.htt-restaurant-img {
	height: 140px;
	background-size: cover;
	background-position: center;
	background-color: var(--htt-stone);
}
.htt-restaurant-body {
	padding: 16px 18px;
}
.htt-restaurant-name {
	font-family: 'Fraunces', serif;
	font-size: 18px;
	font-weight: 500;
	color: var(--htt-navy);
	margin-bottom: 4px;
}
.htt-restaurant-meta {
	font-size: 12px;
	color: var(--htt-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.htt-restaurant-note {
	font-size: 14px;
	color: var(--htt-ink);
	margin: 0;
	line-height: 1.55;
}

/* Map placeholder */
.htt-map-placeholder {
	height: 360px;
	background: linear-gradient(135deg, var(--htt-stone) 0%, var(--htt-cream) 100%);
	border: 1px solid var(--htt-line);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--htt-muted);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background-size: cover;
	background-position: center;
	position: relative;
}
.htt-map-pin {
	background: var(--htt-amber);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 3px solid var(--htt-white);
	box-shadow: 0 4px 12px rgba(29,34,52,0.3);
}
.htt-map-caption {
	margin-top: 14px;
	font-size: 14px;
	color: var(--htt-muted);
	line-height: 1.55;
}

/* Booking rail */
.htt-booking-rail {
	position: sticky;
	top: 90px;
	align-self: start;
}
.htt-booking-card {
	background: var(--htt-white);
	border: 1px solid var(--htt-line);
	border-radius: 4px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(29,34,52,0.04);
}
.htt-booking-label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--htt-amber);
	font-weight: 700;
	margin-bottom: 6px;
}
.htt-booking-card h3 {
	font-family: 'Fraunces', serif;
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 4px;
	color: var(--htt-navy);
}
.htt-booking-price {
	font-size: 14px;
	color: var(--htt-muted);
	margin-bottom: 18px;
}
.htt-booking-price strong {
	color: var(--htt-ink);
	font-size: 22px;
	font-family: 'Fraunces', serif;
	font-weight: 500;
}
.htt-code-band {
	background: var(--htt-cream);
	border: 1px dashed var(--htt-amber);
	padding: 12px 14px;
	border-radius: 4px;
	margin-bottom: 14px;
	font-size: 13px;
	line-height: 1.5;
}
.htt-code-band strong {
	color: var(--htt-navy);
	font-weight: 600;
}
.htt-code-perks {
	color: var(--htt-muted);
}
.htt-alt-link {
	display: block;
	text-align: center;
	color: var(--htt-muted);
	text-decoration: none;
	font-size: 13px;
	margin-top: 10px;
}
.htt-alt-link:hover {
	color: var(--htt-navy);
}
.htt-booking-disclaimer {
	font-size: 11px;
	color: var(--htt-muted);
	margin-top: 16px;
	line-height: 1.5;
}

/* Related hotels */
.htt-related-section {
	background: var(--htt-cream);
	padding: 64px 24px;
	border-top: 1px solid var(--htt-line);
}
.htt-related-inner {
	max-width: var(--htt-max);
	margin: 0 auto;
}
.htt-related-section h2 {
	font-size: 32px;
	font-weight: 500;
	font-style: italic;
	margin-bottom: 28px;
	color: var(--htt-navy);
}
.htt-related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.htt-related-card {
	background: var(--htt-white);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(29,34,52,0.05);
	text-decoration: none;
	color: var(--htt-ink);
	transition: transform 0.2s ease;
	display: block;
}
.htt-related-card:hover {
	transform: translateY(-3px);
}
.htt-related-img {
	height: 200px;
	background-size: cover;
	background-position: center;
	background-color: var(--htt-stone);
}
.htt-related-body {
	padding: 18px 20px;
}
.htt-related-meta {
	font-size: 11px;
	color: var(--htt-amber);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 6px;
	font-weight: 600;
}
.htt-related-card h3 {
	font-family: 'Fraunces', serif;
	font-size: 20px;
	margin-bottom: 6px;
	color: var(--htt-navy);
}
.htt-related-card p {
	font-size: 14px;
	color: var(--htt-muted);
	margin: 0;
	line-height: 1.55;
}

/* Footer */
.htt-footer {
	background: var(--htt-navy);
	color: var(--htt-stone);
	padding: 56px 24px 32px;
}
.htt-footer-inner {
	max-width: var(--htt-max);
	margin: 0 auto;
}
.htt-footer-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	margin-bottom: 28px;
}
.htt-footer-logo {
	display: block;
	margin-bottom: 8px;
}
.htt-footer-brand p {
	font-size: 14px;
	color: rgba(255,255,255,0.7);
	margin-top: 12px;
	max-width: 360px;
	line-height: 1.6;
}
.htt-footer-col h5 {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--htt-amber);
	margin-bottom: 16px;
}
.htt-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.htt-footer-col ul li {
	margin-bottom: 8px;
}
.htt-footer-col ul a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	font-size: 14px;
}
.htt-footer-col ul a:hover {
	color: var(--htt-amber);
}
.htt-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 12px;
	color: rgba(255,255,255,0.55);
	line-height: 1.6;
}
.htt-footer-bottom a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
}
.htt-footer-bottom a:hover {
	color: var(--htt-amber);
}

/* ===========================================================
   Responsive
   Mobile gotchas (from project memory):
   - Booking rail must be position:static on mobile or it blocks scroll
   - Main layout grid must use minmax(0, 1fr) on children OR transport
     table pushes the whole page wider than the viewport
   - Transport table wrapped in .htt-table-scroll with min-width 540px
   =========================================================== */

@media (max-width: 1280px) {
	.htt-main-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding: 40px 24px;
	}
	.htt-toc-rail {
		display: none;
	}
	.htt-booking-rail {
		order: -1;
		position: static !important;
		top: auto !important;
	}
	.htt-booking-card {
		position: static !important;
	}
}

@media (max-width: 880px) {
	.htt-primary-nav {
		display: none;
	}
	.htt-search-btn {
		font-size: 12px;
		padding: 8px 14px;
	}
	.htt-fact-grid {
		grid-template-columns: 1fr;
	}
	.htt-gtk-grid {
		grid-template-columns: 1fr;
	}
	.htt-restaurants-grid {
		grid-template-columns: 1fr;
	}
	.htt-related-grid {
		grid-template-columns: 1fr;
	}
	.htt-footer-top {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
	.htt-title-block-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.htt-title-actions {
		width: 100%;
	}
	.htt-title-actions .htt-btn {
		flex: 1;
	}
	.htt-hero h1 {
		font-size: clamp(30px, 7vw, 44px);
	}
	.htt-hero-sub {
		font-size: 16px;
	}
	.htt-content h2 {
		font-size: 26px;
	}
	.htt-pull-quote {
		font-size: 20px;
	}
}

@media (max-width: 520px) {
	.htt-site-header-inner {
		padding: 12px 16px;
	}
	.htt-hero-inner {
		padding: 36px 16px;
	}
	.htt-title-block-inner {
		padding: 20px 16px;
	}
	.htt-title-block-tags-inner {
		padding: 14px 16px;
	}
	.htt-main-layout {
		padding: 32px 16px 56px;
	}
	.htt-related-section {
		padding: 48px 16px;
	}
	.htt-footer {
		padding: 40px 16px 24px;
	}
	.htt-footer-top {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.htt-hero-badges-top,
	.htt-hero-utility {
		padding: 0 16px;
	}
	.htt-hero-utility {
		flex-wrap: wrap;
		justify-content: flex-end;
	}
}

/* ===========================================================
   SECTION 3 - Blocksy CPT full-width override
   Required when using a Blocksy Content Block (Single Template)
   for a CPT. Blocksy's container width is controlled by CSS
   custom properties at :root level — standard max-width overrides
   on .ct-container don't work because they're set wider than 100%
   by these variables. Override the variables on the body class
   to free up edge-to-edge layout.
   Reuse pattern: change `body.single-hotel` to whatever body class
   WordPress emits for any other Blocksy-Content-Block-templated CPT.
   =========================================================== */

body.single-hotel {
	--theme-container-edge-spacing: 100vw !important;
	--theme-container-width: 100% !important;
	--theme-container-width-base: 100vw !important;
	--theme-normal-container-max-width: 100vw !important;
	--theme-narrow-container-max-width: 100vw !important;
	--theme-block-width: 100% !important;
	--theme-block-max-width: 100vw !important;
	--theme-block-wide-max-width: 100vw !important;
	--theme-wide-offset: 0px !important;
	--container-max-width: 100% !important;
	--wide-offset: 0 !important;
	--narrow-offset: 0 !important;
}
body.single-hotel #main,
body.single-hotel .ct-container,
body.single-hotel [class*="ct-container"],
body.single-hotel article {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ===========================================================
   SECTION 4 - Full-bleed for ALL HTT pages
   Generalises the single-hotel container strip + Blocksy
   variable override to every page carrying .htt-no-blocksy-chrome
   (front page + any page whose content uses an [htt_*] shortcode).
   =========================================================== */

body.htt-no-blocksy-chrome {
	--theme-container-edge-spacing: 100vw !important;
	--theme-container-width: 100% !important;
	--theme-container-width-base: 100vw !important;
	--theme-normal-container-max-width: 100vw !important;
	--theme-narrow-container-max-width: 100vw !important;
	--theme-block-width: 100% !important;
	--theme-block-max-width: 100vw !important;
	--theme-block-wide-max-width: 100vw !important;
	--theme-wide-offset: 0px !important;
	--container-max-width: 100% !important;
	--wide-offset: 0 !important;
	--narrow-offset: 0 !important;
}
body.htt-no-blocksy-chrome #main,
body.htt-no-blocksy-chrome .ct-main,
body.htt-no-blocksy-chrome .ct-container,
body.htt-no-blocksy-chrome [class*="ct-container"],
body.htt-no-blocksy-chrome .ct-page-wrapper,
body.htt-no-blocksy-chrome article,
body.htt-no-blocksy-chrome .entry-content {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
body.htt-no-blocksy-chrome .entry-header,
body.htt-no-blocksy-chrome .entry-title,
body.htt-no-blocksy-chrome .ct-sidebar {
	display: none !important;
}

/* ===========================================================
   SECTION 5 - Header additions
   Transparent variant, active nav, mobile nav + toggle.
   =========================================================== */

.htt-site-header--transparent {
	position: absolute;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: none;
}
.htt-nav-active,
.htt-primary-nav a.htt-nav-active {
	border-bottom-color: var(--htt-amber) !important;
	color: var(--htt-navy);
}

.htt-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.htt-nav-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--htt-navy);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.htt-nav-toggle--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.htt-nav-toggle--open span:nth-child(2) { opacity: 0; }
.htt-nav-toggle--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.htt-mobile-nav {
	display: none;
	flex-direction: column;
	border-top: 1px solid var(--htt-line);
	background: var(--htt-white);
	padding: 8px 24px 18px;
}
.htt-mobile-nav:not([hidden]) { display: flex; }
.htt-mobile-nav a {
	color: var(--htt-ink);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	padding: 12px 0;
	border-bottom: 1px solid var(--htt-line);
}
.htt-mobile-nav a:last-child { border-bottom: none; }
.htt-mobile-cta {
	margin-top: 12px;
	background: var(--htt-navy);
	color: var(--htt-white) !important;
	text-align: center;
	border-radius: 999px;
	padding: 12px 0 !important;
	border-bottom: none !important;
}

/* ===========================================================
   SECTION 6 - Shared cards (hotel + guide)
   Reused on homepage, directory, terminal hubs, related band.
   =========================================================== */

.htt-card-grid {
	display: grid;
	gap: 28px;
}
.htt-card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.htt-card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.htt-card-grid > * { min-width: 0; }

.htt-hotel-card {
	display: flex;
	flex-direction: column;
	background: var(--htt-white);
	border: 1px solid var(--htt-line);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: var(--htt-ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.htt-hotel-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(29, 34, 52, 0.14);
}
.htt-hotel-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-color: var(--htt-stone);
}
.htt-card-pick {
	position: absolute;
	top: 12px;
	left: 12px;
}
.htt-card-band {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: rgba(29, 34, 52, 0.82);
	color: var(--htt-white);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	padding: 5px 10px;
	border-radius: 8px;
	backdrop-filter: blur(4px);
}
.htt-hotel-card-body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.htt-hotel-card-meta {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--htt-amber);
}
.htt-hotel-card-body h3 {
	font-size: 21px;
	line-height: 1.2;
}
.htt-card-stars {
	font-family: 'Inter', sans-serif;
	color: var(--htt-amber);
	font-size: 13px;
	margin-left: 6px;
	white-space: nowrap;
}
.htt-hotel-card-body p {
	color: var(--htt-muted);
	font-size: 14.5px;
	line-height: 1.5;
}
.htt-hotel-card-foot {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--htt-line);
	font-size: 13px;
	font-weight: 600;
	color: var(--htt-navy);
}

.htt-guide-card {
	display: flex;
	flex-direction: column;
	background: var(--htt-white);
	border: 1px solid var(--htt-line);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: var(--htt-ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.htt-guide-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(29, 34, 52, 0.14);
}
.htt-guide-card-media {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: var(--htt-stone);
}
.htt-guide-card-body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.htt-guide-card-cat {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--htt-amber);
}
.htt-guide-card-body h3 { font-size: 20px; line-height: 1.22; }
.htt-guide-card-body p { color: var(--htt-muted); font-size: 14.5px; }

/* Map action links (hotel single Location section) */
.htt-map-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
}

/* Kicker amber variant */
.htt-kicker-amber { color: var(--htt-amber) !important; }

/* ===========================================================
   SECTION 7 - Homepage
   =========================================================== */

.htt-home-section-inner,
.htt-home-hero-inner,
.htt-home-newsletter-inner {
	max-width: var(--htt-max);
	margin: 0 auto;
	padding: 0 24px;
}
.htt-home-section { padding: 78px 0; }
.htt-home-section:nth-child(even) { background: var(--htt-cream); }

.htt-home-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 34px;
}
.htt-home-section-head h2 { font-size: 34px; }
.htt-home-seelink {
	white-space: nowrap;
	color: var(--htt-navy);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 2px solid var(--htt-amber);
	padding-bottom: 2px;
}

/* Hero */
.htt-home-hero {
	background:
		linear-gradient(90deg, rgba(18,22,36,0.84) 0%, rgba(18,22,36,0.64) 32%, rgba(18,22,36,0.30) 58%, rgba(18,22,36,0.08) 85%, rgba(18,22,36,0.02) 100%),
		linear-gradient(180deg, rgba(18,22,36,0.06) 0%, rgba(18,22,36,0) 45%, rgba(18,22,36,0.45) 100%),
		url('/wp-content/uploads/2026/06/lhr_tower.jpg') no-repeat;
	background-size: cover;
	background-position: 65% 42%;
	color: var(--htt-white);
	padding: 96px 0 88px;
}
.htt-home-eyebrow {
	color: var(--htt-amber);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-bottom: 18px;
}
.htt-home-hero h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
}
.htt-home-lede {
	max-width: 620px;
	font-size: 18.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 34px;
}
.htt-home-finder {
	display: flex;
	align-items: center;
	gap: 14px 18px;
	flex-wrap: wrap;
	margin: 20px 0 40px;
}
.htt-home-finder-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
.htt-home-finder-chips {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.htt-home-finder-chips a {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--htt-white);
	padding: 11px 20px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.htt-home-finder-chips a:hover {
	background: var(--htt-amber);
	border-color: var(--htt-amber);
	color: var(--htt-navy);
}
.htt-home-finder-all {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--htt-amber) !important;
}
.htt-home-finder-all:hover {
	color: var(--htt-navy) !important;
}
.htt-home-stats {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 28px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.htt-home-stats li {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.72);
}
.htt-home-stats strong { color: var(--htt-amber); }

/* Terminals grid */
.htt-home-terminal-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.htt-home-terminal-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--htt-navy);
	color: var(--htt-white);
	border-radius: 14px;
	padding: 28px 24px;
	text-decoration: none;
	min-height: 168px;
	transition: transform 0.15s ease;
}
.htt-home-terminal-card:hover { transform: translateY(-3px); }
.htt-home-terminal-label {
	font-family: 'Fraunces', serif;
	font-size: 26px;
	line-height: 1.1;
}
.htt-home-terminal-sub {
	color: rgba(255, 255, 255, 0.66);
	font-size: 14px;
}
.htt-home-terminal-go {
	margin-top: auto;
	color: var(--htt-amber);
	font-weight: 600;
	font-size: 14px;
}

/* Transport band */
.htt-home-transport { background: var(--htt-navy) !important; color: var(--htt-white); }
.htt-home-transport-inner {
	display: grid;
	grid-template-columns: 1.3fr 0.9fr;
	gap: 56px;
	align-items: center;
}
.htt-home-transport-copy h2 { color: var(--htt-white); font-size: 36px; margin-bottom: 18px; }
.htt-home-transport-copy p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 17px;
	line-height: 1.6;
	margin-bottom: 16px;
	max-width: 560px;
}
.htt-home-transport-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 26px;
}
.htt-home-transport-actions .htt-btn-ghost {
	color: var(--htt-white);
	border-color: rgba(255, 255, 255, 0.4);
}
.htt-home-transport-card {
	background: var(--htt-white);
	color: var(--htt-ink);
	border-radius: 16px;
	padding: 28px;
}
.htt-home-fare-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--htt-line);
	font-size: 16px;
}
.htt-home-fare-row strong { font-size: 22px; font-family: 'Fraunces', serif; }
.htt-home-fare-row--muted { color: var(--htt-muted); }
.htt-home-fare-row--muted strong { color: var(--htt-muted); }
.htt-home-fare-note {
	margin-top: 16px;
	font-size: 13px;
	color: var(--htt-muted);
	line-height: 1.5;
}

/* Louise band */
.htt-home-louise-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}
.htt-home-louise-copy h2 { font-size: 36px; margin-bottom: 18px; }
.htt-home-louise-copy p { font-size: 17px; line-height: 1.65; color: var(--htt-ink); max-width: 560px; }
.htt-home-louise-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.htt-home-louise-card {
	background: var(--htt-navy);
	border-radius: 16px;
	padding: 44px 40px;
}
.htt-home-louise-quote {
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-size: 26px;
	line-height: 1.4;
	color: var(--htt-white);
}

/* Newsletter */
.htt-home-newsletter {
	background: var(--htt-amber);
	color: var(--htt-navy);
	padding: 72px 0;
	text-align: center;
}
.htt-home-newsletter h2 { font-size: 34px; margin-bottom: 12px; }
.htt-home-newsletter > .htt-home-newsletter-inner > p { font-size: 17px; margin-bottom: 26px; }
.htt-home-newsletter-form {
	display: flex;
	gap: 12px;
	justify-content: center;
	max-width: 480px;
	margin: 0 auto;
	flex-wrap: wrap;
}
.htt-home-newsletter-form input {
	flex: 1;
	min-width: 220px;
	padding: 13px 18px;
	border-radius: 999px;
	border: 1.5px solid var(--htt-navy);
	font-size: 15px;
	font-family: 'Inter', sans-serif;
}
.htt-home-newsletter-form .htt-btn-primary {
	background: var(--htt-navy);
	color: var(--htt-white);
}
.htt-home-newsletter-note {
	margin-top: 16px;
	font-size: 12.5px;
	opacity: 0.7;
}

/* ===========================================================
   SECTION 8 - Responsive (homepage + cards + nav)
   =========================================================== */

@media (max-width: 1024px) {
	.htt-card-grid-3,
	.htt-card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.htt-home-terminal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.htt-home-transport-inner,
	.htt-home-louise-inner { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 860px) {
	.htt-primary-nav,
	.htt-search-btn { display: none; }
	.htt-nav-toggle { display: flex; }
}

@media (max-width: 680px) {
	.htt-card-grid-3,
	.htt-card-grid-4,
	.htt-home-terminal-grid { grid-template-columns: 1fr; }
	.htt-home-section { padding: 56px 0; }
	.htt-home-hero {
			padding: 64px 0 56px;
			background:
				linear-gradient(180deg, rgba(18,22,36,0.36) 0%, rgba(18,22,36,0.46) 45%, rgba(18,22,36,0.82) 100%),
				url('/wp-content/uploads/2026/06/lhr_tower.jpg') 78% 40% / cover no-repeat;
		}
	.htt-home-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.htt-home-section-head h2,
	.htt-home-transport-copy h2,
	.htt-home-louise-copy h2 { font-size: 28px; }
	.htt-home-stats { gap: 18px; }
}

/* Desktop has no mobile nav element visible */
@media (min-width: 861px) {
	.htt-mobile-nav { display: none !important; }
}

/* ===========================================================
   SECTION 9 - Hotels directory (/hotels/)
   =========================================================== */

.htt-dir-head {
	background: var(--htt-navy);
	color: var(--htt-white);
	padding: 64px 0 56px;
}
.htt-dir-head-inner {
	max-width: var(--htt-max);
	margin: 0 auto;
	padding: 0 24px;
}
.htt-dir-head h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.05;
	margin: 0 0 16px;
}
.htt-dir-lede {
	max-width: 600px;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.htt-dir-body {
	max-width: var(--htt-max);
	margin: 0 auto;
	padding: 40px 24px 80px;
}

.htt-dir-toolbar {
	display: flex;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.htt-dir-search { flex: 1; min-width: 220px; max-width: 360px; }
.htt-dir-search input {
	width: 100%;
	padding: 11px 16px;
	border: 1.5px solid var(--htt-line);
	border-radius: 999px;
	font-size: 15px;
	font-family: 'Inter', sans-serif;
}
.htt-dir-search input:focus {
	outline: none;
	border-color: var(--htt-amber);
}
.htt-dir-sort {
	display: flex;
	align-items: center;
	gap: 10px;
}
.htt-dir-sort label {
	font-size: 13px;
	font-weight: 600;
	color: var(--htt-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.htt-dir-sort select {
	padding: 10px 14px;
	border: 1.5px solid var(--htt-line);
	border-radius: 10px;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	background: var(--htt-white);
	cursor: pointer;
}

.htt-dir-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	padding: 20px 0 24px;
	border-top: 1px solid var(--htt-line);
	border-bottom: 1px solid var(--htt-line);
	margin-bottom: 24px;
}
.htt-dir-filter-group {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.htt-dir-filter-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--htt-muted);
}
.htt-dir-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.htt-dir-chip {
	background: var(--htt-white);
	border: 1.5px solid var(--htt-line);
	color: var(--htt-navy);
	padding: 8px 15px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	transition: all 0.12s ease;
}
.htt-dir-chip:hover { border-color: var(--htt-amber); }
.htt-dir-chip--on {
	background: var(--htt-navy);
	border-color: var(--htt-navy);
	color: var(--htt-white);
}
.htt-dir-clear {
	background: transparent;
	border: none;
	color: var(--htt-amber);
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	text-decoration: underline;
}

.htt-dir-count {
	font-size: 14px;
	color: var(--htt-muted);
	margin-bottom: 22px;
}
.htt-dir-count span { color: var(--htt-navy); font-weight: 700; }

.htt-dir-item { display: flex; }
.htt-dir-item > .htt-hotel-card { width: 100%; }

.htt-dir-noresults,
.htt-dir-empty {
	font-size: 16px;
	color: var(--htt-muted);
	padding: 40px 0;
	text-align: center;
}
.htt-linkbtn {
	background: none;
	border: none;
	color: var(--htt-amber);
	font-weight: 600;
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	font-size: inherit;
	text-decoration: underline;
	padding: 0;
}

@media (max-width: 680px) {
	.htt-dir-filters { gap: 16px; }
	.htt-dir-filter-group { width: 100%; }
}

/* ===========================================================
   SECTION 20 - Hotels map (/hotels/map/)  [replaces old SECTION 10]
   Rebuilt 2026-06-15 to match the per-hotel module: Mapbox light-v11
   raster, sync cards + hybrid popup, Compare / Search / Sort / Save.
   Page chrome scoped under .htt-mapapp; Leaflet divIcons (.htt-pin /
   .marker-cluster / .leaflet-popup-*) are UNSCOPED with inline hex so
   they style correctly when rendered outside the section.
   =========================================================== */

.htt-mapapp { display: flex; flex-direction: column; }

/* ---- top strip ---- */
.htt-map-strip { background: #F7F4EE; border-bottom: 1px solid #E5E0D5; padding: 18px 24px; position: sticky; top: var(--htt-hdr, 0px); z-index: 40; }
.htt-map-strip-inner { max-width: 1560px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.htt-map-strip-titles { display: flex; flex-direction: column; gap: 3px; }
.htt-map-breadcrumb { color: #6B7280; text-decoration: none; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.htt-map-breadcrumb:hover { color: #1D2234; }
.htt-map-strip h1 { font-family: 'Fraunces', Georgia, serif; font-size: 27px; font-weight: 500; font-style: italic; color: #1D2234; line-height: 1.05; }
.htt-map-strip-sub { color: #6B7280; font-size: 13.5px; }
.htt-map-strip-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.htt-map-result-count { font-size: 13px; color: #6B7280; }
.htt-map-result-count strong { color: #1D2234; font-weight: 700; }
.htt-map-view-toggle { display: inline-flex; background: #fff; border: 1px solid #E5E0D5; border-radius: 999px; padding: 3px; }
.htt-map-view-toggle button { position: relative; background: transparent; border: none; padding: 8px 16px; border-radius: 999px; font: 600 13px/1 'Inter', sans-serif; color: #6B7280; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.htt-map-view-toggle button.active { background: #1D2234; color: #fff; }
.htt-map-view-toggle button svg { width: 15px; height: 15px; }
.htt-map-cmpcount { background: #E1963D; color: #1D2234; font: 700 10px/1 'Inter'; border-radius: 999px; padding: 2px 6px; min-width: 16px; text-align: center; }
.htt-map-view-toggle button.active .htt-map-cmpcount { background: #fff; }
.htt-map-view-toggle button[disabled] { opacity: .4; cursor: not-allowed; }

/* ---- page grid ---- */
.htt-map-page { display: grid; grid-template-columns: 380px 1fr; height: var(--htt-map-h, calc(100vh - 168px)); min-height: 560px; overflow: hidden; }

/* ---- navy rail ---- */
.htt-map-rail { background: #1D2234; color: #E9E4DA; overflow-y: auto; padding: 20px 20px 28px; display: flex; flex-direction: column; }
.htt-map-search { position: relative; margin-bottom: 20px; }
.htt-map-search input { width: 100%; background: #2B3046; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; padding: 11px 14px 11px 38px; color: #fff; font: 500 14px/1 'Inter'; outline: none; }
.htt-map-search input::placeholder { color: rgba(255,255,255,.5); }
.htt-map-search input:focus { border-color: #E1963D; }
.htt-map-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: rgba(255,255,255,.5); }
.htt-map-search .clr { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,.55); cursor: pointer; font-size: 17px; line-height: 1; padding: 4px; display: none; }
.htt-map-search.has .clr { display: block; }

.htt-map-fgroup { margin-bottom: 18px; }
.htt-map-flabel { font: 700 11px/1 'Inter'; letter-spacing: .14em; text-transform: uppercase; color: #E1963D; margin-bottom: 11px; display: flex; align-items: center; gap: 8px; }
.htt-map-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.htt-map-chip { background: transparent; color: #E9E4DA; border: 1px solid rgba(255,255,255,.14); padding: 7px 13px; border-radius: 999px; font: 500 13px/1 'Inter'; cursor: pointer; transition: .15s; }
.htt-map-chip:hover { border-color: #E6B775; color: #fff; }
.htt-map-chip.active { background: #E1963D; color: #1D2234; border-color: #E1963D; font-weight: 600; }

.htt-map-toolrow { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; }
.htt-map-sort { flex: 1; min-width: 150px; }
.htt-map-sort label { font: 700 10px/1 'Inter'; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); display: block; margin-bottom: 7px; }
.htt-map-sort select { width: 100%; background: #2B3046; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: #fff; font: 500 13px/1 'Inter'; padding: 9px 11px; outline: none; cursor: pointer; }
.htt-map-saved-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(255,255,255,.14); color: #E9E4DA; border-radius: 999px; padding: 9px 13px; font: 600 12.5px/1 'Inter'; cursor: pointer; transition: .15s; }
.htt-map-saved-toggle svg { width: 15px; height: 15px; }
.htt-map-saved-toggle.active { background: rgba(229,56,59,.16); border-color: #E5383B; color: #fff; }
.htt-map-saved-toggle.active svg { fill: #E5383B; stroke: #E5383B; }

.htt-map-reset { background: transparent; border: none; color: rgba(255,255,255,.55); font: 500 12px/1 'Inter'; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; margin-bottom: 4px; align-self: flex-start; }
.htt-map-reset:hover { color: #E1963D; }

.htt-map-list { border-top: 1px solid rgba(255,255,255,.12); margin-top: 14px; padding-top: 16px; flex: 1; }
.htt-map-list h3 { font: 700 11px/1 'Inter'; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 13px; }
.htt-map-listcard { display: flex; gap: 12px; padding: 10px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; transition: .15s; margin-bottom: 7px; position: relative; }
.htt-map-listcard:hover, .htt-map-listcard.active { background: #2B3046; border-color: rgba(255,255,255,.14); }
.htt-map-listcard.active { box-shadow: inset 3px 0 0 #E1963D; }
.htt-map-listcard-img { width: 62px; height: 62px; background: #14182A center/cover; border-radius: 9px; flex-shrink: 0; position: relative; }
.htt-map-listcard-body { flex: 1; min-width: 0; }
.htt-map-listcard-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 14.5px; color: #fff; margin-bottom: 3px; line-height: 1.15; padding-right: 22px; }
.htt-map-listcard-meta { font-size: 11.5px; color: rgba(255,255,255,.58); margin-bottom: 6px; }
.htt-map-listcard-price { font-size: 12px; color: #E1963D; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.htt-map-pill { background: transparent; color: #E1963D; border: 1px solid #E1963D; padding: 1px 7px; border-radius: 999px; font: 700 9px/1.6 'Inter'; letter-spacing: .04em; }
.htt-map-listcard-price span { color: rgba(255,255,255,.55); font-weight: 400; }
.htt-map-listcard-star { color: #E1963D; font-size: 10px; letter-spacing: 1px; }
.htt-map-list-empty { font-size: 13px; color: rgba(255,255,255,.55); padding: 10px 4px; line-height: 1.5; }

.htt-card-save { position: absolute; top: 8px; right: 8px; background: rgba(20,24,42,.6); border: none; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; }
.htt-card-save svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2; }
.htt-card-save.on svg { fill: #E5383B; stroke: #E5383B; }
.htt-cmp-add { margin-top: 7px; display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid rgba(255,255,255,.18); color: #E9E4DA; border-radius: 7px; padding: 5px 9px; font: 600 11px/1 'Inter'; cursor: pointer; }
.htt-cmp-add svg { width: 12px; height: 12px; }
.htt-cmp-add.on { background: #E1963D; border-color: #E1963D; color: #1D2234; }

/* ---- map ---- */
.htt-map-wrap { position: relative; height: 100%; min-height: 560px; }
#httMap { width: 100%; height: 100%; background: #E9E4DA; }

/* price-band pins (UNSCOPED — Leaflet divIcon) */
.htt-pin { position: relative; min-width: 42px; height: 30px; padding: 0 9px; background: #fff; border: 2px solid #1D2234; border-radius: 999px; box-shadow: 0 3px 10px rgba(29,34,52,.28); cursor: pointer; transition: transform .14s, background .14s; display: flex; align-items: center; justify-content: center; color: #1D2234; font: 600 13px/1 'Fraunces', serif; white-space: nowrap; }
.htt-pin:hover { transform: scale(1.12); z-index: 600; }
.htt-pin.editor-pick { background: #1D2234; color: #E1963D; border-color: #E1963D; }
.htt-pin.matched { background: #E1963D; color: #1D2234; border-color: #C27D29; transform: scale(1.06); z-index: 500; }
.htt-pin.faded { opacity: .3; filter: saturate(.5); }
.htt-pin.active { background: #E5383B !important; color: #fff !important; border-color: #fff !important; transform: scale(1.24); z-index: 700; box-shadow: 0 5px 14px rgba(229,56,59,.5); }
.htt-pin .htt-pin-heart { position: absolute; top: -5px; right: -5px; width: 13px; height: 13px; background: #E5383B; border: 1.5px solid #fff; border-radius: 50%; display: none; }
.htt-pin.saved .htt-pin-heart { display: block; }

.marker-cluster { background: rgba(225,150,61,.25); }
.marker-cluster div { background: #E1963D; color: #1D2234; font: 600 13px/1 'Fraunces', serif; border-radius: 50%; }
.marker-cluster span { line-height: 30px; }

/* hybrid popup (UNSCOPED) */
.leaflet-popup-content-wrapper { background: #fff; border-radius: 14px; box-shadow: 0 14px 40px rgba(29,34,52,.24); padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 264px !important; font-family: 'Inter', sans-serif; }
.leaflet-popup-tip { background: #fff; }
.leaflet-popup-close-button { color: #fff !important; font-size: 18px !important; background: rgba(29,34,52,.55); border-radius: 50%; width: 24px; height: 24px; top: 9px !important; right: 9px !important; line-height: 18px !important; text-align: center; }
.htt-pop-img { height: 118px; background: #E9E4DA center/cover; position: relative; }
.htt-pop-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29,34,52,0) 45%, rgba(29,34,52,.55)); }
.htt-pop-tag { position: absolute; top: 9px; left: 9px; background: #E1963D; color: #1D2234; padding: 3px 9px; border-radius: 999px; font: 700 9.5px/1 'Inter'; text-transform: uppercase; letter-spacing: .05em; z-index: 2; }
.htt-pop-stars { position: absolute; bottom: 9px; left: 12px; color: #E1963D; font-size: 12px; letter-spacing: 1.5px; z-index: 2; }
.htt-pop-body { padding: 12px 15px 14px; }
.htt-pop-meta { font: 600 10.5px/1 'Inter'; color: #C27D29; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px; }
.htt-pop-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: #1D2234; line-height: 1.15; margin-bottom: 8px; }
.htt-pop-access { background: #F7F4EE; border-left: 3px solid #E1963D; padding: 7px 11px; margin-bottom: 10px; border-radius: 0 5px 5px 0; font-size: 12.5px; line-height: 1.45; color: #2A2C33; }
.htt-pop-access strong { color: #1D2234; }
.htt-pop-alabel { display: block; font: 700 9px/1 'Inter'; color: #C27D29; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 5px; }
.htt-pop-arow { padding: 2px 0; font-size: 12px; }
.htt-pop-detail { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; margin-bottom: 11px; }
.htt-pop-detail strong { font-family: 'Fraunces', serif; color: #1D2234; }
.htt-pop-cta { display: block; text-align: center; background: #1D2234; color: #fff; padding: 9px; border-radius: 9px; font: 600 12.5px/1 'Inter'; text-decoration: none; }
.htt-pop-cta:hover { background: #2B3046; }
.htt-map-tfl { color: #3A6EA5; text-decoration: underline; font-weight: 600; }
.htt-gmap-lnk { color: #C27D29; text-decoration: underline; font-weight: 600; }

/* legend + banner */
.htt-map-legend { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.97); border: 1px solid #E5E0D5; border-radius: 10px; padding: 9px 13px; font-size: 11.5px; box-shadow: 0 2px 12px rgba(29,34,52,.14); z-index: 500; display: flex; flex-direction: column; gap: 6px; }
.htt-map-legend-item { display: flex; align-items: center; gap: 7px; color: #2A2C33; white-space: nowrap; }
.htt-map-legend-pin { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 19px; border-radius: 999px; border: 2px solid #1D2234; background: #fff; font: 600 9px/1 'Fraunces', serif; color: #1D2234; }
.htt-map-legend-pin.editor { background: #1D2234; color: #E1963D; border-color: #E1963D; }
.htt-map-legend-pin.sel { background: #E5383B; color: #fff; border-color: #fff; box-shadow: 0 0 0 1px #E5383B; }
.htt-map-banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: #1D2234; color: #fff; padding: 8px 18px; border-radius: 999px; font: 600 13px/1 'Inter'; box-shadow: 0 6px 20px rgba(29,34,52,.3); z-index: 500; display: none; align-items: center; gap: 9px; }
.htt-map-banner.show { display: inline-flex; }
.htt-map-banner em { font-style: normal; color: #E1963D; font-weight: 700; }

/* compare bar (floats over the map) */
.htt-cmp-bar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: #1D2234; color: #fff; border-radius: 14px; box-shadow: 0 14px 40px rgba(29,34,52,.4); padding: 12px 14px; z-index: 600; display: none; align-items: center; gap: 12px; max-width: calc(100% - 28px); }
.htt-cmp-bar.show { display: flex; }
.htt-cmp-slots { display: flex; gap: 8px; }
.htt-cmp-slot { width: 48px; height: 48px; border-radius: 9px; background: #14182A center/cover; border: 1px solid rgba(255,255,255,.18); position: relative; flex-shrink: 0; }
.htt-cmp-slot.empty { border-style: dashed; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); font-size: 20px; }
.htt-cmp-slot .x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: #E5383B; color: #fff; border: 2px solid #1D2234; border-radius: 50%; font-size: 11px; line-height: 14px; text-align: center; cursor: pointer; }
.htt-cmp-bar-txt { font-size: 12.5px; color: rgba(255,255,255,.75); max-width: 130px; line-height: 1.35; }
.htt-cmp-bar-txt b { color: #fff; font-weight: 600; display: block; font-family: 'Fraunces', serif; font-size: 14px; }
.htt-cmp-go { background: #E1963D; color: #1D2234; border: none; border-radius: 10px; padding: 11px 18px; font: 700 13px/1 'Inter'; cursor: pointer; white-space: nowrap; }
.htt-cmp-go[disabled] { opacity: .45; cursor: not-allowed; }
.htt-cmp-clear { background: none; border: none; color: rgba(255,255,255,.6); font: 500 12px/1 'Inter'; cursor: pointer; text-decoration: underline; }

/* ---- list view ---- */
.htt-map-listview { display: none; background: #F7F4EE; overflow-y: auto; height: 100%; padding: 28px; }
.htt-map-page.show-list .htt-map-wrap { display: none; }
.htt-map-page.show-list .htt-map-listview { display: block; }
.htt-map-page.show-cmp .htt-map-wrap { display: none; }
.htt-lv-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; }
.htt-lvcard { background: #fff; border: 1px solid #E5E0D5; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: .15s; position: relative; }
.htt-lvcard:hover { border-color: #E1963D; box-shadow: 0 10px 26px rgba(29,34,52,.1); transform: translateY(-2px); }
.htt-lvcard-img { height: 172px; background: #E9E4DA center/cover; position: relative; cursor: pointer; }
.htt-lvcard-tag { position: absolute; top: 11px; left: 11px; background: #E1963D; color: #1D2234; padding: 4px 10px; border-radius: 999px; font: 700 10px/1 'Inter'; letter-spacing: .05em; text-transform: uppercase; }
.htt-lvcard-band { position: absolute; bottom: 11px; right: 11px; background: rgba(29,34,52,.86); color: #fff; padding: 4px 10px; border-radius: 999px; font: 700 11px/1 'Inter'; }
.htt-lvcard-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.htt-lvcard-meta { font: 600 11px/1 'Inter'; color: #C27D29; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.htt-lvcard-body h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; color: #1D2234; margin-bottom: 5px; line-height: 1.2; }
.htt-lv-stars { color: #E1963D; font-size: 12px; letter-spacing: 1.5px; margin-bottom: 10px; }
.htt-lvcard-access { background: #F7F4EE; border-left: 3px solid #E1963D; padding: 9px 12px; border-radius: 0 5px 5px 0; font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; color: #2A2C33; }
.htt-lvcard-access strong { color: #1D2234; }
.htt-lv-row + .htt-lv-row { margin-top: 4px; }
.htt-lvcard-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.htt-lvtag { background: #F7F4EE; border: 1px solid #E5E0D5; color: #6B7280; font: 600 10.5px/1 'Inter'; padding: 5px 9px; border-radius: 999px; }
.htt-lvcard-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #E5E0D5; padding-top: 12px; margin-top: auto; gap: 10px; }
.htt-lvcard-price strong { font-family: 'Fraunces', serif; color: #1D2234; font-size: 16px; }
.htt-lvcard-price span { display: block; color: #6B7280; font-size: 11px; }
.htt-lvcard-cta { background: #1D2234; color: #fff; padding: 9px 14px; border-radius: 9px; font: 600 12.5px/1 'Inter'; text-decoration: none; white-space: nowrap; }
.htt-lvcard-cta:hover { background: #2B3046; }
.htt-lv-empty { text-align: center; color: #6B7280; padding: 70px 20px; font-size: 14px; grid-column: 1 / -1; }
.htt-lvcard .htt-card-save { background: rgba(255,255,255,.92); }
.htt-lvcard .htt-card-save svg { stroke: #1D2234; }
.htt-lvcard .htt-card-save.on svg { fill: #E5383B; stroke: #E5383B; }
.htt-lvcard-cmp { position: absolute; top: 11px; right: 48px; background: rgba(255,255,255,.92); border: none; border-radius: 999px; padding: 6px 11px; font: 600 11px/1 'Inter'; color: #1D2234; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; z-index: 3; }
.htt-lvcard-cmp svg { width: 12px; height: 12px; }
.htt-lvcard-cmp.on { background: #E1963D; }

/* ---- compare view ---- */
.htt-map-cmpview { display: none; background: #F7F4EE; overflow: auto; height: 100%; padding: 28px; }
.htt-map-page.show-cmp .htt-map-cmpview { display: block; }
.htt-cmp-head { max-width: 1180px; margin: 0 auto 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.htt-cmp-head h2 { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 24px; color: #1D2234; }
.htt-cmp-head p { color: #6B7280; font-size: 13.5px; margin: 4px 0 0; }
.htt-cmp-table-wrap { max-width: 1180px; margin: 0 auto; overflow-x: auto; background: #fff; border: 1px solid #E5E0D5; border-radius: 16px; }
table.htt-cmp-table { border-collapse: collapse; width: 100%; min-width: 560px; }
.htt-cmp-table th, .htt-cmp-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid #E5E0D5; vertical-align: top; }
.htt-cmp-table tr:last-child td { border-bottom: none; }
.htt-cmp-table thead th { background: #fff; }
.htt-cmp-rowlabel { font: 700 11px/1.3 'Inter'; letter-spacing: .05em; text-transform: uppercase; color: #6B7280; width: 148px; background: #F7F4EE; }
.htt-cmp-hcell { position: relative; width: 28%; }
.htt-cmp-hcell-img { height: 96px; border-radius: 11px; background: #E9E4DA center/cover; margin-bottom: 10px; position: relative; }
.htt-cmp-hcell-tag { position: absolute; top: 8px; left: 8px; background: #E1963D; color: #1D2234; padding: 3px 8px; border-radius: 999px; font: 700 9px/1 'Inter'; text-transform: uppercase; letter-spacing: .04em; }
.htt-cmp-hcell h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: #1D2234; line-height: 1.15; margin-bottom: 3px; }
.htt-cmp-hcell .sub { font-size: 11.5px; color: #6B7280; }
.htt-cmp-hcell .rm { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: #F7F4EE; border: 1px solid #E5E0D5; color: #6B7280; cursor: pointer; font-size: 13px; line-height: 20px; text-align: center; z-index: 3; }
.htt-cmp-table td .best { color: #2F9E7D; font-weight: 700; }
.htt-cmp-table .htt-map-pill { color: #C27D29; border-color: #C27D29; }
.htt-cmp-tagrow { display: flex; flex-wrap: wrap; gap: 5px; }
.htt-cmp-cta { display: inline-block; background: #1D2234; color: #fff; padding: 8px 13px; border-radius: 8px; font: 600 12px/1 'Inter'; text-decoration: none; }
.htt-cmp-empty { max-width: 560px; margin: 60px auto; text-align: center; color: #6B7280; }
.htt-cmp-empty h2 { font-family: 'Fraunces', serif; font-style: italic; color: #1D2234; font-size: 24px; margin-bottom: 8px; }

/* mobile bottom sheet */
.htt-map-sheet-handle { display: none; }
@media (max-width: 1100px) { .htt-map-page { grid-template-columns: 330px 1fr; } }
@media (max-width: 860px) {
	.htt-map-strip-inner { align-items: flex-start; }
	.htt-map-page { grid-template-columns: 1fr; height: auto; }
	.htt-map-wrap { height: 62vh; min-height: 380px; }
	.htt-map-rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; max-height: 78vh; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.35); transform: translateY(calc(100% - 132px)); transition: transform .28s ease; padding-top: 30px; }
	.htt-map-page.sheet-open .htt-map-rail { transform: translateY(0); }
	.htt-map-rail::before { content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.32); z-index: 2; }
	.htt-map-sheet-handle { display: block; position: absolute; top: 0; left: 0; right: 0; height: 30px; cursor: pointer; z-index: 1; }
	.htt-map-page.show-list .htt-map-rail, .htt-map-page.show-cmp .htt-map-rail { position: static; transform: none; max-height: none; box-shadow: none; border-radius: 0; padding-top: 20px; }
	.htt-map-listview, .htt-map-cmpview { height: auto; min-height: 60vh; }
}

/* ===========================================================
   SECTION 11 - Terminal hubs (/terminals/ and /terminals/{t}/)
   =========================================================== */

.htt-thub-head {
	background: var(--htt-navy);
	color: var(--htt-white);
	padding: 60px 0 52px;
}
.htt-thub-head-inner,
.htt-thub-body {
	max-width: 1180px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}
.htt-thub-head h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(36px, 5.5vw, 60px);
	line-height: 1.03;
	margin: 10px 0 8px;
}
.htt-thub-airlines { color: var(--htt-amber); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; }
.htt-thub-lede { max-width: 600px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.8); }

.htt-thub-index {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 24px 80px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.htt-thub-body { padding-top: 48px; padding-bottom: 80px; }
.htt-thub-intro {
	display: grid;
	grid-template-columns: 1.4fr 0.9fr;
	gap: 48px;
	align-items: start;
	padding-bottom: 24px;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--htt-line);
}
.htt-thub-intro p { font-size: 19px; line-height: 1.65; color: var(--htt-ink); }
.htt-thub-facts {
	list-style: none;
	margin: 0;
	padding: 22px 24px;
	background: var(--htt-cream);
	border-radius: 14px;
	border: 1px solid var(--htt-line);
}
.htt-thub-facts li {
	font-size: 14.5px;
	line-height: 1.5;
	padding: 9px 0 9px 22px;
	position: relative;
	color: var(--htt-ink);
}
.htt-thub-facts li + li { border-top: 1px solid var(--htt-line); }
.htt-thub-facts li::before {
	content: '';
	position: absolute;
	left: 0; top: 16px;
	width: 8px; height: 8px;
	background: var(--htt-amber);
	border-radius: 50%;
}

.htt-thub-section { margin-bottom: 56px; }
.htt-thub-buses-note { font-size: 16px; color: var(--htt-muted); max-width: 620px; margin-bottom: 18px; }
.htt-thub-bus-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.htt-thub-bus-chip {
	background: var(--htt-navy);
	color: var(--htt-white);
	padding: 10px 20px;
	border-radius: 999px;
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	transition: background 0.15s ease;
}
.htt-thub-bus-chip:hover { background: var(--htt-amber); color: var(--htt-navy); }
.htt-thub-bus-all { margin-top: 4px; }

@media (max-width: 900px) {
	.htt-thub-intro { grid-template-columns: 1fr; gap: 28px; }
	.htt-thub-index { grid-template-columns: 1fr; }
}

/* ===========================================================
   SECTION 12 - Transport (/transport/, /transport/buses/, routes)
   =========================================================== */

.htt-trans-body {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 24px 80px;
}
.htt-trans-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.htt-trans-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--htt-white);
	border: 1px solid var(--htt-line);
	border-radius: 16px;
	padding: 28px 26px 26px;
	text-decoration: none;
	color: var(--htt-ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.htt-trans-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(29,34,52,0.12); }
.htt-trans-card-wide {
	grid-column: span 3;
	background: var(--htt-navy);
	color: var(--htt-white);
	flex-direction: column;
}
.htt-trans-card-wide h2,
.htt-trans-card-wide p { color: var(--htt-white); }
.htt-trans-card-sub {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--htt-amber);
}
.htt-trans-card h2 { font-size: 26px; }
.htt-trans-card p { font-size: 15px; line-height: 1.55; color: var(--htt-muted); }
.htt-trans-card-wide p { color: rgba(255,255,255,0.82); max-width: 620px; }
.htt-trans-card-cta {
	margin-top: 6px;
	font-weight: 600;
	font-size: 14px;
	color: var(--htt-navy);
}
.htt-trans-card-wide .htt-trans-card-cta { color: var(--htt-amber); }
.htt-trans-card-soon { opacity: 0.92; }
.htt-trans-card-soon .htt-trans-card-cta { color: var(--htt-muted); }

/* Universal fare facts */
.htt-bus-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 22px;
}
.htt-bus-fact {
	background: var(--htt-cream);
	border: 1px solid var(--htt-line);
	border-radius: 14px;
	padding: 26px 24px;
	text-align: center;
}
.htt-bus-fact-num {
	display: block;
	font-family: 'Fraunces', serif;
	font-size: 40px;
	font-weight: 600;
	color: var(--htt-navy);
	line-height: 1;
	margin-bottom: 8px;
}
.htt-bus-fact-label { font-size: 14px; color: var(--htt-muted); }
.htt-bus-contactless {
	background: var(--htt-navy);
	color: var(--htt-white);
	padding: 16px 20px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.55;
}
.htt-bus-contactless strong { color: var(--htt-amber); }
.htt-bus-contactless--tight { padding: 12px 14px; font-size: 13px; margin-top: 12px; }

/* Route grid */
.htt-bus-route-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.htt-bus-route-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--htt-white);
	border: 1px solid var(--htt-line);
	border-radius: 14px;
	padding: 22px 22px 20px;
	text-decoration: none;
	color: var(--htt-ink);
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.htt-bus-route-card:hover { transform: translateY(-3px); border-color: var(--htt-amber); }
.htt-bus-route-num {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 30px;
	color: var(--htt-navy);
	line-height: 1;
}
.htt-bus-route-name { font-size: 15px; font-weight: 600; }
.htt-bus-route-serves { font-size: 13px; color: var(--htt-amber); font-weight: 600; }

.htt-bus-note-box {
	background: var(--htt-cream);
	border: 1px solid var(--htt-line);
	border-radius: 16px;
	padding: 28px 30px;
}
.htt-bus-note-box h3 { font-family: 'Fraunces', serif; font-size: 22px; margin-bottom: 10px; }
.htt-bus-note-box p { font-size: 16px; line-height: 1.6; color: var(--htt-ink); max-width: 720px; }

/* Per-route */
.htt-busroute-run { margin-top: 14px; font-size: 16px; }
.htt-busroute-fare { display: flex; gap: 24px; margin-bottom: 4px; }
.htt-busroute-fare .htt-bus-fact-num { font-size: 28px; margin-bottom: 2px; }
.htt-busroute-fare > div { font-size: 13px; color: var(--htt-muted); }
.htt-verify-flag {
	background: #FCEFD9;
	border: 1px dashed var(--htt-amber);
	color: #8a5a1a;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 13.5px;
	margin-bottom: 16px;
}
.htt-busroute-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.htt-busroute-table th,
.htt-busroute-table td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--htt-line);
	vertical-align: top;
}
.htt-busroute-table th {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--htt-muted);
}

@media (max-width: 900px) {
	.htt-trans-grid,
	.htt-bus-facts,
	.htt-bus-route-grid { grid-template-columns: 1fr; }
	.htt-trans-card-wide { grid-column: span 1; }
}

/* ===========================================================
   SECTION 13 - Guides + static pages
   =========================================================== */

.htt-guides-filter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.htt-guides-item { display: flex; }
.htt-guides-item > .htt-guide-card { width: 100%; }

/* Single guide */
.htt-guide-single { background: var(--htt-white); }
.htt-guide-hero {
	background: var(--htt-navy);
	color: var(--htt-white);
	padding: 104px 0 60px;
	background-size: cover;
	background-position: center;
	position: relative;
	min-height: 380px;
	display: flex;
	align-items: flex-end;
}
.htt-guide-hero--img::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,24,42,0.25) 0%, rgba(20,24,42,0.45) 55%, rgba(20,24,42,0.78) 100%);
}
.htt-guide-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 44px;
}
.htt-guide-hero-cat {
	display: inline-block;
	margin: 14px 0 12px;
	color: var(--htt-navy);
	background: var(--htt-amber);
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}
.htt-guide-hero h1 {
	font-family: 'Inter', system-ui, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: clamp(38px, 5.4vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	margin: 0 0 18px;
	max-width: 20ch;
}
.htt-guide-hero-meta { font-size: 14px; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; }

.htt-guide-single-inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px 72px;
}
.htt-guide-byline {
	margin-top: 48px;
	padding: 28px 30px;
	background: var(--htt-cream);
	border: 1px solid var(--htt-line);
	border-radius: 16px;
}
.htt-guide-byline-name { font-family: 'Fraunces', serif; font-size: 20px; color: var(--htt-navy); margin-bottom: 6px; }
.htt-guide-byline p { font-size: 15px; color: var(--htt-muted); margin-bottom: 16px; line-height: 1.6; }

/* Static pages */
.htt-static-head {
	background: var(--htt-navy);
	color: var(--htt-white);
	padding: 60px 0 52px;
}
.htt-static-head-inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px;
}
.htt-static-head h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.04;
	margin: 8px 0 14px;
}
.htt-static-lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 620px; }

.htt-static-body { margin: 0 auto; padding: 52px 24px 80px; }
.htt-static-body--prose { max-width: 720px; }
.htt-static-body--wide { max-width: 1100px; }

/* Prose (shared by guide body + static pages) */
.htt-prose,
.htt-guide-body {
	font-size: 18px;
	line-height: 1.72;
	color: var(--htt-ink);
}
.htt-prose > * + *,
.htt-guide-body > * + * { margin-top: 1.1em; }
.htt-prose h2,
.htt-guide-body h2 {
	font-family: 'Fraunces', serif;
	font-size: 28px;
	line-height: 1.2;
	margin-top: 1.7em;
	color: var(--htt-navy);
}
.htt-prose h3,
.htt-guide-body h3 {
	font-family: 'Fraunces', serif;
	font-size: 22px;
	margin-top: 1.5em;
	color: var(--htt-navy);
}
.htt-prose a,
.htt-guide-body a {
	color: var(--htt-navy);
	text-decoration: underline;
	text-decoration-color: var(--htt-amber);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}
.htt-prose ul,
.htt-prose ol,
.htt-guide-body ul,
.htt-guide-body ol { padding-left: 1.3em; }
.htt-prose li,
.htt-guide-body li { margin-top: 0.4em; }
.htt-prose blockquote,
.htt-guide-body blockquote {
	border-left: 3px solid var(--htt-amber);
	padding: 4px 0 4px 20px;
	margin-left: 0;
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-size: 22px;
	color: var(--htt-navy);
}
.htt-prose hr,
.htt-guide-body hr { border: none; border-top: 1px solid var(--htt-line); }
.htt-prose code,
.htt-guide-body code { background: var(--htt-stone); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.htt-guide-body img { max-width: 100%; height: auto; }
.htt-guide-body .htt-gi {
	display: inline-block;
	width: 18px; height: 18px;
	vertical-align: -3px;
	margin-right: 7px;
}
.htt-guide-body .htt-gfig { margin: 1.8em 0; text-align: center; }
.htt-guide-body .htt-gfig .htt-gimg { max-width: 100%; height: auto; border-radius: 10px; }

/* ===========================================================
   SECTION 14 - Heading colour overrides on coloured bands
   Blocksy applies its own dark heading colour to h1/h2/h3,
   which beats our inherited colour on navy/amber sections.
   Force the correct colour explicitly on those bands.
   =========================================================== */

.htt-home-hero h1,
.htt-dir-head h1,
.htt-thub-head h1,
.htt-static-head h1,
.htt-guide-hero h1,
.htt-home-transport-copy h2,
.htt-home-louise-card .htt-home-louise-quote {
	color: var(--htt-white) !important;
}
.htt-home-newsletter h2 {
	color: var(--htt-navy) !important;
}
/* Map strip title sits on cream, so it stays navy */
.htt-map-strip h1 {
	color: var(--htt-navy) !important;
}

/* ===========================================================
   SECTION 16 - Brand logo (real SVG, crop-container)
   The logo SVGs are 1000x1000 with the artwork in a middle
   horizontal band, so a fixed-height container clips the empty
   top/bottom while the taller image is pulled up/down with
   negative margins. If the logo sits too high/low or shows
   whitespace, nudge the img height + margin (they move together).
   =========================================================== */
.htt-logo-crop {
	display: block;
	height: 52px;
	overflow: hidden;
	line-height: 0;
}
.htt-logo-crop .htt-logo-img {
	display: block;
	height: 124px;
	width: auto;
	margin: -36px 0;
}
.htt-logo-crop-footer { height: 88px; }
.htt-logo-crop-footer .htt-logo-img {
	height: 210px;
	margin: -61px 0;
}

/* Beyond the Airport wordmark: suitcase mark + two-tone text title.
   (Replaces the old single-SVG wordmark. The mark is the suitcase-H;
   the title is set in Fraunces — "Beyond" amber, "the Airport" navy.) */
.htt-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}
.htt-logo-mark {
	display: block;
	height: 46px;
	width: auto;
	flex: 0 0 auto;
}
.htt-logo-word {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-style: italic;
	font-size: 21px;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.htt-logo-word-1 { color: #E1963D; }
.htt-logo-word-2 { color: #1D2234; }

/* Footer variant — on the dark band the title goes light. */
.htt-logo-link-footer { gap: 13px; }
.htt-logo-mark-footer { height: 54px; }
.htt-logo-word-footer { font-size: 24px; }
.htt-logo-word-footer .htt-logo-word-2 { color: #ffffff; }

@media (max-width: 560px) {
	.htt-logo-word { font-size: 18px; }
	.htt-logo-mark { height: 40px; }
}

/* ===========================================================
   SECTION 17 - Hero gallery (swipe) + lightbox + in-content images
   The hero is a full-bleed swipeable gallery: images on a
   scroll-snap track (z0), gradient (z1), fixed overlay with the
   title/badges/white arrows (z2). Click any photo for the lightbox.
   =========================================================== */
.htt-hero-track {
	position: absolute; inset: 0; z-index: 0;
}
.htt-hero-slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; transition: opacity 0.7s ease;
	cursor: zoom-in;
}
.htt-hero-slide.htt-slide-active {
	opacity: 1;
}
.htt-hero::before { z-index: 1; }
.htt-hero-overlay {
	position: absolute; inset: 0; z-index: 2;
	pointer-events: none;
	display: flex; flex-direction: column; justify-content: flex-end;
}
.htt-hero-overlay a, .htt-hero-overlay button { pointer-events: auto; }
.htt-hero-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: none; border: none; cursor: pointer;
	color: #fff; font-size: 46px; line-height: 1;
	opacity: 0.9; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	padding: 8px 14px;
}
.htt-hero-nav:hover { opacity: 1; }
.htt-hero-prev { left: 6px; }
.htt-hero-next { right: 6px; }

.htt-lightbox {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(20, 24, 42, 0.94);
	display: flex; align-items: center; justify-content: center;
}
.htt-lightbox[hidden] { display: none; }
.htt-lb-img { max-width: 92vw; max-height: 86vh; border-radius: 6px; }
.htt-lb-close {
	position: absolute; top: 14px; right: 20px;
	background: none; border: none; color: #fff;
	font-size: 40px; line-height: 1; cursor: pointer;
}
.htt-lb-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 54px; height: 54px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.14); border: none;
	color: #fff; font-size: 30px; cursor: pointer;
}
.htt-lb-prev { left: 16px; }
.htt-lb-next { right: 16px; }

/* In-content section image (Sawday's style) */
.htt-section-img { margin: 22px 0 4px; border-radius: 14px; overflow: hidden; background: var(--htt-stone); }
.htt-section-img img { display: block; width: 100%; height: auto; }
.htt-section-img figcaption { font-size: 13px; color: var(--htt-muted); padding: 8px 2px 0; }

/* Watch the visit (YouTube embed) */
.htt-watch-embed {
	position: relative; width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 14px; overflow: hidden;
	background: var(--htt-navy); margin-top: 8px;
}
.htt-watch-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 700px) {
	/* Mobile: no arrow carousel — swipe the hero to see other photos.
	   The "1 / N" counter pill stays as the cue that more shots exist. */
	.htt-hero { aspect-ratio: 4 / 3; min-height: 300px; max-height: 400px; }
	.htt-hero-nav { display: none; }
	.htt-lb-nav { width: 44px; height: 44px; font-size: 24px; }
}

/* ===========================================================
   SECTION 18 - Eat vertical (places): directory cards, tier
   badges, single place page. Reuses .htt-dir / .htt-card-grid.
   =========================================================== */

/* worth-the-small-detour tier badge */
.htt-eat-tier {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
	color: var(--htt-white);
	background: var(--htt-navy);
}
.htt-eat-tier--at-the-door            { background: #2f9e7d; }
.htt-eat-tier--worth-the-walk         { background: #4a8fb0; }
.htt-eat-tier--worth-the-small-detour { background: var(--htt-amber); color: var(--htt-navy); }
.htt-eat-tier--worth-leaving-the-airport { background: var(--htt-navy); }

/* directory cards */
.htt-eat-card { display: block; text-decoration: none; color: inherit; border-radius: 16px; overflow: hidden; background: var(--htt-white); border: 1px solid var(--htt-line); transition: transform .14s, box-shadow .14s; }
.htt-eat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(29,34,52,.12); }
.htt-eat-card-img { height: 170px; background: var(--htt-stone) center/cover no-repeat; position: relative; display: flex; align-items: flex-start; padding: 12px; }
.htt-eat-card-body { padding: 14px 16px 18px; }
.htt-eat-card-meta { font-size: 12px; color: var(--htt-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.htt-eat-card-name { font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 600; color: var(--htt-navy); margin: 0 0 4px; }
.htt-eat-card-sub { font-size: 13.5px; color: var(--htt-muted); margin: 0; line-height: 1.45; }

/* nearby-place cards on the hotel page: tier badge + review/maps links */
.htt-restaurant-img { position: relative; }
.htt-restaurant-img .htt-eat-tier { position: absolute; top: 10px; left: 10px; }
.htt-restaurant-name a { color: inherit; text-decoration: none; }
.htt-restaurant-name a:hover { text-decoration: underline; }
.htt-restaurant-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.htt-restaurant-links a { font-size: 13px; font-weight: 600; color: var(--htt-navy); text-decoration: none; }
.htt-restaurant-links a:hover { text-decoration: underline; }

/* single place page */
.htt-place-hero { position: relative; width: 100%; aspect-ratio: 16 / 6; min-height: 320px; max-height: 480px; background: var(--htt-navy) center/cover no-repeat; display: flex; align-items: flex-end; }
.htt-place-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29,34,52,0) 45%, rgba(29,34,52,.85) 100%); }
.htt-place-hero-overlay { position: relative; z-index: 1; width: 100%; max-width: var(--htt-max); margin: 0 auto; padding: 28px 24px; color: var(--htt-white); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.htt-place-hero-inner h1 { font-size: clamp(32px, 5vw, 54px); font-style: italic; font-weight: 500; color: var(--htt-white); margin: 8px 0 4px; }
.htt-place-hero-sub { font-size: 17px; color: rgba(255,255,255,.92); max-width: 620px; font-weight: 300; }
.htt-place-metabar { max-width: var(--htt-max); margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 10px; background: var(--htt-cream); border-bottom: 1px solid var(--htt-line); font-size: 13px; color: var(--htt-navy); }
.htt-place-metabar span { background: var(--htt-white); border: 1px solid var(--htt-line); border-radius: 999px; padding: 5px 12px; }
.htt-place-diet { background: #eef5f1 !important; }
.htt-place-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 40px; max-width: var(--htt-max); margin: 0 auto; padding: 40px 24px 64px; }
.htt-place-sponsored { font-size: 12px; color: var(--htt-muted); font-style: italic; margin: 0 0 16px; }
.htt-place-lead { font-size: 19px; line-height: 1.6; color: var(--htt-navy); }
.htt-place-fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.htt-place-fact { background: var(--htt-cream); border: 1px solid var(--htt-line); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--htt-navy); }
.htt-place-fact span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--htt-muted); margin-bottom: 4px; }
.htt-place-fact--crew { grid-column: 1 / -1; background: #fff7e8; border-color: #f0e4c8; }
.htt-place-rail { align-self: start; position: sticky; top: 90px; }
.htt-place-actions { display: grid; gap: 10px; }
.htt-place-addr { font-size: 13px; color: var(--htt-muted); margin-top: 14px; }

@media (max-width: 900px) {
	.htt-place-layout { grid-template-columns: 1fr; gap: 28px; }
	.htt-place-rail { position: static !important; }
	.htt-place-fact-grid { grid-template-columns: 1fr; }
}

/* Full-bleed for place singles — mirrors the body.single-hotel override so the
   place hero spans edge-to-edge. (Header/footer hide is handled by the shared
   body.htt-no-blocksy-chrome rules in SECTION 1, added via body_class.) */
body.single-place {
	--theme-container-edge-spacing: 100vw !important;
	--theme-container-width: 100% !important;
	--theme-container-width-base: 100vw !important;
	--theme-normal-container-max-width: 100vw !important;
	--theme-narrow-container-max-width: 100vw !important;
	--theme-block-width: 100% !important;
	--theme-block-max-width: 100vw !important;
	--theme-block-wide-max-width: 100vw !important;
	--theme-wide-offset: 0px !important;
	--container-max-width: 100% !important;
	--wide-offset: 0 !important;
	--narrow-offset: 0 !important;
}
body.single-place .entry-header,
body.single-place .entry-title,
body.single-place .ct-container,
body.single-place .ct-main-styles-wrapper > .ct-container { display: none !important; }
body.single-place main,
body.single-place main.site-main,
body.single-place .content-area,
body.single-place .ct-main-styles-wrapper,
body.single-place #main,
body.single-place .ct-main,
body.single-place [class*="ct-container"],
body.single-place article,
body.single-place .ct-page-wrapper,
body.single-place .entry-content {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}
body.single-place .ct-sidebar { display: none !important; }

/* ===========================================================
   SECTION 19 - Hotel location: terminal BOARD + Map/List module
   Lifted from the locked preview (htt-hotel-location-PREVIEW.html).
   Colours are inlined (no CSS-var dependency) so Leaflet divIcon
   markers — which render outside the section — style correctly.
   navy #1D2234 amber #E1963D cream #F7F4EE stone #E9E4DA
   line #E5E0D5 muted #6B7280 ink #2A2C33
   walk #2F9E7D bus #3A6EA5 train #6950A1 hotel #E5383B
   =========================================================== */

/* --- shared location card shell --- */
.htt-loc-card { background: #fff; border: 1px solid #E5E0D5; border-radius: 20px; padding: 24px 26px 26px; box-shadow: 0 10px 30px rgba(29,34,52,.10); }
.htt-loc-name { font-family: 'Fraunces', Georgia, serif; font-size: 23px; font-style: italic; color: #1D2234; line-height: 1.1; }
.htt-loc-sub { font-size: 13.5px; color: #6B7280; margin: 6px 0 22px; max-width: 64ch; line-height: 1.55; }
.htt-loc-sech { font: 700 11px/1 'Inter', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .09em; color: #6B7280; margin: 26px 0 14px; display: flex; align-items: center; gap: 12px; }
.htt-loc-sech::after { content: ''; flex: 1; height: 1px; background: #E5E0D5; }
.htt-illus { font-size: 11.5px; color: #6B7280; font-style: italic; margin: 14px 2px 0; line-height: 1.5; }

/* --- terminal board --- */
.htt-tboard { display: grid; gap: 11px; margin: 18px 0 4px; }
.htt-tcard { display: grid; grid-template-columns: 50px 1fr auto; gap: 16px; align-items: center; border: 1px solid #E5E0D5; border-radius: 15px; padding: 14px 17px; background: #fff; transition: .12s; }
.htt-tcard:hover { border-color: #1D2234; box-shadow: 0 6px 20px rgba(29,34,52,.08); }
.htt-tcard.rec { border-color: #e7d4b3; background: linear-gradient(0deg,#fffaf2,#fff); }
.htt-tterm { width: 50px; height: 50px; border-radius: 13px; background: #1D2234; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 15px/1 'Inter', system-ui, sans-serif; flex: 0 0 auto; }
.htt-tmain { min-width: 0; }
.htt-ttop { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.htt-tname { font: 700 13px/1 'Inter', system-ui, sans-serif; color: #1D2234; }
.htt-best { font: 700 9.5px/1 'Inter', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; background: #E1963D; color: #1D2234; padding: 3px 8px; border-radius: 999px; }
.htt-tsum { font-size: 12.5px; color: #2A2C33; margin-bottom: 11px; line-height: 1.45; }
.htt-tsum b, .htt-tsum strong { color: #1D2234; }
.htt-ttime { font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 600; color: #1D2234; white-space: nowrap; text-align: right; line-height: 1; }
.htt-ttime small { display: block; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 10px; color: #6B7280; text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }
.htt-journey { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.htt-jnode { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 'Inter', system-ui, sans-serif; color: #2A2C33; white-space: nowrap; }
.htt-jdot { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #1D2234; }
.htt-jnode.end .htt-jdot { background: #E5383B; border-color: #E5383B; }
.htt-jseg { display: inline-flex; align-items: center; gap: 4px; margin: 0 3px; }
.htt-jline { height: 3px; width: 16px; border-radius: 2px; }
.htt-jchip { display: inline-flex; align-items: center; gap: 5px; font: 700 10px/1 'Inter', system-ui, sans-serif; color: #fff; padding: 5px 9px; border-radius: 999px; }
.htt-jchip.walk { background: #2F9E7D; }
.htt-jchip.bus { background: #3A6EA5; }
.htt-jchip.train { background: #6950A1; }
.htt-jchip svg { width: 12px; height: 12px; display: block; }
.htt-tfl-link { display: inline-block; margin-top: 9px; font: 600 11.5px/1 'Inter', system-ui, sans-serif; color: #3A6EA5; text-decoration: none; }
.htt-tfl-link:hover { text-decoration: underline; }
/* Terminal-board two-direction blocks (Getting to your terminal / to the hotel).
   The return journey (directions_from_terminal) is now shown, not just the outbound. */
.htt-tdir { display: flex; gap: 11px; padding: 11px 0; }
.htt-tdir + .htt-tdir { border-top: 1px dashed #E5E0D5; }
.htt-tdir-ico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; }
.htt-tdir.out .htt-tdir-ico { background: #EAF3EF; color: #2F9E7D; }
.htt-tdir.in .htt-tdir-ico { background: #EEF2F8; color: #3A6EA5; }
.htt-tdir-body { min-width: 0; }
.htt-tdir-lbl { font: 700 10.5px/1 'Inter', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #6B7280; margin-bottom: 5px; }
.htt-tdir-txt { font-size: 12.5px; color: #2A2C33; line-height: 1.5; }
.htt-tdir-txt a { color: #3A6EA5; text-decoration: underline; text-underline-offset: 2px; }
/* Bus-stop identifier tag inside directions text (Stop J / Stop 6 / Stop 18) */
.htt-stoptag { display: inline-block; font: 700 10px/1 'Inter', system-ui, sans-serif; background: #1D2234; color: #fff; border-radius: 6px; padding: 3px 6px; margin: 0 1px; vertical-align: 1px; }
a.htt-stoptag-link,
.htt-tdir-txt a.htt-stoptag-link { color: #fff; text-decoration: none; cursor: pointer; }
a.htt-stoptag-link:hover,
.htt-tdir-txt a.htt-stoptag-link:hover { background: #3A6EA5; color: #fff; }

/* --- bus-stop rows --- */
.htt-plist { display: grid; }
.htt-prow { display: flex; align-items: center; gap: 13px; padding: 12px 2px; border-bottom: 1px solid #E5E0D5; }
.htt-plist .htt-prow:last-child { border-bottom: none; }
.htt-pic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; background: #3A6EA5; }
.htt-pic svg { width: 18px; height: 18px; display: block; }
.htt-pname { font-size: 13.5px; font-weight: 600; color: #2A2C33; min-width: 0; }
.htt-pname small { display: block; font-weight: 400; color: #6B7280; font-size: 12px; margin-top: 2px; line-height: 1.4; }
.htt-broutes { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.htt-brbadge { font: 700 11px/1 'Inter', system-ui, sans-serif; background: #EEF2F8; color: #3A6EA5; border: 1px solid #D6DEEA; padding: 5px 9px; border-radius: 8px; }

/* --- explore module (Map | List) --- */
.htt-explore { border: 1px solid #E5E0D5; border-radius: 16px; overflow: hidden; background: #fff; margin-bottom: 8px; }
.htt-explore-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; }
.htt-explore-head .ttl { font: 700 11px/1 'Inter', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .09em; color: #6B7280; }
.htt-seg { display: inline-flex; background: #F7F4EE; border: 1px solid #E5E0D5; border-radius: 999px; padding: 3px; }
.htt-seg button { font: 600 12.5px/1 'Inter', system-ui, sans-serif; border: none; background: none; color: #6B7280; padding: 7px 17px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.htt-seg button.active { background: #1D2234; color: #fff; }
.htt-explore-map { height: 330px; position: relative; display: none; }
.htt-explore[data-view="map"] .htt-explore-map { display: block; }
.htt-locmap { position: absolute; inset: 0; }
.htt-loc-maptag { position: absolute; left: 14px; top: 14px; z-index: 500; background: rgba(255,255,255,.96); border: 1px solid #E5E0D5; border-radius: 9px; padding: 6px 12px; font: 700 10.5px/1 'Inter', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #6B7280; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.htt-loc-legend { position: absolute; left: 14px; bottom: 14px; z-index: 500; background: rgba(255,255,255,.96); border: 1px solid #E5E0D5; border-radius: 10px; padding: 8px 11px; font-size: 11px; box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.htt-loc-legend .lr { display: flex; align-items: center; gap: 7px; margin: 4px 0; color: #2A2C33; white-space: nowrap; }
.htt-loc-legend .ic { width: 16px; height: 16px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.htt-loc-legend .ic svg { width: 10px; height: 10px; }
.htt-loc-legend .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* horizontal strip (map view) */
.htt-strip { display: none; gap: 11px; padding: 13px; overflow-x: auto; background: #F7F4EE; border-top: 1px solid #E5E0D5; scrollbar-width: thin; }
.htt-explore[data-view="map"] .htt-strip { display: flex; }
.scard { flex: 0 0 218px; border: 1px solid #E5E0D5; border-radius: 13px; overflow: hidden; background: #fff; cursor: pointer; transition: .12s; text-decoration: none; color: inherit; }
.scard.active, .scard:hover { border-color: #1D2234; box-shadow: 0 8px 20px rgba(29,34,52,.14); transform: translateY(-2px); }
.scard.active { outline: 2px solid #E5383B; outline-offset: -1px; }
.scard .img { height: 104px; background: #E9E4DA center/cover; position: relative; }
.scard .tier { position: absolute; left: 8px; top: 8px; background: rgba(29,34,52,.9); color: #fff; font: 700 8.5px/1 'Inter', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; padding: 4px 7px; border-radius: 999px; }
.scard .cat { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 7px; background: #1D2234; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.scard .cat svg { width: 13px; height: 13px; }
.scard .b { padding: 9px 11px 11px; }
.scard .nm { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 14.5px; color: #1D2234; line-height: 1.15; }
.scard .mt { font-size: 11.5px; color: #6B7280; margin: 3px 0 9px; }
.scard .lk { display: flex; flex-direction: column; gap: 6px; }
.scard .lk a { display: block; text-align: center; font: 600 11px/1 'Inter', system-ui, sans-serif; text-decoration: none; padding: 8px 4px; border-radius: 7px; }
.scard .lk .rev { background: #1D2234; color: #fff; }
.scard .lk .map { border: 1px solid #E5E0D5; color: #1D2234; }

/* vertical list (list view) */
.htt-vlist { display: none; padding: 8px 4px 4px; }
.htt-explore[data-view="list"] .htt-vlist { display: block; }
.vrow { display: flex; align-items: center; gap: 13px; padding: 11px 8px; border-radius: 12px; border: 1px solid transparent; text-decoration: none; color: inherit; transition: .12s; }
.vrow:hover, .vrow.active { background: #faf8f3; border-color: #E5E0D5; }
.vrow .vimg { width: 64px; height: 64px; border-radius: 11px; background: #E9E4DA center/cover; flex: 0 0 auto; position: relative; }
.vrow .vcat { position: absolute; left: -6px; top: -6px; width: 24px; height: 24px; border-radius: 7px; background: #1D2234; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.vrow .vcat svg { width: 13px; height: 13px; }
.vrow .vb { min-width: 0; flex: 1; }
.vrow .vnm { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 15.5px; color: #1D2234; }
.vrow .vmt { font-size: 12px; color: #6B7280; margin-top: 2px; }
.vrow .vright { margin-left: auto; text-align: right; white-space: nowrap; }
.vrow .vwalk { font: 600 12.5px/1 'Inter', system-ui, sans-serif; color: #6B7280; }
.vrow .vlinks { margin-top: 7px; display: flex; gap: 16px; justify-content: flex-start; }
.vrow .vlinks a { font: 600 11.5px/1 'Inter', system-ui, sans-serif; text-decoration: none; color: #3A6EA5; }
.htt-subgroup { font: 600 11px/1 'Inter', system-ui, sans-serif; color: #6B7280; text-transform: uppercase; letter-spacing: .06em; margin: 14px 8px 2px; }

/* --- Leaflet divIcon markers (render outside the section — keep unscoped) --- */
.mk-hotel { filter: drop-shadow(0 4px 7px rgba(29,34,52,.45)); }
.mk-ico { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 9px; background: #1D2234; color: #fff; border: 2.5px solid #fff; box-shadow: 0 2px 7px rgba(0,0,0,.4); transition: transform .12s; }
.mk-ico svg { width: 17px; height: 17px; display: block; }
.mk-ico.active { transform: scale(1.22); background: #E5383B; box-shadow: 0 4px 12px rgba(229,56,59,.5); z-index: 1000; }
.mk-bus { display: inline-flex; align-items: center; gap: 3px; background: #3A6EA5; color: #fff; font: 700 11px/1 'Inter', system-ui, sans-serif; padding: 4px 8px 4px 6px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 2px 7px rgba(0,0,0,.4); white-space: nowrap; }
.mk-bus svg { width: 13px; height: 13px; display: block; }
.mk-bus { cursor: pointer; }
/* Bus-stop LETTER pin (mirrors the letter on the physical TfL stop flag, e.g. J / F).
   Used when a stop has a stop_code; falls back to .mk-bus otherwise. */
.mk-busstop { width: 32px; height: 32px; border-radius: 50%; background: var(--htt-navy); color: #fff; border: 2.5px solid #fff; display: flex; align-items: center; justify-content: center; font: 800 15px/1 'Inter', system-ui, sans-serif; box-shadow: 0 2px 7px rgba(0,0,0,.4); cursor: pointer; }
/* Stop letter shown in the "Bus stops at the hotel" list (reuses .htt-pic roundel) */
.htt-pic.htt-stopflag { background: var(--htt-navy); font: 800 16px/1 'Inter', system-ui, sans-serif; }
/* Bus-stop hover tooltip (shows direction + routes so the two 423 pins are
   distinguishable on the map). Brand navy, matches the place pins' detail UX. */
.htt-bus-tip.leaflet-tooltip { background: var(--htt-navy); color: #fff; border: none; font: 600 12px/1.3 'Inter', system-ui, sans-serif; padding: 6px 10px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.htt-bus-tip.leaflet-tooltip-top::before { border-top-color: var(--htt-navy); }

@media (max-width: 560px) {
	.htt-tcard { grid-template-columns: 42px 1fr; gap: 12px; }
	.htt-ttime { grid-column: 2; text-align: left; margin-top: 2px; }
	.htt-loc-card { padding: 20px 16px; }
}


/* ===========================================================
   SECTION 13b - Guide article BLOCK system (shortcodes)
   classes emitted by htt-guide-blocks snippet. Appended last
   so it wins the cascade. Scoped to guide singles.
   =========================================================== */
body.htt-single-guide .htt-guide-single-inner { max-width: none; padding: 0; }
body.htt-single-guide .htt-guide-body { max-width: none; font-size: inherit; }
body.htt-single-guide .htt-guide-body > * + * { margin-top: 0; }

.htt-gblock { padding: 56px 0; font-family: 'Source Serif 4', Georgia, serif; }
.htt-gblock--white { background: #fff; }
.htt-gblock--cream { background: #FBF5EA; }
.htt-gblock--mist  { background: #ECF1F6; }
.htt-gblock--warn  { background: #FBE6CB; }
.htt-gblock--navy  { background: var(--htt-navy); color: #fff; }
.htt-gwrap { max-width: 1080px; margin: 0 auto; padding: 0 44px; }

.htt-guide-body .htt-gblock p { font-family: 'Source Serif 4', Georgia, serif; font-size: 19.5px; line-height: 1.72; margin: 0 0 1.2em; color: #2c323d; max-width: 760px; }
.htt-gblock--navy p { color: rgba(255,255,255,0.9) !important; }
.htt-guide-body .htt-gblock a { color: var(--htt-navy); text-decoration: none; box-shadow: inset 0 -1px 0 #D6892C; }
.htt-gblock--navy a { color: #fff !important; }
.htt-gblock strong { font-weight: 600; color: #1d232e; }
.htt-gblock--navy strong { color: #fff; }

.htt-gsec-head { display: flex; align-items: center; gap: 15px; margin-bottom: 24px; }
.htt-gic { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: var(--htt-navy); color: #fff; display: flex; align-items: center; justify-content: center; }
.htt-gic svg { width: 23px; height: 23px; }
.htt-gblock--navy .htt-gic { background: #D6892C; color: var(--htt-navy); }
.htt-gblock--warn .htt-gic { background: #A4661A; color: #fff; }
.htt-guide-body .htt-gsec-head h2 { font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-weight: 600; font-size: 29px; line-height: 1.1; color: var(--htt-navy); margin: 0; letter-spacing: -0.02em; }
.htt-gblock--navy .htt-gsec-head h2 { color: #fff; }
.htt-guide-body .htt-gh3 { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: #A4661A; margin: 1.8em 0 0.7em; }

.htt-guide-body ul.htt-check, .htt-guide-body ul.htt-cautions { list-style: none; margin: 1em 0 1.4em; padding: 0; }
.htt-guide-body ul.htt-check li, .htt-guide-body ul.htt-cautions li { position: relative; padding: 0 0 0 36px; margin: 0 0 13px; line-height: 1.5; font-size: 18.5px; }
.htt-guide-body ul.htt-check li::before { content: ""; position: absolute; left: 0; top: 2px; width: 23px; height: 23px; border-radius: 7px; background-color: #D6892C; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012l5%205L20%206'/%3E%3C/svg%3E"); background-size: 14px; background-repeat: no-repeat; background-position: center; }
.htt-guide-body ul.htt-cautions li { color: #565c66; }
.htt-guide-body ul.htt-cautions li::before { content: ""; position: absolute; left: 0; top: 2px; width: 23px; height: 23px; border-radius: 7px; background-color: #fff; border: 1.7px solid #A4661A; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23A4661A'%20stroke-width='4.6'%20stroke-linecap='round'%3E%3Cpath%20d='M12%206v6.2'/%3E%3Cpath%20d='M12%2017.4h.01'/%3E%3C/svg%3E"); background-size: 17px; background-repeat: no-repeat; background-position: center; }

.htt-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0.5em 0; }
.htt-card { background: #fff; border: 1px solid #e6e0d3; border-radius: 14px; padding: 24px 26px; }
.htt-card h4 { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 600; color: var(--htt-navy); margin: 0 0 16px; padding-bottom: 14px; border-bottom: 2px solid #D6892C; }
.htt-guide-body .htt-card p { max-width: none; }
.htt-guide-body .htt-card ul.htt-check li, .htt-guide-body .htt-card ul.htt-cautions li { font-size: 16.5px; }

.htt-callout { font-family: 'Inter', sans-serif; display: flex; gap: 14px; border-radius: 12px; padding: 20px 22px; margin: 1.4em 0; font-size: 16.5px; line-height: 1.58; background: #fff; border: 1px solid #e6e0d3; max-width: 760px; }
.htt-guide-body .htt-callout p { font-family: 'Inter', sans-serif; font-size: 16.5px; margin: 0; max-width: none; color: inherit; }
.htt-cic { flex: 0 0 22px; color: #A4661A; }
.htt-cic svg { width: 22px; height: 22px; }
.htt-callout b { display: block; font-family: 'Inter', sans-serif; font-weight: 600; color: var(--htt-navy); font-size: 12.5px; letter-spacing: 0.07em; margin-bottom: 4px; text-transform: uppercase; }
.htt-callout--tip { border-left: 4px solid #D6892C; }
.htt-callout--note { background: rgba(0,0,0,0.025); }
.htt-gblock--navy .htt-callout { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); color: #fff; }
.htt-gblock--navy .htt-callout b, .htt-gblock--navy .htt-callout .htt-cic { color: #E6A24A; }

.htt-pull { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 4px solid #D6892C; max-width: 820px; }
.htt-guide-body .htt-pull p { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.25; color: var(--htt-navy); margin: 0; max-width: none; }
.htt-pull cite { display: block; margin-top: 12px; font-family: 'Inter', sans-serif; font-style: normal; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--htt-muted); }

.htt-guide-body .htt-gblock figure { margin: 1.6em 0; max-width: 560px; }
.htt-guide-body .htt-gblock figure img { border-radius: 12px; width: 100%; }
.htt-guide-body .htt-gblock figcaption { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--htt-muted); margin-top: 11px; }

.htt-gblock .wp-block-table table, .htt-gblock table { border-collapse: collapse; width: 100%; font-family: 'Inter', sans-serif; font-size: 15px; background: #fff; border: 1px solid #e6e0d3; }
.htt-gblock table th { background: var(--htt-navy); color: #fff; font-weight: 500; text-align: left; padding: 15px 18px; }
.htt-gblock table td { padding: 14px 18px; border-top: 1px solid #e6e0d3; }
.htt-gblock table tr:nth-child(even) td { background: #FBF5EA; }

/* Full-bleed cream "about the author" band, content aligned to the 1080 column
   via the max()-padding trick (no inner wrapper needed). Sits flush against the
   footer so there's no bare white gap at the foot of the article. */
body.htt-single-guide .htt-guide-byline { max-width: none; margin: 0; background: #FBF5EA; border: none; border-top: 1px solid var(--htt-line); border-radius: 0; padding: 44px max(44px, calc((100% - 1080px) / 2 + 44px)); display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
body.htt-single-guide .htt-guide-byline-text { flex: 1 1 320px; min-width: 0; }
body.htt-single-guide .htt-guide-byline-name { font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 600; color: var(--htt-navy); }
body.htt-single-guide .htt-guide-byline-text p { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.55; color: var(--htt-muted); margin: 5px 0 0; max-width: 560px; }
body.htt-single-guide .htt-guide-byline-btn { flex: 0 0 auto; white-space: nowrap; }

/* Trailing disclaimer: the final article section is just a [note]. Drop the
   white box and fold it into the cream outro so it flows into the byline band
   (cream disclaimer -> divider -> cream author band -> navy footer). Targets
   only the LAST block in the body, so other [note] boxes are untouched. */
body.htt-single-guide .htt-guide-body .htt-gblock:last-child { background: #FBF5EA; padding: 34px 0 22px; }
body.htt-single-guide .htt-guide-body .htt-gblock:last-child .htt-callout--note { max-width: none; margin: 0; padding: 0; background: transparent; border: none; align-items: center; }
body.htt-single-guide .htt-guide-body .htt-gblock:last-child .htt-callout--note .htt-cic { color: var(--htt-muted); }
body.htt-single-guide .htt-guide-body .htt-gblock:last-child .htt-callout--note p { font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.55; color: var(--htt-muted); }

/* Comments section — restyle the plain Blocksy/WP form to match the guide.
   Scoped to guide singles so other post types are untouched. */
body.htt-single-guide .ct-comments-container { background: #F7F4EE; border-top: 1px solid var(--htt-line); padding: 56px 0 72px; }
body.htt-single-guide .ct-comments-container .ct-container-narrow { max-width: 1080px; margin: 0 auto; padding: 0 44px; }
body.htt-single-guide .comment-reply-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -0.01em; color: var(--htt-navy); margin: 0 0 6px; }
body.htt-single-guide .comment-notes { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--htt-muted); margin: 0 0 22px; }
body.htt-single-guide .comment-form { max-width: 720px; }
body.htt-single-guide .comment-form label { display: block; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--htt-navy); margin-bottom: 7px; }
body.htt-single-guide .comment-form .required { color: #C0531F; }
body.htt-single-guide .comment-form input[type="text"],
body.htt-single-guide .comment-form input[type="email"],
body.htt-single-guide .comment-form input[type="url"],
body.htt-single-guide .comment-form textarea { width: 100%; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--htt-ink); background: #fff; border: 1px solid var(--htt-line); border-radius: 10px; padding: 12px 14px; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
body.htt-single-guide .comment-form input:focus,
body.htt-single-guide .comment-form textarea:focus { outline: none; border-color: var(--htt-amber); box-shadow: 0 0 0 3px rgba(225,150,61,0.18); }
body.htt-single-guide .comment-form textarea { min-height: 150px; resize: vertical; }
body.htt-single-guide .comment-form > p { margin: 0 0 18px; }
body.htt-single-guide .comment-form-author,
body.htt-single-guide .comment-form-email,
body.htt-single-guide .comment-form-url,
body.htt-single-guide .comment-form-field-input-author,
body.htt-single-guide .comment-form-field-input-email,
body.htt-single-guide .comment-form-field-input-url { display: inline-block; width: calc(33.333% - 12px); vertical-align: top; margin-right: 16px; }
body.htt-single-guide .comment-form-field-input-url,
body.htt-single-guide .comment-form-url { margin-right: 0; }
body.htt-single-guide .form-submit .submit,
body.htt-single-guide .comment-form .submit { font-family: 'Inter', sans-serif; background: var(--htt-amber); color: var(--htt-navy); font-weight: 600; font-size: 14px; border: none; border-radius: 999px; padding: 13px 28px; cursor: pointer; transition: transform 0.1s ease; }
body.htt-single-guide .form-submit .submit:hover { transform: translateY(-1px); }
body.htt-single-guide .comment-list { list-style: none; margin: 8px 0 40px; padding: 0; }
body.htt-single-guide .logged-in-as { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--htt-muted); margin-bottom: 22px; }
body.htt-single-guide .logged-in-as a { color: var(--htt-navy); }

@media (max-width: 760px) {
  body.htt-single-guide .htt-guide-byline { padding-left: 22px; padding-right: 22px; }
  body.htt-single-guide .ct-comments-container .ct-container-narrow { padding-left: 22px; padding-right: 22px; }
  body.htt-single-guide .comment-form-author,
  body.htt-single-guide .comment-form-email,
  body.htt-single-guide .comment-form-url,
  body.htt-single-guide .comment-form-field-input-author,
  body.htt-single-guide .comment-form-field-input-email,
  body.htt-single-guide .comment-form-field-input-url { display: block; width: 100%; margin-right: 0; }
}

.htt-gsplit { display: grid; grid-template-columns: var(--sp-c0, 1fr) var(--sp-c1, 1fr); gap: 40px; align-items: start; margin: 0 0 0.6em; }
.htt-gcol { min-width: 0; }
.htt-guide-body .htt-gcol p { max-width: none; }
.htt-guide-body .htt-gcol figure { margin: 0; max-width: 100%; }
.htt-guide-body .htt-gcol figure img { border-radius: 12px; width: 100%; height: auto; display: block; }
.htt-guide-body .htt-gcol .htt-callout { max-width: none; }
.htt-guide-body .htt-gcol table, .htt-guide-body .htt-gcol .wp-block-table { margin-top: 0; }

@media (max-width: 760px) {
  .htt-guide-hero-inner, .htt-gwrap, body.htt-single-guide .htt-guide-byline { padding-left: 22px; padding-right: 22px; }
  .htt-gblock { padding: 40px 0; }
  .htt-guide-body .htt-gblock p { font-size: 18px; }
  .htt-guide-body .htt-gsec-head h2 { font-size: 24px; }
  .htt-duo { grid-template-columns: 1fr; }
  .htt-gsplit { grid-template-columns: 1fr; }
}



/* ===========================================================
   SECTION 21 - Homepage additions (intro + trust + through + FAQ)
   Explicit section backgrounds below override the SECTION 7
   :nth-child(even) stripe so the band rhythm is deterministic
   after the new sections were inserted.
   =========================================================== */

.htt-home-section.htt-home-intro,
.htt-home-section.htt-home-terminals,
.htt-home-section.htt-home-through,
.htt-home-section.htt-home-louise { background: var(--htt-cream); }
.htt-home-section.htt-home-picks,
.htt-home-section.htt-home-guides,
.htt-home-section.htt-home-faq { background: var(--htt-white); }

/* Intro + trust */
.htt-home-intro-lede {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(22px, 2.5vw, 30px);
	line-height: 1.45;
	color: var(--htt-navy);
	max-width: 960px;
	margin: 0 0 80px;
}
.htt-home-intro-lede strong { color: var(--htt-amber); font-weight: 600; font-style: normal; }
.htt-home-trust-kicker {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--htt-amber);
	margin: 0 0 22px;
}
.htt-home-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}
.htt-home-trust-item {
	background: var(--htt-white);
	border: 1px solid var(--htt-line);
	border-top: 3px solid var(--htt-amber);
	border-radius: 12px;
	padding: 24px 22px;
}
.htt-home-trust-item h3 {
	font-family: 'Fraunces', serif;
	font-size: 21px;
	line-height: 1.2;
	margin: 0 0 10px;
	color: var(--htt-navy);
}
.htt-home-trust-item p {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--htt-ink);
	margin: 0;
}

/* Getting through */
.htt-home-through-inner {
	display: grid;
	grid-template-columns: 1.2fr 0.9fr;
	gap: 56px;
	align-items: center;
}
.htt-home-through-copy h2 { font-size: 36px; margin-bottom: 18px; }
.htt-home-through-copy p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--htt-ink);
	margin-bottom: 16px;
	max-width: 560px;
}
.htt-home-through-actions { margin-top: 26px; }
.htt-home-through-list {
	list-style: none;
	margin: 0;
	padding: 14px 30px;
	background: var(--htt-white);
	border: 1px solid var(--htt-line);
	border-radius: 16px;
}
.htt-home-through-list li {
	position: relative;
	padding: 14px 0 14px 28px;
	border-bottom: 1px solid var(--htt-line);
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--htt-navy);
}
.htt-home-through-list li:last-child { border-bottom: 0; }
.htt-home-through-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 19px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--htt-amber);
}

/* FAQ */
.htt-home-faq-list {
	max-width: 860px;
	border-top: 1px solid var(--htt-line);
}
.htt-home-faq-item { border-bottom: 1px solid var(--htt-line); }
.htt-home-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 22px 46px 22px 0;
	position: relative;
	font-family: 'Fraunces', serif;
	font-size: 20px;
	line-height: 1.35;
	color: var(--htt-navy);
}
.htt-home-faq-item summary::-webkit-details-marker { display: none; }
.htt-home-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Inter', sans-serif;
	font-size: 26px;
	font-weight: 300;
	color: var(--htt-amber);
	line-height: 1;
}
.htt-home-faq-item[open] summary::after { content: "\2013"; }
.htt-home-faq-a { padding: 0 46px 24px 0; }
.htt-home-faq-a p {
	margin: 0;
	font-size: 16px;
	line-height: 1.62;
	color: var(--htt-ink);
}

@media (max-width: 1024px) {
	.htt-home-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.htt-home-through-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 680px) {
	.htt-home-trust { grid-template-columns: 1fr; }
	.htt-home-through-copy h2 { font-size: 28px; }
	.htt-home-faq-item summary { font-size: 18px; }
}


/* ===========================================================
   SECTION 22 - FAQ page (/faq/, [htt_faq]) — redesigned 2026-06-18
   Two-column sticky topic nav + icon chips + card accordions +
   hero search. Built/verified from /tmp/faq_design.py mockup.
   =========================================================== */
.htt-faq-page *{box-sizing:border-box;}
.htt-faqp-hero{background:radial-gradient(120% 140% at 85% 0%,rgba(225,150,61,.16),transparent 55%),var(--htt-navy);color:#fff;padding:70px 0 64px;}
.htt-faqp-hero-inner,.htt-faqp-inner{max-width:1140px;margin:0 auto;padding:0 28px;}
.htt-faqp-eyebrow{color:var(--htt-amber);font:600 13px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;}
.htt-faqp-hero h1{color:#fff!important;font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(36px,5.5vw,60px);line-height:1.02;margin:0 0 14px;}
.htt-faqp-sub{font:400 18px/1.5 Inter,sans-serif;color:rgba(255,255,255,.78);max-width:560px;margin:0 0 30px;}
.htt-faqp-byline{font:500 13px/1.4 Inter,sans-serif;color:rgba(255,255,255,.62);margin:18px 0 0;}
.htt-faqp-byline strong{color:rgba(255,255,255,.9);font-weight:600;}
.htt-faqp-search{position:relative;max-width:560px;}
.htt-faqp-search-ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--htt-muted);z-index:1;}
.htt-faqp-search input{width:100%;border:0!important;border-radius:14px;background:#fff!important;padding:16px 18px 16px 50px;font:400 16px/1 Inter,sans-serif;color:var(--htt-ink)!important;box-shadow:0 10px 30px rgba(0,0,0,.18);}
.htt-faqp-search input::placeholder{color:var(--htt-muted)!important;opacity:1;}
.htt-faqp-search input:focus{outline:3px solid rgba(225,150,61,.55);}
.htt-faqp-body{background:var(--htt-cream);padding:54px 0 80px;}
.htt-faqp-inner{display:grid;grid-template-columns:248px 1fr;gap:48px;align-items:start;}
.htt-faqp-side{position:sticky;top:96px;}
.htt-faqp-side-label{font:600 12px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--htt-muted);margin:0 0 14px;padding-left:4px;}
.htt-faqp-nav{display:flex;flex-direction:column;gap:4px;}
.htt-faqp-navlink{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;text-decoration:none;color:var(--htt-navy);font:600 14.5px/1.25 Inter,sans-serif;transition:background .15s,color .15s;}
.htt-faqp-navlink:hover{background:#fff;}
.htt-faqp-navlink.is-active{background:var(--htt-navy);color:#fff;}
.htt-faqp-navic{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:var(--htt-stone);color:#A4661A;transition:background .15s,color .15s;}
.htt-faqp-navic svg{width:17px;height:17px;}
.htt-faqp-navlink.is-active .htt-faqp-navic{background:rgba(255,255,255,.14);color:var(--htt-amber);}
.htt-faqp-navtx{flex:1;}
.htt-faqp-navct{font:600 12px/1 Inter,sans-serif;color:var(--htt-muted);background:var(--htt-stone);border-radius:999px;padding:3px 8px;}
.htt-faqp-navlink.is-active .htt-faqp-navct{color:#fff;background:rgba(255,255,255,.16);}
.htt-faqp-cat{scroll-margin-top:90px;margin-bottom:46px;}
.htt-faqp-cat:last-child{margin-bottom:0;}
.htt-faqp-cathead{display:flex;align-items:center;gap:15px;margin-bottom:18px;}
.htt-faqp-catic{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:13px;background:var(--htt-amber);color:#fff;box-shadow:0 6px 16px rgba(225,150,61,.32);}
.htt-faqp-catic svg{width:24px;height:24px;}
.htt-faqp-cathead h2{font-family:Fraunces,serif;font-size:26px;line-height:1.1;color:var(--htt-navy);margin:0;}
.htt-faqp-catn{font:500 13px/1 Inter,sans-serif;color:var(--htt-muted);margin:5px 0 0;}
.htt-faqp-list{display:flex;flex-direction:column;gap:12px;}
.htt-faqp-item{background:#fff;border:1px solid var(--htt-line);border-radius:14px;overflow:hidden;transition:border-color .15s,box-shadow .15s;}
.htt-faqp-item:hover{border-color:#D9C3A0;}
.htt-faqp-item[open]{border-color:var(--htt-amber);box-shadow:0 8px 24px rgba(29,34,52,.07);}
.htt-faqp-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:19px 22px;}
.htt-faqp-item summary::-webkit-details-marker{display:none;}
.htt-faqp-q{flex:1;margin:0;font:600 16.5px/1.4 Inter,sans-serif;color:var(--htt-navy);}
.htt-faqp-chev{position:relative;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--htt-stone);transition:background .15s,transform .2s;}
.htt-faqp-chev::before,.htt-faqp-chev::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;border-radius:2px;background:#A4661A;transition:transform .2s;}
.htt-faqp-chev::before{transform:translate(-50%,-50%);}
.htt-faqp-chev::after{transform:translate(-50%,-50%) rotate(90deg);}
.htt-faqp-item[open] .htt-faqp-chev{background:var(--htt-amber);}
.htt-faqp-item[open] .htt-faqp-chev::before,.htt-faqp-item[open] .htt-faqp-chev::after{background:#fff;}
.htt-faqp-item[open] .htt-faqp-chev::after{transform:translate(-50%,-50%) rotate(0);}
.htt-faqp-a{padding:0 22px 22px;font:400 15.5px/1.65 Inter,sans-serif;color:#3a4052;border-top:1px solid var(--htt-line);margin-top:-1px;padding-top:18px;}
.htt-faqp-a a{color:#A4661A;text-decoration:underline;text-underline-offset:2px;}
.htt-faqp-a ul{margin:10px 0;padding-left:20px;}
.htt-faqp-a li{margin:6px 0;}
.htt-faqp-a b{color:var(--htt-navy);}
.htt-faqp-noresults{font:500 16px/1.5 Inter,sans-serif;color:var(--htt-muted);background:#fff;border:1px dashed var(--htt-line);border-radius:12px;padding:22px;text-align:center;}
@media(max-width:900px){
 .htt-faqp-inner{grid-template-columns:1fr;gap:30px;}
 .htt-faqp-side{position:static;}
 .htt-faqp-nav{flex-direction:row;flex-wrap:wrap;gap:8px;}
 .htt-faqp-navlink{padding:8px 12px;}
 .htt-faqp-navct{display:none;}
}
@media(max-width:560px){
 .htt-faqp-q{font-size:15.5px;}
 .htt-faqp-cathead h2{font-size:22px;}
}


/* === Homepage intro gap: Blocksy's content-area paragraph spacing keeps
   interfering with the lede's own margin, so create the gap with
   non-collapsing PADDING on the kicker instead, scoped + !important so
   nothing outranks it. === */
body.htt-page-home .htt-home-intro-lede { margin-bottom: 0 !important; }
body.htt-page-home .htt-home-trust-kicker {
	margin-top: 0 !important;
	padding-top: 72px !important;
	margin-bottom: 22px !important;
}