/*
 * Horn & Ivory Core: base stylesheet (shell).
 *
 * Loaded on every plugin page. Per-page files in assets/css/pages/ sit on top of it.
 * One breakpoint: mobile is below 900px, written as  @media (max-width: 899px).
 * Square corners everywhere. Ivory, never pure white. Text is always full opacity.
 *
 * TOKENS (custom properties on :root)
 *   --hi-navy #07203f, --hi-accent #a65e46, --hi-accent-dark #8f4f3a (button hover), --hi-blush #d9aa90,
 *   --hi-sand #ebded4, --hi-ivory #FBF8F1, --hi-ink #02000d (footer only), --hi-rule #2f4a70,
 *   --hi-placeholder #5a5560, --hi-font-head, --hi-font-body, --hi-max (1280px),
 *   --hi-gutter (40px, 20px on mobile), --hi-stack (16px).
 *
 * AVAILABLE CLASSES
 *
 * Layout
 *   .hi-container            Centred column, max 1280px, 40px side padding (20px mobile).
 *   .hi-container--narrow    Same, max 720px (single column steps such as Your Door).
 *   .hi-container--medium    Same, max 1120px (Your Details, Order Confirmed).
 *   .hi-container--wide      Same, max 1200px (Your Visit, Checkout).
 *   .hi-section              Vertical rhythm: 96px top and bottom (48px mobile).
 *   .hi-section--tight       Page body under a title band: 72px top, 96px bottom (32px and 48px mobile).
 *   .hi-section--step        Journey step body: 64px top, 96px bottom (24px and 48px mobile).
 *   .hi-band--navy           Navy background, ivory text and headings, blush eyebrows and labels.
 *   .hi-band--sand           Sand background, navy text, navy eyebrows.
 *   .hi-band--accent         Accent background, ivory text.
 *   .hi-title-band           Sand title section at the top of site pages. Holds a .hi-container with
 *                            .hi-eyebrow, .hi-h1 and .hi-lead.
 *
 * Type
 *   .hi-eyebrow              Small uppercase label above a heading. Accent on ivory, navy on sand, blush on navy.
 *   .hi-eyebrow--navy        Force navy. Also --accent and --blush.
 *   .hi-eyebrow--mobile      Shown below 900px only (journey steps, where the desktop progress bar
 *                            already names the step).
 *   .hi-h1 .hi-h2 .hi-h3     Abril Fatface headings. 56, 44, 28px desktop. 36, 30, 22px mobile.
 *   .hi-lead                 Larger intro paragraph, 20px desktop, 16px mobile, max 680px wide.
 *   .hi-prose                Long text (FAQ answers, legal sections): spaced paragraphs, lists and headings.
 *   .hi-prose__section       One numbered section inside .hi-prose. Sections are divided by a sand rule.
 *   .hi-center               Centre the text and any .hi-lead inside.
 *
 * Buttons
 *   .hi-btn                  Primary: accent background, ivory text, 56px high.
 *   .hi-btn--lg              64px high on desktop (56px on mobile, as designed).
 *   .hi-btn--block           Full width. The mobile designs make every primary button full width,
 *                            so add this (or put the buttons in .hi-actions) for phone layouts.
 *   .hi-btn--outline         For navy bands: blush outline, ivory text.
 *   .hi-btn--ghost           Navy underlined text, no background, 44px high.
 *   .hi-btn--navy            Navy background, ivory text.
 *   .hi-btn:disabled, .hi-btn[aria-disabled="true"], .hi-btn.hi-is-busy   Sand background, blush edge, navy text.
 *   .hi-linkbutton           A button element that looks like a text link.
 *   .hi-actions              Row of buttons with gaps. Stacks full width on mobile.
 *
 * Forms
 *   .hi-field                Wrapper: label, control and error in a column, 8px gap.
 *   .hi-label                Uppercase field label.
 *   .hi-input .hi-select .hi-textarea   Controls: 56px high, 2px navy border, ivory background.
 *   .hi-input--lg            64px high on desktop (landing and Your Details fields).
 *   .hi-input[aria-invalid="true"]      Accent border. Also for select and textarea.
 *   .hi-error                Field error text. Give it role="alert".
 *   .hi-notice               Page notice: sand panel, accent left border. Modifiers --success, --error.
 *   .hi-hp                   Visually hidden honeypot wrapper.
 *
 * Surfaces
 *   .hi-card                 Ivory surface with a 1px sand border and padding.
 *   .hi-panel                Sand surface with 32px padding (20px mobile).
 *   .hi-table                Label and value rows with a navy top rule. Works on a table (th, td) or
 *                            on a dl made of .hi-table__row wrappers (dt, dd).
 *   .hi-steps                Numbered "What Happens Next" list. Items are .hi-steps__item holding
 *                            a .hi-steps__title and a paragraph. Numbers are drawn by the stylesheet.
 *
 * Utilities
 *   .hi-stack                Vertical gap between children. Set --hi-stack to change it (default 16px).
 *   .hi-stack--sm, --lg      8px and 32px gaps.
 *   .hi-grid                 Grid with 32px gaps. --2 and --3 columns. One column on mobile.
 *   .hi-visually-hidden      Hidden on screen, read by screen readers.
 *   .hi-skip                 Skip link, visible on focus.
 *   [hidden]                 Always hidden, whatever the display value of the class.
 *
 * Shell (owned by the layout, listed for reference)
 *   .hi-ownerbar (the owner's notice above everything), .hi-header, .hi-header__bar, .hi-header__logo, .hi-header__toggle, .hi-header__menu, .hi-nav,
 *   .hi-header__cta, .hi-header__step, .hi-progress, .hi-progress__step, .hi-progress__bar,
 *   .hi-progress__label, .hi-footer, .hi-footer__inner, .hi-footer__logo, .hi-footer__nav,
 *   .hi-footer__copy, .hi-footer__help, .hi-holding, .hi-notfound
 *
 * State classes
 *   .hi-js on <html>         Scripts are running.
 *   .hi-is-open              The mobile menu is open (on .hi-header).
 *   .hi-is-current, .hi-is-done   Progress steps.
 *   .hi-is-busy              A form or button that has been submitted.
 */

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

