/*
 * Northside: homepage sections (block patterns).
 *
 * Values copied from design/desktop/index.html and design/mobile/index.html.
 * Font sizes are fluid (exact at 390px and 1440px); layouts switch at 782px.
 */

:root {
	--ns-sec: clamp(64px, 43.2px + 5.3333vw, 120px);
	--ns-eyebrow-size: clamp(14px, 13.2571px + 0.1905vw, 16px);
	--ns-eyebrow-gap: clamp(10px, 8.5143px + 0.381vw, 14px);
	--ns-eyebrow-bar: clamp(32px, 26.0571px + 1.5238vw, 48px);
	--ns-arrow: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * Section shell
 * ---------------------------------------------------------------------- */
.ns-section.ns-section {
	position: relative;
	margin: 0;
	padding: var(--ns-sec) var(--ns-gutter);
}

.ns-section p,
.ns-order-early p,
.ns-hero p {
	margin: 0;
}

/* Kill flow-layout margins inside sections; spacing is set explicitly. */
.ns-section .is-layout-flow > *,
.ns-order-early .is-layout-flow > *,
.ns-section .wp-block-column > *,
.ns-hero .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.ns-section figure,
.ns-order-early figure {
	margin: 0;
}

.ns-section__title.ns-section__title {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.05;
}

@media (max-width: 781px) {
	.ns-section__title.ns-section__title {
		line-height: 1.08;
	}
}

/* Eyebrow: yellow bar + small caps label */
.ns-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--ns-eyebrow-gap);
	font-family: var(--ns-oswald);
	font-size: var(--ns-eyebrow-size);
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ns-eyebrow::before,
.ns-eyebrow--center::after {
	content: "";
	flex-shrink: 0;
	width: var(--ns-eyebrow-bar);
	height: 4px;
	background: var(--ns-yellow);
}

.ns-eyebrow--center {
	justify-content: center;
}

@media (max-width: 781px) {
	.ns-eyebrow {
		letter-spacing: 0.14em;
	}
}

/* Section heading row: title left, intro right (equipment, gallery) */
.ns-stack.ns-stack {
	display: flex;
	flex-direction: column;
}

.ns-section-head.ns-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 64px;
}

