/*
Theme Name: Wixbix Noir
Template: twentytwentyfive
Version: 1.0.0
Author: Mixbix
Description: Black & gold editorial redesign of the wixbix dev site, based on the Wix "Fashion Photographer (Clean)" template layout.
*/

/* ============================================================
   WIXBIX NOIR — design tokens
   ============================================================ */
:root {
	--wxb-black: #0a0a0a;
	--wxb-black-2: #131313;
	--wxb-gold: #d4a200;
	--wxb-gold-bright: #ffd700;
	--wxb-ink: #f2f1ee;
	--wxb-muted: rgba(242, 241, 238, 0.55);
	--wxb-line: rgba(212, 162, 0, 0.30);
	--wxb-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--wxb-sans: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

	/* override TT5 global palette so theme.json-driven styles follow black/gold */
	--wp--preset--color--base: #0a0a0a;
	--wp--preset--color--contrast: #f2f1ee;
	--wp--preset--font-family--system-font: var(--wxb-sans);
	--wp--preset--font-family--source-serif: var(--wxb-serif);
}

html {
	background: var(--wxb-black);
}

body {
	background: var(--wxb-black) !important;
	color: var(--wxb-ink) !important;
	font-family: var(--wxb-sans) !important;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--wxb-gold);
	color: #0a0a0a;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wxb-serif) !important;
	font-weight: 300 !important;
	color: var(--wxb-ink) !important;
	letter-spacing: 0.06em;
}

p {
	color: rgba(242, 241, 238, 0.78);
	font-weight: 300;
}

a {
	color: var(--wxb-gold);
}

/* block spacing reset — the theme controls rhythm, not block defaults */
body .wp-block-group {
	margin-block: 0;
}
body .wp-block-image,
body figure.wp-block-image {
	margin: 0;
}

/* ============================================================
   Header
   ============================================================ */
.wxb-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 26px 48px;
	background: transparent;
	transition: background 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
	border-bottom: 1px solid transparent;
}
.wxb-header.is-scrolled {
	background: rgba(10, 10, 10, 0.96);
	border-bottom-color: var(--wxb-line);
	padding: 18px 48px;
	backdrop-filter: blur(6px);
}

.wxb-header .wp-block-site-title,
.wxb-header .wp-block-site-title a {
	font-family: var(--wxb-serif) !important;
	font-weight: 400 !important;
	font-size: 21px !important;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	color: var(--wxb-ink) !important;
	text-decoration: none;
	line-height: 1;
}
.wxb-header .wp-block-site-title a:hover {
	color: var(--wxb-gold-bright) !important;
}

.wxb-nav .wp-block-navigation-item a {
	font-family: var(--wxb-sans) !important;
	font-weight: 300;
	font-size: 11px !important;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wxb-ink) !important;
	text-decoration: none !important;
	padding: 6px 2px;
	transition: color 0.25s ease;
}
.wxb-nav .wp-block-navigation-item a:hover {
	color: var(--wxb-gold-bright) !important;
}
.wxb-nav .wp-block-navigation-item.is-current > a {
	color: var(--wxb-gold) !important;
	border-bottom: 1px solid var(--wxb-gold);
}

/* mobile overlay menu */
.wxb-nav .wp-block-navigation__responsive-container-open,
.wxb-nav .wp-block-navigation__responsive-container-close {
	background: transparent !important;
	border: none !important;
	color: var(--wxb-ink) !important;
}
.wxb-nav .wp-block-navigation__responsive-container-open svg,
.wxb-nav .wp-block-navigation__responsive-container-close svg {
	fill: var(--wxb-ink) !important;
}

/* ============================================================
   Hero (home)
   ============================================================ */
.wxb-hero {
	position: relative;
	height: 92vh;
	min-height: 560px;
	overflow: hidden;
	background: var(--wxb-black);
}
.wxb-hero > .wp-block-image {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
}
.wxb-hero > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: wxbHeroFade 35s infinite;
}
.wxb-hero > .wp-block-image:nth-of-type(1) img { animation-delay: 0s; }
.wxb-hero > .wp-block-image:nth-of-type(2) img { animation-delay: 7s; }
.wxb-hero > .wp-block-image:nth-of-type(3) img { animation-delay: 14s; }
.wxb-hero > .wp-block-image:nth-of-type(4) img { animation-delay: 21s; }
.wxb-hero > .wp-block-image:nth-of-type(5) img { animation-delay: 28s; }

