/*
Theme Name: Nordbyte
Theme URI: https://nordbyte.se
Author: Nordbyte AB
Description: Kontrast — the Nordbyte block theme. Bold colour blocks, Familjen Grotesk, pill buttons and editable patterns for a software development and consultancy studio. Ships with five colour pairs as style variations.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nordbyte
Tags: block-patterns, full-site-editing, style-variations, custom-colors, editor-style
*/

/* ---------------------------------------------------------------
   Tokens
   --------------------------------------------------------------- */
:root {
	--nb-primary: var(--wp--preset--color--primary);
	--nb-pop: var(--wp--preset--color--pop);
	--nb-ink: var(--wp--preset--color--ink);
	--nb-paper: var(--wp--preset--color--paper);
	--nb-white: var(--wp--preset--color--white);
	--nb-muted: var(--wp--preset--color--muted);
	--nb-soft: var(--wp--preset--color--soft);
	--nb-line: color-mix(in srgb, var(--nb-ink) 12%, transparent);
	--nb-line-strong: color-mix(in srgb, var(--nb-ink) 22%, transparent);
	--nb-on-dark-muted: color-mix(in srgb, #fff 84%, transparent);
	--nb-radius-xl: 32px;
	--nb-radius-lg: 28px;
	--nb-radius-md: 22px;
	--nb-radius-sm: 14px;
	--nb-section: clamp(72px, 8vw, 112px);
	--nb-icon-arrow: url("assets/img/arrow-up-right.svg");
	--nb-icon-arrow-right: url("assets/img/arrow-right.svg");
	--nb-icon-star: url("assets/img/star.svg");
	--nb-icon-check: url("assets/img/check.svg");
	--nb-icon-plus: url("assets/img/plus.svg");
}

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

::selection { background: var(--nb-pop); color: var(--nb-ink); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--nb-pop);
	outline-offset: 3px;
	border-radius: 6px;
}
.has-pop-background-color :where(a, button, input, select, textarea, summary):focus-visible,
.has-white-background-color :where(a, button, input, select, textarea, summary):focus-visible,
.has-paper-background-color :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--nb-ink);
}

img { max-width: 100%; height: auto; }

.skip-link.screen-reader-text:focus {
	background: var(--nb-pop);
	color: var(--nb-ink);
	border-radius: 999px;
	font-weight: 700;
}

/* Muted copy that adapts to dark and light grounds */
.nb-muted,
.nb-section-head__text { color: var(--nb-muted); }
:where(.has-primary-background-color, .has-ink-background-color) :where(.nb-muted, .nb-lead, .nb-section-head__text, .nb-card__text) {
	color: var(--nb-on-dark-muted);
}

/* ---------------------------------------------------------------
   Sections & typography helpers
   --------------------------------------------------------------- */
.nb-section { padding-top: var(--nb-section); padding-bottom: var(--nb-section); }
.nb-section--flush-top { padding-top: 0; }
.nb-section--flush-bottom { padding-bottom: 0; }

.nb-section-head {
	gap: 16px 48px;
	margin-bottom: 48px;
}
.nb-section-head > * { margin: 0; }
.nb-section-head__text { max-width: 440px; font-size: 19px; }

.nb-display {
	font-size: clamp(44px, 6vw, 96px) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.05em !important;
}