.ns-section-head__title.ns-section-head__title {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ns-section-head__intro {
	flex-shrink: 0;
	max-width: 440px;
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.6;
}

@media (max-width: 781px) {
	.ns-section-head.ns-section-head {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.ns-section-head__title.ns-section-head__title {
		gap: 14px;
	}

	.ns-section-head__intro {
		max-width: none;
		line-height: 1.55;
	}
}

/* Callout: the equipment "Don't see what you need?" line (client request:
   bold, large, eye-catching). Three looks:
     .ns-callout                 Dark plate: black panel, hazard-stripe edge
     .ns-callout--marker         Highlighter: no box, yellow marker stroke
     .ns-callout--tag            Tag: outlined label with a hazard-stripe band */
.ns-section-head__intro.ns-callout {
	position: relative;
	box-sizing: border-box;
	max-width: 480px;
	margin: 0;
	padding: clamp(22px, 19.7714px + 0.5714vw, 28px) clamp(24px, 21.7714px + 0.5714vw, 30px) clamp(24px, 22.5143px + 0.381vw, 28px) clamp(38px, 36.5143px + 0.381vw, 42px);
	overflow: hidden;
	background: var(--ns-black);
	color: var(--wp--preset--color--haze);
	font-size: clamp(16px, 15.2571px + 0.1905vw, 18px);
	font-weight: 500;
	line-height: 1.55;
}

.ns-callout::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 14px;
	background: repeating-linear-gradient(-45deg, var(--ns-yellow) 0 9px, var(--ns-black) 9px 18px);
	transform-origin: top center;
}

.ns-callout strong {
	display: block;
	margin-bottom: 10px;
	color: var(--ns-yellow);
	font-family: var(--ns-oswald);
	font-size: clamp(24px, 21.0286px + 0.7619vw, 32px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* Highlighter */
.ns-section-head__intro.ns-callout--marker {
	overflow: visible;
	padding: 2px 0 2px clamp(18px, 15.7714px + 0.5714vw, 24px);
	border-left: 4px solid var(--ns-yellow);
	background: none;
	color: var(--wp--preset--color--body-text);
	font-size: clamp(16px, 14.8857px + 0.2857vw, 19px);
}

.ns-callout--marker::before {
	display: none;
}

.ns-callout--marker strong {
	display: table;
	margin: 0 0 12px -4px;
	padding: 0 4px;
	background: linear-gradient(transparent 56%, var(--ns-yellow) 56%, var(--ns-yellow) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
	color: var(--ns-black);
	font-size: clamp(26px, 21.5429px + 1.1429vw, 38px);
}

/* Tag */
.ns-section-head__intro.ns-callout--tag {
	overflow: visible;
	padding: clamp(30px, 28.5143px + 0.381vw, 34px) clamp(22px, 19.7714px + 0.5714vw, 28px) clamp(22px, 20.5143px + 0.381vw, 26px);
	border: 2px solid var(--ns-black);
	background: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--body-text);
	font-size: clamp(16px, 15.2571px + 0.1905vw, 18px);
}

.ns-callout--tag::before {
	top: -2px;
	right: -2px;
	bottom: auto;
	left: -2px;
	width: auto;
	height: 12px;
	background: repeating-linear-gradient(-45deg, var(--ns-black) 0 9px, var(--ns-yellow) 9px 18px);
	transform-origin: left center;
}

.ns-callout--tag::after {
	content: "";
	position: absolute;
	top: 22px;
	right: 18px;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 2px solid var(--ns-black);
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
}

.ns-callout--tag strong {
	color: var(--ns-black);
}

@media (max-width: 781px) {
	.ns-section-head__intro.ns-callout {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */
.ns-actions.ns-actions {
	gap: 16px;
}

.ns-btn .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	height: 64px;
	padding: 0 36px;
	border: 0;
	border-radius: 0;
	font-family: var(--ns-oswald);
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ns-btn.is-style-outline .wp-block-button__link {
	padding: 0 36px;
	border: 2px solid currentColor;
	background: transparent;
}

.ns-btn--arrow .wp-block-button__link::after {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--ns-arrow) center / contain no-repeat;
	mask: var(--ns-arrow) center / contain no-repeat;
}

.ns-btn--ghost-light .wp-block-button__link {
	color: var(--ns-white);
}

.ns-btn--ghost-dark .wp-block-button__link {
	height: 60px;
	color: var(--ns-black);
	font-size: 18px;
}

.ns-btn--dark .wp-block-button__link {
	gap: 14px;
	height: 68px;
	background: var(--ns-black);
	color: var(--ns-white);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.ns-btn--phone .wp-block-button__link::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--ns-icon-phone) center / contain no-repeat;
	mask: var(--ns-icon-phone) center / contain no-repeat;
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */
.ns-hero-section.ns-hero-section {
	margin: 0;
	padding: 0;
}

.ns-hero.ns-hero {
	min-height: 700px;
	margin: 0;
	padding: 0 var(--ns-gutter);
	background: var(--ns-black);
	overflow: hidden;
}

.ns-hero .wp-block-cover__background.wp-block-cover__background {
	background: linear-gradient(90deg, rgba(12, 12, 12, 0.92) 0%, rgba(12, 12, 12, 0.72) 45%, rgba(12, 12, 12, 0.25) 100%);
	opacity: 1;
}

.ns-hero .wp-block-cover__inner-container.wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 14.2857px + 0.9524vw, 28px);
	width: 100%;
	max-width: 772px;
	margin: 0;
	color: var(--ns-white);
}

.ns-hero .ns-eyebrow {
	color: var(--ns-yellow);
	font-size: clamp(14px, 12.8857px + 0.2857vw, 17px);
}

.ns-hero__title.ns-hero__title {
	color: var(--ns-white);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.02;
}

.ns-hero__title mark {
	background: none;
}

.ns-hero__lead {
	max-width: 620px;
	color: var(--wp--preset--color--haze);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
}

.ns-hero__actions.ns-hero__actions {
	margin-top: 8px !important;
}

@media (max-width: 781px) {
	.ns-hero.ns-hero {
		min-height: 600px;
		align-items: flex-end;
		padding: 0 20px 36px;
	}

	.ns-hero .wp-block-cover__image-background {
		object-position: 55% 60% !important;
	}

	.ns-hero .wp-block-cover__background.wp-block-cover__background {
		background: linear-gradient(180deg, rgba(12, 12, 12, 0.45) 0%, rgba(12, 12, 12, 0.88) 62%);
	}

	.ns-hero .ns-eyebrow {
		letter-spacing: 0.14em;
	}

	.ns-hero__title.ns-hero__title {
		line-height: 1.04;
	}

	.ns-hero__actions.ns-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 6px !important;
	}

	.ns-hero__actions .ns-btn {
		width: 100%;
	}

	.ns-hero__actions .wp-block-button__link {
		gap: 10px;
		height: 58px;
		font-size: 18px;
	}

	.ns-hero__actions .ns-btn--arrow .wp-block-button__link::after {
		width: 18px;
		height: 18px;
	}
}

/* -------------------------------------------------------------------------
 * About + 50 years
 * ---------------------------------------------------------------------- */
.ns-about.ns-about {
	background: var(--wp--preset--color--off-white-2);
}

.ns-about__grid.ns-about__grid {
	align-items: center;
	gap: 96px;
	margin: 0;
}

.ns-about__text.ns-about__text {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 18.5143px + 0.381vw, 24px);
}

