/*
Theme Name:  Decor Homee
Theme URI:   https://example.com/
Author:      Battersea Web Expert
Description: Professional luxury block theme for New York decor and styling service. Powered by Stitch MCP design system.
Version:     0.3.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nydecor
Tags:        block-theme, full-site-editing, one-column, custom-colors, custom-menu, block-patterns
*/

/* --------------------------------------------------------------- skip link */
.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999999;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* -------------------------------------------------------------- Animations & Effects */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.nyd-fade-in {
	animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Glassmorphism utility for floating cards / headers */
.nyd-glass {
	background: rgba(246, 247, 244, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 8px 32px rgba(26, 29, 32, 0.05);
}

/* -------------------------------------------------------------- breadcrumb */
.nyd-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.nyd-breadcrumb__item + .nyd-breadcrumb__item::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--wp--preset--color--accent-2);
}

.nyd-breadcrumb__item a {
	color: var(--wp--preset--color--ink-2);
	text-decoration: none;
	transition: color 0.3s ease;
}

.nyd-breadcrumb__item a:hover,
.nyd-breadcrumb__item a:focus {
	color: var(--wp--preset--color--accent);
}

.nyd-breadcrumb__item[aria-current="page"] {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* ---------------------------------------------------------- outline button */
.nyd-button--outline {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nyd-button--outline:hover,
.nyd-button--outline:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent), 0 8px 20px rgba(27, 59, 54, 0.15);
	transform: translateY(-2px);
}

/* -------------------------------------------------------------- phone link */
.nyd-phone {
	color: inherit;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: opacity 0.3s ease;
}

.nyd-phone:hover {
	opacity: 0.7;
}

/* --------------------------------------------------------- address + hours */
.nyd-address {
	font-style: normal;
	margin-block-start: 1rem;
	color: var(--wp--preset--color--ink-2);
	line-height: 1.8;
}

.nyd-hours {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--ink-2);
	line-height: 1.8;
}

/* ----------------------------------------------------------------- eyebrow */
.nyd-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	margin-block-end: 1rem;
	display: block;
}

h2.nyd-eyebrow {
	line-height: 1.4;
}

/* ------------------------------------------------------------ ticker band */
/*
 * The trust bar styled as the Warm Magazine ticker: terracotta band, cream
 * caps. Same facts, same shortcodes — only the dress changed.
 */
.nyd-ticker {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nyd-ticker .nyd-phone { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------- flush hero under menu */
/*
 * The template root gives <main> a 48px blockGap margin below the header.
 * When the page OPENS with a full-bleed banner (homepage photo hero, the
 * inner-page photographic heroes), that margin is a cream slot between the
 * menu and the image — measured, not guessed: main.marginTop was 48px.
 * Pages that start with text keep the gap.
 */
main.wp-block-group:has(> .alignfull:first-child),
main.wp-block-group:has(> .nyd-hh-wrap:first-child) {
	margin-block-start: 0;
}

/* ------------------------------------------------------------ sticky header */
header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background: rgba(246, 247, 244, 0.95);
	backdrop-filter: blur(10px);
	border-block-end: 1px solid var(--wp--preset--color--rule);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

header.wp-block-template-part.is-scrolled {
	box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

:where(h1, h2, h3, h4, [id]) {
	scroll-margin-block-start: 8rem;
}

@media (max-height: 32rem) {
	header.wp-block-template-part { position: static; }
}

/* -------------------------------------------------------------- primary nav */
/*
 * The menu wears the same Josefin caps as the buttons and eyebrows, so the
 * header reads as one system. Hover draws a 2px accent rule under the link;
 * the current page keeps that rule and takes the accent colour, so "where
 * am I" is answered by the nav itself.
 */
.nyd-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Seven items now — the 3rem gap fit five. */
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* The wordmark never wraps, whatever squeezes the row. */
.nyd-headrow .wp-block-site-title { white-space: nowrap; }

/* The header CTA earns its place only where the full row genuinely fits;
   below that the hero's own estimate CTA is one scroll away. */
@media (max-width: 78rem) {
	.nyd-headrow .wp-block-buttons { display: none; }
}

.nyd-nav__link {
	color: var(--wp--preset--color--ink-2);
	text-decoration: none;
	position: relative;
	padding-block: 0.5rem;
	transition: color 0.25s ease;
}

.nyd-nav__link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--wp--preset--color--accent);
	transition: width 0.25s ease;
}

.nyd-nav__link:hover,
.nyd-nav__link:focus-visible {
	color: var(--wp--preset--color--ink);
}

.nyd-nav__link:hover::after,
.nyd-nav__link:focus-visible::after,
.nyd-nav__link.is-current::after {
	width: 100%;
}

.nyd-nav__link.is-current {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------ mega panels */
/* The trigger is a link + a separate disclosure caret; the panel anchors to
   the header row so it spans the page spine. */
.nyd-headrow { position: relative; }

.nyd-nav__pair { display: inline-flex; align-items: center; gap: 0.15rem; }

.nyd-nav__caret {
	display: inline-grid;
	place-items: center;
	background: none;
	border: 0;
	padding: 0.35rem;
	cursor: pointer;
	color: var(--wp--preset--color--ink-2);
	border-radius: 999px;
	transition: transform 0.2s ease, color 0.2s ease;
}

.nyd-nav__caret:hover,
.nyd-nav__caret:focus-visible { color: var(--wp--preset--color--ink); }

.nyd-nav__caret[aria-expanded="true"] {
	transform: rotate(180deg);
	color: var(--wp--preset--color--accent);
}

/* Panel typography resets the nav's caps/tracking — this is body text. */
.nyd-mega__label {
	margin: 0 0 0.6rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.nyd-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.nyd-mega__parent a {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.nyd-mega__parent:not(:first-child) { margin-block-start: 0.55rem; }

.nyd-mega__child { padding-inline-start: 0.9rem; }

.nyd-mega__child a {
	color: var(--wp--preset--color--ink-2);
	text-decoration: none;
	font-size: 0.875rem;
}

.nyd-mega a:hover,
.nyd-mega a:focus-visible { color: var(--wp--preset--color--accent); }

.nyd-mega__all {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--rule);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	font-family: var(--wp--preset--font-family--body);
}

.nyd-mega__all a { text-decoration: none; }

@media (min-width: 64.0625rem) {
	.nyd-mega {
		position: absolute;
		inset-block-start: calc(100% + 1.2rem);
		z-index: 40;
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: 18px;
		padding: var(--wp--preset--spacing--40);
		box-shadow: 0 2px 4px rgba(19, 26, 23, 0.06), 0 28px 56px -12px rgba(19, 26, 23, 0.22);
	}

	/* Invisible bridge over the gap between trigger and panel, so a mouse
	   crossing it does not close the panel it is travelling to. */
	.nyd-mega::before {
		content: "";
		position: absolute;
		inset-block-start: -1.3rem;
		inset-inline: 0;
		block-size: 1.3rem;
	}

	/* Full panel (Services): spans the header row. */
	.nyd-mega--full { inset-inline: 0; }

	/* Compact dropdown (Rooms, Areas): hangs under its own item. */
	.nyd-nav__item--drop { position: relative; }

	.nyd-mega--drop {
		inset-inline-start: -1.1rem;
		inset-block-start: calc(100% + 1.45rem);
		inline-size: max-content;
		min-inline-size: 13rem;
		padding: var(--wp--preset--spacing--30);
		border-radius: 14px;
	}

	.nyd-mega--drop::before {
		inset-block-start: -1.5rem;
		block-size: 1.5rem;
	}

	.nyd-mega__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
	}

	.nyd-mega__grid--simple { display: block; }

	/* Only the FULL variant columnises a simple list; dropdowns stay single. */
	.nyd-mega--full .nyd-mega__grid--simple .nyd-mega__list { columns: 2; column-gap: var(--wp--preset--spacing--40); }

	.nyd-mega--full .nyd-mega__grid--simple .nyd-mega__list li { break-inside: avoid; }

	.nyd-mega--drop .nyd-mega__all { margin-block-start: var(--wp--preset--spacing--20); }
}

@media (prefers-reduced-motion: reduce) {
	.nyd-nav__caret { transition: none; }
}

.nyd-nav__toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	transition: background 0.2s ease, color 0.2s ease;
}

.nyd-nav__toggle:hover,
.nyd-nav__toggle[aria-expanded="true"] {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}

/* Seven items collapse earlier than five did. */
@media (max-width: 64rem) {
	.nyd-nav { position: relative; }
	.nyd-nav__toggle { display: inline-flex; }

	.nyd-nav__list {
		display: none;
		flex-direction: column;
		gap: 0;
		position: absolute;
		inset-inline-end: 0;
		inset-block-start: calc(100% + 0.75rem);
		z-index: 20;
		min-inline-size: 17rem;
		padding: var(--wp--preset--spacing--20) 0;
		background: var(--wp--preset--color--surface);
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(19, 26, 23, 0.06), 0 18px 44px rgba(19, 26, 23, 0.16);
	}

	.nyd-nav__list.is-open,
	.no-js .nyd-nav__list { display: flex; }

	/* Full-width rows in the panel; the hover rule becomes a left edge. */
	.nyd-nav__list li { border-block-start: 1px solid var(--wp--preset--color--rule); }
	.nyd-nav__list li:first-child { border-block-start: 0; }

	.nyd-nav__link {
		display: block;
		padding: 0.9rem var(--wp--preset--spacing--30);
	}

	/* Mega items become accordions inside the mobile panel. */
	.nyd-nav__pair {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-inline-end: 0.6rem;
	}

	.nyd-nav__pair .nyd-nav__link { flex: 1; }

	.nyd-nav__caret { padding: 0.6rem; }

	.nyd-mega {
		background: var(--wp--preset--color--ground);
		padding: 0.35rem var(--wp--preset--spacing--30) 0.9rem;
	}

	.nyd-mega__label { margin-block-start: 0.7rem; }

	.nyd-mega__grid--simple .nyd-mega__list { columns: auto; }

	.nyd-nav__link::after {
		width: 3px;
		height: 0;
		bottom: auto;
		top: 0;
		left: 0;
		transition: height 0.2s ease;
	}

	.nyd-nav__link:hover::after,
	.nyd-nav__link:focus-visible::after,
	.nyd-nav__link.is-current::after {
		width: 3px;
		height: 100%;
	}
}

/* ============================================================= page spine == */
.home .entry-content > *,
.page-template-page-wide .entry-content > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.home .entry-content > p,
.home .entry-content > h2,
.page-template-page-wide .entry-content > p,
.page-template-page-wide .entry-content > h2 {
	max-width: 65ch;
	margin-inline: auto;
}

/* Cards & Rich UI Elements */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	padding: 2rem;
	box-shadow: none;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.wp-block-group.is-style-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 30px rgba(26, 29, 32, 0.08);
}

