/*
Theme Name: Nullbyte
Description: Dark, terminal-flavoured offensive-security portfolio theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nullbyte
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

:root {
	--nb-bg: var( --wp--preset--color--base );
	--nb-surface: var( --wp--preset--color--surface );
	--nb-surface-2: var( --wp--preset--color--surface-2 );
	--nb-line: var( --wp--preset--color--hairline );
	--nb-text: var( --wp--preset--color--contrast );
	--nb-muted: var( --wp--preset--color--muted );
	--nb-accent: var( --wp--preset--color--accent );
	--nb-accent-deep: var( --wp--preset--color--accent-deep );
	--nb-signal: var( --wp--preset--color--signal );
	--nb-mono: var( --wp--preset--font-family--mono );
	--nb-display: var( --wp--preset--font-family--display );
	--nb-glow: 0 0 0 1px rgba( 255, 178, 36, 0.28 ), 0 8px 40px -12px rgba( 255, 178, 36, 0.35 );
	--nb-radius: 12px;
}

/* === base === */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var( --nb-accent );
	color: var( --nb-bg );
}

:focus-visible {
	outline: 2px solid var( --nb-accent );
	outline-offset: 3px;
}

html {
	scroll-behavior: smooth;
}

.nb-eyebrow {
	font-family: var( --nb-mono );
	font-size: 0.74rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --nb-accent );
	margin-bottom: 0.75rem;
}

.nb-mono,
.nb-mono p {
	font-family: var( --nb-mono );
}

.nb-lead p,
p.nb-lead {
	color: var( --nb-muted );
	font-size: 1.05rem;
	line-height: 1.75;
}

.nb-section {
	position: relative;
	padding-block: clamp( 3.5rem, 8vw, 7rem );
}

.nb-section-alt {
	background: linear-gradient( 180deg, transparent, rgba( 16, 19, 23, 0.85 ) 18%, rgba( 16, 19, 23, 0.85 ) 82%, transparent );
	border-block: 1px solid var( --nb-line );
}

.nb-rule {
	height: 1px;
	background: linear-gradient( 90deg, var( --nb-accent ), transparent 65% );
	border: 0;
	opacity: 0.5;
}

/* === grid-backdrop === */
.wp-site-blocks::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient( rgba( 37, 43, 52, 0.32 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 37, 43, 52, 0.32 ) 1px, transparent 1px );
	background-size: 64px 64px;
	mask-image: radial-gradient( ellipse 80% 60% at 50% 0%, #000 20%, transparent 78% );
	-webkit-mask-image: radial-gradient( ellipse 80% 60% at 50% 0%, #000 20%, transparent 78% );
}

.wp-site-blocks > * {
	position: relative;
	z-index: 1;
}
/* === grid-backdrop === */
/* === header === */
.nb-header {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-block: 0.9rem;
	background: rgba( 8, 9, 11, 0.72 );
	backdrop-filter: saturate( 160% ) blur( 14px );
	-webkit-backdrop-filter: saturate( 160% ) blur( 14px );
	border-bottom: 1px solid var( --nb-line );
}

.nb-header-inner {
	gap: 1.25rem;
}

.nb-brand {
	gap: 0.7rem !important;
	align-items: center;
}

.nb-brand-mark {
	margin: 0;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 7px;
	font-family: var( --nb-mono );
	font-size: 0.9rem;
	font-weight: 700;
	color: var( --nb-bg );
	background: var( --nb-accent );
	box-shadow: 0 0 22px -6px rgba( 255, 178, 36, 0.75 );
}

.nb-brand-text {
	gap: 0 !important;
}

.nb-site-title a,
.nb-site-title {
	font-family: var( --nb-display );
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var( --nb-text ) !important;
	text-decoration: none !important;
	line-height: 1.2;
}

.nb-brand-sub {
	margin: 0;
	font-family: var( --nb-mono );
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --nb-muted );
}