.ns-about__body {
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
}

.ns-link-underline {
	align-self: flex-start;
	margin-top: 8px !important;
	padding-bottom: 6px;
	border-bottom: 3px solid var(--ns-yellow);
	font-family: var(--ns-oswald);
	font-size: 18px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ns-about__media.ns-about__media {
	position: relative;
	height: 560px;
}

.ns-about__image.ns-about__image {
	position: absolute;
	top: 0;
	right: 0;
	width: 88%;
	height: 480px;
	overflow: hidden; /* keeps the slow drift animation inside the frame */
}

.ns-about__image img,
.ns-why__image img,
.ns-quote__image img {
	display: block;
	width: 100%;
	height: 100% !important; /* the editor sets an inline height:auto */
	object-fit: cover;
}

.ns-stat.ns-stat {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	box-sizing: border-box;
	width: 280px;
	height: 260px;
	padding: 32px;
	background: var(--ns-yellow);
	color: var(--ns-black);
}

.ns-stat__number,
.ns-stat__label {
	font-family: var(--ns-oswald);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.ns-stat__number {
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.9;
}

.ns-stat__label {
	font-size: clamp(17px, 15.1429px + 0.4762vw, 22px);
	font-weight: 600;
	line-height: 1.15;
}

.ns-stat__note {
	font-size: clamp(14px, 13.2571px + 0.1905vw, 16px);
	font-weight: 500;
	line-height: normal;
}

@media (max-width: 781px) {
	.ns-about__grid.ns-about__grid {
		gap: 32px;
	}

	.ns-about__body {
		line-height: 1.6;
	}

	.ns-about__media.ns-about__media {
		height: 340px;
	}

	.ns-about__image.ns-about__image {
		width: 100%;
		height: 260px;
	}

	.ns-stat.ns-stat {
		gap: 4px;
		width: 200px;
		height: auto;
		padding: 20px;
	}
}

/* -------------------------------------------------------------------------
 * Equipment (section shell; cards come from the equipment-grid block)
 * ---------------------------------------------------------------------- */
.ns-equipment.ns-equipment {
	background: var(--wp--preset--color--sand);
}

.ns-equipment .ns-stack {
	gap: clamp(28px, 17.6px + 2.6667vw, 56px);
}

/* -------------------------------------------------------------------------
 * Why Northside
 * ---------------------------------------------------------------------- */
.ns-why.ns-why {
	background: var(--ns-black);
	color: var(--ns-white);
}

.ns-why__grid.ns-why__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 96px;
}

.ns-why__media.ns-why__media {
	position: relative;
	height: 600px;
}

.ns-why__media::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 86%;
	height: 540px;
	border: 6px solid var(--ns-yellow);
}

.ns-why__image.ns-why__image {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 86%;
	height: 540px;
}

.ns-why__text.ns-why__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ns-why .ns-eyebrow {
	color: var(--ns-yellow);
}

.ns-why .ns-section__title {
	color: var(--ns-white);
}

/* Checklist (core/list, "Checklist" style): used in Why Northside */
.wp-block-list.is-style-checklist {
	display: flex;
	flex-direction: column;
	gap: clamp(22px, 19.7714px + 0.5714vw, 28px);
	margin: 16px 0 0 !important;
	padding: 0;
	list-style: none;
	color: var(--ns-stone);
	font-size: clamp(16px, 15.2571px + 0.1905vw, 18px);
	line-height: 1.55;
}