:root {
	--hi-navy: #07203f;
	--hi-accent: #a65e46;
	--hi-accent-dark: #8f4f3a;
	--hi-blush: #d9aa90;
	--hi-sand: #ebded4;
	--hi-ivory: #FBF8F1;
	--hi-ink: #02000d;
	--hi-rule: #2f4a70;
	--hi-placeholder: #5a5560;
	--hi-font-head: 'Abril Fatface', Georgia, serif;
	--hi-font-body: 'Jost', Arial, sans-serif;
	--hi-max: 1280px;
	--hi-gutter: 40px;
	--hi-stack: 16px;
}

/* ---------- Reset ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
fieldset {
	margin: 0;
}

fieldset {
	min-width: 0;
	padding: 0;
	border: 0;
}

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

svg {
	display: block;
}

button,
input,
select,
textarea {
	margin: 0;
	border-radius: 0;
	font: inherit;
	color: inherit;
}

/* Fields drawn by other plugins start ivory, never white. Zero specificity, so any class wins. */
:where(input, select, textarea) {
	background-color: var(--hi-ivory);
}

[hidden] {
	display: none !important;
}

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

body.hi {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--hi-ivory);
	color: var(--hi-navy);
	font-family: var(--hi-font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.55;
}

body.hi.admin-bar {
	min-height: calc(100vh - 32px);
}

body.hi > main {
	flex: 1 0 auto;
	width: 100%;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--hi-blush);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--hi-navy);
}

::placeholder {
	color: var(--hi-placeholder);
	opacity: 1;
}

h1,
h2,
h3,
h4,
.hi-h1,
.hi-h2,
.hi-h3 {
	font-family: var(--hi-font-head);
	font-weight: 400;
	color: inherit;
}

