/* NovoStitches supplemental component CSS. Design tokens (colour/type/spacing) come from
   theme.json; this file covers layout, the product-card/header/grid systems, and the
   material-treatment motifs theme.json's style engine can't express on its own.
   See docs/VISUAL-RECOVERY-PLAN.md for the system this file implements. */

/* ---------- Button system ---------- */

/* theme.json sets a global background on every button element; the "outline" style variation
   needs to override that explicitly rather than relying on the className alone. Default
   (light-background context): dark border, transparent fill. */
.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--wp--preset--color--carbon-black) !important;
	border: 1.5px solid var(--wp--preset--color--carbon-black) !important;
}
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--carbon-black) !important;
	color: var(--wp--preset--color--bone-white) !important;
}
/* Dark-section context: any group with a dark background colour flips the outline button
   to a light border/text so it stays legible. */
.has-carbon-black-background-color .is-style-outline .wp-block-button__link,
.has-raw-indigo-background-color .is-style-outline .wp-block-button__link,
.has-oxide-brown-background-color .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--bone-white) !important;
	border-color: var(--wp--preset--color--bone-white) !important;
}
.has-carbon-black-background-color .is-style-outline .wp-block-button__link:hover,
.has-raw-indigo-background-color .is-style-outline .wp-block-button__link:hover,
.has-oxide-brown-background-color .is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--bone-white) !important;
	color: var(--wp--preset--color--carbon-black) !important;
}

/* Primary buttons: consistent 48px height, arrow that slides 4px on hover (SVG, not a dash
   character). Outline/secondary buttons keep their existing look, untouched. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.ns-header-cta-box, .ns-btn:not(.ns-btn--line) {
	min-height: 48px; display: inline-flex; align-items: center; gap: 8px;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link::after,
.ns-btn:not(.ns-btn--line)::after {
	content: ""; width: 14px; height: 14px; flex-shrink: 0;
	background: currentColor; transition: transform 0.15s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after,
.ns-btn:not(.ns-btn--line):hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
	.wp-block-button:not(.is-style-outline) .wp-block-button__link::after,
	.ns-btn:not(.ns-btn--line)::after { transition: none; }
}

.ns-final-cta-steps {
	display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 56px);
	margin: 28px 0; padding: 20px 0;
	border-top: 1px solid rgba(248, 245, 239, 0.25); border-bottom: 1px solid rgba(248, 245, 239, 0.25);
}
.ns-final-cta-steps div { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ns-final-cta-steps span {
	font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--antique-brass);
	font-size: 0.8125rem; letter-spacing: 0.04em;
}

.ns-fact-row {
	display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 56px);
	list-style: none; margin: 28px 0 0; padding: 20px 0 0;
	border-top: 1px solid rgba(248, 245, 239, 0.25);
	font-weight: 600;
}
.ns-fact-row li { display: flex; align-items: center; gap: 8px; }
.ns-fact-row li::before {
	content: ""; width: 14px; height: 14px; flex-shrink: 0; color: var(--wp--preset--color--antique-brass);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==================== Mega nav ====================
   Desktop (>=1100px): inline row, dropdowns open on hover/focus/click. Products gets a real
   3-column mega-menu with image tiles; the rest get a plain link list.
   Mobile (<1100px): burger opens a full-height off-canvas drawer; each item's trigger becomes
   an accordion toggle in place (no separate dropdown positioning needed). Quote CTA pinned to
   the bottom of the drawer via flex, not fixed positioning (simpler, no overlap risk). */
.ns-mega-nav { position: relative; }
.ns-mega-nav__burger {
	display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
	position: relative; padding: 0;
}
.ns-mega-nav__burger span {
	position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor;
	transition: transform 0.15s ease;
}
.ns-mega-nav__burger span:first-child { top: 17px; }
.ns-mega-nav__burger span:last-child { top: 25px; }
.ns-mega-nav__panel-head, .ns-mega-nav__close, .ns-mega-nav__backdrop, .ns-mega-nav__panel-cta { display: none; }

.ns-mega-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ns-mega-nav__item { position: relative; }
.ns-mega-nav__item--plain a {
	display: inline-flex; align-items: center; padding: 8px 10px; font-size: 0.9375rem;
	color: inherit; text-decoration: none; white-space: nowrap;
}
.ns-mega-nav__item--plain a:hover, .ns-mega-nav__item--plain a:focus-visible { color: var(--wp--preset--color--leather-cognac); }
.ns-mega-nav__trigger {
	display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px;
	font: inherit; font-size: 0.9375rem; color: inherit; background: none; border: 0; cursor: pointer;
	white-space: nowrap;
}
.ns-mega-nav__trigger::after {
	content: ""; width: 8px; height: 8px; margin-top: -2px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); transition: transform 0.15s ease;
}
.ns-mega-nav__trigger:hover, .ns-mega-nav__trigger:focus-visible { color: var(--wp--preset--color--leather-cognac); }
.ns-mega-nav__item.ns-is-open .ns-mega-nav__trigger::after { transform: rotate(-135deg); margin-top: 2px; }

.ns-mega-nav__drop {
	display: none; position: absolute; top: 100%; left: 0; z-index: 70;
	background: var(--wp--preset--color--bone-white); color: var(--wp--preset--color--carbon-black);
	border: 1px solid var(--wp--preset--color--warm-canvas); box-shadow: 0 12px 28px rgba(17, 19, 18, 0.14);
	border-radius: 4px; padding: 24px;
}
.ns-mega-nav__item.ns-is-open .ns-mega-nav__drop { display: block; }
.ns-mega-nav__drop--simple { min-width: 260px; padding: 14px; }
.ns-mega-nav__drop--simple ul { list-style: none; margin: 0; padding: 0; }
.ns-mega-nav__drop--simple a {
	display: block; padding: 9px 12px; border-radius: 3px; color: inherit; text-decoration: none; font-size: 0.9375rem;
}
.ns-mega-nav__drop--simple a:hover, .ns-mega-nav__drop--simple a:focus-visible { background: var(--wp--preset--color--warm-canvas); }

.ns-mega-nav__drop--products { display: none; grid-template-columns: 1fr 1fr 220px; gap: 32px; width: 620px; }
.ns-mega-nav__item.ns-is-open .ns-mega-nav__drop--products { display: grid; }
.ns-mega-nav__col h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.0625rem; font-weight: 500; margin: 14px 0 10px; }
.ns-mega-nav__tile { display: block; aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; }
.ns-mega-nav__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.ns-mega-nav__tile:hover img { transform: scale(1.04); }
.ns-mega-nav__col ul { list-style: none; margin: 0 0 10px; padding: 0; }
.ns-mega-nav__col ul a { display: block; padding: 4px 0; color: inherit; text-decoration: none; font-size: 0.9375rem; }
.ns-mega-nav__col ul a:hover, .ns-mega-nav__col ul a:focus-visible { color: var(--wp--preset--color--leather-cognac); }
.ns-mega-nav__viewall { font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--deep-denim); text-decoration: none; }
.ns-mega-nav__viewall:hover, .ns-mega-nav__viewall:focus-visible { text-decoration: underline; }
.ns-mega-nav__col--services { border-left: 1px solid var(--wp--preset--color--warm-canvas); padding-left: 28px; }
.ns-mega-nav__col--services h3 { margin-top: 0; }