@keyframes wxbHeroFade {
	0%   { opacity: 0; }
	2%   { opacity: 1; }
	20%  { opacity: 1; }
	24%  { opacity: 0; }
	100% { opacity: 0; }
}

.wxb-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.15) 45%, rgba(10,10,10,0.62) 100%);
	pointer-events: none;
}

.wxb-hero-copy {
	position: relative;
	z-index: 3;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 24px;
	max-width: 100% !important;
}
.wxb-eyebrow {
	font-family: var(--wxb-sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--wxb-gold) !important;
	margin-bottom: 26px !important;
	font-weight: 300;
}
.wxb-hero-title {
	font-family: var(--wxb-serif) !important;
	font-weight: 300 !important;
	font-size: clamp(34px, 5vw, 64px) !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 !important;
	line-height: 1.15;
	text-shadow: 0 2px 30px rgba(0,0,0,0.45);
}
.wxb-hero-loc {
	font-family: var(--wxb-sans) !important;
	font-size: 12px !important;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.72) !important;
	margin-top: 28px !important;
}

/* ============================================================
   Sections
   ============================================================ */
.wxb-section {
	padding: 96px 48px;
}
.wxb-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0;
}

.wxb-sec-head {
	text-align: center;
	margin-bottom: 64px;
}
.wxb-sec-head h2 {
	font-size: clamp(28px, 3.4vw, 42px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 !important;
}
.wxb-sec-head h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 1px;
	background: var(--wxb-gold);
	margin: 22px auto 0;
}

.wxb-page-title {
	font-size: clamp(32px, 3.8vw, 48px) !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	display: inline-block;
	padding-bottom: 16px;
	margin-bottom: 56px;
	border-bottom: 1px solid var(--wxb-gold);
}

.wxb-sub {
	font-size: 22px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
	color: var(--wxb-gold) !important;
	margin-top: 48px !important;
	margin-bottom: 18px !important;
}

.wxb-body {
	font-size: 15px !important;
	line-height: 1.95 !important;
	color: rgba(242, 241, 238, 0.72) !important;
}

.wxb-center {
	text-align: center;
}
.wxb-mt-lg { margin-top: 64px; }
.wxb-mt-md { margin-top: 40px; }

/* ============================================================
   Buttons
   ============================================================ */