h1,
.hi-h1 {
	font-size: 56px;
	line-height: 1.1;
}

h2,
.hi-h2 {
	font-size: 44px;
	line-height: 1.1;
}

h3,
.hi-h3 {
	font-size: 28px;
	line-height: 1.2;
}

h4 {
	font-size: 22px;
	line-height: 1.3;
}

.hi-eyebrow {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hi-accent);
}

.hi-lead {
	max-width: 680px;
	font-size: 20px;
	line-height: 1.5;
}

.hi-eyebrow + .hi-h1,
.hi-eyebrow + .hi-h2,
.hi-eyebrow + .hi-h3 {
	margin-top: 12px;
}

.hi-h1 + .hi-lead,
.hi-h2 + .hi-lead,
.hi-h3 + .hi-lead {
	margin-top: 16px;
}

.hi-center {
	text-align: center;
}

.hi-center .hi-lead {
	margin-left: auto;
	margin-right: auto;
}

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

.hi-container {
	width: 100%;
	max-width: var(--hi-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--hi-gutter);
	padding-right: var(--hi-gutter);
}

.hi-container--narrow {
	max-width: 720px;
}

.hi-container--medium {
	max-width: 1120px;
}

.hi-container--wide {
	max-width: 1200px;
}

.hi-section {
	padding-top: 96px;
	padding-bottom: 96px;
}

.hi-section--tight {
	padding-top: 72px;
}

.hi-section--step {
	padding-top: 64px;
}

.hi-band--navy {
	background: var(--hi-navy);
	color: var(--hi-ivory);
}

.hi-band--sand {
	background: var(--hi-sand);
	color: var(--hi-navy);
}

.hi-band--accent {
	background: var(--hi-accent);
	color: var(--hi-ivory);
}

.hi-band--navy .hi-eyebrow,
.hi-band--navy .hi-label,
.hi-eyebrow--blush {
	color: var(--hi-blush);
}

.hi-band--sand .hi-eyebrow,
.hi-title-band .hi-eyebrow,
.hi-panel .hi-eyebrow,
.hi-eyebrow--navy {
	color: var(--hi-navy);
}

.hi-band--accent .hi-eyebrow {
	color: var(--hi-ivory);
}

.hi-eyebrow--accent {
	color: var(--hi-accent);
}

.hi-title-band {
	padding-top: 64px;
	padding-bottom: 64px;
	background: var(--hi-sand);
	color: var(--hi-navy);
}

.hi-stack > * + * {
	margin-top: var(--hi-stack);
}

.hi-stack--sm {
	--hi-stack: 8px;
}

.hi-stack--lg {
	--hi-stack: 32px;
}

.hi-grid {
	display: grid;
	gap: 32px;
}

.hi-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hi-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.hi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 6px 32px;
	border: 0;
	border-radius: 0;
	background: var(--hi-accent);
	color: var(--hi-ivory);
	font-family: var(--hi-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hi-btn:hover {
	background: var(--hi-accent-dark);
	color: var(--hi-ivory);
}

.hi-btn--lg {
	min-height: 64px;
	padding-left: 40px;
	padding-right: 40px;
}

.hi-btn--block {
	display: flex;
	width: 100%;
}

.hi-btn--outline {
	border: 2px solid var(--hi-blush);
	background: transparent;
	color: var(--hi-ivory);
}

.hi-btn--outline:hover {
	background: var(--hi-blush);
	color: var(--hi-navy);
}

.hi-btn--ghost {
	min-height: 44px;
	padding-left: 0;
	padding-right: 0;
	background: transparent;
	color: var(--hi-navy);
	font-size: 13px;
	text-decoration: underline;
}

.hi-btn--ghost:hover {
	background: transparent;
	color: var(--hi-accent);
}

.hi-band--navy .hi-btn--ghost {
	color: var(--hi-ivory);
}

.hi-band--navy .hi-btn--ghost:hover {
	color: var(--hi-blush);
}

.hi-btn--navy {
	background: var(--hi-navy);
	color: var(--hi-ivory);
}

.hi-btn--navy:hover {
	background: var(--hi-rule);
}

.hi-btn:disabled,
.hi-btn[aria-disabled="true"],
.hi-btn.hi-is-busy {
	border-color: var(--hi-blush);
	background: var(--hi-sand);
	box-shadow: inset 0 0 0 2px var(--hi-blush);
	color: var(--hi-navy);
	text-decoration: none;
	cursor: not-allowed;
}

.hi-linkbutton {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hi-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 32px;
}

/* ---------- Forms ---------- */

.hi-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hi-label {
	font-weight: 600;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hi-navy);
}