.nb-nav {
	font-family: var( --nb-mono );
	font-size: 0.84rem;
}

.nb-nav .wp-block-navigation-item__content {
	color: var( --nb-muted );
	text-decoration: none;
	padding: 0.35rem 0;
	position: relative;
	transition: color 0.18s ease;
}

.nb-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var( --nb-accent );
	transition: right 0.25s ease;
}

.nb-nav .wp-block-navigation-item__content:hover {
	color: var( --nb-text );
}

.nb-nav .wp-block-navigation-item__content:hover::after {
	right: 0;
}

.nb-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var( --nb-bg );
	padding-top: 4rem;
}
/* === hero === */
.nb-hero {
	position: relative;
	padding-block: clamp( 3.5rem, 9vw, 7.5rem ) clamp( 2.5rem, 6vw, 4.5rem );
	overflow: hidden;
}

.nb-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	left: 50%;
	width: min( 900px, 110% );
	height: 700px;
	transform: translateX( -50% );
	pointer-events: none;
	background: radial-gradient( circle, rgba( 255, 178, 36, 0.13 ), transparent 62% );
	filter: blur( 12px );
}

.nb-hero-cols {
	gap: clamp( 2rem, 5vw, 4rem ) !important;
}

.nb-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem !important;
	padding: 0.35rem 0.85rem 0.35rem 0.7rem;
	margin-bottom: 1.5rem;
	border: 1px solid rgba( 255, 178, 36, 0.32 );
	border-radius: 999px;
	background: rgba( 255, 178, 36, 0.06 );
	width: fit-content;
}

.nb-status-dot {
	margin: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --nb-signal );
	box-shadow: 0 0 10px var( --nb-signal );
	font-size: 0;
	line-height: 0;
	color: transparent;
	flex: 0 0 auto;
	animation: nb-pulse 2.4s ease-in-out infinite;
}

.nb-badge-text {
	margin: 0;
	font-family: var( --nb-mono );
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --nb-accent );
	white-space: nowrap;
}