.wxb-btn {
	display: inline-block;
	background: transparent !important;
	border: 1px solid var(--wxb-gold);
	color: var(--wxb-gold) !important;
	font-family: var(--wxb-sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 300;
	text-decoration: none !important;
	padding: 16px 44px;
	border-radius: 0 !important;
	line-height: 1 !important;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.wxb-btn:hover {
	background: var(--wxb-gold) !important;
	color: #0a0a0a !important;
}
.wp-block-buttons .wxb-btn {
	margin: 0;
}

/* ============================================================
   Masonry works grid (home)
   ============================================================ */
.wxb-masonry {
	columns: 3;
	column-gap: 20px;
	counter-reset: wxbnum;
}
.wxb-masonry figure {
	break-inside: avoid;
	margin: 0 0 20px !important;
	position: relative;
	counter-increment: wxbnum;
	overflow: hidden;
}
.wxb-masonry figure img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform 0.8s ease;
}
.wxb-masonry figure:hover img {
	transform: scale(1.045);
}
.wxb-asp-l img { aspect-ratio: 4 / 3; }
.wxb-asp-p img { aspect-ratio: 2 / 3; }
.wxb-asp-s img { aspect-ratio: 1 / 1; }

.wxb-masonry figure::before {
	content: counter(wxbnum, decimal-leading-zero);
	position: absolute;
	top: 16px;
	left: 18px;
	z-index: 3;
	font-family: var(--wxb-sans);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: #ffffff;
	opacity: 0;
	transition: opacity 0.35s ease;
	text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.wxb-masonry figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	margin: 0 !important;
	padding: 44px 18px 16px;
	font-family: var(--wxb-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--wxb-gold-bright) !important;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
	opacity: 0;
	transition: opacity 0.35s ease;
}
.wxb-masonry figure:hover::before,
.wxb-masonry figure:hover figcaption {
	opacity: 1;
}

/* ============================================================
   Testimonial
   ============================================================ */
.wxb-quote {
	font-family: var(--wxb-serif) !important;
	font-weight: 300 !important;
	font-style: italic;
	font-size: clamp(20px, 2.7vw, 31px) !important;
	line-height: 1.55;
	color: var(--wxb-ink) !important;
	max-width: 780px;
	margin: 0 auto !important;
	text-align: center;
}
.wxb-author {
	font-family: var(--wxb-sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wxb-gold) !important;
	margin-top: 28px !important;
	text-align: center;
}

/* ============================================================
   Quick links
   ============================================================ */
.wxb-quicklinks {
	display: flex;
	justify-content: center;
	gap: 80px;
	flex-wrap: wrap;
	text-align: center;
}
.wxb-quicklinks a {
	font-family: var(--wxb-serif) !important;
	font-weight: 300;
	font-size: clamp(24px, 2.6vw, 34px);
	letter-spacing: 0.1em;
	color: var(--wxb-ink) !important;
	text-decoration: none !important;
	transition: color 0.25s ease;
}
.wxb-quicklinks a:hover {
	color: var(--wxb-gold-bright) !important;
}
.wxb-quicklinks .wxb-ql-sub {
	display: block;
	margin-top: 10px;
	font-family: var(--wxb-sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wxb-muted) !important;
}

/* ============================================================
   Galleries grid
   ============================================================ */
.wxb-filters {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 56px;
}
.wxb-filters .wp-block-button {
	margin: 0;
}
.wxb-filters .wp-block-button__link {
	background: transparent !important;
	border: 1px solid rgba(242, 241, 238, 0.25);
	border-radius: 0 !important;
	color: var(--wxb-muted) !important;
	font-family: var(--wxb-sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 300;
	padding: 11px 26px;
	transition: all 0.25s ease;
}
.wxb-filters .wp-block-button__link:hover,
.wxb-filters .is-active .wp-block-button__link {
	border-color: var(--wxb-gold);
	color: var(--wxb-gold) !important;
}

.wxb-galgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	counter-reset: wxbgal;
}
.wxb-galgrid figure {
	margin: 0 !important;
	position: relative;
	overflow: hidden;
	counter-increment: wxbgal;
}
.wxb-galgrid figure img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	transition: transform 0.8s ease;
}
.wxb-galgrid figure:hover img {
	transform: scale(1.045);
}
.wxb-galgrid figure::before {
	content: counter(wxbgal, decimal-leading-zero);
	position: absolute;
	top: 16px;
	left: 18px;
	z-index: 3;
	font-family: var(--wxb-sans);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: #fff;
	opacity: 0;
	transition: opacity 0.35s ease;
	text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.wxb-galgrid figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	margin: 0 !important;
	padding: 40px 18px 16px;
	font-family: var(--wxb-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wxb-gold-bright) !important;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
	opacity: 0;
	transition: opacity 0.35s ease;
}
.wxb-galgrid figure:hover::before,
.wxb-galgrid figure:hover figcaption {
	opacity: 1;
}

/* ============================================================
   About
   ============================================================ */
.wxb-about {
	align-items: start;
}
.wxb-about .wp-block-column {
	padding: 0;
}
.wxb-about-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
.wxb-about-meta p {
	font-family: var(--wxb-sans) !important;
	font-size: 12px !important;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wxb-gold) !important;
	line-height: 2.2 !important;
	font-weight: 300;
}

/* ============================================================
   Investment packages
   ============================================================ */
.wxb-cards {
	row-gap: 0;
}
.wxb-card {
	border: 1px solid rgba(242, 241, 238, 0.12);
	background: var(--wxb-black-2);
	padding: 52px 36px;
	height: 100%;
	text-align: center;
	transition: border-color 0.3s ease, transform 0.3s ease;
	margin: 0;
}
.wxb-card:hover {
	border-color: var(--wxb-gold);
}
.wxb-card h3 {
	font-size: 21px !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase;
	margin-bottom: 10px !important;
}
.wxb-card h3::after {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	background: var(--wxb-gold);
	margin: 16px auto 0;
}
.wxb-price {
	font-family: var(--wxb-serif) !important;
	font-size: 27px !important;
	color: var(--wxb-gold) !important;
	margin: 22px 0 26px !important;
	font-weight: 300;
	letter-spacing: 0.04em;
}
.wxb-card p {
	font-size: 13.5px !important;
	line-height: 2 !important;
	color: var(--wxb-muted) !important;
}
.wxb-card p + p {
	margin-top: 0;
}

