/* ============================================================
   HOMEPAGE (front-page.php), quick 261002-ouc, palette C.
   Loaded on the front page only (functions.php is_front_page()).
   Rebuilt from the computed values of the approved bold-C mockup,
   not from its CSS. No important-flag overrides. Every selector is .njs-home*.

   Palette: orange #f48e2e on primary buttons only (button colors
   come from theme.css .njs-btn-primary) plus the decorative review
   stars. Ink #1a1a1a bands and headings. Green #76c355 small
   accents. Neutrals #ffffff, #e4e4e4, #f5f5f2. Muted #5f5f5a.
   ============================================================ */

.njs-home {
	--njs-home-ink: #1a1a1a;
	--njs-home-green: #76c355;
	--njs-home-band: #e4e4e4;
	--njs-home-muted: #5f5f5a;
	--njs-home-orange: #f48e2e;
	/* D5 (rulings, 2026-10-08): one 6-step type scale for every font-size in <main>
	   (aria-hidden decoration exempt), one card radius, one primary-button style. 261009-b55. */
	--njs-fs-1: 15px;                          /* meta, small lines, kickers, captions */
	--njs-fs-2: 17px;                          /* body: lists, quotes, cards */
	--njs-fs-3: 18px;                          /* lede, text links, buttons, row tiles */
	--njs-fs-4: clamp(20px, 1.6vw, 26px);      /* card titles: doors, captions, labels */
	--njs-fs-5: clamp(36px, 3.2vw, 52px);      /* H2 */
	--njs-fs-6: clamp(34px, 3.4vw, 56px);      /* Jay's hero line */
	--njs-radius: 10px;
	color: var(--njs-home-ink);
}

.njs-home *,
.njs-home *::before,
.njs-home *::after {
	box-sizing: border-box;
}

.njs-home img {
	max-width: 100%;
}

.njs-home-wrap {
	width: min(var(--container-max, 1680px), 94%);
	margin-inline: auto;
}

/* ---- Shared type ---- */
.njs-home-h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-5);
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	color: var(--njs-home-ink);
	margin: 0 0 14px;
}

.njs-home-kicker {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-1);
	line-height: 1.1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--njs-home-muted);
	margin: 0 0 12px;
}

.njs-home-lede {
	font-size: var(--njs-fs-3);
	line-height: 1.5;
	max-width: 52ch;
	margin: 0 0 32px;
	color: #333331;
}

.njs-home-lede a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.njs-home-tlink {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-3);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid var(--njs-home-ink);
	padding-bottom: 4px;
}

.njs-home-tlink:hover,
.njs-home-tlink:focus-visible {
	border-bottom-color: var(--njs-home-green);
}

.njs-home .njs-home-btn {
	display: inline-block;
	min-height: 44px;
	padding: 16px 26px;
	border-radius: 6px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-3);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.njs-home a:focus-visible,
.njs-home button:focus-visible {
	outline: 3px solid var(--njs-home-orange);
	outline-offset: 3px;
}

/* ---- Section rhythm ---- */
.njs-home-sec {
	padding-block: 88px;
}

.njs-home-sec--neutral {
	background-color: var(--njs-home-band);
}

.njs-home-sec--ink {
	background-color: var(--njs-home-ink);
	color: #ffffff;
}

/* ============================================================
   1. HERO
   ============================================================ */
.njs-home-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Jay 2026-10-06 (amends decision 15): video + tiles fill the
	   first screen exactly. --njs-hero-top = header height, set by home-hero.js. */
	min-height: min(74vh, 700px);
	min-height: min(calc(100vh - var(--njs-hero-top, 168px)), 1400px);
	min-height: min(calc(100svh - var(--njs-hero-top, 168px)), 1400px);
	overflow: hidden;
	background-color: var(--njs-home-ink);
	color: #ffffff;
}

.njs-home-hero__poster,
.njs-home-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.njs-home-hero__video {
	opacity: 0;
	transition: opacity 600ms ease;
}