@media (max-width: 1099px) {
	.ns-mega-nav__burger { display: block; }
	.ns-mega-nav__panel {
		position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); z-index: 200;
		background: var(--wp--preset--color--bone-white); color: var(--wp--preset--color--carbon-black);
		display: flex; flex-direction: column;
		transform: translateX(100%); transition: transform 0.25s ease;
		overflow-y: auto;
	}
	.ns-mega-nav.ns-is-open .ns-mega-nav__panel { transform: translateX(0); }
	.ns-mega-nav__panel-head {
		display: flex; align-items: center; justify-content: space-between;
		padding: 16px clamp(18px, 4vw, 28px); border-bottom: 1px solid var(--wp--preset--color--warm-canvas);
	}
	.ns-mega-nav__panel-brand { display: inline-flex; text-decoration: none; }
	.ns-mega-nav__panel-brand img { height: 26px; width: auto; display: block; }
	.ns-mega-nav__close { display: block; width: 36px; height: 36px; border: 0; background: none; font-size: 1.75rem; line-height: 1; cursor: pointer; color: inherit; }
	.ns-mega-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px clamp(18px, 4vw, 28px); flex: 1 1 auto; }
	.ns-mega-nav__item { border-bottom: 1px solid var(--wp--preset--color--warm-canvas); }
	.ns-mega-nav__item--plain a, .ns-mega-nav__trigger { width: 100%; padding: 14px 4px; justify-content: space-between; font-size: 1.0625rem; }
	.ns-mega-nav__drop, .ns-mega-nav__drop--products { position: static; display: none; width: auto; box-shadow: none; border: 0; border-radius: 0; padding: 0 4px 14px; background: none; grid-template-columns: 1fr; gap: 20px; }
	.ns-mega-nav__item.ns-is-open .ns-mega-nav__drop { display: block; }
	.ns-mega-nav__item.ns-is-open .ns-mega-nav__drop--products { display: grid; }
	.ns-mega-nav__col--services { border-left: 0; padding-left: 0; border-top: 1px solid var(--wp--preset--color--warm-canvas); padding-top: 16px; }
	.ns-mega-nav__panel-cta { display: block; padding: 20px clamp(18px, 4vw, 28px); border-top: 1px solid var(--wp--preset--color--warm-canvas); }
	.ns-mega-nav__panel-cta .ns-btn { width: 100%; }
	.ns-mega-nav__backdrop {
		display: block; position: fixed; inset: 0; z-index: 190; background: rgba(17, 19, 18, 0.4);
		opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
	}
	.ns-mega-nav.ns-is-open .ns-mega-nav__backdrop { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.ns-mega-nav__panel, .ns-mega-nav__backdrop, .ns-mega-nav__tile img { transition: none; }
}

/* ---------- Foundations ---------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--wp--preset--color--carbon-black);
	color: var(--wp--preset--color--bone-white);
	padding: 12px 20px;
	font-weight: 600;
}
.skip-link:focus {
	left: 16px;
	top: 16px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--leather-cognac);
	outline-offset: 2px;
}

/* Measure (line-length) utilities — see VISUAL-RECOVERY-PLAN.md section 5 */
.ns-measure-hero { max-width: 42ch; }
.ns-measure-body { max-width: 68ch; }
.ns-measure-technical { max-width: 76ch; }

/* 12/8/4-column grid utility for asymmetric editorial layouts the Columns block can't do */
.ns-grid {
	display: grid;
	gap: clamp(16px, 2.5vw, 32px);
	grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 768px) {
	.ns-grid { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 1024px) {
	.ns-grid { grid-template-columns: repeat(12, 1fr); }
}

/* Stitch-rule divider: the brand's construction-line motif, used sparingly as a section
   divider — never as background decoration. */
.ns-stitch-rule {
	border: none;
	border-top: 2px dashed var(--wp--preset--color--industrial-grey);
	opacity: 0.55;
	margin: 0;
}
.ns-stitch-rule--light {
	border-top-color: var(--wp--preset--color--natural-hide);
	opacity: 0.4;
}

/* Material-texture placeholder: used on a product card when no real photo exists yet.
   A restrained diagonal twill-direction hairline pattern in-palette, not visual noise. */
.ns-texture-placeholder {
	background-color: var(--wp--preset--color--warm-canvas);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(17, 19, 18, 0.05) 0px,
		rgba(17, 19, 18, 0.05) 1px,
		transparent 1px,
		transparent 10px
	);
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}
.ns-product-hero-image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--warm-canvas);
}
.ns-product-hero-image__zoom-btn {
	display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative;
}
.ns-product-hero-image__zoom-hint {
	position: absolute; right: 14px; bottom: 14px; z-index: 2;
	display: inline-flex; align-items: center; gap: 5px;
	background: rgba(17, 19, 18, 0.72); color: #fff; font-size: 0.8125rem; font-weight: 600;
	padding: 7px 12px; border-radius: 3px;
	opacity: 0; transition: opacity 0.15s ease;
}
.ns-product-hero-image__zoom-btn:hover .ns-product-hero-image__zoom-hint,
.ns-product-hero-image__zoom-btn:focus-visible .ns-product-hero-image__zoom-hint { opacity: 1; }
.ns-zoom-lightbox {
	position: fixed; inset: 0; z-index: 500; background: rgba(17, 19, 18, 0.92);
	display: flex; align-items: center; justify-content: center; padding: 40px;
}
.ns-zoom-lightbox[hidden] { display: none; }
.ns-zoom-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ns-zoom-lightbox__close {
	position: absolute; top: 20px; right: 20px; width: 44px; height: 44px;
	background: none; border: 1px solid rgba(248, 245, 239, 0.4); border-radius: 4px; color: #fff;
	font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.ns-product-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ns-texture-placeholder__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--industrial-grey);
	background: var(--wp--preset--color--bone-white);
	padding: 4px 8px;
	margin: 10px;
	border: 1px solid var(--wp--preset--color--industrial-grey);
}

/* Section spacing rhythm */
.ns-section-sm { padding-top: var(--wp--preset--spacing--section-sm); padding-bottom: var(--wp--preset--spacing--section-sm); }
.ns-section-md { padding-top: var(--wp--preset--spacing--section-md); padding-bottom: var(--wp--preset--spacing--section-md); }
.ns-section-lg { padding-top: var(--wp--preset--spacing--section-lg); padding-bottom: var(--wp--preset--spacing--section-lg); }

/* ---------- Utility bar + header ---------- */

.ns-utility-bar {
	background: var(--wp--preset--color--carbon-black);
	color: var(--wp--preset--color--warm-canvas);
}
.ns-hero h1 {
	font-size: clamp(2.15rem, 1.2rem + 4.6vw, 5rem);
	overflow-wrap: break-word;
	hyphens: none;
}
@media (max-width: 480px) {
	.ns-utility-bar .wp-block-navigation .wp-block-navigation-item > a.wp-block-navigation-item__content { padding: 12px 6px !important; }
	.ns-hero-copy { padding-left: 20px; padding-right: 20px; }
}
.ns-way-card { padding-top: 22px; }
.wp-block-columns { row-gap: 32px; }
.ns-utility-bar .wp-block-navigation { flex-wrap: wrap; row-gap: 0; }
.ns-utility-bar .wp-block-navigation__container { gap: 0 !important; flex-wrap: wrap; }
.ns-utility-bar .wp-block-navigation-item > a,
.ns-utility-bar .wp-block-navigation-item__content {
	font-size: 0.875rem !important;
	padding: 12px 12px !important;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--natural-hide);
	text-decoration: none;
}
.ns-utility-bar .wp-block-navigation-item > a:hover,
.ns-utility-bar .wp-block-navigation-item > a:focus-visible {
	color: var(--wp--preset--color--antique-brass);
}