.nb-eyebrow {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--nb-pop);
	color: var(--nb-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.nb-lead {
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.5;
	max-width: 560px;
}

mark.nb-highlight,
.nb-highlight {
	background: var(--nb-pop);
	color: var(--nb-ink);
	padding: 0 0.12em;
	border-radius: 0.14em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---------------------------------------------------------------
   Buttons (block styles)
   --------------------------------------------------------------- */
.wp-block-button__link { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.wp-block-button__link:active { transform: translateY(1px); }

.wp-block-button.is-style-pop .wp-block-button__link { background: var(--nb-pop); color: var(--nb-ink); }
.wp-block-button.is-style-pop .wp-block-button__link:hover { background: var(--nb-white); color: var(--nb-ink); }

.wp-block-button.is-style-ink .wp-block-button__link { background: var(--nb-ink); color: var(--nb-white); }
.wp-block-button.is-style-ink .wp-block-button__link:hover { background: var(--nb-primary); color: var(--nb-white); }

.wp-block-button.is-style-white .wp-block-button__link { background: var(--nb-white); color: var(--nb-ink); }
.wp-block-button.is-style-white .wp-block-button__link:hover { background: var(--nb-pop); color: var(--nb-ink); }

.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--nb-white);
	box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 70%, transparent);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover { background: var(--nb-white); color: var(--nb-ink); box-shadow: none; }

.wp-block-button.is-style-outline-ink .wp-block-button__link {
	background: transparent;
	color: var(--nb-ink);
	box-shadow: inset 0 0 0 2px var(--nb-ink);
}
.wp-block-button.is-style-outline-ink .wp-block-button__link:hover { background: var(--nb-ink); color: var(--nb-white); }

.wp-block-button.nb-arrow .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; }
.wp-block-button.nb-arrow .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--nb-icon-arrow) center / contain no-repeat;
	mask: var(--nb-icon-arrow) center / contain no-repeat;
}

.nb-btn-lg .wp-block-button__link { padding: 18px 28px; font-size: 18px; }

/* Text link with arrow */
.nb-textlink a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	text-decoration: none;
}
.nb-textlink a::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--nb-icon-arrow-right) center / contain no-repeat;
	mask: var(--nb-icon-arrow-right) center / contain no-repeat;
	transition: transform .2s ease;
}
.nb-textlink a:hover::after { transform: translateX(3px); }
.nb-textlink { margin: 0; }

/* ---------------------------------------------------------------
   Header & navigation
   --------------------------------------------------------------- */
.nb-header { position: relative; z-index: 20; }
.nb-header__bar {
	padding-top: 20px;
	padding-bottom: 20px;
	gap: 16px 32px;
	align-items: center;
}
.nb-header .wp-block-site-logo img,
.nb-footer .wp-block-site-logo img { height: auto; }
/* The logo is dark; on dark grounds (footer, dark header) it is shown in white. */
.nb-footer .wp-block-site-logo img,
.nb-header:where(.has-ink-background-color, .has-primary-background-color) .wp-block-site-logo img { filter: brightness(0) invert(1); }
.nb-header .wp-block-site-logo a { display: block; }

.nb-nav { flex: 1 1 auto; }
.nb-nav .wp-block-navigation-item__content { text-decoration: none; padding: 6px 0; }
.nb-nav .wp-block-navigation-item__content:hover,
.nb-nav .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nb-nav .wp-block-navigation__container { gap: 8px 28px; }
.nb-nav .wp-block-navigation__submenu-container {
	background: var(--nb-white) !important;
	color: var(--nb-ink) !important;
	border: 0 !important;
	border-radius: var(--nb-radius-sm);
	padding: 8px !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
	min-width: 240px !important;
}
.nb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 12px; border-radius: 10px; }
.nb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--nb-soft); text-decoration: none; }
.nb-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 24px clamp(16px, 4vw, 48px); }
.nb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 20px; }
.nb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.nb-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.nb-nav .is-menu-open .wp-block-navigation__container,
.nb-nav .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; }
.nb-nav .is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	color: inherit !important;
	box-shadow: none;
	padding: 10px 0 4px 18px !important;
	min-width: 0 !important;
	gap: 10px !important;
}
.nb-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 19px; font-weight: 500; letter-spacing: 0; padding: 4px 0; }
.nb-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: transparent; text-decoration: underline; }
.nb-nav .wp-block-navigation__responsive-container-open,
.nb-nav .wp-block-navigation__responsive-container-close { color: currentColor; }
.nb-nav .wp-block-navigation__responsive-container-open svg { width: 32px; height: 32px; }

.nb-header__cta { margin: 0; }
.nb-header__cta .wp-block-button__link { padding: 12px 22px; font-size: 16px; }