.njs-home-hero__video.is-playing {
	opacity: 1;
}

.njs-home-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.05) 80%);
}

/* Wide screens (Jay 2026-10-10, 261009-flp v26): the hero SECTION stays full width with its ink
   background, but the poster, video and scrim stop at 2560px wide, centred. Above 2560 the video keeps
   the 2560 framing and sharpness (a 1080p file covering 3440-3840px is cropped to ~65% of its height and
   upscaled ~2x), with ink at the sides. Below 2560 this is identical to inset: 0. The hero text keeps
   its 1680 container on the site centre line. Phones (<=900) are unaffected: 100% < 2560 there. */
.njs-home-hero__poster,
.njs-home-hero__video,
.njs-home-hero__scrim {
	left: max(0px, calc((100% - 2560px) / 2));
	right: auto;
	width: min(100%, 2560px);
}

.njs-home-hero__pause {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	min-width: 44px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 22px;
	background-color: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--njs-fs-1);
	line-height: 1;
	cursor: pointer;
}

.njs-home-hero__pause[hidden] {
	display: none;
}

.njs-home-hero .njs-home-hero__pause:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

.njs-home-hero__inner {
	position: relative;
	z-index: 2;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: min(var(--container-max, 1680px), 94%);
	margin-inline: auto;
	padding: 40px 0 36px;
}

.njs-home-hero__kicker {
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}

.njs-home-hero__sub {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-6);
	line-height: 1.02;
	max-width: 18ch;
	margin: 16px 0 0;
}

/* Three-way bar: Commercial / Residential / Parties and play (ORDER rule).
   White under the bar so the video ends at the tiles (trust strip removed, Jay 2026-10-06). */
.njs-home-doors {
	position: relative;
	z-index: 2;
	background-color: #ffffff;
}

.njs-home-doors__wrap {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: min(var(--container-max, 1680px), 94%);
	margin-inline: auto;
	background-color: #ffffff;
	border-radius: var(--njs-radius) var(--njs-radius) 0 0;
	overflow: hidden;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
}

.njs-home-door {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 24px 30px;
	color: var(--njs-home-ink);
	text-decoration: none;
	border-left: 1px solid #e6e6e2;
	transition: background-color 260ms ease, color 260ms ease;
}

.njs-home-door:first-child {
	border-left: 0;
}

.njs-home-door:hover {
	background-color: #f5f5f2;
}


.njs-home-door b {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-4);
	line-height: 1;
	text-transform: none;
}

.njs-home-door small {
	display: block;
	margin-top: 6px;
	font-size: var(--njs-fs-1);
	color: #555555;
}


.njs-home-door__arrow {
	font-size: 28px;
	line-height: 1;
}

/* ============================================================
   2. RECENT WORK
   ============================================================ */
.njs-home-headrow {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 32px;
}

.njs-home-headrow .njs-home-h2 {
	margin-bottom: 0;
}

/* 261009-b55: the headrow text link keeps its arrow on the same line. */
.njs-home-headrow .njs-home-tlink {
	flex-shrink: 0;
	white-space: nowrap;
}

.njs-home-work__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.njs-home-work__tile {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--njs-radius);
	overflow: hidden;
	background-color: #dddddd;
}

.njs-home-work__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.njs-home-work__tile figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 48px 20px 18px;
	color: #ffffff;
	background: linear-gradient(0deg, rgba(26, 26, 26, 0.9), rgba(26, 26, 26, 0));
}

.njs-home-work__tile figcaption b {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-4);
	line-height: 1;
	text-transform: none;
	margin-bottom: 4px;
}

.njs-home-work__tile figcaption span {
	display: block;
	font-size: var(--njs-fs-1);
	color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   3. RESIDENTIAL
   ============================================================ */
.njs-home-res__grid {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 48px;
	align-items: center;
}

.njs-home-res__copy {
	display: flex;
	flex-direction: column;
}

.njs-home-res__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

/* S3 (Jay 2026-10-08): cedar + vinyl only, so two landscape cards. */
.njs-home-res__card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--njs-radius);
	overflow: hidden;
	color: #ffffff;
	text-decoration: none;
	background-color: #cccccc;
}

