/* ==========================================================================
   Hyperlink v2 (Oct 21 2026 redesign)
   Loaded after style.css on every front-end page.
   Site-wide: tokens, fonts, header, footer, mobile CTA bar.
   Homepage: hero, plans, retail, contact (all `hx-` classes).
   Old pages still use the `hl-` classes in style.css until they are redesigned.
   ========================================================================== */

:root {
	--hx-blue: #1F4FD1;
	--hx-navy: #0B1B4D;
	--hx-navy-deep: #071338;
	--hx-cyan: #2E9BEA;
	--hx-text: #3E4A72;
	--hx-muted: #5B6690;
	--hx-line: #E4E8F2;
	--hx-field: #D5DBEA;
	--hx-soft: #F3F6FC;
	--hx-tint: #E8EEFC;
	--hx-sky: #E6F3FD;
	--hx-sky-line: #BFE0F8;
	--hx-on-navy: #C9D4F2;
	--hx-on-navy-muted: #8E9AC2;
	--hx-font: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--hx-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
	--hx-max: 1440px;
	--hx-pad: clamp(20px, 4.4vw, 56px);
	--hx-row-h: 68px;
	--hx-tab-h: 0px;
	--hx-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	--hx-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
	--hx-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--hx-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6690' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

	/* Theme.json font preset now resolves to Archivo everywhere */
	--wp--preset--font-family--system-sans: var(--hx-font);
}

body { font-family: var(--hx-font); }
body :where(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .wp-element-button) { font-family: inherit; }

/* Flow-layout groups: no automatic block gaps inside v2 components (spacing is set per component) */
:is(.hx-header, .hx-footer, .hx-sec) :is(.is-layout-flow, .is-layout-constrained) > *,
:is(.hx-header, .hx-footer, .hx-sec):is(.is-layout-flow, .is-layout-constrained) > * {
	margin-block: 0;
}
:is(.hx-header, .hx-footer, .hx-sec) p { margin: 0; }
:is(.hx-header, .hx-footer, .hx-sec) a { text-decoration: none; }

.hx-wrap {
	box-sizing: border-box;
	max-width: var(--hx-max);
	margin-inline: auto !important;
	padding-inline: var(--hx-pad);
}

/* Shared type */
.hx-label {
	font: 600 12px/1.4 var(--hx-mono);
	letter-spacing: .02em;
	color: var(--hx-cyan);
}
.hx-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 600 12px/1.4 var(--hx-mono);
	color: var(--hx-blue);
	text-transform: uppercase;
	letter-spacing: .08em;
}
.hx-eyebrow.hx-dot::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hx-cyan);
}
.hx-sec .hx-h1,
.hx-sec .hx-h2 {
	margin: 0;
	color: var(--hx-navy);
	font-weight: 850;
	text-wrap: pretty;
}
.hx-sec .hx-h1 {
	font-size: clamp(36px, 4.9vw, 62px);
	line-height: 1.04;
	letter-spacing: -.025em;
	padding-bottom: .04em; /* room for italic descenders */
}
.hx-sec .hx-h2 {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.08;
	letter-spacing: -.02em;
}
.hx-sec .hx-h1 em,
.hx-sec .hx-h2 em {
	font-style: italic;
	color: var(--hx-blue);
}
.hx-lead {
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.55;
	color: var(--hx-text);
	max-width: 540px;
}

/* Buttons (core/button with hx-btn + one variant class) */
.hx-btn .wp-block-button__link {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 15px 24px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-family: var(--hx-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
.hx-btn-primary .wp-block-button__link { background: var(--hx-blue); border-color: var(--hx-blue); color: #fff; }
.hx-btn-primary .wp-block-button__link:hover,
.hx-btn-primary .wp-block-button__link:focus-visible { background: var(--hx-navy); border-color: var(--hx-navy); color: #fff; }
.hx-btn-outline .wp-block-button__link { background: transparent; border-color: var(--hx-navy); color: var(--hx-navy); }
.hx-btn-outline .wp-block-button__link:hover,
.hx-btn-outline .wp-block-button__link:focus-visible { background: var(--hx-navy); color: #fff; }
.hx-btn-ghost .wp-block-button__link { background: transparent; border-color: var(--hx-blue); color: var(--hx-blue); padding: 12px 16px; font-size: 15px; }
.hx-btn-ghost .wp-block-button__link:hover,
.hx-btn-ghost .wp-block-button__link:focus-visible { background: var(--hx-blue); color: #fff; }
.hx-btn-billing .wp-block-button__link { background: var(--hx-sky); border-color: var(--hx-sky-line); border-width: 1px; color: var(--hx-navy); }
.hx-btn-billing .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--hx-icon-file) center / contain no-repeat;
	mask: var(--hx-icon-file) center / contain no-repeat;
}
.hx-btn-billing .wp-block-button__link:hover,
.hx-btn-billing .wp-block-button__link:focus-visible { background: var(--hx-cyan); border-color: var(--hx-cyan); color: var(--hx-navy); }
.hx-btn .wp-block-button__link:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; }

/* ==========================================================================
   Header (template part "header", wp_template_part ID 30)
   ========================================================================== */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	margin-block: 0;
}
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
}
.wp-block-group.hx-header {
	position: relative;
	padding: 0;
	background: #fff;
	border-bottom: 1px solid var(--hx-line);
	color: var(--hx-navy);
}

/* Top info bar (desktop and tablet) */
.hx-topbar { background: var(--hx-navy); color: var(--hx-on-navy); }
.hx-topbar__inner {
	box-sizing: border-box;
	max-width: var(--hx-max);
	margin-inline: auto !important;
	padding: 10px var(--hx-pad);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 28px;
	font: 500 12px/1.4 var(--hx-mono);
}
.hx-topbar__meta { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.hx-topbar a { color: inherit; }
.hx-topbar a:hover, .hx-topbar a:focus-visible { color: #fff; }
@media (max-width: 759px) {
	.hx-topbar { display: none; }
}

/* Main bar: logo / nav / search / CTAs */
.wp-block-group.hx-bar {
	box-sizing: border-box;
	max-width: var(--hx-max);
	margin-inline: auto !important;
	padding: clamp(12px, 1.5vw, 18px) var(--hx-pad);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	grid-template-areas: "logo nav search ctas";
	align-items: center;
	column-gap: 16px;
	contain: layout; /* containing block for the mobile menu panel */
}
.hx-logo { grid-area: logo; margin: 0; line-height: 0; }
.hx-logo a { display: block; }
.hx-logo img.custom-logo,
.hx-logo img {
	display: block;
	width: auto !important;
	max-width: none;
	height: clamp(34px, 3.6vw, 46px) !important;
}

/* Navigation (menu wp_navigation 28, overlay "always", shown inline from 1080px) */
.hx-nav.wp-block-navigation { grid-area: nav; justify-self: center; }
.hx-nav .wp-block-navigation__container { gap: clamp(16px, 2.2vw, 32px); }
.hx-nav .wp-block-navigation-item__content {
	display: block;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	color: var(--hx-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	transition: color .15s, border-color .15s;
}
.hx-nav .wp-block-navigation-item__content:hover,
.hx-nav .wp-block-navigation-item__content:focus-visible { color: var(--hx-blue); }
.hx-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--hx-blue); border-bottom-color: var(--hx-blue); }
.hx-nav .wp-block-navigation-item__content:focus:not(:focus-visible) { outline: none; }

@media (min-width: 1080px) {
	.hx-nav .wp-block-navigation__responsive-container-open { display: none; }
	.hx-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		position: relative;
		width: 100%;
		z-index: auto;
		background-color: inherit;
	}
	.hx-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
	.hx-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { flex-wrap: nowrap; }
	.hx-nav .hx-menu-ctas { display: none; }
}

/* Search (core/search) */
.hx-search.wp-block-search { grid-area: search; margin: 0; }
.hx-search .wp-block-search__inside-wrapper {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	width: 180px;
	padding: 0 8px 0 16px;
	border: 1px solid var(--hx-line);
	border-radius: 999px;
	background: var(--hx-soft);
	transition: border-color .15s, background-color .15s;
}
.hx-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--hx-blue); background: #fff; }
.hx-search .wp-block-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--hx-navy);
	font: 500 15px var(--hx-font);
}
.hx-search .wp-block-search__input::placeholder { color: var(--hx-muted); opacity: 1; }
.hx-search .wp-block-search__button {
	order: -1;
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hx-navy);
	cursor: pointer;
}
.hx-search .wp-block-search__button svg { width: 20px; height: 20px; fill: currentColor; min-width: 0; }

/* 1080-1259: a 46px circle that opens into a field when tapped */
@media (max-width: 1259px) {
	.hx-search.wp-block-search { position: relative; width: 46px; height: 46px; }
	.hx-search::before {
		content: "";
		position: absolute;
		inset: 0;
		border: 1px solid var(--hx-line);
		border-radius: 999px;
		background: var(--hx-soft);
	}
	.hx-search::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 19px;
		height: 19px;
		margin: -9.5px 0 0 -9.5px;
		background: var(--hx-navy);
		-webkit-mask: var(--hx-icon-search) center / contain no-repeat;
		mask: var(--hx-icon-search) center / contain no-repeat;
		pointer-events: none;
	}
	.hx-search .wp-block-search__inside-wrapper {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		padding: 0;
		border-color: transparent;
		background: transparent;
	}
	.hx-search .wp-block-search__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
	.hx-search .wp-block-search__button { visibility: hidden; }
	.hx-search:focus-within .wp-block-search__inside-wrapper {
		width: 260px;
		padding: 0 8px 0 16px;
		border-color: var(--hx-blue);
		background: #fff;
		box-shadow: 0 12px 30px rgba(11, 27, 77, .12);
	}
	.hx-search:focus-within .wp-block-search__input { position: static; opacity: 1; cursor: text; }
	.hx-search:focus-within .wp-block-search__button { visibility: visible; }
}

/* Header CTAs */
.hx-ctas.wp-block-buttons { grid-area: ctas; display: flex; flex-wrap: nowrap; gap: 10px; margin: 0; }
.hx-ctas .wp-block-button { margin: 0; }
.hx-ctas .hx-btn .wp-block-button__link { height: 46px; padding: 0 20px; font-size: 15px; }