.home .entry-content > .wp-block-group > * {
	max-width: none;
	margin-inline: auto;
}

.home main > .wp-block-template-part,
.post-type-archive-service main > .wp-block-template-part,
.single-service main > .wp-block-template-part {
	max-width: var(--wp--style--global--wide-size) !important;
}

.home main > .wp-block-template-part .wp-block-group,
.post-type-archive-service main > .wp-block-template-part .wp-block-group,
.single-service main > .wp-block-template-part .wp-block-group { max-width: none; }

/* --------------------------------------------------------- heading spacing */
.home .entry-content > h2 {
	margin-block-start: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--20);
	text-align: center;
}

.home .entry-content > h2 + p {
	text-align: center;
	margin-block-end: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-2);
}

/*
 * Homepage FAQ: magazine two-column — the heading holds the left rail while
 * the question cards stack on the right. The block renders heading + items
 * flat, so the grid places them: heading in column 1, every card in column 2.
 * Other pages keep the block's own single-column flow.
 */
.home .nyd-faq,
.post-type-archive-service .nyd-faq,
.single-service .nyd-faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	align-items: start;
}

.home .nyd-faq__heading,
.post-type-archive-service .nyd-faq__heading,
.single-service .nyd-faq__heading { grid-column: 1; margin: 0; }

/* The description fills the otherwise-empty rail under the heading. */
.home .nyd-faq__desc,
.post-type-archive-service .nyd-faq__desc,
.single-service .nyd-faq__desc {
	grid-column: 1;
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--ink-2);
	max-width: 42ch;
}

.home .nyd-faq > .nyd-faq__item,
.post-type-archive-service .nyd-faq > .nyd-faq__item,
.single-service .nyd-faq > .nyd-faq__item { grid-column: 2; margin-block-start: 0; }

.home .nyd-faq > .nyd-faq__item + .nyd-faq__item,
.post-type-archive-service .nyd-faq > .nyd-faq__item + .nyd-faq__item,
.single-service .nyd-faq > .nyd-faq__item + .nyd-faq__item { margin-block-start: 0; }

@media (max-width: 64rem) {
	.home .nyd-faq,
	.post-type-archive-service .nyd-faq,
	.single-service .nyd-faq { grid-template-columns: minmax(0, 1fr); }
	.home .nyd-faq > .nyd-faq__item,
	.post-type-archive-service .nyd-faq > .nyd-faq__item,
	.single-service .nyd-faq > .nyd-faq__item { grid-column: 1; }
	.home .nyd-faq__heading,
	.post-type-archive-service .nyd-faq__heading,
	.single-service .nyd-faq__heading { margin-block-end: var(--wp--preset--spacing--20); }
}

/* ---------------------------------------------------------- section rhythm */
/*
 * One chapter gap: 5rem (spacing-50) between sections, nothing stacked on
 * top of it. The first version used an 8rem margin PLUS a 5rem dead
 * padding-block-start, which cost up to 208px of cream between chapters —
 * measured, the owner read it as "lots of whitespace after every section".
 */
.home .entry-content > .nyd-service-grid,
.home .entry-content > .nyd-faq,
.home .entry-content > .nyd-book,
.home .entry-content > .nyd-sec,
.home .entry-content > .nyd-band {
	margin-block-start: var(--wp--preset--spacing--50);
}

/*
 * The dead padding is stripped from UNPAINTED sections only. A painted band
 * needs its internal padding — zeroing it put the eyebrow flush against the
 * band's top edge (the "background colour top padding is very less" bug).
 */
.home .entry-content > .nyd-service-grid,
.home .entry-content > .nyd-faq,
.home .entry-content > .nyd-book,
.home .entry-content > .nyd-sec {
	padding-block-start: 0;
}

/* The first section needs no chapter gap — the wrapper and the USP bar
   above already provide the spacing. Without this, whichever section is
   reordered to the top drags its 5rem margin with it. */
.home .entry-content > :first-child {
	border-block-start: 0;
	margin-block-start: 0;
}

.home .nyd-band,
.post-type-archive-service .nyd-band,
.single-service .nyd-band {
	background: var(--wp--preset--color--surface-2);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface-2);
	clip-path: inset(0 -100vmax);
	border-block-start: 0;
	padding-block: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------- section headings */
.nyd-service-grid__heading,
.nyd-faq__heading,
.nyd-book__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* ------------------------------------------------------- shortcode wrapper */
p:has(> .nyd-breadcrumb),
p:has(> .wp-block-buttons) {
	margin-block: 0;
}

/* ============================================== location page (Decoura) === */
/*
 * Ported from the Decoura design's "Location - Brooklyn" page. The design's
 * literal hex values are not repeated here — every colour resolves to a
 * theme.json token, so the palette stays in one place and the contrast test
 * keeps covering it.
 */

.nyd-loc__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

/* ==================================================== home — hero banner == */
/*
 * The homepage banner carries a background photograph. The URL is relative
 * to this stylesheet (themes/nydecor/ → ../../uploads/), so it survives a
 * domain move without a search-replace.
 *
 * The scrim runs 100deg and HOLDS ≥0.7 opacity through the text column —
 * the same lesson as the inner-page hero: a scrim that fades where the text
 * sits measures 2:1 on bright pixels. Verified by sampling rendered pixels
 * behind the heading and lede, not by the token suite.
 */
.nyd-hh-wrap {
	background:
		linear-gradient(
			100deg,
			rgba(9, 14, 12, 0.86) 0%,
			rgba(9, 14, 12, 0.74) 46%,
			rgba(9, 14, 12, 0.64) 70%,
			rgba(9, 14, 12, 0.56) 100%
		),
		url('../../uploads/2026/08/hero-livingroom-1600-5.webp') center / cover no-repeat;
	padding-inline: var(--wp--preset--spacing--30);
}

