/* =========================================================================
   NPA26 — New header design
   Loaded only on page ID 107546. Every selector is prefixed .npa26- and
   scoped under body.npa26-page so nothing here can reach the live header.
   ========================================================================= */

body.npa26-page {
	--npa26-blue: #0D5D9B;
	--npa26-blue-deep: #0A4A7C;
	--npa26-green: #8DC63F;
	--npa26-green-dark: #7CB233;
	--npa26-amber: #FFC84E;
	--npa26-ink: #333333;
	--npa26-ink-soft: #5A6672;
	--npa26-line: #E7ECF1;
	--npa26-submenu: #000000;
	--npa26-submenu-hover: #4169E1;
	--npa26-white: #FFFFFF;

	--npa26-bar-h: 116px;
	--npa26-banner-h: 30px;
	--npa26-max: 1400px;
	--npa26-mega-max: 944px;
	--npa26-font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* One duration + easing for every property that changes on shrink, so the
	   whole header reads as a single motion instead of several. */
	--npa26-shrink-dur: 0.34s;
	--npa26-shrink-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The old header is never rendered on this page (page-107546.php skips
   get_header()), but belt-and-braces in case a plugin injects it. */
body.npa26-page .site-header,
body.npa26-page .main-navigation--mobile,
body.npa26-page .main-navigation--mobile-overlay,
body.npa26-page .header-buttons {
	display: none !important;
}

body.npa26-page {
	padding-top: 0;
}

/* ---------- shared ---------- */

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

.npa26-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 10px 18px;
	background: #fff;
	color: #000;
	border-radius: 0 0 8px 0;
	font: 600 14px/1 var(--npa26-font);
}

.npa26-skip-link:focus {
	left: 0;
}

.npa26-icon {
	display: block;
	width: 100%;
	height: 100%;
}

.npa26-header *,
.npa26-mobile-cta *,
.npa26-drawer * {
	box-sizing: border-box;
}

/* =========================================================================
   HEADER SHELL
   ========================================================================= */

/* Fixed, not sticky: the theme sets `html body { overflow-x: hidden }`
   (style.css), which turns body into a scroll container and stops
   position:sticky from pinning. The live header uses position:fixed for the
   same reason. .npa26-header-spacer reserves the height in the flow. */
.npa26-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	font-family: var(--npa26-font);
}

.npa26-header-spacer {
	height: var(--npa26-header-h, 128px);
}

/* ---------- shrink on scroll ---------- */

/* Everything that changes between the tall and short states is transitioned on
   the same clock. Previously only the banner and utility row animated while the
   bar's min-height, the logo's max-height and the corner radius all snapped,
   which is what made the change feel abrupt. */
.npa26-banner,
.npa26-utility,
.npa26-bar,
.npa26-bar__inner,
.npa26-brand img {
	transition:
		height var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		min-height var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		max-height var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		max-width var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		padding var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		margin var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		opacity var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		border-radius var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		visibility 0s linear 0s;
}

.npa26-header.npa26-is-stuck .npa26-banner {
	height: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	/* Same clock as above; visibility flips only once the collapse has finished. */
	transition:
		height var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		min-height var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		margin var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		padding var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		opacity var(--npa26-shrink-dur) var(--npa26-shrink-ease),
		visibility 0s linear var(--npa26-shrink-dur);
}

.npa26-header.npa26-is-stuck .npa26-bar {
	border-radius: 0 0 24px 24px;
}