/* Two-row header: utility bar (above) + main row. Main row never wraps at desktop —
   the nav collapses to a menu button instead, fixing the ~1024px squeeze bug. */
.ns-main-header {
	position: relative;
	z-index: 60;
	background: var(--wp--preset--color--bone-white);
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wp--preset--color--warm-canvas);
}
.ns-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: nowrap;
}
.ns-site-logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
.ns-site-logo img {
	height: 34px;
	width: auto;
	display: block;
	transition: filter 0.2s ease;
}
/* The logo's navy/cognac colours bake into the PNG pixels, unlike text which just inherits
   `color`. On the homepage the header starts transparent over a dark hero photo, so the logo
   needs to go white there, then revert to its natural colours once scrolled to a solid
   background — same moment the header itself flips from transparent to bone-white. */
body.home .ns-site-header:not(.is-scrolled) .ns-site-logo img { filter: brightness(0) invert(1); }

/* Footer logo: same navy/cognac-baked-into-pixels issue as the header, but the footer's dark
   indigo background never changes, so this filter is permanent, not scroll-conditional. */
.ns-footer-logo { display: inline-block; margin-bottom: 14px; }
.ns-footer-logo img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }
.ns-footer-logo__tagline { max-width: 32ch; font-size: var(--wp--preset--font-size--small); opacity: 0.8; margin: 0; }
.ns-primary-nav {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
.ns-header-cta {
	flex: 0 0 auto;
}
/* Only 4 top-level items — tighten their spacing so the row genuinely fits down to
   1024px instead of fighting core Navigation's own responsive breakpoint (which handles
   true mobile collapse on its own, verified rather than assumed — see VISUAL-QA.md). */
.ns-primary-nav .wp-block-navigation__container {
	gap: 4px !important;
}
.ns-primary-nav .wp-block-navigation-item > a,
.ns-primary-nav .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	padding: 8px 10px !important;
	font-size: 0.9375rem;
	white-space: nowrap;
}
@media (max-width: 1280px) {
	.ns-site-logo img { height: 28px; }
	.ns-header-cta .wp-block-button__link { padding: 10px 16px !important; font-size: 0.9375rem; }
}

/*
 * Core Navigation's own built-in "switch to hamburger" breakpoint sits well below where 4
 * top-level items actually fit inline (verified: still inline and wrapping at 638px). Force
 * our own breakpoint instead of trusting core's default, since core's toggle button and
 * is-menu-open/modal JS behaviour work at any width — only the CSS visibility rule that
 * decides WHEN to show which one needs overriding.
 */
/* Drawer (open state): structured groups, no floating dropdown boxes. */
.ns-primary-nav .ns-nav-cta { display: none !important; }
.ns-primary-nav .is-menu-open {
	background-color: var(--wp--preset--color--bone-white) !important;
	color: var(--wp--preset--color--carbon-black) !important;
	padding: 20px clamp(18px, 5vw, 40px) 40px !important;
}
.ns-primary-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 56px; }
.ns-primary-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; align-items: stretch; width: 100%; }
.ns-primary-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--wp--preset--color--warm-canvas); }
.ns-primary-nav .is-menu-open .wp-block-navigation-item > a,
.ns-primary-nav .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem !important;
	font-weight: 700;
	padding: 16px 0 !important;
	min-height: 52px;
}
.ns-primary-nav .is-menu-open ul.wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 0 12px 12px !important;
	min-width: 0 !important;
	background: transparent !important;
}
.ns-primary-nav .is-menu-open ul.wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; }
.ns-primary-nav .is-menu-open ul.wp-block-navigation__submenu-container a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem !important;
	font-weight: 500;
	padding: 10px 0 !important;
	min-height: 44px;
	color: var(--wp--preset--color--deep-denim);
}
.ns-primary-nav .is-menu-open .ns-nav-cta { display: block !important; border-bottom: 0; margin-top: 24px; }
.ns-primary-nav .is-menu-open .ns-nav-cta a {
	justify-content: center;
	background: var(--wp--preset--color--raw-indigo);
	color: var(--wp--preset--color--bone-white) !important;
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem !important;
	padding: 14px 20px !important;
}
.ns-primary-nav .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--carbon-black); top: 18px; right: clamp(18px, 5vw, 40px); }

@media (max-width: 800px) {
	.ns-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.ns-primary-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}

.ns-primary-nav ul.wp-block-navigation__submenu-container {
	z-index: 100;
	background: var(--wp--preset--color--bone-white);
	border-radius: var(--ns-radius-component, 4px);
	border: 1px solid var(--wp--preset--color--warm-canvas);
	box-shadow: var(--wp--custom--shadow--md);
	padding: 16px;
	min-width: 260px;
}
.ns-primary-nav .wp-block-navigation-item > a {
	font-weight: 600;
}

/* ---------- Hero ---------- */

.ns-hero {
	position: relative;
	overflow: hidden;
}
.ns-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	position: relative;
	min-height: clamp(480px, 70vh, 760px);
}
@media (min-width: 1024px) {
	.ns-hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
}
.ns-hero-copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: clamp(40px, 6vw, 80px) clamp(18px, 4vw, 72px);
}
.ns-hero-imagery {
	position: relative;
	min-height: 320px;
	display: grid;
	grid-template-rows: 1fr 1fr;
}
.ns-hero-imagery__panel {
	position: relative;
	background-size: cover;
	background-position: center;
}
.ns-hero-imagery__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17,19,18,0.35) 0%, rgba(17,19,18,0) 35%);
}
@media (min-width: 1024px) {
	.ns-hero-imagery__panel::after {
		background: linear-gradient(90deg, rgba(17,19,18,0.55) 0%, rgba(17,19,18,0) 45%);
	}
}
.ns-hero-imagery__tag {
	position: absolute;
	left: 20px;
	bottom: 16px;
	z-index: 1;
	color: var(--wp--preset--color--bone-white);
	font-size: var(--wp--preset--font-size--small);
	border-left: 2px solid var(--wp--preset--color--antique-brass);
	padding-left: 10px;
	line-height: 1.3;
}
.ns-hero-imagery__tag strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

/* Proof strip */
.ns-proof-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	border-top: 1px solid rgba(248, 245, 239, 0.2);
	padding-top: 20px;
	margin-top: 8px;
}
.ns-proof-strip__item {
	flex: 1 1 200px;
	padding: 6px 20px 6px 0;
	font-size: 0.9375rem;
	border-right: 1px solid rgba(248, 245, 239, 0.15);
}
.ns-proof-strip__item:last-child { border-right: none; }
@media (max-width: 600px) {
	.ns-proof-strip__item { flex: 1 1 45%; border-right: none; }
}

/* ---------- Category gateway ---------- */

.ns-category-gateway {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3px;
	background: var(--wp--preset--color--carbon-black);
}
@media (min-width: 768px) {
	.ns-category-gateway { grid-template-columns: 1fr 1fr; }
}
.ns-category-gateway__panel {
	position: relative;
	min-height: 460px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(28px, 4vw, 48px);
	color: var(--wp--preset--color--bone-white);
	background-size: cover;
	background-position: center;
	text-decoration: none;
}
.ns-category-gateway__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,19,18,0.05) 30%, rgba(17,19,18,0.85) 100%);
}
.ns-category-gateway__panel > * { position: relative; z-index: 1; }
.ns-category-gateway__eyebrow {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--antique-brass);
	margin: 0 0 6px;
}
.ns-category-gateway__panel h2 {
	margin: 0 0 10px;
	font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem);
	color: var(--wp--preset--color--bone-white);
}
.ns-category-gateway__panel p {
	margin: 0 0 16px;
	max-width: 42ch;
	color: var(--wp--preset--color--warm-canvas);
}
.ns-category-gateway__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	border-bottom: 1px solid var(--wp--preset--color--antique-brass);
	padding-bottom: 2px;
	width: fit-content;
}