@media (max-width: 599px) {
	.nb-header__bar { flex-wrap: nowrap !important; gap: 12px !important; }
	.nb-header .wp-block-site-logo { margin-right: auto; }
	.nb-nav { flex: 0 0 auto; order: 3; }
	.nb-header__cta .wp-block-button__link { padding: 10px 16px; font-size: 15px; }
	.nb-hero__title { line-height: 1 !important; }
}

/* ---------------------------------------------------------------
   Hero (home)
   --------------------------------------------------------------- */
.nb-hero {
	padding-top: clamp(32px, 5vw, 72px);
	padding-bottom: clamp(64px, 7vw, 104px);
}
.nb-hero__title {
	font-size: clamp(56px, 9vw, 144px) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.055em !important;
	margin-top: 0;
	margin-bottom: 0;
}
.nb-hero__row { gap: 40px; margin-top: 40px; align-items: stretch; }
.nb-hero__intro { display: flex; flex-direction: column; justify-content: flex-start; gap: 32px; }
.nb-hero__intro > * { margin: 0; }
.nb-hero__media { position: relative; }

.nb-photo { margin: 0; }
.nb-photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	border-radius: var(--nb-radius-xl);
}
.nb-photo--wide img { aspect-ratio: 16 / 10; min-height: 0; }

.nb-sticker {
	position: absolute;
	top: -28px;
	right: 32px;
	z-index: 2;
	width: 148px;
	height: 148px;
	margin: 0 !important;
	box-sizing: border-box;
	padding: 16px;
	border-radius: 999px;
	background: var(--nb-pop);
	color: var(--nb-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.1;
	transform: rotate(-10deg);
}
@media (max-width: 781px) {
	.nb-sticker { width: 112px; height: 112px; font-size: 15px; top: -20px; right: 16px; }
}

/* ---------------------------------------------------------------
   Marquee band
   --------------------------------------------------------------- */
.nb-marquee {
	overflow: hidden;
	border-bottom: 2px solid var(--nb-ink);
	padding-top: 22px !important;
	padding-bottom: 22px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.nb-marquee__track {
	display: flex;
	width: max-content;
	gap: 32px;
	margin: 0 !important;
	padding-left: 32px;
	white-space: nowrap;
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}
.nb-marquee__track span { display: inline-flex; align-items: center; gap: 32px; }
.nb-marquee__track span::after {
	content: "";
	width: 0.62em;
	height: 0.62em;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--nb-icon-star) center / contain no-repeat;
	mask: var(--nb-icon-star) center / contain no-repeat;
}
.nb-marquee.is-animated .nb-marquee__track { animation: nb-marquee 48s linear infinite; }
.nb-marquee.is-animated:hover .nb-marquee__track { animation-play-state: paused; }
@keyframes nb-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.nb-marquee.is-animated .nb-marquee__track { animation: none; }
}

/* ---------------------------------------------------------------
   Cards
   --------------------------------------------------------------- */
.nb-card-grid { gap: 20px; }
.nb-card {
	position: relative;
	border-radius: var(--nb-radius-lg);
	padding: 32px;
	min-height: 320px;
	gap: 14px;
	transition: transform .25s ease;
}
.nb-card > * { margin: 0; }
.nb-card__top { width: 100%; align-items: center; }
.nb-card__title { margin-top: auto !important; font-size: 34px !important; line-height: 1 !important; letter-spacing: -0.04em !important; }
.nb-card p:not(.nb-num, .nb-arrow-link, .nb-eyebrow) { color: var(--nb-muted); }
.nb-card:where(.has-primary-background-color, .has-ink-background-color) p:not(.nb-num, .nb-arrow-link, .nb-eyebrow) { color: var(--nb-on-dark-muted); }
.nb-card.has-pop-background-color p:not(.nb-num, .nb-arrow-link, .nb-eyebrow) { color: var(--nb-ink); }

.nb-num {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	height: 32px;
	padding: 0 14px;
	margin: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px currentColor;
	font-size: 14px;
	font-weight: 700;
}
.nb-card:where(.has-primary-background-color, .has-ink-background-color) .nb-num { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 70%, transparent); }

