/*
 Theme Name:   Nibiru Kadence
 Template:     kadence
 Description:  Nibiru Media Workshop (汇星广告工坊) — Lit Signage v2 brand system on Kadence.
 Version:      1.3.0
 Author:       Nibiru Media Workshop
 License:      GNU General Public License v2 or later
 Text Domain:  nibiru-kadence
*/

/* ============================================================
   Lit Signage v2 tokens — mirrored 1:1 from the approved draft.
   Mobile-first values; desktop scale-up happens in @media below.
   ============================================================ */
:root {
	--ink: #382101;
	--paper: #F2EFE9;
	--bulb: #F9AD1C;
	--copper: #B07A4B;
	--haze: #5E6469;
	--success: #2F6B4F;
	--error: #A63229;
	--warning: #8A5A1B;
	--white: #ffffff;

	/* Copper hairline used for every band divider / card border */
	--line: rgba(176, 122, 75, .3);
	--line-strong: rgba(176, 122, 75, .35);

	--font-display: "Archivo", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-text: "Hanken Grotesk", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Type scale (mobile first) */
	--h1: 32px;
	--h2: 24px;
	--h3: 20px;
	--h4: 16px;
	--body: 14px;
	--small: 12px;
	--label: 10px;

	--sp-1: 8px;
	--sp-2: 16px;
	--sp-3: 24px;
	--sp-4: 32px;
	--sp-6: 48px;
	--gutter: 16px;
	--maxw: 1140px;

	/* Draft uses a 46px button / 40px tab as its comfortable target */
	--tap: 44px;
}

@media (min-width: 1024px) {
	:root {
		--h1: 80px;
		--h2: 32px;
		--h3: 24px;
		--h4: 20px;
		--body: 18px;
		--small: 14px;
		--label: 12px;
		--gutter: 32px;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		--h1: clamp(40px, 7vw, 64px);
		--h2: 28px;
		--body: 16px;
		--small: 13px;
		--label: 11px;
		--gutter: 24px;
	}
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

body {
	margin: 0;
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video, iframe, embed { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--ink);
	line-height: 1.2;
	text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h1, h2, h3, h4 { margin: 0 0 var(--sp-2); }
p { margin: 0 0 var(--sp-2); }

/* Kill the default <figure> ghost margin that creates phantom gaps
   in image grids (caught during earlier layout debugging). */
figure { margin: 0; }

a { color: var(--copper); }
a:hover { color: var(--bulb); }

:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
	border-radius: 2px;
}

.alignwide { max-width: var(--maxw); }
.alignfull { max-width: 100%; }
.wp-block-group { margin-top: 0; margin-bottom: 0; }

/* ============================================================
   Page title — every Nibiru page already carries its own H1
   inside the hero cover, so Kadence's separate title band is a
   duplicate. Hide it site-wide to match the draft.
   ============================================================ */
.entry-hero.page-hero-section,
.page-hero-section.entry-hero-layout-standard {
	display: none !important;
}

/* ============================================================
   Header — the draft's sticky two-row topbar, printed by the
   child theme (Kadence's header renderer is fully replaced).
   Row 1: brandmark + language toggle as ONE centred group.
   Row 2: page nav, copper │ separators, wraps on phones.
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--paper);
	border-bottom: 1px solid var(--line-strong);
	padding: 0;
}
.site-header > * { margin: 0; }

.nb-topbar {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: .7rem var(--gutter) .55rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
}
.nb-bar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	width: 100%;
}
.nb-brandmark {
	font-family: var(--font-display);
	display: inline-flex;
	align-items: baseline;
	gap: .5rem;
	text-decoration: none;
	white-space: nowrap;
}
.nb-brandmark .cn {
	font-weight: 800;
	font-size: .95rem;
	color: var(--copper);
}
.nb-brandmark .en {
	font-weight: 900;
	letter-spacing: .03em;
	font-size: 1.05rem;
	color: var(--ink);
}
/* Planet-orbit logomark (inline SVG, currentColor) */
.nb-logo {
	height: 30px;
	width: auto;
	color: var(--ink);
	flex: none;
	align-self: center;
}
/* Footer reuse of the same wordmark */
.nb-brand-cn {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .95rem;
	color: var(--copper);
}
.nb-brand-en {
	font-family: var(--font-display);
	font-weight: 900;
	letter-spacing: .03em;
	font-size: 1.05rem;
	color: var(--ink);
}

/* Page tabs: copper │ separator before every tab, current page ink+bold */
.nb-pagenav ul.nb-menu,
.nb-pagenav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nb-pagenav li { display: flex; }
.nb-pagenav a {
	font-family: var(--font-text);
	font-weight: 600;
	font-size: .84rem;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	padding: .3rem 1.05rem;
	color: var(--haze);
	text-decoration: none;
	white-space: nowrap;
}
.nb-pagenav a::before {
	content: "│";
	color: var(--copper);
	margin-right: .7rem;
	font-weight: 400;
}
.nb-pagenav a:hover { color: var(--ink); }
.nb-pagenav .current-menu-item > a,
.nb-pagenav li.current-menu-item a {
	color: var(--ink);
	font-weight: 800;
}

/* Language toggle: ONE pill switch. The copper knob slides to the active
   language; the whole control is a single link to the other language. */
.lang-toggle {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	box-sizing: border-box;
	min-height: 24px;
	border: 1px solid var(--copper);
	border-radius: 99px;
	overflow: hidden;
	text-decoration: none;
	font-family: var(--font-text);
	font-weight: 700;
	font-size: .6rem;
	line-height: 1;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}
.lang-toggle__knob {
	position: absolute;
	top: 0; bottom: 0;
	left: 0;
	width: 50%;
	background: var(--copper);
	border-radius: 99px;
	transition: transform .22s ease;
	z-index: 0;
}
.lang-toggle.is-zh .lang-toggle__knob { transform: translateX(100%); }
.lang-toggle__opt {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	padding: 0 .45rem;
	color: var(--haze);
	transition: color .22s ease;
}
/* Text sitting on top of the knob must be light. */
.lang-toggle.is-en .lang-toggle__opt--en,
.lang-toggle.is-zh .lang-toggle__opt--zh { color: var(--paper); }
.lang-toggle:hover .lang-toggle__opt--en,
.lang-toggle:hover .lang-toggle__opt--zh { color: var(--ink); }
.lang-toggle.is-en:hover .lang-toggle__opt--en,
.lang-toggle.is-zh:hover .lang-toggle__opt--zh { color: var(--paper); }
.lang-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Legacy Kadence header parts are no longer rendered; if the mobile
   popup still appears anywhere, keep it out of sight. */
.site-mobile-header-wrap { display: none !important; }

/* ============================================================
   Mobile header — one-row swipeable page nav + compact lang switch.
   Phone only; desktop keeps the wrapped centred layout.
   ============================================================ */
@media (max-width: 767px) {
	.nb-topbar {
		gap: .25rem;
		padding: .55rem var(--gutter) .3rem;
	}
	/* Brand left, lang switch right, always on ONE row. */
	.nb-bar-row { flex-wrap: nowrap; gap: .6rem; }
	/* Lang toggle shrunk to the brandmark text height (~18px). */
	.lang-toggle { min-height: 18px; font-size: .5rem; }
	.lang-toggle__opt { min-width: 22px; padding: 0 .3rem; }
	/* Page nav: single line, swipe sideways, scrollbar hidden.
	   flex-start (not center) — centred content clips at the left
	   edge of a scroll container. */
	.nb-pagenav { width: 100%; }
	.nb-pagenav ul.nb-menu,
	.nb-pagenav ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 2px;
	}
	.nb-pagenav ul::-webkit-scrollbar { display: none; }
	/* Halve the button side spacing (was 1.05rem). */
	.nb-pagenav a { padding: .3rem .5rem; }
	.nb-pagenav a::before { margin-right: .35rem; }

	/* Footer nav: same single-row swipe as the top menu.
	   Scoped under .nb-footer-extra so it beats the base .nb-frow /
	   .nb-fnav rules (which sit later in the file at equal specificity). */
	.nb-footer-extra .nb-frow { flex-direction: column; align-items: stretch; gap: .5rem; }
	.nb-footer-extra .nb-fnav {
		/* Constrain the nav to its parent so the 6 links overflow and
		   overflow-x:auto can engage — without this the flex row just
		   expands to its content width (546px) and never scrolls. */
		width: 100%;
		max-width: 100%;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.nb-footer-extra .nb-fnav::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Hero cover (home) — ink base + 40% photo + ink gradient.
   The cover's own background is transparent, so the ink base is
   what stops the page cream from bleeding through the 40% photo.
   ============================================================ */
.wp-block-cover {
	min-height: 420px;
	padding: clamp(3rem, 9vw, 6rem) var(--gutter);
	border-bottom: 1px solid var(--line-strong);
}
.nb-hero {
	background-color: var(--ink) !important;
}
.wp-block-cover .wp-block-cover__inner-container {
	max-width: var(--maxw);
	margin: 0 auto;
	width: 100%;
	position: relative;
	z-index: 2;
}
/* Draft hero: 40% photo under a top-to-bottom ink gradient */
.nb-hero .wp-block-cover__image-background {
	opacity: .40;
	z-index: 0;
}
.nb-hero .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(56, 33, 1, .55), rgba(56, 33, 1, .93)) !important;
	opacity: 1 !important;
	z-index: 1;
}
.nb-hero .wp-block-cover__inner-container,
.nb-hero p { color: var(--paper); }

