/*
 * Hanover Jets — global stylesheet.
 *
 * Sections, in order:
 *   1. Tokens (CSS custom properties).
 *   2. Reset and base.
 *   3. Layout primitives.
 *   4. Typography elements.
 *   5. Navigation.
 *   6. Breadcrumb.
 *   7. Section heads.
 *   8. Buttons.
 *   9. Stat bands.
 *  10. Cards.
 *  11. Data tables.
 *  12. Pull quotes / inset / takeaway / feature quote / advisor note.
 *  13. Reading progress.
 *  14. Sticky TOC.
 *  15. Quote CTA block.
 *  16. Footer.
 *  17. Forms (shared inputs).
 *  18. Utilities.
 *  19. Responsive overrides.
 *
 * Per-template styles live in template-{slug}.css, enqueued conditionally.
 */

/* ============ 1. TOKENS ============ */
:root {
	--ink:        #0B1F3A;
	--ink-deep:   #08172B;
	--cream:      #F3EAD5;
	--cream-soft: #F7F0DD;
	--ivory:      #E8DCC0;
	--charcoal:   #1C1C1C;
	--oxblood:    #6B2838;
	--gold:       #A88B5C;
	--gold-soft:  #C4A575;
	--racing:     #1E3D32;

	--rule:       rgba(28, 28, 28, 0.22);
	--rule-soft:  rgba(28, 28, 28, 0.10);
	--rule-dark:  rgba(243, 234, 213, 0.20);
	--ink-mute:   rgba(11, 31, 58, 0.68);
	--cream-mute: rgba(243, 234, 213, 0.82);

	/* Newsreader is the reading/display serif — warmer and steadier on cream
	 * than the retired Source Serif 4. Display and body share the typeface;
	 * the hierarchy is carried by size/weight/spacing. Fraunces is retained
	 * ONLY for the brand wordmark — see --logo. */
	--display: 'Newsreader', Georgia, 'Times New Roman', serif;
	--serif:   'Newsreader', Georgia, 'Times New Roman', serif;
	--sans:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--logo:    'Fraunces', Georgia, 'Times New Roman', serif;

	--space-1:  4px;
	--space-2:  8px;
	--space-3:  16px;
	--space-4:  24px;
	--space-5:  40px;
	--space-6:  56px;
	--space-7:  80px;
	--space-8:  100px;
	--space-9:  120px;

	--page-pad: 56px;

	--ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast:  0.2s;
	--dur-base:  0.25s;
	--dur-slow:  0.5s;
	--dur-rise:  0.7s;

	--measure-body:   64ch;
	--measure-lead:   60ch;
	--measure-narrow: 44ch;

	--container:      1200px;
	--container-wide: 1440px;
}

/* ============ 2. RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--cream);
	color: var(--charcoal);
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.7;
	font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Paper-grain background pattern — fixed pseudo on body. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(rgba(28, 28, 28, 0.028) 1px, transparent 1px),
		radial-gradient(rgba(28, 28, 28, 0.020) 1px, transparent 1px);
	background-size: 3px 3px, 7px 7px;
	background-position: 0 0, 1px 2px;
	mix-blend-mode: multiply;
	opacity: 0.8;
	z-index: 1;
}

main, header, footer, nav, section, aside, article, figure { position: relative; z-index: 2; }

img, svg { max-width: 100%; height: auto; display: block; }
img { font-style: italic; } /* Alt text styled in italic if image fails. */

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
a:hover { color: var(--oxblood); }

::selection { background: rgba(168, 139, 92, 0.32); color: var(--ink); }

/* Site shell */
.hj-main { flex: 1; }

/* Skip link for accessibility. */
.hj-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--cream);
	padding: 12px 20px;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	z-index: 1000;
}
.hj-skip-link:focus { left: 16px; top: 16px; outline: 2px solid var(--gold); }

/* ============ 3. LAYOUT PRIMITIVES ============ */
.hj-container        { max-width: var(--container); margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); }
.hj-container-wide   { max-width: var(--container-wide); margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); }
.hj-container-narrow { max-width: 720px; margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); }