.nb-arrow-link { margin: 0 0 0 auto; }
.nb-arrow-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--nb-pop);
	color: var(--nb-ink);
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	transition: transform .25s ease;
}
.nb-arrow-link a::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--nb-icon-arrow) center / contain no-repeat;
	mask: var(--nb-icon-arrow) center / contain no-repeat;
}
.nb-arrow-link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nb-card:where(.has-white-background-color, .has-pop-background-color, .has-paper-background-color) .nb-arrow-link a { background: var(--nb-ink); color: var(--nb-pop); }
.nb-card:hover .nb-arrow-link a { transform: rotate(45deg); }
.nb-card:focus-within { outline: 3px solid var(--nb-pop); outline-offset: 3px; }
.nb-card .nb-arrow-link a:focus-visible { outline: none; }

/* Feature card (AI & automation) */
.nb-card--feature {
	min-height: 0;
	padding: clamp(28px, 4vw, 48px);
	gap: 28px 48px;
	margin-bottom: 20px;
}
.nb-card--feature > .wp-block-group { flex: 1 1 360px; }
.nb-card--feature__main { flex-basis: 480px !important; gap: 16px; }
.nb-card--feature__main > * { margin: 0; }
.nb-feature-title {
	font-size: clamp(44px, 5.4vw, 80px) !important;
	line-height: 0.92 !important;
	letter-spacing: -0.05em !important;
	margin-top: 20px !important;
}
.nb-feature-title .nb-pop-text,
.nb-pop-text { color: var(--nb-pop); }

/* Pills list */
.nb-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nb-pills li {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px currentColor;
	font-weight: 700;
	margin: 0;
}
:where(.has-primary-background-color, .has-ink-background-color) .nb-pills li { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 50%, transparent); }

/* Chips */
.nb-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nb-chips li {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--nb-soft);
	color: var(--nb-ink);
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}

/* ---------------------------------------------------------------
   Case study feature + case cards
   --------------------------------------------------------------- */
.nb-case-card {
	border-radius: var(--nb-radius-xl);
	overflow: hidden;
	gap: 0 !important;
	align-items: stretch !important;
}
.nb-case-card__body {
	flex: 1 1 420px;
	padding: clamp(32px, 4.4vw, 64px);
	gap: 20px;
	justify-content: center;
}
.nb-case-card__body > * { margin: 0; }
.nb-case-card__title { font-size: clamp(36px, 4vw, 60px) !important; line-height: 0.98 !important; letter-spacing: -0.045em !important; }
.nb-case-card__title a { color: inherit; text-decoration: none; }
.nb-case-card__title a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nb-case-card__excerpt { color: var(--nb-on-dark-muted); font-size: 18px; }
.nb-case-card__excerpt p { margin: 0; }
.nb-case-card__media {
	flex: 1.2 1 480px;
	margin: 20px !important;
	min-height: 440px;
	border-radius: var(--nb-radius-md);
	overflow: hidden;
	background: var(--nb-primary);
}
.nb-case-card__media img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.nb-case-card .wp-block-read-more,
.nb-read-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	padding: 15px 24px;
	border-radius: 999px;
	background: var(--nb-white);
	color: var(--nb-ink);
	font-weight: 700;
	text-decoration: none;
}
.nb-case-card .wp-block-read-more::after,
.nb-read-more::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--nb-icon-arrow) center / contain no-repeat;
	mask: var(--nb-icon-arrow) center / contain no-repeat;
}
.nb-case-card .wp-block-read-more:hover { background: var(--nb-pop); }

.nb-terms { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 700; }
.nb-terms a,
.nb-terms .wp-block-post-terms__separator { text-decoration: none; }
.nb-terms .wp-block-post-terms__separator { display: none; }
.nb-terms a {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px currentColor;
	color: inherit;
}
.nb-terms--pop a { background: var(--nb-pop); color: var(--nb-ink); box-shadow: none; }
.nb-terms--soft a { background: var(--nb-soft); color: var(--nb-primary); box-shadow: none; }