.nb-hero .nb-eyebrow { color: var(--bulb); }

/* Draft hero H1: bulb yellow with a soft lamp glow.
   Scoped to the DIRECT child h1 only — `.nb-hero .wp-block-heading`
   also matched the trustbar figures and blew them up to 80px. */
.nb-hero .wp-block-cover__inner-container > h1 {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--h1);
	line-height: 1.08;
	color: var(--bulb) !important;
	text-shadow: 0 0 18px rgba(249, 173, 28, .55), 0 0 48px rgba(249, 173, 28, .3);
	margin: 0 0 .9rem;
	max-width: 20ch;
}
.nb-hero .nb-sub,
.nb-hero > .wp-block-cover__inner-container > p:not(.nb-eyebrow) {
	color: rgba(242, 239, 233, .9);
	font-size: var(--body);
	max-width: 60ch;
	margin: 0 0 1.5rem;
}

/* ============================================================
   Homepage hero crossfade slider (pure CSS, no JS/plugin).
   Slide 1 = existing nb-hero cover (ink + shophouse photo +
   headline/CTA). Slide 2 = brand banner figure
   (Design / Signage / Printing). 18s cycle: ~7.5s each with a
   ~1.4s crossfade. The banner carries baked-in CN/EN text so
   both language pages share one figure.
   ============================================================ */
.nb-hero-slider { position: relative; }
/* The wrapper group sits in the constrained content column (1076px);
   break it out to full viewport width so slide 2 covers the entire
   alignfull cover (same negative-margin technique WP's alignfull uses). */