.hj-section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.hj-section--sm { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.hj-section--lg { padding-top: var(--space-9); padding-bottom: var(--space-9); }

.hj-section--ivory { background: var(--ivory); }
.hj-section--cream-soft { background: var(--cream-soft); }
.hj-section--ink {
	background: var(--ink);
	color: var(--cream);
	position: relative;
	overflow: hidden;
}
.hj-section--ink::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(243, 234, 213, 0.02) 1px, transparent 1px);
	background-size: 4px 4px;
	pointer-events: none;
}
.hj-section--ink::after {
	content: "";
	position: absolute;
	bottom: -30%;
	right: -10%;
	width: 70vw;
	height: 70vw;
	background: radial-gradient(circle, rgba(168, 139, 92, 0.08) 0%, transparent 60%);
	pointer-events: none;
}

/* Rise animation on first paint. */
@keyframes hj-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.hj-rise { opacity: 0; animation: hj-rise var(--dur-rise) var(--ease) forwards; }
.hj-rise-1 { animation-delay: 0.05s; }
.hj-rise-2 { animation-delay: 0.18s; }
.hj-rise-3 { animation-delay: 0.32s; }
.hj-rise-4 { animation-delay: 0.48s; }
.hj-rise-5 { animation-delay: 0.64s; }
.hj-rise-6 { animation-delay: 0.80s; }

@media (prefers-reduced-motion: reduce) {
	.hj-rise { opacity: 1; transform: none; animation: none; }
	html { scroll-behavior: auto; }
}

/* ============ 4. TYPOGRAPHY ELEMENTS ============ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	color: var(--ink);
	margin: 0;
}

.hj-display-hero {
	font-family: var(--display);
	font-variation-settings: "opsz" 144;
	font-size: clamp(56px, 9vw, 128px);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.028em;
	color: var(--ink);
	margin: 0;
}
.hj-display-hero em {
	font-style: italic;
	font-weight: 200;
	color: var(--oxblood);
}

.hj-section--ink .hj-display-hero { color: var(--cream); }
.hj-section--ink .hj-display-hero em { color: var(--gold); }

.hj-section-title {
	font-family: var(--display);
	font-variation-settings: "opsz" 144;
	font-weight: 300;
	font-size: clamp(32px, 4.5vw, 56px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}
.hj-section-title em { font-style: italic; color: var(--oxblood); font-weight: 300; }
.hj-section--ink .hj-section-title { color: var(--cream); }
.hj-section--ink .hj-section-title em { color: var(--gold); }

.hj-standfirst {
	font-family: var(--display);
	font-style: italic;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 300;
	line-height: 1.5;
	color: var(--ink-mute);
	max-width: var(--measure-lead);
	margin: 0 0 var(--space-5) 0;
}
.hj-section--ink .hj-standfirst { color: var(--cream-mute); }

.hj-eyebrow {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}
.hj-eyebrow::before {
	content: "";
	display: inline-block;
	width: 32px;
	height: 1px;
	background: currentColor;
}
.hj-section--ink .hj-eyebrow { color: var(--gold); }

.hj-overline {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ink-mute);
	font-weight: 600;
}

.hj-prose p { max-width: var(--measure-body); }

/* Drop cap, used in lede paragraphs. */
.hj-drop {
	font-family: var(--display);
	font-variation-settings: "opsz" 144;
	font-size: 68px;
	font-weight: 400;
	float: left;
	line-height: 0.85;
	padding-right: 14px;
	padding-top: 6px;
	color: var(--oxblood);
}
.hj-section--ink .hj-drop { color: var(--gold); }

/* Ornament: · · · centred. */
.hj-ornament {
	font-family: var(--display);
	font-size: 22px;
	letter-spacing: 0.5em;
	color: var(--oxblood);
	text-align: center;
}
.hj-section--ink .hj-ornament { color: var(--gold); }