/* Light type on the photo. The widget card stays a white surface. */
.nyd-hh-wrap .nyd-eyebrow { color: #B9C9BE; }

.nyd-hh-wrap .nyd-hh__title { color: #FFFFFF; }

.nyd-hh-wrap .nyd-hh__title em { color: #9FD8B9; }

.nyd-hh-wrap .nyd-hh__lede { color: #D9E0DA; }

.nyd-hh-wrap .nyd-hh__stats { border-block-start-color: rgba(255, 255, 255, 0.3); }

.nyd-hh-wrap .nyd-hh__stat { color: #FFFFFF; }

.nyd-hh-wrap .nyd-hh__statlabel { color: #B9C9BE; }

/* The widget's heading and intro render ABOVE its white panel, i.e. on the
   photograph — they need the light treatment too. The panel itself is a
   white surface and keeps its own colours. Three selectors deep because the
   hero section's own `.nyd-hh__card .nyd-book__intro` rule comes later in
   the file and would win at equal specificity. */
.nyd-hh-wrap .nyd-hh__card .nyd-book__heading { color: #FFFFFF; }

.nyd-hh-wrap .nyd-hh__card .nyd-book__intro { color: #C9D3CC; }

/* ========================================================== home — hero == */
/*
 * Section 1 of the homepage, from the Decoura design.
 *
 * Two columns: the positioning copy on the left, the estimate form on the
 * right. The form used to be the last section of the page at 91% scroll depth
 * while the hero button navigated away to /book/; putting it in the first
 * viewport is the entire purpose of the layout.
 */
.nyd-hh {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--50);
}

.nyd-hh__title {
	margin-block: var(--wp--preset--spacing--20) 0;
	text-wrap: pretty;
}

.nyd-hh__lede {
	margin-block-start: var(--wp--preset--spacing--20);
	max-inline-size: 46ch;
	line-height: 1.65;
}

/* Counted, not claimed — see the pattern's header comment. */
.nyd-hh__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	padding-inline: 0;
	border-block-start: 1px solid var(--wp--preset--color--rule);
	list-style: none;
}

.nyd-hh__stat {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

.nyd-hh__statlabel {
	display: block;
	margin-block-start: 0.2rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-3);
}

/* The card the form sits in. The form's own styles come from blocks.css. */
.nyd-hh__card .nyd-book__form {
	margin: 0;
	border-radius: 18px;
	border: 0;
	box-shadow: 0 4px 8px rgba(9, 14, 12, 0.12), 0 28px 64px -24px rgba(9, 14, 12, 0.5);
	max-inline-size: none;
}

.nyd-hh__card .nyd-book__heading {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block: 0 0.4rem;
}

.nyd-hh__card .nyd-book__intro {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-3);
	margin-block-end: var(--wp--preset--spacing--30);
	max-inline-size: none;
}

@media (max-width: 64rem) {
	.nyd-hh {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

/* ================================================= home — what we do band == */
/*
 * Section 2. A full-bleed surface band holding a header row and six text
 * cards, from the Decoura design.
 *
 * Full bleed without extra markup: box-shadow paints past the element and
 * clip-path stops it creating a horizontal scrollbar. 100vw is avoided because
 * it includes the scrollbar width on Windows.
 */
/*
 * Two class names, not one. `.home .nyd-band` above paints the sand band and
 * is (0,2,0); a single-class rule here loses to it and the band rendered in
 * cream-deep instead of the intended colour. Warm Magazine inverts the old
 * design: the band paints the page's own cream ground and the cards are WHITE
 * panels lifted off it with shadow — so the band must NOT be surface, or the
 * white cards would sit on white.
 */
.nyd-band.nyd-band--surface {
	background: var(--wp--preset--color--ground);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--ground);
	clip-path: inset(0 -100vmax);
	border-block: 1px solid var(--wp--preset--color--rule);
	/* This band paints the page's own ground, so generous internal padding
	   reads as dead whitespace — the hairlines carry the framing. */
	padding-block: var(--wp--preset--spacing--30);
	/* The chapter gap comes from the section-rhythm rule; a second margin
	   here just stacked on top of it. */
	margin-block: 0;
}

/* Heading left, "all services" link right and baseline-aligned with it. */
.nyd-bandhead {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: var(--wp--preset--spacing--30);
}

.nyd-bandhead .nyd-eyebrow { grid-column: 1; margin-block-end: 0.5rem; }
.nyd-bandhead h2 { grid-column: 1; margin: 0; }

.nyd-bandhead__more {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	white-space: nowrap;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.nyd-bandhead__more a { text-decoration: none; }
.nyd-bandhead__more a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- service cards */
/*
 * Soft-modern cards: white, 16px radius, a layered ink-tinted shadow, and a
 * lift on hover. The flat 1px cell grid read as boxy — the owner asked for
 * depth, so the shadow system does the separating now.
 */
.nyd-sc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

.nyd-sc {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/*
 * Fixed aspect ratio so the six cards line up regardless of what shape the
 * photograph is. The library runs from 1.0 to 2.01, so without this the grid
 * rows step up and down.
 */
.nyd-sc__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--surface-2);
}

.nyd-sc__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}

.nyd-sc:hover .nyd-sc__img { transform: scale(1.03); }

.nyd-sc__text {
	display: block;
	padding: var(--wp--preset--spacing--30);
}

.nyd-sc:hover,
.nyd-sc:focus-visible {
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.06), 0 18px 44px rgba(19, 26, 23, 0.13);
	transform: translateY(-4px);
}

.nyd-sc__tag {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.nyd-sc__title {
	display: block;
	margin-block-start: 0.6rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.nyd-sc__body {
	display: block;
	margin-block-start: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-3);
}

/* ------------------------------------------------------------------ pills */
.nyd-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.nyd-pills__lead {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-3);
	margin-inline-end: 0.25rem;
}

.nyd-pill {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	padding: 0.45rem 0.9rem;
	color: var(--wp--preset--color--ink);
}

.nyd-pill--link { text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }

.nyd-pill--link:hover,
.nyd-pill--link:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

@media (max-width: 64rem) {
	.nyd-sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
	.nyd-sc-grid { grid-template-columns: minmax(0, 1fr); }
	.nyd-bandhead { grid-template-columns: minmax(0, 1fr); }
	.nyd-bandhead__more { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.nyd-sc, .nyd-pill--link { transition: none; }
	.nyd-sc:hover { transform: none; }
}

/* --------------------------------------------------------------- head row */
/*
 * Logo hard left, navigation and the CTA hard right, on one line. The row is
 * alignwide (see parts/header.html) so it has the width to do that without
 * wrapping.
 */
.nyd-headrow { flex-wrap: nowrap; }
.nyd-headrow > :first-child { margin-inline-end: auto; }

/* Below the nav breakpoint the toggle takes over and the row can breathe. */
@media (max-width: 48rem) {
	.nyd-headrow { gap: var(--wp--preset--spacing--20); }

	/* The 0.24em-tracked wordmark wraps to two lines at phone width and the
	   row stacks; tighter tracking + nowrap keeps it a single line. The
	   header CTA yields to the menu — the hero's estimate CTA and widget
	   are one scroll away, and a cramped three-up row helps nobody. */
	.nyd-headrow .wp-block-site-title { font-size: 1.05rem; letter-spacing: 0.16em; white-space: nowrap; }
	.nyd-headrow .wp-block-buttons,
	.nyd-headrow .wp-element-button { display: none; }
}

/* Motion off for people who ask for it. */
@media (prefers-reduced-motion: reduce) {
	.nyd-sc__img { transition: none; }
	.nyd-sc:hover .nyd-sc__img { transform: none; }
}

/* ================================================== home — decor by room == */
/*
 * Section 3. Photograph on top, caption UNDER it on the page ground.
 *
 * Not the site's other tile style, which sets white text over the image behind
 * a scrim. That works only while the photograph is dark, and measured across
 * this library the backdrops run from near-black to a flat 104,104,102 — the
 * pale ones leave the label hovering at the edge of legibility. Under the
 * image the caption sits at 15:1 whatever the photograph does.
 */
/* Chapter gap handled by the section-rhythm rule above. */
.nyd-sec { margin-block: 0; }

.nyd-rt-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

.nyd-rt { display: block; text-decoration: none; color: var(--wp--preset--color--ink); }

/* Rounded photographs on a soft shadow; small-caps label with a forest tick. */
.nyd-rt__media,
.nyd-rt__empty {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--surface-2);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
}

.nyd-rt__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}

.nyd-rt:hover .nyd-rt__img { transform: scale(1.03); }

.nyd-rt__title {
	display: block;
	margin-block-start: 0.9rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
}

.nyd-rt__title::before {
	content: "";
	display: inline-block;
	inline-size: 0.55rem;
	block-size: 0.55rem;
	background: var(--wp--preset--color--accent);
	margin-inline-end: 0.7rem;
	vertical-align: baseline;
}

.nyd-rt:hover .nyd-rt__title { color: var(--wp--preset--color--accent); }

.nyd-rt__body {
	display: block;
	margin-block-start: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-3);
}

@media (max-width: 64rem) {
	.nyd-rt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
	.nyd-rt-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.nyd-rt__img { transition: none; }
	.nyd-rt:hover .nyd-rt__img { transform: none; }
}

/* ------------------------------------------------------------ hero strip */
/*
 * Three photographs directly under the hero. The hero is deliberately clean —
 * copy and the booking card — so this is where the homepage's opening imagery
 * lands.
 */
.nyd-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
	margin-block-end: calc(var(--wp--preset--spacing--50) + 1.25rem);
}

.nyd-strip__item {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--wp--preset--color--surface-2);
	border-radius: 14px;
}