.is-style-checklist > li {
	position: relative;
	min-height: 44px;
	margin: 0;
	padding-left: 64px;
}

.is-style-checklist > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 44px;
	background: var(--ns-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

.is-style-checklist > li > strong:first-child,
.is-style-checklist > li > [role="textbox"] > strong:first-child {
	display: block;
	margin-bottom: 6px;
	color: var(--ns-white);
	font-family: var(--ns-oswald);
	font-size: clamp(21px, 19.1429px + 0.4762vw, 26px);
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.is-style-checklist > li > strong:first-child + br,
.is-style-checklist > li > [role="textbox"] > strong:first-child + br {
	display: none;
}

@media (max-width: 781px) {
	/* Mobile order: eyebrow, title, photo, checklist. */
	.ns-why__grid.ns-why__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.ns-why__text.ns-why__text {
		display: contents;
	}

	.ns-why__text > .ns-eyebrow { order: 1; }
	.ns-why__text > .ns-section__title { order: 2; }
	.ns-why__media.ns-why__media { order: 3; height: auto; }
	.ns-why__text > .is-style-checklist { order: 4; }

	.ns-why__media::before {
		display: none;
	}

	.ns-why__image.ns-why__image {
		position: static;
		width: 100%;
		height: 220px;
		border-bottom: 5px solid var(--ns-yellow);
	}

	.wp-block-list.is-style-checklist {
		margin-top: 8px !important;
		line-height: 1.5;
	}

	.is-style-checklist > li {
		min-height: 36px;
		padding-left: 50px;
	}

	.is-style-checklist > li::before {
		width: 36px;
		height: 36px;
		background-size: 20px 20px;
	}

	.is-style-checklist > li > strong:first-child,
	.is-style-checklist > li > [role="textbox"] > strong:first-child {
		margin-bottom: 4px;
	}
}

/* -------------------------------------------------------------------------
 * Order early banner
 * ---------------------------------------------------------------------- */
.ns-order-early.ns-order-early {
	margin: 0;
	background: var(--ns-yellow);
	color: var(--ns-black);
	overflow: hidden;
}

.ns-order-early__inner.ns-order-early__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	margin: 0;
	padding: 64px var(--ns-gutter);
}

.ns-order-early__text.ns-order-early__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 760px;
}

.ns-order-early__title.ns-order-early__title {
	color: var(--ns-black);
	font-size: var(--wp--preset--font-size--banner);
	line-height: 1.02;
}

.ns-order-early__lead {
	font-size: clamp(17px, 15.8857px + 0.2857vw, 20px);
	font-weight: 500;
	line-height: 1.5;
}

.ns-order-early__actions.ns-order-early__actions {
	flex-direction: column;
	flex-shrink: 0;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 14px;
}

@media (max-width: 781px) {
	.ns-order-early__inner.ns-order-early__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 40px 20px 44px;
	}

	.ns-order-early__text.ns-order-early__text {
		gap: 16px;
	}

	.ns-order-early__title.ns-order-early__title {
		line-height: 1.04;
	}

	.ns-order-early__actions.ns-order-early__actions {
		margin-top: 6px !important;
	}

	.ns-order-early .ns-btn--dark .wp-block-button__link {
		gap: 12px;
		height: 60px;
		font-size: 22px;
	}

	.ns-order-early .ns-btn--phone .wp-block-button__link::before {
		width: 20px;
		height: 20px;
	}
}

/* -------------------------------------------------------------------------
 * In the Field: gallery (core/gallery, "Mosaic" style)
 * ---------------------------------------------------------------------- */
.ns-gallery.ns-gallery {
	background: var(--wp--preset--color--off-white-2);
}

.ns-gallery .ns-stack {
	gap: clamp(24px, 12.1143px + 3.0476vw, 56px);
}

.wp-block-gallery.is-style-mosaic.is-style-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 280px;
	gap: 16px;
	margin: 0;
}

