/**
 * Noah's Story theme CSS - global header, footer and WordPress templates.
 *
 * Brand tokens come from the package's tokens.css (uploads/hmg-builder/
 * noahs-story/tokens.css). Every var() below carries a literal fallback so
 * the theme still renders correctly before the package is imported.
 */

/* ------------------------------------------------------------------ */
/* Shared bits                                                         */
/* ------------------------------------------------------------------ */

.ns-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 300;
	background: var(--ns-navy, #16324f);
	color: #fff;
	padding: 12px 18px;
	font-family: Quicksand, sans-serif;
	font-weight: 600;
	border-radius: 0 0 10px 0;
}

.ns-skip-link:focus,
.ns-skip-link:focus-visible {
	left: 0;
	color: #fff;
	text-decoration: none;
}

.ns-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	border-radius: 999px;
	min-height: 44px;
	padding: 13px 24px;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.ns-btn:hover {
	text-decoration: none;
}

.ns-btn--donate,
.ns-btn--support {
	background: var(--ns-green-btn, #5e7747);
	color: #fff;
}

.ns-btn--donate:hover,
.ns-btn--support:hover {
	background: var(--ns-green-deep, #4c6238);
	color: #fff;
	transform: translateY(-1px);
}

.ns-btn--outline {
	background: #fff;
	color: var(--ns-link, #35719f);
	border: 1.6px solid var(--ns-blue-soft, #a9cfee);
}

.ns-btn--outline:hover {
	background: var(--ns-blue-pale, #eaf4fc);
	border-color: var(--ns-blue, #78b6e5);
	color: var(--ns-link, #35719f);
}

.ns-eyebrow-sm {
	margin: 0 0 10px;
	font-family: Quicksand, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--ns-link, #35719f);
}

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

.ns-header {
	--ns-hdr-pad: 16px;
	--ns-logo-h: 74px;
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(22, 50, 79, 0.07);
	padding: var(--ns-hdr-pad) 0;
	transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.ns-header.is-scrolled {
	--ns-hdr-pad: 8px;
	--ns-logo-h: 56px;
	box-shadow: 0 10px 30px -18px rgba(22, 50, 79, 0.25);
}

.ns-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ns-logo {
	flex: none;
	display: block;
}

/* Specificity is deliberate: a plugin stylesheet carrying a global
   `.woocommerce-page img { height: auto }` (0,1,1) outranks a single-class rule
   and renders this logo at its natural size. Two classes keeps the header ours. */
.ns-header .ns-logo__img {
	display: block;
	height: var(--ns-logo-h);
	width: auto;
	max-width: none;
	transition: height 0.3s ease;
}

.ns-header__desktop {
	display: none;
	align-items: center;
	gap: clamp(16px, 2vw, 30px);
}

.ns-header__mobile {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* 1240px, not 1000px. Eight items with long labels ("The Infinity Initiative",
   "Our Programmes") need ~1230px to sit on one line; below that the bar wrapped
   onto three lines all the way down to the old 1000px breakpoint - the whole
   iPad-landscape and small-laptop range. Shrinking the type far enough to fit
   would have taken it under a comfortable reading size, so the drawer takes
   over instead. Nothing is lost: the compact header still shows "How we can
   help" as a button, and the drawer carries the full menu plus Donate. */
@media (min-width: 1240px) {
	.ns-header__desktop {
		display: flex;
	}

	.ns-header__mobile {
		display: none;
	}
}

/* Between the burger breakpoint and a full desktop the navigation has eight
   items with long labels ("The Infinity Initiative", "Our Programmes") and needs
   about 1230px to sit on one line. Just above the breakpoint that is a tight
   fit, so the tracking and gaps come in a little to keep it comfortable. */
@media (min-width: 1240px) and (max-width: 1359px) {
	.ns-nav__menu {
		gap: 13px;
		font-size: 11.5px;
		letter-spacing: 0.045em;
	}

	.ns-header__inner {
		gap: 14px;
	}

	.ns-header {
		--ns-logo-h: 60px;
	}

	.ns-btn--donate {
		padding-inline: 16px;
		font-size: 11.5px;
		letter-spacing: 0.045em;
	}
}

@media (max-width: 1239px) {
	.ns-header {
		--ns-hdr-pad: 10px;
		--ns-logo-h: 56px;
	}

	.ns-header.is-scrolled {
		--ns-hdr-pad: 7px;
		--ns-logo-h: 48px;
	}
}

/* Desktop nav ------------------------------------------------------- */

.ns-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.7vw, 28px);
	font-family: Quicksand, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.ns-nav__menu > li {
	position: relative;
}

.ns-nav__menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ns-navy, #16324f);
	padding: 8px 0;
}

.ns-nav__menu > li > a:hover {
	color: var(--ns-link, #35719f);
	text-decoration: none;
}

.ns-nav__chevron {
	flex: none;
	transition: transform 0.22s ease;
}

/* Dropdown panel - supports both the fallback (.ns-nav__sub) and a real
   WordPress menu (.sub-menu). Opens on hover, keyboard focus-within, or the
   .is-open class theme.js toggles (which also drives aria-expanded). */

.ns-nav__menu .ns-nav__sub,
.ns-nav__menu .sub-menu {
	list-style: none;
	position: absolute;
	left: -18px;
	top: calc(100% + 14px);
	margin: 0;
	padding: 12px;
	min-width: 246px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border: 1px solid rgba(22, 50, 79, 0.08);
	box-shadow: 0 18px 46px -20px rgba(22, 50, 79, 0.3);
	border-radius: 18px;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
	z-index: 110;
}

/* Invisible hover bridge across the 14px gap below the trigger. */
.ns-nav__menu .ns-nav__sub::before,
.ns-nav__menu .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

.ns-nav__menu li:hover > .ns-nav__sub,
.ns-nav__menu li:focus-within > .ns-nav__sub,
.ns-nav__menu li.is-open > .ns-nav__sub,
.ns-nav__menu li:hover > .sub-menu,
.ns-nav__menu li:focus-within > .sub-menu,
.ns-nav__menu li.is-open > .sub-menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.ns-nav__menu li:hover > a .ns-nav__chevron,
.ns-nav__menu li.is-open > a .ns-nav__chevron {
	transform: rotate(180deg);
}

.ns-nav__sub a,
.ns-nav__menu .sub-menu a {
	display: block;
	padding: 11px 14px;
	border-radius: 12px;
	color: var(--ns-navy, #16324f);
	letter-spacing: 0.04em;
	text-transform: none;
	font-size: 14px;
}

.ns-nav__sub a:hover,
.ns-nav__menu .sub-menu a:hover {
	background: var(--ns-blue-pale, #eaf4fc);
	text-decoration: none;
}

.ns-nav__meta {
	color: var(--ns-muted, #54708b);
	font-family: Lato, sans-serif;
	font-weight: 400;
	letter-spacing: 0;
}

/* Mobile support pill + burger -------------------------------------- */

.ns-btn--support {
	font-size: 11.5px;
	letter-spacing: 0.08em;
	padding: 12px 16px;
}

.ns-nav-toggle {
	width: 46px;
	height: 46px;
	border: 1px solid rgba(22, 50, 79, 0.14);
	background: #fff;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	padding: 0;
}

.ns-nav-toggle__bar {
	display: block;
	width: 19px;
	height: 2px;
	background: var(--ns-navy, #16324f);
	border-radius: 2px;
}

/* Drawer ------------------------------------------------------------ */

.ns-drawer-root {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	justify-content: flex-end;
}

.ns-drawer-root[hidden] {
	display: none;
}

.ns-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(22, 50, 79, 0.4);
}

.ns-drawer {
	position: relative;
	width: min(88vw, 360px);
	background: #fff;
	height: 100%;
	overflow-y: auto;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: Quicksand, sans-serif;
}

.ns-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.ns-drawer__logo {
	height: 54px;
	width: auto;
}

.ns-drawer__close {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(22, 50, 79, 0.14);
	background: #fff;
	border-radius: 14px;
	font-size: 20px;
	color: var(--ns-navy, #16324f);
	cursor: pointer;
	line-height: 1;
}

.ns-drawer__menu,
.ns-drawer__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-drawer__link,
.ns-drawer__menu > li > a {
	display: block;
	padding: 14px 4px;
	font-weight: 600;
	color: var(--ns-navy, #16324f);
	border-bottom: 1px solid rgba(22, 50, 79, 0.07);
}

.ns-drawer__sublink,
.ns-drawer__sub a,
.ns-drawer__menu .sub-menu a {
	display: block;
	padding: 11px 4px 11px 18px;
	color: var(--ns-link, #35719f);
	font-size: 15px;
	font-weight: 500;
}

.ns-drawer__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-drawer__link:hover,
.ns-drawer__sublink:hover {
	text-decoration: none;
	color: var(--ns-link, #35719f);
}

.ns-drawer__donate {
	margin-top: 16px;
	text-align: center;
	background: var(--ns-green-btn, #5e7747);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.1em;
	font-size: 13px;
	padding: 16px;
	border-radius: 999px;
	min-height: 44px;
}

.ns-drawer__donate:hover {
	background: var(--ns-green-deep, #4c6238);
	color: #fff;
	text-decoration: none;
}

body.ns-no-scroll {
	overflow: hidden;
}

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

/* ---- Footer -----------------------------------------------------------
   Refinement pass. It read as a separate, oversized template component:
   too tall, loose columns from auto-fit, a large floating logo and an
   inconsistent heading/link rhythm. Now it closes the page - an explicit
   grid, one spacing scale, and the wave sitting close to the content. */
.ns-footer {
	background: var(--ns-blue, #78b6e5);
	color: var(--ns-navy-2, #123047);
	/* No top margin. The wave is absolutely positioned above the footer's box,
	   so any margin here becomes a white strip between the previous section and
	   the wave. At zero the footer butts the section above it and the wave's
	   negative space shows THAT section's colour, not the page background. */
	margin-top: 0;
	position: relative;
}

.ns-footer__wave {
	display: block;
	width: 100%;
	height: clamp(30px, 3.4vw, 56px);
	color: var(--ns-blue, #78b6e5);
	position: absolute;
	left: 0;
	bottom: 100%;
}

.ns-footer__grid {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(14px, 1.6vw, 24px) clamp(18px, 4vw, 40px) clamp(20px, 2.4vw, 32px);
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1.45fr;
	gap: clamp(18px, 2vw, 32px);
	align-items: start;
}

.ns-footer__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14.5px;
}

.ns-footer__col--brand {
	gap: 11px;
	max-width: 34ch;
}

/* Get In Touch also carries the newsletter, so it needs a little more room
   between its two halves than the plain link columns do. */
.ns-footer__col--contact {
	gap: 10px;
}
.ns-footer__newsletter {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(18, 48, 71, 0.16);
}
.ns-footer__heading--sub {
	margin-top: 0;
}

/* Deliberately placed against the column edge rather than floating. */
.ns-footer__logo {
	height: 56px;
	width: auto;
	align-self: flex-start;
	display: block;
}

.ns-footer__summary {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.62;
}

.ns-footer__tagline {
	margin: 0;
	font-family: Quicksand, sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.5;
}

/* One heading rhythm across every column, newsletter included. */
.ns-footer__heading {
	margin: 0 0 3px;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ns-navy-2, #123047);
}

.ns-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ns-footer__links a {
	display: inline-block;
	padding-block: 2px;
	line-height: 1.5;
}

.ns-footer a {
	color: var(--ns-navy-2, #123047);
}

.ns-footer a:hover {
	color: #0a2135;
}

.ns-footer__address {
	margin: 0;
	line-height: 1.6;
}

/* Get In Touch: confirmed email, then social icons. Both render only when a
   value exists, so nothing ever shows as an empty or dead link. */
.ns-footer__email {
	margin: 0 0 10px;
	line-height: 1.6;
	font-weight: 600;
	word-break: break-word;
}
.ns-footer__email a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ns-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.ns-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -11px;
	color: inherit;
	border-radius: 50%;
}
.ns-social__link:hover .ns-social__icon,
.ns-social__link:focus-visible .ns-social__icon {
	opacity: 1;
	transform: translateY(-1px);
}
.ns-social__icon {
	opacity: .85;
	transition: opacity .2s ease, transform .2s ease;
}
.ns-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ns-footer__note {
	margin: 2px 0 0;
	padding: 9px 11px;
	border: 1px dashed rgba(18, 48, 71, 0.4);
	border-radius: 9px;
	font-size: 13px;
	line-height: 1.55;
}

.ns-footer__newsletter-intro {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
}

/* The newsletter belongs to the same grid, not bolted on beneath it. */
.ns-footer__newsletter form,
.ns-footer__newsletter .hmg-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 2px;
}
.ns-footer__newsletter label {
	font-family: Quicksand, sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
}

/* The plugin's consent row is a <label> wrapping the box and its wording. The
   footer gives labels no layout of their own, so the box was stacking above
   the sentence instead of sitting beside it. */
.ns-footer .hmg-form__tick {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.45;
	cursor: pointer;
}
.ns-footer .hmg-form__tick input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--ns-green-btn, #5e7747);
}
.ns-footer .hmg-form__tick span {
	flex: 1 1 auto;
	min-width: 0;
}

/* Let the plugin's newsletter form inherit footer styling gracefully. */
.ns-footer input[type="email"],
.ns-footer input[type="text"] {
	padding: 14px 16px;
	border-radius: 999px;
	border: 1px solid rgba(18, 48, 71, 0.25);
	background: #fff;
	font-family: Lato, sans-serif;
	font-size: 15px;
	color: var(--ns-navy-2, #123047);
	min-height: 48px;
	width: 100%;
}

.ns-footer button[type="submit"],
.ns-footer input[type="submit"] {
	background: var(--ns-green-btn, #5e7747);
	color: #fff;
	border: none;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	padding: 15px 22px;
	border-radius: 999px;
	min-height: 48px;
	cursor: pointer;
	transition: background 0.25s ease;
}

.ns-footer button[type="submit"]:hover,
.ns-footer input[type="submit"]:hover {
	background: var(--ns-green-deep, #4c6238);
}

/* Consent tick - theme taste only.
   The layout patch that used to live here (flex row, box sizing, dropping the
   field-label uppercase) was compensating for a platform bug: the plugin styled
   EVERY .hmg-form input as a full-width text field, so the checkbox stretched to
   the column width. That is fixed in HMG Web Builder 2.7.2 and the patch is gone.
   What remains is a real choice, not a workaround: the tick takes the footer
   button's green rather than the package's primary blue (--hmg-brand-primary is
   Noah blue here), and keeps a softer corner.
   REQUIRES: plugin >= 2.7.2 on this site. Deploying this theme against an older
   plugin puts the stretched checkbox back. */
.hmg-form label.hmg-form__tick input[type="checkbox"] {
	border-radius: 4px;
	accent-color: var(--ns-green-btn, #5e7747);
}

.ns-footer__bottom {
	border-top: 1px solid rgba(18, 48, 71, 0.18);
}

.ns-footer__bottom-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 13px clamp(18px, 4vw, 40px);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
}

.ns-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

/* ---- Footer responsive: checked at each step, not left to collapse ----
   1024: the link columns tighten; Get In Touch keeps the newsletter with it.
   768:  brand spans the top, the three link columns sit in a row.
   560:  single column, tighter rhythm, no artificial gaps. */
@media (max-width: 1024px) {
	.ns-footer__grid {
		grid-template-columns: 1.3fr 1fr 1.25fr;
	}
}

@media (max-width: 768px) {
	.ns-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px 20px;
	}
	.ns-footer__col--brand {
		grid-column: 1 / -1;
		max-width: none;
	}
	.ns-footer__logo {
		height: 50px;
	}
}

@media (max-width: 560px) {
	.ns-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding-top: 12px;
	}
	.ns-footer__bottom-inner {
		justify-content: flex-start;
		gap: 8px 18px;
	}
}

/* ------------------------------------------------------------------ */
/* Breadcrumbs                                                         */
/* ------------------------------------------------------------------ */

.ns-page-chrome,
.ns-breadcrumbs-bar {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(18px, 2.5vw, 30px) clamp(18px, 4vw, 40px) 0;
}

.ns-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-family: Quicksand, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ns-muted, #54708b);
}

.ns-breadcrumbs__item:not(:first-child)::before {
	content: "\203A";
	margin-right: 6px;
	color: var(--ns-blue-soft, #a9cfee);
}

.ns-breadcrumbs__item a {
	color: var(--ns-link, #35719f);
}

.ns-breadcrumbs__item [aria-current="page"] {
	color: var(--ns-muted, #54708b);
}

/* ------------------------------------------------------------------ */
/* Page + article templates                                            */
/* ------------------------------------------------------------------ */

.ns-page-title {
	margin: 14px 0 0;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--ns-navy, #16324f);
	text-wrap: pretty;
}

.ns-article {
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(22px, 3vw, 40px) clamp(18px, 4vw, 40px) clamp(30px, 4vw, 56px);
	color: var(--ns-body, #3d5d7a);
	font-size: clamp(16px, 1.1vw, 17.5px);
	line-height: 1.75;
}

.ns-article__header {
	margin-bottom: clamp(18px, 2.5vw, 30px);
}

.ns-article__meta {
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: Quicksand, sans-serif;
	font-size: 13px;
	color: var(--ns-muted, #54708b);
}

.ns-article__pill {
	background: var(--ns-blue-pale, #eaf4fc);
	color: var(--ns-navy, #16324f);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 7px 12px;
	border-radius: 999px;
}

.ns-article__title {
	margin: 0;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--ns-navy, #16324f);
	text-wrap: pretty;
}

.ns-article__figure {
	margin: 0 0 clamp(20px, 3vw, 34px);
}

.ns-article__image {
	width: 100%;
	height: auto;
	border-radius: 26px;
	display: block;
}

.ns-article__body h2,
.ns-article__body h3,
.ns-article__body h4 {
	font-family: Quicksand, sans-serif;
	color: var(--ns-navy, #16324f);
	line-height: 1.25;
	margin: 1.6em 0 0.6em;
	text-wrap: pretty;
}

.ns-article__body p,
.ns-article__body ul,
.ns-article__body ol {
	max-width: 65ch;
}

.ns-article__body img {
	border-radius: 22px;
}

.ns-article__body blockquote {
	margin: 1.6em 0;
	padding: 18px 22px;
	border-left: 3px solid var(--ns-blue-soft, #a9cfee);
	background: var(--ns-cream, #faf8f3);
	border-radius: 0 18px 18px 0;
	font-family: Quicksand, sans-serif;
	font-weight: 400;
}

/* Related articles --------------------------------------------------- */

.ns-related {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(26px, 3.5vw, 50px) clamp(18px, 4vw, 40px) clamp(24px, 3vw, 44px);
}

.ns-related__head {
	margin-bottom: clamp(20px, 2.6vw, 34px);
}

.ns-related__title {
	margin: 0;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 2.8vw, 34px);
	line-height: 1.2;
	color: var(--ns-navy, #16324f);
}

/* ------------------------------------------------------------------ */
/* News cards + listings                                               */
/* ------------------------------------------------------------------ */

.ns-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.ns-news-card__link {
	display: block;
	color: inherit;
}

.ns-news-card__link:hover {
	text-decoration: none;
	color: inherit;
}

.ns-news-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 22px;
	overflow: hidden;
	background: linear-gradient(150deg, #dcebf8, #c7dff2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ns-news-card__img,
.ns-news-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ns-news-card__link:hover .ns-news-card__media img {
	transform: scale(1.03);
}

.ns-news-card__placeholder {
	opacity: 0.8;
	display: inline-flex;
}

.ns-news-card__pill {
	position: absolute;
	left: 14px;
	top: 14px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ns-navy, #16324f);
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 7px 12px;
	border-radius: 999px;
	z-index: 1;
}

.ns-news-card__title {
	margin: 18px 0 8px;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.35;
	color: var(--ns-navy, #16324f);
	text-wrap: pretty;
}

.ns-news-card__excerpt {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.68;
	color: var(--ns-body, #3d5d7a);
}

.ns-news-card__more {
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.09em;
	color: var(--ns-link, #35719f);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: gap 0.25s ease;
}

.ns-news-card__link:hover .ns-news-card__more {
	gap: 11px;
}

.ns-news-card {
	transition: transform 0.3s ease;
}

.ns-news-card:hover {
	transform: translateY(-5px);
}

.ns-news-empty {
	margin: 0;
	padding: clamp(24px, 3vw, 40px);
	background: var(--ns-cream, #faf8f3);
	border-radius: 22px;
	color: var(--ns-body, #3d5d7a);
	font-size: 15.5px;
	text-align: center;
}

/* Listing wrapper (archive / index / search) ------------------------- */

.ns-listing {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 40px) clamp(36px, 5vw, 70px);
}

.ns-listing .ns-page-chrome {
	padding-left: 0;
	padding-right: 0;
}

.ns-listing__head {
	margin: clamp(14px, 2vw, 24px) 0 clamp(26px, 3vw, 42px);
}

.ns-listing__title {
	margin: 0;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--ns-navy, #16324f);
	text-wrap: pretty;
}

.ns-listing__intro {
	margin-top: 12px;
	max-width: 62ch;
	color: var(--ns-body, #3d5d7a);
	line-height: 1.7;
}

/* Pagination --------------------------------------------------------- */

.ns-pagination {
	margin-top: clamp(30px, 4vw, 50px);
}

.ns-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	font-family: Quicksand, sans-serif;
	font-weight: 600;
	font-size: 14px;
}

.ns-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1.6px solid var(--ns-blue-soft, #a9cfee);
	color: var(--ns-link, #35719f);
}

.ns-pagination .page-numbers:hover {
	background: var(--ns-blue-pale, #eaf4fc);
	text-decoration: none;
}

.ns-pagination .page-numbers.current {
	background: var(--ns-blue-btn, #37729c);
	border-color: var(--ns-blue-btn, #37729c);
	color: #fff;
}

.ns-pagination .page-numbers.dots {
	border: none;
}

/* Search ------------------------------------------------------------- */

.ns-search-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.4vw, 28px);
	max-width: 760px;
}

.ns-search-result {
	padding-bottom: clamp(18px, 2.4vw, 28px);
	border-bottom: 1px solid var(--ns-blue-tint, #cfe5f5);
}

.ns-search-result__title {
	margin: 0 0 8px;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--ns-navy, #16324f);
}

.ns-search-result__link:hover {
	text-decoration: none;
}

.ns-search-result__link:hover .ns-search-result__title {
	color: var(--ns-link, #35719f);
}

.ns-search-result__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.68;
	color: var(--ns-body, #3d5d7a);
}

.ns-search-empty {
	max-width: 560px;
	color: var(--ns-body, #3d5d7a);
	line-height: 1.7;
}

.ns-quiet-links {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: Quicksand, sans-serif;
	font-weight: 600;
}

.ns-searchform {
	margin-top: 18px;
	max-width: 460px;
}

.ns-searchform__label {
	display: block;
	margin-bottom: 8px;
	font-family: Quicksand, sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--ns-navy, #16324f);
}

.ns-searchform__row {
	display: flex;
	gap: 8px;
}

.ns-searchform__input {
	flex: 1;
	min-width: 0;
	padding: 12px 18px;
	border-radius: 999px;
	border: 1px solid var(--ns-blue-tint, #cfe5f5);
	background: #fff;
	font-family: Lato, sans-serif;
	font-size: 15px;
	color: var(--ns-navy, #16324f);
	min-height: 48px;
}

.ns-searchform__submit {
	background: var(--ns-blue-btn, #37729c);
	color: #fff;
	border: none;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	padding: 12px 22px;
	border-radius: 999px;
	min-height: 48px;
	cursor: pointer;
	transition: background 0.25s ease;
}

.ns-searchform__submit:hover {
	background: #2a5c80;
}

/* 404 ---------------------------------------------------------------- */

.ns-404 {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(50px, 8vw, 110px) clamp(18px, 4vw, 40px);
	text-align: center;
}

.ns-404__infinity {
	margin-bottom: 18px;
	opacity: 0.8;
}

.ns-404__title {
	margin: 0 0 14px;
	font-family: Quicksand, sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.15;
	color: var(--ns-navy, #16324f);
}

.ns-404__text {
	margin: 0 auto 28px;
	max-width: 52ch;
	color: var(--ns-body, #3d5d7a);
	font-size: 16px;
	line-height: 1.75;
}

.ns-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.ns-404__search {
	margin-top: 34px;
	display: flex;
	justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Reveal-on-scroll + SVG stroke draw                                  */
/*                                                                     */
/* Content is only ever hidden when BOTH JavaScript is running         */
/* (html.js) AND the user allows motion. theme.js also carries a       */
/* safety timeout that reveals everything regardless.                  */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	html.js [data-reveal] {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
	}

	html.js [data-reveal].is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	html.js [data-draw] {
		transition: stroke-dashoffset 1.6s ease 0.3s;
	}
}

/* Noah's Story checklist icons - mask sources for the package section.
 * Relative URLs resolve against this stylesheet. */
.ns-checklist__icon[data-icon="heart"]{-webkit-mask-image:url(icons/heart.svg);mask-image:url(icons/heart.svg)}
.ns-checklist__icon[data-icon="star"]{-webkit-mask-image:url(icons/star.svg);mask-image:url(icons/star.svg)}
.ns-checklist__icon[data-icon="infinity"]{-webkit-mask-image:url(icons/infinity.svg);mask-image:url(icons/infinity.svg)}
.ns-checklist__icon[data-icon="people"]{-webkit-mask-image:url(icons/people.svg);mask-image:url(icons/people.svg)}
.ns-checklist__icon[data-icon="home"]{-webkit-mask-image:url(icons/home.svg);mask-image:url(icons/home.svg)}
.ns-checklist__icon[data-icon="book"]{-webkit-mask-image:url(icons/book.svg);mask-image:url(icons/book.svg)}
.ns-checklist__icon[data-icon="light"]{-webkit-mask-image:url(icons/light.svg);mask-image:url(icons/light.svg)}
.ns-checklist__icon[data-icon="hand"]{-webkit-mask-image:url(icons/hand.svg);mask-image:url(icons/hand.svg)}

/* ---- Link treatment, asserted last -------------------------------------
   Navigation is not prose. Header, dropdowns, drawer, footer nav, breadcrumbs,
   buttons and card links never underline; contextual links inside body copy
   keep their underline for accessibility. Declared here as well as in the root
   stylesheet because theme.css is the last sheet to load, so this is the rule
   that finally wins regardless of source order. */
.ns-header a,
.ns-header a:hover,
.ns-header a:focus,
.ns-nav a,
.ns-nav a:hover,
.ns-nav a:focus,
.ns-drawer a,
.ns-drawer a:hover,
.ns-drawer a:focus,
.ns-skip-link,
.ns-skip-link:hover,
.ns-btn,
.ns-btn:hover,
.ns-btn:focus,
.ns-footer__links a,
.ns-footer__links a:hover,
.ns-footer__links a:focus,
.ns-footer__legal a,
.ns-footer__legal a:hover,
.ns-footer__legal a:focus,
.ns-footer__col--brand a,
.ns-footer__col--brand a:hover,
.ns-breadcrumbs a,
.ns-breadcrumbs a:hover,
.ns-card a,
.ns-card a:hover {
	text-decoration: none;
}

/* Hover feedback without a rule: colour shift only. */
.ns-footer__links a:hover,
.ns-footer__legal a:hover {
	color: #0a2135;
}

/* ------------------------------------------------------------------ */
/* Breadcrumb sits ON the hero, not on a white strip above it           */
/* ------------------------------------------------------------------ */
/* A builder page opens with its own full-bleed hero. The breadcrumb bar
   was a separate block in front of it, so every inner page began with
   ~86px of white (a 46px bar plus a 40px gap) before the coloured band
   started. Taking the bar out of flow lets the hero begin directly under
   the header; the first section then carries enough top padding for the
   breadcrumb to sit inside its field. */

.ns-main {
	position: relative;
}

.ns-builder-page > .ns-breadcrumbs-bar,
.ns-main > .ns-breadcrumbs-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding-top: clamp(14px, 1.6vw, 22px);
	padding-bottom: 0;
	pointer-events: none;
}

/* Only the links need to be clickable; the bar itself must not sit over the
   hero and swallow clicks meant for it. */
.ns-main > .ns-breadcrumbs-bar a,
.ns-main > .ns-breadcrumbs-bar nav {
	pointer-events: auto;
}

/* The builder wraps the page in `.hmg-page`; padding there is OUTSIDE the
   hero's coloured band, so it just recreates the white strip. The room for
   the breadcrumb has to come from the first SECTION's own padding instead. */
.ns-builder-page,
.ns-builder-page > .hmg-page {
	margin-top: 0;
	padding-top: 0;
}

/* The builder nests one more level: .hmg-page > .hmg-section > section.
   Padding on the wrapper sits outside the coloured band, so it has to go on
   the section itself. */
.ns-builder-page .hmg-page > :first-child,
.ns-builder-page .hmg-page > :first-child > :first-child {
	margin-top: 0;
}

.ns-builder-page .hmg-page > :first-child {
	padding-top: 0;
}

.ns-builder-page .hmg-page > :first-child > section:first-child {
	padding-top: clamp(80px, 7vw, 116px);
}