.njs-home-res__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.njs-home-res__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 16px 16px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-4);
	line-height: 1.05;
	text-transform: none;
}

.njs-home-res__label small {
	display: block;
	margin-top: 4px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--njs-fs-1);
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   4. SERVICES + CO-OP (ink band, white co-op card)
   ============================================================ */
.njs-home-svc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.njs-home-svc .njs-home-h2 {
	color: #ffffff;
}

.njs-home-svc .njs-home-kicker {
	color: var(--njs-home-green);
}

.njs-home-svc .njs-home-lede {
	color: #e8e8e8;
}

.njs-home-svc__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.njs-home-svc__cards li {
	padding: 24px 26px;
	border-top: 3px solid var(--njs-home-green);
	border-radius: var(--njs-radius);
	background-color: rgba(255, 255, 255, 0.08);
	color: #e8e8e8;
	font-size: var(--njs-fs-2);
	line-height: 1.45;
}

.njs-home-svc__cards b {
	color: var(--njs-home-green);
	font-weight: 700;
}

.njs-home-coop {
	padding: 36px;
	border-radius: var(--njs-radius);
	background-color: #ffffff;
	color: var(--njs-home-ink);
}

.njs-home-coop .njs-home-kicker {
	color: var(--njs-home-muted);
}

.njs-home-coop__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-4);
	line-height: 1;
	text-transform: none;
	color: var(--njs-home-ink);
	margin: 0 0 16px;
}

.njs-home-coop__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.njs-home-coop__list li {
	padding: 12px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font-size: var(--njs-fs-2);
	line-height: 1.4;
}

.njs-home-coop__list b {
	color: var(--njs-home-ink);
}

/* ============================================================
   5 + 6. FEATURED EQUIPMENT / GUIDES (theme card components)
   S5/S6 (261009-b55): the orange-underline .njs-section__heading is gone from
   both H2s; the theme cards inside .njs-home take the D5 scale and radius.
   ============================================================ */
.njs-home .njs-card,
.njs-home .njs-product-card__image-wrap,
.njs-home .njs-blog-card__image-wrap {
	border-radius: var(--njs-radius);
}

.njs-home .njs-product-card__title,
.njs-home .njs-product-card__price,
.njs-home .njs-blog-card__title {
	font-size: var(--njs-fs-2);
}

.njs-home .njs-blog-card__meta {
	font-size: var(--njs-fs-1);
}

.njs-home-guides .njs-home-guides__all {
	margin-top: 8px;
	color: var(--njs-home-ink);
}

/* ============================================================
   7. PARTIES
   ============================================================ */
.njs-home-party__box {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	min-height: 300px;
	border-radius: var(--njs-radius);
	overflow: hidden;
	background-color: #f5f5f2;
}

.njs-home-party__box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.njs-home-party__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 44px;
}

/* ============================================================
   8. REVIEWS
   ============================================================ */
.njs-home-rev__grid {
	display: grid;
	grid-template-columns: 1fr 3fr;   /* S8: three cards (261009-b55), was 1fr 2fr for two */
	gap: 48px;
	align-items: center;
}

.njs-home-rev__big {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 96px;
	line-height: 1;
	color: var(--njs-home-ink);
}

.njs-home-rev__stars {
	color: var(--njs-home-orange);
	font-size: 28px;
	letter-spacing: 4px;
	line-height: 1.2;
}

.njs-home-rev__line {
	margin: 12px 0 0;
	font-size: var(--njs-fs-2);
}