.wp-block-gallery.is-style-mosaic > figure.wp-block-image.wp-block-image {
	position: relative;
	width: auto !important;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

/* No core caption blur/gradient behind the labels. */
.wp-block-gallery.is-style-mosaic > figure.wp-block-image::before,
.wp-block-gallery.is-style-mosaic > figure.wp-block-image::after {
	content: none !important;
	display: none !important;
}

.wp-block-gallery.is-style-mosaic > figure.wp-block-image:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.wp-block-gallery.is-style-mosaic > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.wp-block-gallery.is-style-mosaic > figure.wp-block-image figcaption {
	position: absolute;
	top: auto;
	right: auto;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	width: auto;
	max-height: none;
	margin: 0;
	padding: 10px 16px;
	overflow: visible;
	background: var(--ns-black);
	color: var(--ns-white);
	font-family: var(--ns-oswald);
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.08em;
	text-align: left;
	text-shadow: none;
	text-transform: uppercase;
}

.wp-block-gallery.is-style-mosaic > figure.wp-block-image figcaption:empty {
	display: none;
}

@media (max-width: 781px) {
	.wp-block-gallery.is-style-mosaic.is-style-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 230px;
		grid-auto-rows: 150px;
		gap: 10px;
	}

	.wp-block-gallery.is-style-mosaic > figure.wp-block-image:first-child {
		grid-row: span 1;
	}

	.wp-block-gallery.is-style-mosaic > figure.wp-block-image:not(:first-child) figcaption {
		display: none;
	}

	.wp-block-gallery.is-style-mosaic > figure.wp-block-image figcaption {
		padding: 8px 12px;
		font-size: 13px;
	}
}

/* -------------------------------------------------------------------------
 * Request a quote
 * ---------------------------------------------------------------------- */
.ns-quote.ns-quote {
	padding-top: 0;
	background: var(--wp--preset--color--off-white-2);
}

.ns-quote::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 420px;
	background: var(--ns-black);
}

.ns-quote__inner.ns-quote__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-top: 100px;
}

.ns-quote__head.ns-quote__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.ns-quote .ns-eyebrow {
	color: var(--ns-yellow);
}

.ns-quote .ns-section__title {
	color: var(--ns-white);
}

.ns-quote__card.ns-quote__card {
	display: grid;
	grid-template-columns: 480px minmax(0, 1fr);
	background: var(--ns-white);
	box-shadow: var(--wp--custom--shadow--card, 0 24px 60px rgba(0, 0, 0, 0.18));
}

.ns-quote__media.ns-quote__media {
	position: relative;
	min-height: 640px;
}

.ns-quote__image.ns-quote__image {
	position: absolute;
	inset: 0;
}

.ns-quote__call.ns-quote__call {
	position: absolute;
	right: 32px;
	bottom: 32px;
	left: 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
	background: var(--ns-yellow);
	color: var(--ns-black);
}

.ns-quote__call-text {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

.ns-quote__call-number {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ns-oswald);
	font-size: 34px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.ns-quote__call-number::before {
	content: "";
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	background-color: currentColor;
	-webkit-mask: var(--ns-icon-phone) center / contain no-repeat;
	mask: var(--ns-icon-phone) center / contain no-repeat;
}

.ns-quote__form.ns-quote__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 56px 64px;
}

.ns-quote__intro {
	color: var(--wp--preset--color--body-text);
	font-size: 18px;
	line-height: 1.55;
}