.nb-hero-slider {
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.nb-hero-slider > .wp-block-group__inner-container { padding-inline: 0; }
/* Slide 1 fades out for the banner's half of the cycle. */
.nb-hero-slider .nb-hero { animation: nb-hero-fade2 18s ease-in-out infinite; }
/* Slide 2 absolutely fills the slider, sits above the cover,
   fades in for the other half. No pointer events (no CTA on it).
   Two variants: wide banner (desktop/tablet) + portrait-ish banner
   (phones, swapped in via the media query below). */
.nb-slide-banner,
.nb-slide-banner-m {
	position: absolute;
	inset: 0;
	z-index: 3;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	background: var(--paper);
	animation: nb-hero-fade 18s ease-in-out infinite;
}
.nb-slide-banner-m { display: none; }
.nb-slide-banner img,
.nb-slide-banner-m img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* Phones: swap in the mobile-composed banner; the wide one is hidden. */
@media (max-width: 767px) {
	.nb-slide-banner { display: none; }
	.nb-slide-banner-m { display: block; }
	.nb-slide-banner-m img { object-fit: contain; }
}
/* Reduced motion: keep the static hero, no animation, hide slide 2. */
@media (prefers-reduced-motion: reduce) {
	.nb-hero-slider .nb-hero { animation: none; }
	.nb-slide-banner,
	.nb-slide-banner-m { animation: none; display: none; }
}
@keyframes nb-hero-fade {
	0%, 42% { opacity: 0; }
	50%, 92% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes nb-hero-fade2 {
	0%, 42% { opacity: 1; }
	50%, 92% { opacity: 0; }
	100% { opacity: 1; }
}

/* ============================================================
   Compact mobile home hero — bring its height in line with the
   subpage hero bands (~350px). The 61-char H1 at the desktop
   size wrapped to 4+ lines and the trustbar stacked into 3 rows
   (157px), stretching the hero to 612px on phones.
   ============================================================ */
@media (max-width: 767px) {
	.wp-block-cover.nb-hero {
		min-height: 0;
		padding: 1.7rem var(--gutter) 1.5rem;
	}
	/* Drop the desktop 20ch cap so the long H1 uses the full phone width
	   (fewer wrapped lines) and step the size down. */
	.nb-hero .wp-block-cover__inner-container > h1 {
		font-size: clamp(1.45rem, 6.4vw, 1.9rem);
		line-height: 1.16;
		max-width: none;
		margin: 0 0 .5rem;
	}
	.nb-hero .nb-sub,
	.nb-hero > .wp-block-cover__inner-container > p:not(.nb-eyebrow) {
		font-size: .85rem;
		line-height: 1.42;
		margin: 0 0 .8rem;
	}
	.nb-hero .nb-eyebrow { margin-bottom: .3rem; }
	.nb-hero .wp-block-buttons { margin-bottom: .8rem; }
	.nb-hero .wp-block-button__link {
		padding: .55rem 1.1rem;
		font-size: .95rem;
	}
	/* Trustbar: three stats in ONE row (WP stacks columns by default).
	   Specificity must beat core's
	   `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column`
	   (0,3,0 + !important) — hence the doubled classes. */
	.nb-trustbar { margin-top: .7rem; gap: .4rem .9rem; }
	.wp-block-columns.nb-trustbar > .wp-block-column.wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
		min-width: 0;
	}
	.wp-block-columns.nb-trustbar > .wp-block-column.wp-block-column + .wp-block-column.wp-block-column {
		margin-left: 0 !important;
	}
	.nb-trustbar > div > b,
	.nb-trustbar h3 { font-size: .95rem; }
	.nb-trustbar > div > span,
	.nb-trustbar p { font-size: .66rem; line-height: 1.25; }
}

/* ============================================================
   Inner-page hero band — the draft gives every subpage a plain
   ink band (no photo) with the same bulb H1 glow.
   The group already exists in content as `alignfull`; the patch
   adds the nb-pagehero class.
   ============================================================ */
.nb-pagehero {
	background: var(--ink) !important;
	padding-block: clamp(3rem, 9vw, 6rem) !important;
	border-bottom: 1px solid var(--line-strong);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.nb-pagehero .wp-block-group__inner-container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.nb-pagehero .nb-eyebrow { color: var(--bulb); }
.nb-pagehero .wp-block-group__inner-container > h1 {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--h1);
	line-height: 1.08;
	color: var(--bulb) !important;
	text-shadow: 0 0 18px rgba(249, 173, 28, .55), 0 0 48px rgba(249, 173, 28, .3);
	margin: 0 0 .9rem;
	max-width: 20ch;
}
.nb-pagehero .wp-block-group__inner-container > p:not(.nb-eyebrow) {
	color: rgba(242, 239, 233, .9) !important;
	font-size: var(--body);
	max-width: 60ch;
	margin: 0 0 1.5rem;
}

/* ============================================================
   Unboxed content — the draft has NO white card: the page is
   paper everywhere and the heroes are the only dark bands.
   Kadence's boxed "content-bg" article is retired site-wide.
   ============================================================ */
.content-area { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Kadence puts a 32px margin-top on .entry-content — that was the cream
   gap between the header and the hero band (diagnosed via probe). */
.entry-content { margin-top: 0 !important; }
.entry.content-bg,
.entry.single-entry {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.entry-content-wrap { padding: 0 !important; }
.entry-content {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
/* Full-bleed blocks escape the constrained content column */
.entry-content > .alignfull,
.entry-content .alignfull.nb-pagehero {
	margin-inline: calc(50% - 50vw) !important;
	width: 100vw;
	max-width: 100vw;
}

/* Eyebrow / kicker label */
.nb-eyebrow {
	font-family: var(--font-display);
	font-size: var(--label);
	letter-spacing: .1em;
	color: var(--copper);
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 .4rem;
}

/* Lead paragraph */
.nb-lede {
	color: var(--haze);
	font-size: var(--body);
	max-width: 85ch;
	margin: 0 0 1.4rem;
}

/* How-we-work step tiles — one square photo above each step's text
   (Tell us your needs / Get a draft quote / We can meet up). */
.nb-how-img { margin: 0 0 .9rem; }
.nb-how-img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 12px;
	border: 1px solid var(--line-strong);
}
/* How-we-work steps stay 3-across on phones (WP stacks columns by
   default). Doubled classes beat core's stacking !important rule. */
@media (max-width: 767px) {
	.wp-block-columns.nb-how-cols { flex-wrap: nowrap; gap: .7rem; }
	.wp-block-columns.nb-how-cols > .wp-block-column.wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
		min-width: 0;
		margin-left: 0 !important;
	}
	.nb-how-cols .nb-how-img { margin: 0 0 .5rem; }
	.nb-how-cols h3 { font-size: .8rem; line-height: 1.25; margin: 0 0 .3rem; }
	.nb-how-cols p { font-size: .66rem; line-height: 1.35; margin: 0; }
}

/* ============================================================
   Trust strip / stats row — draft: a left-aligned flex row of
   small bulb figures with tiny labels underneath.
   ============================================================ */
.nb-trustbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: 1.6rem;
	justify-content: flex-start;
	text-align: left;
}
.nb-trustbar > div { flex: 0 0 auto; }
.nb-trustbar > div > b,
.nb-trustbar h3 {
	display: block;
	font-family: var(--font-display);
	color: var(--bulb);
	font-weight: 800;
	font-size: 1.1rem;
	margin: 0;
	text-align: left !important;
}
.nb-trustbar > div > span,
.nb-trustbar p {
	display: block;
	font-size: var(--small);
	color: rgba(242, 239, 233, .85);
	margin: 0;
	text-align: left !important;
}

/* ============================================================
   Buttons — draft: primary = ink on paper, ghost = copper outline
   ============================================================ */
.wp-block-button__link,
.kt-button,
.kadence-btn,
a.nb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 46px;
	padding: 0 var(--sp-3);
	border-radius: 2px;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 200ms ease-out, background 200ms ease, border-color 200ms ease;
}
.wp-block-button__link:hover { transform: scale(1.04); }
.wp-block-button__link:active { transform: scale(.96); }