.njs-home-rev__line a,
.njs-home-rev__video {
	color: var(--njs-home-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.njs-home-rev__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	align-items: start;
}

.njs-home-rev__quote {
	margin: 0;
	padding: 26px;
	border-radius: var(--njs-radius);
	background-color: #ffffff;
	color: #444444;
	font-size: var(--njs-fs-2);
	line-height: 1.5;
}

.njs-home-rev__quote p {
	margin: 0 0 16px;
}

.njs-home-rev__quote cite {
	display: block;
	font-style: normal;
	font-weight: 700;
	color: var(--njs-home-ink);
}

.njs-home-rev__video {
	display: inline-block;
	margin-top: 8px;
}

/* ============================================================
   9. CONSULTATION
   ============================================================ */
.njs-home-consult__box {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	border-radius: var(--njs-radius);
	overflow: hidden;
	background-color: var(--njs-home-ink);
	color: #ffffff;
}

.njs-home-consult__box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.njs-home-consult__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px;
}

.njs-home-consult .njs-home-h2 {
	color: #ffffff;
}

.njs-home-consult .njs-home-lede {
	color: #dddddd;
}

.njs-home-consult .njs-home-lede a {
	color: #ffffff;
}

.njs-home-consult__actions {
	margin: 0;
}

/* S9 (rulings line 39): the commercial call/email line under the button. */
.njs-home-consult__commercial {
	margin: 18px 0 0;
	max-width: 52ch;
	font-size: var(--njs-fs-2);
	line-height: 1.5;
	color: #dddddd;
}

.njs-home-consult__commercial a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The sticky header must not cover the box when the header's Contact us lands on it. */
.njs-home #consultation {
	scroll-margin-top: 120px;
}

/* D3 (Jay yes): breathing room between the dark box and the dark footer. */
.njs-home-consult {
	padding-bottom: 128px;
}

/* ============================================================
   S3 "Also for your backyard" row (261009-b55, rulings S3 + TILE LABELS)
   Compact text tiles, smaller than the swingset cards, same radius.
   ============================================================ */
.njs-home-res__side {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.njs-home-res__also-h {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-1);
	line-height: 1.1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--njs-home-muted);
	margin: 0 0 12px;
}

.njs-home-res__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.njs-home-res__tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 64px;
	height: 100%;
	padding: 14px 18px;
	border-radius: var(--njs-radius);
	background-color: #ffffff;
	color: var(--njs-home-ink);
	text-decoration: none;
	transition: box-shadow 160ms ease;
}

.njs-home-res__tile:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.njs-home-res__tile-label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--njs-fs-3);
	line-height: 1.1;
}

.njs-home-res__tile small {
	display: block;
	margin-top: 4px;
	font-size: var(--njs-fs-1);
	line-height: 1.3;
	color: var(--njs-home-muted);
}

/* ============================================================
   S4 whole-card links (261009-b55): Equipment, Surfacing, Shade.
   Installation stays plain. Green lead-ins stay.
   ============================================================ */
.njs-home-svc__cards li:has(> .njs-home-svc__link) {
	padding: 0;
}

.njs-home-svc__link {
	display: block;
	height: 100%;
	padding: 24px 26px;
	border-radius: var(--njs-radius);
	color: inherit;
	text-decoration: none;
	transition: background-color 160ms ease;
}