@media (min-width: 782px) and (max-width: 1199px) {
	.ns-quote__card.ns-quote__card {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.ns-quote__form.ns-quote__form {
		padding: 48px 40px;
	}

	.ns-quote__call-number {
		font-size: 28px;
	}
}

@media (max-width: 781px) {
	.ns-quote.ns-quote {
		padding: 64px 20px;
		background: var(--ns-black);
	}

	.ns-quote::before {
		display: none;
	}

	.ns-quote__inner.ns-quote__inner {
		gap: 24px;
		padding-top: 0;
	}

	.ns-quote__head.ns-quote__head {
		align-items: stretch;
		gap: 24px;
		text-align: left;
	}

	.ns-eyebrow--center {
		justify-content: flex-start;
	}

	.ns-eyebrow--center::after {
		display: none;
	}

	.ns-quote__card.ns-quote__card {
		display: flex;
		flex-direction: column;
		gap: 24px;
		background: transparent;
		box-shadow: none;
	}

	.ns-quote__media.ns-quote__media {
		order: 2;
		min-height: 0;
	}

	.ns-quote__image.ns-quote__image {
		display: none;
	}

	.ns-quote__call.ns-quote__call {
		position: relative;
		inset: auto;
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		align-items: center;
		column-gap: 14px;
		row-gap: 2px;
		padding: 18px 20px;
		border: 2px solid var(--ns-yellow);
		background: transparent;
		color: var(--ns-white);
	}

	.ns-quote__call::before {
		content: "";
		grid-row: 1 / 3;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--ns-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	}

	.ns-quote__call-text {
		grid-column: 2;
		color: var(--ns-stone);
		font-size: 15px;
		font-weight: 400;
		line-height: normal;
	}

	.ns-quote__call-number {
		grid-column: 2;
		font-size: 24px;
	}

	.ns-quote__call-number::before {
		display: none;
	}

	.ns-quote__form.ns-quote__form {
		gap: 18px;
		padding: 24px 20px 28px;
		background: var(--ns-white);
	}
}

/* -------------------------------------------------------------------------
 * Quote form (Fluent Forms, default skin disabled)
 * ---------------------------------------------------------------------- */
.ns-quote .fluentform,
.ns-quote .frm-fluent-form {
	margin: 0;
	color: var(--ns-black);
	font-family: var(--ns-barlow);
}

.ns-quote .frm-fluent-form fieldset {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ns-quote .ff-t-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.ns-quote .ff-t-container + .ff-t-container {
	margin-top: -4px;
}

.ns-quote .ff-t-cell {
	flex-basis: auto !important;
	min-width: 0;
	padding: 0;
}

/* Block layout (not flex gap): Fluent adds zero-height helper elements in each group. */
.ns-quote .fluentform .ff-el-group {
	display: block;
	margin: 0;
}

.ns-quote .fluentform .ff-el-input--label {
	display: block;
	margin: 0 0 8px;
}

.ns-quote .fluentform .ff-el-input--content {
	margin: 0;
}

.ns-quote .fluentform .ff_submit_btn_wrapper {
	display: flex;
	align-items: flex-start;
}

.ns-quote .ff-el-input--label label {
	display: block;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
}

.ns-quote .ff-el-is-required label::after,
.ns-quote .ff-el-is-required.asterisk-right label::after {
	content: none;
}

.ns-quote .ff-el-form-control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--off-white);
	color: var(--ns-black);
	font-family: var(--ns-barlow);
	font-size: 17px;
	line-height: normal;
	box-shadow: none;
}

/* The design's inputs/textarea are content-box (56px/140px + padding + border);
   its select is border-box (56px). These are the rendered outer heights. */
.ns-quote input.ff-el-form-control {
	height: 58px;
}

.ns-quote textarea.ff-el-form-control {
	height: 170px;
	padding: 14px 16px;
	resize: none;
}

.ns-quote .ff-el-form-control:focus {
	border-color: var(--ns-black);
	outline: 3px solid var(--ns-yellow);
	outline-offset: 0;
}

.ns-quote .ff-el-is-error .ff-el-form-control {
	border-color: #b3261e;
}

.ns-quote .ff-el-is-error .text-danger,
.ns-quote .error.text-danger {
	margin: 0;
	color: #b3261e;
	font-size: 14px;
	font-weight: 600;
}

.ns-quote .ff_submit_btn_wrapper {
	margin: 0;
}