/* Primary: ink fill, paper text */
.wp-block-button__link,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--ink);
	color: var(--paper);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--bulb);
	color: var(--ink);
}

/* Ghost: transparent with a copper hairline — copper text everywhere.
   (Kadence's global link colour leaks blue into the outline button,
   so colour + border are pinned here.) */
.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent !important;
	color: var(--copper) !important;
	border: 1px solid var(--copper) !important;
}
.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--copper) !important;
	color: var(--paper) !important;
}

/* Icon inside a button */
.btn .ic,
.wp-block-button__link .ic,
.nb-btn .ic { width: 20px; height: 20px; }

/* Generic icon sizing used across cards and contact rows */
.ic { color: var(--copper); flex: none; }
.nb-ico { width: 30px; height: 30px; color: var(--copper); flex: none; }

/* ============================================================
   Content bands
   ============================================================ */
.nb-band {
	padding-block: clamp(1.6rem, 4vw, 2.4rem);
	border-top: 1px solid var(--line);
}
.nb-band:first-of-type { border-top: 0; }

/* Stacked column cards (vcol): copper hairline box */
.nb-stack .wp-block-column,
.nb-vcol {
	border: 1px solid var(--copper);
	border-radius: 3px;
	padding: var(--sp-2);
	background: var(--paper);
}
.nb-stack .wp-block-column h3,
.nb-vcol h3 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--h3);
	line-height: 1.25;
	margin: 0 0 .4rem;
}
.nb-stack .wp-block-column p,
.nb-vcol p { margin: 0; color: var(--haze); font-size: var(--small); }
.nb-step-sub { color: var(--ink); font-weight: 600; font-size: 1rem; margin-top: .3rem; }

/* Tag chips */
.nb-tag {
	display: inline-block;
	font-size: var(--label);
	padding: .18rem .55rem;
	border: 1px solid rgba(94, 100, 105, .45);
	border-radius: 2px;
	color: var(--haze);
}
.nb-tag-lit { color: var(--copper); border-color: var(--copper); }

/* New-store callout */
.nb-nsblock {
	border: 1px solid var(--copper);
	border-radius: 4px;
	padding: var(--sp-3);
	background: rgba(176, 122, 75, .06);
	display: flex;
	flex-direction: column;
	gap: .8rem;
	align-items: flex-start;
}
.nb-nsblock h3 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.4rem;
	margin: 0;
}
.nb-nsblock p { margin: 0; color: var(--haze); font-size: var(--body); max-width: 62ch; }

/* Generic card */
.nb-card {
	background: var(--white);
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	padding: var(--sp-3);
}

/* Callout note */
.nb-callout {
	border: 1px solid var(--copper);
	border-left: 4px solid var(--copper);
	border-radius: 3px;
	padding: .8rem 1rem;
	font-size: var(--small);
	margin: 1.2rem 0;
	background: rgba(176, 122, 75, .06);
}
.nb-callout.warn {
	border-color: var(--warning);
	border-left-color: var(--warning);
	background: rgba(138, 90, 27, .07);
}
.nb-callout b { color: var(--ink); }

/* ============================================================
   Image grids — 2 columns on phone, 4 on desktop.
   (Requested: "4格为主，手机就2格，注意间距")
   ============================================================ */
/* Grid applies to the group's inner container (WP wraps group children in
   .wp-block-group__inner-container, so the outer div must NOT be the grid).
   The :not(.wp-block-group) variant covers grids emitted by shortcode
   ([nibiru_portfolio] etc.) which have no inner-container wrapper. */
.nb-prodgrid > .wp-block-group__inner-container,
.nb-prodgrid:not(.wp-block-group),
.wp-block-gallery,
.wp-block-gallery.has-nested-images {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 6px;
	margin: 0;
	/* Tiles keep their NATURAL height (image 4:3 + caption) and end right
	   after the caption — never stretch to fill the row, or a blank strip
	   appears under short captions. */
	align-items: start;
}
.wp-block-gallery ul,
.wp-block-gallery .blocks-gallery-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wp-block-gallery figure.wp-block-image,
.wp-block-gallery .blocks-gallery-item {
	margin: 0 !important;
	width: 100% !important;
}
.wp-block-gallery img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
}

/* Product tile: 4:3 photo with a caption strip underneath */
.nb-prodgrid .prod,
.nb-prod {
	margin: 0;
	border: 1px solid var(--copper);
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
}
/* Bulletproof 4:3 cover for every product image. The !important + explicit
   height:auto defeats the attribute-derived aspect-ratio (width/height HTML
   attrs) that would otherwise let some images fall back to their native
   (often portrait) ratio and look stretched/squished. */
