/*=========================
	SITE HEADER
=========================*/

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--color-n-white, #ffffff);
	border-bottom: 1px solid transparent;
	transition:
		background 0.25s cubic-bezier(0.4, 0, 0, 1),
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}
/* Push page content down so it doesn't sit beneath the fixed header */
body {
	padding-top: 111px;
}
@media (max-width: 767.98px) {
	body {
		padding-top: 64px;
	}
}
/* When logged in, the WP admin bar is fixed at top:0 — drop the fixed header
   below it so it isn't hidden underneath. (WP already offsets page content via
   its own html margin-top.) */
body.admin-bar .site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}
/* When megamenu is open, header + drawer share the same off-white bg */
.site-header.is-menu-open,
body.has-megamenu-open .site-header,
body.has-megamenu-open .site-header__megamenu {
	background: #f6f6f8;
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-3, 16px);
	max-width: none;
	width: 100%;
	margin: 0;
	padding-top: var(--space-2, 12px);
	padding-bottom: var(--space-2, 12px);
	padding-left: var(--container-px);
	padding-right: var(--container-px);
	min-height: 111px;
}

.site-header__col--left {
	justify-self: start;
}
.site-header__col--center {
	justify-self: center;
}
.site-header__col--right {
	justify-self: end;
}

/* ---------- Menu toggle (hamburger) ---------- */
.site-header__menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: transparent;
	border: 0;
	padding: 8px 0;
	cursor: pointer;
	color: var(--color-n-black, #282829);
	font: inherit;
}
.site-header__menu-toggle:focus-visible {
	outline: 2px solid var(--color-p, #ff6e33);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Live-site hamburger: 3 lines + 2 crosses, animated open/close */
.hamburger {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 21px; /* 3 lines × 3px + 2 gaps × 6px */
	margin-right: 1rem;
}
.hamburger__line {
	display: block;
	width: 100%;
	height: 3px;
	margin-top: 6px;
	margin-bottom: 0;
	background: currentColor;
	animation-fill-mode: forwards;
}
.hamburger__line:first-child {
	margin-top: 0;
}
.hamburger__line:last-of-type {
	margin-bottom: 0;
}
.hamburger__line3 {
	width: 50%;
	transition: width 0.3s cubic-bezier(0.4, 0, 0, 1);
}

.hamburger__cross {
	position: absolute;
	left: 0;
	top: 50%;
	width: 35px;
	height: 3px;
	background: currentColor;
	opacity: 0;
	transform: translateY(-50%);
	animation-fill-mode: forwards;
}

/* ---- Open state: run forward animations ---- */
.site-header.is-menu-open .hamburger__line1 {
	animation: hamburgerShuffleDown 0.5s forwards;
}
.site-header.is-menu-open .hamburger__line2 {
	animation: hamburgerOpacityOut 0.5s forwards;
}
.site-header.is-menu-open .hamburger__line3 {
	animation: hamburgerShuffleUp 0.5s forwards;
	width: 100%;
}
.site-header.is-menu-open .hamburger__cross1 {
	animation: hamburgerCrossLeft 0.5s forwards;
	animation-delay: 0.4s;
}
.site-header.is-menu-open .hamburger__cross2 {
	animation: hamburgerCrossRight 0.5s forwards;
	animation-delay: 0.4s;
}
.site-header.is-menu-open .hamburger__text-open {
	display: none;
}
.site-header.is-menu-open .hamburger__text-close {
	display: inline;
}

/* ---- Close state defaults ---- */
.hamburger__text-open {
	display: inline;
}
.hamburger__text-close {
	display: none;
}

/* ---- Keyframes (mirror live header.css) ---- */
@keyframes hamburgerShuffleDown {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	99.9% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(0.9rem);
	}
}
@keyframes hamburgerShuffleUp {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	99.9% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-0.9rem);
	}
}
@keyframes hamburgerOpacityOut {
	0% {
		opacity: 1;
	}
	99.9% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes hamburgerCrossLeft {
	0% {
		opacity: 0;
		transform: translateY(-50%) rotate(0deg);
	}
	0.1% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(-50%) rotate(45deg);
	}
}
@keyframes hamburgerCrossRight {
	0% {
		opacity: 0;
		transform: translateY(-50%) rotate(0deg);
	}
	0.1% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(-50%) rotate(-45deg);
	}
}
@keyframes hamburgerShuffleDownReverse {
	0% {
		opacity: 0;
		transform: translateY(0.9rem);
	}
	0.1% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes hamburgerShuffleUpReverse {
	0% {
		opacity: 0;
		transform: translateY(-0.9rem);
	}
	0.1% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes hamburgerOpacityIn {
	0% {
		opacity: 0;
	}
	99.9% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes hamburgerCrossLeftReverse {
	0% {
		opacity: 1;
		transform: translateY(-50%) rotate(45deg);
	}
	99.9% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-50%) rotate(0deg);
	}
}
@keyframes hamburgerCrossRightReverse {
	0% {
		opacity: 1;
		transform: translateY(-50%) rotate(-45deg);
	}
	99.9% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-50%) rotate(0deg);
	}
}

.site-header__menu-text {
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--color-n-black, #282829);
}
.site-header__menu-text .is-open-text {
	display: inline;
}
.site-header__menu-text .is-close-text {
	display: none;
}
.site-header.is-menu-open .site-header__menu-text .is-open-text {
	display: none;
}
.site-header.is-menu-open .site-header__menu-text .is-close-text {
	display: inline;
}