.ns-quote .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 64px;
	padding: 0 44px;
	border: 0;
	border-radius: 0;
	background: var(--ns-black);
	color: var(--ns-white);
	font-family: var(--ns-oswald);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.ns-quote .ff-btn-submit::after {
	content: "";
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6be00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ns-quote .ff-btn-submit:hover {
	opacity: 0.88;
}

.ns-quote .ff-message-success {
	padding: 24px;
	border: 0;
	border-left: 6px solid var(--ns-yellow);
	background: var(--wp--preset--color--off-white);
	color: var(--ns-black);
	font-size: 18px;
	line-height: 1.55;
	box-shadow: none;
}

.ns-quote .ff-errors-in-stack {
	display: none;
}

@media (max-width: 781px) {
	.ns-quote .frm-fluent-form fieldset {
		gap: 18px;
	}

	.ns-quote .ff-t-container {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.ns-quote .ff-t-container + .ff-t-container {
		margin-top: 0;
	}

	.ns-quote .fluentform .ff-el-input--label {
		margin-bottom: 6px;
	}

	.ns-quote .fluentform .ff_submit_btn_wrapper {
		align-items: stretch;
	}

	.ns-quote .ff-el-form-control {
		height: 54px;
		padding: 0 14px;
	}

	.ns-quote input.ff-el-form-control {
		height: 56px;
	}

	.ns-quote textarea.ff-el-form-control {
		height: 146px;
		padding: 12px 14px;
	}

	.ns-quote .ff-btn-submit {
		justify-content: center;
		width: 100%;
		height: 60px;
		padding: 0 24px;
		background: var(--ns-yellow);
		color: var(--ns-black);
		font-size: 19px;
	}

	.ns-quote .ff-btn-submit::after {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * About: "Read our story" button + "Talk to the shop" link
 * ---------------------------------------------------------------------- */
.ns-about__actions.ns-about__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	margin-top: 8px !important;
}

.ns-about__actions .ns-link-underline {
	margin-top: 0 !important;
}

@media (max-width: 781px) {
	.ns-about__actions .ns-actions,
	.ns-about__actions .ns-btn {
		width: 100%;
	}

	.ns-about__actions .wp-block-button__link {
		height: 58px;
		font-size: 18px;
	}
}

/* -------------------------------------------------------------------------
 * Our story (About page): full text + sticky photo with the 50+ box
 * ---------------------------------------------------------------------- */
.ns-story.ns-story {
	background: var(--wp--preset--color--off-white-2);
}

.ns-story__grid.ns-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
	gap: clamp(40px, 22.1714px + 4.5714vw, 96px);
}

.ns-story__text.ns-story__text {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 16.5143px + 0.381vw, 22px);
}

.ns-story__lead {
	color: var(--ns-black);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	line-height: 1.6;
}

.ns-story__body {
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.ns-story__media.ns-story__media {
	position: sticky;
	top: 48px;
}

@media (max-width: 781px) {
	.ns-story__grid.ns-story__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.ns-story__media.ns-story__media {
		position: relative;
		top: auto;
	}

	.ns-story__body {
		line-height: 1.65;
	}
}

/* -------------------------------------------------------------------------
 * Philosophy quote banner (yellow, like "Order early")
 * ---------------------------------------------------------------------- */
.ns-philosophy.ns-philosophy {
	margin: 0;
	background: var(--ns-yellow);
	color: var(--ns-black);
	text-align: center;
}

.ns-philosophy__inner.ns-philosophy__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 15.5429px + 1.1429vw, 32px);
	padding: clamp(56px, 40.4px + 4vw, 98px) var(--ns-gutter);
}

.ns-philosophy__inner > * {
	margin: 0 !important;
}