/* Under 1080: logo + search + CTAs + Menu button in one row (from 720px); below 720px the CTAs drop to a second row (client, Oct 24) */
@media (max-width: 1079px) {
	.wp-block-group.hx-bar {
		padding-block: 0;
		grid-template-columns: minmax(0, 1fr) auto auto auto;
		grid-template-rows: var(--hx-row-h);
		grid-template-areas: "logo search ctas nav";
		column-gap: 8px;
	}
	.hx-nav.wp-block-navigation { justify-self: end; }
	.hx-search.wp-block-search { width: 44px; height: 44px; }
	.hx-search::before { border-radius: 12px; }
	/* Phone/tablet: the search field drops in below the bar */
	.hx-search:focus-within .wp-block-search__inside-wrapper {
		position: fixed;
		top: calc(100% + 10px);
		left: var(--hx-pad);
		right: var(--hx-pad);
		width: auto;
		height: 48px;
		border-radius: 12px;
		box-shadow: 0 0 0 10px #fff, 0 18px 30px rgba(11, 27, 77, .14);
	}
	.hx-search:focus-within .wp-block-search__input { font-size: 16px; }

	.hx-ctas.wp-block-buttons { gap: 8px; }
	.hx-ctas .hx-btn .wp-block-button__link { height: 44px; padding: 0 16px; }

	.hx-nav .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		gap: 8px;
		box-sizing: border-box;
		width: auto;
		padding: 0 14px 0 12px;
		font: 700 15px/1 var(--hx-font);
		height: 44px;
		border: 1px solid var(--hx-line);
		border-radius: 12px;
		background: #fff;
		color: var(--hx-navy);
	}
	.hx-nav .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }
	/* Visible labels; the buttons keep WordPress's aria-labels (Open menu / Close menu) */
	.hx-nav .wp-block-navigation__responsive-container-open::after { content: "Menu"; }
	.hx-nav .wp-block-navigation__responsive-container-close::after { content: "Close"; }

	/* Menu panel: a dropdown under the header bar. Not tied to .is-menu-open, so it keeps its layout while it animates closed */
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container {
		top: 100%;
		right: 0;
		bottom: auto;
		left: 0;
		height: auto;
		overflow: visible;
		padding: 8px var(--hx-pad) 20px;
		background: #fff;
		color: var(--hx-navy);
		border-bottom: 1px solid var(--hx-line);
		box-shadow: 0 18px 30px rgba(11, 27, 77, .12);
		animation: none;
	}
	body .hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog { margin-top: 0; }
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		padding-top: 0;
		align-items: stretch;
		gap: 0;
	}
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item { width: 100%; }
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 16px 0;
		border-bottom: 1px solid var(--hx-line);
		color: var(--hx-navy);
		font-size: 18px;
		font-weight: 700;
	}
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item__content::after { content: "\2192"; color: var(--hx-cyan); }
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item__content[aria-current="page"] { color: var(--hx-blue); border-bottom-color: var(--hx-line); }
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: -2px; }
	.hx-nav .hx-menu-ctas.wp-block-buttons { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin-top: 16px; }
	.hx-nav .hx-menu-ctas .wp-block-button { width: 100%; margin: 0; }
	.hx-nav .hx-menu-ctas .hx-btn .wp-block-button__link { height: 50px; padding: 0 16px; }

	/* Close (X) sits exactly over the menu button */
	.hx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: calc(-8px - var(--hx-tab-h) - var(--hx-row-h) / 2 - 22px);
		right: 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 8px;
		width: auto;
		padding: 0 14px 0 12px;
		font: 700 15px/1 var(--hx-font);
		height: 44px;
		border: 1px solid var(--hx-line);
		border-radius: 12px;
		background: #fff;
		color: var(--hx-navy);
	}
	.hx-nav .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; }
	.hx-nav .wp-block-navigation__responsive-container-close:focus:not(:focus-visible) { outline: none; }
	.hx-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; }
}

/* Phones (< 720px): Proof of Payment + Get Connected as a 2-up row under the bar.
   --hx-tab-h (row height incl. bottom padding) keeps the menu's Close button over the Menu button. */
@media (max-width: 719px) {
	:root { --hx-tab-h: 56px; }
	.wp-block-group.hx-bar {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-rows: var(--hx-row-h) auto;
		grid-template-areas: "logo search nav" "ctas ctas ctas";
		padding-bottom: 12px;
		padding-inline: 10px;
	}
	/* Keep the menu panel and the search field on the same 10px edges, so Close stays over Menu */
	.hx-search:focus-within .wp-block-search__inside-wrapper { left: 10px; right: 10px; }
	.hx-ctas.wp-block-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.hx-ctas .hx-btn .wp-block-button__link { gap: 7px; padding: 0 8px; font-size: 12px; }
	.hx-ctas .hx-btn-billing .wp-block-button__link::before { width: 15px; height: 15px; }
}

/* Menu / Close button: same size, font and icon position in both states (client, Oct 24) */
@media (max-width: 1079px) {
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container-open,
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
		width: 98px;
		justify-content: flex-start;
		padding: 0 12px;
		font-family: var(--hx-font);
		font-size: 15px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		text-transform: none;
	}
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container-open svg,
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container-close svg { flex: none; width: 22px; height: 22px; }
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { visibility: hidden; }

	/* Dropdown animation (client, Oct 24: slide down / up). The white sheet is the links wrapper: it slides down from
	   behind the header and clips itself (clip top = how far it is still hidden), so it never covers the header bar.
	   The panel box is transparent and stays displayed until the slide-up ends. The Close button sits above it, still. */
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container {
		padding: 0;
		background: transparent;
		border-bottom: 0;
		box-shadow: none;
		transition: display .22s allow-discrete;
	}
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { transition: display .3s allow-discrete; }
	/* WordPress core paints the open overlay white (.wp-block-navigation:not(.has-background) … .is-menu-open:not(.disable-default-overlay)); the sheet below carries the white instead */
	.hx-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: transparent; }
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		box-sizing: border-box;
		width: 100%;
		padding: 8px var(--hx-pad) 20px;
		background: #fff;
		border-bottom: 1px solid var(--hx-line);
		box-shadow: 0 18px 30px rgba(11, 27, 77, .12);
		transform: translateY(-100%);
		clip-path: inset(100% 0 -48px 0);
		transition: transform .22s cubic-bezier(.4, 0, 1, 1), clip-path .22s cubic-bezier(.4, 0, 1, 1);
	}
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		transform: none;
		clip-path: inset(0 0 -48px 0);
		transition: transform .3s cubic-bezier(.2, .8, .2, 1), clip-path .3s cubic-bezier(.2, .8, .2, 1);
	}
	@starting-style {
		.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { transform: translateY(-100%); clip-path: inset(100% 0 -48px 0); }
	}
	/* The panel has no padding now, so the Close button is placed from the dialog's edges directly (still over Menu) */
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
		top: calc(0px - var(--hx-tab-h) - var(--hx-row-h) / 2 - 22px);
		right: var(--hx-pad);
	}
}
/* Phones: the header uses 10px side edges, so the menu sheet and Close button do too */
@media (max-width: 719px) {
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { padding-inline: 10px; }
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close { right: 10px; }
}
@media (max-width: 1079px) and (prefers-reduced-motion: reduce) {
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container,
	.hx-nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { transition: none !important; }
}

/* ==========================================================================
   Footer (parts/footer.html)
   ========================================================================== */
.wp-block-group.hx-footer {
	margin-block-start: 0;
	padding: 0;
	background: var(--hx-navy-deep);
	color: var(--hx-on-navy);
	font-size: 15px;
	line-height: 1.6;
}
.hx-footer__top { background: var(--hx-navy); }
.hx-footer__main {
	box-sizing: border-box;
	max-width: var(--hx-max);
	margin-inline: auto !important;
	padding: clamp(44px, 5vw, 64px) var(--hx-pad);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 36px 40px;
}
.hx-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hx-footer__logo-chip { padding: 6px 12px; border-radius: 12px; background: #fff; line-height: 0; }
.hx-footer__logo-chip .wp-block-site-logo { margin: 0; line-height: 0; }
.hx-footer__logo-chip img { display: block; width: auto !important; height: 34px !important; max-width: none; filter: none; }
.hx-footer__blurb { max-width: 260px; }
.hx-footer__col { display: flex; flex-direction: column; gap: 8px; }
.hx-footer__col .hx-label { margin-bottom: 4px; }
.hx-footer a { color: #fff; transition: color .15s; }
.hx-footer a:hover, .hx-footer a:focus-visible { color: var(--hx-cyan); }
.hx-footer strong, .hx-footer .hx-strong { color: #fff; font-weight: 700; }
.hx-footer__base {
	box-sizing: border-box;
	max-width: var(--hx-max);
	margin-inline: auto !important;
	padding: 20px var(--hx-pad);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 24px;
	color: var(--hx-on-navy-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* Phone sticky call + Get Connected bar: removed per client (Oct 21); markup stays in the footer, hidden */
.hx-mobile-cta.wp-block-buttons { display: none; }

/* Messenger button in the new blue */
.hl-chat-fab { background: var(--hx-blue); box-shadow: 0 10px 25px -5px rgba(31, 79, 209, .45), 0 10px 15px -3px rgba(11, 27, 77, .1); }
.hl-chat-fab:hover, .hl-chat-fab:focus-visible { background: var(--hx-navy); }

/* ==========================================================================
   Homepage sections
   ========================================================================== */
.hl-landing > .hx-sec,
.wp-block-group.hx-sec {
	margin-block: 0;
	padding: 0;
}
.hx-hero { background: #fff; overflow-x: clip; }

/* Hero */
.hx-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(32px, 4.4vw, 56px);
	align-items: center;
	padding-block: clamp(36px, 5.6vw, 72px) clamp(48px, 6.2vw, 80px);
}
.hx-hero__copy { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); }
.hx-hero__ctas.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hx-hero__ctas .wp-block-button { flex: 1 1 200px; max-width: 260px; margin: 0; }
.hx-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, max-content));
	gap: clamp(18px, 3vw, 40px);
	padding-top: 22px;
	border-top: 1px solid var(--hx-line);
}
.hx-stat__val { font: 600 clamp(18px, 1.9vw, 24px)/1.3 var(--hx-mono); color: var(--hx-navy); white-space: nowrap; }
.hx-stat__val small { font-size: .6em; }
.hx-sec .hx-stat__label { margin-top: 4px; font-size: 13px; color: var(--hx-muted); }
.hx-hero__media { position: relative; }
.hx-hero__img.wp-block-image,
.hx-retail__img.wp-block-image { margin: 0; }
.hx-hero__img img,
.hx-retail__img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: clamp(16px, 1.9vw, 24px);
}
.hx-hero__img img { aspect-ratio: 4 / 3.6; }
.hx-float {
	position: absolute;
	left: clamp(-28px, calc(40px - 5vw), 14px);
	bottom: clamp(14px, 2.5vw, 32px);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.7vw, 22px);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(11, 27, 77, .18);
}
.hx-float__badge {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--hx-tint);
	color: var(--hx-blue);
	font: 700 13px var(--hx-mono);
}
.hx-float__title { font-weight: 800; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.3; color: var(--hx-navy); }
.hx-float__sub { font-size: 13px; line-height: 1.4; color: var(--hx-muted); }