/* ============ 5. NAVIGATION ============ */
.hj-nav {
	position: sticky;
	top: 0;
	background: rgba(243, 234, 213, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--rule-soft);
	z-index: 100;
}
.hj-nav-inner {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 20px var(--page-pad);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 48px;
}
.hj-nav-logo {
	font-family: var(--logo);
	font-size: 20px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.hj-nav-logo .dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	background: var(--oxblood);
	border-radius: 50%;
	margin: 0 10px 4px;
	vertical-align: middle;
}
.hj-nav-links {
	display: flex;
	justify-content: center;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
}
.hj-nav-links a {
	color: var(--ink);
	opacity: 0.78;
	padding: 4px 0;
	position: relative;
}
.hj-nav-links a:hover { opacity: 1; }
.hj-nav-links a.active {
	opacity: 1;
	border-bottom: 1px solid var(--oxblood);
	padding-bottom: 2px;
}
.hj-nav-cta {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cream);
	background: var(--ink);
	padding: 14px 24px;
	text-decoration: none;
	transition: background var(--dur-fast);
}
.hj-nav-cta:hover { background: var(--oxblood); color: var(--cream); }

/* ============ 6. BREADCRUMB ============ */
.hj-breadcrumb {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 28px var(--page-pad) 0;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
}
.hj-breadcrumb a { color: var(--ink-mute); }
.hj-breadcrumb a:hover { color: var(--oxblood); }
.hj-breadcrumb .sep { color: var(--oxblood); margin: 0 14px; font-weight: 400; }
.hj-breadcrumb .current { color: var(--ink); }

/* ============ 7. SECTION HEADS ============ */
.hj-section-head {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--rule);
}
.hj-section-head--3col {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: 32px;
	align-items: baseline;
}
.hj-section-head .hj-section-num {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.24em;
	color: var(--oxblood);
	font-weight: 700;
	display: block;
	margin-bottom: 12px;
}
.hj-section--ink .hj-section-num { color: var(--gold); }
.hj-section-head .hj-section-action {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--oxblood);
	padding-top: 12px;
}
.hj-section-head .hj-section-action::after { content: " →"; margin-left: 6px; }
.hj-section--ink .hj-section-head .hj-section-action { color: var(--gold); }

/* ============ 8. BUTTONS ============ */
.hj-btn {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	border: none;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: all var(--dur-base) ease;
	border-radius: 0;
	line-height: 1;
}
.hj-btn--primary {
	color: var(--cream);
	background: var(--ink);
	padding: 20px 40px;
}
.hj-btn--primary:hover { background: var(--oxblood); color: var(--cream); }

.hj-section--ink .hj-btn--primary {
	color: var(--ink);
	background: var(--cream);
}
.hj-section--ink .hj-btn--primary:hover { background: var(--gold); color: var(--ink); }

.hj-btn--ghost {
	color: var(--ink);
	background: transparent;
	padding: 20px 0;
	border-bottom: 1px solid var(--oxblood);
}
.hj-btn--ghost:hover { color: var(--oxblood); }

.hj-section--ink .hj-btn--ghost {
	color: var(--cream);
	border-bottom-color: var(--gold);
}
.hj-section--ink .hj-btn--ghost:hover { color: var(--gold); }

.hj-btn--gold {
	color: var(--ink);
	background: var(--gold);
	padding: 20px 40px;
}
.hj-btn--gold:hover { background: var(--cream); color: var(--ink); }

.hj-cta-row {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

/* ============ 9. STAT BANDS ============ */
.hj-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--rule-dark);
}
.hj-stat .k {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 700;
	margin-bottom: 12px;
}
.hj-stat .v {
	font-family: var(--display);
	font-variation-settings: "opsz" 72;
	font-size: 36px;
	font-weight: 300;
	line-height: 1;
	color: var(--cream);
	margin-bottom: 8px;
}
.hj-stat .v em { font-style: italic; color: var(--gold); font-weight: 300; }
.hj-stat .desc {
	font-family: var(--serif);
	font-size: 14px;
	color: var(--cream-mute);
	line-height: 1.4;
	font-style: italic;
}

/* Light variant (on cream backgrounds). */
.hj-stats--light { border-top-color: var(--rule); }
.hj-stats--light .hj-stat .k { color: var(--oxblood); }
.hj-stats--light .hj-stat .v { color: var(--ink); }
.hj-stats--light .hj-stat .v em { color: var(--oxblood); }
.hj-stats--light .hj-stat .desc { color: var(--ink-mute); }