/* Grid of posts / case studies */
.nb-post-grid .wp-block-post-template { gap: 20px; }
.nb-post-card {
	height: 100%;
	box-sizing: border-box;
	border-radius: var(--nb-radius-md);
	overflow: hidden;
	gap: 0;
	position: relative;
	transition: transform .25s ease;
}
.nb-post-card:hover { transform: translateY(-4px); }
.nb-post-card .wp-block-post-featured-image { margin: 0; }
.nb-post-card .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; }
.nb-post-card__body { padding: 24px 26px 28px; gap: 12px; flex: 1 1 auto; }
.nb-post-card__body > * { margin: 0; }
.nb-post-card .wp-block-post-title { font-size: 24px; line-height: 1.15; letter-spacing: -0.03em; }
.nb-post-card .wp-block-post-title a { text-decoration: none; color: inherit; }
.nb-post-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.nb-post-card .wp-block-post-excerpt__excerpt { margin: 0; color: var(--nb-muted); }
.nb-post-card .nb-terms { position: relative; z-index: 1; }
.nb-post-meta { font-size: 14px; color: var(--nb-muted); gap: 8px; }
.nb-post-meta > * { margin: 0; }

.wp-block-query-pagination { margin-top: 48px; gap: 8px; font-weight: 700; }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	box-sizing: border-box;
	text-decoration: none;
	box-shadow: inset 0 0 0 1.5px var(--nb-line-strong);
}
.wp-block-query-pagination .page-numbers.current { background: var(--nb-ink); color: var(--nb-white); box-shadow: none; }

/* ---------------------------------------------------------------
   Process steps
   --------------------------------------------------------------- */
.nb-steps { gap: 20px; }
.nb-step { gap: 14px; }
.nb-step > * { margin: 0; }
.nb-step-num {
	width: 64px;
	height: 64px;
	margin: 0;
	border-radius: 999px;
	background: var(--nb-pop);
	color: var(--nb-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
}
.nb-step-num--primary { background: var(--nb-primary); color: var(--nb-white); }
.nb-step h3 { font-size: 28px !important; margin-top: 8px !important; }
.nb-step p { color: var(--nb-muted); }
.nb-step__deliverable { margin-top: auto !important; padding-top: 14px; border-top: 1px solid var(--nb-line); font-size: 15px; color: var(--nb-ink) !important; }

/* ---------------------------------------------------------------
   Testimonial
   --------------------------------------------------------------- */
.nb-quote-card {
	border-radius: var(--nb-radius-xl);
	padding: clamp(32px, 5vw, 80px) !important;
	gap: 36px;
}
.nb-quote-card > * { margin: 0; }
.nb-quote-card::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	background: var(--nb-pop);
	-webkit-mask: var(--nb-icon-star) center / contain no-repeat;
	mask: var(--nb-icon-star) center / contain no-repeat;
}
.nb-quote-card .wp-block-quote {
	margin: 0;
	padding: 0;
	max-width: 1040px;
	font-size: clamp(30px, 3.8vw, 56px);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.035em;
}
.nb-quote-card .wp-block-quote p { margin: 0; }
.nb-quote-card .wp-block-quote cite {
	display: block;
	margin-top: 36px;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
}
.nb-quote-card .wp-block-quote cite span { display: block; font-weight: 400; color: var(--nb-on-dark-muted); }