.nb-prodgrid img,
.nb-prodgrid .wp-block-image img,
.nb-prodgrid figure img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
	display: block;
}
/* Caption sits directly under the image and the tile ends right after it.
   Normalise the caption box so every tile in a row gets the same natural
   height (no stray margins/padding making one tile taller). */
.nb-prodgrid .wp-block-image,
.nb-prodgrid figure { margin: 0; }
.nb-prodgrid figcaption { margin: 0; }
/* Pending-tile caption is a native paragraph — strip Kadence's default
   paragraph margin so pending tiles match real-image tiles in height. */
.nb-prodgrid .prod-cap,
.nb-prodgrid .prod-cap p,
.nb-prodgrid .prod p { margin: 0; }
.nb-prodgrid figcaption,
.nb-prod .cap {
	padding: .5rem .6rem;
	font-size: var(--small);
	color: var(--haze);
	text-align: left;
}
.nb-prodgrid figcaption b,
.nb-prod .cap b { color: var(--ink); }
/* Pending-tile caption (native paragraph stand-in for figcaption in wp:group tiles). */
.nb-prodgrid .prod-cap { padding:.5rem .6rem; font-size:var(--small); color:var(--haze); text-align:left; }
.nb-prodgrid .prod-cap b, .nb-prodgrid .prod-cap strong { color:var(--ink); }

/* Pending product tile — no photo yet (real shot to be supplied later).
   Mirrors a .prod tile but uses a dashed border + a centred note so the
   category structure is complete without a broken <img>. */
.nb-prodgrid .prod.is-pending { border-style: dashed; }
.nb-prodgrid .prod.is-pending .ph {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: .5rem;
	background: rgba(176, 122, 75, .08);
	color: var(--copper);
	font-size: var(--small);
}

@media (min-width: 1024px) {
	.nb-prodgrid > .wp-block-group__inner-container,
	.nb-prodgrid:not(.wp-block-group),
	.wp-block-gallery,
	.wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 8px;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.nb-prodgrid > .wp-block-group__inner-container,
	.nb-prodgrid:not(.wp-block-group),
	.wp-block-gallery,
	.wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 8px;
	}
}

/* Before/After — one image per row (requested earlier), 16px gap */
.nb-beforeafter {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-2);
}
.nb-beforeafter img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
}

/* ============================================================
   Inline SVG scene (shopfront diagram) — fluid sizing
   ============================================================ */
.nb-scene {
	border: 1px solid var(--copper);
	border-radius: 4px;
	padding: var(--sp-3);
	background: var(--paper);
}
.nb-scene svg {
	width: 100%;
	height: auto;
	max-width: 760px;
	display: block;
	margin: 0 auto;
}
.nb-scene .sl {
	font-family: var(--font-text);
	font-size: 13px;
	fill: var(--ink);
	font-weight: 600;
}
.nb-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	justify-content: center;
	margin-top: .5rem !important;
	font-size: var(--small);
	color: var(--haze);
}
.nb-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.nb-legend i {
	width: 12px;
	height: 12px;
	background: var(--bulb);
	opacity: .5;
	border: 1px solid var(--copper);
	display: inline-block;
	border-radius: 2px;
}

/* Enquiry form */
.field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-bottom: .9rem;
}
.field label {
	font-size: var(--small);
	font-weight: 600;
	color: var(--ink);
}
.field input,
.field select,
.field textarea {
	font-family: var(--font-text);
	font-size: 1rem;
	min-height: 46px;
	padding: .6rem .7rem;
	border: 1px solid rgba(176, 122, 75, .55);
	border-radius: 3px;
	background: #fff;
	color: var(--ink);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

.form-grid {
	display: grid;
	gap: 0 var(--sp-3);
	grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
	.form-grid { grid-template-columns: 1fr 1fr; }
	.field.full { grid-column: 1 / -1; }
}

.captcha {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem .9rem;
	border: 1px solid var(--copper);
	border-radius: 3px;
	background: rgba(176, 122, 75, .06);
	font-size: var(--small);
	color: var(--ink);
	margin-bottom: 1rem;
	cursor: pointer;
}
.captcha input { width: 18px; height: 18px; accent-color: var(--copper); }

.nb-form-note {
	color: var(--success);
	font-size: var(--small);
	margin-top: .6rem;
}
.nb-form-note.is-error { color: var(--error); }

.nb-form button[type="submit"] {
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 1rem;
	min-height: 46px;
	padding: 0 var(--sp-3);
	border-radius: 2px;
	border: 1px solid transparent;
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.nb-form button[type="submit"]:hover { background: var(--bulb); color: var(--ink); }

/* Portfolio filter pills — mirror the top-nav tab style for visual
   consistency (transparent, copper │ separator, active = ink + bold). */
.nb-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	margin: var(--sp-3) 0 0 0;
}
.nb-pill {
	font-family: var(--font-text);
	font-weight: 600;
	font-size: .84rem;
	min-height: 40px;
	padding: .3rem 1.05rem;
	display: inline-flex;
	align-items: center;
	border: 0;
	background: transparent;
	color: var(--haze);
	cursor: pointer;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	/* Kill the blue text-selection highlight (long-press / double-tap
	   used to paint ::selection blue inside the button). */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.nb-pill:not(:first-child)::before {
	content: "│";
	color: var(--copper);
	margin-right: .7rem;
	font-weight: 400;
}
/* Kadence paints every <button>:hover with --global-palette2 (#215387).
   Our pills must stay transparent on hover/focus/active. */
.nb-pill:hover {
	color: var(--ink);
	background: transparent !important;
}
.nb-pill:focus,
.nb-pill:active {
	background: transparent !important;
}
.nb-pill.is-active {
	color: var(--ink);
	font-weight: 800;
}
.nb-pill:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
	border-radius: 2px;
}
/* Mouse-click focus on a <button> still fires the default UA blue ring
   (only keyboard focus hits :focus-visible). Suppress it so the pills
   behave like the top-nav links — no blue ring on click. */
.nb-pill:focus:not(:focus-visible) {
	outline: none;
}

/* Phone: keep the filter as a single row and let it scroll sideways
   instead of wrapping, so all categories stay one swipe away. */
@media (max-width: 767px) {
	.nb-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		/* Hide the scrollbar entirely — swiping is the affordance. */
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 3px;
	}
	.nb-pills::-webkit-scrollbar {
		display: none;
	}
	/* Don't clip the active-pill outline at the scroll edge. */
	.nb-pill.is-active {
		position: relative;
		z-index: 1;
	}
}