/* ---------- Product cards ---------- */

.ns-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.5vw, 32px);
}
@media (max-width: 1024px) {
	.ns-product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.ns-product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.ns-product-card {
	display: block;
	position: relative;
	border: 1px solid var(--wp--preset--color--warm-canvas);
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--bone-white);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ns-product-card:hover,
.ns-product-card:focus-within {
	border-color: var(--wp--preset--color--leather-cognac);
	box-shadow: var(--wp--custom--shadow--md);
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.ns-product-card { transition: none; }
	.ns-product-card:hover, .ns-product-card:focus-within { transform: none; }
}
.ns-product-card__image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--warm-canvas);
	position: relative;
}
.ns-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}
.ns-product-card:hover .ns-product-card__image img {
	transform: scale(1.035);
}
/* Second photo crossfades in on hover, only present when a product actually has one. */
.ns-product-card__img-secondary {
	position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s ease;
}
.ns-product-card__img-secondary img { transform: none !important; }
.ns-product-card:hover .ns-product-card__img-secondary,
.ns-product-card:focus-within .ns-product-card__img-secondary { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ns-product-card__img-secondary { transition: none; } }
.ns-product-card__body {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--wp--preset--color--warm-canvas);
}
.ns-product-card__ref {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--industrial-grey);
	margin-bottom: 4px;
	letter-spacing: 0.02em;
}
.ns-product-card__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	margin: 0 0 4px;
	font-size: 1.0625rem;
}
.ns-product-card__attrs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--industrial-grey);
	margin: 0;
	letter-spacing: 0.01em;
}
.ns-product-card__moq {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--leather-cognac);
	font-weight: 600;
	margin: 4px 0 0;
	letter-spacing: 0.01em;
}
.ns-product-card__actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}
.ns-product-card__quote-btn {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	border: 1px solid var(--wp--preset--color--carbon-black);
	background: transparent;
	padding: 6px 10px;
	border-radius: 3px;
	cursor: pointer;
	position: relative;
	z-index: 2;
}
.ns-product-card__quote-btn:hover {
	background: var(--wp--preset--color--carbon-black);
	color: var(--wp--preset--color--bone-white);
}
.ns-product-card__quote-btn.ns-is-added {
	background: var(--wp--preset--color--deep-denim); border-color: var(--wp--preset--color--deep-denim);
	color: var(--wp--preset--color--bone-white);
}
.ns-product-card__quote-btn-label::before {
	content: ""; display: inline-block; width: 0; height: 0; overflow: hidden;
}
.ns-is-added .ns-product-card__quote-btn-label::before {
	content: "✓ "; width: auto; height: auto;
}

/* ---------- Process / numbered stages ---------- */

.ns-process {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 2px dashed var(--wp--preset--color--industrial-grey);
	opacity-transition: none;
}
@media (min-width: 900px) {
	.ns-process { grid-template-columns: repeat(4, 1fr); }
}
.ns-process__stage {
	padding: 28px 24px 0 0;
	border-left: 0;
}
@media (min-width: 900px) {
	.ns-process__stage {
		border-left: 1px solid var(--wp--preset--color--industrial-grey);
		padding-left: 24px;
	}
	.ns-process__stage:first-child { border-left: none; padding-left: 0; }
}
.ns-process__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	font-weight: 800;
	color: var(--wp--preset--color--leather-cognac);
	line-height: 1;
	margin-bottom: 12px;
}

.ns-process-intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	margin-bottom: clamp(32px, 5vw, 56px);
}
@media (min-width: 900px) {
	.ns-process-intro { grid-template-columns: 1fr 1fr; }
}
.ns-process-intro h2 { margin: 0 0 16px; }
.ns-process-intro img {
	width: 100%;
	height: clamp(220px, 28vw, 340px);
	object-fit: cover;
	display: block;
	border: 1px solid var(--wp--preset--color--industrial-grey);
}
.ns-process__stage h3 { margin: 0 0 8px; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Materials swatch grid: 4-up on desktop, 2-up tablet, 1-up mobile (a 12-col span of 4 would
   orphan the fourth item). */
.ns-swatch-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(16px, 2.5vw, 32px);
	margin-top: 32px;
}
@media (min-width: 640px) { .ns-swatch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ns-swatch-grid { grid-template-columns: repeat(4, 1fr); } }

.ns-audience-grid {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 32px;
	border-top: 1px solid var(--wp--preset--color--carbon-black);
}
@media (min-width: 640px) { .ns-audience-grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
@media (min-width: 1024px) { .ns-audience-grid { grid-template-columns: repeat(4, 1fr); } }
.ns-audience-grid__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 0 24px;
	border-bottom: 1px solid var(--wp--preset--color--warm-canvas);
	text-decoration: none;
	color: var(--wp--preset--color--carbon-black);
}
.ns-audience-grid__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
}
.ns-audience-grid__item:hover .ns-audience-grid__name,
.ns-audience-grid__item:focus-visible .ns-audience-grid__name { text-decoration-color: var(--wp--preset--color--leather-cognac); }
.ns-audience-grid__desc { font-size: var(--wp--preset--font-size--small); color: #55585a; max-width: 32ch; }

/* Footer: links inherit the light text colour instead of the global dark link colour. */
.ns-main-footer a {
	color: var(--wp--preset--color--natural-hide);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ns-main-footer a:hover,
.ns-main-footer a:focus-visible {
	color: var(--wp--preset--color--bone-white);
}
.ns-main-footer .wp-block-button__link { color: var(--wp--preset--color--bone-white); text-decoration: none; }
.ns-main-footer ul { list-style: none; padding: 0; margin: 0; }
.ns-main-footer li { margin-bottom: 8px; }

.ns-product-summary__ref { margin: 0 0 4px; color: var(--wp--preset--color--industrial-grey); font-size: var(--wp--preset--font-size--small); }
.ns-product-summary__category { margin: 0 0 12px; color: var(--wp--preset--color--leather-cognac); font-weight: 600; }

/* ---------- Category hero ---------- */

.ns-category-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	color: var(--wp--preset--color--bone-white);
	background-color: var(--wp--preset--color--carbon-black);
}
.ns-category-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17,19,18,0.88) 0%, rgba(17,19,18,0.7) 45%, rgba(17,19,18,0.25) 100%);
}
.ns-category-hero__inner {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(48px, 8vw, 104px) clamp(18px, 4vw, 72px);
}
.ns-category-hero h1 {
	color: var(--wp--preset--color--bone-white);
	margin: 0 0 16px;
	font-size: clamp(2.4rem, 1.5rem + 4vw, 4.5rem);
}
.ns-category-hero__desc {
	max-width: 54ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--warm-canvas);
}

/* Filter controls: rectangular, labelled, no raw browser chrome */
.ns-filter-toggle { display: none; }
@media (max-width: 1024px) {
	.ns-js .ns-filter-toggle {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 18px;
		margin-bottom: 16px;
		background: transparent;
		border: 1.5px solid var(--wp--preset--color--carbon-black);
		border-radius: 3px;
		font: 600 1rem var(--wp--preset--font-family--body);
		cursor: pointer;
	}
	.ns-js .ns-filter-panel #ns-filter-form { display: none; }
	.ns-js .ns-filter-panel.is-open #ns-filter-form { display: block; }
}
.ns-filter-panel input[type="search"],
.ns-sort-form select {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--industrial-grey);
	border-radius: 3px;
	background: var(--wp--preset--color--bone-white);
	font: 1rem var(--wp--preset--font-family--body);
}
.ns-sort-form { display: flex; align-items: center; gap: 10px; }
.ns-sort-form select { width: auto; }
.ns-filter-panel .wp-block-button__link { margin-top: 8px; }