@media (min-width: 1112px) {

	.npa26-header.npa26-is-stuck .npa26-utility {
		height: 0;
		/* Flex items default to min-height:auto, which clamps height:0 back up to
		   the content height. Without this the row never actually collapses. */
		min-height: 0;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		transition:
			height var(--npa26-shrink-dur) var(--npa26-shrink-ease),
			min-height var(--npa26-shrink-dur) var(--npa26-shrink-ease),
			margin var(--npa26-shrink-dur) var(--npa26-shrink-ease),
			opacity var(--npa26-shrink-dur) var(--npa26-shrink-ease),
			visibility 0s linear var(--npa26-shrink-dur);
	}

	.npa26-header.npa26-is-stuck .npa26-bar__inner {
		min-height: 78px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.npa26-header.npa26-is-stuck .npa26-brand img {
		max-width: 129px;
		max-height: 86px;
	}
}

/* ---------- announcement banner ---------- */

.npa26-banner {
	background: var(--npa26-banner-bg, #C41E5A);
	color: var(--npa26-banner-color, #fff);
	text-align: center;
}

.npa26-banner__inner {
	max-width: var(--npa26-max);
	margin: 0 auto;
	padding: 6px 20px;
	font-size: 15px;
	line-height: 18px;
	font-weight: 500;
}

.npa26-banner__inner p {
	margin: 0;
}

.npa26-banner a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.npa26-banner a:hover {
	text-decoration-thickness: 2px;
}

/* ---------- blue bar ---------- */

.npa26-bar {
	position: relative;
	z-index: 3;
	background: var(--npa26-blue);
	border-radius: 0 0 40px 40px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.npa26-bar__inner {
	display: flex;
	align-items: stretch;
	gap: 26px;
	max-width: var(--npa26-max);
	min-height: var(--npa26-bar-h);
	margin: 0 auto;
	padding: 14px 20px;
}

/* ---------- logo ---------- */

.npa26-brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.npa26-brand img {
	display: block;
	width: auto;
	height: auto;
	/* Width-driven, matching the live header: 182px at rest, 129px once stuck.
	   max-height is only a safety cap so a replacement logo with an unusually
	   tall aspect ratio cannot blow out the bar. */
	max-width: 182px;
	max-height: 120px;
}

/* ---------- right-hand stack ---------- */

.npa26-bar__main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

/* ---------- utility row ---------- */

.npa26-utility {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
	height: 26px;
}

/* search */

.npa26-search {
	display: flex;
	align-items: center;
	gap: 10px;
}

.npa26-search__input {
	width: 92px;
	padding: 2px 0;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font: 400 14px/1.4 var(--npa26-font);
	text-align: right;
	outline: 0;
	transition: width 0.25s ease, border-color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* The theme styles input[type="search"] with a 1px #ccc border and 3px radius
   in sass/base/elements/_fields.scss. That selector is (0,1,1); the rules below
   are (0,2,1) so they win, reproducing the live header's borderless field. */
body.npa26-page .npa26-search__input {
	padding: 2px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	color: #FFF;
	outline: 0;
	text-align: right;
}

body.npa26-page .npa26-search__input::placeholder {
	color: #FFF;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

body.npa26-page .npa26-search__input:hover,
body.npa26-page .npa26-search__input:focus {
	border-bottom-color: rgba(255, 255, 255, 0.6);
}

body.npa26-page .npa26-search__input:hover::placeholder,
body.npa26-page .npa26-search__input:focus::placeholder {
	opacity: 0;
}

.npa26-search__input:hover,
.npa26-search__input:focus {
	width: 150px;
	border-bottom-color: rgba(255, 255, 255, 0.65);
}

.npa26-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.npa26-search__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.25s ease;
}

.npa26-search__submit:hover {
	opacity: 1;
}

/* language pill (fallback when GTranslate is inactive) */

.npa26-lang__button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 26px;
	padding: 0 10px 0 4px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: 600 12px/1 var(--npa26-font);
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.25s ease;
}

.npa26-lang__button:hover {
	background: rgba(255, 255, 255, 0.12);
}

.npa26-lang__flag {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient(#B22234 0 33%, #fff 33% 66%, #3C3B6E 66% 100%);
	border: 1px solid rgba(255, 255, 255, 0.9);
	flex: 0 0 auto;
}

.npa26-lang__button .npa26-icon--chevron {
	width: 10px;
	height: 7px;
}

/* The wrapper also carries the live header's .navbar__top__languages class, so
   the theme's global GTranslate rules style it exactly as they do on the live
   site. Nothing is redefined here on purpose — overriding would diverge. */

/* burger — desktop hides it */
.npa26-burger {
	display: none;
}

/* ---------- primary nav row ---------- */

/* justify-content: flex-end would make any overflow spill out the START edge,
   sliding the first nav item underneath the logo. Aligning to the start and
   pushing .npa26-actions over with margin-left:auto gives the same visual
   result while forcing any overflow to the right, where it can never collide
   with the logo. */
.npa26-nav-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 22px;
	min-width: 0;
}

/* Never let the nav compress below its own content — the CTAs give way first. */
.npa26-nav {
	flex: 0 0 auto;
}

.npa26-nav__list {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.npa26-nav__item {
	position: relative;
}

.npa26-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 0;
	color: #fff;
	font: 500 15px/1.2 var(--npa26-font);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.npa26-nav__link .npa26-icon--chevron {
	width: 11px;
	height: 7px;
	transition: transform 0.25s ease;
}

.npa26-nav__link:hover,
.npa26-nav__link:focus-visible,
.npa26-nav__item.is-active > .npa26-nav__link,
.npa26-nav__item.npa26-is-open > .npa26-nav__link {
	color: var(--npa26-amber);
}

.npa26-nav__item.npa26-is-open > .npa26-nav__link .npa26-icon--chevron {
	transform: rotate(180deg);
}

/* The theme sets `a:visited { color: #800080 }` at (0,1,1) in style.css, which
   beats a bare .npa26-* class (0,1,0) and turns visited header links purple.
   Every link colour is re-asserted here prefixed with body.npa26-page so it
   wins on specificity, with :visited stated explicitly. */
body.npa26-page .npa26-nav__link,
body.npa26-page .npa26-nav__link:visited {
	color: #FFFFFF;
}

body.npa26-page .npa26-nav__link:hover,
body.npa26-page .npa26-nav__link:focus,
body.npa26-page .npa26-nav__link:active,
body.npa26-page .npa26-nav__item.is-active > .npa26-nav__link,
body.npa26-page .npa26-nav__item.npa26-is-open > .npa26-nav__link {
	color: #FFC84E;
}

body.npa26-page .npa26-supermouth,
body.npa26-page .npa26-supermouth:visited {
	color: #FFFFFF;
}

body.npa26-page .npa26-supermouth:hover,
body.npa26-page .npa26-supermouth:active {
	color: #FFC84E;
}

body.npa26-page .npa26-call,
body.npa26-page .npa26-call:visited,
body.npa26-page .npa26-banner a,
body.npa26-page .npa26-banner a:visited,
body.npa26-page .npa26-drawer a,
body.npa26-page .npa26-drawer a:visited {
	color: inherit;
}

body.npa26-page .npa26-book,
body.npa26-page .npa26-book:visited {
	color: #1C1C1C;
}

body.npa26-page .npa26-mega__links a,
body.npa26-page .npa26-mega__links a:visited {
	color: var(--npa26-submenu);
	text-decoration: none;
}

/* Headings genuinely do inherit -- the h3 already carries the blue. */
body.npa26-page .npa26-mega__heading a,
body.npa26-page .npa26-mega__heading a:visited {
	color: inherit;
}

body.npa26-page .npa26-mega__links a:hover,
body.npa26-page .npa26-mega__links a:focus,
body.npa26-page .npa26-mega__links a:active {
	color: var(--npa26-submenu-hover);
	text-decoration: none;
}

/* ---------- right-hand CTAs ---------- */

.npa26-actions {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: 0 0 auto;
	margin-left: auto;
}

/* two-line call block */

.npa26-call {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-decoration: none;
	white-space: nowrap;
}

.npa26-call__label {
	color: rgba(255, 255, 255, 0.75);
	font: 600 11px/1 var(--npa26-font);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.npa26-call__number {
	color: #fff;
	font: 800 19px/1 var(--npa26-font);
	letter-spacing: 0.01em;
}

.npa26-call:hover .npa26-call__number {
	color: var(--npa26-amber);
}

/* Book Now pill */

.npa26-book {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 17px 9px 9px;
	border-radius: 999px;
	background: var(--npa26-green);
	color: #1C1C1C;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
	transition: background 0.25s ease, transform 0.25s ease;
}

.npa26-book:hover {
	background: var(--npa26-green-dark);
	color: #1C1C1C;
	transform: translateY(-1px);
}

.npa26-book__icon {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #fff;
	color: var(--npa26-ink);
}

.npa26-book__icon .npa26-icon--nex {
	width: 18px;
	height: 18px;
}

.npa26-book__mark {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: contain;
}

.npa26-book__strong {
	font: 700 15px/1 var(--npa26-font);
}

.npa26-book__light {
	font: 400 13px/1 var(--npa26-font);
}

/* divider + SuperMouth text link */

.npa26-actions__divider {
	width: 1px;
	height: 26px;
	background: rgba(255, 255, 255, 0.35);
}

.npa26-supermouth {
	color: #fff;
	font: 500 15px/1.2 var(--npa26-font);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.npa26-supermouth:hover {
	color: var(--npa26-amber);
}

/* =========================================================================
   MEGA MENU
   ========================================================================= */

/* z-index:auto on purpose: with a z-index the layer would create its own
   stacking context and trap the panels below .npa26-bar (z-index 3). Left auto,
   each panel competes with the bar directly, so the wide mega panel can sit
   behind it while a compact dropdown paints over it. */
.npa26-mega-layer {
	position: absolute;
	z-index: auto;
	top: calc(100% - 16px);
	left: 0;
	right: 0;
	pointer-events: none;
}

.npa26-mega {
	position: absolute;
	/* Above .npa26-bar (z-index 3), same as the compact dropdown. At z-index 2 it
	   sat behind the bar, so raising it only hid more of the panel instead of
	   moving it visibly up. */
	z-index: 5;
	top: 0;
	left: 50%;
	width: min(var(--npa26-mega-max), calc(100vw - 48px));
	padding: 26px 30px 26px;
	border: 1px solid var(--npa26-line);
	border-radius: 16px;
	background: #fff;
	/* Matches the theme's own dropdown shadow (sass/custom/layout/_navigation.scss).
	   Set on the shared .npa26-mega base so the mega panel and the compact
	   dropdown stay identical. */
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-8px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s linear;
}

.npa26-mega.npa26-is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0s linear;
}

/* grid-template-columns is set inline on each panel: the column count comes
   from the menu, and the image occupies a fixed 293px column only when one
   has been chosen for that item. */
.npa26-mega__grid {
	display: grid;
	gap: 0 40px;
	align-items: start;
}

.npa26-mega__media {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 293 / 180;
	background: #F1F4F7;
}

.npa26-mega__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.npa26-mega__heading {
	margin: 0 0 18px;
	color: var(--npa26-blue);
	font: 600 13px/1.3 var(--npa26-font);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.npa26-mega__heading a {
	color: inherit;
	text-decoration: none;
}

.npa26-mega__heading a:hover,
.npa26-mega__heading a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A parent with children but the mega checkbox off: one narrow dropdown of
   links rather than a full-width panel.

   Doubled class (0,2,0) so it always beats the .npa26-mega base rule (0,1,0)
   regardless of source order or how a minifier reorders the file. */
.npa26-mega.npa26-mega--compact {
	width: auto;
	min-width: 240px;
	max-width: 340px;
	padding: 20px 24px;

	/* Anchored under its own nav item rather than centred in the header: the
	   centring (left:50% + translateX(-50%)) that suits the wide mega panel puts
	   a narrow dropdown in the middle of the bar. JS sets both `left` and `top`
	   from the trigger's position; this cancels the centring transform.

	   z-index 5 puts it above .npa26-bar (3) so it overlaps up into the header
	   the way the live dropdown does, instead of starting below it. That overlap
	   also removes the dead gap that was closing the menu on the way to it. */
	z-index: 5;
	left: 0;
	top: 0;
	transform: translateX(0) translateY(-6px);
}

.npa26-mega.npa26-mega--compact.npa26-is-open {
	transform: translateX(0) translateY(0);
}

.npa26-mega.npa26-mega--compact .npa26-mega__grid {
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0;
}

.npa26-mega.npa26-mega--compact .npa26-mega__heading {
	display: none;
}

.npa26-mega.npa26-mega--compact .npa26-mega__links li + li {
	margin-top: 12px;
}

.npa26-mega__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.npa26-mega__links li + li {
	margin-top: 8px;
}

.npa26-mega__links a {
	display: inline-block;
	color: var(--npa26-submenu);
	font: 400 14.5px/1.35 var(--npa26-font);
	text-decoration: none;
	transition: color 0.2s ease;
}

.npa26-mega__links a:hover,
.npa26-mega__links a:focus-visible {
	color: var(--npa26-submenu-hover);
	text-decoration: none;
}

/* =========================================================================
   MOBILE CTA STACK  (hidden on desktop)
   ========================================================================= */

.npa26-mobile-cta {
	display: none;
}

.npa26-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 46px;
	padding: 0 18px;
	border: 2px solid transparent;
	border-radius: 999px;
	font: 700 16px/1 var(--npa26-font);
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.npa26-pill .npa26-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.npa26-pill--amber {
	background: var(--npa26-amber);
	border-color: var(--npa26-amber);
	color: #1C1C1C;
}

.npa26-pill--amber:hover {
	background: #F5B93A;
	border-color: #F5B93A;
	color: #1C1C1C;
}

.npa26-pill--outline {
	background: #fff;
	border-color: #1C1C1C;
	color: #1C1C1C;
}

.npa26-pill--outline:hover {
	background: #1C1C1C;
	border-color: #1C1C1C;
	color: #fff;
}

/* =========================================================================
   MOBILE DRAWER  (hidden on desktop)
   ========================================================================= */

.npa26-drawer {
	position: fixed;
	z-index: 1000;
	top: 0;
	bottom: 0;
	right: 0;
	width: min(340px, 90%);
	padding: 0 0 40px;
	background: var(--npa26-blue);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	font-family: var(--npa26-font);
}

.npa26-drawer[hidden] {
	display: block;
	visibility: hidden;
	pointer-events: none;
}

.npa26-drawer.npa26-is-open {
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
}

.npa26-drawer__head {
	display: flex;
	justify-content: flex-end;
	padding: 18px 18px 6px;
}

.npa26-drawer__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--npa26-blue);
	cursor: pointer;
}

.npa26-drawer__close .npa26-icon {
	width: 18px;
	height: 18px;
}

.npa26-drawer__list {
	margin: 0;
	padding: 8px 24px 24px;
	list-style: none;
}

.npa26-drawer__item + .npa26-drawer__item {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.npa26-drawer__toggle,
.npa26-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 16px 0;
	border: 0;
	background: transparent;
	color: #fff;
	font: 600 17px/1.3 var(--npa26-font);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.npa26-drawer__toggle .npa26-icon--chevron {
	width: 13px;
	height: 8px;
	flex: 0 0 auto;
	transition: transform 0.25s ease;
}

.npa26-drawer__toggle[aria-expanded="true"] .npa26-icon--chevron {
	transform: rotate(180deg);
}

.npa26-drawer__panel {
	padding: 2px 0 18px;
}

.npa26-drawer__panel[hidden] {
	display: none;
}

.npa26-drawer__heading {
	margin: 14px 0 10px;
	color: var(--npa26-amber);
	font: 600 12px/1.3 var(--npa26-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.npa26-drawer__panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.npa26-drawer__panel li + li {
	margin-top: 11px;
}

.npa26-drawer__panel a {
	color: rgba(255, 255, 255, 0.88);
	font: 400 15px/1.4 var(--npa26-font);
	text-decoration: none;
}

.npa26-drawer__panel a:hover {
	color: #fff;
	text-decoration: underline;
}

.npa26-drawer__foot {
	padding: 8px 24px 0;
}

.npa26-drawer__phone {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
}

.npa26-drawer-overlay {
	position: fixed;
	z-index: 999;
	inset: 0;
	background: rgba(10, 40, 70, 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.npa26-drawer-overlay[hidden] {
	display: block;
	visibility: hidden;
	pointer-events: none;
}

.npa26-drawer-overlay.npa26-is-open {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
}

body.npa26-drawer-open {
	overflow: hidden;
}

/* NPA Footer Credentials */

.npa-credentials {
    .npa-credentials-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        align-items: center;
        margin-top: 15px;
        .npa-credential-item {
            display: flex;
            align-items: center;
            img {
                max-width: 100%;
                height: auto;
                width: 100%;
                object-fit: contain;
                display: block;
            }
        }
        .npa-credential-item:nth-of-type(2) {
            justify-content: end;
            img {
                max-width: 60%;
            }
        }
        .npa-credential-item:nth-of-type(3) img {
            max-width: 60%;
        }
    }
}
@media only screen and (min-width: 1367px) {
	.npa-hero-s-dentist {
    	.npa-hero-wrap {
        	.npa-hero-right {
            	height: 120vh;
			}
		}
	}
}

/* =========================================================================
   BREAKPOINTS
   ========================================================================= */

/* SIZING TIERS
   The base rules above are the full-size scale, matching the live header. It
   needs ~1325px beside the logo and the 1400px container gives 1352px, so it
   fits from ~1400px up. Below that the row steps down instead of colliding
   with the logo — the same approach the live header takes. */

/* Breakpoints sit ~40px above the width where the row stops fitting. Media
   queries match the window width, but the container is ~15px narrower once a
   scrollbar is present, so a boundary set at the exact fitting width leaves
   almost no margin. */
@media (max-width: 1439px) {

	.npa26-nav__list {
		gap: 16px;
	}

	.npa26-nav__link {
		font-size: 14px;
		gap: 6px;
	}

	.npa26-nav-row {
		gap: 18px;
	}

	.npa26-actions {
		gap: 17px;
	}

	.npa26-call__number {
		font-size: 17px;
	}

	.npa26-book {
		padding: 9px 15px 9px 9px;
	}

	.npa26-book__strong {
		font-size: 14px;
	}

	.npa26-book__light {
		font-size: 12px;
	}

	.npa26-brand img {
		max-width: 164px;
		max-height: 110px;
	}
}

/* SuperMouth and its divider are the lowest-priority items: they drop out
   first rather than letting the row push into the logo. Both remain reachable
   from the mega menu and the mobile CTA row. */
@media (max-width: 1319px) {

	.npa26-actions__divider,
	.npa26-supermouth {
		display: none;
	}

	.npa26-nav__list {
		gap: 13px;
	}

	.npa26-nav__link {
		font-size: 13px;
		gap: 5px;
	}

	.npa26-nav-row {
		gap: 15px;
	}

	.npa26-actions {
		gap: 15px;
	}

	.npa26-call__label {
		font-size: 10px;
	}

	.npa26-call__number {
		font-size: 16px;
	}

	.npa26-book {
		padding: 8px 14px 8px 8px;
	}

	.npa26-brand img {
		max-width: 146px;
		max-height: 100px;
	}
}

/* ---------- MOBILE / TABLET ---------- */

@media (max-width: 1111px) {

	body.npa26-page {
		--npa26-bar-h: 92px;
	}

	.npa26-header-spacer {
		height: var(--npa26-header-h, 140px);
	}

	.npa26-bar {
		border-radius: 0 0 20px 20px;
	}

	.npa26-bar__inner {
		align-items: center;
		gap: 12px;
		padding: 0 14px;
	}

	.npa26-brand img {
		max-width: 96px;
		max-height: 74px;
	}

	.npa26-bar__main {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
	}

	.npa26-utility {
		flex: 1 1 auto;
		gap: 10px;
		height: auto;
	}

	.npa26-search {
		flex: 1 1 auto;
		justify-content: flex-end;
		gap: 10px;
	}

	.npa26-search__input {
		width: 100%;
		max-width: 120px;
		font-size: 15px;
	}

	/* The live header shows this underline permanently on mobile
	   (css/custom.css, max-width:1111px). Needs the same (0,2,1) specificity as
	   the borderless base rule above, or that would win and hide it. */
	body.npa26-page .npa26-search__input {
		border-bottom-color: rgba(255, 255, 255, 0.6);
	}

	.npa26-search__input:hover,
	.npa26-search__input:focus {
		width: 100%;
		max-width: 120px;
	}

	.npa26-search__submit {
		width: 40px;
		height: 40px;
		flex: 0 0 auto;
		border: 2px solid #fff;
		border-radius: 50%;
		opacity: 1;
	}

	.npa26-search__submit .npa26-icon {
		width: 18px;
		height: 18px;
	}

	/* language + desktop-only nav row drop out on mobile */
	.npa26-lang,
	.npa26-nav-row,
	.npa26-mega-layer {
		display: none;
	}

	.npa26-burger {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		flex: 0 0 auto;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #fff;
		color: var(--npa26-blue);
		cursor: pointer;
	}

	.npa26-burger .npa26-icon {
		width: 18px;
		height: 14px;
	}

	/* mobile CTA stack becomes visible */
	/* The header is position:fixed, so this row has to clear it or the buttons
	   sit behind the header and only appear once the page scrolls. The theme's
	   own templates each carry a hardcoded padding for this; the old
	   .header-buttons row used 135px/160px. --npa26-header-h is measured in JS
	   from the real header, so this stays correct when the banner wraps to two
	   lines or is switched off. The row itself stays in normal flow and scrolls
	   away with the page - only the header is sticky. */
	.npa26-mobile-cta {
		display: block;
		padding: calc(var(--npa26-header-h, 140px) + 12px) 10px 4px;
		background: #fff;
	}

	/* Where the spacer already reserves the height (the standalone demo page),
	   adding it again here would double the gap. */
	body.npa26-has-spacer .npa26-mobile-cta {
		padding-top: 12px;
	}

	.npa26-book--block {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 46px;
		padding: 0 16px;
		box-shadow: none;
	}

	.npa26-book--block:hover {
		transform: none;
	}

	.npa26-mobile-cta__row {
		display: flex;
		gap: 10px;
		margin-top: 10px;
	}

	.npa26-mobile-cta__row .npa26-pill {
		flex: 1 1 0;
	}
}
@media only screen and (max-width: 600px) {
    .npa-credentials {
        margin: 22px 0px;
        .npa-credentials-list {
            .npa-credential-item {
                justify-content: center;
                img {
                    max-width: 80px;
                }
            }
            .npa-credential-item:nth-of-type(2) { 
                justify-content: center;
                img {
                    max-width: 40px;
                }
            }
            .npa-credential-item:nth-of-type(3) img {
                max-width: 40px;
            }
        }
    }
}

@media (max-width: 400px) {

	.npa26-brand img {
		max-width: 92px;
	}

	.npa26-search__input {
		max-width: 88px;
	}

	.npa26-pill,
	.npa26-book--block {
		font-size: 15px;
	}

	.npa26-book__strong {
		font-size: 15px;
	}

	.npa26-book__light {
		font-size: 13px;
	}
}

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion: reduce) {

	.npa26-header *,
	.npa26-drawer,
	.npa26-drawer-overlay {
		transition-duration: 0.01ms !important;
	}
}

.npa26-header a:focus-visible,
.npa26-header button:focus-visible,
.npa26-drawer a:focus-visible,
.npa26-drawer button:focus-visible,
.npa26-mobile-cta a:focus-visible {
	outline: 2px solid var(--npa26-amber);
	outline-offset: 3px;
	border-radius: 4px;
}

.npa26-mega a:focus-visible {
	outline: 2px solid var(--npa26-blue);
	outline-offset: 3px;
	border-radius: 4px;
}