/* Contact rows */
.nb-crow {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--line);
}
.nb-crow .ic { width: 26px; height: 26px; color: var(--copper); flex: none; }
.nb-crow .lbl { font-weight: 700; min-width: 96px; color: var(--ink); font-size: var(--small); }
.nb-crow .val { color: var(--haze); font-size: var(--body); }
/* Contact detail links: clickable but stay plain text (no underline,
   no colour change) so the info reads as labels, not blue links. */
.nb-crow .val a { color: inherit; text-decoration: none; }
.nb-crow .val a:hover { color: inherit; }

/* bizSAFE badge */
.nb-bizsafe {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	border: 1px solid var(--copper);
	border-radius: 3px;
	padding: .55rem .9rem;
	background: rgba(176, 122, 75, .06);
}
.nb-bizsafe svg { width: 30px; height: 30px; color: var(--copper); flex: none; }
.nb-bizsafe b { font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
.nb-bizsafe small { display: block; color: var(--haze); font-size: var(--label); }

/* ============================================================
   Columns — stack on phone with sane gaps
   ============================================================ */
@media (max-width: 781px) {
	.wp-block-columns { gap: var(--sp-3); }
	.wp-block-columns .wp-block-column {
		flex-basis: 100% !important;
		margin-left: 0;
	}
}

/* ============================================================
   Footer — draft: brandmark + │ separated nav + a draft note bar
   ============================================================ */
.site-footer {
	border-top: 1px solid var(--line-strong);
	padding-block: 1.8rem;
	color: var(--haze);
	font-size: var(--small);
	background: var(--paper);
}
.nb-frow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
	margin-top: 1rem;
}
.nb-fnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.nb-fnav a,
.site-footer .footer-navigation ul.menu > li > a,
.site-footer .menu > li > a {
	color: var(--haze);
	text-decoration: none;
	font-size: var(--small);
	padding: .3rem .9rem;
	display: inline-block;
}
.nb-fnav a::before,
.site-footer .menu > li + li > a::before {
	content: "│";
	color: var(--copper);
	margin-right: .7rem;
}
.nb-fnav a:hover,
.site-footer .menu > li > a:hover { color: var(--ink); }

.nb-draftnote {
	text-align: center;
	background: rgba(176, 122, 75, .1);
	color: var(--ink);
	font-size: var(--label);
	padding: .4rem;
	letter-spacing: .04em;
}

/* Keep the footer block inside the normal page container (same width
   and edge padding as the content), not flush to the browser edge.
   .wp-site-blocks is a flex COLUMN, so a bare max-width + margin:auto
   only shrinks the block to its content width and centres THAT (not a
   1290 box). width:100% first stretches it to the column, then
   max-width:1290 pulls it back to the 1290 content box and margin:auto
   centres it — matching the page's .content-container exactly. */
.nb-footer-extra {
	width: 100%;
	max-width: var(--global-content-width, 1290px);
	margin-inline: auto;
	padding-inline: var(--global-content-edge-padding, 1.5rem);
	box-sizing: border-box;
}
.nb-footer-legal {
	text-align: center;
	margin: 1.1rem 0 0;
	font-size: 80%;
}
.nb-footer-copy {
	text-align: center;
	margin: .9rem 0 0;
	color: var(--haze);
	font-size: 80%;
}

/* ============================================================
   Utility helpers
   ============================================================ */
.nb-center { text-align: center; }
.nb-stack > * + * { margin-top: var(--sp-2); }

/* ============================================================
   Small phones — tighten the hero, stack buttons full-width,
   and keep every tap target comfortable.
   ============================================================ */
@media (max-width: 480px) {
	.wp-block-cover {
		min-height: 360px;
		padding: var(--sp-3) var(--gutter);
	}
	/* Draft keeps the two hero buttons side by side on phones */
	.nb-trustbar { gap: var(--sp-2); }
	.nb-legend { gap: var(--sp-1); }
	.nb-card { padding: var(--sp-2); }
	.nb-crow .lbl { min-width: 72px; }
}
@media (max-width: 359px) {
	.wp-block-cover .wp-block-cover__inner-container { padding-inline: 12px; }
	.nb-pagenav a { font-size: .74rem; padding: .3rem .45rem; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   Native-block refactor support (2026-10-16) — page content rebuilt
   with editor-editable Gutenberg blocks. WP wraps group children in
   .wp-block-group__inner-container, so grid/flex rules must target it.
   ============================================================ */
.nb-beforeafter > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.nb-stack > .wp-block-group__inner-container > * + * { margin-top: var(--sp-2); }
.nb-crow > .wp-block-group__inner-container { display: flex; align-items: center; gap: .9rem; flex: 1; min-width: 0; }
.nb-crow p.lbl, .nb-crow p.val { margin: 0; }
.nb-legend > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; flex: 1; }
.nb-legend .chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	font-weight: 700;
}
figure.nb-scene-figure,
figure.nb-scene-figure-m { margin: 0 0 .5rem !important; }
.nb-scene-figure img,
.nb-scene-figure-m img { width: 100%; height: auto; border-radius: 12px; display: block; }
/* "What we make" scene: desktop keeps the wide 2.5:1 banner; phones get
   the 1.4:1 composition — the wide one shrinks to a 137px strip at 342px. */
.nb-scene-figure-m { display: none; }
@media (max-width: 767px) {
	.nb-scene-figure { display: none; }
	.nb-scene-figure-m { display: block; }
}
.nb-card.mt { margin-top: var(--sp-3); }