/* ---------- Archive layout ---------- */

.ns-archive-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 48px;
	align-items: start;
}
@media (max-width: 1024px) {
	.ns-archive-layout { grid-template-columns: 1fr; }
}
.ns-filter-panel fieldset {
	border: none;
	padding: 0;
	margin: 0 0 24px;
}
.ns-filter-panel legend {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	margin-bottom: 8px;
	padding: 0;
}
.ns-filter-panel label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	min-height: 44px;
}
.ns-filter-panel input[type="checkbox"] {
	width: 20px;
	height: 20px;
}
.ns-archive-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--warm-canvas);
}

/* ---------- Quote list bar ---------- */

.ns-quote-bar {
	position: sticky;
	bottom: 0;
	background: var(--wp--preset--color--raw-indigo);
	color: var(--wp--preset--color--bone-white);
	padding: 14px clamp(18px, 4vw, 72px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 50;
	margin-top: 32px;
}
.ns-quote-bar a {
	color: var(--wp--preset--color--bone-white);
	font-weight: 600;
}

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

.ns-form { max-width: 1040px; }
.ns-form input,
.ns-form select,
.ns-form textarea { box-sizing: border-box; max-width: 100%; }
.ns-form .ns-field { min-width: 0; }
/* Field grid lives at the STEP level (.ns-rfq-step), not the form level — the wizard JS moves
   every .ns-field into one of three step containers, so the form itself is just a simple block
   stacking progress → current step → nav. If JS never runs (fails to load), #ns-rfq-form's own
   .ns-field children still get this same grid treatment directly, so the form is still fully
   usable as one long 2-column page. */
#ns-rfq-form,
.ns-rfq-step {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 40px;
}
@media (min-width: 800px) {
	#ns-rfq-form, .ns-rfq-step { grid-template-columns: 1fr 1fr; }
}
.ns-rfq-step[hidden] { display: none; }
#ns-rfq-form > h2,
#ns-rfq-form > input[type="hidden"],
#ns-rfq-form > .ns-honeypot-field,
#ns-rfq-form > .ns-field:has(textarea),
#ns-rfq-form > .ns-field:has(input[type="file"]),
#ns-rfq-form > .ns-field:has(input[type="checkbox"]),
#ns-rfq-form > button[type="submit"],
.ns-rfq-step > .ns-field:has(textarea),
.ns-rfq-step > .ns-field:has(input[type="file"]),
.ns-rfq-step > .ns-field:has(input[type="checkbox"]),
.ns-rfq-step__title {
	grid-column: 1 / -1;
}
#ns-rfq-form > h2 { margin: 24px 0 20px; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--warm-canvas); }
#ns-rfq-form > h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
#ns-rfq-form > button[type="submit"] { justify-self: start; min-height: 52px; padding: 0 36px; font-size: 1.0625rem; cursor: pointer; margin-top: 8px; }

/* Wizard chrome */
.ns-rfq-progress {
	grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 32px;
	padding-bottom: 20px; border-bottom: 1px solid var(--wp--preset--color--warm-canvas);
}
.ns-rfq-progress__step { font-size: 0.9375rem; color: var(--wp--preset--color--industrial-grey); font-weight: 600; }
.ns-rfq-progress__step.ns-is-current { color: var(--wp--preset--color--carbon-black); }
.ns-rfq-progress__step.ns-is-done { color: var(--wp--preset--color--deep-denim); }
.ns-rfq-step__title { font-size: 1.25rem; margin: 0 0 20px; }
.ns-rfq-nav { grid-column: 1 / -1; display: flex; gap: 14px; margin-top: 8px; }
#ns-rfq-form > button[type="submit"] { grid-column: 1 / -1; }
/* Same [hidden]-vs-explicit-display gotcha as .ns-rfq-step: .ns-btn and the button-arrow rule
   both set their own `display`, which silently cancels the `hidden` attribute unless overridden. */
.ns-rfq-nav [hidden], #ns-rfq-form > button[type="submit"][hidden] { display: none; }
.ns-form input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex-shrink: 0; }
.ns-form label:has(input[type="checkbox"]) {
	font-weight: 400;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	line-height: 1.5;
	padding: 13px 4px;
	cursor: pointer;
}
.ns-quote-list { max-width: 1040px; margin: 0 0 32px; }
.ns-quote-list-items { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--wp--preset--color--carbon-black); }
.ns-quote-list-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--warm-canvas);
}
@media (min-width: 700px) { .ns-quote-list-item { grid-template-columns: 1fr 220px auto; gap: 24px; } }
.ns-quote-list-item span { font-family: var(--wp--preset--font-family--heading); font-weight: 700; }
.ns-quote-list-item input {
	box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--industrial-grey); border-radius: 3px;
	background: var(--wp--preset--color--bone-white); font: 1rem var(--wp--preset--font-family--body);
}
.ns-quote-list-item button {
	min-height: 44px; padding: 0 14px; background: transparent; cursor: pointer;
	border: 1px solid var(--wp--preset--color--carbon-black); border-radius: 3px; font: 600 0.9375rem var(--wp--preset--font-family--body);
}
.ns-quote-list-item button:hover { background: var(--wp--preset--color--carbon-black); color: var(--wp--preset--color--bone-white); }
.ns-quote-list-empty, .ns-quote-list-hint { color: #55585a; max-width: 68ch; }
.ns-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}
.ns-form input:not([type="checkbox"]):not([type="radio"]),
.ns-form select,
.ns-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--wp--preset--color--industrial-grey);
	border-radius: var(--ns-radius-component, 4px);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	background: var(--wp--preset--color--bone-white);
	color: var(--wp--preset--color--carbon-black);
	min-height: 44px;
}
.ns-form textarea { min-height: 120px; }
.ns-form .ns-field { margin-bottom: 24px; }
.ns-form .ns-field-hint {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--industrial-grey);
	margin-top: 4px;
}
.ns-form .ns-error-summary {
	border: 2px solid var(--wp--preset--color--oxide-brown);
	padding: 16px 20px;
	margin-bottom: 24px;
	background: var(--wp--preset--color--warm-canvas);
}
.ns-form [aria-invalid="true"] {
	border-color: var(--wp--preset--color--oxide-brown);
}
.ns-honeypot-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