.njs-home-svc__link:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
	.njs-home-res__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* S8: three cards under the summary below 1200px. */
	.njs-home-rev__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 900px) {
	.njs-home-sec {
		padding-block: 56px;
	}

	/* Phones: tall video hero (GameTime-style), text at the bottom. 261003-bkn. */
	.njs-home-hero {
		min-height: 0;
		justify-content: flex-end;
	}

	/* D1 (Jay yes, 2026-10-08; decision 15b): the panel stops PEEK (48px) short of the
	   first screen so the top of the first division link shows. 320px floor, 680px cap.
	   Nothing added over the video. Desktop (15a) is untouched. PEEK and the 30%
	   vertical position were chosen from evidence/d1-phone-crop-sheet.jpg: on a short
	   phone the box is wider than the 2:3 video, so the crop is vertical, and 50% 30%
	   keeps the roof peaks and faces in frame (the bottom sits under the scrim + text).
	   On taller phones the crop is horizontal and the 30% has no effect. */
	.njs-home-hero {
		--njs-hero-panel: clamp(320px, calc(100svh - var(--njs-hero-top, 96px) - 48px), 680px);
	}

	.njs-home-hero__poster,
	.njs-home-hero__video {
		object-position: 50% 30%;
	}

	.njs-home-hero__inner {
		min-height: var(--njs-hero-panel);
		justify-content: flex-end;
	}

	/* Video, poster and scrim cover the hero panel only, not the list below it,
	   so the 9:16 phone video is not cropped a second time by object-fit. */
	.njs-home-hero__poster,
	.njs-home-hero__video,
	.njs-home-hero__scrim {
		bottom: auto;
		height: var(--njs-hero-panel);
	}

	.njs-home-hero__inner {
		padding: 150px 0 28px;
	}

	.njs-home-hero__scrim {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.35) 75%);
	}

	/* Phones: nothing over the video but the brand line, Jay's line and Pause (label + progress bar removed 2026-10-06). */
	.njs-home-hero__inner {
		padding-bottom: 32px;
	}

	.njs-home-doors__wrap {
		grid-template-columns: 1fr;
		width: 100%;
		border-radius: 0;
	}

	.njs-home-door {
		border-left: 0;
		border-top: 1px solid #e6e6e2;
		padding: 18px 20px;
	}

	.njs-home-door:first-child {
		border-top: 0;
	}

	.njs-home-headrow {
		flex-direction: column;
		align-items: flex-start;
	}

	.njs-home-work__grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px 12px;
	}

	/* S2 (rulings): phones put the caption UNDER the photo, dark on white, photo
	   unobstructed, same words. Desktop keeps the overlay. */
	.njs-home-work__tile {
		aspect-ratio: auto;
		border-radius: 0;
		overflow: visible;
		background-color: transparent;
	}

	.njs-home-work__tile img {
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--njs-radius);
	}

	.njs-home-work__tile figcaption {
		position: static;
		padding: 10px 2px 0;
		background: none;
		color: var(--njs-home-ink);
	}

	.njs-home-work__tile figcaption span {
		margin-top: 2px;
		color: var(--njs-home-muted);
	}

	/* S5 (rulings): two featured products per row on phones. */
	.njs-home .njs-featured-products__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.njs-home .njs-product-card {
		padding: 10px;
	}

	/* S6 (rulings): guides as compact rows, small square photo left, date + title right. */
	.njs-home .njs-blog-teaser__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.njs-home-guides .njs-blog-card {
		display: grid;
		grid-template-columns: 96px 1fr;
		grid-template-rows: auto auto;
		column-gap: 14px;
		align-items: center;
		align-content: center;
		padding: 10px;
	}

	.njs-home-guides .njs-blog-card__image-wrap {
		grid-row: 1 / span 2;
		width: 96px;
		aspect-ratio: 1 / 1;
		margin: 0;
	}

	.njs-home-guides .njs-blog-card__meta {
		align-self: end;
		margin: 0;
	}

	.njs-home-guides .njs-blog-card__title {
		align-self: start;
		margin-top: 2px;
	}

	.njs-home-rev__cards {
		grid-template-columns: 1fr;
	}

	.njs-home-consult {
		padding-bottom: 96px;
	}

	.njs-home-svc__grid,
	.njs-home-rev__grid,
	.njs-home-party__box,
	.njs-home-consult__box {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.njs-home-party__box,
	.njs-home-consult__box {
		gap: 0;
	}

	.njs-home-party__box img,
	.njs-home-consult__box img {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.njs-home-svc__cards {
		grid-template-columns: 1fr;
	}

	.njs-home-party__copy,
	.njs-home-consult__copy {
		padding: 28px;
	}

	.njs-home-coop {
		padding: 28px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.njs-home-hero__video,
	.njs-home-hero__pause {
		display: none;
	}

	.njs-home-hero__video,
	.njs-home-door,
	.njs-home-tlink {
		transition: none;
	}
}