/* ============================================================
   Lightbox — click a portfolio tile to open the full-size image.
   Overlay + centred image + close button (top-right). Size caps:
   never larger than 800px in either dimension on desktop, and
   never larger than 90% of the viewport on phones
   (min(800px, 90vw/90vh) satisfies both in one rule).
   ============================================================ */
a.nb-lb { display: block; cursor: zoom-in; }
a.nb-lb img { transition: opacity .2s ease; }
a.nb-lb:hover img,
a.nb-lb:focus-visible img { opacity: .88; }

.nb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(22, 19, 16, .84);
}
.nb-lightbox.is-open { display: flex; }
.nb-lightbox img {
	max-width: min(800px, 90vw);
	max-height: min(800px, 90vh);
	width: auto;
	height: auto;
	display: block;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.nb-lightbox-close {
	position: absolute;
	top: .8rem;
	right: .8rem;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #231f1c;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.nb-lightbox-close:hover,
.nb-lightbox-close:focus-visible { background: #fff; }
/* Lock background scroll while the overlay is open */
.nb-lb-open,
.nb-lb-open body { overflow: hidden; }

/* Portfolio lazy tiles — before their image scrolls into view the <img> has
   no src, so show a faint placeholder so the 4:3 tile doesn't look broken. */
.nb-prodgrid img.nb-lazyimg {
	background: repeating-linear-gradient(45deg,
		rgba(176, 122, 75, .06), rgba(176, 122, 75, .06) 10px,
		rgba(176, 122, 75, .10) 10px, rgba(176, 122, 75, .10) 20px);
}

/* ============================================================
   About v7 page components (2026-11-05)
   Native-block structure built by build-about-v7.php; all classes
   keep the nb- prefix to ride the Lit Signage v2 token system.
   ============================================================ */

/* Who-we-are: two-column facts + chips */
.nb-facts > .wp-block-group__inner-container,
.nb-facts:not(.wp-block-group) {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-3);
	margin-top: 1rem;
}
@media (min-width: 768px) {
	.nb-facts > .wp-block-group__inner-container,
	.nb-facts:not(.wp-block-group) { grid-template-columns: 1fr 1fr; }
}
.nb-factcol { min-width: 0; margin: 0; }
.nb-factttl {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--h4);
	color: var(--copper);
	margin: 0 0 .6rem;
}
/* Layout containers: WP wraps group children in .wp-block-group__inner-container,
   so flex/grid must target the inner container (same pattern as .nb-prodgrid). */
.nb-chips > .wp-block-group__inner-container,
.nb-chips:not(.wp-block-group) { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.nb-chip {
	display: inline-block;
	margin: 0;
	white-space: nowrap;
	vertical-align: baseline;
	border: 1px solid var(--copper);
	border-radius: 99px;
	padding: .35rem .8rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .9rem;
	color: var(--ink);
	background: rgba(176, 122, 75, .06);
}
.nb-chip i { font-style: normal; font-family: var(--font-text); font-weight: 600; font-size: .82rem; color: var(--haze); }
.nb-prod-chips > .wp-block-group__inner-container,
.nb-prod-chips:not(.wp-block-group) { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; align-items: flex-start; }
.nb-pchip {
	display: inline-block;
	margin: 0;
	white-space: nowrap;
	vertical-align: baseline;
	border: 1px solid rgba(176, 122, 75, .5);
	border-radius: 3px;
	padding: .4rem .7rem;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: .88rem;
	color: var(--ink);
	background: #fff;
}
.nb-pchip i { font-style: normal; color: var(--copper); font-weight: 700; font-size: .82rem; }

/* How we work — three coloured steps with arrow connectors */
.nb-process > .wp-block-group__inner-container,
.nb-process:not(.wp-block-group) { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; width: 100%; margin-top: 1.2rem; }
/* Vertically centre the content: short copy used to sit at the top with a big
   empty strip below (min-height:150px + top alignment). kill min-height,
   tighten padding, centre the inner-container so top/bottom whitespace match. */
.nb-pstep {
	position: relative; margin: 0; padding: 26px 24px; min-height: 0; height: 100%;
	display: flex; flex-direction: column; justify-content: center;
}
.nb-pstep > .wp-block-group__inner-container { width: 100%; }
.nb-pstep:nth-child(1) { background: #c4b99b; }
.nb-pstep:nth-child(2) { background: #d5cab2; }
.nb-pstep:nth-child(3) { background: #bfb4ac; }
.nb-pstep h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: #321F16; }
.nb-pstep p { margin: 0; font-size: .95rem; line-height: 1.45; color: #626262; }
.nb-pstep:not(:last-child)::after {
	content: ""; position: absolute; right: -23px; top: 50%; transform: translateY(-50%);
	width: 24px; height: 46px; background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 2;
}
@media (max-width: 767px) {
	.nb-process > .wp-block-group__inner-container,
	.nb-process:not(.wp-block-group) {
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr; /* all three stacked rows share the tallest height */
		margin-top: 1rem;
	}
	/* Content is vertically centred so short copy has symmetric top/bottom gaps. */
	.nb-pstep { min-height: 0; padding: 22px 20px; }
	.nb-pstep:not(:last-child)::after {
		top: auto; right: auto; bottom: -23px; left: 50%; transform: translateX(-50%);
		width: 46px; height: 24px; clip-path: polygon(0 0, 100% 0, 50% 100%);
	}
}

/* Our network diagram — transparent PNG blends with the page paper */
.nb-network { margin: 1.2rem 0; }
.nb-netfig { margin: 0; background: transparent; border: 0; padding: 0; }
.nb-netfig img { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(56, 33, 1, .08)); }

/* Why-Nibiru infographic cards */
.nb-why-grid > .wp-block-group__inner-container,
.nb-why-grid:not(.wp-block-group) { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin-top: 1rem; align-items: stretch; }
@media (min-width: 600px) {
	.nb-why-grid > .wp-block-group__inner-container,
	.nb-why-grid:not(.wp-block-group) { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.nb-why-grid > .wp-block-group__inner-container,
	.nb-why-grid:not(.wp-block-group) { grid-template-columns: repeat(4, 1fr); }
}
.nb-why-card {
	position: relative; margin: 0; border: 1px solid var(--copper); border-radius: 4px;
	padding: var(--sp-2); background: var(--paper); overflow: hidden;
	height: 100%; display: flex; flex-direction: column;
}
.nb-why-card .nb-why-n {
	position: absolute; top: .5rem; right: .7rem; font-family: var(--font-display);
	font-weight: 900; font-size: 1.8rem; color: rgba(176, 122, 75, .25);
}
.nb-why-ic { width: 34px; height: 34px; color: var(--copper); margin-bottom: .5rem; }
.nb-why-card h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--h4); margin: 0 0 .35rem; color: var(--ink); }
.nb-why-card p { margin: 0; color: var(--haze); font-size: var(--small); }

/* bizSAFE3 badge image */
.nb-bizimg { height: 120px; width: auto; display: inline-block; }

/* CTA band */
.nb-ctaband {
	background: var(--ink);
	color: var(--paper);
	padding-block: clamp(2rem, 6vw, 3.5rem);
	border-top: 1px solid var(--line-strong);
}
.nb-ctaband .wp-block-group__inner-container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.nb-ctaband h2 { color: var(--bulb); font-family: var(--font-display); font-weight: 800; font-size: var(--h2); margin: 0 0 .5rem; }
.nb-ctaband p { color: rgba(242, 239, 233, .9); max-width: 60ch; margin: 0 0 1.2rem; }

/* Primary (non-outline) buttons on dark bands must NOT be ink-on-ink.
   Default primary fill is --ink, identical to the hero/cta band bg, which
   made the button invisible. Force a bulb fill with ink text there. */
.nb-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.nb-ctaband .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--bulb);
	color: var(--ink);
	border-color: transparent;
}
.nb-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.nb-ctaband .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-color: #ffffff;
	color: var(--ink);
}

/* Centred band (bizSAFE) — keep the wide lede block centred */
.nb-center .nb-lede { margin-inline: auto; }

/* ===== Signage product card v2 — title + 2-line intro + 3 thumbs + 1 big image =====
   Layout: 2 columns (left text+thumbs 60%, right big image 40%). flex-basis:0 so the
   WP column gap is subtracted first, then space is split 3:2 — no wrap on desktop.
   flex/grid must target the group inner-container (Gutenberg wraps group children). */
.nb-prodcard {
  align-items: center;
  gap: var(--sp-3);
  margin: 40px 0 0;
}
.nb-prodcard + .nb-prodcard {
  border-top: 1px solid var(--line-strong);
  padding-top: 32px;
  margin-top: 40px;
}
.nb-prodcard > .wp-block-column { margin: 0; }
.nb-prodcard > .wp-block-column.nb-pc-left { flex: 3 1 0; }
.nb-prodcard > .wp-block-column.nb-pc-big  { flex: 2 1 0; }
.nb-pc-left { display: flex; flex-direction: column; }
.nb-pc-ttl {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
}
.nb-pc-intro {
  margin: 0 0 1rem;
  color: var(--haze);
  font-size: 15px;
  line-height: 1.55;
  max-width: 80ch;
}
.nb-pc-intro b { color: var(--ink); }
.nb-pc-thumbs { margin-top: 1rem; }
.nb-pc-thumbs > .wp-block-group__inner-container,
.nb-pc-thumbs:not(.wp-block-group) {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}
/* Kadence/block-library injects margin-bottom:32px on figure.wp-block-image.
   Must be killed explicitly or the flex/grid children get pushed apart. */
.nb-pc-thumbs .wp-block-image { margin: 0 !important; flex: 1 1 0; }
.nb-pc-thumbs .wp-block-image img,
.nb-pc-big .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  display: block;
  border: 1px solid var(--copper);
  border-radius: 3px;
}
.nb-pc-thumbs figcaption,
.nb-pc-big figcaption { display: none; }
.nb-pc-big { display: flex; align-items: center; }
.nb-pc-big .wp-block-image { margin: 0; width: 100%; }
/* Mobile: title + intro span full width; below = 3 stacked square thumbs on the
   left, one tall big image on the right (both columns side by side, equal height).
   Uses grid + display:contents to lift the heading/paragraph out of the left
   column so they can span both columns. */