/* Plans */
.hx-plans { background: var(--hx-soft); }
.hx-plans > .hx-wrap { padding-block: clamp(48px, 6.2vw, 80px); }
.hx-sec-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 40px;
	margin-bottom: clamp(24px, 3vw, 40px) !important;
}
.hx-sec-head .hx-eyebrow,
.hx-retail .hx-eyebrow { margin-bottom: 12px !important; }
.hx-sec-head__note { max-width: 360px; color: var(--hx-text); font-size: 16px; line-height: 1.5; }
/* At most 3 plan cards per row (2 on tablets, 1 when narrow) */
.hx-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, calc((100% - 40px) / 3))), 1fr)); gap: 20px; }
.hx-plan {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(22px, 2.2vw, 28px);
	border: 1px solid var(--hx-line);
	border-radius: 20px;
	background: #fff;
	color: var(--hx-navy);
}
.hx-plan.hx-plan-featured { border-color: var(--hx-blue); }
.hx-plan__top { display: flex; justify-content: space-between; align-items: center; min-height: 27px; }
.hx-plan__num { font: 600 13px var(--hx-mono); color: var(--hx-muted); }
.hx-plan__tag { padding: 6px 11px; border-radius: 999px; background: var(--hx-blue); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.25; }
.hx-plan__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: clamp(44px, 4vw, 52px);
	font-weight: 850;
	letter-spacing: -.03em;
	line-height: 1;
}
.hx-plan__cur { font-size: 22px; font-weight: 700; letter-spacing: 0; }
.hx-plan__mo { color: var(--hx-muted); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.hx-plan__speed { margin-bottom: 8px !important; font-size: 15px; font-weight: 700; }
.hx-meter { height: 6px; border-radius: 6px; background: var(--hx-line); overflow: hidden; }
.hx-meter__fill { height: 6px; border-radius: 6px; background: var(--hx-cyan); }
.hx-w17 { width: 17%; } .hx-w23 { width: 23%; } .hx-w28 { width: 28%; }
.hx-w40 { width: 40%; } .hx-w50 { width: 50%; } .hx-w100 { width: 100%; }
.hx-plan__use { color: var(--hx-text); font-size: 15px; }
.hx-plan .wp-block-buttons { margin-top: auto; }
.hx-plan .wp-block-button { width: 100%; margin: 0; }
.hx-sec .hx-plans__note { margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--hx-muted); }
@media (max-width: 759px) {
	.hx-plan-grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(var(--hx-pad) * -1) !important;
		padding: 0 var(--hx-pad) 16px;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.hx-plan-grid::-webkit-scrollbar { display: none; }
	.hx-plan { flex: 0 0 82%; scroll-snap-align: center; }
}

/* Computer retail */
.hx-retail { background: #fff; }
.hx-retail__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
	padding-block: clamp(48px, 6.2vw, 80px);
}
.hx-retail__img img { aspect-ratio: 1 / 1; }
@media (max-width: 759px) { .hx-retail__img img { aspect-ratio: 4 / 3; } }
.hx-retail .hx-h2 { margin-bottom: 16px !important; }
.hx-retail .hx-lead { margin-bottom: 28px !important; font-size: clamp(16px, 1.4vw, 17px); max-width: none; }
.hx-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	column-gap: 20px;
	border-top: 1px solid var(--hx-line);
}
.hx-cat { position: relative; display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hx-line); }
.hx-cat__num { flex: none; padding-top: 4px; font: 600 12px var(--hx-mono); color: var(--hx-cyan); }
.hx-cat__name { font-size: 17px; font-weight: 800; line-height: 1.35; }
.hx-cat__name a { color: var(--hx-navy); transition: color .15s; }
.hx-cat__name a::after { content: ""; position: absolute; inset: 0; }
.hx-cat:hover .hx-cat__name a, .hx-cat__name a:focus-visible { color: var(--hx-blue); }
.hx-cat__name a:focus-visible { outline: none; }
.hx-cat:has(a:focus-visible) { outline: 2px solid var(--hx-blue); outline-offset: 2px; border-radius: 4px; }
.hx-sec .hx-cat__desc { margin-top: 4px; color: var(--hx-muted); font-size: 14px; line-height: 1.4; }