/*
 * Magazine collage: the middle photograph drops below the line on a white
 * plate with a lifted shadow, like a print laid over the spread. The strip's
 * bottom margin absorbs the offset so the next section doesn't collide.
 * Static strips only — inside the slider the cards travel, so an offset one
 * would bob up and down as it scrolled past.
 */
.nyd-strip:not(.nyd-strip--slider) .nyd-strip__item:nth-child(2) {
	transform: translateY(1.25rem);
	border: 6px solid var(--wp--preset--color--surface);
	box-shadow: 0 24px 48px rgba(43, 36, 32, 0.18);
}

/* ------------------------------------------------------- boundary split */
/*
 * "What we are not": the refusal card in white with crossed rings, the
 * counterpart card on night forest with mint checks. Same soft card system
 * as everything else on the page.
 */
.nyd-not {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

.nyd-not__card {
	border-radius: 18px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
}

.nyd-not__card--no {
	background: var(--wp--preset--color--surface);
}

.nyd-not__card--no .nyd-not__mark { color: var(--wp--preset--color--ink-3); }

.nyd-not__card--yes {
	background: linear-gradient(145deg, #1B2A22 0%, var(--wp--preset--color--accent-2) 60%);
	color: var(--wp--preset--color--surface);
}

.nyd-not__card--yes .nyd-not__title { color: var(--wp--preset--color--surface); }
.nyd-not__card--yes .nyd-not__mark { color: #8FCFAC; }
.nyd-not__card--yes .nyd-not__list { color: #DEE5E0; }
.nyd-not__card--yes .nyd-not__note { color: #9DBBA9; }

.nyd-not__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
}

.nyd-not__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.85rem;
	font-size: var(--wp--preset--font-size--medium);
}

.nyd-not__list li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.nyd-not__mark { flex: none; display: grid; place-items: center; }

.nyd-not__mark svg { inline-size: 1.4rem; block-size: 1.4rem; display: block; }

.nyd-not__note {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-2);
}

.nyd-not__card--yes .nyd-not__note { border-block-start-color: rgba(246, 247, 244, 0.18); }

@media (max-width: 48rem) {
	.nyd-not { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------- audience cards */
/*
 * "You are selling" / "You are staying". Hovering a card fades the night
 * forest in behind the content and the type inverts to the light set. The
 * gradient lives on a ::before (gradients cannot transition), so only its
 * opacity animates; every child gets a z-index above it.
 */
.nyd-aud {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nyd-aud::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(145deg, #1B2A22 0%, #14201B 60%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.nyd-aud > * { position: relative; z-index: 1; }

.nyd-aud h2,
.nyd-aud p,
.nyd-aud a { transition: color 0.3s ease; }

.nyd-aud:hover,
.nyd-aud:focus-within {
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.06), 0 18px 44px rgba(19, 26, 23, 0.16);
	transform: translateY(-3px);
}

.nyd-aud:hover::before,
.nyd-aud:focus-within::before { opacity: 1; }

.nyd-aud:hover h2,
.nyd-aud:focus-within h2 { color: #FFFFFF; }

.nyd-aud:hover .nyd-eyebrow,
.nyd-aud:focus-within .nyd-eyebrow { color: #9DBBA9; }

.nyd-aud:hover p,
.nyd-aud:hover p.has-ink-2-color,
.nyd-aud:focus-within p,
.nyd-aud:focus-within p.has-ink-2-color { color: #ACB8B0; }

.nyd-aud:hover a,
.nyd-aud:focus-within a { color: #8FCFAC; }

@media (prefers-reduced-motion: reduce) {
	.nyd-aud,
	.nyd-aud::before,
	.nyd-aud h2,
	.nyd-aud p,
	.nyd-aud a { transition: none; }
	.nyd-aud:hover { transform: none; }
}

/* ------------------------------------------------- strip review overlays */
/*
 * Hover a photo and the review slides up over a bottom scrim: stars, a
 * one-line quote, name · place. The overlay data is placeholder-guarded in
 * [nyd_hero_strip] — see nyd_strip_reviews() — so nothing here can put an
 * invented review on the live site.
 */
.nyd-strip__item--rev { position: relative; }

.nyd-strip__rev {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.45rem;
	padding: 1.2rem 1.3rem;
	background: linear-gradient(to top, rgba(9, 14, 12, 0.92) 0%, rgba(9, 14, 12, 0.65) 55%, rgba(9, 14, 12, 0.05) 100%);
	color: #FFFFFF;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	border-radius: inherit;
}

.nyd-strip__item--rev:hover .nyd-strip__rev,
.nyd-strip__item--rev:focus-within .nyd-strip__rev {
	opacity: 1;
	transform: translateY(0);
}

.nyd-strip__stars { display: flex; gap: 0.2rem; color: #E9C46A; }

.nyd-strip__star { inline-size: 1rem; block-size: 1rem; }

.nyd-strip__star--off { color: rgba(255, 255, 255, 0.35); }

.nyd-strip__quote {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #F0F3F0;
}

.nyd-strip__who {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #B9C9BE;
}

@media (prefers-reduced-motion: reduce) {
	.nyd-strip__rev { transition: none; transform: none; }
}

/* ------------------------------------------------------------ hero slider */
/*
 * The slider variant of the strip. The track is the scroller: scroll-snap
 * does the carding, so it works before (and without) slider.js — the
 * controls are the only JS-dependent part and stay hidden until `.is-ready`.
 */
.nyd-strip--slider {
	display: block;
	/* The +1.25rem in the static strip's margin absorbs the collage offset;
	   the slider has no offset, and the USP bar sits close beneath. */
	margin-block-end: var(--wp--preset--spacing--40);
}

.nyd-strip__track {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.nyd-strip__track::-webkit-scrollbar { display: none; }

.nyd-strip__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* Three cards in view on desktop, two on tablet, one-and-a-peek on a phone. */
.nyd-strip--slider .nyd-strip__item {
	flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
	scroll-snap-align: start;
}

.nyd-strip__controls {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--30);
}

.nyd-strip--slider.is-ready .nyd-strip__controls { display: flex; }

.nyd-strip__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.nyd-strip__btn:hover:not(:disabled),
.nyd-strip__btn:focus-visible {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.nyd-strip__btn:disabled {
	border-color: var(--wp--preset--color--rule);
	color: var(--wp--preset--color--rule);
	cursor: default;
}

.nyd-strip__dots { display: flex; gap: 0.5rem; }

.nyd-strip__dot {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--rule);
	cursor: pointer;
	transition: background 0.2s ease, inline-size 0.2s ease;
}

.nyd-strip__dot.is-active {
	background: var(--wp--preset--color--accent);
	inline-size: 1.5rem;
}

@media (max-width: 64rem) {
	.nyd-strip--slider .nyd-strip__item {
		flex-basis: calc((100% - var(--wp--preset--spacing--30)) / 2);
	}
}

@media (max-width: 40rem) {
	.nyd-strip--slider .nyd-strip__item { flex-basis: 86%; }
}

@media (prefers-reduced-motion: reduce) {
	.nyd-strip__track { scroll-behavior: auto; }
}

.nyd-strip__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 40rem) {
	.nyd-strip:not(.nyd-strip--slider) { grid-template-columns: minmax(0, 1fr); }
	/* One photograph is enough on a phone; two more is three screens of
	   scroll. Static strips only — the slider stacks nothing, it scrolls. */
	.nyd-strip:not(.nyd-strip--slider) .nyd-strip__item:nth-child(n + 2) { display: none; }
}

/* ========================================================== process steps == */
/*
 * "How it works" as an infographic (owner-supplied reference): each step is
 * a ringed number badge with a stem rising to a dot, an icon + label head,
 * and a rounded outlined box the badge overlaps. --ring comes from the
 * shortcode per step, deepening one green tone at a time. The rings and
 * stems are decorative; number and label sit on white at AA.
 */
.nyd-proc {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Geometry: the badge is a 5rem circle whose CENTRE sits exactly on the
 * box's top-left corner, as in the reference — so the box is offset by half
 * the badge (2.5rem) on both axes, and the stem rises from the badge's top.
 */
.nyd-proc__step {
	position: relative;
	min-inline-size: 0;
	padding-block-start: 1.5rem; /* stem + dot live here */
}

.nyd-proc__stem {
	position: absolute;
	top: 0.5rem;
	left: calc(2.5rem - 1px);
	inline-size: 2px;
	block-size: 1.5rem;
	background: var(--ring, var(--wp--preset--color--accent));
}

.nyd-proc__stem::before {
	content: "";
	position: absolute;
	top: -0.55rem;
	left: 50%;
	transform: translateX(-50%);
	inline-size: 0.7rem;
	block-size: 0.7rem;
	border-radius: 999px;
	background: var(--ring, var(--wp--preset--color--accent));
}

.nyd-proc__badge {
	position: absolute;
	top: 1.5rem;
	left: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 5rem;
	block-size: 5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: 3px solid var(--ring, var(--wp--preset--color--accent));
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.65rem;
	color: var(--ring, var(--wp--preset--color--accent));
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.08), 0 8px 20px rgba(19, 26, 23, 0.12);
}

/* Box top-left corner = badge centre. */
.nyd-proc__box {
	margin-block-start: 2.5rem;
	margin-inline-start: 2.5rem;
	background: var(--wp--preset--color--surface);
	border: 1.5px solid var(--ring, var(--wp--preset--color--accent));
	border-radius: 18px;
	padding: 1.3rem 1.5rem 1.5rem 3.4rem; /* left clears the badge's inner half */
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.04), 0 8px 22px rgba(19, 26, 23, 0.06);
}

.nyd-proc__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-block-size: 2rem;
	color: var(--ring, var(--wp--preset--color--accent));
}

.nyd-proc__head svg { inline-size: 1.3rem; block-size: 1.3rem; flex: none; }

.nyd-proc__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.25;
	color: inherit;
	white-space: nowrap;
}

.nyd-proc__note {
	margin: 0.8rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-2);
	max-inline-size: 46ch;
}

@media (max-width: 48rem) {
	.nyd-proc { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
	.nyd-proc__label { white-space: normal; }
}

/* ========================================================== numbers band == */
/*
 * Full-width dark band, reference layout: bold heading left, short accent
 * rule, big numerals right. Same soft-modern dress as the CTA band — the
 * gradient and the 24px radius keep it off the "flat boxy" list.
 */
.nyd-statband {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.6fr);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	background: linear-gradient(135deg, #1B2A22 0%, var(--wp--preset--color--accent-2) 55%);
	color: var(--wp--preset--color--surface);
	border-radius: 24px;
	padding: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--50) 0;
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.08), 0 20px 48px rgba(19, 26, 23, 0.18);
}

.nyd-statband__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 500;
	color: var(--wp--preset--color--surface);
	max-inline-size: 14ch;
}

.nyd-statband__note {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: #9DBBA9;
	max-inline-size: 30ch;
}

.nyd-statband__rule {
	display: block;
	inline-size: 3.5rem;
	block-size: 2px;
	background: #8FCFAC;
}

.nyd-statband__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nyd-statband__num {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	font-size: clamp(2.4rem, 3vw, 3.25rem);
	line-height: 1;
	color: #8FCFAC;
}

.nyd-statband__label {
	display: block;
	margin-block-start: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: #DEE5E0;
}

@media (max-width: 64rem) {
	.nyd-statband { grid-template-columns: minmax(0, 1fr); }
	.nyd-statband__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
	.nyd-statband__list { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================== why choose us == */
/*
 * Bento grid on the sand band: the photograph holds the left column across
 * both rows, the lead card sits on night forest, and three white cells
 * complete the grid. Cells are bordered, not shadowed — same Swiss language
 * as the service grid.
 */
.nyd-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(14rem, auto);
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--40);
}

.nyd-why__grid > * { margin-block-start: 0; }

.nyd-why__photo {
	grid-row: span 2;
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 10px 28px rgba(19, 26, 23, 0.09);
}

.nyd-why__photo img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.nyd-why__card {
	background: var(--wp--preset--color--surface);
	border-radius: 18px;
	padding: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nyd-why__card:hover {
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.06), 0 16px 40px rgba(19, 26, 23, 0.12);
	transform: translateY(-3px);
}

.nyd-why__card--lead {
	background: linear-gradient(145deg, #1B2A22 0%, var(--wp--preset--color--accent-2) 60%);
	color: var(--wp--preset--color--surface);
}

.nyd-why__card--lead .nyd-why__title { color: var(--wp--preset--color--surface); }

/* #A9C7B4 on #14201B measures 9.5:1 — the muted body tone for the dark cell. */
.nyd-why__card--lead .nyd-why__body { color: #A9C7B4; }

.nyd-why__card--lead .nyd-why__icon { color: #8FCFAC; }

.nyd-why__icon {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 12px;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--accent);
}

.nyd-why__card--lead .nyd-why__icon { background: rgba(143, 207, 172, 0.14); border: 0; }

.nyd-why__icon svg { inline-size: 1.35rem; block-size: 1.35rem; display: block; }

.nyd-why__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.2;
}

.nyd-why__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-2);
}

@media (max-width: 64rem) {
	.nyd-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nyd-why__photo { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 21 / 9; }
	.nyd-why__photo img { position: absolute; }
}

@media (max-width: 40rem) {
	.nyd-why__grid { grid-template-columns: minmax(0, 1fr); }
	.nyd-why__photo { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
	.nyd-why__card { transition: none; }
}

/* =============================================================== USP bar == */
/*
 * Four claims under the hero, each with a small drawn sticker. Replaces the
 * old facts strip — see the [nyd_usp_bar] shortcode header for what was on it
 * and why each item went.
 *
 * The stickers are deliberately imperfect: each one is nudged a degree or two
 * off square, alternating direction, so the row reads as four things pressed
 * onto the page rather than four icons on a grid. The rotation is on the
 * sticker only, never the text, because rotated type is harder to read for no
 * gain.
 */
.nyd-usps {
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
	margin-block: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.nyd-usp {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-inline-size: 0;
}

/* White plate, like the cards — Warm Magazine lifts things on surface. */
.nyd-usp__sticker {
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	/* The lift that makes it read as stuck on rather than printed in. */
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.06), 0 6px 16px rgba(19, 26, 23, 0.1);
}

.nyd-usp__sticker svg { inline-size: 1.35rem; block-size: 1.35rem; display: block; }

.nyd-usp__sticker--1 { transform: rotate(-3deg); }
.nyd-usp__sticker--2 { transform: rotate(2deg); }
.nyd-usp__sticker--3 { transform: rotate(-2deg); }
.nyd-usp__sticker--4 { transform: rotate(3deg); }

.nyd-usp__text { display: flex; flex-direction: column; min-inline-size: 0; }

.nyd-usp__label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

.nyd-usp__note {
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-3);
	margin-block-start: 0.15rem;
}

@media (max-width: 64rem) {
	.nyd-usps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
	.nyd-usps { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- dark footer */
/*
 * The footer sits on stone-dark (accent-2), so EVERY colour inside it is
 * restated here — the 2026-08-13 lesson: a panel that changes its background
 * inherits link/eyebrow colours tuned for the light page and goes illegible
 * (or invisible) silently. All tones verified ≥4.5:1 on #1C1917.
 */
.nyd-footer-dark a { color: #DEE5E0; text-decoration: none; }
.nyd-footer-dark a:hover,
.nyd-footer-dark a:focus-visible { color: #8FCFAC; text-decoration: underline; }

/* Masthead row: the wordmark large, the estimate button on the same line. */
.nyd-footer-dark__masthead .wp-block-site-title {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: 0.24em;
}

/* Link lists breathe — the <br>-separated shortcode links become an open,
   line-spaced column rather than cramped text. */
.nyd-footer-dark .wp-block-column .wp-block-shortcode { line-height: 2.2; }

.nyd-footer-dark .wp-block-column .nyd-eyebrow { margin-block-end: 0.75rem; }

/* Column links slide 4px on hover instead of underlining — quieter, and
   the mint colour change already carries the state. */
.nyd-footer-dark .wp-block-column a {
	display: inline-block;
	transition: transform 0.2s ease, color 0.2s ease;
}

.nyd-footer-dark .wp-block-column a:hover,
.nyd-footer-dark .wp-block-column a:focus-visible {
	text-decoration: none;
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.nyd-footer-dark .wp-block-column a { transition: none; }
	.nyd-footer-dark .wp-block-column a:hover { transform: none; }
}

.nyd-footer-dark .nyd-eyebrow { color: #9DBBA9; }

.nyd-footer-dark__blurb { color: #ACB8B0; }

.nyd-footer-dark .nyd-address,
.nyd-footer-dark .nyd-hours { color: #ACB8B0; }

.nyd-footer-dark__rule { background: rgba(246, 247, 244, 0.18); border: 0; height: 1px; }

.nyd-footer-dark__legal { color: #93A198; }
.nyd-footer-dark__legal a { color: #ACB8B0; }

.nyd-footer-dark .wp-element-button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.nyd-footer-dark .wp-element-button:hover,
.nyd-footer-dark .wp-element-button:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.nyd-footer-dark .wp-block-site-title a { color: #F6F7F4; }

/* ------------------------------------------------------------ closing CTA */
/*
 * The page's last word. Points at the hero form rather than repeating it —
 * two six-step wizards on one page is twice the markup and script, and asks a
 * visitor who reached the bottom to start something they already scrolled past.
 */
.nyd-cta {
	background: linear-gradient(135deg, #1B2A22 0%, var(--wp--preset--color--accent-2) 55%);
	color: var(--wp--preset--color--surface);
	border-radius: 24px;
	padding: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--50) 0;
	display: grid;
	gap: 0.5rem;
	justify-items: start;
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.08), 0 20px 48px rgba(19, 26, 23, 0.18);
}

.nyd-cta :is(h1, h2, h3, p) { color: var(--wp--preset--color--surface); margin: 0; }
.nyd-cta p { max-inline-size: 52ch; }
.nyd-cta__act { margin-block-start: var(--wp--preset--spacing--20) !important; }

/* Stone & Amber hero H1: the closing clause carries the weight and the
   amber — Swiss emphasis is weight contrast, not italics. */
.nyd-hh__title em {
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--accent-ink);
}

/* On the dark stone band the amber button holds; hover inverts to white. */
.nyd-cta .wp-element-button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.nyd-cta .wp-element-button:hover,
.nyd-cta .wp-element-button:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* ===================================================== services catalogue == */
/*
 * The /services/ index. Sections are alignwide groups directly inside the
 * archive template's main — there is no post content on an archive, so the
 * homepage's .entry-content rhythm rules never fire here. .nyd-chap carries
 * the same 5rem chapter gap instead.
 *
 * Card components are shortcode-rendered ([nyd_service_catalog]), so their
 * CSS lives here and not in blocks.css, which only loads when one of our
 * blocks is on the page.
 */
.post-type-archive-service main > .nyd-chap,
.single-service main > .nyd-chap {
	margin-block-start: var(--wp--preset--spacing--50);
}

/*
 * The archive reuses the homepage's two-column hero (.nyd-hh: copy left,
 * estimate form right); only the photograph differs. Same scrim stops as
 * the homepage rule — restated in full because a background shorthand
 * cannot override the image layer alone.
 */
.post-type-archive-service .nyd-hh-wrap {
	background:
		linear-gradient(
			100deg,
			rgba(9, 14, 12, 0.86) 0%,
			rgba(9, 14, 12, 0.74) 46%,
			rgba(9, 14, 12, 0.64) 70%,
			rgba(9, 14, 12, 0.56) 100%
		),
		url('../../uploads/2026/08/model-home-staging-1600.webp') center / cover no-repeat;
}

/* The outline button is accent-on-transparent — near-invisible on the dark
   photograph. A panel that changes its background restates its colours, and
   the button carries its OWN dark backing: transparent failed at 1.97:1
   where the photo's pale sofa shows through the thinned scrim (measured),
   so its legibility must not depend on what the photograph does. */
.nyd-hh-wrap .nyd-button--outline {
	color: #FFFFFF;
	background-color: rgba(9, 14, 12, 0.6);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.nyd-hh-wrap .nyd-button--outline:hover,
.nyd-hh-wrap .nyd-button--outline:focus {
	background-color: #FFFFFF;
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px #FFFFFF;
}

.nyd-lede {
	max-width: 65ch;
	color: var(--wp--preset--color--ink-2);
}

/* Cards: white plates on the shadow system, photograph on top, the child
   services as pill links along the base. NOT one big <a> like the homepage
   cards — the pills are links, and links cannot nest inside links. */
.nyd-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

.nyd-cat-grid--feature { grid-template-columns: minmax(0, 1fr); }

.nyd-cat {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nyd-cat:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.07), 0 16px 40px rgba(19, 26, 23, 0.11);
}

.nyd-cat__media,
.nyd-cat__empty {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--surface-2);
}

.nyd-cat__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}

.nyd-cat:hover .nyd-cat__img { transform: scale(1.03); }

.nyd-cat__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--wp--preset--spacing--30);
	flex: 1;
}

.nyd-cat__title { margin: 0; font-size: var(--wp--preset--font-size--large); }

.nyd-cat__title a { color: var(--wp--preset--color--ink); text-decoration: none; }

.nyd-cat__title a:hover,
.nyd-cat__title a:focus-visible { color: var(--wp--preset--color--accent); text-decoration: underline; }

.nyd-cat__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-2);
}

/* The pills sit on the card's white, so they take the page ground to stay
   visible; margin-block-start auto pins the row to the card's base so the
   pill rows align across a row of unequal texts. */
.nyd-cat__kids {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: auto 0 0;
	padding: 0.4rem 0 0;
}

.nyd-cat__kids .nyd-pill { background: var(--wp--preset--color--ground); }

/*
 * The block-template render pipeline autop-wraps a lone shortcode token
 * before it expands, so template-rendered shortcode output carries stray
 * empty <p> artifacts (post content does not — its filter order unwraps
 * first). Harmless in flow, fatal as grid children: the stray became a grid
 * cell and pushed the feature card's text below its photograph. Hide them
 * on this page, and place the feature card's two real children explicitly
 * so no stray sibling can ever shift them.
 */
.post-type-archive-service main p:empty,
.single-service main p:empty { display: none; }

/* The feature card: photograph beside the text, for a group of one parent. */
.nyd-cat--feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.nyd-cat--feature .nyd-cat__media { grid-area: 1 / 1; }
.nyd-cat--feature .nyd-cat__body { grid-area: 1 / 2; }

.nyd-cat--feature .nyd-cat__media { aspect-ratio: auto; min-block-size: 20rem; block-size: 100%; }

.nyd-cat--feature .nyd-cat__body {
	padding: var(--wp--preset--spacing--40);
	justify-content: center;
	gap: 0.8rem;
}

.nyd-cat--feature .nyd-cat__title { font-size: var(--wp--preset--font-size--x-large); }

.nyd-cat--feature .nyd-cat__text { font-size: var(--wp--preset--font-size--medium); }

.nyd-cat--feature .nyd-cat__kids { margin-block-start: 0.2rem; }

@media (max-width: 64rem) {
	.nyd-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nyd-cat--feature { grid-template-columns: minmax(0, 1fr); }
	.nyd-cat--feature .nyd-cat__media,
	.nyd-cat--feature .nyd-cat__body { grid-area: auto; }
	.nyd-cat--feature .nyd-cat__media { min-block-size: 0; aspect-ratio: 16 / 9; block-size: auto; }
}

@media (max-width: 40rem) {
	.nyd-cat-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.nyd-cat, .nyd-cat__img { transition: none; }
	.nyd-cat:hover { transform: none; }
	.nyd-cat:hover .nyd-cat__img { transform: none; }
}

/* ======================================================== single service == */
/*
 * Direction B (owner: "decide for me" → chosen): the booking widget lives in
 * the hero's split card (blocks.css .nyd-hero--split) and everything below
 * runs FULL WIDTH — no sticky rail, no narrow column. The content spine
 * mirrors the homepage promotion rules: every content child rides the wide
 * spine, running text is capped at 65ch and pinned LEFT (core's constrained
 * layout centres with !important auto margins, so the pin needs !important
 * too — the documented trap).
 */
.single-service .entry-content > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.single-service .entry-content > p {
	max-width: 65ch;
	margin-inline: 0 auto !important;
}

/* Section rhythm: an eyebrow opens a chapter, so the chapter gap sits above
   the eyebrow and the heading hugs it. Headings without an eyebrow carry the
   gap themselves. */
.single-service .entry-content > h2 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.single-service .entry-content > .nyd-eyebrow {
	margin-block-start: var(--wp--preset--spacing--50);
	margin-block-end: 0;
}

.single-service .entry-content > .nyd-eyebrow + h2 {
	margin-block-start: 0.5rem;
}

.single-service .entry-content > .nyd-band,
.single-service .entry-content > .nyd-not {
	margin-block-start: var(--wp--preset--spacing--40);
}

.single-service .entry-content > :first-child { margin-block-start: 0; }

/* Two intro paragraphs side by side, filling the spine without a 1344px
   line length — the "right whitespace" fix. */
.nyd-cols2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--30);
}

.nyd-cols2 > p { margin-block: 0; }

@media (max-width: 48rem) {
	.nyd-cols2 { grid-template-columns: minmax(0, 1fr); }
	.nyd-cols2 > p + p { margin-block-start: var(--wp--preset--spacing--20); }
}

/* Variant tiles: the description appears on hover or keyboard focus only.
   Devices without hover keep it visible — hidden-and-unreachable is worse
   than shown. */
@media (hover: hover) {
	.single-service .nyd-service-grid .nyd-card__excerpt {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.single-service .nyd-service-grid .nyd-card:hover .nyd-card__excerpt,
	.single-service .nyd-service-grid .nyd-card:focus-within .nyd-card__excerpt {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-service .nyd-service-grid .nyd-card__excerpt { transition: none; transform: none; }
}

.single-service .nyd-band > h2 { margin-block-start: 0; }
.single-service .nyd-band > .nyd-eyebrow { margin-block-start: 0; }

/* ------------------------------------------------- sourced-proof strip -- */
/*
 * Industry statistics with a visible source line — the honest version of the
 * proof competitors invent. The rule for this site stands: these are cited
 * third-party figures about the industry, never claims about this business,
 * and the source line under the cards says so.
 */
.nyd-proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

/* Block-composed grids: kill the flow blockGap margins that survive inside
   a grid, or rows 2..n sit visibly lower than row 1. */
.nyd-proof > *,
.nyd-not > .wp-block-group { margin-block-start: 0; }

.nyd-proof__item {
	background: var(--wp--preset--color--surface);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
}

.nyd-proof__item b {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	color: var(--wp--preset--color--accent);
}

.nyd-proof__item span {
	display: block;
	margin-block-start: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-2);
}

.nyd-proof__src {
	margin-block-start: var(--wp--preset--spacing--20) !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-3);
}

@media (max-width: 48rem) {
	.nyd-proof { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------- process step cards -- */
/*
 * White cards with a ringed number badge floating on the top edge — the same
 * geometry as the homepage process infographic, driven by a plain ordered
 * list so it stays valid block content.
 */
.nyd-svc-steps {
	list-style: none;
	margin: 0;
	padding: 1.6rem 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	counter-reset: svcstep;
}

.nyd-svc-steps > li {
	counter-increment: svcstep;
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 16px;
	padding: 2.1rem 1.6rem 1.4rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-2);
}

.nyd-svc-steps > li::before {
	content: "0" counter(svcstep);
	position: absolute;
	inset-block-start: -1.4rem;
	inset-inline-start: 1.4rem;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--surface);
	border: 3px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
}

.nyd-svc-steps > li > strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin-block-end: 0.35rem;
}

@media (max-width: 48rem) {
	.nyd-svc-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------- pairs-well-with strip */
.nyd-rel-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--40);
}