.hi-input,
.hi-select,
.hi-textarea {
	display: block;
	width: 100%;
	height: 56px;
	padding: 0 18px;
	border: 2px solid var(--hi-navy);
	border-radius: 0;
	background-color: var(--hi-ivory);
	color: var(--hi-navy);
	font-family: var(--hi-font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
}

.hi-input--lg {
	height: 64px;
	padding: 0 22px;
}

.hi-select {
	padding-right: 52px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9 L12 16 L19 9' fill='none' stroke='%2307203f' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 24px 24px;
}

.hi-textarea {
	height: 180px;
	min-height: 180px;
	padding: 16px 18px;
	line-height: 1.5;
	resize: vertical;
}

.hi-input[aria-invalid="true"],
.hi-select[aria-invalid="true"],
.hi-textarea[aria-invalid="true"] {
	border-color: var(--hi-accent);
}

.hi-error {
	color: var(--hi-accent);
	font-size: 15px;
	line-height: 1.4;
}

.hi-notice {
	margin-bottom: 24px;
	padding: 16px 20px;
	border-left: 4px solid var(--hi-accent);
	background: var(--hi-sand);
	color: var(--hi-navy);
}

.hi-notice--success {
	border-left-color: var(--hi-navy);
}

.hi-notice--error {
	border: 2px solid var(--hi-accent);
	border-left-width: 4px;
}

.hi-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------- Surfaces ---------- */

.hi-card {
	padding: 32px;
	border: 1px solid var(--hi-sand);
	background: var(--hi-ivory);
	color: var(--hi-navy);
}

.hi-panel {
	padding: 32px;
	background: var(--hi-sand);
	color: var(--hi-navy);
}

.hi-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.hi-table__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--hi-navy);
}

.hi-table tr {
	border-top: 1px solid var(--hi-navy);
}

.hi-table th,
.hi-table td {
	padding: 14px 0;
	vertical-align: top;
}

.hi-table td {
	padding-left: 16px;
}

.hi-table th,
.hi-table dt {
	font-weight: 600;
	font-size: 13px;
	line-height: 28px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}

.hi-table td,
.hi-table dd {
	margin: 0;
	text-align: right;
}

.hi-band--navy .hi-table__row,
.hi-band--navy .hi-table tr {
	border-top-color: var(--hi-rule);
}

.hi-steps {
	padding: 0;
	list-style: none;
	counter-reset: hi-step;
}

.hi-steps__item {
	position: relative;
	padding: 16px 0 16px 56px;
	border-top: 1px solid var(--hi-sand);
	counter-increment: hi-step;
}

.hi-steps__item:last-child {
	border-bottom: 1px solid var(--hi-sand);
}

.hi-steps__item::before {
	content: counter(hi-step);
	position: absolute;
	top: 16px;
	left: 0;
	font-family: var(--hi-font-head);
	font-size: 22px;
	line-height: 1.4;
	color: var(--hi-accent);
}

.hi-steps__title {
	font-family: var(--hi-font-head);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.3;
}

.hi-steps__title + p {
	margin-top: 2px;
}

.hi-band--navy .hi-steps__item {
	border-color: var(--hi-rule);
}