/* ---------- Center logo ---------- */
.site-header__logo {
	display: inline-flex;
	align-items: center;
	color: var(--color-n-black, #282829);
}
.site-header__logo img {
	display: block;
	width: 255px;
	height: auto;
}
/* Stacked logo for mobile only — hidden by default, swapped in below 768px.
   Selector includes .site-header__logo to outrank the generic
   .site-header__logo img height override at max-width:768px. */
.site-header__logo .site-header__logo-img--stacked {
	display: none;
}
/* Animated (Lottie) braille logo — desktop only, same as live (255x60).
   Hidden until the animation mounts; static horizontal SVG is the fallback. */
.site-header__logo .site-header__animated-logo {
	display: none;
	width: 255px;
	height: 60px;
}
.site-header__logo .site-header__animated-logo svg {
	display: block;
	width: 100%;
	height: 100%;
}
.site-header__logo.has-lottie .site-header__animated-logo {
	display: block;
}
.site-header__logo.has-lottie .site-header__logo-img--horizontal {
	display: none;
}
@media (max-width: 767.98px) {
	.site-header__logo .site-header__logo-img--horizontal {
		display: none;
	}
	/* Mobile shows the static stacked logo, never the animated one (live parity) */
	.site-header__logo .site-header__animated-logo,
	.site-header__logo.has-lottie .site-header__animated-logo {
		display: none;
	}
	.site-header__logo .site-header__logo-img--stacked {
		display: block;
		height: 60px;
		width: auto;
	}
	/* Hide the arrow on the donate button at mobile */
	.site-header__donate .c-btn__icon {
		display: none !important;
	}
	/* Hide the "Menu"/"Close" word on the hamburger toggle at mobile */
	.site-header__menu-text {
		display: none !important;
	}
}

/* ---------- Donate button ---------- */
/* =========================================================
   Button system (mirrors live site: c-btn / c-btn--primary /
   c-btn--icon-right / c-btn--hover-sweep-out)
========================================================= */

.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: var(--color-n-black, #282829);
	padding: 1em 1.8em;
	border-radius: 100px;
	position: relative;
	overflow: hidden;
	vertical-align: top;
	transition:
		all 0.3s cubic-bezier(0.4, 0, 0, 1),
		background 0s cubic-bezier(0.4, 0, 0, 1) 0.3s;
}

/* All buttons are 66px tall, except those in the site header. */
.c-btn {
	/* height: 66px;  */
	box-sizing: border-box;
}
.site-header .c-btn {
	height: auto;
}

/* Primary + Secondary share the same variable system.
   Primary  : filled at rest, recedes on hover (use with c-btn--hover-sweep-out).
   Secondary: transparent at rest, fills in on hover (use with c-btn--hover-sweep-in). */
.c-btn--primary,
.c-btn--secondary {
	--c-btn-color: var(--color-p, #ff6e33); /* fill (the sweep) */
	--c-btn-ring: var(--c-btn-color); /* border ring */
	--c-btn-text: var(--color-n-black, #282829); /* text at rest */
	--c-btn-text-hover: var(--color-n-black, #282829); /* text when fill recedes */
	--c-btn-bg-hover: var(--color-n-white, #fff); /* color revealed on hover */

	color: var(--c-btn-text);
	border: 2px solid var(--c-btn-ring);
	box-shadow: none;
}
.c-btn--primary {
	/* Rest bg matches the sweep color so any sub-pixel bleed at the rounded
	   corners is invisible. On hover the bg transitions to the reveal color
	   in sync with the ::before sweep receding. background-clip stays as the
	   default (border-box) so the bg paints under the border with no
	   anti-aliased boundary between them. */
	background-color: var(--c-btn-color);
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0, 1);
}
.c-btn--primary:hover:not([disabled]),
.c-btn--primary:focus-visible:not([disabled]) {
	background-color: var(--c-btn-bg-hover);
}
.c-btn--secondary {
	/* Outline default — transparent so the underlying section shows through. */
	background: transparent;
}

/* Black fill → white text at rest */
.c-btn--primary[style*="--color-n-black"],
.c-btn--secondary[style*="--color-n-black"] {
	--c-btn-text: var(--color-n-white, #fff);
	--c-btn-ring: var(--color-n-black, #282829);
}
/* Secondary (outline) black: transparent at rest, so the text must be BLACK,
   turning white once the black fill sweeps in on hover. Keep the hover
   background TRANSPARENT (not white) so only the black ::before slides in —
   no white flash behind it, and the slide stays visible. */
.c-btn--secondary[style*="--color-n-black"] {
	--c-btn-text: var(--color-n-black, #282829);
	--c-btn-text-hover: var(--color-n-white, #fff);
	--c-btn-bg-hover: transparent;
}

/* White: black border ring on both variants. */
.c-btn--primary[style*="--color-n-white"],
.c-btn--secondary[style*="--color-n-white"] {
	--c-btn-ring: var(--color-n-black, #282829);
}
/* Primary white (filled white) inverts to black-on-white-text on hover. */
.c-btn--primary[style*="--color-n-white"] {
	--c-btn-bg-hover: var(--color-n-black, #282829);
	--c-btn-text-hover: var(--color-n-white, #fff);
}
/* Secondary (outline) white: BLACK fill slides in with WHITE text. */
.c-btn--secondary[style*="--color-n-white"] {
	--c-btn-text-hover: var(--color-n-white, #fff);
	--c-btn-bg-hover: transparent;
}
.c-btn--secondary[style*="--color-n-white"][class*="c-btn--hover-sweep"]::before {
	background: var(--color-n-black, #282829);
}
/* Secondary (outline) orange/primary: the orange fill slides in with black text.
   Transparent hover bg so only the orange ::before slides (no white flash).
   The "--color-p)" match (with the closing paren) avoids matching --color-peach. */
.c-btn--secondary[style*="--color-p)"] {
	--c-btn-text-hover: var(--color-n-black, #282829);
	--c-btn-bg-hover: transparent;
}

.c-btn--primary:focus-visible:not(:active, [disabled]),
.c-btn--secondary:focus-visible:not(:active, [disabled]) {
	outline: 2px solid var(--c-btn-ring);
	outline-offset: 2px;
	text-decoration: underline;
}
.c-btn--primary:focus:not(:focus-visible),
.c-btn--secondary:focus:not(:focus-visible) {
	outline: none;
	text-decoration: none;
}

/* Hover-sweep — colored ::before sweeps out left→right on hover.
   Extends -2px in all directions to cover the button's 2px border so the
   underlying background doesn't show through at the rounded corners. */
.c-btn[class*="c-btn--hover-sweep"]::before {
	content: "";
	position: absolute;
	top: -2px;
	bottom: -2px;
	z-index: 0;
	transition: width 0.3s cubic-bezier(0.4, 0, 0, 1);
}
.c-btn--primary[class*="c-btn--hover-sweep"]::before,
.c-btn--secondary[class*="c-btn--hover-sweep"]::before {
	background: var(--c-btn-color);
}
.c-btn--hover-sweep-out::before {
	right: -2px;
	width: calc(100% + 4px);
}
.c-btn--hover-sweep-out:hover:not([disabled])::before,
.c-btn--hover-sweep-out:focus:not([disabled])::before {
	width: 0;
}

/* The hover-out variant inverse exists too (right→left fill) */
.c-btn--hover-sweep-in::before {
	left: -2px;
	width: 0;
}
.c-btn--hover-sweep-in:hover:not([disabled])::before,
.c-btn--hover-sweep-in:focus:not([disabled])::before {
	width: calc(100% + 4px);
}

/* Label + icon sit above the ::before */
.c-btn__label,
.c-btn__icon {
	position: relative;
	z-index: 1;
}
/* Match label height to icon height so buttons with and without arrows are the same height */
.c-btn__label {
	display: inline-flex;
	align-items: center;
	min-height: 1.9rem;
}

/* Size modifier */
.c-btn--sm {
	padding: 1em 1.8em;
}

/* Icon-right: icon on the right, slides 8px on hover */
.c-btn--icon-right .c-btn__icon {
	margin-left: 0.8em;
	margin-right: 1rem;
	order: 2;
	display: inline-flex;
	align-items: center;
}
.c-btn__icon svg {
	width: 1.9rem;
	height: 1.9rem;
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0, 1),
		color 0s cubic-bezier(0.4, 0, 0, 1);
}
.c-btn--icon-right:hover:not([disabled]) .c-btn__icon svg,
.c-btn--icon-right:focus:not([disabled]) .c-btn__icon svg {
	transform: translateX(8px);
}

/* On hover/focus the fill state flips */
.c-btn--primary:hover:not([disabled]),
.c-btn--primary:focus:not([disabled]),
.c-btn--secondary:hover:not([disabled]),
.c-btn--secondary:focus:not([disabled]) {
	background: var(--c-btn-bg-hover);
	color: var(--c-btn-text-hover);
	transition:
		all 0.3s cubic-bezier(0.4, 0, 0, 1),
		background 0s cubic-bezier(0.4, 0, 0, 1);
}

/* Site-header donate kept as a positioning hook, no longer a full button skin */
.site-header__donate {
	/* purely a scoping class — the visuals come from .c-btn--primary etc. */
	padding: 0.65em 1.6em;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199.98px) {
	.site-header__inner {
		/* Keep the header at 111px total (live is ~110px at tablet widths too);
		   var(--space-5) here made it 140px, pushing content under the fixed
		   header and hiding breadcrumbs (body padding-top is 111px). */
		padding-top: var(--space-2) !important;
		padding-bottom: var(--space-2) !important;
	}
}
@media only screen and (max-width: 767.98px) {
	.site-header__inner {
		min-height: 64px;
		padding-top: 20px !important;
		padding-bottom: 10px !important;
	}
	.site-header__logo img {
		height: 28px;
	}
	.site-header__menu-text {
		display: none; /* icon-only on mobile */
	}
}

/* =========================================================
   MEGAMENU drawer (mirrors live navigation-header)
========================================================= */

.site-header__megamenu {
	position: fixed;
	top: 111px; /* matches .site-header__inner min-height */
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(100vh - 111px);
	background: #f6f6f8;
	color: var(--color-n-black, #282829);
	z-index: 90;
	overflow-x: hidden;
	overflow-y: hidden;
	display: block !important; /* override [hidden]'s display:none so transition can run */
	transform: translateY(-100%);
	pointer-events: none;
	will-change: transform;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0, 1);
}
body.has-megamenu-open .site-header__megamenu {
	transform: translateY(0);
	pointer-events: auto;
}
/* Mobile: header collapses to 64px, so the megamenu must start there too
   (otherwise body shows through the gap). */
@media (max-width: 767.98px) {
	.site-header__megamenu {
		top: 64px;
		height: calc(100vh - 64px);
	}
}
body.has-megamenu-open {
	overflow: hidden;
}

.site-header__megamenu-inner {
	max-width: 100%;
	width: 100%;
	margin: 0 auto 0;
	padding-top: var(--space-5);
	padding-bottom: 0;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
	min-height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	/* Contents fade in once the white background has finished sliding down */
	opacity: 0;
	transition: opacity 0.25s ease-out;
}
body.has-megamenu-open .site-header__megamenu .site-header__megamenu-inner {
	opacity: 1;
	transition: opacity 0.3s ease-out 0.35s;
}
/* push the bottom row to the floor of the viewport */
.site-header__megamenu-cols {
	flex: 1 1 auto;
}
.site-header__megamenu-bottom {
	margin-top: auto;
}

/* ---- Top row: horizontal nav + a11y controls ---- */
.site-header__megamenu-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid #e9e9e7;
}

.nav-horizontal__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
	align-items: center;
}
.nav-horizontal__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}
/* Pipe divider between items (matches footer-bottom style — fixed-height white-ish bar) */
.nav-horizontal__item:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1.8rem;
	background: var(--color-n-black, #282829);
	opacity: 0.35;
	margin: 0 1.6rem;
	user-select: none;
	pointer-events: none;
}
.nav-horizontal__link {
	color: #282829;
	font-size: 15px;
	line-height: 1.3em;
	font-weight: 100;
	text-decoration: none;
}
.nav-horizontal__link.is-cta {
	background: var(--color-p, #ff6e33);
	border-radius: 999px;
	padding: 0.6em 1.4em;
	font-weight: 700;
}

/* ── Accessibility controls — styling copied 1:1 from live core.css ──
   .accessibility-controls{align-items:center;display:inline-flex;font-size:1rem;margin:0}
   button{background:none;border:none;font-size:1rem;vertical-align:middle}
   button i{height:2rem} ; hover/focus → #ff6e33 ; disabled → #69696a
   li ≥48em: margin/padding-right 16px + 1px × 1.6rem black divider */
.accessibility-controls {
	align-items: center;
	display: inline-flex;
	font-size: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.accessibility-controls li {
	position: relative;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 0 16px 0 0;
	padding: 0 16px 0 0;
	text-align: center;
}
.accessibility-controls li::before {
	content: none;
}
.accessibility-controls li::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 1.6rem;
	background: #000;
}
.accessibility-controls li:last-child {
	margin-right: 0;
	padding-right: 0;
}
.accessibility-controls li:last-child::after {
	content: none;
}

.accessibility-controls__btn,
.accessibility-controls button {
	background: none;
	border: none;
	padding: 0;
	font-size: 1rem;
	vertical-align: middle;
	color: var(--color-n-black, #282829);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s cubic-bezier(0.4, 0, 0, 1);
}
.accessibility-controls .c-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	flex-shrink: 0;
	overflow: visible;
}
.accessibility-controls button i,
.accessibility-controls .c-icon {
	height: 2rem;
}
.accessibility-controls .c-icon svg {
	height: 2rem;
	width: auto;
	max-width: none;
	flex-shrink: 0;
	display: block;
}
/* contrast icon is square — be explicit so the right edge isn't clipped */
.accessibility-controls__contrast .c-icon,
.accessibility-controls__contrast i {
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
}
.accessibility-controls__contrast .c-icon svg {
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
}
/* Live: color flips to orange on BOTH hover and focus */
.accessibility-controls__btn:hover,
.accessibility-controls__btn:focus,
.accessibility-controls button:hover,
.accessibility-controls button:focus {
	color: var(--color-p, #ff6e33);
	outline: 0;
}
/* Live global :focus-visible ring (header.css externals) scoped to these buttons */
.accessibility-controls button:focus-visible {
	outline: 3px solid #282829;
	outline-offset: 2px;
}
/* Live: disabled stays grey even on hover/focus */
.accessibility-controls__btn[disabled],
.accessibility-controls__btn.disabled,
.accessibility-controls button.disabled,
.accessibility-controls button[disabled],
.accessibility-controls button.disabled:hover,
.accessibility-controls button.disabled:focus,
.accessibility-controls button[disabled]:hover,
.accessibility-controls button[disabled]:focus {
	color: #69696a;
	cursor: not-allowed;
}
/* On dark backgrounds, divider flips to white (live) — note: high-contrast
   mode does NOT flip it; the megamenu stays light */
.bg-color--black .accessibility-controls li::after,
.bg-color--charcoal .accessibility-controls li::after {
	background: #fff;
}

/* Visually-hidden helper for the button label spans (live .u-visuallyhidden) */
.u-visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* ---- 4-column vertical menus ---- */
.site-header__megamenu-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3.2rem;
}
/* Tablet (768-1200px): 2-col megamenu grid and the nav + accessibility
   row stacks vertically below the logo */
@media (max-width: 1199.98px) {
	.site-header__megamenu-cols {
		grid-template-columns: repeat(2, 1fr);
		row-gap: var(--space-6);
	}
}
@media (max-width: 479.98px) {
	.site-header__megamenu-cols {
		grid-template-columns: 1fr;
	}
}

.nav-vertical {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}
.nav-vertical__link-main {
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 2rem;
	margin: 0 0 2.5rem;
	color: var(--color-n-black, #282829);
	position: relative;
	padding-bottom: 3.5rem;
	text-decoration: none;
	cursor: pointer;
}
/* Chevron toggle button only visible at mobile */
.nav-vertical__toggle {
	display: none;
}
.nav-vertical__chevron {
	display: none;
}

/* Fixed-width colored bar at rest → expands to 100% on hover (mirrors live c-link-highlight) */
.c-link-highlight__elem {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 35%;
	height: 4px;
	background: var(--col-accent, var(--color-p));
	transition: width 0.35s cubic-bezier(0.4, 0, 0, 1);
}
.nav-vertical-wrap:hover .c-link-highlight__elem,
.nav-vertical__link-main:hover .c-link-highlight__elem,
.nav-vertical__link-main:focus-visible .c-link-highlight__elem,
.nav-vertical__link-main.is-active .c-link-highlight__elem,
.nav-vertical__link-main[aria-current="page"] .c-link-highlight__elem {
	width: 80%;
}
.nav-vertical__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.nav-vertical__link {
	color: var(--color-n-black, #282829);
	font-size: 17px;
	line-height: 1.3em;
	text-decoration: none;
	transition: color 0.2s cubic-bezier(0.4, 0, 0, 1);
}

/* Header sub-links: text stays black on hover/focus — only the underline
   sweeps in (no colour change). */
.nav-vertical__link:hover,
.nav-vertical__link:focus-visible {
	color: var(--color-n-black, #282829);
}

/* Main column link: text stays black on hover/focus — only the underline
   slides out to 100% (see .c-link-highlight__elem above). */
.nav-vertical-wrap:hover .nav-vertical__link-main,
.nav-vertical__link-main:hover,
.nav-vertical__link-main:focus-visible {
	color: var(--color-n-black, #282829);
}

/* border-bot-sweep — thin BLACK underline that slides IN from the left on hover
   and OUT to the right on mouse-out. Only background-size transitions; the
   background-position flips instantly between right (rest) and left (hover),
   which is what gives the in-from-left / out-to-right direction. The link text
   colour never changes. */
.nav-horizontal__link.border-bot-sweep .border-bot-sweep__elem,
.nav-vertical__link.border-bot-sweep .border-bot-sweep__elem,
.nav-vertical__link-main.border-bot-sweep .border-bot-sweep__elem {
	display: inline;
	background-image: linear-gradient(var(--color-n-black, #282829), var(--color-n-black, #282829));
	background-repeat: no-repeat;
	background-position: 100% 100%; /* rest: anchored right */
	background-size: 0% 1px;
	transition: background-size 0.35s cubic-bezier(0.4, 0, 0, 1);
	padding-bottom: 2px;
}
.nav-horizontal__link.border-bot-sweep:hover .border-bot-sweep__elem,
.nav-horizontal__link.border-bot-sweep:focus-visible .border-bot-sweep__elem,
.nav-vertical__link.border-bot-sweep:hover .border-bot-sweep__elem,
.nav-vertical__link.border-bot-sweep:focus-visible .border-bot-sweep__elem {
	background-position: 0% 100%; /* hover: anchored left, grows rightward */
	background-size: 100% 1px;
}

/* =========================================================
   ACCESSIBILITY — text size scaling
========================================================= */
html.is-text-sm {
	font-size: 56.25%;
} /* default skelly is 62.5%, this drops ~10% */
html.is-text-lg {
	font-size: 68.75%;
}
html.is-text-xl {
	font-size: 75%;
}

/* =========================================================
   ACCESSIBILITY — high-contrast mode
   Copied 1:1 from live (core.css + header.css externals).
   Live behaviour: the page keeps its light background; all
   ORANGE (#ff6e33) and colour accents switch to BLACK. No
   yellow/inverted theme. `high-contrast` class sits on <html>.
========================================================= */

/* Skip link (live core.css) — inert until a skip link exists locally */
.high-contrast .u-skip-link__link {
	background-color: #fff;
	border-color: #282829;
	color: #282829;
}

/* Tertiary/text-button underline: orange normally, charcoal in high contrast (live) */
html:not(.high-contrast) .c-btn--tertiary.border-bot-sweep .border-bot-sweep__elem {
	background-image: linear-gradient(transparent calc(100% - 0.08em), #ff6e33 0.08em);
}
.high-contrast .c-btn--tertiary.border-bot-sweep .border-bot-sweep__elem {
	background-image: linear-gradient(transparent calc(100% - 0.08em), #282829 0.08em);
}

/* Megamenu column highlight bar → black (live: .c-link-highlight__elem border-color:#000)
   — local bar is painted with background instead of border-top */
.high-contrast .c-link-highlight__elem {
	background: #000 !important;
	border-color: #000 !important;
}

/* Primary buttons → solid black, white text; hover: black recedes, black text
   on the underlying background (live: background:#000; ring #000; color:#fff;
   hover background:none color:#000). Mapped onto the local --c-btn-* variable
   system so the sweep animation behaves identically. !important so the vars
   beat the [style*=…] colour-variant selectors and inline styles. */
html.high-contrast .c-btn--primary {
	--c-btn-color: #000 !important;
	--c-btn-ring: #000 !important;
	--c-btn-text: #fff !important;
	--c-btn-text-hover: #000 !important;
	--c-btn-bg-hover: transparent !important;
}
/* Secondary (outline) buttons → black ring, black text; hover: black fill
   sweeps in with white text (live .high-contrast .c-btn--secondary) */
html.high-contrast .c-btn--secondary {
	--c-btn-color: #000 !important;
	--c-btn-ring: #000 !important;
	--c-btn-text: #000 !important;
	--c-btn-text-hover: #fff !important;
	--c-btn-bg-hover: transparent !important;
}

/* Form buttons (Gravity Forms / legacy) — live selector list, verbatim */
.high-contrast .gform_footer .button,
.high-contrast .gform_page_footer .button,
.high-contrast .contact-form .actions .primaryAction,
.high-contrast .contact-form .btn-primary,
.high-contrast .contact-form .wfPageNextButton,
.high-contrast .contact-form .wfPagePreviousButton {
	background: #000;
	box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000;
	color: #fff;
}
.high-contrast .gform_footer .button:hover:not([disabled]),
.high-contrast .gform_footer .button:focus:not([disabled]),
.high-contrast .gform_page_footer .button:hover:not([disabled]),
.high-contrast .gform_page_footer .button:focus:not([disabled]) {
	background: none;
	color: #000;
}
.high-contrast .gform_footer .button:focus:not(:active, [disabled]),
.high-contrast .gform_page_footer .button:focus:not(:active, [disabled]) {
	box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000;
}

/* Circle buttons — every colour variant goes black w/ white icon; inside a
   charcoal section they invert to white w/ black icon (live, verbatim) */
html.high-contrast .c-btn-circle--black,
html.high-contrast .c-btn-circle--charcoal,
html.high-contrast .c-btn-circle--orange,
html.high-contrast .c-btn-circle--green,
html.high-contrast .c-btn-circle--blue-light,
html.high-contrast .c-btn-circle--blue-mid,
html.high-contrast .c-btn-circle--blue-dark,
html.high-contrast .c-btn-circle--pink,
html.high-contrast .c-btn-circle--peach,
html.high-contrast .c-btn-circle--grey-light,
html.high-contrast .c-btn-circle--grey,
html.high-contrast .c-btn-circle--grey-dark,
html.high-contrast .c-btn-circle--white,
html.high-contrast .c-btn-circle--apricot,
html.high-contrast .c-btn-circle--light-peach {
	background: #000;
	border-color: #000;
	color: #fff;
}
html.high-contrast .bg-color--charcoal .c-btn-circle--black,
html.high-contrast .bg-color--charcoal .c-btn-circle--charcoal,
html.high-contrast .bg-color--charcoal .c-btn-circle--orange,
html.high-contrast .bg-color--charcoal .c-btn-circle--green,
html.high-contrast .bg-color--charcoal .c-btn-circle--blue-light,
html.high-contrast .bg-color--charcoal .c-btn-circle--blue-mid,
html.high-contrast .bg-color--charcoal .c-btn-circle--blue-dark,
html.high-contrast .bg-color--charcoal .c-btn-circle--pink,
html.high-contrast .bg-color--charcoal .c-btn-circle--peach,
html.high-contrast .bg-color--charcoal .c-btn-circle--grey-light,
html.high-contrast .bg-color--charcoal .c-btn-circle--grey,
html.high-contrast .bg-color--charcoal .c-btn-circle--grey-dark,
html.high-contrast .bg-color--charcoal .c-btn-circle--white,
html.high-contrast .bg-color--charcoal .c-btn-circle--apricot,
html.high-contrast .bg-color--charcoal .c-btn-circle--light-peach {
	background: #fff;
	border-color: #000;
	color: #000;
}

/* Card accent strip → black (live) */
.high-contrast .c-card__highlight {
	background: #000 !important;
}

/* ── Coloured SECTION BACKGROUNDS → light grey #f1f1f3 (live helpers.css) ──
   Live rule: html.high-contrast .bg-color--X:not(--charcoal/--black/--white)
   {background-color:#f1f1f3} for every palette colour — i.e. every coloured
   section goes light grey, but WHITE sections and DARK (black/charcoal)
   sections are left unchanged. Mapped onto the local bg-color-* classes. */
/* NOTE: .bg-color-grey (#e2dedd sand) is deliberately NOT neutralised — on
   live the equivalent sections (e.g. homepage services-module "Ready, set,
   goals") are tagged bg-color--white with the sand grey painted by module CSS,
   so they KEEP #e2dedd in high-contrast mode. Verified against live 2026-07-22. */
html.high-contrast .bg-color-p,
html.high-contrast .bg-color-s,
html.high-contrast .bg-color-t,
html.high-contrast .bg-color-a,
html.high-contrast .bg-color-light-blue,
html.high-contrast .bg-color-light-grey,
html.high-contrast .bg-color-peach,
html.high-contrast .bg-color-pink {
	background-color: #f1f1f3;
}
/* White text sitting on a NEUTRALISED (formerly coloured) background flips to
   black so it stays readable — live drops its u-color--* utilities entirely in
   high contrast; dark sections keep their white text (bg stays dark there). */
html.high-contrast .bg-color-p.font-color-n-white,
html.high-contrast .bg-color-s.font-color-n-white,
html.high-contrast .bg-color-t.font-color-n-white,
html.high-contrast .bg-color-a.font-color-n-white,
html.high-contrast .bg-color-light-blue.font-color-n-white,
html.high-contrast .bg-color-light-grey.font-color-n-white,
html.high-contrast .bg-color-peach.font-color-n-white,
html.high-contrast .bg-color-pink.font-color-n-white {
	color: var(--color-n-black, #282829);
}
/* Coloured TEXT utilities fall back to the inherited colour in high contrast
   (live: u-color--*/text-color--orange only apply on html:not(.high-contrast)) */
html.high-contrast .font-color-p,
html.high-contrast .font-color-s,
html.high-contrast .font-color-t,
html.high-contrast .font-color-a {
	color: inherit;
}
/* Coloured divider / top-title accent bar → black (live: .high-contrast
   .coloured-divider{border-color:#000}). !important outranks the per-accent
   double-class rules in style.css. */
html.high-contrast .top-title::after {
	background-color: #000 !important;
}
/* Footer column accents → white in high contrast (live drops the
   u-color-hover-focus--{pink|blue-light|peach|green} utilities, so headings
   and links fall back to white on the dark footer) */
html.high-contrast .site-footer [class*="site-footer__col--"] {
	--col-accent: #fff;
}
/* Footer social icons: live marks these up as c-btn-circle--{colour} inside the
   charcoal footer, so in high contrast they go WHITE with a black glyph. Local
   markup uses --social-bg per platform — force it white. */
html.high-contrast .site-footer__social-item {
	--social-bg: #fff;
}
/* Live-style double-dash grey panels (e.g. footer contact info bg-color--grey)
   → #f1f1f3 like every other coloured background */
html.high-contrast .bg-color--grey {
	background-color: #f1f1f3;
}

/* =========================================================
   AUX header content (replaces logo when menu open)
========================================================= */

.site-header__aux {
	display: flex;
	align-items: center;
	gap: 3.2rem;
	flex-wrap: wrap;
	justify-content: center;
}
.site-header__aux-slot {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Logo slides UP and out when menu opens, aux content slides DOWN and in */
.site-header__logo {
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0, 1),
		opacity 0.25s ease;
	will-change: transform, opacity;
}
.site-header.is-menu-open .site-header__logo {
	transform: translateY(-150%);
	opacity: 0;
	pointer-events: none;
}
.site-header__aux-slot {
	transform: translateY(150%);
	opacity: 0;
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0, 1) 0.05s,
		opacity 0.25s ease 0.05s;
	pointer-events: none;
}
.site-header.is-menu-open .site-header__aux-slot {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* Tablet only (768px–1199.98px): logo stays steady when the megamenu opens; the
   aux-slot (used by desktop) is hidden so the main nav stays inside the
   megamenu above the search bar. Placed after the desktop slide rules so the
   cascade wins (same specificity, later declaration takes precedence).
   At < 768px the logo slides up like desktop. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.site-header.is-menu-open .site-header__logo {
		transform: none;
		opacity: 1;
		pointer-events: auto;
	}
	.site-header.is-menu-open .site-header__aux-slot {
		display: none;
	}
}
/* Mobile (< 768px): aux-slot stays hidden since the main nav lives inside the megamenu */
@media (max-width: 767.98px) {
	.site-header.is-menu-open .site-header__aux-slot {
		display: none;
	}
}

/* Stack logo + aux in the same grid cell so they overlap during the swap */
.site-header__col--center {
	display: grid;
	align-items: center;
	justify-items: center;
	grid-template-areas: "stack";
	/* No overflow clipping — would cut the rightmost a11y icon. Logo slide-up
	   is hidden via opacity + pointer-events while it travels above. */
}
.site-header__col--center > * {
	grid-area: stack;
}

/* =========================================================
   Megamenu search — mirrors live .c-header-search styling
========================================================= */

#navigation-search,
.nav-horizontal__search {
	margin: 0 auto 7.2rem;
	width: 670px;
	max-width: 100%;
}
.c-header-search {
	position: relative;
}
.c-header-search__input {
	position: relative;
	display: block;
}
.c-header-search__input .c-icon {
	font-size: 110%;
	color: var(--color-n-black, #282829);
	display: inline-flex;
	align-items: center;
	left: 2.75rem;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}
.c-header-search__input .c-icon svg {
	width: 2.4rem;
	height: 2.4rem;
}
.c-header-search__input input {
	width: 100%;
	background: #fff;
	background-image: none;
	background-clip: padding-box;
	border: 2px solid #fff;
	border-radius: 5px;
	color: var(--color-n-black, #282829);
	font-size: 18px;
	padding: 35px 100px;
	outline: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
	margin: 0;
	filter: none;
	transition: border-color 0.2s cubic-bezier(0.4, 0, 0, 1);
}
/* Kill any inner shadow Safari / iOS adds on inputs */
.c-header-search__input input,
.c-header-search__input input:focus {
	-webkit-box-shadow: 0 0 0 0 transparent !important;
	box-shadow: 0 0 0 0 transparent !important;
}
.c-header-search__input .c-icon {
	left: 5rem;
}
.c-header-search__input input::placeholder {
	color: #69696a;
	opacity: 1;
}
.c-header-search__input input:hover,
.c-header-search__input input:focus {
	border: 2px solid var(--color-n-black, #282829);
	box-shadow: none;
}

/* =========================================================
   Megamenu bottom row (GD initials + feature)
========================================================= */

.site-header__megamenu-bottom {
	margin-top: 6rem;
	padding-top: 3rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	gap: 2rem;
}
.site-header__megamenu-mark {
	padding-bottom: 4rem;
}
.site-header__megamenu-mark svg {
	width: 16rem;
	height: auto;
	color: var(--color-n-black, #282829);
	display: block;
}
.site-header__megamenu-feature {
	display: flex;
	justify-content: flex-end;
}
.site-header__megamenu-feature .c-icon,
.site-header__megamenu-feature svg {
	display: block;
	width: 100%;
	max-width: 90%;
	height: auto;
	color: var(--color-n-black, #282829);
}
@media (max-width: 767.98px) {
	.site-header__megamenu-bottom {
		grid-template-columns: 1fr;
	}
	.site-header__megamenu-feature {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   MOBILE MEGAMENU LAYOUT  (≤ 767.98px)
   - aux block dissolves so its children reorder via flex order
   - vertical order: accessibility → search → 4-section accordion → main nav → GD mark
   - 4 sections become a click-to-expand accordion
   - main nav-horizontal stacks vertically without pipe dividers
   ========================================================================== */
@media (max-width: 767.98px) {
	.site-header.is-menu-open .site-header__logo {
		transform: none;
		opacity: 1;
		pointer-events: auto;
	}
	.site-header__megamenu-inner {
		padding-top: 0;
		max-height: 100vh;
		overflow-y: auto;
	}
	.site-header__megamenu-inner > #site-header-aux,
	.site-header__megamenu-inner > .site-header__aux {
		display: contents !important;
		padding: 0 !important;
	}
	/* Live parity: the accessibility controls are NOT shown on mobile at all
	   (live header.css: @media (max-width:47.99em)
	   .nav-horizontal-with-aux .accessibility-controls{display:none}) */
	.accessibility-controls {
		display: none;
	}
	.site-header__megamenu-inner #navigation-search,
	.site-header__megamenu-inner .nav-horizontal__search {
		order: 2;
		margin-bottom: var(--space-3);
	}
	/* Search input shrinks to 65px tall on mobile */
	.c-header-search__input input {
		padding: 1.5rem 2rem 1.5rem 5.5rem;
		font-size: 22px;
	}
	.c-header-search__input .c-icon {
		left: 2rem;
	}
	.c-header-search__input .c-icon svg {
		width: 2rem;
		height: 2rem;
	}
	.site-header__megamenu-inner .site-header__megamenu-cols {
		order: 3;
		grid-template-columns: 1fr;
		row-gap: var(--space-1);
		/* Don't let the cols container grab extra flex space — accordion expansion
		   should push siblings down, not redistribute rows within the cols grid */
		flex: 0 0 auto;
		align-content: start;
	}
	.site-header__megamenu-inner .site-header__megamenu-cols .nav-vertical-wrap:first-child {
		margin-top: 0;
	}
	.site-header__megamenu-inner .nav-horizontal {
		order: 4;
		margin-top: var(--space-4);
	}
	.site-header__megamenu-inner .nav-horizontal__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}
	.site-header__megamenu-inner .nav-horizontal__item:not(:last-child)::after {
		display: none;
	}
	.site-header__megamenu-bottom {
		order: 5;
		display: block;
		margin-top: auto;
		padding-top: var(--space-5);
		padding-bottom: var(--space-4);
	}
	.site-header__megamenu-feature {
		display: none;
	}
	.site-header__megamenu-mark svg {
		width: auto;
		height: 75px;
	}

	/* ---- Accordion sections ---- */
	/* Header row that holds title + chevron toggle side by side */
	.nav-vertical-wrap .nav-vertical__header {
		position: relative;
		display: block;
	}
	.nav-vertical-wrap .nav-vertical__link-main {
		display: block;
		cursor: pointer;
		position: relative;
		padding: 36px 64px 36px 0;
		margin: 0;
		font-size: 26px !important;
		line-height: 1.2;
		color: var(--color-n-black, #282829);
		text-decoration: none;
		user-select: none;
	}
	/* Match nav-horizontal links to mobile scale */
	.site-header__megamenu .nav-horizontal__link {
		font-size: 18px;
	}
	/* Accordion sections sit closer together: collapse .nav-vertical's flex gap */
	.nav-vertical-wrap .nav-vertical {
		gap: 0;
	}
	/* Toggle button: 44px circle on the right of the title row */
	.nav-vertical-wrap .nav-vertical__toggle {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: transparent;
		border: 2px solid currentColor;
		border-radius: 50%;
		cursor: pointer;
		color: inherit;
		transition:
			background 0.2s ease,
			border-color 0.2s ease,
			color 0.2s ease;
	}
	/* SVG chevron centered inside the toggle */
	.nav-vertical-wrap .nav-vertical__toggle .nav-vertical__chevron {
		display: block;
		position: static;
		transform: none;
		width: 20px;
		height: 12px;
	}
	.nav-vertical-wrap.is-open .nav-vertical__toggle {
		background: #000;
		border-color: var(--color-p, #ff6e33);
		color: #fff;
	}
	.nav-vertical-wrap .nav-vertical__list {
		display: flex;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		margin-top: 0;
		gap: 1rem;
		transition:
			max-height 0.35s cubic-bezier(0.4, 0, 0, 1),
			opacity 0.2s ease,
			margin-top 0.35s cubic-bezier(0.4, 0, 0, 1);
	}
	.nav-vertical-wrap.is-open .nav-vertical__list {
		max-height: 800px;
		opacity: 1;
		margin-top: var(--space-4);
	}
	.nav-vertical-wrap .nav-vertical__link {
		font-size: 1.8rem;
		font-weight: 500;
	}
	/* Rest state: shorter line on mobile, pulled back up so the extra
	   heading padding doesn't push the line away from the title */
	.nav-vertical-wrap .c-link-highlight__elem {
		width: 32% !important;
		bottom: 10px;
	}
	/* Line grows to 50% ONLY when the title itself is hovered/pressed
	   (opening the accordion via chevron does NOT animate the line) */
	.nav-vertical__link-main:hover .c-link-highlight__elem,
	.nav-vertical__link-main:active .c-link-highlight__elem,
	.nav-vertical__link-main:focus-visible .c-link-highlight__elem {
		width: 50% !important;
	}
	/* Section heading stays black at all times on mobile — hover, focus, and .is-open */
	.nav-vertical-wrap:hover .nav-vertical__link-main,
	.nav-vertical-wrap.is-open .nav-vertical__link-main,
	.nav-vertical__link-main,
	.nav-vertical__link-main:hover,
	.nav-vertical__link-main:focus-visible,
	.nav-vertical__link-main:active {
		color: var(--color-n-black, #282829);
	}
}

/* ── Search autocomplete — Awesomplete, EXACT live overrides (base styling from
   lib/awesomplete/awesomplete.css; these mirror live's custom rules) ── */
.c-header-search {
	position: relative;
}
.awesomplete {
	display: block;
	position: relative;
	width: 100%;
}
.awesomplete mark {
	background: none;
	font-weight: 700;
}
.awesomplete.has-value {
	border-color: #ff6e33;
}
.awesomplete > ul {
	background: #fff;
	border: none;
	border-radius: 10px;
}
.awesomplete > ul:before {
	content: none;
}
.awesomplete > ul li {
	margin: 0;
	padding: 12px 40px;
}
.awesomplete > ul li:before {
	content: none;
}
.awesomplete > ul li[aria-selected="true"] {
	background: rgba(0, 0, 0, 0.08);
}
.awesomplete > ul li[aria-selected="true"],
.awesomplete > ul li[aria-selected="true"] mark {
	color: #282829;
}
.awesomplete > ul li[aria-selected="true"] mark {
	background: none;
}
/* keep input full-width since Awesomplete wraps it inside the flex search input */
.c-header-search__input .awesomplete {
	flex: 1 1 auto;
	min-width: 0;
}
.c-header-search__input .awesomplete > input {
	width: 100%;
}