.nyd-rel {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nyd-rel:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.07), 0 16px 40px rgba(19, 26, 23, 0.11);
}

.nyd-rel__title { display: block; font-weight: 600; }

.nyd-rel:hover .nyd-rel__title { color: var(--wp--preset--color--accent); }

.nyd-rel__body {
	display: block;
	margin-block-start: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-2);
}

@media (max-width: 64rem) {
	.nyd-rel-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.nyd-rel { transition: none; }
	.nyd-rel:hover { transform: none; }
}

/* ================================================ service page sections == */
/* The full section menu (2026-08-17). Shared card recipe throughout. */

.nyd-sstat {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	align-items: baseline;
}

.nyd-sstat b {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--accent);
	margin-inline-end: 0.45rem;
}

.nyd-sstat span { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-3); }

.nyd-who {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.nyd-who__card {
	display: block;
	background: var(--wp--preset--color--surface);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
}

.nyd-who__card b { display: block; margin-block-end: 0.35rem; }
.nyd-who__card span { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); display: block; }
a.nyd-who__card:hover b { color: var(--wp--preset--color--accent); }

.nyd-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-block: 0.9rem;
	border-block-end: 1px solid var(--wp--preset--color--rule);
}

.nyd-jump__link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--surface);
}

.nyd-jump__link:hover { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }

/* Anchored sections stop below the sticky header. */
.single-service [id] { scroll-margin-block-start: 6rem; }

.nyd-vid {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.08), 0 20px 48px rgba(19, 26, 23, 0.18);
}

.nyd-vid img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }

.nyd-vid::after { content: ""; position: absolute; inset: 0; background: rgba(9, 14, 12, 0.35); }

.nyd-vid__play {
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 4.5rem;
	block-size: 4.5rem;
	display: grid;
	place-items: center;
	background: rgba(246, 247, 244, 0.92);
	color: var(--wp--preset--color--accent-ink);
	border-radius: 999px;
	z-index: 1;
}

.nyd-vid__play svg { inline-size: 2rem; block-size: 2rem; }

.nyd-vid__label {
	position: absolute;
	inset-block-end: 1.1rem;
	inset-inline-start: 1.4rem;
	color: #FFFFFF;
	font-weight: 600;
	z-index: 1;
	text-shadow: 0 1px 8px rgba(9, 14, 12, 0.8);
}

.nyd-cmp-scroll { overflow-x: auto; }

.nyd-cmp {
	border-collapse: collapse;
	inline-size: 100%;
	min-inline-size: 640px;
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
	font-size: var(--wp--preset--font-size--small);
}

.nyd-cmp th, .nyd-cmp td { padding: 0.85rem 1.1rem; text-align: left; border-block-start: 1px solid var(--wp--preset--color--rule); }
.nyd-cmp thead td, .nyd-cmp thead th { border-block-start: 0; background: var(--wp--preset--color--surface-2); }
.nyd-cmp thead a { text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-weight: 600; color: var(--wp--preset--color--ink); }
.nyd-cmp thead a:hover { color: var(--wp--preset--color--accent); }
.nyd-cmp tbody th { font-weight: 500; color: var(--wp--preset--color--ink-2); }
.nyd-cmp td[data-yes="1"] { color: var(--wp--preset--color--accent); font-weight: 700; }
.nyd-cmp td[data-yes="0"] { color: var(--wp--preset--color--ink-3); }