.hi-band--navy .hi-steps__item::before {
	color: var(--hi-blush);
}

.hi-band--sand .hi-steps__item,
.hi-panel .hi-steps__item {
	border-color: var(--hi-navy);
}

/* ---------- Long text ---------- */

.hi-prose {
	max-width: 780px;
}

.hi-prose h2 {
	font-size: 28px;
	line-height: 1.2;
}

.hi-prose h3 {
	font-size: 22px;
	line-height: 1.3;
}

.hi-prose > * + *,
.hi-prose__section > * + * {
	margin-top: 12px;
}

.hi-prose ul,
.hi-prose ol {
	padding-left: 22px;
}

.hi-prose li {
	padding: 4px 0;
}

.hi-prose > h2:not(:first-child),
.hi-prose__section + .hi-prose__section {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--hi-sand);
}

.hi-prose > h3:not(:first-child) {
	margin-top: 24px;
}

/* ---------- Utilities ---------- */

.hi-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.hi-skip {
	position: absolute;
	top: 8px;
	left: -9999px;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	background: var(--hi-ivory);
	color: var(--hi-navy);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
}

.hi-skip:focus {
	left: 8px;
}

/* ---------- The owner's notice ---------- */

/*
 * A slim strip at the very top, in the normal flow, shown to the owner alone while visitors get the
 * holding page or while Test Mode is on. It sits above the consent banner and the header.
 */
.hi-ownerbar {
	border-bottom: 1px solid var(--hi-rule);
	background: var(--hi-navy);
	color: var(--hi-ivory);
	font-size: 14px;
	line-height: 1.4;
}

.hi-ownerbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 24px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.hi-ownerbar__line {
	margin: 0;
}

.hi-ownerbar__link {
	color: var(--hi-blush);
	text-decoration: underline;
}

.hi-ownerbar__link:hover {
	color: var(--hi-ivory);
}

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

.hi-header {
	background: var(--hi-navy);
	color: var(--hi-ivory);
}

.hi-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	height: 88px;
}

.hi-header__logo {
	display: flex;
	flex: none;
	align-items: center;
}

.hi-header__logo img {
	width: 194px;
	height: 28px;
	object-fit: contain;
	object-position: left center;
}

.hi-header__toggle {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: var(--hi-navy);
	color: var(--hi-ivory);
	cursor: pointer;
}

.hi-header__toggle-close,
.hi-header__toggle[aria-expanded="true"] .hi-header__toggle-open {
	display: none;
}

.hi-header__toggle[aria-expanded="true"] .hi-header__toggle-close {
	display: block;
}

.hi-header__menu {
	display: contents;
}

.hi-nav {
	display: flex;
	align-items: center;
	gap: 40px;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.hi-nav a {
	color: var(--hi-ivory);
	text-decoration: none;
	white-space: nowrap;
}

.hi-nav a:hover,
.hi-footer__nav a:hover {
	color: var(--hi-blush);
}

.hi-header__cta {
	flex: none;
	min-height: 48px;
	padding: 0 26px;
	font-size: 13px;
}

.hi-header__step {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hi-blush);
}

/* ---------- Journey progress ---------- */

.hi-progress {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	padding-top: 28px;
	list-style: none;
}

.hi-progress__bar {
	display: block;
	height: 6px;
	background: var(--hi-sand);
}

.hi-progress__label {
	display: block;
	margin-top: 10px;
	font-weight: 600;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hi-navy);
}

.hi-is-done .hi-progress__bar,
.hi-is-current .hi-progress__bar {
	background: var(--hi-accent);
}

.hi-is-current .hi-progress__label {
	color: var(--hi-accent);
}

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

.hi-footer {
	background: var(--hi-ink);
	color: var(--hi-ivory);
}

.hi-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
	padding-top: 44px;
	padding-bottom: 44px;
}

.hi-footer__logo {
	display: flex;
	flex: none;
	align-items: center;
}