/* ============ 10. CARDS ============ */
.hj-card {
	background: var(--cream-soft);
	border: 1px solid var(--rule);
	padding: var(--space-5) 36px;
	display: flex;
	flex-direction: column;
}
.hj-card-eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	margin-bottom: var(--space-3);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rule-soft);
}
.hj-card-roman {
	font-family: var(--display);
	font-style: italic;
	font-size: 14px;
	color: var(--ink-mute);
}
.hj-card h3 {
	font-family: var(--display);
	font-variation-settings: "opsz" 72;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.05;
	color: var(--ink);
	margin: 0 0 4px 0;
	letter-spacing: -0.005em;
}
.hj-card h3 em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 300;
}
.hj-card .hj-card-role {
	font-family: var(--serif);
	font-style: italic;
	font-size: 15px;
	color: var(--ink-mute);
	margin-bottom: var(--space-4);
}
.hj-card .hj-card-body {
	font-family: var(--serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--charcoal);
	margin: 0 0 var(--space-4) 0;
	flex: 1;
}
.hj-card-specs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--rule-soft);
}
.hj-card-specs .k {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	margin-bottom: 4px;
}
.hj-card-specs .v {
	font-family: var(--display);
	font-size: 18px;
	color: var(--ink);
}
.hj-card-price {
	padding-top: var(--space-3);
	margin-top: var(--space-3);
	border-top: 1px solid var(--rule-soft);
}
.hj-card-price .k {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	margin-bottom: 4px;
}
.hj-card-price .v {
	font-family: var(--display);
	font-size: 22px;
	color: var(--ink);
}
.hj-card-price .v em { color: var(--oxblood); font-style: italic; }

/* Route row (compact tabular cross-link) */
.hj-route-row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: 24px;
	padding: 24px 32px;
	border-top: 1px solid var(--rule-soft);
	align-items: baseline;
	color: inherit;
	transition: background var(--dur-base), padding var(--dur-base);
}
.hj-route-row:hover { background: var(--cream-soft); padding-left: 40px; }
.hj-route-row:first-child { border-top: 1px solid var(--rule); }
.hj-route-row .rt-num {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	color: var(--oxblood);
	font-weight: 700;
	min-width: 36px;
}
.hj-route-row .rt-pair {
	font-family: var(--display);
	font-variation-settings: "opsz" 48;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: var(--ink);
}
.hj-route-row .rt-pair .arrow {
	color: var(--oxblood);
	margin: 0 10px;
	font-style: italic;
	font-weight: 300;
}
.hj-route-row .rt-time {
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink-mute);
}
.hj-route-row .rt-arrow {
	font-family: var(--sans);
	font-size: 14px;
	color: var(--oxblood);
	opacity: 0;
	transition: opacity var(--dur-fast);
}
.hj-route-row:hover .rt-arrow { opacity: 1; }

/* ============ 11. DATA TABLES ============ */
.hj-data-table {
	margin: var(--space-4) 0 var(--space-5);
	border: 1px solid var(--rule);
	background: var(--cream-soft);
	overflow-x: auto;
}
.hj-data-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--serif);
}
.hj-data-table thead { background: var(--ink); color: var(--cream); }
.hj-data-table th {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 16px 20px;
	text-align: left;
	color: var(--gold);
	border-bottom: 1px solid var(--gold);
}
.hj-data-table th.r { text-align: right; }
.hj-data-table td {
	padding: 16px 20px;
	border-bottom: 1px solid var(--rule-soft);
	font-size: 17px;
	vertical-align: baseline;
	line-height: 1.5;
}
.hj-data-table td.r { text-align: right; }
.hj-data-table tbody tr:last-child td { border-bottom: none; }
.hj-data-table tbody tr:hover { background: var(--ivory); }
.hj-data-table caption {
	caption-side: bottom;
	font-family: var(--serif);
	font-size: 14px;
	font-style: italic;
	color: var(--ink-mute);
	padding: 16px 20px;
	text-align: left;
}
.hj-data-table .class-name { font-family: var(--display); font-weight: 500; }
.hj-data-table .class-name em { display: block; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-mute); margin-top: 2px; font-weight: 400; }
.hj-data-table .price em { color: var(--oxblood); font-style: italic; }