.nb-quotes { gap: 16px; }
.nb-quote-tile {
	border-radius: var(--nb-radius-md);
	padding: 28px !important;
	gap: 20px;
	height: 100%;
	box-sizing: border-box;
}
.nb-quote-tile .wp-block-quote { margin: 0; padding: 0; font-size: 19px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.nb-quote-tile .wp-block-quote cite { display: block; margin-top: 22px; font-style: normal; font-weight: 700; font-size: 16px; }
.nb-quote-tile .wp-block-quote cite span { display: block; font-weight: 400; color: var(--nb-muted); }

/* ---------------------------------------------------------------
   CTA band
   --------------------------------------------------------------- */
.nb-cta { border-top: 2px solid var(--nb-ink); }
.nb-cta__title {
	font-size: clamp(56px, 9vw, 148px) !important;
	line-height: 0.92 !important;
	letter-spacing: -0.055em !important;
	margin-top: 0 !important;
	margin-bottom: 40px !important;
}
.nb-cta__row { gap: 24px 48px; }
.nb-cta__row > p { margin: 0; max-width: 520px; font-size: 20px; }

/* ---------------------------------------------------------------
   Page hero (interior)
   --------------------------------------------------------------- */
.nb-page-hero {
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(56px, 7vw, 104px);
}
/* A light-grey hero sits on the light-grey page: add a divider, except where the cover image overlaps it. */
.nb-page-hero.has-paper-background-color { border-bottom: 1px solid var(--nb-line); }
.nb-page-hero.has-paper-background-color:has(+ .nb-pull-up) { border-bottom: 0; }
.nb-page-hero__inner > * { margin-top: 0; margin-bottom: 0; }
.nb-page-hero__inner > * + * { margin-top: 24px !important; }
.nb-page-hero h1,
.nb-page-hero .wp-block-post-title,
.nb-page-hero .wp-block-query-title { max-width: 1100px; }
.nb-page-hero .nb-lead { max-width: 680px; }
.nb-page-hero .wp-block-buttons { margin-top: 36px !important; }
.nb-page-hero .wp-block-post-excerpt__excerpt { margin: 0; }
.nb-page-hero .nb-post-meta { color: var(--nb-muted); font-size: 16px; }
.nb-page-hero:where(.has-ink-background-color, .has-primary-background-color) .nb-post-meta { color: var(--nb-on-dark-muted); }
.nb-page-hero .nb-search .wp-block-search__input { box-shadow: inset 0 0 0 1.5px var(--nb-line-strong); }
.has-white-background-color .nb-lead,
.has-paper-background-color .nb-lead { color: var(--nb-muted); }
.nb-breadcrumbs { font-size: 15px; font-weight: 600; }
.nb-breadcrumbs a { text-decoration: none; }
.nb-breadcrumbs a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   Content blocks
   --------------------------------------------------------------- */
.nb-split { gap: 40px 64px !important; }
.nb-split > .wp-block-column > :first-child { margin-top: 0; }

.nb-panel {
	border-radius: var(--nb-radius-lg);
	padding: clamp(28px, 3.6vw, 44px) !important;
}
.nb-panel > :first-child { margin-top: 0; }
.nb-panel__title { font-size: clamp(28px, 3vw, 40px) !important; letter-spacing: -0.04em !important; }
.nb-panel p { margin-bottom: 0; }
.nb-panel--bordered { box-shadow: inset 0 0 0 1px var(--nb-line); }

.nb-checklist { list-style: none; margin: 0; padding: 0; }
.nb-checklist li {
	position: relative;
	padding: 14px 0 14px 44px;
	border-bottom: 1px solid var(--nb-line);
	margin: 0;
}
.nb-checklist li:last-child { border-bottom: 0; }
.nb-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--nb-pop) var(--nb-icon-check) center / 16px no-repeat;
}
:where(.has-primary-background-color, .has-ink-background-color) .nb-checklist li { border-bottom-color: color-mix(in srgb, #fff 16%, transparent); }

.nb-tiles { gap: 16px; }
.nb-tile {
	border-radius: var(--nb-radius-md);
	padding: 28px !important;
	gap: 10px;
	height: 100%;
	box-sizing: border-box;
}
.nb-tile > * { margin: 0; }
.nb-tile h3 { font-size: 22px !important; letter-spacing: -0.02em !important; }
.nb-tile h3.nb-stat { font-size: clamp(40px, 4vw, 56px) !important; letter-spacing: -0.045em !important; }
.nb-tile p { color: var(--nb-muted); }
.nb-tile__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--nb-pop) var(--nb-icon-check) center / 18px no-repeat;
	font-size: 0;
}