.ns-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0;
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--industrial-grey);
}
.ns-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 4px;
	color: var(--wp--preset--color--industrial-grey);
}
.ns-breadcrumbs a {
	color: var(--wp--preset--color--deep-denim);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =====================================================================
   Layout language rebuild (0.3.0): full-screen photo hero, minimal header,
   very large light wide-set headings, rounded photo tile rows, dashed-rule
   split blocks. All copy, photography, type files and code here are original
   or open-licence.
   ===================================================================== */

h1, h2, h3, h4 { font-stretch: 112%; }
.ns-product-card__name, .ns-audience-grid__name, .ns-process__number, .ns-rule-list strong,
.ns-why-card__title, .ns-hero-imagery__tag strong { font-stretch: 100%; }
.ns-wrap { max-width: 1440px; margin: 0 auto; padding-left: clamp(18px, 4vw, 72px); padding-right: clamp(18px, 4vw, 72px); }
.ns-center-heading {
	text-align: center;
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
	font-stretch: 125%;
	font-weight: 300;
	max-width: 20ch;
	margin: 0 auto clamp(32px, 5vw, 64px);
	text-wrap: balance;
}
.ns-display-heading {
	text-align: center;
	font-size: clamp(2.5rem, 0.6rem + 7.4vw, 6.5rem);
	font-stretch: 125%;
	font-weight: 300;
	line-height: 1;
	margin: 0 0 clamp(28px, 4vw, 56px);
}
.ns-two-col-text { display: grid; gap: 20px 8vw; margin-top: clamp(32px, 5vw, 56px); }
@media (min-width: 800px) { .ns-two-col-text { grid-template-columns: 1fr 1fr; } }
.ns-two-col-text p { margin: 0; color: #494949; font-size: 1.125rem; max-width: 60ch; }
.ns-more-link { text-align: center; margin: 32px 0 0; }
.ns-more-link a { color: var(--wp--preset--color--carbon-black); text-underline-offset: 4px; }

/* Buttons used in the new sections */
.ns-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 26px; border-radius: 3px;
	font: 600 1rem var(--wp--preset--font-family--body);
	text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ns-btn--light { background: #fff; color: var(--wp--preset--color--carbon-black); }
.ns-btn--light:hover { background: var(--wp--preset--color--natural-hide); }
.ns-btn--ghost { border-color: #fff; color: #fff; background: transparent; }
.ns-btn--ghost:hover { background: #fff; color: var(--wp--preset--color--carbon-black); }
.ns-btn--dark { background: var(--wp--preset--color--raw-indigo); color: var(--wp--preset--color--bone-white); }
.ns-btn--dark:hover { background: var(--wp--preset--color--leather-cognac); }

/* Slim utility bar: email/phone/WhatsApp/quote, sits above the main header. Normal document
   flow (not fixed) — it simply scrolls away with the page, same as most utility bars; the main
   header below it is what stays sticky/shrinks (see .ns-site-header). */
.ns-utility-bar-slim {
	background: var(--wp--preset--color--carbon-black);
	color: var(--wp--preset--color--natural-hide);
	font-size: 0.8125rem;
	position: relative;
	z-index: 61;
}
.ns-utility-bar-slim__row {
	display: flex; align-items: center; gap: 20px;
	padding: 8px clamp(18px, 4vw, 72px);
}
.ns-utility-bar-slim a { color: inherit; text-decoration: none; }
.ns-utility-bar-slim a:hover, .ns-utility-bar-slim a:focus-visible { color: var(--wp--preset--color--antique-brass); }
.ns-util-link { display: inline-flex; align-items: center; gap: 6px; }
.ns-util-link svg { opacity: 0.85; }
.ns-utility-bar-slim__cta {
	margin-left: auto; font-weight: 600;
	border: 1px solid rgba(248, 245, 239, 0.35); padding: 5px 14px; border-radius: 3px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ns-utility-bar-slim__cta:hover, .ns-utility-bar-slim__cta:focus-visible {
	border-color: var(--wp--preset--color--antique-brass); background: rgba(248, 245, 239, 0.06);
}
@media (max-width: 780px) { .ns-utility-bar-slim a:not(.ns-utility-bar-slim__cta) { display: none; } }

/* Header: minimal bar, transparent over the homepage hero, solid elsewhere and once scrolled.
   On the homepage it's fixed and starts just below the utility bar (--ns-util-h); once
   scrolled, the utility bar has already scrolled out of flow, so the header snaps to top:0 to
   avoid leaving a gap. */
:root { --ns-util-h: 40px; }
.ns-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	/* Must outrank .ns-utility-bar-slim (z-index 61) — position:fixed/sticky always creates a
	   new stacking context, so anything nested inside this header (including the mega-nav
	   drawer at z-index 200) is capped at whatever this header's own z-index resolves to when
	   compared against sibling stacking contexts like the utility bar above it. */
	z-index: 70;
	background: var(--wp--preset--color--bone-white);
	color: var(--wp--preset--color--carbon-black);
	border-bottom: 1px solid var(--wp--preset--color--warm-canvas);
	transition: background-color 0.2s ease, color 0.2s ease, top 0.2s ease;
}
body.home .ns-site-header {
	position: fixed; left: 0; right: 0; top: var(--ns-util-h);
	background: transparent; color: #fff; border-bottom-color: transparent;
}
body.home .ns-site-header.is-scrolled {
	top: 0;
	background: var(--wp--preset--color--bone-white);
	color: var(--wp--preset--color--carbon-black);
	border-bottom-color: var(--wp--preset--color--warm-canvas);
}
@media (max-width: 780px) { :root { --ns-util-h: 36px; } }
.ns-site-header .ns-header-row { max-width: none; margin: 0; padding: 14px clamp(18px, 4vw, 72px); gap: 24px; flex-wrap: nowrap; }
.ns-header-actions { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; }
.ns-header-quote { color: inherit; text-decoration: none; font-size: 0.9375rem; white-space: nowrap; }
.ns-header-quote:hover { text-decoration: underline; text-underline-offset: 4px; }
.ns-header-cta-box {
	background: #fff; color: var(--wp--preset--color--carbon-black);
	padding: 11px 18px; border-radius: 3px; font-weight: 600; font-size: 0.9375rem;
	text-decoration: none; white-space: nowrap; border: 1px solid transparent;
}
.ns-site-header:not(.is-scrolled) .ns-header-cta-box:hover { background: var(--wp--preset--color--natural-hide); }
body:not(.home) .ns-header-cta-box,
body.home .ns-site-header.is-scrolled .ns-header-cta-box { background: var(--wp--preset--color--raw-indigo); color: var(--wp--preset--color--bone-white); }
@media (max-width: 620px) { .ns-header-quote, .ns-header-cta-box { display: none; } }

.ns-header-whatsapp { display: inline-flex; align-items: center; gap: 6px; }
.ns-header-whatsapp::before {
	content: ""; width: 15px; height: 15px; flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.004 2.667c-7.363 0-13.333 5.97-13.333 13.333 0 2.353.615 4.66 1.784 6.687L2.667 29.333l6.81-1.756a13.27 13.27 0 0 0 6.527 1.72h.006c7.362 0 13.333-5.97 13.333-13.333S23.366 2.667 16.004 2.667Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.004 2.667c-7.363 0-13.333 5.97-13.333 13.333 0 2.353.615 4.66 1.784 6.687L2.667 29.333l6.81-1.756a13.27 13.27 0 0 0 6.527 1.72h.006c7.362 0 13.333-5.97 13.333-13.333S23.366 2.667 16.004 2.667Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Fade-and-rise on scroll. Elements opt in via [data-ns-reveal] in markup; JS adds
   .ns-revealed once in view (or immediately, doing nothing motion-wise, when the visitor has
   prefers-reduced-motion set). Base state only applies once JS has run (.ns-js on <html>), so
   content is never hidden if JS fails to load. */
.ns-js [data-ns-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.2s ease, transform 0.2s ease; }
.ns-js [data-ns-reveal].ns-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .ns-js [data-ns-reveal] { opacity: 1; transform: none; transition: none; } }
/* Two-line menu button, drawn in CSS so it inherits the header colour */
.ns-site-header .ns-primary-nav .wp-block-navigation__responsive-container-open {
	display: flex !important; width: 44px; height: 44px; align-items: center; justify-content: center;
	background: transparent; color: inherit; padding: 0; border: 0;
}
.ns-site-header .ns-primary-nav .wp-block-navigation__responsive-container-open svg { display: none; }
.ns-site-header .ns-primary-nav .wp-block-navigation__responsive-container-open::before {
	content: ""; display: block; width: 36px; height: 12px;
	background:
		linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) bottom right / 68% 2px no-repeat;
}
.ns-site-header .ns-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
.ns-primary-nav .is-menu-open .wp-block-navigation__responsive-container-content { max-width: 860px; margin: 0 auto; }
.ns-primary-nav .is-menu-open .wp-block-navigation-item > a,
.ns-primary-nav .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { font-stretch: 100%; }
.ns-primary-nav .is-menu-open .ns-nav-utility a { color: var(--wp--preset--color--deep-denim); }

/* Full-screen photo hero */
.ns-hero-full { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; color: #fff; overflow: hidden; background: var(--wp--preset--color--carbon-black); }
/* The homepage header is position:fixed (transparent-over-hero effect, see .ns-site-header),
   which means it's painted OVER whatever content is at viewport y:0 at all times, regardless of
   that content's own padding — normal-flow padding does not create clearance from a fixed
   element. The section right after the hero needs real extra top padding sized to the header's
   height, or its heading renders partly behind the fixed header the moment that boundary
   scrolls to the top of the viewport. Found live: "Why Work With NovoStitches" was clipped. */
body.home .ns-hero-full + * { padding-top: calc(var(--wp--preset--spacing--section-md) + 90px) !important; }
.ns-hero-full__bg { position: absolute; inset: 0; background-size: cover; background-position: center 42%; }
.ns-hero-full__bg::after { content: ""; position: absolute; inset: 0; background: rgba(17, 19, 18, 0.45); }
.ns-hero-full__inner { position: relative; z-index: 2; text-align: center; max-width: 1020px; padding: 130px clamp(18px, 4vw, 72px) 130px; }
.ns-hero-full h1 {
	color: #fff; margin: 0 0 22px; font-weight: 400; font-stretch: 125%;
	font-size: clamp(1.9rem, 1.1rem + 3.5vw, 4.25rem); line-height: 1.12; text-wrap: balance; overflow-wrap: break-word;
}
.ns-hero-full__lead { max-width: 58ch; margin: 0 auto 30px; font-size: var(--wp--preset--font-size--lead); color: var(--wp--preset--color--warm-canvas); }
.ns-hero-full__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ns-hero-full__cue {
	position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3;
	width: 44px; height: 64px; display: grid; place-items: center;
	border: 1.5px solid rgba(255, 255, 255, 0.75); border-radius: 3px;
}
.ns-hero-full__cue span { width: 11px; height: 11px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-2px, -2px); }
.ns-hero-full__cue:hover { background: rgba(255, 255, 255, 0.15); }

/* Photo tile rows */
.ns-tile-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 20px); }
@media (min-width: 900px) {
	.ns-tile-row--stagger { grid-template-columns: repeat(5, 1fr); align-items: start; }
	.ns-tile-row--labelled { grid-template-columns: repeat(4, 1fr); }
}
.ns-tile { position: relative; display: block; overflow: hidden; border-radius: 14px; background: var(--wp--preset--color--warm-canvas); }
.ns-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ns-tile--tall { aspect-ratio: 3 / 4.4; }
.ns-tile--short { aspect-ratio: 3 / 3.9; margin-top: 18px; }
.ns-tile--tallest { aspect-ratio: 3 / 4.7; margin-top: 34px; }
@media (max-width: 899px) {
	.ns-tile--short, .ns-tile--tallest { margin-top: 0; }
	.ns-tile-row--stagger .ns-tile:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
.ns-tile--label { aspect-ratio: 3 / 4.2; text-decoration: none; }
.ns-tile--label::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 19, 18, 0.78), rgba(17, 19, 18, 0) 48%); }
.ns-tile--label:hover img, .ns-tile--label:focus-visible img { transform: scale(1.04); }
.ns-tile__label {
	position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: #fff;
	font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-stretch: 112%;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.5rem); line-height: 1.15;
}
@media (prefers-reduced-motion: reduce) { .ns-tile img { transition: none; } .ns-tile--label:hover img { transform: none; } }