.nyd-choose {
	background: var(--wp--preset--color--surface);
	border-radius: 18px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
}

.nyd-choose__q { margin: 0 0 var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--large); }

.nyd-choose__btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.nyd-choose__btn {
	font: 500 0.92rem var(--wp--preset--font-family--body);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	padding: 0.7rem 1.3rem;
	cursor: pointer;
}

.nyd-choose__btn[aria-pressed="true"] {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.nyd-choose__panel { margin-block-start: var(--wp--preset--spacing--30); padding-block-start: var(--wp--preset--spacing--30); border-block-start: 1px solid var(--wp--preset--color--rule); }
.nyd-choose__panel b { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); }
.nyd-choose__panel p { margin: 0.5rem 0 0; color: var(--wp--preset--color--ink-2); max-width: 60ch; }
.nyd-choose__acts { display: flex; gap: 1.2rem; align-items: center; margin-block-start: var(--wp--preset--spacing--20); }
.nyd-choose__acts .nyd-button { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--surface); border-radius: 999px; padding: 0.7rem 1.4rem; text-decoration: none; font-weight: 600; font-size: 0.9rem; }

.nyd-tl {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	position: relative;
}

.nyd-tl::before { content: ""; position: absolute; inset-inline: 1rem; inset-block-start: 0.5rem; block-size: 2px; background: var(--wp--preset--color--rule); }

.nyd-tl__dot { display: block; inline-size: 1.1rem; block-size: 1.1rem; border-radius: 999px; background: var(--wp--preset--color--accent); border: 3px solid var(--wp--preset--color--ground); position: relative; z-index: 1; margin-block-end: 0.7rem; }