/* Engagement panel */
.nb-engage { border-radius: var(--nb-radius-lg); padding: 28px !important; gap: 0; }
.nb-engage > * { margin: 0; }
.nb-engage__row {
	padding: 20px 0;
	border-top: 1px solid color-mix(in srgb, #fff 22%, transparent);
	gap: 16px;
}
.nb-engage__row > * { margin: 0; }
.nb-engage__row h3 { font-size: 20px !important; letter-spacing: -0.02em !important; margin: 0; }
.nb-engage__row p { color: var(--nb-on-dark-muted); font-size: 16px; }

/* FAQ */
.nb-faq { gap: 0; }
.nb-faq .wp-block-details {
	border-bottom: 1px solid var(--nb-line);
	padding: 22px 0;
	margin: 0;
}
.nb-faq .wp-block-details:first-child { border-top: 1px solid var(--nb-line); }
.nb-faq .wp-block-details summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	cursor: pointer;
	font-size: clamp(19px, 1.8vw, 22px);
	font-weight: 700;
	letter-spacing: -0.02em;
	list-style: none;
}
.nb-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.nb-faq .wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--nb-pop) var(--nb-icon-plus) center / 16px no-repeat;
	transition: transform .2s ease;
}
.nb-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.nb-faq .wp-block-details > :not(summary) { margin-top: 12px; color: var(--nb-muted); max-width: 820px; }

/* Long-form content */
.nb-prose { font-size: 19px; line-height: 1.7; }
.nb-prose > * + * { margin-top: 1.1em; }
.nb-prose h2 { font-size: clamp(30px, 3vw, 40px); margin-top: 1.8em; }
.nb-prose h3 { font-size: clamp(24px, 2.2vw, 28px); margin-top: 1.6em; }
.nb-prose ul,
.nb-prose ol { padding-left: 1.2em; }
.nb-prose li + li { margin-top: 0.4em; }
.nb-prose a { text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.nb-prose blockquote,
.nb-prose .wp-block-quote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--nb-pop);
	font-size: 24px;
	line-height: 1.3;
}
.nb-prose code { background: var(--nb-soft); padding: 0.1em 0.35em; border-radius: 6px; font-size: 0.9em; }
.nb-prose .wp-block-image img { border-radius: var(--nb-radius-md); }

.nb-featured-media .wp-block-post-featured-image { margin: 0; }
.nb-featured-media .wp-block-post-featured-image img { border-radius: var(--nb-radius-xl); width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; }
.nb-pull-up { margin-top: clamp(-72px, -5vw, -40px) !important; position: relative; z-index: 2; }