.nb-hero-title {
	margin: 0 0 1.25rem;
	font-size: clamp( 2.3rem, 6.2vw, 4.1rem );
	line-height: 1.03;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.nb-hero-sub {
	margin: 0 0 2rem;
	max-width: 46ch;
	font-size: 1.02rem;
	line-height: 1.75;
	color: var( --nb-muted );
}

.nb-hero-cta {
	gap: 0.75rem !important;
}

.nb-btn-primary .wp-element-button {
	background: var( --nb-accent );
	color: var( --nb-bg );
	border-color: var( --nb-accent );
	box-shadow: 0 0 30px -8px rgba( 255, 178, 36, 0.6 );
	transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease;
}

.nb-btn-primary .wp-element-button:hover {
	background: #ffc352;
	color: var( --nb-bg );
	transform: translateY( -2px );
	box-shadow: 0 0 42px -6px rgba( 255, 178, 36, 0.78 );
}

.nb-btn-ghost .wp-element-button {
	background: transparent;
	color: var( --nb-text );
	border: 1px solid var( --nb-line );
	transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nb-btn-ghost .wp-element-button:hover {
	color: var( --nb-accent );
	border-color: rgba( 255, 178, 36, 0.55 );
	background: transparent;
	transform: translateY( -2px );
}

.nb-portrait {
	position: relative;
	margin: 0;
}

.nb-portrait img {
	width: 100%;
	max-width: 330px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid rgba( 255, 178, 36, 0.28 );
	padding: 6px;
	background: var( --nb-bg );
	filter: grayscale( 0.35 ) contrast( 1.06 );
	box-shadow: 0 0 0 1px var( --nb-line ), 0 0 60px -14px rgba( 255, 178, 36, 0.45 );
	transition: filter 0.4s ease;
}

.nb-portrait:hover img {
	filter: grayscale( 0 ) contrast( 1 );
}

.nb-hero-portrait-col {
	display: flex;
	justify-content: center;
}

/* === sections === */
.nb-section-head {
	max-width: 46rem;
	margin-bottom: clamp( 2rem, 4.5vw, 3rem );
	gap: 0.5rem !important;
}

.nb-section-head h2 {
	margin: 0;
}

.nb-section-head .nb-lead {
	margin: 0.75rem 0 0;
}

.nb-stats-band {
	padding-block: 0 clamp( 3rem, 7vw, 5rem );
}

.nb-stats {
	gap: 1rem !important;
	border-top: 1px solid var( --nb-line );
	padding-top: 2rem;
}

.nb-stat {
	padding: 1.1rem 1.25rem;
	border-left: 2px solid var( --nb-line );
	transition: border-color 0.3s ease;
}

.nb-stat:hover {
	border-left-color: var( --nb-accent );
}

.nb-stat-n {
	margin: 0 0 0.35rem;
	font-family: var( --nb-mono );
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: var( --nb-accent );
	letter-spacing: -0.02em;
}

.nb-stat-l {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.55;
	color: var( --nb-muted );
}

.nb-focus {
	gap: 1.5rem !important;
}

.nb-focus-card {
	padding: 1.75rem 1.6rem 1.85rem;
	border: 1px solid var( --nb-line );
	border-radius: var( --nb-radius );
	background: linear-gradient( 165deg, var( --nb-surface-2 ), var( --nb-surface ) );
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.3, 1 ), border-color 0.3s ease, box-shadow 0.3s ease;
}

.nb-focus-card:hover {
	transform: translateY( -4px );
	border-color: rgba( 255, 178, 36, 0.4 );
	box-shadow: var( --nb-glow );
}

.nb-focus-idx {
	margin: 0 0 0.9rem;
	font-family: var( --nb-mono );
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	color: var( --nb-accent-deep );
}

.nb-focus-card h3 {
	margin: 0 0 0.7rem;
	font-size: 1.14rem;
}

.nb-focus-card p:not(.nb-focus-idx) {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.7;
	color: var( --nb-muted );
}
/* === terminal === */
.nb-term {
	position: relative;
	overflow: hidden;
	border: 1px solid var( --nb-line );
	border-radius: var( --nb-radius );
	background: #0b0d10;
	box-shadow: 0 24px 70px -30px rgba( 0, 0, 0, 0.95 ), 0 0 0 1px rgba( 255, 178, 36, 0.07 );
	gap: 0 !important;
}

.nb-term::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: repeating-linear-gradient( 180deg, rgba( 255, 255, 255, 0.022 ) 0 1px, transparent 1px 3px );
}

.nb-term-bar {
	display: flex;
	align-items: center;
	gap: 0.45rem !important;
	padding: 0.65rem 0.9rem;
	background: #14181d;
	border-bottom: 1px solid var( --nb-line );
}

.nb-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	flex: 0 0 auto;
	font-size: 0;
	line-height: 0;
	margin: 0;
	color: transparent;
}