/* ============================================================
   Contact
   ============================================================ */
.wxb-contact-lead {
	font-family: var(--wxb-sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--wxb-muted) !important;
	margin-bottom: 34px !important;
}
.wxb-contact-info {
	font-family: var(--wxb-sans) !important;
	font-size: 14px !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wxb-ink) !important;
	margin-bottom: 12px !important;
}
.wxb-contact-info a {
	color: var(--wxb-gold) !important;
	text-decoration: none !important;
}
.wxb-contact-info a:hover {
	color: var(--wxb-gold-bright) !important;
}
.wxb-form-note {
	font-size: 13px !important;
	letter-spacing: 0.08em;
	color: var(--wxb-muted) !important;
	margin-top: 40px !important;
	margin-bottom: 28px !important;
}

/* form fields (core form block) */
.wxb-form {
	max-width: 640px;
	margin: 0 auto;
}
.wxb-form .wp-block-form__field {
	margin-bottom: 34px;
}
.wxb-form .wp-block-form__label {
	display: block;
	font-family: var(--wxb-sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wxb-muted) !important;
	margin-bottom: 8px;
	font-weight: 300;
}
.wxb-form label {
	display: block;
	font-family: var(--wxb-sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wxb-muted) !important;
	margin-bottom: 8px;
	font-weight: 300;
}
.wxb-form label + label {
	margin-top: 26px;
}
.wxb-form input,
.wxb-form textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(242, 241, 238, 0.3);
	border-radius: 0 !important;
	color: var(--wxb-ink) !important;
	font-family: var(--wxb-sans) !important;
	font-size: 15px !important;
	font-weight: 300;
	letter-spacing: 0.05em;
	padding: 10px 2px;
	box-sizing: border-box;
}
.wxb-form input:focus,
.wxb-form textarea:focus {
	border-bottom-color: var(--wxb-gold);
	outline: none;
}
.wxb-form input[type="date"] {
	color-scheme: dark;
}
.wxb-form textarea {
	resize: vertical;
	min-height: 110px;
}
.wxb-form .wp-block-form__button {
	text-align: center;
	margin-top: 44px;
}
.wxb-form .wp-block-form__button input {
	background: transparent !important;
	border: 1px solid var(--wxb-gold);
	color: var(--wxb-gold) !important;
	font-family: var(--wxb-sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	border-radius: 0 !important;
	padding: 16px 44px;
	transition: background 0.3s ease, color 0.3s ease;
}
.wxb-form .wp-block-form__button input:hover {
	background: var(--wxb-gold) !important;
	color: #0a0a0a !important;
}
.wxb-form-submit {
	margin-top: 40px;
	background: transparent !important;
	border: 1px solid var(--wxb-gold);
	color: var(--wxb-gold) !important;
	font-family: var(--wxb-sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	border-radius: 0 !important;
	padding: 16px 44px;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
}
.wxb-form-submit:hover {
	background: var(--wxb-gold) !important;
	color: #0a0a0a !important;
}
.wxb-form ::placeholder {
	color: rgba(242, 241, 238, 0.3);
}

/* socials row */
.wxb-f-social a,
.wxb-socials a {
	font-family: var(--wxb-sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wxb-muted) !important;
	text-decoration: none !important;
	margin: 0 16px;
	transition: color 0.25s ease;
}
.wxb-socials a:hover {
	color: var(--wxb-gold-bright) !important;
}
.wxb-socials {
	text-align: center;
	margin-top: 28px !important;
}

/* ============================================================
   Footer
   ============================================================ */
.wxb-footer {
	border-top: 1px solid var(--wxb-line);
	padding: 64px 48px 44px;
	text-align: center;
}
.wxb-f-title {
	font-family: var(--wxb-serif) !important;
	font-weight: 400 !important;
	font-size: 19px !important;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	text-indent: 0.5em;
	margin-bottom: 14px !important;
}
.wxb-f-sub {
	font-family: var(--wxb-sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wxb-muted) !important;
	margin-bottom: 30px !important;
}
.wxb-f-social {
	margin-bottom: 26px !important;
}
.wxb-f-social a {
	font-family: var(--wxb-sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wxb-muted) !important;
	text-decoration: none !important;
	margin: 0 14px;
	transition: color 0.25s ease;
}
.wxb-f-social a:hover {
	color: var(--wxb-gold-bright) !important;
}
.wxb-f-copy {
	font-size: 10px !important;
	letter-spacing: 0.22em;
	color: rgba(242, 241, 238, 0.38) !important;
	margin: 0 !important;
}

/* ============================================================
   Main / page shells
   ============================================================ */
.wxb-main {
	padding-top: 96px;
}
.wxb-main-front {
	padding-top: 0;
}
.wxb-main .wp-block-group.alignfull {
	max-width: none;
}

/* ============================================================
   Kicker / rule / lead / sub-title (shared page elements)
   ============================================================ */
.wxb-kicker {
	font-family: var(--wxb-sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--wxb-muted) !important;
	margin: -34px 0 40px !important;
	font-weight: 300;
}
.wxb-rule,
.wxb-rule.is-style-wide,
.wxb-rule.is-style-dots {
	border: none !important;
	height: 1px !important;
	background: var(--wxb-line) !important;
	width: 100% !important;
	margin: 0 0 56px !important;
}
.wxb-sub-title {
	font-size: 24px !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--wxb-gold) !important;
	margin: 0 0 22px !important;
	font-weight: 300;
}
.wxb-lead {
	font-size: 16.5px !important;
	line-height: 1.9 !important;
	color: rgba(242, 241, 238, 0.78) !important;
	max-width: 720px;
	margin-bottom: 56px !important;
}
.wxb-link-underline {
	color: var(--wxb-gold) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--wxb-gold);
	padding-bottom: 2px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 12px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.wxb-link-underline:hover {
	color: var(--wxb-gold-bright) !important;
	border-color: var(--wxb-gold-bright);
}

/* ============================================================
   Works grid (galleries page) — 3-col with hover numbering
   ============================================================ */
.wxb-works-grid {
	row-gap: 20px;
	margin-bottom: 64px;
}
.wxb-works-grid .wp-block-column {
	padding: 0;
}
.wxb-works-grid figure {
	position: relative;
	margin: 0 !important;
	overflow: hidden;
}
.wxb-works-grid figure img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	transition: transform 0.8s ease;
}
.wxb-works-grid figure:hover img {
	transform: scale(1.045);
}
.wxb-works-grid figcaption.wxb-num {
	position: absolute;
	top: 16px;
	left: 18px;
	z-index: 3;
	margin: 0 !important;
	font-family: var(--wxb-sans) !important;
	font-size: 13px !important;
	letter-spacing: 0.2em;
	color: #fff !important;
	text-shadow: 0 1px 8px rgba(0,0,0,0.6);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.wxb-works-grid figure::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(transparent 55%, rgba(0,0,0,0.5));
	opacity: 0;
	transition: opacity 0.35s ease;
}
.wxb-works-grid figure:hover::after {
	opacity: 1;
}
.wxb-works-grid figure:hover figcaption.wxb-num {
	opacity: 1;
}