.nyd-tl b { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 600; margin-block-end: 0.2rem; }
.nyd-tl li > span:not(.nyd-tl__dot) { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }

.nyd-rev-grid, .nyd-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
.nyd-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.nyd-rev {
	margin: 0;
	background: var(--wp--preset--color--surface);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07);
}

.nyd-rev__stars { display: inline-flex; gap: 2px; color: #C9A227; }
.nyd-rev__star { inline-size: 1rem; block-size: 1rem; }
.nyd-rev__star--off { color: var(--wp--preset--color--rule); }
.nyd-rev blockquote { margin: 0.7rem 0 0.8rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink); }
.nyd-rev figcaption { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-3); }

.nyd-case { background: var(--wp--preset--color--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07); }
.nyd-case__media img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.nyd-case__body { padding: var(--wp--preset--spacing--30); }
.nyd-case__body b { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 500; }
.nyd-case__body p { margin: 0.5rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }

.nyd-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }

.nyd-team__card { background: var(--wp--preset--color--surface); border-radius: 14px; padding: var(--wp--preset--spacing--30); text-align: center; box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07); }
.nyd-team__avatar { display: grid; place-items: center; inline-size: 3.6rem; block-size: 3.6rem; margin-inline: auto; margin-block-end: 0.7rem; border-radius: 999px; background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--accent-ink); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.3rem; }
.nyd-team__card b { display: block; font-family: var(--wp--preset--font-family--heading); }
.nyd-team__role { display: block; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent); margin-block-end: 0.4rem; }
.nyd-team__card p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }

.nyd-bt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
.nyd-bt li { background: var(--wp--preset--color--surface); border-radius: 14px; padding: var(--wp--preset--spacing--30); box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07); }
.nyd-bt b { display: block; font-family: var(--wp--preset--font-family--heading); margin-block-end: 0.35rem; }
.nyd-bt span { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }

.nyd-promise { background: linear-gradient(145deg, #1B2A22, var(--wp--preset--color--accent-2)); color: #EDF2EE; border-radius: 18px; padding: var(--wp--preset--spacing--40); }
.nyd-promise b { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: var(--wp--preset--font-size--x-large); color: #FFFFFF; margin-block-end: var(--wp--preset--spacing--20); }
.nyd-promise ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 2rem; }
.nyd-promise li { padding-inline-start: 1.4rem; position: relative; color: #DEE5E0; }
.nyd-promise li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.5em; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 999px; background: #9FD8B9; }

.nyd-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30); }
.nyd-logos__lead { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-3); }
.nyd-logos ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.7rem 2.2rem; margin: 0; padding: 0; }
.nyd-logos li { font-family: var(--wp--preset--font-family--heading); font-weight: 600; letter-spacing: 0.06em; color: var(--wp--preset--color--ink-3); opacity: 0.85; }

.nyd-fact { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
.nyd-fact li { background: var(--wp--preset--color--surface); border-radius: 14px; padding: var(--wp--preset--spacing--30); box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07); }
.nyd-fact b { display: block; font-family: var(--wp--preset--font-family--heading); margin-block-end: 0.3rem; }
.nyd-fact span { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }

.nyd-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
.nyd-tier { background: var(--wp--preset--color--surface); border-radius: 16px; padding: var(--wp--preset--spacing--40); box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07); display: flex; flex-direction: column; gap: 0.5rem; }
.nyd-tier > b { font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: var(--wp--preset--font-size--large); }
.nyd-tier__price { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xx-large); font-weight: 500; color: var(--wp--preset--color--accent); }
.nyd-tier ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.45rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-2); }
.nyd-tier a { margin-block-start: auto; padding-block-start: 0.8rem; font-weight: 600; font-size: var(--wp--preset--font-size--small); text-decoration: none; }
.nyd-tiers__note { margin-block-start: var(--wp--preset--spacing--20) !important; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-3); }

.nyd-teaser { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--rule); border-radius: 18px; padding: var(--wp--preset--spacing--40); }
.nyd-teaser > b { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); }
.nyd-teaser > span { color: var(--wp--preset--color--ink-2); }
.nyd-teaser__opts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: var(--wp--preset--spacing--20); }
.nyd-teaser__opt { text-decoration: none; background: var(--wp--preset--color--ground); border: 1px solid var(--wp--preset--color--rule); color: var(--wp--preset--color--ink); border-radius: 999px; padding: 0.7rem 1.3rem; font-size: 0.92rem; }
.nyd-teaser__opt:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

.nyd-talk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.4rem; background: var(--wp--preset--color--surface-2); border-radius: 16px; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); }
.nyd-talk b { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 500; }
.nyd-talk > span { color: var(--wp--preset--color--ink-2); font-size: var(--wp--preset--font-size--small); }
.nyd-talk__ways { margin-inline-start: auto; font-weight: 600; }

.nyd-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
.nyd-idea { display: block; text-decoration: none; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.07); }
.nyd-idea__media img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.nyd-idea b { display: block; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) 0.3rem; }
.nyd-idea:hover b { color: var(--wp--preset--color--accent); }
.nyd-idea__date { display: block; padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-3); }

.nyd-map { position: relative; background: var(--wp--preset--color--surface-2); border-radius: 20px; overflow: hidden; aspect-ratio: 2 / 1; }
.nyd-map__land { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.nyd-map__land path { fill: var(--wp--preset--color--surface); stroke: var(--wp--preset--color--rule); stroke-width: 0.4; }
.nyd-map__pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0.45rem; text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.85rem; color: var(--wp--preset--color--ink); background: rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 0.35rem 0.85rem; box-shadow: 0 2px 10px rgba(19, 26, 23, 0.15); }
.nyd-map__pin:hover { color: var(--wp--preset--color--accent); }
.nyd-map__dot { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 999px; background: var(--wp--preset--color--accent); }

/* Before/after comparator — the block shipped in Phase 3 with editor CSS
   only; this is its first front-end placement. The stage is a fixed frame
   with both photographs covering it, so mismatched source aspect ratios
   (the sample pair is 4:3 against 1.9:1) can never dictate the height. */
.nyd-ba { margin: 0; }

/* 21:9 on desktop so the whole comparison fits in one viewport with its
   heading — 16:9 measured 756px tall and forced a scroll to see it. */
.nyd-ba__stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	border-radius: 20px;
	isolation: isolate;
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.08), 0 20px 48px rgba(19, 26, 23, 0.18);
}

@media (max-width: 64rem) {
	.nyd-ba__stage { aspect-ratio: 16 / 9; }
}

@media (max-width: 48rem) {
	.nyd-ba__stage { aspect-ratio: 4 / 3; }
}

.nyd-ba__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.nyd-ba__img--before { clip-path: inset(0 calc(100% - var(--nyd-ba-pos, 50%)) 0 0); }

/* The divider line the thumb rides on. */
.nyd-ba__stage::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--nyd-ba-pos, 50%);
	inline-size: 2px;
	background: rgba(255, 255, 255, 0.85);
}

.nyd-ba__label {
	position: absolute;
	inset-block-start: 1rem;
	z-index: 1;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	background: rgba(246, 247, 244, 0.92);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
}

.nyd-ba__label--before { inset-inline-start: 1rem; }
.nyd-ba__label--after { inset-inline-end: 1rem; }

.nyd-ba__range {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 2;
}

.nyd-ba__caption {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-3);
}

.nyd-sticky { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90; display: none; align-items: center; justify-content: space-between; gap: 1rem; background: var(--wp--preset--color--accent-2); color: #DEE5E0; padding: 0.8rem 1.2rem; font-size: var(--wp--preset--font-size--small); }
.nyd-sticky .nyd-button { background: var(--wp--preset--color--accent); color: #FFFFFF; border-radius: 999px; padding: 0.65rem 1.2rem; text-decoration: none; font-weight: 600; white-space: nowrap; }

@media (max-width: 64rem) {
	.nyd-who, .nyd-rev-grid, .nyd-team, .nyd-bt, .nyd-tiers, .nyd-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nyd-fact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nyd-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nyd-tl::before { display: none; }
}

@media (max-width: 48rem) {
	.nyd-who, .nyd-rev-grid, .nyd-case-grid, .nyd-team, .nyd-bt, .nyd-tiers, .nyd-ideas, .nyd-fact { grid-template-columns: minmax(0, 1fr); }
	.nyd-promise ul { grid-template-columns: minmax(0, 1fr); }
	.nyd-talk__ways { margin-inline-start: 0; }
	.nyd-sticky { display: flex; }
	.nyd-map { aspect-ratio: 4 / 3; }
}