.hi-footer__logo img {
	width: 166px;
	height: 24px;
	object-fit: contain;
	object-position: left center;
}

.hi-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.hi-footer__nav a {
	color: var(--hi-ivory);
	text-decoration: none;
}

.hi-footer__copy {
	font-size: 15px;
	color: var(--hi-sand);
}

.hi-footer__help {
	display: flex;
	flex: 0 0 100%;
	flex-wrap: wrap;
	gap: 8px 32px;
	padding-top: 24px;
	border-top: 1px solid var(--hi-rule);
	font-size: 15px;
	color: var(--hi-sand);
}

.hi-footer__help a,
.hi-footer__help .hi-linkbutton {
	color: var(--hi-sand);
	text-decoration: underline;
}

.hi-footer__help a:hover,
.hi-footer__help .hi-linkbutton:hover {
	color: var(--hi-ivory);
}

/* ---------- Holding page and page not found ---------- */

.hi-holding {
	align-items: center;
	justify-content: center;
	padding: 48px var(--hi-gutter);
	text-align: center;
}

.hi-holding > .hi-holding__inner {
	flex: 0 1 auto;
	width: auto;
	max-width: 760px;
}

.hi-holding__logo {
	width: 194px;
	height: 28px;
	margin: 0 auto 48px;
	object-fit: contain;
}

.hi-holding__line {
	margin: 20px auto 0;
	font-size: 20px;
	line-height: 1.5;
}

/* ---------- Desktop only (900px and up) ---------- */

@media (min-width: 900px) {
	.hi-eyebrow--mobile {
		display: none;
	}

	.hi-eyebrow--mobile + .hi-h1,
	.hi-eyebrow--mobile + .hi-h2,
	.hi-eyebrow--mobile + .hi-h3 {
		margin-top: 0;
	}
}

/* ---------- Compact desktop header (900px to 1139px) ---------- */

@media (min-width: 900px) and (max-width: 1139px) {
	.hi-header__bar {
		gap: 20px;
	}

	.hi-header__logo img {
		width: 166px;
		height: 24px;
	}

	.hi-nav {
		gap: 18px;
		font-size: 12px;
		letter-spacing: 1px;
	}

	.hi-header__cta {
		padding: 0 16px;
		font-size: 12px;
		letter-spacing: 1px;
	}
}

/* ---------- Mobile (below 900px) ---------- */