.nb-dot-r { background: #ff5f56; }
.nb-dot-y { background: #ffbd2e; }
.nb-dot-g { background: #27c93f; }

.nb-term-title {
	margin: 0 0 0 0.6rem !important;
	font-family: var( --nb-mono );
	font-size: 0.76rem;
	color: var( --nb-muted );
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nb-term-actions {
	margin-left: auto !important;
	gap: 0.4rem !important;
}

.nb-term-actions .wp-element-button {
	font-family: var( --nb-mono );
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.7rem;
	background: transparent;
	color: var( --nb-muted );
	border: 1px solid var( --nb-line );
	border-radius: 5px;
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.nb-term-actions .wp-element-button:hover {
	color: var( --nb-accent );
	border-color: rgba( 255, 178, 36, 0.5 );
	background: transparent;
}

.nb-term-screen {
	position: relative;
	padding: 1.35rem 1.5rem 1.75rem;
	font-family: var( --nb-mono );
	font-size: 0.855rem;
	line-height: 1.72;
	color: #c3ccd6;
	min-height: 26rem;
	max-height: 34rem;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var( --nb-line ) transparent;
	gap: 0 !important;
	counter-reset: none;
}

.nb-term-screen::-webkit-scrollbar { width: 8px; }
.nb-term-screen::-webkit-scrollbar-thumb {
	background: var( --nb-line );
	border-radius: 4px;
}

/* Lines injected by the enhancer must not inherit the flow-layout block gap,
   or the transcript renders double-spaced instead of like a real terminal. */
.nb-term-screen > .nb-term-line,
.nb-term-screen > .nb-term-line + .nb-term-line {
	margin: 0 !important;
	padding: 0;
	min-height: 1.72em;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.nb-term-screen pre {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.nb-term-screen pre code {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

.nb-term-cursor {
	display: inline-block;
	width: 0.5rem;
	height: 1rem;
	background: var( --nb-accent );
	vertical-align: -0.18rem;
	margin-left: 0.15rem;
	animation: nb-blink 1.05s steps( 1 ) infinite;
}

@keyframes nb-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

.nb-term-hint {
	margin: 0.85rem 0 0 !important;
	font-family: var( --nb-mono );
	font-size: 0.7rem;
	color: var( --nb-muted );
	letter-spacing: 0.06em;
	text-align: center;
}

/* Syntax tones applied by the enhancer script. */
.nb-t-ps1 { color: var( --nb-signal ); }
.nb-t-path { color: #58a6ff; }
.nb-t-cmd { color: #eff3f7; }
.nb-t-key { color: #d2a8ff; }
.nb-t-val { color: #a5d6ff; }
.nb-t-hi { color: var( --nb-accent ); }
.nb-t-dim { color: #6e7681; }
.nb-t-ok { color: var( --nb-signal ); }
/* === cards === */
/* The page wrapper and post-content BOTH carry has-global-padding, which insets
   every alignfull child by the root padding so the section bands stop short of
   the viewport edge. Zero it at those two levels only — each section already
   carries its own global padding, so inner content stays inset while the
   backgrounds finally run edge to edge. */
.nb-main-front,
.nb-main-front > .entry-content,
.nb-main > .entry-content {
	padding-left: 0;
	padding-right: 0;
}

.nb-main,
.nb-main-front {
	padding-block: 0 0;
}

.nb-main {
	padding-block: clamp( 2.5rem, 6vw, 4.5rem ) clamp( 3rem, 7vw, 6rem );
}

.nb-page-head {
	margin-bottom: clamp( 2rem, 5vw, 3.5rem );
}

.nb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0 !important;
	overflow: hidden;
	border: 1px solid var( --nb-line );
	border-radius: var( --nb-radius );
	background: linear-gradient( 160deg, var( --nb-surface-2 ), var( --nb-surface ) );
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.3, 1 ), border-color 0.3s ease, box-shadow 0.3s ease;
}

.nb-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient( 420px circle at 50% 0%, rgba( 255, 178, 36, 0.13 ), transparent 70% );
	transition: opacity 0.3s ease;
}

.nb-card:hover {
	transform: translateY( -5px );
	border-color: rgba( 255, 178, 36, 0.45 );
	box-shadow: var( --nb-glow );
}

.nb-card:hover::after {
	opacity: 1;
}

.nb-card-thumb {
	margin: 0;
	overflow: hidden;
	border-bottom: 1px solid var( --nb-line );
}

.nb-card-thumb img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	filter: grayscale( 0.55 ) contrast( 1.05 );
	transition: filter 0.35s ease, transform 0.5s ease;
}

.nb-card:hover .nb-card-thumb img {
	filter: grayscale( 0 ) contrast( 1 );
	transform: scale( 1.04 );
}

.nb-card-body {
	padding: 1.4rem 1.5rem 1.6rem;
	gap: 0.6rem !important;
	flex: 1;
}

.nb-card-date,
.nb-card-date time {
	font-family: var( --nb-mono );
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var( --nb-accent-deep );
	margin: 0;
}

.nb-card-title {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.32;
}

.nb-card-title a {
	color: var( --nb-text ) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.nb-card:hover .nb-card-title a {
	color: var( --nb-accent ) !important;
}

.nb-card-excerpt {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.65;
	color: var( --nb-muted );
}

.nb-card-excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.6rem;
	font-family: var( --nb-mono );
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	color: var( --nb-accent );
	text-decoration: none;
}

.nb-card-excerpt .wp-block-post-excerpt__more-link::before {
	content: "→ ";
}
/* === blog === */
.nb-card-grid {
	gap: 1.5rem !important;
}

.nb-pagination {
	margin-top: 3rem;
	font-family: var( --nb-mono );
	font-size: 0.82rem;
	padding-top: 1.5rem;
	border-top: 1px solid var( --nb-line );
}

.nb-pagination a {
	color: var( --nb-muted );
	text-decoration: none;
}

.nb-pagination a:hover {
	color: var( --nb-accent );
}

.nb-pagination .current {
	color: var( --nb-accent );
	font-weight: 700;
}

/* === single === */
.nb-post-meta {
	gap: 0.6rem !important;
	font-family: var( --nb-mono );
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	color: var( --nb-accent-deep );
	margin-bottom: 0.9rem;
}

.nb-post-meta p,
.nb-post-meta .wp-block-post-date,
.nb-post-meta .wp-block-post-terms {
	margin: 0;
	font-size: inherit;
}

.nb-post-meta a {
	color: var( --nb-accent-deep );
	text-decoration: none;
}

.nb-post-hero img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border: 1px solid var( --nb-line );
	border-radius: var( --nb-radius );
}

.nb-single .wp-block-post-content {
	font-size: 1.02rem;
	line-height: 1.8;
	color: #d5d9df;
}

.nb-single .wp-block-post-content h2,
.nb-single .wp-block-post-content h3 {
	margin-top: 2.5rem;
}

.nb-single .wp-block-post-content img {
	border-radius: 10px;
	border: 1px solid var( --nb-line );
}

.nb-single blockquote {
	margin: 2rem 0;
	padding: 0.4rem 0 0.4rem 1.4rem;
	border-left: 2px solid var( --nb-accent );
	color: var( --nb-muted );
	font-style: normal;
}

.nb-single pre,
.nb-single code {
	font-family: var( --nb-mono );
}

.nb-single pre {
	padding: 1.1rem 1.25rem;
	background: var( --nb-surface );
	border: 1px solid var( --nb-line );
	border-radius: 10px;
	font-size: 0.85rem;
	overflow-x: auto;
}

.nb-single :not(pre) > code {
	padding: 0.15em 0.4em;
	background: var( --nb-surface-2 );
	border: 1px solid var( --nb-line );
	border-radius: 4px;
	font-size: 0.88em;
	color: var( --nb-accent );
}

.nb-post-nav {
	font-family: var( --nb-mono );
	font-size: 0.82rem;
	gap: 1rem;
}

.nb-post-nav a {
	text-decoration: none;
	color: var( --nb-muted );
}

.nb-post-nav a:hover {
	color: var( --nb-accent );
}
/* === featured === */
.nb-feature {
	position: relative;
	padding: clamp( 1.6rem, 4vw, 2.5rem );
	border: 1px solid rgba( 255, 178, 36, 0.28 );
	border-radius: var( --nb-radius );
	background:
		radial-gradient( 700px circle at 0% 0%, rgba( 255, 178, 36, 0.09 ), transparent 60% ),
		linear-gradient( 160deg, var( --nb-surface-2 ), var( --nb-surface ) );
	box-shadow: 0 0 60px -26px rgba( 255, 178, 36, 0.5 );
}

.nb-feature-cols {
	gap: clamp( 1.5rem, 4vw, 3rem ) !important;
}

.nb-feature-tag {
	margin: 0 0 0.7rem;
	font-family: var( --nb-mono );
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --nb-accent );
}

.nb-feature-title {
	margin: 0 0 0.9rem;
	font-size: clamp( 1.4rem, 3vw, 1.95rem );
	line-height: 1.18;
}

.nb-feature-title a {
	color: var( --nb-text ) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.nb-feature-title a:hover {
	color: var( --nb-accent ) !important;
}

.nb-feature-excerpt {
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	line-height: 1.72;
	color: var( --nb-muted );
}

.nb-findings {
	gap: 0.6rem !important;
	padding: 1.15rem 1.25rem;
	border: 1px solid var( --nb-line );
	border-radius: 10px;
	background: rgba( 8, 9, 11, 0.6 );
}

.nb-finding {
	margin: 0;
	font-family: var( --nb-mono );
	font-size: 0.735rem;
	line-height: 1.5;
	color: var( --nb-muted );
	padding-left: 1.1rem;
	position: relative;
}

.nb-finding::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var( --nb-signal );
	font-weight: 700;
}

.nb-finding-fixed {
	color: #9aa4ae;
}

.nb-latest-cta {
	margin-top: 2.5rem;
}

/* === cta === */
.nb-cta-band {
	border-top: 1px solid var( --nb-line );
}

.nb-cta {
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
}

.nb-cta .nb-eyebrow {
	margin-bottom: 0.9rem;
}

.nb-cta h2 {
	margin: 0 0 1rem;
	font-size: clamp( 1.7rem, 4vw, 2.5rem );
	text-wrap: balance;
}

.nb-cta .nb-lead {
	margin: 0 auto 2rem;
	max-width: 40ch;
}

/* === contact === */
.nb-contact-grid {
	gap: clamp( 2rem, 5vw, 3.5rem ) !important;
}

.nb-contact-form-col .srfm-form-container,
.nb-contact-form-col form {
	background: transparent !important;
}

.nb-contact-card {
	padding: 1.5rem 1.6rem;
	border: 1px solid var( --nb-line );
	border-radius: var( --nb-radius );
	background: linear-gradient( 165deg, var( --nb-surface-2 ), var( --nb-surface ) );
	gap: 0.5rem !important;
}

.nb-contact-card h3 {
	margin: 0 0 0.35rem;
	font-size: 1rem;
}

.nb-contact-card p {
	margin: 0;
	font-size: 0.87rem;
	line-height: 1.65;
	color: var( --nb-muted );
}

.nb-contact-card .nb-mono-line {
	font-family: var( --nb-mono );
	font-size: 0.78rem;
	color: var( --nb-accent );
}

/* --- SureForms: bend the plugin's defaults onto the theme palette --- */
.srfm-form-container,
.srfm-form-container * {
	--srfm-color-scheme-primary: var( --nb-accent );
	--srfm-color-scheme-text-on-primary: var( --nb-bg );
	--srfm-color-input-label: var( --nb-text );
	--srfm-color-input-text: var( --nb-text );
	--srfm-color-input-placeholder: #6b7480;
	--srfm-color-input-background: var( --nb-surface );
	--srfm-color-input-border: var( --nb-line );
	--srfm-color-input-prefix: var( --nb-muted );
	--srfm-color-input-description: var( --nb-muted );
	--srfm-color-input-label-required: var( --nb-accent );
	--srfm-color-input-background-disabled: var( --nb-surface );
}

.srfm-form-container {
	background: transparent;
	padding: 0;
	font-family: var( --wp--preset--font-family--display );
}

.srfm-form-container .srfm-block-wrap label,
.srfm-form-container .srfm-block label {
	font-family: var( --nb-mono );
	font-size: 0.74rem !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --nb-muted ) !important;
	margin-bottom: 0.45rem;
}

.srfm-form-container input[type="text"],
.srfm-form-container input[type="email"],
.srfm-form-container input[type="tel"],
.srfm-form-container input[type="url"],
.srfm-form-container input[type="number"],
.srfm-form-container textarea,
.srfm-form-container select {
	background: var( --nb-surface ) !important;
	border: 1px solid var( --nb-line ) !important;
	border-radius: 8px !important;
	color: var( --nb-text ) !important;
	font-family: var( --nb-mono ) !important;
	font-size: 0.85rem !important;
	padding: 0.75rem 0.9rem !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.srfm-form-container input:focus,
.srfm-form-container textarea:focus,
.srfm-form-container select:focus {
	border-color: rgba( 255, 178, 36, 0.6 ) !important;
	box-shadow: 0 0 0 3px rgba( 255, 178, 36, 0.12 ) !important;
	outline: none !important;
}

.srfm-form-container ::placeholder {
	color: #6b7480 !important;
	opacity: 1;
}

.srfm-form-container .srfm-description,
.srfm-form-container .srfm-error-message {
	font-family: var( --nb-mono );
	font-size: 0.72rem;
}

/* Submit button: override the plugin's blue with the theme's amber. */
.srfm-form-container .srfm-submit-button button,
.srfm-form-container button.srfm-button,
.srfm-form-container .srfm-submit-richtext,
.srfm-form-container button[type="submit"] {
	background: var( --nb-accent ) !important;
	background-image: none !important;
	border: 1px solid var( --nb-accent ) !important;
	border-radius: 6px !important;
	color: var( --nb-bg ) !important;
	font-family: var( --nb-mono ) !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em;
	padding: 0.8rem 1.6rem !important;
	box-shadow: 0 0 30px -8px rgba( 255, 178, 36, 0.6 ) !important;
	transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.srfm-form-container .srfm-submit-button button:hover,
.srfm-form-container button[type="submit"]:hover {
	background: #ffc352 !important;
	color: var( --nb-bg ) !important;
	transform: translateY( -2px );
	box-shadow: 0 0 42px -6px rgba( 255, 178, 36, 0.78 ) !important;
}

/* Consent checkbox */
.srfm-form-container input[type="checkbox"] {
	accent-color: var( --nb-accent );
	width: 1rem;
	height: 1rem;
}

.srfm-form-container .srfm-gdpr-block label,
.srfm-form-container .srfm-checkbox-label {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: var( --wp--preset--font-family--display ) !important;
	font-size: 0.85rem !important;
	color: var( --nb-muted ) !important;
}

.srfm-success-box,
.srfm-single-form .srfm-success-box {
	background: var( --nb-surface ) !important;
	border: 1px solid rgba( 67, 201, 122, 0.4 ) !important;
	color: var( --nb-text ) !important;
	border-radius: var( --nb-radius ) !important;
}
/* === footer === */
.nb-footer {
	padding-block: 3.5rem 2.5rem;
	border-top: 1px solid var( --nb-line );
	background: linear-gradient( 180deg, transparent, rgba( 16, 19, 23, 0.6 ) );
}

.nb-footer-top {
	gap: 2rem;
	align-items: flex-start;
}

.nb-footer-brand {
	gap: 0.25rem !important;
}

.nb-footer-name {
	margin: 0;
	font-family: var( --nb-display );
	font-size: 1.15rem;
	font-weight: 700;
}

.nb-footer-tag,
.nb-footer-meta {
	margin: 0;
	font-family: var( --nb-mono );
	font-size: 0.74rem;
	color: var( --nb-muted );
	letter-spacing: 0.02em;
}

.nb-footer-links {
	gap: 1.4rem !important;
	font-family: var( --nb-mono );
	font-size: 0.82rem;
}

.nb-footer-links p {
	margin: 0;
}

.nb-footer-links a {
	color: var( --nb-muted );
	text-decoration: none;
	transition: color 0.18s ease;
}

.nb-footer-links a:hover {
	color: var( --nb-accent );
}

.nb-footer .nb-rule {
	margin-block: 2rem;
}

.nb-footer-bottom {
	gap: 0.75rem;
}

.nb-footer-bottom .nb-footer-meta:last-child {
	color: var( --nb-accent-deep );
}
/* === motion === */
/* Progressive enhancement: elements are fully visible by default (so the block
   editor and no-JS visitors see finished content). The frontend script adds
   .nb-reveal-active to <html>, which arms the hidden start state. */
.nb-reveal-active .nb-reveal {
	opacity: 0;
	transform: translateY( 22px );
	transition: opacity 0.7s cubic-bezier( 0.2, 0.7, 0.3, 1 ) var( --nb-delay, 0ms ),
		transform 0.7s cubic-bezier( 0.2, 0.7, 0.3, 1 ) var( --nb-delay, 0ms );
	will-change: opacity, transform;
}

.nb-reveal-active .nb-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Button visibility. [hidden] loses to .wp-block-button__link's explicit
   display value, so the JS toggles this class instead. */
.nb-term .nb-is-hidden,
.nb-term-actions .nb-is-hidden {
	display: none !important;
}

/* Reduced motion / static first paint: the transcript is fully rendered and
   the session is offered as an opt-in rather than played automatically. */
.nb-term-idle .nb-term-replay .wp-element-button {
	color: var( --nb-accent );
	border-color: color-mix( in srgb, var( --nb-accent ) 45%, transparent );
	background: color-mix( in srgb, var( --nb-accent ) 10%, transparent );
}

.nb-term-idle .nb-term-replay .wp-element-button:hover,
.nb-term-idle .nb-term-replay .wp-element-button:focus-visible {
	color: var( --nb-base );
	background: var( --nb-accent );
	border-color: var( --nb-accent );
}

/* The terminal types itself and must never be faded out while doing so:
   a hidden reveal state would run the whole session off screen and leave
   the visitor looking at the scrolled-to-bottom end of the transcript. */
.nb-reveal-active .nb-term,
.nb-reveal-active .nb-term.nb-reveal {
	opacity: 1;
	transform: none;
}

@keyframes nb-scan {
	0% { transform: translateY( -100% ); }
	100% { transform: translateY( 900% ); }
}

@keyframes nb-pulse {
	0%, 100% { opacity: 1; transform: scale( 1 ); }
	50% { opacity: 0.45; transform: scale( 0.82 ); }
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.nb-reveal-active .nb-reveal {
		opacity: 1;
		transform: none;
	}

	.nb-term-cursor,
	.nb-status-dot {
		animation: none !important;
	}
}
/* === responsive === */
@media ( max-width: 781px ) {
	.nb-header {
		padding-block: 0.7rem;
	}

	.nb-brand-sub {
		display: none;
	}

	.nb-term-screen {
		font-size: 0.7rem;
		padding: 1rem 0.9rem 1.3rem;
		min-height: 21rem;
		max-height: 27rem;
	}

	.nb-term-title {
		font-size: 0.68rem;
	}

	.nb-footer-top,
	.nb-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.nb-post-hero img {
		max-height: 240px;
	}

	/* The portrait dominated the mobile hero at 294px and pushed the CTAs far
	   below the fold. Cap it and centre it above the fold instead. */
	.nb-portrait img {
		max-width: 190px;
	}

	.nb-hero {
		padding-block: 2.5rem 2rem;
	}

	.nb-hero-cols {
		gap: 1.75rem !important;
	}

	.nb-stats {
		padding-top: 1.25rem;
	}

	.nb-stat {
		padding: 0.75rem 1rem;
	}

	.nb-feature {
		padding: 1.35rem 1.15rem;
	}

	.nb-findings {
		padding: 1rem;
	}

	.nb-finding {
		font-size: 0.7rem;
	}
}

@media ( max-width: 480px ) {
	.nb-term-screen {
		font-size: 0.63rem;
	}

	.nb-footer-links {
		gap: 0.9rem !important;
	}
}