@media (max-width: 781px) {
  .nb-prodcard {
    display: grid !important;
    grid-template-columns: 26% 1fr;
    column-gap: 10px;
    row-gap: 0;
    align-items: start;
  }
  .nb-pc-left { display: contents !important; }
  .nb-pc-ttl,
  .nb-pc-intro { grid-column: 1 / -1; }
  .nb-pc-ttl { margin-bottom: .35rem; }
  .nb-pc-intro { max-width: none; margin-bottom: .8rem; }
  .nb-pc-thumbs { grid-column: 1; grid-row: 3; margin-top: 0; }
  .nb-pc-big { grid-column: 2; grid-row: 3; align-self: stretch; }
  .nb-pc-thumbs > .wp-block-group__inner-container,
  .nb-pc-thumbs:not(.wp-block-group) {
    flex-direction: column;
    gap: 8px;
  }
  .nb-pc-thumbs .wp-block-image { flex: 0 0 auto; width: 100%; margin: 0 !important; }
  .nb-pc-thumbs .wp-block-image img {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
  /* Big image must NOT contribute to the grid row height. height:100% on a
     grid item whose row is auto-sized creates a cyclic dependency and falls
     back to the image's intrinsic height (~1500px). Absolute-position the
     figure so the row height is defined only by the 3 stacked thumbs. */
  .nb-pc-big {
    position: relative;
    align-self: stretch;
    min-height: 0;
  }
  .nb-pc-big .wp-block-image {
    position: absolute;
    inset: 0;
    height: 100%;
    margin: 0;
  }
  .nb-pc-big .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    display: block;
  }
}