/* filters — plain anchor variant */
.wxb-filters .wxb-filter {
	display: inline-block;
	background: transparent !important;
	border: 1px solid rgba(242, 241, 238, 0.25);
	border-radius: 0 !important;
	color: var(--wxb-muted) !important;
	font-family: var(--wxb-sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 300;
	padding: 11px 26px;
	text-decoration: none !important;
	transition: all 0.25s ease;
}
.wxb-filters .wxb-filter:hover,
.wxb-filters .wxb-filter.is-active {
	border-color: var(--wxb-gold);
	color: var(--wxb-gold) !important;
}

/* ============================================================
   Investment packages
   ============================================================ */
.wxb-pkg-grid {
	row-gap: 0;
	margin-bottom: 64px;
}
.wxb-pkg {
	border: 1px solid rgba(242, 241, 238, 0.12);
	border-top: 2px solid var(--wxb-gold);
	background: var(--wxb-black-2);
	padding: 48px 32px;
	height: 100%;
	text-align: center;
	transition: border-color 0.3s ease, transform 0.3s ease;
	margin: 0;
}
.wxb-pkg:hover {
	border-color: var(--wxb-gold);
	transform: translateY(-4px);
}
.wxb-pkg-name {
	font-size: 21px !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase;
	margin-bottom: 14px !important;
}
.wxb-pkg-name::after {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	background: var(--wxb-gold);
	margin: 18px auto 0;
}
.wxb-pkg-price {
	font-family: var(--wxb-serif) !important;
	font-size: 25px !important;
	color: var(--wxb-gold) !important;
	margin: 22px 0 26px !important;
	font-weight: 300;
	letter-spacing: 0.04em;
}
.wxb-pkg-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.wxb-pkg-list li {
	font-size: 13.5px !important;
	line-height: 2 !important;
	color: var(--wxb-muted) !important;
}
.wxb-pkg-list li + li {
	margin-top: 0;
}

/* ============================================================
   Contact layout
   ============================================================ */
.wxb-contact-cols {
	align-items: start;
	row-gap: 56px;
}
.wxb-contact-cols .wp-block-column {
	padding: 0;
}
.wxb-contact-mail {
	margin-top: 28px !important;
}
.wxb-contact-mail a {
	color: var(--wxb-gold) !important;
	text-decoration: none !important;
	font-family: var(--wxb-serif) !important;
	font-size: 22px;
	letter-spacing: 0.06em;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease, color 0.25s ease;
}
.wxb-contact-mail a:hover {
	color: var(--wxb-gold-bright) !important;
	border-bottom-color: var(--wxb-gold-bright);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
	.wxb-masonry { columns: 2; }
	.wxb-galgrid { grid-template-columns: repeat(2, 1fr); }
	.wxb-works-grid { flex-wrap: wrap; }
	.wxb-works-grid .wp-block-column { flex-basis: 50% !important; }
	.wxb-pkg-grid { flex-wrap: wrap; }
	.wxb-pkg-grid .wp-block-column { flex-basis: 100% !important; margin-bottom: 20px; }
	.wxb-quicklinks { gap: 48px; }
}

@media (max-width: 768px) {
	.wxb-header { padding: 20px 24px; }
	.wxb-header.is-scrolled { padding: 16px 24px; }
	.wxb-section { padding: 72px 24px; }
	.wxb-main { padding-top: 80px; }
	.wxb-hero { height: 78vh; min-height: 460px; }
	.wxb-hero-title { letter-spacing: 0.08em; }
	.wxb-eyebrow { letter-spacing: 0.3em; }
	.wxb-about { gap: 40px; }
	.wxb-quicklinks { flex-direction: column; gap: 36px; }
	.wxb-footer { padding: 52px 24px 36px; }
}

@media (max-width: 560px) {
	.wxb-masonry { columns: 1; }
	.wxb-galgrid { grid-template-columns: 1fr; }
	.wxb-filters { gap: 8px; }
	.wxb-filters .wp-block-button__link { padding: 9px 16px; }
}

/* ============================================================
   WIXBIX NOIR — wh-1072 rebuild layout (v2)
   ============================================================ */
html, body { overflow-x: hidden; }

/* ---- Compact intro band (home top) ---- */
.wxb-hero-compact {
	padding: 120px 24px 84px;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}
.wxb-hero-compact .wxb-eyebrow { margin-bottom: 22px; }
.wxb-hero-compact .wxb-hero-title {
	font-size: clamp(40px, 6.4vw, 84px);
	letter-spacing: 0.06em;
	margin: 0 0 26px !important;
	line-height: 1.08;
	color: #ffffff !important;
}
.wxb-hero-lead {
	font-size: 16px !important;
	line-height: 1.9 !important;
	color: rgba(242,241,238,0.74) !important;
	max-width: 640px;
	margin: 0 auto 40px !important;
	font-weight: 300;
}
.wxb-hero-cta {
	display: flex;
	gap: 18px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---- Buttons: ghost (secondary) ---- */
.wxb-btn-ghost {
	border-color: rgba(242,241,238,0.30);
	color: var(--wxb-ink) !important;
}
.wxb-btn-ghost:hover {
	background: transparent !important;
	border-color: var(--wxb-gold-bright);
	color: var(--wxb-gold-bright) !important;
}

/* ---- Section variants ---- */
.wxb-section { padding: 84px 48px; }
.wxb-section-alt { background: var(--wxb-black-2); }
.wxb-sec-head-inline {
	text-align: center;
	font-size: clamp(26px, 3vw, 38px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 auto 26px;
	max-width: 720px;
}
.wxb-center-lead { text-align: center; margin-left: auto; margin-right: auto; }

/* ---- Services 4-col ---- */
.wxb-services {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-top: 56px;
	border-top: 1px solid var(--wxb-line);
}
.wxb-service {
	padding: 34px 26px 6px;
	border-left: 1px solid var(--wxb-line);
}
.wxb-service:first-child { border-left: none; padding-left: 0; }
.wxb-service:nth-child(2) { padding-left: 26px; }
.wxb-service h3 {
	font-size: 16px !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase;
	margin: 0 0 14px !important;
}
.wxb-service h3 a {
	color: var(--wxb-gold) !important;
	text-decoration: none !important;
	transition: color 0.25s ease;
}
.wxb-service h3 a:hover { color: var(--wxb-gold-bright) !important; }
.wxb-service p {
	font-size: 13.5px !important;
	line-height: 1.85 !important;
	color: var(--wxb-muted) !important;
	margin: 0;
}

/* ---- Split (fine-art feature) ---- */
.wxb-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
}
.wxb-split-img img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.wxb-split-copy .wxb-sub-title { margin-top: 0; }
.wxb-split-title {
	font-size: clamp(26px, 3vw, 40px) !important;
	letter-spacing: 0.06em;
	text-transform: none;
	margin: 0 0 20px !important;
	font-weight: 300;
}
.wxb-list-gold {
	list-style: none;
	padding: 0;
	margin: 26px 0 34px;
}
.wxb-list-gold li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 12px;
	font-size: 14px !important;
	line-height: 1.7 !important;
	color: rgba(242,241,238,0.72) !important;
}
.wxb-list-gold li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 14px;
	height: 1px;
	background: var(--wxb-gold);
}