@media (max-width: 899px) {
	:root {
		--hi-gutter: 20px;
	}

	body.hi {
		font-size: 16px;
		line-height: 1.5;
	}

	h1,
	.hi-h1 {
		font-size: 36px;
		line-height: 1.08;
	}

	h2,
	.hi-h2 {
		font-size: 30px;
		line-height: 1.15;
	}

	h3,
	.hi-h3 {
		font-size: 22px;
		line-height: 1.25;
	}

	h4 {
		font-size: 20px;
	}

	.hi-eyebrow {
		font-size: 12px;
		line-height: 18px;
	}

	.hi-lead {
		font-size: 16px;
	}

	.hi-eyebrow + .hi-h1,
	.hi-eyebrow + .hi-h2,
	.hi-eyebrow + .hi-h3 {
		margin-top: 8px;
	}

	.hi-h1 + .hi-lead,
	.hi-h2 + .hi-lead,
	.hi-h3 + .hi-lead {
		margin-top: 12px;
	}

	.hi-section {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.hi-section--tight {
		padding-top: 32px;
	}

	.hi-section--step {
		padding-top: 24px;
	}

	.hi-title-band {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.hi-grid {
		gap: 20px;
	}

	.hi-grid--2,
	.hi-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.hi-btn {
		padding-left: 16px;
		padding-right: 16px;
		font-size: 13px;
	}

	.hi-btn--lg {
		min-height: 56px;
	}

	.hi-btn--ghost {
		padding-left: 0;
		padding-right: 0;
		font-size: 12px;
	}

	.hi-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: 28px;
	}

	.hi-label {
		font-size: 12px;
	}

	.hi-input,
	.hi-select,
	.hi-textarea {
		padding-left: 16px;
		padding-right: 16px;
		font-size: 17px;
	}

	.hi-input--lg {
		height: 56px;
	}

	.hi-select {
		padding-right: 48px;
		background-position: right 14px center;
	}

	.hi-textarea {
		height: 150px;
		min-height: 150px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.hi-card,
	.hi-panel {
		padding: 20px;
	}

	.hi-table__row,
	.hi-table th,
	.hi-table td {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.hi-table th,
	.hi-table dt {
		font-size: 12px;
		line-height: 24px;
	}

	.hi-steps__item {
		padding: 14px 0 14px 40px;
	}

	.hi-steps__item::before {
		top: 14px;
		font-size: 20px;
	}

	.hi-steps__title {
		font-size: 21px;
	}

	.hi-prose h2 {
		font-size: 22px;
		line-height: 1.25;
	}

	.hi-prose h3 {
		font-size: 20px;
	}

	.hi-prose > * + *,
	.hi-prose__section > * + * {
		margin-top: 10px;
	}

	.hi-prose ul,
	.hi-prose ol {
		padding-left: 20px;
	}

	.hi-prose > h2:not(:first-child),
	.hi-prose__section + .hi-prose__section {
		margin-top: 28px;
		padding-top: 28px;
	}

	/* Header */

	.hi-header__bar {
		flex-wrap: wrap;
		gap: 0;
		height: auto;
		min-height: 64px;
	}

	.hi-header--site .hi-header__bar {
		padding-right: 8px;
	}

	.hi-header__logo {
		height: 64px;
	}

	.hi-header__logo img {
		width: 138px;
		height: 20px;
	}

	.hi-js .hi-header__toggle {
		display: flex;
	}

	.hi-header__menu {
		display: block;
		flex: 0 0 calc(100% + 28px);
		margin: 0 -8px 0 -20px;
		padding: 0 20px 24px;
		border-top: 1px solid var(--hi-rule);
	}

	.hi-js .hi-header__menu {
		display: none;
	}

	.hi-js .hi-is-open .hi-header__menu {
		display: block;
	}

	.hi-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.hi-nav a {
		display: flex;
		align-items: center;
		min-height: 52px;
		border-bottom: 1px solid var(--hi-rule);
	}

	.hi-header__cta {
		display: flex;
		width: 100%;
		min-height: 56px;
		margin-top: 20px;
	}

	.hi-header__step {
		font-size: 12px;
	}

	/* Progress: thin segments, names kept for screen readers only */

	.hi-progress {
		gap: 6px;
		padding-top: 16px;
	}

	.hi-progress__bar {
		height: 4px;
	}

	.hi-progress__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Footer */

	.hi-footer__inner {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 16px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.hi-footer__logo {
		align-self: flex-start;
		margin: -12px 0;
		padding: 12px 0;
	}

	.hi-footer__logo img {
		width: 138px;
		height: 20px;
	}

	.hi-footer__nav,
	.hi-footer__help {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 16px;
	}

	.hi-footer__nav {
		font-size: 12px;
	}

	.hi-footer__help {
		flex: none;
		padding-top: 12px;
		font-size: 14px;
	}

	.hi-footer__nav a,
	.hi-footer__help a,
	.hi-footer__help .hi-linkbutton {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.hi-footer__copy {
		order: 1;
		font-size: 14px;
	}

	/* Holding */

	.hi-holding__logo {
		width: 166px;
		height: 24px;
		margin-bottom: 36px;
	}

	.hi-holding__line {
		font-size: 16px;
		margin-top: 14px;
	}
}

@media (max-width: 782px) {
	body.hi.admin-bar {
		min-height: calc(100vh - 46px);
	}
}

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

@media print {
	.hi-header,
	.hi-progress,
	.hi-footer,
	.hi-skip {
		display: none;
	}

	body.hi {
		display: block;
		min-height: 0;
	}
}