/* ============ 12. PULL QUOTE / INSET / TAKEAWAY / FEATURE / ADVISOR NOTE ============ */
.hj-pull-quote {
	margin: 48px 0;
	padding: 0 0 0 32px;
	border-left: 2px solid var(--oxblood);
}
.hj-pull-quote p {
	font-family: var(--display);
	font-variation-settings: "opsz" 96;
	font-size: 30px;
	font-weight: 300;
	font-style: italic;
	line-height: 1.3;
	color: var(--ink);
	margin: 0;
	max-width: 28ch;
}
.hj-pull-quote cite {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink-mute);
	font-style: normal;
	font-weight: 600;
	margin-top: 20px;
}

.hj-inset {
	margin: 48px 0;
	padding: 36px 40px;
	background: var(--cream-soft);
	border-left: 3px solid var(--oxblood);
}
.hj-inset .label {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	margin-bottom: 16px;
}
.hj-inset h4 {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 14px 0;
	letter-spacing: -0.005em;
	line-height: 1.2;
}
.hj-inset h4 em { font-style: italic; color: var(--oxblood); font-weight: 400; }
.hj-inset p { font-size: 18px; line-height: 1.65; margin: 0 0 12px 0; }
.hj-inset p:last-child { margin-bottom: 0; }

.hj-takeaway {
	margin: 32px 0;
	padding: 28px 36px;
	background: var(--cream-soft);
	border-left: 3px solid var(--oxblood);
}
.hj-takeaway .label {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	margin-bottom: 10px;
}
.hj-takeaway p {
	font-family: var(--display);
	font-variation-settings: "opsz" 72;
	font-style: italic;
	font-size: 20px;
	line-height: 1.45;
	color: var(--ink);
	margin: 0;
}
.hj-takeaway p em {
	color: var(--oxblood);
	font-style: italic;
	font-weight: 400;
}

.hj-feature-quote {
	background: var(--ink);
	color: var(--cream);
	margin: 80px calc(50% - 50vw);
	padding: 100px calc(50vw - 50%);
	border-top: 1px solid var(--rule-dark);
	border-bottom: 1px solid var(--rule-dark);
	text-align: center;
}
.hj-feature-quote .hj-ornament { color: var(--gold); margin-bottom: 32px; }
.hj-feature-quote blockquote {
	margin: 0 auto;
	padding: 0;
	font-family: var(--display);
	font-variation-settings: "opsz" 144;
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 200;
	font-style: italic;
	line-height: 1.25;
	color: var(--cream);
	max-width: 24ch;
}
.hj-feature-quote blockquote em {
	color: var(--gold);
	font-style: normal;
	font-weight: 300;
}
.hj-feature-quote cite {
	display: block;
	margin-top: 24px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
	font-style: normal;
	font-weight: 600;
}

.hj-advisor-note {
	max-width: 860px;
	margin: 0 auto;
	padding: 56px;
	border: 1px solid var(--gold);
	background: rgba(168, 139, 92, 0.05);
	position: relative;
}
.hj-advisor-note::before {
	content: "MMXXVI";
	position: absolute;
	top: 24px;
	right: 24px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--gold);
	font-weight: 700;
}
.hj-advisor-note .ornament {
	font-family: var(--display);
	font-size: 22px;
	letter-spacing: 0.5em;
	color: var(--gold);
	margin-bottom: 24px;
}
.hj-advisor-note .eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 700;
	margin-bottom: 20px;
}
.hj-advisor-note .body {
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.6;
	color: var(--cream);
	margin: 0 0 32px 0;
	font-style: italic;
}
.hj-advisor-note .body .hj-drop {
	color: var(--gold);
	font-style: normal;
	float: left;
	line-height: 0.85;
	padding-right: 14px;
	padding-top: 6px;
	font-size: 62px;
	font-weight: 300;
}
.hj-advisor-note .sign {
	padding-top: 24px;
	border-top: 1px solid var(--rule-dark);
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cream);
	font-weight: 700;
}
.hj-advisor-note .sign .role {
	font-family: var(--serif);
	font-style: italic;
	color: var(--cream-mute);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 15px;
	margin-top: 6px;
	display: block;
}