/* ---- CTA block ---- */
.wxb-cta {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
	padding: 64px 24px;
	border-top: 1px solid var(--wxb-line);
}
.wxb-cta-frame { border-top: 1px solid var(--wxb-line); }
.wxb-cta-kicker {
	font-size: 11px !important;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--wxb-gold) !important;
	margin: 0 0 18px !important;
}
.wxb-cta-title {
	font-size: clamp(28px, 3.4vw, 44px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 18px !important;
	font-weight: 300;
}
.wxb-cta-lead {
	font-size: 15px !important;
	line-height: 1.9 !important;
	color: rgba(242,241,238,0.72) !important;
	max-width: 560px;
	margin: 0 auto 36px !important;
}

/* ---- Page head (about/contact centered) ---- */
.wxb-page-head {
	text-align: center;
	padding: 40px 24px 0;
	max-width: 860px;
	margin: 0 auto;
}
.wxb-page-head .wxb-page-title {
	display: block;
	border-bottom: none;
	margin-bottom: 22px;
	padding-bottom: 0;
}
.wxb-page-head .wxb-lead {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Contact extras ---- */
.wxb-contact-mail { margin: 0 0 6px !important; }
.wxb-contact-mail a {
	font-size: 30px !important;
	font-family: var(--wxb-serif) !important;
	letter-spacing: 0.03em;
}
.wxb-contact-info { margin-bottom: 34px !important; }
.wxb-form { max-width: 560px; }
.wxb-form p { margin: 0 0 30px; }
.wxb-form label {
	display: block;
	margin-bottom: 8px;
}
.wxb-form-btnrow { margin: 44px 0 0 !important; text-align: center; }
.wxb-socials {
	margin-top: 14px !important;
	text-align: left;
}
.wxb-socials a {
	margin: 0 22px 0 0;
	font-size: 12px !important;
	color: var(--wxb-ink) !important;
	letter-spacing: 0.26em;
}
.wxb-socials a:hover { color: var(--wxb-gold-bright) !important; }

/* ---- Legal pages ---- */
.wxb-legal { max-width: 820px; margin: 0 auto; }
.wxb-legal .wxb-body {
	margin-bottom: 22px !important;
	font-size: 14.5px !important;
	line-height: 1.9 !important;
}
.wxb-legal-h {
	font-size: 17px !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--wxb-gold) !important;
	margin: 44px 0 16px !important;
	font-weight: 400;
}

/* ---- Footer additions ---- */
.wxb-f-inner { max-width: 720px; margin: 0 auto; }
.wxb-f-legal { margin-bottom: 26px !important; }
.wxb-f-legal a {
	font-size: 10px !important;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wxb-muted) !important;
	text-decoration: none !important;
	margin: 0 12px;
	transition: color 0.25s ease;
}
.wxb-f-legal a:hover { color: var(--wxb-gold-bright) !important; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
	.wxb-services { grid-template-columns: repeat(2, 1fr); gap: 24px 0; border-top: none; }
	.wxb-service { border-left: none; padding: 24px 0; border-top: 1px solid var(--wxb-line); }
	.wxb-service:nth-child(2) { padding-left: 0; }
	.wxb-split { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
	.wxb-services { grid-template-columns: 1fr; }
	.wxb-hero-compact { padding: 84px 20px 56px; }
	.wxb-section { padding: 60px 24px; }
}

/* ============================================================
   WIXBIX NOIR — explicit 3-col staggered masonry (v2.1)
   Overrides the CSS `columns:3` version above.
   ============================================================ */
.wxb-masonry {
	columns: auto !important;
	column-gap: 0 !important;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.wxb-mcol {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.wxb-masonry figure {
	margin: 0 !important;
	break-inside: auto;
}
/* Row-major number badge from data-num (overrides counter content) */
.wxb-masonry figure::before {
	content: attr(data-num);
}

/* Responsive: 2 columns then 1 */
@media (max-width: 1000px) {
	.wxb-masonry { flex-wrap: wrap; }
	.wxb-mcol { flex: 1 1 calc(50% - 10px); }
}
@media (max-width: 560px) {
	.wxb-masonry { flex-wrap: wrap; gap: 14px; }
	.wxb-mcol { flex: 1 1 100%; }
	.wxb-mcol { gap: 14px; }
}
/* ============================================================
   Services submenu: override default white bg -> black + light text
   ============================================================ */
.wxb-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	background-color: #0a0a0a !important;
	border: 1px solid rgba(212, 162, 0, 0.30) !important;
	color: #f2f1ee !important;
}
.wxb-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item a {
	color: #f2f1ee !important;
}
.wxb-nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
	color: #ffd700 !important;
}
/* ============================================================
   Gallery (sub-pages) — matches production wxb-gallery look
   ============================================================ */
.wxb-gallery {
	column-count: 2;
	column-gap: 18px;
}
.wxb-gallery figure {
	break-inside: avoid;
	margin: 0 0 18px;
	background: #111;
	border: 1px solid rgb(212 160 0 / 0.35);
	padding: 8px;
	overflow: hidden;
}
.wxb-gallery img {
	width: 100%;
	height: auto;
	display: block;
	filter: grayscale(100%);
	transition: filter 0.25s ease, transform 0.25s ease;
}
.wxb-gallery img:hover {
	filter: grayscale(0);
	transform: scale(1.01);
}

/* fallback for narrow screens */
@media (max-width: 767px) {
	.wxb-gallery { columns: 1; }
}/* ============================================================
   Contact form notice (added) — matches gallery/CTA gold styling
   ============================================================ */
.wxb-form-success,
.wxb-form-error {
	border-left: 3px solid var(--wxb-gold);
	background: rgba(212, 162, 0, 0.08);
	padding: 12px 16px;
	margin: 0 0 18px;
	color: var(--wxb-ink);
	font-weight: 400;
	letter-spacing: 0.02em;
}
.wxb-form-success {
	border-left-color: #4caf50;
	background: rgba(76, 175, 80, 0.12);
}