/* Contact */
.hx-contact { background: var(--hx-navy); color: #fff; }
.hx-contact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(36px, 4.4vw, 56px);
	padding-block: clamp(48px, 5.6vw, 72px);
}
.hx-contact__copy { display: flex; flex-direction: column; gap: 28px; }
.hx-sec.hx-contact .hx-h2 { color: #fff; }
.hx-sec.hx-contact .hx-h2 em { color: var(--hx-cyan); }
.hx-info { display: flex; flex-direction: column; gap: 22px; color: var(--hx-on-navy); font-size: 16px; line-height: 1.5; }
.hx-info .hx-label { margin-bottom: 6px !important; }
.hx-info a { color: inherit; }
.hx-info a:hover, .hx-info a:focus-visible { color: #fff; }
.hx-form-card { padding: clamp(20px, 2.5vw, 32px); border-radius: 20px; background: #fff; color: var(--hx-navy); align-self: start; }
.hx-sec .hx-form-card h3 { margin: 0 0 16px; color: var(--hx-navy); font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: 0; }

/* Contact Form 7 inside the card (form "Hyperlink Inquiry", ID 11) */
.hx-form-card .wpcf7 { margin: 0; }
.hx-form-card .wpcf7-form {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 12px;
}
.hx-form-card .wpcf7-form > * { grid-column: 1 / -1; margin: 0; }
.hx-form-card .wpcf7-form > .hl-form-row { display: contents; }
.hx-form-card .hl-form-row > .hl-field { grid-column: auto; margin: 0; }
.hx-form-card .hl-field { margin: 0; }
.hx-form-card .hl-field label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.hx-form-card .wpcf7-form-control-wrap { display: block; }
.hx-form-card .wpcf7-form-control:not(.wpcf7-submit) {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding: 15px 14px;
	border: 1px solid var(--hx-field);
	border-radius: 12px;
	background: #fff;
	color: var(--hx-navy);
	font: 400 16px/1.4 var(--hx-font);
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.hx-form-card .wpcf7-form-control::placeholder { color: var(--hx-muted); opacity: 1; }
.hx-form-card select.wpcf7-form-control {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background: #fff var(--hx-icon-chevron) no-repeat right 14px center / 18px 18px;
	color: var(--hx-navy);
}
.hx-form-card select.wpcf7-form-control:has(option[value=""]:checked) { color: var(--hx-muted); }
.hx-form-card textarea.wpcf7-form-control { height: 88px; min-height: 88px; resize: vertical; }
.hx-form-card .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	border-color: var(--hx-blue);
	box-shadow: 0 0 0 3px rgba(31, 79, 209, .15);
}
.hx-form-card .wpcf7-not-valid { border-color: #C62828 !important; }
.hx-form-card .wpcf7-not-valid-tip { margin-top: 6px; color: #C62828; font-size: 13px; }
.hx-form-card .wpcf7-submit {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 16px;
	border: 0;
	border-radius: 999px;
	background: var(--hx-blue);
	color: #fff;
	font: 700 16px/1.2 var(--hx-font);
	cursor: pointer;
	transition: background-color .15s;
}
.hx-form-card .wpcf7-submit:hover,
.hx-form-card .wpcf7-submit:focus-visible { background: var(--hx-navy); }
.hx-form-card .wpcf7-submit:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
.hx-form-card .wpcf7-spinner { position: absolute; right: 16px; bottom: 14px; margin: 0; }
.hx-form-card .wpcf7-response-output { margin: 4px 0 0 !important; padding: 10px 14px !important; border-radius: 12px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.hx-btn .wp-block-button__link,
	.hx-nav .wp-block-navigation-item__content,
	.hx-search .wp-block-search__inside-wrapper { transition: none; }
}

/* ==========================================================================
   Inner pages (Internet Plans first, Oct 21 2026)
   Page head, pricing with use-case picker, steps, FAQ, CTA band
   ========================================================================== */

/* Page head: breadcrumb + H1 left, intro right */
.hx-page-head { background: #fff; }
.hx-page-head__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 24px 56px;
	align-items: end;
	padding-block: clamp(36px, 5vw, 64px) clamp(28px, 3vw, 40px);
}
.hx-page-head__title { display: flex; flex-direction: column; gap: 18px; }
.hx-crumbs { font: 600 12px/1.4 var(--hx-mono); color: var(--hx-muted); }
.hx-crumbs a { color: var(--hx-muted); }
.hx-crumbs a:hover, .hx-crumbs a:focus-visible { color: var(--hx-navy); }
.hx-crumbs span { color: var(--hx-blue); }
.hx-sec .hx-h1.hx-h1-page { font-size: clamp(36px, 4.6vw, 60px); }
.hx-page-head .hx-lead { font-size: clamp(16px, 1.5vw, 18px); max-width: 520px; }

/* Pricing */
.hx-pricing { background: var(--hx-soft); }
.hx-pricing > .hx-wrap { padding-block: clamp(28px, 3.4vw, 44px) clamp(48px, 6.2vw, 80px); }
.hx-usepick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 28px !important; }
.hx-usepick__label { color: var(--hx-navy); font-size: 17px; font-weight: 800; }
.hx-chips.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.hx-chips .wp-block-button { margin: 0; }
.hx-chip .wp-block-button__link {
	display: block;
	padding: 10px 16px;
	border: 1px solid var(--hx-field);
	border-radius: 999px;
	background: #fff;
	color: var(--hx-navy);
	font-family: var(--hx-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
.hx-chip .wp-block-button__link:hover { border-color: var(--hx-navy); }
.hx-chip.hx-chip-on .wp-block-button__link { background: var(--hx-navy); border-color: var(--hx-navy); color: #fff; }
.hx-chip .wp-block-button__link:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; }

.hx-plan { scroll-margin-top: 140px; transition: background-color .2s, border-color .2s, box-shadow .2s; }
.hx-plan__rec { display: none; padding: 6px 11px; border-radius: 999px; background: var(--hx-cyan); color: var(--hx-navy-deep); font-size: 12px; font-weight: 800; line-height: 1.25; }
.hx-pricing .hx-plan__tag { background: var(--hx-tint); color: var(--hx-blue); }
.hx-pricing .hx-plan__num { color: var(--hx-text); }
.hx-plan.hx-plan-rec { background: var(--hx-navy); border-color: var(--hx-navy); color: #fff; box-shadow: 0 20px 40px rgba(11, 27, 77, .2); }
.hx-plan-rec .hx-plan__rec { display: inline-block; }
.hx-plan-rec .hx-plan__tag { display: none; }
.hx-plan-rec .hx-plan__num,
.hx-plan-rec .hx-plan__mo,
.hx-plan-rec .hx-plan__use { color: var(--hx-on-navy); }
.hx-plan-rec .hx-meter { background: rgba(255, 255, 255, .15); }
.hx-plan-rec .hx-btn-ghost .wp-block-button__link { background: var(--hx-cyan); border-color: var(--hx-cyan); color: var(--hx-navy-deep); }
.hx-plan-rec .hx-btn-ghost .wp-block-button__link:hover,
.hx-plan-rec .hx-btn-ghost .wp-block-button__link:focus-visible { background: #fff; border-color: #fff; color: var(--hx-navy); }
@media (max-width: 759px) {
	/* This grid stacks on phones (the homepage one swipes) */
	.hx-plan-grid.hx-plan-stack {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		overflow: visible;
		margin-inline: 0 !important;
		padding: 0;
	}
	.hx-plan-stack .hx-plan { flex: none; }
}

/* Steps */
.hx-steps { background: #fff; }
.hx-steps > .hx-wrap { padding-block: clamp(48px, 6.2vw, 80px); }
.hx-steps .hx-eyebrow { margin-bottom: 12px !important; }
.hx-steps .hx-h2 { margin-bottom: clamp(24px, 3vw, 40px) !important; }
.hx-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.hx-step { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 2px solid var(--hx-navy); }
.hx-step__num { font: 600 13px var(--hx-mono); color: var(--hx-cyan); }
.hx-sec .hx-step__title { margin: 0; color: var(--hx-navy); font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: 0; }
.hx-step__desc { color: var(--hx-text); font-size: 15px; line-height: 1.5; }

/* FAQ (core/details) */
.hx-faq { background: #fff; }
.hx-faq__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 32px 56px;
	padding-bottom: clamp(48px, 6.2vw, 80px);
}
.hx-faq .hx-eyebrow { margin-bottom: 12px !important; }
.hx-faq__list { border-top: 1px solid var(--hx-line); }
.hx-faq__item.wp-block-details { margin: 0; border-bottom: 1px solid var(--hx-line); }
.hx-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	color: var(--hx-navy);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}
.hx-faq__item summary::-webkit-details-marker { display: none; }
.hx-faq__item summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--hx-soft);
	color: var(--hx-blue);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
}
.hx-faq__item[open] summary::after { content: "\2013"; }
.hx-faq__item summary:hover { color: var(--hx-blue); }
.hx-faq__item summary:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; border-radius: 4px; }
.hx-faq__item > p { margin: 0; padding: 0 48px 20px 0; color: var(--hx-text); font-size: 15px; line-height: 1.6; }
.hx-faq__item a { color: var(--hx-blue); }

/* CTA band */
.hx-band-sec { background: #fff; }
.hx-band-sec > .hx-wrap { padding-bottom: clamp(48px, 6.2vw, 80px); }
.hx-band {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: clamp(28px, 3.4vw, 44px);
	border-radius: 24px;
	background: var(--hx-blue);
	color: #fff;
}
.hx-sec .hx-band__title { margin: 0; color: #fff; font-size: clamp(26px, 2.8vw, 36px); font-weight: 850; line-height: 1.15; letter-spacing: -.02em; }
.hx-sec .hx-band__title em { font-style: italic; color: #fff; }
.hx-band__sub { margin-top: 8px !important; color: #DCE5FF; font-size: 16px; line-height: 1.5; }
.hx-band__sub a { color: #fff; }
.hx-band__ctas.wp-block-buttons { margin: 0; }
.hx-btn-white .wp-block-button__link { background: #fff; border-color: #fff; color: var(--hx-navy); font-weight: 800; }
.hx-btn-white .wp-block-button__link:hover,
.hx-btn-white .wp-block-button__link:focus-visible { background: var(--hx-navy); border-color: var(--hx-navy); color: #fff; }
.hx-btn-white .wp-block-button__link:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.hx-plan, .hx-chip .wp-block-button__link { transition: none; }
}

/* ==========================================================================
   Computer Retail (product_cat archive template 375)
   Hero, product listing with filters (inc/product-listing.php), showroom band
   ========================================================================== */
.tax-product_cat .wp-site-blocks > * + * { margin-block-start: 0; }
.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Hero: copy left, showroom photo right */
.hx-shop-hero { background: #fff; }
.hx-shop-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(28px, 4.4vw, 56px);
	align-items: center;
	padding-block: clamp(36px, 5vw, 64px);
}
.hx-shop-hero__copy { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.hx-shop-hero .hx-lead { font-size: clamp(16px, 1.5vw, 18px); max-width: 520px; }
.hx-shop-hero__img.wp-block-image { margin: 0; }
.hx-shop-hero__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: clamp(16px, 1.9vw, 24px); }
.hx-btn-row.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hx-btn-row .wp-block-button { margin: 0; }
.hx-btn-row .hx-btn .wp-block-button__link { width: auto; }

/* Listing section */
.hx-shop { background: #fff; border-top: 1px solid var(--hx-line); }
.hx-shop > .hx-wrap { padding-block: clamp(20px, 3vw, 36px) clamp(24px, 3vw, 40px); }
.hx-listing__layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
	scroll-margin-top: 140px;
}
.hx-filters__backdrop { display: none; }

/* Filter sidebar */
.hx-filters {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 140px);
	max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 160px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	color: var(--hx-navy);
}
.hx-filters:hover { scrollbar-color: var(--hx-field) transparent; }
.hx-filters__form { display: flex; flex-direction: column; gap: 28px; margin: 0; }
.hx-filters__sheet-head { display: none; }
.hx-fgroup { margin: 0; padding: 0; border: 0; min-width: 0; }
.hx-fgroup__title { padding: 0; margin-bottom: 12px; font: 600 12px/1.4 var(--hx-mono); color: var(--hx-muted); letter-spacing: .02em; }
.hx-check,
.hx-radio {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
}
.hx-check input,
.hx-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hx-check__box {
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid #C3CDE6;
	border-radius: 6px;
	background: #fff;
	transition: background-color .15s, border-color .15s;
}
.hx-check input:checked + .hx-check__box { background: var(--hx-blue); border-color: var(--hx-blue); }
.hx-check input:checked + .hx-check__box::after { content: "\2713"; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.hx-check__label { flex: 1; min-width: 0; }
.hx-check__count { font: 500 12px var(--hx-mono); color: #8E9AC2; }
.hx-radio__dot {
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid #C3CDE6;
	border-radius: 50%;
	background: #fff;
}
.hx-radio input:checked + .hx-radio__dot { border-color: var(--hx-blue); }
.hx-radio input:checked + .hx-radio__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--hx-blue); }
.hx-check input:focus-visible + .hx-check__box,
.hx-radio input:focus-visible + .hx-radio__dot { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
.hx-check:hover .hx-check__box,
.hx-radio:hover .hx-radio__dot { border-color: var(--hx-blue); }
.hx-fgroup__more summary { padding: 8px 0; color: var(--hx-blue); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.hx-fgroup__more summary::-webkit-details-marker { display: none; }
.hx-fgroup__more summary::after { content: " \2193"; }
.hx-fgroup__more[open] summary { display: none; }
.hx-filters__clear { color: var(--hx-blue); font-size: 14px; font-weight: 700; text-decoration: none; }
.hx-filters__clear:hover { color: var(--hx-navy); }
.hx-filters__apply {
	box-sizing: border-box;
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--hx-blue);
	color: #fff;
	font: 700 15px/1.2 var(--hx-font);
	cursor: pointer;
}
.hx-filters__apply:hover { background: var(--hx-navy); }
.hx-filters.hx-js .hx-filters__apply { display: none; }

/* Results toolbar */
.hx-results { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hx-toolbar { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.hx-toolbar__count { margin: 0; color: var(--hx-muted); font-size: 14px; }
.hx-filter-btn { display: none; }
.hx-sort {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	box-sizing: border-box;
	padding: 0 16px 0 18px;
	border: 1px solid var(--hx-field);
	border-radius: 999px;
	background: #fff;
	color: var(--hx-navy);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.hx-sort:focus-within { border-color: var(--hx-blue); }
.hx-sort__select {
	-webkit-appearance: none;
	appearance: none;
	padding: 0 22px 0 0;
	border: 0;
	outline: 0;
	background: transparent var(--hx-icon-chevron) no-repeat right center / 16px 16px;
	color: inherit;
	font: 600 14px var(--hx-font);
	cursor: pointer;
}

/* Product grid + card */
.hx-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(14px, 1.6vw, 22px) clamp(12px, 1.6vw, 20px); }
.hx-pcard { display: flex; flex-direction: column; gap: 12px; color: var(--hx-navy); text-decoration: none; }
.hx-pcard:hover, .hx-pcard:focus-visible { color: var(--hx-navy); }
.hx-pcard:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 4px; border-radius: 16px; }
.hx-pcard__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	box-sizing: border-box;
	border: 1px solid var(--hx-line);
	border-radius: 16px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.hx-pcard:hover .hx-pcard__media { border-color: var(--hx-blue); box-shadow: 0 14px 30px rgba(11, 27, 77, .1); }
.hx-pcard__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-pcard__ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, #F3F6FC 0 12px, #EBF0F9 12px 24px);
	color: #8E9AC2;
	font: 600 11px var(--hx-mono);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.hx-pcard__badge { position: absolute; top: 10px; left: 10px; padding: 5px 9px; border-radius: 999px; background: #fff; color: var(--hx-navy); font-size: 11px; font-weight: 700; line-height: 1.2; box-shadow: 0 1px 2px rgba(11, 27, 77, .08); }
.hx-pcard__body { display: flex; flex-direction: column; gap: 3px; }
.hx-pcard__brand { font: 600 11px/1.4 var(--hx-mono); color: var(--hx-muted); text-transform: uppercase; }
.hx-pcard__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: clamp(15px, 1.3vw, 17px);
	font-weight: 800;
	line-height: 1.3;
	transition: color .15s;
}
.hx-pcard:hover .hx-pcard__name { color: var(--hx-blue); }
.hx-pcard__spec { color: var(--hx-muted); font-size: 13px; line-height: 1.4; }
.hx-pcard__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; margin-top: auto; }
.hx-pcard__price { font-size: clamp(17px, 1.5vw, 20px); font-weight: 850; }
.hx-pcard__cta { color: var(--hx-blue); font-size: 13px; font-weight: 700; }

/* Empty state + pagination */
.hx-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; border-radius: 20px; background: var(--hx-soft); text-align: center; }
.hx-empty p { margin: 0; }
.hx-empty__title { font-size: 20px; font-weight: 800; }
.hx-empty__text { color: var(--hx-muted); font-size: 15px; }
.hx-empty__btn { margin-top: 8px; padding: 12px 20px; border-radius: 999px; background: var(--hx-blue); color: #fff; font-weight: 700; text-decoration: none; }
.hx-empty__btn:hover { background: var(--hx-navy); color: #fff; }
.hx-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.hx-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	box-sizing: border-box;
	padding: 0 10px;
	border: 1px solid var(--hx-line);
	border-radius: 999px;
	color: var(--hx-navy);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.hx-pager a.page-numbers:hover { border-color: var(--hx-blue); color: var(--hx-blue); }
.hx-pager .page-numbers.current { background: var(--hx-navy); border-color: var(--hx-navy); color: #fff; }
.hx-pager .page-numbers.dots { border-color: transparent; }

/* Phones: filters become a bottom sheet (opened by the Filters button, #hx-filters) */
@media (max-width: 759px) {
	.hx-listing__layout { grid-template-columns: minmax(0, 1fr); }
	.hx-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hx-toolbar__count { display: none; }
	.hx-filter-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 44px;
		box-sizing: border-box;
		padding: 0 18px;
		border: 1px solid var(--hx-field);
		border-radius: 999px;
		color: var(--hx-navy);
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
	}
	.hx-filter-btn__count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--hx-blue); color: #fff; font-size: 11px; }
	.hx-filters { display: none; }
	.hx-filters:target {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 10001;
		max-height: 85vh;
		padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
		box-sizing: border-box;
		border-radius: 24px 24px 0 0;
		background: #fff;
		box-shadow: 0 -12px 40px rgba(7, 19, 56, .25);
	}
	.hx-listing__layout:has(.hx-filters:target) .hx-filters__backdrop { display: block; position: fixed; inset: 0; z-index: 10000; background: rgba(7, 19, 56, .5); }
	.hx-filters__form { gap: 20px; }
	.hx-filters__sheet-head { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 14px; }
	.hx-filters__handle { grid-column: 1 / -1; justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--hx-field); }
	.hx-filters__title { font-size: 22px; font-weight: 850; }
	.hx-filters__clear-top { color: var(--hx-blue); font-size: 14px; font-weight: 700; text-decoration: none; }
	.hx-filters__clear { display: none; }
	.hx-check { padding: 12px 0; border-bottom: 1px solid #F0F2F7; font-size: 16px; }
	.hx-check__box { width: 22px; height: 22px; }
	/* Price options become chips */
	.hx-fgroup__radios { display: flex; flex-wrap: wrap; gap: 8px; }
	.hx-radio { padding: 10px 14px; border: 1px solid #C3CDE6; border-radius: 999px; font-size: 14px; font-weight: 600; }
	.hx-radio__dot { display: none; }
	.hx-radio:has(input:checked) { background: var(--hx-navy); border-color: var(--hx-navy); color: #fff; }
	.hx-radio:has(input:focus-visible) { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
	.hx-filters .hx-filters__apply,
	.hx-filters.hx-js .hx-filters__apply { display: block; position: sticky; bottom: 0; padding: 16px; font-size: 16px; box-shadow: 0 -10px 0 #fff; }
}

/* Visit our showroom band */
.hx-visit-sec { background: #fff; }
.hx-visit-sec > .hx-wrap { padding-bottom: clamp(48px, 6.2vw, 80px); }
.hx-visit {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: clamp(24px, 3.4vw, 40px);
	border: 1px solid var(--hx-line);
	border-radius: 24px;
}
.hx-sec .hx-visit__title { margin: 0; color: var(--hx-navy); font-size: clamp(24px, 2.6vw, 32px); font-weight: 850; line-height: 1.15; letter-spacing: -.02em; }
.hx-sec .hx-visit__title em { font-style: italic; color: var(--hx-blue); }
.hx-visit__sub { margin-top: 8px !important; color: var(--hx-text); font-size: 16px; line-height: 1.5; }
.hx-visit .hx-btn-row { gap: 10px; }
.hx-visit .hx-btn .wp-block-button__link { padding: 13px 22px; }

@media (prefers-reduced-motion: reduce) {
	.hx-pcard__media, .hx-pcard__name, .hx-check__box { transition: none; }
}

/* Listing: in-place updates (no page reload) */
.hx-listing .hx-results { transition: opacity .15s; }
.hx-listing.is-loading .hx-results { opacity: .5; pointer-events: none; }
.hx-listing.is-loading .hx-toolbar__count::after { content: "\2026"; }
@media (prefers-reduced-motion: reduce) { .hx-listing .hx-results { transition: none; } }
@media (max-width: 759px) {
	/* Same bottom sheet as :target, opened by the script */
	.hx-filters.is-open {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 10001;
		max-height: 85vh;
		padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
		box-sizing: border-box;
		border-radius: 24px 24px 0 0;
		background: #fff;
		box-shadow: 0 -12px 40px rgba(7, 19, 56, .25);
	}
	.hx-listing__layout:has(.hx-filters.is-open) .hx-filters__backdrop { display: block; position: fixed; inset: 0; z-index: 10000; background: rgba(7, 19, 56, .5); }
	html.hx-sheet-open, html.hx-sheet-open body { overflow: hidden; }
	.hx-filters__title:focus { outline: none; }
}

/* ==========================================================================
   Category pages + Shop (templates taxonomy-product_cat / archive-product)
   ========================================================================== */
.post-type-archive-product .wp-site-blocks > * + * { margin-block-start: 0; }
.hx-archive-head { background: #fff; border-bottom: 1px solid var(--hx-line); }
.hx-archive-head__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-block: clamp(28px, 4vw, 48px) 24px;
}
.hx-archive-head__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.hx-sec .hx-h1.hx-h1-archive { font-size: clamp(32px, 4vw, 52px); }
.hx-archive-head__count { font: 600 14px/1.4 var(--hx-mono); color: var(--hx-muted); }
.hx-archive-head + .hx-shop { border-top: 0; }

/* "Can't find what you need?" band, lined up with the results column */
.hx-ask-sec { background: #fff; }
.hx-ask-sec > .hx-wrap { padding-bottom: clamp(48px, 6.2vw, 80px); }
@media (min-width: 760px) {
	.hx-ask-sec > .hx-wrap { padding-left: calc(var(--hx-pad) + 220px + clamp(20px, 3vw, 40px)); }
}
.hx-ask {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: clamp(22px, 2.8vw, 32px);
	border-radius: 20px;
	background: var(--hx-navy);
	color: #fff;
}
.hx-ask__title { color: #fff; font-size: clamp(20px, 2vw, 26px); font-weight: 850; line-height: 1.2; }
.hx-ask__sub { margin-top: 6px !important; color: var(--hx-on-navy); font-size: 15px; line-height: 1.5; }
.hx-btn-cyan .wp-block-button__link { background: var(--hx-cyan); border-color: var(--hx-cyan); color: var(--hx-navy-deep); font-weight: 800; padding: 13px 20px; }
.hx-btn-cyan .wp-block-button__link:hover,
.hx-btn-cyan .wp-block-button__link:focus-visible { background: #fff; border-color: #fff; color: var(--hx-navy); }
.hx-btn-cyan .wp-block-button__link:focus-visible { outline-color: #fff; }

/* ==========================================================================
   Single product (template single-product, inc/single-product.php)
   ========================================================================== */
.single-product .wp-site-blocks > * + * { margin-block-start: 0; }
.hx-product { background: #fff; }
.hx-product__wrap { padding-block: 20px clamp(40px, 5vw, 64px); }
.hx-sec .hx-product__crumbs { margin-bottom: 20px !important; line-height: 1.6; }
.hx-product__crumbs span { word-break: break-word; }
.hx-product__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(24px, 4.4vw, 56px);
	align-items: start;
}

/* Gallery */
.hx-gallery { display: flex; flex-direction: column; gap: 12px; }
.hx-gallery__main {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: clamp(16px, 1.9vw, 24px);
	background: var(--hx-soft);
}
.hx-gallery__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hx-gallery__ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, #F3F6FC 0 14px, #EBF0F9 14px 28px);
	color: #8E9AC2;
	font: 600 12px var(--hx-mono);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.hx-gallery__badge { position: absolute; top: 14px; left: 14px; padding: 6px 11px; border-radius: 999px; background: var(--hx-navy); color: #fff; font-size: 12px; font-weight: 700; }
.hx-gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hx-gallery__thumb { aspect-ratio: 1 / 1; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 12px; background: var(--hx-soft); cursor: pointer; }
.hx-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-gallery__thumb.is-active { border-color: var(--hx-blue); }
.hx-gallery__thumb:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; }

/* Info column */
.hx-pinfo { display: flex; flex-direction: column; gap: 22px; color: var(--hx-navy); }
.hx-pinfo__brand { font: 600 13px/1.4 var(--hx-mono); color: var(--hx-muted); text-transform: uppercase; }
.hx-sec .hx-pinfo__name {
	margin: 6px 0 0;
	color: var(--hx-navy);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 850;
	line-height: 1.08;
	letter-spacing: -.02em;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
.hx-pinfo__sub { margin-top: 8px !important; color: var(--hx-text); font-size: 16px; }
.hx-pinfo__pricerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.hx-pinfo__price { font-size: clamp(32px, 3.4vw, 44px); font-weight: 850; letter-spacing: -.03em; line-height: 1.1; }
.hx-pinfo__stock { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #1C7C4A; }
.hx-pinfo__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1C9C5A; }
.hx-pinfo__stock.is-order { color: #8A5A00; }
.hx-pinfo__stock.is-order::before { background: #D99A00; }
.hx-pinfo__stock.is-out { color: #B42318; }
.hx-pinfo__stock.is-out::before { background: #D92D20; }
.hx-pinfo__specs { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-spec { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--hx-soft); }
.hx-spec__k { font: 600 10px var(--hx-mono); color: var(--hx-muted); }
.hx-spec__v { font-size: 14px; font-weight: 700; }

/* Options (variable products) */
.hx-pconfig { margin: 0; padding: 0; border: 0; min-width: 0; }
.hx-pconfig__title { padding: 0; margin-bottom: 10px; font: 600 12px var(--hx-mono); color: var(--hx-muted); }
.hx-pconfig__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr)); gap: 10px; }
.hx-pconfig__opt {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	border: 1px solid var(--hx-field);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.hx-pconfig__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hx-pconfig__opt:hover { border-color: var(--hx-blue); }
.hx-pconfig__opt:has(input:checked) { border: 2px solid var(--hx-blue); padding: 13px 15px; background: var(--hx-soft); }
.hx-pconfig__opt:has(input:focus-visible) { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
.hx-pconfig__name { font-size: 15px; font-weight: 800; }
.hx-pconfig__price { color: var(--hx-muted); font-size: 13px; }

/* Enquiry buttons (override the Enquiry Mode plugin's button styles) */
.hx-product .hx-pinfo__actions { display: flex; flex-direction: column; gap: 10px; }
.hx-product .hx-pinfo__actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hx-product button.hl-enquire-btn.hx-enquire {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 17px 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--hx-blue) !important;
	box-shadow: none !important;
	color: #fff !important;
	font: 700 16px/1.2 var(--hx-font) !important;
	letter-spacing: 0 !important;
	transform: none !important;
	cursor: pointer !important;
}
.hx-product button.hl-enquire-btn.hx-enquire:hover,
.hx-product button.hl-enquire-btn.hx-enquire:focus-visible { background: var(--hx-navy) !important; box-shadow: none !important; transform: none !important; }
.hx-product button.hl-enquire-btn.hx-enquire:focus-visible { outline: 2px solid var(--hx-blue) !important; outline-offset: 2px !important; }
.hx-pbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13px 12px;
	border: 1.5px solid var(--hx-navy);
	border-radius: 999px;
	color: var(--hx-navy);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}
.hx-pbtn:hover, .hx-pbtn:focus-visible { background: var(--hx-navy); color: #fff; }

/* Trust row */
.hx-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 18px; border-top: 1px solid var(--hx-line); }
.hx-trust__t { font-size: 14px; font-weight: 800; line-height: 1.3; }
.hx-trust__d { margin-top: 3px !important; color: var(--hx-muted); font-size: 13px; line-height: 1.35; }

/* Tabs */
.hx-ptabs { background: var(--hx-soft); }
.hx-ptabs > .hx-wrap { padding-block: clamp(40px, 5vw, 64px); }
.hx-ptabs__list { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(var(--hx-pad) * -1) 24px; padding: 0 var(--hx-pad); scrollbar-width: none; }
.hx-ptabs__list[hidden] { display: none; }
.hx-ptabs__list::-webkit-scrollbar { display: none; }
.hx-ptabs__tab { flex: none; padding: 12px 20px; border: 0; border-radius: 999px; background: #fff; color: var(--hx-navy); font: 700 15px var(--hx-font); cursor: pointer; }
.hx-ptabs__tab[aria-selected="true"] { background: var(--hx-navy); color: #fff; }
.hx-ptabs__tab:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
.hx-ptabs__panel { max-width: 860px; padding: clamp(8px, 1.4vw, 16px) clamp(18px, 2.4vw, 32px); border-radius: 20px; background: #fff; }
.hx-ptabs__panel + .hx-ptabs__panel { margin-top: 16px; }
.hx-ptabs.hx-js .hx-ptabs__panel + .hx-ptabs__panel { margin-top: 0; }
.hx-ptabs__panel[hidden] { display: none; }
.hx-ptabs__h { margin: 12px 0 4px; color: var(--hx-navy); font-size: 18px; font-weight: 800; }
.hx-ptabs.hx-js .hx-ptabs__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx-ptabs__table { margin: 0; }
.hx-ptabs__row { display: grid; grid-template-columns: minmax(110px, 200px) 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid #EEF1F7; font-size: 15px; }
.hx-ptabs__row:last-child { border-bottom: 0; }
.hx-ptabs__row dt { color: var(--hx-muted); }
.hx-ptabs__row dd { margin: 0; color: var(--hx-navy); font-weight: 600; }
.hx-ptabs__row a { color: var(--hx-blue); }
.hx-ptabs__text { padding: 12px 0; color: var(--hx-text); font-size: 15px; line-height: 1.65; }

/* Related */
.hx-related { background: #fff; }
.hx-related > .hx-wrap { padding-block: clamp(48px, 6.2vw, 80px); }
.hx-sec .hx-related__title { margin-bottom: clamp(20px, 3vw, 32px) !important; font-size: clamp(26px, 3vw, 38px); }

/* Product phone sticky bar: removed per client (Oct 21); markup stays, hidden */
.hx-pbar { display: none; }
@media (max-width: 759px) {
	.hx-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.hx-related__grid.hx-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hx-ptabs__row { grid-template-columns: minmax(84px, 32%) 1fr; gap: 12px; }
}

/* Enquire Now popup (Enquiry Mode plugin), restyled to the v2 look */
#hl-enquiry .hl-eq-backdrop { background: rgba(7, 19, 56, .55); }
#hl-enquiry .hl-eq-panel { max-width: 460px; padding: clamp(24px, 4vw, 32px); border-radius: 20px; font-family: var(--hx-font); color: var(--hx-navy); box-shadow: 0 24px 60px rgba(7, 19, 56, .35); }
#hl-enquiry .hl-eq-close { top: 14px; right: 14px; width: 36px; height: 36px; background: var(--hx-soft); color: var(--hx-navy); font-size: 20px; }
#hl-enquiry .hl-eq-close:hover { background: var(--hx-line); }
#hl-enquiry .hl-eq-pill { margin: 0 0 10px; padding: 0; border-radius: 0; background: none; color: var(--hx-blue); font: 600 12px var(--hx-mono); text-transform: uppercase; letter-spacing: .08em; }
#hl-enquiry .hl-eq-title { margin: 0 0 6px; color: var(--hx-navy); font-size: 26px; font-weight: 850; letter-spacing: -.02em; }
#hl-enquiry .hl-eq-product-name { margin: 0 0 20px; color: var(--hx-text); font-size: 14px; font-weight: 600; }
#hl-enquiry .hl-eq-field { gap: 6px; margin-bottom: 14px; }
#hl-enquiry .hl-eq-field label { color: var(--hx-navy); font-size: 13px; font-weight: 700; }
#hl-enquiry .hl-eq-opt { color: var(--hx-muted); font-weight: 400; }
#hl-enquiry .hl-eq-req { color: #C62828; }
#hl-enquiry .hl-eq-field input,
#hl-enquiry .hl-eq-field textarea { padding: 13px 14px; border: 1px solid var(--hx-field); border-radius: 12px; color: var(--hx-navy); font: 400 16px/1.4 var(--hx-font); }
#hl-enquiry .hl-eq-field input::placeholder,
#hl-enquiry .hl-eq-field textarea::placeholder { color: var(--hx-muted); opacity: 1; }
#hl-enquiry .hl-eq-field input:focus,
#hl-enquiry .hl-eq-field textarea:focus { border-color: var(--hx-blue); box-shadow: 0 0 0 3px rgba(31, 79, 209, .15); }
#hl-enquiry .hl-eq-panel input.hl-eq-submit.wpcf7-submit,
#hl-enquiry .hl-eq-panel .wpcf7 input[type="submit"] { min-height: 52px !important; border-radius: 999px !important; background: var(--hx-blue) !important; font: 700 16px var(--hx-font) !important; }
#hl-enquiry .hl-eq-panel input.hl-eq-submit.wpcf7-submit:hover,
#hl-enquiry .hl-eq-panel .wpcf7 input[type="submit"]:hover { background: var(--hx-navy) !important; }
#hl-enquiry .wpcf7 .wpcf7-response-output { border-radius: 12px !important; }

/* ==========================================================================
   Why Us (page 33)
   ========================================================================== */
.hx-about { background: #fff; }
.hx-about__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(28px, 4.4vw, 56px);
	align-items: center;
	padding-block: clamp(36px, 5vw, 64px);
}
.hx-about__copy { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.hx-about .hx-lead { font-size: clamp(16px, 1.5vw, 18px); max-width: 520px; }
.hx-about__img.wp-block-image { margin: 0; }
.hx-about__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: clamp(16px, 1.9vw, 24px); }

.hx-reasons { background: var(--hx-soft); }
.hx-reasons > .hx-wrap,
.hx-serve > .hx-wrap { padding-block: clamp(48px, 6.2vw, 80px); }
.hx-reasons .hx-eyebrow,
.hx-serve .hx-eyebrow { margin-bottom: 12px !important; }
.hx-reasons .hx-h2,
.hx-serve .hx-h2 { margin-bottom: clamp(24px, 3vw, 36px) !important; }
.hx-reasons__grid,
.hx-serve__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.hx-reason { display: flex; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid var(--hx-line); border-radius: 20px; background: #fff; }
.hx-sec .hx-reason__num { font: 600 13px/1.2 var(--hx-mono); color: var(--hx-cyan); }
.hx-sec .hx-reason__name { margin: 0; color: var(--hx-navy); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.hx-sec .hx-reason__text,
.hx-sec .hx-who__text { color: var(--hx-text); font-size: 15px; line-height: 1.55; }

.hx-serve { background: #fff; }
.hx-who { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--hx-navy); }
.hx-sec .hx-who__name { margin: 0; color: var(--hx-navy); font-size: 26px; font-weight: 850; line-height: 1.15; letter-spacing: -.01em; }
.hx-sec .hx-who__link { margin-top: 4px; font-size: 15px; font-weight: 700; }
.hx-sec .hx-who__link a { color: var(--hx-blue); }
.hx-sec .hx-who__link a:hover,
.hx-sec .hx-who__link a:focus-visible { color: var(--hx-navy); }

.hx-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	margin-top: clamp(48px, 6.2vw, 80px) !important;
	overflow: hidden;
	border-radius: 24px;
}
.hx-duo__panel { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3.4vw, 44px); color: #fff; }
.hx-duo-net { background: var(--hx-blue); }
.hx-duo-shop { background: var(--hx-navy); }
.hx-sec .hx-duo__kicker { font: 600 12px/1.3 var(--hx-mono); text-transform: uppercase; letter-spacing: .04em; }
.hx-duo-net .hx-duo__kicker { color: #BFD2FF; }
.hx-duo-shop .hx-duo__kicker { color: var(--hx-cyan); }
.hx-sec .hx-duo__title { margin: 0; color: #fff; font-size: clamp(24px, 2.6vw, 32px); font-weight: 850; line-height: 1.15; letter-spacing: -.02em; }
.hx-sec .hx-duo__text { font-size: 15px; line-height: 1.55; }
.hx-duo-net .hx-duo__text { color: #DCE5FF; }
.hx-duo-shop .hx-duo__text { color: #C9D4F2; }
.hx-duo .hx-btn-row { margin-top: 6px; }
.hx-duo-shop .hx-btn-cyan .wp-block-button__link:hover,
.hx-duo-shop .hx-btn-cyan .wp-block-button__link:focus-visible { background: #fff; border-color: #fff; color: var(--hx-navy); }

/* ==========================================================================
   Contact (page 23) + Contact page form (CF7 418, inc/contact-form.php)
   ========================================================================== */
.hx-chead { background: #fff; }
.hx-chead__inner { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 40px); padding-block: clamp(36px, 5vw, 64px) clamp(36px, 4.4vw, 56px); }
.hx-chead__copy { display: flex; flex-direction: column; gap: 18px; }
.hx-chead .hx-lead { font-size: clamp(16px, 1.5vw, 18px); max-width: 560px; }

.hx-callcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.hx-callcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 20px; background: var(--hx-soft); color: var(--hx-navy); transition: background-color .15s; }
.hx-callcard:not(.hx-callcard-dark):hover { background: var(--hx-tint); }
.hx-sec .hx-callcard__k { font: 600 12px/1.3 var(--hx-mono); color: var(--hx-blue); text-transform: uppercase; }
.hx-sec .hx-callcard__v { font-size: clamp(22px, 2.2vw, 26px); font-weight: 850; line-height: 1.15; letter-spacing: -.01em; }
.hx-sec .hx-callcard__v a { color: inherit; }
.hx-sec .hx-callcard__v a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hx-sec .hx-callcard__v a:focus-visible { outline: none; }
.hx-callcard:has(a:focus-visible) { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
.hx-sec .hx-callcard__d { color: var(--hx-muted); font-size: 14px; line-height: 1.4; }
.hx-callcard-dark { background: var(--hx-navy); color: #fff; }
.hx-sec .hx-callcard-dark .hx-callcard__k { color: var(--hx-cyan); }
.hx-sec .hx-callcard-dark .hx-callcard__d { color: #C9D4F2; }

.hx-reach { background: var(--hx-soft); }
.hx-reach__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(24px, 3.4vw, 40px);
	align-items: start;
	padding-block: clamp(40px, 5vw, 64px);
}
.hx-form-card.hx-cform { padding: clamp(20px, 2.8vw, 36px); border-radius: 24px; }
.hx-sec .hx-cform__title { margin: 0 0 16px; color: var(--hx-navy); font-size: clamp(22px, 2.2vw, 28px); font-weight: 850; line-height: 1.2; letter-spacing: -.01em; }
.hx-cform textarea.wpcf7-form-control { height: 110px; }

/* Topic switch (segmented control built from the CF7 radio) */
.hx-cform .hx-cf-type { min-width: 0; margin: 0; padding: 0; border: 0; }
.hx-cform .hx-cf-label { float: left; width: 100%; margin: 0 0 10px; padding: 0; font: 600 12px/1.3 var(--hx-mono); color: var(--hx-muted); text-transform: uppercase; }
.hx-cform .hx-cf-type .wpcf7-form-control-wrap { clear: both; }
.hx-cform .hx-cf-type .wpcf7-form-control.wpcf7-radio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	padding: 5px;
	border: 0;
	border-radius: 14px;
	background: var(--hx-soft);
	box-shadow: none;
}
.hx-cform .hx-cf-type .wpcf7-list-item { display: block; margin: 0; }
.hx-cform .hx-cf-type label { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; padding: 11px 6px; border-radius: 10px; color: var(--hx-text); font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color .15s, color .15s; }
.hx-cform .hx-cf-type input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hx-cform .hx-cf-type label:hover { color: var(--hx-navy); }
.hx-cform .hx-cf-type label:has(input:checked) { background: #fff; color: var(--hx-blue); box-shadow: 0 2px 8px rgba(11, 27, 77, .1); }
.hx-cform .hx-cf-type label:has(input:focus-visible) { outline: 2px solid var(--hx-blue); outline-offset: 1px; }

/* Topic-specific fields: all show without :has support; with it, only the chosen topic's */
.hx-cform .hx-cf-group { display: grid; gap: 12px; }
@supports selector(:has(*)) {
	.hx-cform .hx-cf-group { display: none; }
	.hx-cform form:has(input[name="inquiry-type"][value="Internet service"]:checked) .hx-cf-net,
	.hx-cform form:has(input[name="inquiry-type"][value="Computers"]:checked) .hx-cf-shop,
	.hx-cform form:has(input[name="inquiry-type"][value="Tech support"]:checked) .hx-cf-tech { display: grid; }
}
.hx-sec .hx-cf-note { color: var(--hx-muted); font-size: 13px; line-height: 1.5; }
.hx-sec .hx-cf-note a { color: inherit; font-weight: 700; }

/* Map + office card */
.hx-reach__aside { display: flex; flex-direction: column; gap: 16px; }
.hx-reach__aside > .hx-map { margin: 0; }
.hx-map { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; background: var(--hx-line); }
.hx-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.hx-office { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; background: #fff; }
.hx-sec .hx-office__k { font: 600 12px/1.3 var(--hx-mono); color: var(--hx-blue); text-transform: uppercase; }
.hx-sec .hx-office__addr { color: var(--hx-navy); font-size: 18px; font-weight: 800; line-height: 1.4; }
.hx-sec .hx-office__link { margin-top: 6px; font-size: 15px; font-weight: 700; }
.hx-sec .hx-office__link a { color: var(--hx-blue); }
.hx-sec .hx-office__link a:hover,
.hx-sec .hx-office__link a:focus-visible { color: var(--hx-navy); }
.hx-cform .hx-cf-type label { box-sizing: border-box; }
/* Select chevron: must beat `.hx-form-card .wpcf7-form-control:not(.wpcf7-submit) { background: #fff }` (also fixes the homepage form) */
.hx-form-card select.wpcf7-form-control:not(.wpcf7-submit) { background: #fff var(--hx-icon-chevron) no-repeat right 14px center / 18px 18px; }

/* ==========================================================================
   Proof of Payment (page 423 /proof-of-payment/, CF7 422, inc/proof-of-billing.php)
   ========================================================================== */
.hx-pob-top, .hx-pob { background: #fff; }
.hx-pob-top__inner { display: flex; flex-direction: column; gap: 18px; padding-block: clamp(36px, 5vw, 64px) clamp(28px, 3vw, 40px); }
.hx-pob-top .hx-lead { font-size: clamp(16px, 1.5vw, 18px); max-width: 560px; }
.hx-pob__grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(20px, 3vw, 32px); padding-bottom: clamp(48px, 6vw, 80px); }
.hx-pob-card { flex: 1 1 520px; min-width: 0; padding: clamp(20px, 2.8vw, 36px); border: 1px solid var(--hx-line); border-radius: 24px; background: #fff; box-shadow: 0 12px 32px rgba(11, 27, 77, .06); scroll-margin-top: 140px; }
.hx-pob-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hx-pob-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 20px !important; }
.hx-sec .hx-pob-title { margin: 0; color: var(--hx-navy); font-size: clamp(22px, 2.2vw, 28px); font-weight: 850; line-height: 1.2; letter-spacing: -.01em; }
.hx-sec .hx-pob-req { font: 600 12px/1.3 var(--hx-mono); color: var(--hx-muted); text-transform: uppercase; }

/* Form */
.hx-pob-card .wpcf7 { margin: 0; }
.hx-pob-card .wpcf7-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.hx-pob-card .hidden-fields-container { display: contents; }
.hx-pob-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px 14px; }
.hx-pob-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hx-pob-wide { grid-column: 1 / -1; }
.hx-pob-label { color: var(--hx-navy); font-size: 15px; font-weight: 700; }
.hx-pob-card .hl-req { color: #C8323C; }
.hx-pob-card .wpcf7-form-control-wrap { position: relative; display: block; }
.hx-pob-card .wpcf7-text,
.hx-pob-card .wpcf7-textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid var(--hx-field);
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	color: var(--hx-navy);
	font: 500 16px/1.4 var(--hx-font);
	transition: border-color .15s, box-shadow .15s;
}
.hx-pob-card .wpcf7-textarea { height: auto; min-height: 100px; padding: 14px; line-height: 1.45; resize: vertical; }
.hx-pob-card .wpcf7-text::placeholder,
.hx-pob-card .wpcf7-textarea::placeholder { color: var(--hx-muted); font-weight: 400; opacity: 1; }
.hx-pob-card .wpcf7-text:focus,
.hx-pob-card .wpcf7-textarea:focus { outline: none; border-color: var(--hx-blue); box-shadow: 0 0 0 4px rgba(46, 155, 234, .18); }
.hx-pob-card .wpcf7-not-valid { border-color: #C8323C !important; }
.hx-pob-card .wpcf7-not-valid-tip { margin-top: 8px; color: #C8323C; font-size: 13px; font-weight: 600; }
.hx-pob-hint { color: var(--hx-muted); font-size: 13px; }
.hx-pob-field:has(.wpcf7-not-valid) .hx-pob-hint { display: none; }

/* Receipt dropzone */
.hx-dz { display: flex; flex-direction: column; gap: 8px; }
.hx-dz__zone { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: clamp(24px, 3vw, 36px) 20px; border: 1.5px dashed #BFCBE6; border-radius: 16px; background: #F7F9FD; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.hx-dz__zone:hover,
.hx-dz.is-drag .hx-dz__zone { border-color: var(--hx-blue); }
.hx-dz.is-drag .hx-dz__zone { background: #E6F3FD; }
.hx-dz.is-invalid .hx-dz__zone,
.hx-dz:has(.wpcf7-not-valid) .hx-dz__zone { border-color: #C8323C; }
.hx-dz:has(input[type="file"]:focus-visible) .hx-dz__zone,
.hx-dz:has(input[type="file"]:focus-visible) .hx-dz__file { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
.hx-dz__icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #E6F3FD; }
.hx-dz__icon::before { content: ""; width: 24px; height: 24px; background: var(--hx-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / contain no-repeat; }
.hx-dz__title { color: var(--hx-navy); font-size: 16px; font-weight: 750; }
.hx-dz__sub { margin-top: -8px; color: var(--hx-muted); font-size: 14px; }
.hx-dz__btn { padding: 10px 18px; border: 1.5px solid var(--hx-blue); border-radius: 999px; color: var(--hx-blue); font-size: 14px; font-weight: 700; }
.hx-dz__zone:hover .hx-dz__btn { background: var(--hx-blue); color: #fff; }
/* With JS the native file input is hidden (still focusable); without JS it shows under the zone */
.hx-pob-card.hx-js .hx-dz input[type="file"] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.hx-pob-card.hx-js .hx-dz.has-file .hx-dz__zone { display: none; }
.hx-dz__file { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1.5px solid var(--hx-field); border-radius: 16px; }
.hx-dz__file[hidden] { display: none; }
.hx-dz__thumb { flex: none; width: 72px; height: 72px; border-radius: 10px; background: var(--hx-soft) center / cover no-repeat; }
.hx-dz__meta { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.hx-dz__name { overflow: hidden; color: var(--hx-navy); font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.hx-dz__size { font: 500 12px var(--hx-mono); color: var(--hx-muted); }
.hx-dz__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.hx-dz__replace,
.hx-dz__remove { padding: 9px 14px; border: 0; border-radius: 999px; font: 700 14px/1.2 var(--hx-font); cursor: pointer; }
.hx-dz__replace { background: var(--hx-soft); color: var(--hx-navy); }
.hx-dz__replace:hover { background: #E6F3FD; }
.hx-dz__remove { background: transparent; color: #C8323C; }
.hx-dz__remove:hover, .hx-dz__remove:focus-visible { background: #FCEDEE; }
.hx-dz__remove:focus-visible { outline: 2px solid #C8323C; outline-offset: 2px; }
.hx-sec .hx-dz__err { color: #C8323C; font-size: 13px; font-weight: 600; }
.hx-dz__err[hidden] { display: none; }

/* Submit, spinner, messages (response sits above the button, like the design's summary) */
.hx-pob-card .wpcf7-response-output { order: 1; margin: 0 !important; padding: 12px 14px !important; border: 0 !important; border-radius: 12px; background: var(--hx-soft); color: var(--hx-navy); font-size: 14px; font-weight: 600; }
.hx-pob-card .wpcf7-form.invalid .wpcf7-response-output,
.hx-pob-card .wpcf7-form.unaccepted .wpcf7-response-output,
.hx-pob-card .wpcf7-form.failed .wpcf7-response-output,
.hx-pob-card .wpcf7-form.spam .wpcf7-response-output { background: #FCEDEE; color: #9E1F2A; }
.hx-pob-card .wpcf7-submit { order: 2; box-sizing: border-box; width: 100%; height: 54px; margin: 0; border: 0; border-radius: 999px; background: var(--hx-blue); color: #fff; font: 700 16px/1.2 var(--hx-font); cursor: pointer; transition: background-color .15s; }
.hx-pob-card .wpcf7-submit:hover, .hx-pob-card .wpcf7-submit:focus-visible { background: var(--hx-navy); }
.hx-pob-card .wpcf7-submit:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
.hx-pob-card .wpcf7-spinner { order: 3; position: relative; margin: -61px 16px 17px auto; }
.hx-sec .hx-pob-foot { order: 4; color: var(--hx-muted); font-size: 13px; line-height: 1.5; text-align: center; }

/* Sent: the panel replaces the form */
.hx-pob-done { display: none; }
.hx-pob-card.is-done > :not(.hx-pob-done) { display: none; }
.hx-pob-card.is-done .hx-pob-done { display: flex; flex-direction: column; gap: 22px; outline: none; }
.hx-pob-done__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--hx-blue); }
.hx-pob-done__icon::before { content: ""; width: 26px; height: 26px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.hx-pob-done__copy { display: flex; flex-direction: column; gap: 8px; }
.hx-sec .hx-pob-done__title { margin: 0; color: var(--hx-navy); font-size: clamp(24px, 2.4vw, 30px); font-weight: 850; line-height: 1.2; letter-spacing: -.01em; }
.hx-sec .hx-pob-done__text { max-width: 460px; color: var(--hx-text); font-size: 16px; line-height: 1.55; }
.hx-pob-sum { margin: 0; padding: 6px 18px; border-radius: 16px; background: var(--hx-soft); }
.hx-pob-sum > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hx-line); }
.hx-pob-sum > div:last-child { border-bottom: 0; }
.hx-pob-sum dt { flex-shrink: 0; padding-top: 3px; font: 600 12px var(--hx-mono); color: var(--hx-muted); text-transform: uppercase; }
.hx-pob-sum dd { min-width: 0; margin: 0; color: var(--hx-navy); font-size: 15px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.hx-pob-done__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-pob-again { padding: 14px 22px; border: 1.5px solid var(--hx-blue); border-radius: 999px; background: transparent; color: var(--hx-blue); font: 700 15px/1.2 var(--hx-font); cursor: pointer; }
.hx-pob-again:hover { background: var(--hx-blue); color: #fff; }
.hx-sec a.hx-pob-home { padding: 14px 22px; border: 1.5px solid var(--hx-blue); border-radius: 999px; background: var(--hx-blue); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2; }
.hx-sec a.hx-pob-home:hover { border-color: var(--hx-navy); background: var(--hx-navy); }

/* Aside */
.hx-pob-tips { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px; background: var(--hx-soft); }
.hx-sec .hx-pob-tips__k { font: 600 12px/1.3 var(--hx-mono); color: var(--hx-blue); text-transform: uppercase; }
.hx-sec .hx-pob-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: pob; }
.hx-sec .hx-pob-steps li { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--hx-navy); font-size: 15px; line-height: 1.5; counter-increment: pob; }
.hx-sec .hx-pob-steps li::before { content: counter(pob); display: grid; flex-shrink: 0; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E6F3FD; color: var(--hx-blue); font: 700 12px/1 var(--hx-mono); }
.hx-pob-aside .hx-callcard { padding: 24px; }

/* Proof of Payment Reference # on the "Received" panel (client, Oct 29) */
.hx-pob-ref { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--hx-sky-line); border-radius: 16px; background: var(--hx-sky); }
.hx-pob-ref[hidden] { display: none; }
.hx-pob-ref__label { font: 600 12px var(--hx-mono); color: var(--hx-navy); text-transform: uppercase; letter-spacing: .02em; }
.hx-pob-ref__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hx-pob-ref__code { min-width: 0; color: var(--hx-navy); font: 700 clamp(22px, 6vw, 28px)/1.1 var(--hx-mono); letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.hx-pob-ref__copy { flex: none; min-width: 84px; height: 44px; padding: 0 16px; border: 1px solid var(--hx-sky-line); border-radius: 999px; background: #fff; color: var(--hx-navy); font: 700 14px var(--hx-font); cursor: pointer; transition: border-color .15s, background-color .15s; }
.hx-pob-ref__copy:hover { border-color: var(--hx-blue); }
.hx-pob-ref__copy:focus-visible { outline: 2px solid var(--hx-blue); outline-offset: 2px; }
.hx-pob-ref__note { color: var(--hx-text); font-size: 14px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .hx-pob-ref__copy { transition: none; } }