/* Compare box (two-column option block) */
.hj-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 32px 0;
	border: 1px solid var(--rule);
	background: var(--cream-soft);
}
.hj-compare-col { padding: 32px 28px; }
.hj-compare-col + .hj-compare-col { border-left: 1px solid var(--rule); }
.hj-compare .cmp-label {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	margin-bottom: 10px;
}
.hj-compare h4 {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 12px 0;
}
.hj-compare .cmp-summary { font-size: 16px; line-height: 1.55; margin-bottom: 16px; }
.hj-compare ul { list-style: none; padding: 0; margin: 0; }
.hj-compare li {
	font-family: var(--serif);
	font-size: 15px;
	padding: 6px 0 6px 24px;
	position: relative;
	line-height: 1.5;
}
.hj-compare li.pro::before { content: "+"; color: var(--racing); position: absolute; left: 0; font-weight: 700; }
.hj-compare li.con::before { content: "−"; color: var(--oxblood); position: absolute; left: 0; font-weight: 700; }

/* ============ 13. READING PROGRESS BAR ============ */
.hj-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--oxblood);
	transform-origin: left;
	transform: scaleX(0);
	z-index: 200;
	transition: transform 0.1s linear;
	pointer-events: none;
}

/* ============ 14. STICKY TOC ============ */
.hj-toc {
	position: sticky;
	top: 88px;
	padding-top: 0;
}
.hj-toc-label {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--oxblood);
}
.hj-toc ol {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: hj-toc;
}
.hj-toc li {
	counter-increment: hj-toc;
	padding: 0;
	border-bottom: 1px solid var(--rule-soft);
}
.hj-toc a {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 8px;
	align-items: baseline;
	padding: 12px 0;
	font-family: var(--serif);
	font-size: 15px;
	line-height: 1.35;
	color: var(--ink);
}
.hj-toc a::before {
	content: counter(hj-toc, upper-roman) ".";
	font-family: var(--display);
	font-style: italic;
	font-size: 14px;
	color: var(--oxblood);
	text-align: right;
	padding-right: 4px;
}
.hj-toc a:hover { color: var(--oxblood); }
.hj-toc a.active { color: var(--oxblood); font-weight: 500; }

/* ============ 15. QUOTE CTA BLOCK ============ */
.hj-quote-cta {
	background: var(--ink-deep);
	color: var(--cream);
	padding: var(--space-9) var(--page-pad);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hj-quote-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(168, 139, 92, 0.04) 1px, transparent 1px);
	background-size: 5px 5px;
	pointer-events: none;
}
.hj-quote-cta-inner {
	max-width: 880px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.hj-quote-cta .hj-ornament { color: var(--gold); margin-bottom: 32px; }
.hj-quote-cta h2 {
	font-family: var(--display);
	font-variation-settings: "opsz" 144;
	font-size: clamp(36px, 4.5vw, 64px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.025em;
	margin: 0 0 24px 0;
	color: var(--cream);
}
.hj-quote-cta h2 em { font-style: italic; color: var(--gold); font-weight: 200; }
.hj-quote-cta p {
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.55;
	color: var(--cream);
	max-width: 54ch;
	margin: 0 auto 40px;
}

/* ============ 16. FOOTER ============ */
.hj-footer {
	background: var(--ink);
	color: var(--cream);
	padding: 80px var(--page-pad) 40px;
	border-top: 1px solid var(--gold);
}
.hj-foot-inner { max-width: var(--container-wide); margin: 0 auto; }
.hj-foot-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 64px;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--rule-dark);
}
.hj-foot-brand .hj-foot-logo {
	font-family: var(--logo);
	font-size: 22px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.hj-foot-brand .hj-foot-logo .dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	background: var(--gold);
	border-radius: 50%;
	margin: 0 8px 4px;
	vertical-align: middle;
}
.hj-foot-brand p {
	font-family: var(--serif);
	font-size: 16px;
	color: var(--cream-mute);
	max-width: 40ch;
	line-height: 1.55;
	margin-top: 0;
}
.hj-foot-cities {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	margin-top: 32px;
	font-weight: 700;
}
.hj-foot-col h5 {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 700;
	margin: 0 0 16px 0;
}
.hj-foot-col a {
	display: block;
	font-family: var(--serif);
	color: var(--cream);
	font-size: 16px;
	padding: 5px 0;
	opacity: 0.82;
}
.hj-foot-col a:hover { opacity: 1; color: var(--gold); }
.hj-foot-bot {
	padding-top: 28px;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cream-mute);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	font-weight: 500;
}
.hj-foot-disclosure {
	font-family: var(--serif);
	font-size: 13px;
	color: var(--cream-mute);
	padding-top: 24px;
	margin-top: 24px;
	border-top: 1px solid var(--rule-dark);
	line-height: 1.65;
	max-width: 96ch;
	font-weight: 400;
}
.hj-foot-disclosure a { border-bottom: 1px solid rgba(243, 234, 213, 0.3); }
.hj-foot-disclosure a:hover { border-bottom-color: var(--gold); color: var(--gold); }