/* Split block: dashed rule + photo left, copy and rule list right */
.ns-split { display: grid; gap: clamp(24px, 5vw, 80px); align-items: start; }
@media (min-width: 900px) { .ns-split { grid-template-columns: 1fr 1fr; } }
.ns-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; margin-top: 24px; display: block; }
.ns-split__copy h2 { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); font-stretch: 125%; font-weight: 300; margin: 0 0 20px; }
.ns-split__copy > p { color: #494949; max-width: 56ch; }
.ns-rule-list { list-style: none; margin: 28px 0 32px; padding: 0; }
.ns-rule-list li { border-top: 1px dashed var(--wp--preset--color--industrial-grey); }
.ns-rule-list li:last-child { border-bottom: 1px dashed var(--wp--preset--color--industrial-grey); }
.ns-rule-list a { display: grid; gap: 4px; padding: 18px 0; text-decoration: none; color: var(--wp--preset--color--carbon-black); }
.ns-rule-list a:hover strong, .ns-rule-list a:focus-visible strong { text-decoration: underline; text-underline-offset: 4px; }
.ns-rule-list strong { font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: 1.125rem; }
.ns-rule-list span { color: #55585a; }

/* Why cards */
/* auto-fit, not a hardcoded column count — this class is reused by nscards() call sites with
   varying item counts (2, 3, 4...), so it needs to lay out cleanly regardless of how many. */
.ns-why-grid { display: grid; gap: clamp(20px, 2.5vw, 32px); grid-template-columns: 1fr; }
@media (min-width: 620px) { .ns-why-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.ns-why-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--wp--preset--color--carbon-black); }
.ns-why-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--wp--preset--color--warm-canvas); }
.ns-why-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ns-why-card:hover .ns-why-card__img img { transform: scale(1.04); }
.ns-why-card__title { font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: 1.25rem; margin-top: 8px; }
.ns-why-card__text { color: #55585a; max-width: 40ch; }
.ns-why-card__cta { width: fit-content; border-bottom: 1px solid var(--wp--preset--color--leather-cognac); font-weight: 600; }

.wp-site-blocks > * { margin-block-start: 0 !important; }
.ns-hero-full__bg::after { background: rgba(17, 19, 18, 0.55); }

/* ---------- Inner pages, materials, resources (0.4.0) ---------- */

.ns-category-hero__eyebrow { margin: 0 0 12px; color: var(--wp--preset--color--natural-hide); font-size: 0.9375rem; }
.ns-page-main .wp-block-post-content > :where(:not(.ns-band):not(.ns-wrap):not(.alignfull)) {
	max-width: 1440px; margin-left: auto; margin-right: auto;
	padding-left: clamp(18px, 4vw, 72px); padding-right: clamp(18px, 4vw, 72px);
	box-sizing: border-box;
}
.ns-crumbs { padding-top: 24px; }
.ns-crumbs .ns-breadcrumbs ol { margin-bottom: 0; }

.ns-band { padding-top: var(--wp--preset--spacing--section-md); padding-bottom: var(--wp--preset--spacing--section-md); }
.ns-band--tint { background: var(--wp--preset--color--warm-canvas); }
.ns-band h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.75rem); font-stretch: 125%; font-weight: 300; margin: 0 0 20px; max-width: 24ch; text-wrap: balance; }
.ns-band h3 { font-size: 1.25rem; margin: 0 0 8px; }
.ns-band p { max-width: 64ch; color: #333; }
.ns-band .ns-lead { font-size: var(--wp--preset--font-size--lead); color: #494949; max-width: 60ch; }
.ns-band .ns-two-col-text { margin-top: 24px; }
.ns-band .ns-btn { margin-top: 8px; }
.ns-band .ns-split { margin-top: 8px; }
.ns-band .ns-rule-list { max-width: 640px; }
.ns-band .ns-why-grid { margin-top: 24px; }
.ns-band ul.ns-bullets { margin: 0 0 20px; padding-left: 1.2em; max-width: 64ch; }
.ns-band ul.ns-bullets li { margin-bottom: 6px; color: #333; }

.ns-definition-grid { display: grid; gap: 0 clamp(24px, 5vw, 72px); margin-top: 24px; }
@media (min-width: 800px) { .ns-definition-grid { grid-template-columns: 1fr 1fr; } }
.ns-definition-grid > div { border-top: 1px dashed var(--wp--preset--color--industrial-grey); padding: 16px 0 20px; }
.ns-definition-grid strong { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: 1.125rem; margin-bottom: 4px; }
.ns-definition-grid span { color: #494949; }

.ns-article-layout { display: grid; gap: clamp(24px, 5vw, 72px); padding-top: var(--wp--preset--spacing--section-md); padding-bottom: var(--wp--preset--spacing--section-md); align-items: start; }
@media (min-width: 960px) { .ns-article-layout { grid-template-columns: minmax(0, 1fr) 360px; } }
.ns-prose { max-width: 70ch; }
.ns-prose h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-stretch: 112%; margin: 1.8em 0 0.5em; }
.ns-prose h2:first-child { margin-top: 0; }
.ns-prose p, .ns-prose li { color: #333; font-size: 1.0625rem; line-height: 1.7; }
.ns-prose ul, .ns-prose ol { padding-left: 1.2em; }
.ns-prose li { margin-bottom: 6px; }
.ns-prose a { color: var(--wp--preset--color--deep-denim); }
.ns-facts { border-top: 2px dashed var(--wp--preset--color--industrial-grey); padding-top: 20px; }
@media (min-width: 960px) { .ns-facts { position: sticky; top: 100px; } }
.ns-facts h2 { font-size: 1.25rem; margin: 0 0 14px; }
.ns-facts dl { margin: 0 0 16px; display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; }
.ns-facts dt { font-weight: 600; }
.ns-facts dd { margin: 0; color: #494949; }
.ns-facts__note { font-size: 0.9375rem; color: #55585a; }
.ns-article { padding-top: 24px; padding-bottom: var(--wp--preset--spacing--section-md); }
.ns-article .ns-prose { margin-left: auto; margin-right: auto; }
.ns-article-meta { max-width: 70ch; margin: 0 auto 20px; color: #55585a; }

.ns-materials-index { padding-bottom: 0; }
.ns-index-group { margin-bottom: clamp(40px, 6vw, 80px); }
.ns-index-group__title { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); font-weight: 300; font-stretch: 125%; margin: 0 0 8px; }
.ns-index-group__note { color: #55585a; margin: 0 0 8px; }
.ns-why-grid--index { margin-top: 24px; }
.ns-why-grid--index .ns-why-card__cta { margin-top: 4px; }

.ns-faq details { border-top: 1px dashed var(--wp--preset--color--industrial-grey); padding: 4px 0; max-width: 820px; }
.ns-faq details:last-child { border-bottom: 1px dashed var(--wp--preset--color--industrial-grey); }
.ns-faq summary {
	cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
	font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: 1.125rem;
}
.ns-faq summary::-webkit-details-marker { display: none; }
.ns-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; }
.ns-faq details[open] summary::after { content: "\2212"; }
.ns-faq details p { margin: 0 0 18px; max-width: 64ch; color: #333; }

.ns-contact-grid { display: grid; gap: clamp(24px, 5vw, 72px); }
@media (min-width: 900px) { .ns-contact-grid { grid-template-columns: 1fr 1fr; } }
.ns-contact-card { border-top: 2px dashed var(--wp--preset--color--industrial-grey); padding-top: 18px; }
.ns-contact-card h3 { font-size: 1.125rem; margin: 0 0 8px; }
.ns-search-results .wp-block-search { max-width: 640px; margin-bottom: 32px; }
.ns-search-results .wp-block-search__inside-wrapper { gap: 10px; }
.ns-search-results input[type="search"] { min-height: 48px; padding: 8px 14px; border: 1px solid var(--wp--preset--color--industrial-grey); border-radius: 3px; font: 1rem var(--wp--preset--font-family--body); }
.ns-search-results .wp-block-search__button { min-height: 48px; padding: 0 22px; border-radius: 3px; }
.ns-search-results .wp-block-post-title { font-size: 1.25rem; margin: 24px 0 4px; }

/* Vary the crop of repeated temporary photos on index grids so they do not read as duplicates. */
.ns-why-grid--index .ns-why-card:nth-child(3n+2) .ns-why-card__img img { object-position: 15% 30%; transform: scale(1.35); transform-origin: 20% 30%; }
.ns-why-grid--index .ns-why-card:nth-child(3n+3) .ns-why-card__img img { object-position: 85% 70%; transform: scale(1.25); transform-origin: 80% 70%; }
.ns-why-grid--index .ns-why-card:hover .ns-why-card__img img { transform: scale(1.4); }
.ns-why-card__img.ns-texture-placeholder { position: relative; }

.ns-article-layout > .wp-block-post-content, .ns-article > .wp-block-post-content { margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; max-width: 70ch; }
.ns-article > .wp-block-post-content { margin-left: auto !important; margin-right: auto !important; }

/* ---------- Product pages (0.5.0) ---------- */

.ns-btn--line { background: transparent; color: var(--wp--preset--color--raw-indigo); border-color: var(--wp--preset--color--raw-indigo); }
.ns-btn--line:hover { background: var(--wp--preset--color--raw-indigo); color: var(--wp--preset--color--bone-white); }
.ns-band .ns-btn { margin: 0 8px 8px 0; }

.ns-product-top { padding-top: 12px; padding-bottom: var(--wp--preset--spacing--section-sm); }
.ns-product-top .wp-block-columns { align-items: flex-start; }
/* Sticky enquiry panel: the right column (name/excerpt/Add to Quote/facts) stays in view while
   the left column's image and any long description scroll past it — desktop only, columns
   stack on mobile anyway so sticky would do nothing useful there. */
@media (min-width: 782px) {
	.ns-product-top .wp-block-column:nth-child(2) {
		position: sticky;
		top: 96px; /* clears the sticky main header (~70-88px depending on scroll state) with a margin */
		align-self: flex-start;
	}
}
.ns-product-top .wp-block-post-title { margin: 0 0 12px; }
.ns-product-top .wp-block-post-excerpt { margin: 0 0 20px; color: #494949; }
.ns-facts--product { position: static; margin-top: 28px; }
.ns-facts--product dl { grid-template-columns: minmax(96px, max-content) 1fr; }
.ns-product-after { padding-bottom: var(--wp--preset--spacing--section-sm); }
.ns-product-after:empty { display: none; }

.ns-figure { margin: 24px 0 0; }
.ns-figure img { margin-top: 0; }
.ns-figure figcaption { margin-top: 10px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--industrial-grey); }

.ns-band .ns-two-col-text h3 { font-size: 1.125rem; margin: 0 0 10px; }
.ns-band .ns-two-col-text h3:not(:first-child) { margin-top: 24px; }
.ns-band .ns-two-col-text ul { margin-top: 0; }