.ns-philosophy__quote {
	max-width: 1100px;
	font-family: var(--ns-oswald);
	font-size: var(--wp--preset--font-size--banner);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.ns-philosophy__quote::before {
	content: "\201C";
}

.ns-philosophy__quote::after {
	content: "\201D";
}

.ns-philosophy__by.ns-philosophy__by {
	color: var(--ns-black);
}

.ns-philosophy .ns-eyebrow::before,
.ns-philosophy .ns-eyebrow--center::after {
	background: var(--ns-black);
}

/* -------------------------------------------------------------------------
 * Timeline (core/list, "Timeline" style): year column + text
 * ---------------------------------------------------------------------- */
.ns-timeline.ns-timeline {
	background: var(--ns-black);
	color: var(--ns-white);
}

.ns-timeline .ns-stack {
	gap: clamp(28px, 17.6px + 2.6667vw, 56px);
}

.ns-timeline .ns-eyebrow {
	color: var(--ns-yellow);
}

.ns-timeline .ns-section__title {
	color: var(--ns-white);
}

.wp-block-list.is-style-timeline {
	margin: 0 !important;
	padding: 0;
	border-bottom: 1px solid var(--ns-control-border);
	list-style: none;
	color: var(--ns-stone);
	font-size: clamp(16px, 15.2571px + 0.1905vw, 18px);
	line-height: 1.55;
}

.is-style-timeline > li,
.is-style-timeline > li > [role="textbox"] {
	display: grid;
	grid-template-columns: clamp(96px, 70.4px + 6.5vw, 164px) minmax(0, 1fr);
	align-items: baseline;
	column-gap: clamp(20px, 12.5714px + 1.9048vw, 40px);
}

.is-style-timeline > li {
	position: relative;
	margin: 0;
	padding: clamp(18px, 14.2857px + 0.9524vw, 28px) 0;
	border-top: 1px solid var(--ns-control-border);
}

.is-style-timeline > li:has(> [role="textbox"]) {
	display: block;
}

.is-style-timeline > li > strong:first-child,
.is-style-timeline > li > [role="textbox"] > strong:first-child {
	color: var(--ns-yellow);
	font-family: var(--ns-oswald);
	font-size: clamp(28px, 22.0571px + 1.5238vw, 44px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: none; /* keeps "1980s" lowercase s */
}

.is-style-timeline > li br,
.is-style-timeline > li > [role="textbox"] > br {
	display: none;
}

@media (max-width: 599px) {
	.is-style-timeline > li,
	.is-style-timeline > li > [role="textbox"] {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 6px;
	}
}

/* -------------------------------------------------------------------------
 * Contact details: four cards (card style = equipment cards)
 * ---------------------------------------------------------------------- */
.ns-contact-info.ns-contact-info {
	background: var(--wp--preset--color--sand);
}

.ns-contact-info .ns-stack {
	gap: clamp(28px, 17.6px + 2.6667vw, 56px);
}

.ns-info-grid.ns-info-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.ns-info-card.ns-info-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 28px 28px 32px;
	border-top: 6px solid var(--ns-yellow);
	background: var(--ns-white);
	color: var(--wp--preset--color--body-text);
	font-size: 17px;
	line-height: 1.55;
}

.ns-info-card > * {
	margin: 0 !important;
}

.ns-info-card::before {
	content: "";
	width: 44px;
	height: 44px;
	margin-bottom: 8px;
	background: var(--ns-yellow) var(--ns-info-icon) center / 22px 22px no-repeat;
}

.ns-info-card--visit { --ns-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ns-info-card--mail { --ns-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.ns-info-card--call { --ns-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.ns-info-card--email { --ns-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }

.ns-info-card__title.ns-info-card__title {
	color: var(--ns-black);
	font-size: clamp(20px, 18.5143px + 0.381vw, 24px);
	font-weight: 700;
	line-height: 1.2;
}

.ns-info-card a {
	border-bottom: 2px solid var(--ns-yellow);
	color: var(--ns-black);
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 1199px) {
	.ns-info-grid.ns-info-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 781px) {
	.ns-info-grid.ns-info-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.ns-info-card.ns-info-card {
		padding: 22px 20px 24px;
		border-top-width: 5px;
		font-size: 16px;
	}
}

/* -------------------------------------------------------------------------
 * Parts & components (homepage moving row) + spinning "View all" badge
 * ---------------------------------------------------------------------- */
.ns-parts-home.ns-parts-home {
	background: var(--wp--preset--color--off-white-2);
	overflow: hidden;
}

.ns-parts-home .ns-stack {
	gap: clamp(28px, 17.6px + 2.6667vw, 56px);
}

.ns-section-head__aside.ns-section-head__aside {
	display: flex;
	align-items: center;
	gap: clamp(20px, 14.0571px + 1.5238vw, 36px);
}

.ns-section-head__aside .ns-section-head__intro {
	flex-shrink: 1;
	min-width: 0;
	max-width: 360px;
}

.ns-badge-wrap.ns-badge-wrap {
	flex-shrink: 0;
	margin: 0;
}

.ns-badge .wp-block-button__link {
	position: relative;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: clamp(116px, 107.0857px + 2.2857vw, 140px);
	height: clamp(116px, 107.0857px + 2.2857vw, 140px);
	padding: 18px;
	border-radius: 50%;
	background: var(--ns-yellow);
	color: var(--ns-black);
	font-family: var(--ns-oswald);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 0 0 0 0 rgba(246, 190, 0, 0.45);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.ns-badge .wp-block-button__link:hover {
	opacity: 1;
	transform: scale(1.05);
	box-shadow: 0 0 0 10px rgba(246, 190, 0, 0.25);
}

.ns-badge__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ns-badge__ring text {
	fill: currentColor;
	font-family: var(--ns-oswald);
	font-size: 10.5px;
	font-weight: 600;
}

.ns-badge__arrow {
	display: block;
	width: 46%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ns-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6be00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 46% no-repeat;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ns-badge .wp-block-button__link:hover .ns-badge__arrow,
.ns-badge .wp-block-button__link:focus-visible .ns-badge__arrow {
	transform: rotate(-45deg);
}

@media (max-width: 781px) {
	.ns-section-head__aside.ns-section-head__aside {
		justify-content: space-between;
	}

	.ns-section-head__aside .ns-section-head__intro {
		max-width: none;
	}
}