/* ============ 17. FORMS (SHARED INPUTS) ============ */
.hj-field { display: flex; flex-direction: column; gap: 8px; }
.hj-field-label {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
}
.hj-field-label .optional {
	color: var(--ink-mute);
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: none;
	font-style: italic;
}
.hj-input,
.hj-select,
.hj-textarea {
	font-family: var(--serif);
	font-size: 19px;
	color: var(--ink);
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--rule);
	padding: 12px 0 14px;
	width: 100%;
	outline: none;
	transition: border-color var(--dur-fast);
	border-radius: 0;
	appearance: none;
}
.hj-input:focus,
.hj-select:focus,
.hj-textarea:focus { border-bottom-color: var(--oxblood); }
.hj-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.hj-select { background-image: linear-gradient(45deg, transparent 50%, var(--oxblood) 50%), linear-gradient(135deg, var(--oxblood) 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 10px) calc(50% - 2px); background-size: 6px 6px; background-repeat: no-repeat; padding-right: 32px; }

/* ============ 18. UTILITIES ============ */
.hj-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hj-prose-narrow { max-width: var(--measure-narrow); }
.hj-prose-body   { max-width: var(--measure-body); }
.hj-text-center  { text-align: center; }
.hj-mt-1 { margin-top: var(--space-2); }
.hj-mt-2 { margin-top: var(--space-3); }
.hj-mt-3 { margin-top: var(--space-4); }
.hj-mt-4 { margin-top: var(--space-5); }
.hj-mt-5 { margin-top: var(--space-6); }
.hj-mt-6 { margin-top: var(--space-7); }
.hj-mb-1 { margin-bottom: var(--space-2); }
.hj-mb-2 { margin-bottom: var(--space-3); }
.hj-mb-3 { margin-bottom: var(--space-4); }
.hj-mb-4 { margin-bottom: var(--space-5); }
.hj-mb-5 { margin-bottom: var(--space-6); }
.hj-mb-6 { margin-bottom: var(--space-7); }

/* ============ 19. RESPONSIVE ============ */
@media (max-width: 1100px) {
	:root { --page-pad: 32px; }
	.hj-nav-inner { padding: 20px 32px; gap: 24px; }
	.hj-nav-links { display: none; }
	.hj-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
	.hj-foot-top { grid-template-columns: 1fr 1fr; gap: 40px; }
	.hj-section-head--3col { grid-template-columns: auto 1fr; }
	.hj-section-action { grid-column: 1 / -1; padding-top: 20px; }
}

@media (max-width: 640px) {
	:root { --page-pad: 24px; }
	body { font-size: 18px; }
	.hj-nav-inner { padding: 16px 24px; }
	.hj-nav-logo { font-size: 16px; }
	.hj-nav-cta { padding: 12px 16px; font-size: 10px; }
	.hj-section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
	.hj-stats { grid-template-columns: 1fr 1fr; gap: 24px; }
	.hj-stat .v { font-size: 32px; }
	.hj-foot-top { grid-template-columns: 1fr; }
	.hj-foot-bot { grid-template-columns: 1fr; }
	.hj-compare { grid-template-columns: 1fr; }
	.hj-compare-col + .hj-compare-col { border-left: none; border-top: 1px solid var(--rule); }
	.hj-advisor-note { padding: 40px 24px; }
	.hj-pull-quote p { font-size: 24px; }
}