/* Team */
.nb-person { gap: 14px; }
.nb-person > * { margin: 0; }
.nb-person .wp-block-image img { border-radius: var(--nb-radius-md); aspect-ratio: 1; object-fit: cover; width: 100%; }
.nb-person h3 { font-size: 22px !important; letter-spacing: -0.02em !important; }
.nb-person p { color: var(--nb-muted); }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.nb-footer { padding-top: 64px; padding-bottom: 28px; }
.nb-footer a { color: inherit; text-decoration: none; }
.nb-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nb-footer__top { gap: 40px; margin-bottom: 48px; }
.nb-footer__brand { flex: 1 1 280px; gap: 18px; }
.nb-footer__brand > * { margin: 0; }
.nb-footer__brand p { max-width: 300px; color: var(--nb-on-dark-muted); }
.nb-footer__cols { flex: 2 1 480px; gap: 32px 64px; align-items: flex-start !important; }
.nb-footer__col { gap: 10px; }
.nb-footer__col > * { margin: 0; }
.nb-footer__heading { color: var(--nb-pop); font-weight: 700; }
.nb-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nb-footer__links li { margin: 0; }
.nb-footer__bottom {
	padding-top: 20px;
	border-top: 1px solid color-mix(in srgb, #fff 16%, transparent);
	gap: 16px;
	font-size: 15px;
	color: var(--nb-on-dark-muted);
}
.nb-footer__bottom > * { margin: 0; }
.nb-footer__bottom .nb-eyebrow { color: var(--nb-ink); }

/* ---------------------------------------------------------------
   Contact form (Nordbyte Core plugin)
   --------------------------------------------------------------- */
.nb-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.nb-form__field { display: flex; flex-direction: column; gap: 8px; }
.nb-form__field--full { grid-column: 1 / -1; }
.nb-form label { font-size: 15px; font-weight: 700; }
.nb-form label .nb-form__optional { font-weight: 400; color: var(--nb-muted); }
.nb-form input[type="text"],
.nb-form input[type="email"],
.nb-form input[type="tel"],
.nb-form select,
.nb-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1.5px solid var(--nb-line-strong);
	border-radius: var(--nb-radius-sm);
	background: var(--nb-white);
	color: var(--nb-ink);
	font: inherit;
	font-size: 17px;
}
.nb-form textarea { min-height: 160px; resize: vertical; }
.nb-form :is(input, select, textarea):focus { border-color: var(--nb-primary); outline: 3px solid color-mix(in srgb, var(--nb-primary) 25%, transparent); outline-offset: 0; }
.nb-form__consent { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--nb-muted); }
.nb-form__consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--nb-primary); flex: 0 0 auto; }
.nb-form__consent label { font-weight: 400; }
.nb-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.nb-form__submit { grid-column: 1 / -1; }
.nb-form__submit button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 0;
	cursor: pointer;
	padding: 17px 28px;
	border-radius: 999px;
	background: var(--nb-primary);
	color: var(--nb-white);
	font: inherit;
	font-size: 17px;
	font-weight: 700;
}
.nb-form__submit button:hover { background: var(--nb-ink); }
.nb-notice { grid-column: 1 / -1; padding: 16px 20px; border-radius: var(--nb-radius-sm); font-weight: 600; margin: 0 0 20px; }
.nb-notice--success { background: var(--nb-pop); color: var(--nb-ink); }
.nb-notice--error { background: #FDE8E7; color: #8A1C14; }
@media (max-width: 600px) { .nb-form { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Search & 404
   --------------------------------------------------------------- */
.nb-search .wp-block-search__inside-wrapper { gap: 10px; border: 0; padding: 0; }
.nb-search .wp-block-search__input {
	border: 0;
	border-radius: 999px;
	padding: 16px 22px;
	font: inherit;
	font-size: 17px;
	background: var(--nb-white);
	color: var(--nb-ink);
}
.nb-search .wp-block-search__button {
	border-radius: 999px;
	padding: 0 26px;
	background: var(--nb-pop);
	color: var(--nb-ink);
	font-weight: 700;
	border: 0;
	margin: 0;
}

/* Editor niceties */
.editor-styles-wrapper .nb-sticker { position: absolute; }
.editor-styles-wrapper .nb-marquee__track { animation: none !important; }

/* ---------------------------------------------------------------
   Full-bleed sections stack without gaps
   --------------------------------------------------------------- */
.wp-site-blocks > * + * { margin-block-start: 0; }
:where(.nb-main, .nb-main > .wp-block-post-content) > .alignfull { margin-block-start: 0; margin-block-end: 0; }
.nb-section .nb-search .wp-block-search__input { box-shadow: inset 0 0 0 1.5px var(--nb-line-strong); }
.nb-search .wp-block-search__label { font-weight: 700; margin-bottom: 8px; }

/* Footer contact, case-study details */
.nb-footer__contact { font-weight: 600; line-height: 1.8; }
.nb-footer__contact a { color: var(--nb-white); }
.nb-phases { list-style: none; margin: 0; padding: 0; }
.nb-phases li { padding: 12px 0; border-bottom: 1px solid var(--nb-line); margin: 0; }
.nb-phases li:last-child { border-bottom: 0; }
.nb-panel > h3 { font-size: 20px !important; letter-spacing: -0.02em !important; }
.nb-panel > h3 + * { margin-top: 14px; }
.nb-panel > .nb-chips + h3 { margin-top: 32px; }
/* Show the whole product collage at every width. */
.nb-hero__media .nb-photo img { min-height: 0; height: auto; aspect-ratio: 16 / 10; }