/* Convertxity — Control Room design system (v11, light) */

/* ---------- Font faces ---------- */
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens (v11 light) ---------- */
:root {
	--cx-ink: #14171D;
	--cx-carbon: #F7F6F3;
	--cx-carbon2: #FDFCFA;
	--cx-carbon3: #EFEDE6;
	--cx-brand: #46607F;
	--cx-accent: #46607F;
	--cx-cream: #FFFFFF;
	--cx-slate: #5C6470;
	--cx-ember: #FF5C1F;
	--cx-lime: #C8F23C;
	--cx-line: rgba(20, 23, 29, .14);
	--cx-line-strong: rgba(20, 23, 29, .3);
	--cx-display: "Space Grotesk", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--cx-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--cx-max: 1240px;
	--cx-tick: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Elementor page shell ---------- */
body.cx-elementor {
	background: var(--cx-cream);
	color: var(--cx-ink);
	overflow-x: clip;
}
body.cx-elementor .elementor-section,
body.cx-elementor .elementor-widget-wrap {
	transition: none;
}
body.cx-elementor #content,
body.cx-elementor .elementor,
body.cx-elementor .elementor *,
body.cx-elementor .site-main {
	color: inherit;
}
body.cx-elementor a {
	color: inherit;
}

/* background: whisper grid + noise */
body.cx-elementor::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(rgba(70, 96, 127, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(70, 96, 127, .05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 100%);
	mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 100%);
}
body.cx-elementor::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .35;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* header on light */
body.cx-elementor .site-header,
body.cx-elementor.header-dark .site-header {
	background: var(--cx-cream);
	border-bottom-color: var(--cx-line);
	position: sticky;
	top: 0;
	z-index: 60;
}
body.cx-elementor .site-header .cx-wordmark .st0 { fill: var(--cx-ink); }
body.cx-elementor .site-header .cx-wordmark .st1 { fill: var(--cx-brand); }
body.cx-elementor .cx-header-inner {
	max-width: var(--cx-max);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	width: 100%;
	box-sizing: border-box;
}
body.cx-elementor .site-header nav a.wp-block-navigation-item__content,
body.cx-elementor .site-header nav a.wp-block-navigation-item__content:hover {
	color: var(--cx-ink);
	background-image: linear-gradient(var(--cx-brand), var(--cx-brand));
}
body.cx-elementor .cx-header-cta.wp-element-button {
	background: var(--cx-brand);
	border-color: var(--cx-brand);
	color: var(--cx-cream);
}
body.cx-elementor .cx-header-cta.wp-element-button:hover {
	background: var(--cx-ink);
	border-color: var(--cx-ink);
	color: var(--cx-cream);
}

/* Gutenberg pages that carry the cx-content shell */
body:has(.cx-content) {
	background: var(--cx-cream);
	color: var(--cx-ink);
	overflow-x: clip;
}
body:has(.cx-content) .site-main,
body:has(.cx-content) main,
body:has(.cx-content) main .entry-content {
	background: var(--cx-cream);
}
body:has(.cx-content) .site-header {
	background: var(--cx-cream);
	border-bottom-color: var(--cx-line);
	position: sticky;
	top: 0;
	z-index: 60;
}
body:has(.cx-content) .site-header .cx-wordmark .st0 { fill: var(--cx-ink); }
body:has(.cx-content) .site-header .cx-wordmark .st1 { fill: var(--cx-brand); }
body:has(.cx-content) .site-header nav a.wp-block-navigation-item__content,
body:has(.cx-content) .site-header nav a.wp-block-navigation-item__content:hover {
	color: var(--cx-ink);
	background-image: linear-gradient(var(--cx-brand), var(--cx-brand));
}
body:has(.cx-content) .cx-header-cta.wp-element-button {
	background: var(--cx-brand);
	border-color: var(--cx-brand);
	color: var(--cx-cream);
}
body:has(.cx-content) .cx-header-cta.wp-element-button:hover {
	background: var(--cx-ink);
	border-color: var(--cx-ink);
	color: var(--cx-cream);
}

/* classic pages (no shell class): header follows the same light rule */
body:not(.cx-elementor) .site-header {
	background: var(--cx-cream);
	position: sticky;
	top: 0;
	z-index: 60;
}
body:not(.cx-elementor) .site-header .cx-wordmark .st0 { fill: var(--cx-ink); }
body:not(.cx-elementor) .site-header .cx-wordmark .st1 { fill: var(--cx-brand); }
body:not(.cx-elementor) .site-header nav a.wp-block-navigation-item__content,
body:not(.cx-elementor) .site-header nav a.wp-block-navigation-item__content:hover {
	color: var(--cx-ink);
	background-image: linear-gradient(var(--cx-brand), var(--cx-brand));
}

/* Elementor top-level containers */
body.cx-elementor .elementor {
	position: relative;
	z-index: 1;
}

/* ---------- Component classes (referenced by Elementor sections) ---------- */
.cx-wrap {
	box-sizing: border-box;
	max-width: var(--cx-max);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	width: 100%;
}

/* Classic (non-Elementor) pages: the block theme can override
   the inline margins/box-sizing of .cx-wrap children, which widens
   them past the viewport (content-box + a negative right margin). */
body:not(.cx-elementor) .entry-content .cx-wrap,
body:not(.cx-elementor) .cx-content .cx-wrap {
	box-sizing: border-box;
	margin-inline: auto;
	width: 100%;
	max-width: var(--cx-max);
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* kicker / mono eyebrow */
.cx-kicker {
	font-family: var(--cx-mono);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--cx-accent);
	display: inline-flex;
	align-items: center;
	gap: .65rem;
}
.cx-kicker::before {
	content: "▪";
	font-size: .72em;
	color: var(--cx-ember);
}

/* display headings in hero & sections */
.cx-hero-h1 {
	font-family: var(--cx-display);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -.03em;
	color: var(--cx-ink);
	font-size: clamp(2.6rem, 7.2vw, 5.4rem);
	margin: 0;
}
.cx-hero-h1 .cx-volt-word {
	color: var(--cx-brand);
}
.cx-hero-h1 .cx-ember-word {
	color: var(--cx-ember);
}

.cx-lede {
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	line-height: 1.65;
	color: var(--cx-slate);
	max-width: 38rem;
}
.cx-lede strong { color: var(--cx-ink); font-weight: 600; }

/* buttons */
.cx-btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--cx-mono);
	font-weight: 600;
	font-size: .85rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .95rem 1.6rem;
	border-radius: 2px;
	text-decoration: none;
	transition: transform .18s var(--cx-tick), background-color .18s, color .18s, border-color .18s;
	line-height: 1;
}
.cx-btn--volt {
	background: var(--cx-brand);
	color: var(--cx-cream);
	border: 1px solid var(--cx-brand);
}
.cx-btn--volt:hover { background: var(--cx-ink); border-color: var(--cx-ink); color: var(--cx-cream); transform: translateY(-2px); }
.cx-btn--ghost {
	background: transparent;
	color: var(--cx-ink);
	border: 1px solid var(--cx-line-strong);
}
.cx-btn--ghost:hover { border-color: var(--cx-ink); color: var(--cx-ink); transform: translateY(-2px); }
.cx-btn--ember {
	background: var(--cx-ember);
	color: var(--cx-ink);
	border: 1px solid var(--cx-ember);
}
.cx-btn--ember:hover { background: var(--cx-ember); filter: brightness(1.08); transform: translateY(-2px); color: var(--cx-ink); }

/* marquee ticker */
.cx-marquee {
	overflow: hidden;
	background: var(--cx-carbon);
	border-block: 1px solid var(--cx-line);
	position: relative;
}
.cx-marquee__track {
	display: flex;
	width: max-content;
	animation: cx-marquee 26s linear infinite;
	will-change: transform;
}
.cx-marquee__inner {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.cx-marquee__inner span {
	font-family: var(--cx-mono);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cx-slate);
	padding-inline: 1.4rem;
	white-space: nowrap;
}
.cx-marquee__inner b {
	font-family: var(--cx-mono);
	font-weight: 600;
	color: var(--cx-brand);
}
@keyframes cx-marquee {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.cx-marquee__track { animation: none; }
}

/* hero stat panel — instrument cards */
.cx-panel {
	background: var(--cx-carbon);
	border: 1px solid var(--cx-line);
	border-top: 3px solid var(--cx-lime);
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
	position: relative;
	overflow: hidden;
}
.cx-panel::after {
	content: "";
	position: absolute;
	right: -30%;
	top: -40%;
	width: 90%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 92, 31, .08), transparent 70%);
	pointer-events: none;
}
.cx-panel__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.cx-panel__label {
	font-family: var(--cx-mono);
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cx-slate);
}
.cx-panel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cx-ember);
	box-shadow: 0 0 0 4px rgba(255, 92, 31, .22);
	animation: cx-pulse 2s infinite;
}
@keyframes cx-pulse {
	50% { box-shadow: 0 0 0 8px rgba(255, 92, 31, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.cx-panel__dot { animation: none; }
}
.cx-panel__num {
	font-family: var(--cx-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 5vw, 4rem);
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--cx-ink);
	margin-block: 1rem .35rem;
}
.cx-panel__num sup { font-size: .4em; color: var(--cx-ember); font-family: var(--cx-mono); }
.cx-panel__note {
	font-size: .9rem;
	line-height: 1.5;
	color: var(--cx-slate);
	margin: 0;
}

/* section headings */
.cx-sec-label {
	font-family: var(--cx-mono);
	font-size: .8rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--cx-slate);
	display: block;
	margin-bottom: 1rem;
}
.cx-h2 {
	font-family: var(--cx-display);
	font-weight: 700;
	font-size: clamp(1.9rem, 4.2vw, 3.2rem);
	line-height: 1.02;
	letter-spacing: -.025em;
	color: var(--cx-ink);
	margin: 0 0 1.25rem;
}
.cx-h2 em { color: var(--cx-ember); font-style: normal; }

/* bento grid */
.cx-bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(.9rem, 1.6vw, 1.25rem);
}
.cx-card {
	background: var(--cx-carbon);
	border: 1px solid var(--cx-line);
	padding: clamp(1.25rem, 2vw, 1.75rem);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.4rem;
	min-height: 100%;
	transition: border-color .2s, transform .25s var(--cx-tick);
}
.cx-card:hover { border-color: var(--cx-line-strong); transform: translateY(-3px); }
.cx-card--volt {
	background: var(--cx-brand);
	border-color: var(--cx-brand);
	color: var(--cx-cream);
}
.cx-card--volt .cx-card__label,
.cx-card--volt .cx-card__body,
.cx-card--volt .cx-card__meta { color: rgba(255, 255, 255, .82); }
.cx-card--volt .cx-card__title { color: var(--cx-cream); }
.cx-card--volt:hover { border-color: var(--cx-ink); }
.cx-card--lime {
	background: var(--cx-lime);
	border-color: var(--cx-lime);
	color: var(--cx-ink);
}
.cx-card--lime .cx-card__label,
.cx-card--lime .cx-card__body,
.cx-card--lime .cx-card__meta { color: rgba(20, 23, 29, .78); }
.cx-card--lime .cx-card__title { color: var(--cx-ink); }
.cx-card--lime .cx-card__label::before { color: var(--cx-ink); }
.cx-card--lime:hover { border-color: var(--cx-ink); }
.cx-card__label {
	font-family: var(--cx-mono);
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cx-accent);
}
.cx-card__label::before { content: "▣  "; color: var(--cx-ember); }
.cx-card__title {
	font-family: var(--cx-display);
	font-weight: 600;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	line-height: 1.15;
	letter-spacing: -.015em;
	color: var(--cx-ink);
	margin: .35rem 0 .6rem;
}
.cx-card__body {
	font-size: .95rem;
	line-height: 1.55;
	color: var(--cx-slate);
}
.cx-card__meta {
	font-family: var(--cx-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cx-slate);
}
.cx-bento .span-3 { grid-column: span 3; }
.cx-bento .span-4 { grid-column: span 4; }
.cx-bento .span-6 { grid-column: span 6; }
.cx-bento .span-8 { grid-column: span 8; }
.cx-bento .span-12 { grid-column: span 12; }

/* pipeline band */
.cx-pipeline {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border: 1px solid var(--cx-line);
	background: var(--cx-carbon);
}
.cx-stage {
	padding: clamp(1rem, 1.8vw, 1.5rem) clamp(.9rem, 1.8vw, 1.4rem);
	position: relative;
	border-right: 1px solid var(--cx-line);
	min-width: 0;
}
.cx-stage:last-child { border-right: 0; }
.cx-stage__step {
	font-family: var(--cx-mono);
	font-size: .72rem;
	letter-spacing: .2em;
	color: var(--cx-ember);
}
.cx-stage__name {
	font-family: var(--cx-display);
	font-weight: 600;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	color: var(--cx-ink);
	margin: .6rem 0 .8rem;
}
.cx-stage__bar {
	height: 4px;
	background: rgba(20, 23, 29, .08);
	position: relative;
	overflow: hidden;
}
.cx-stage__bar i {
	position: absolute;
	inset: 0;
	background: var(--cx-lime);
	transform-origin: left;
	animation: cx-fill 1.6s var(--cx-tick) forwards;
	transform: scaleX(0);
}
@keyframes cx-fill {
	to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
	.cx-stage__bar i { animation: none; transform: scaleX(var(--cx-fill, 1)); }
}
.cx-stage__arrow {
	position: absolute;
	right: -14px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cx-lime);
	color: var(--cx-ink);
	display: grid;
	place-items: center;
	font-size: .8rem;
	font-family: var(--cx-mono);
	font-weight: 700;
}

/* CTA band — the joyful finale */
.cx-cta-band {
	background: var(--cx-lime);
	border: 1px solid var(--cx-lime);
	color: var(--cx-ink);
	padding: clamp(2rem, 5vw, 3.5rem);
	position: relative;
	overflow: hidden;
}
.cx-cta-band::before {
	content: "";
	position: absolute;
	left: -10%;
	top: -60%;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 70%);
	pointer-events: none;
}
.cx-cta-band .cx-h2 { margin-bottom: .5rem; color: var(--cx-ink); }
.cx-cta-band .cx-h2 em { color: var(--cx-ink); text-decoration: underline; text-decoration-color: var(--cx-ember); text-decoration-thickness: 3px; text-underline-offset: .12em; }
.cx-cta-band .cx-lede { margin-bottom: 1.9rem; color: rgba(20, 23, 29, .8); }
.cx-cta-band .cx-lede strong { color: var(--cx-ink); }
.cx-cta-band .cx-btn--volt { background: var(--cx-ink); border-color: var(--cx-ink); color: var(--cx-cream); }
.cx-cta-band .cx-btn--volt:hover { background: var(--cx-cream); border-color: var(--cx-cream); color: var(--cx-ink); }
.cx-cta-band .cx-btn--ghost { border-color: rgba(20, 23, 29, .4); color: var(--cx-ink); }
.cx-cta-band .cx-btn--ghost:hover { border-color: var(--cx-ink); background: rgba(255, 255, 255, .45); }
.cx-cta-note {
	font-family: var(--cx-mono);
	font-size: .74rem;
	letter-spacing: .1em;
	color: rgba(20, 23, 29, .72);
	margin-top: 1.2rem;
}

/* section rhythm */
.cx-hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.cx-hero .cx-kicker { margin-bottom: 1.25rem; }
.cx-hero .cx-lede { margin-block: 1.5rem 2rem; }
.cx-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.cx-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.cx-section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.cx-section__head .cx-lede { margin-bottom: 0; }
.cx-services-grid { margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(6, 1fr); }

/* fully clickable cards */
a.cx-card { text-decoration: none; color: inherit; }
a.cx-card.cx-card--volt { color: var(--cx-cream); }
a.cx-card.cx-card--lime { color: var(--cx-ink); }
a.cx-card:hover { border-color: var(--cx-ink); }

/* service includes list */
.cx-includes { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .55rem; max-width: 34rem; }
.cx-includes li { font-size: .95rem; color: var(--cx-slate); padding-left: 1.5rem; position: relative; }
.cx-includes li::before { content: "→"; position: absolute; left: 0; color: var(--cx-ember); font-family: var(--cx-mono); font-size: .85em; top: .12em; }

/* reveal on scroll */
.cx-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--cx-tick), transform .7s var(--cx-tick);
}
.cx-reveal.in-view {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.cx-reveal { opacity: 1; transform: none; }
}

/* count-up numbers */
.cx-num { will-change: contents; }

/* elementor-specific cleanups */
body.cx-elementor .elementor-widget-text-editor { font-family: var(--cx-display); }
body.cx-elementor .elementor-widget-spacer .elementor-spacer-inner { height: auto !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.cx-bento > * { grid-column: 1 / -1; }
	.cx-bento .span-3, .cx-bento .span-4, .cx-bento .span-6, .cx-bento .span-8 { grid-column: span 12; }
	.cx-pipeline { grid-template-columns: 1fr; }
	.cx-stage { border-right: 0; border-bottom: 1px solid var(--cx-line); }
	.cx-stage:last-child { border-bottom: 0; }
	.cx-stage__arrow { display: none; }
}
@media (max-width: 600px) {
	.cx-hero-h1 { letter-spacing: -.025em; }
}

/* ---------- Elementor colour enforcement ---------- */
/* Elementor emits late, generic color rules that beat theme specificity on
   accent text. Re-assert brand accents at high specificity. */
body.cx-elementor .cx-kicker,
body.cx-elementor .cx-kicker::before { color: var(--cx-accent); }
body.cx-elementor .cx-kicker::before { color: var(--cx-ember); }
body.cx-elementor .cx-hero-h1 .cx-volt-word { color: var(--cx-brand); }
body.cx-elementor .cx-hero-h1 .cx-ember-word { color: var(--cx-ember); }
body.cx-elementor .cx-h2 em { color: var(--cx-ember); }
body.cx-elementor .cx-panel__num sup { color: var(--cx-ember); }
body.cx-elementor .cx-card__label { color: var(--cx-accent); }
body.cx-elementor .cx-card__label::before { color: var(--cx-ember); }

/* ==================================================================== */
/*  HX HEADER + FOOTER  (playful studio match — v1, 2026-10-21)          */
/*  Restyles the block-theme header/footer parts to the homepage hx-      */
/*  language: 2px ink borders, offset shadows, lime/ember blocks, pills.  */
/* ==================================================================== */

/* ---------- HEADER ---------- */
/* The block-theme wraps the header in a short .wp-block-template-part, so a
   sticky element inside it can never travel. Make the WRAPPER sticky instead. */
.wp-block-template-part:has(> .site-header) {
	position: sticky;
	top: 0;
	z-index: 9500;
	transition: box-shadow .25s var(--cx-tick), background-color .25s var(--cx-tick), border-color .25s var(--cx-tick);
}
.admin-bar .wp-block-template-part:has(> .site-header) { top: 32px; }
.wp-block-template-part:has(> .site-header).is-scrolled {
	box-shadow: 0 10px 40px -24px rgba(20,23,29,.35);
	backdrop-filter: saturate(120%) blur(6px);
	background: color-mix(in srgb, var(--cx-cream) 94%, transparent);
}

.site-header.site-header {
	position: relative;
	z-index: 9500;
	background: var(--cx-cream);
	border-bottom: 2px solid var(--cx-ink) !important;
	padding-block: 0.65rem !important;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem) !important;
	box-shadow: 0 6px 0 -4px rgba(20, 23, 29, .08);
}

.cx-header-inner {
	display: grid !important;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	gap: clamp(0.4rem, 1.8vw, 1.25rem);
}

/* logo left - closer to nav */
.site-header .cx-logo {
	grid-column: 1 / 2;
	justify-self: start;
	margin: 0 !important;
	padding-inline-end: clamp(0.2rem, 0.8vw, 0.5rem);
	align-self: center;
}
.site-header .cx-logo a {
	align-items: center;
	gap: .6rem;
	line-height: 1;
	display: inline-flex;
}
.site-header .cx-wordmark {
	display: block;
	height: 25px;
	width: auto;
	max-width: 196px;
}
@media (prefers-reduced-motion: no-preference) {
	.site-header .cx-logo a:hover { transform: translateY(-1px) rotate(-.5deg); }
}
.site-header .cx-logo a::after {
	content: "";
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--cx-lime);
	border: 2px solid var(--cx-ink);
	display: inline-block;
	transition: transform .25s var(--cx-tick);
}
.site-header .cx-logo a:hover::after { transform: scale(1.35) rotate(20deg); }

/* nav center - closer to logo */
.site-header nav {
	grid-column: 2 / 3;
	justify-self: start;
	margin-inline: 0 !important;
}
.site-header nav a.wp-block-navigation-item__content {
	font-family: var(--cx-mono);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cx-ink);
	padding: .45em .85em;
	border-radius: 999px;
	border: 2px solid transparent;
	background-image: none !important;
	position: relative;
	transition: background-color .18s var(--cx-tick), border-color .18s var(--cx-tick), transform .18s var(--cx-tick);
}
.site-header nav a.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: .85em; right: .85em; bottom: .35em;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cx-lime), transparent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .2s var(--cx-tick);
	opacity: .9;
}
.site-header nav a.wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
.site-header nav a.wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--cx-lime) 60%, transparent);
	border-color: color-mix(in srgb, var(--cx-ink) 20%, transparent);
	transform: translateY(-1px);
	color: var(--cx-ink);
}
.site-header nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
	background: var(--cx-ink);
	color: var(--cx-cream);
	border-color: var(--cx-ink);
}
.site-header nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"]::after { display: none; }

/* CTA right - push to far end */
.site-header .wp-block-buttons {
	grid-column: 3 / 4;
	justify-self: end;
	margin-inline-start: 0 !important;
}
.site-header .cx-header-cta.wp-element-button {
	background: var(--cx-ember) !important;
	color: #fff !important;
	border: 2px solid var(--cx-ink) !important;
	border-radius: 999px !important;
	box-shadow: 4px 4px 0 var(--cx-ink);
	padding: .6em 1.25em !important;
	font-family: var(--cx-mono);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	transition: transform .18s var(--cx-tick), box-shadow .18s var(--cx-tick), background-color .18s var(--cx-tick);
}
.site-header .cx-header-cta.wp-element-button:hover {
	background: var(--cx-ink) !important;
	color: var(--cx-lime) !important;
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 var(--cx-ink);
	border-color: var(--cx-ink) !important;
}

/* mobile menu button → bordered pill, not floating */
.site-header .wp-block-navigation__responsive-container-open {
	border: 2px solid var(--cx-ink);
	border-radius: 12px;
	box-shadow: 3px 3px 0 var(--cx-ink);
	background: var(--cx-cream);
	padding: .4rem;
	color: var(--cx-ink);
	transition: transform .18s var(--cx-tick), box-shadow .18s var(--cx-tick), background-color .18s var(--cx-tick);
}
.site-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--cx-lime);
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--cx-ink);
}
/* open mobile overlay styling */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--cx-cream) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--cx-display);
	font-size: 1.6rem !important;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -.02em;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	border: 2px solid var(--cx-ink);
	border-radius: 12px;
	box-shadow: 3px 3px 0 var(--cx-ink);
	background: var(--cx-cream);
}

@media (max-width: 900px) {
	.site-header .cx-logo a::after { display: none; }
}

/* ---------- FOOTER ---------- */
.site-footer.site-footer {
	position: relative;
	background: var(--cx-cream) !important;
	color: var(--cx-ink) !important;
	border-top: 2px solid var(--cx-ink) !important;
	padding-top: clamp(2.5rem, 6vw, 4.5rem) !important;
	padding-bottom: clamp(1.5rem, 4vw, 2.5rem) !important;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem) !important;
	overflow: hidden;
}
/* big soft lime blob in the corner */
.site-footer.site-footer::before {
	content: "";
	position: absolute;
	right: -80px; bottom: -120px;
	width: 320px; height: 320px;
	background: var(--cx-lime);
	border-radius: 50%;
	opacity: .55;
	pointer-events: none;
}
/* ember dashes rule at the top */
.site-footer.site-footer::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 6px;
	background-image: repeating-linear-gradient(90deg, var(--cx-ember) 0 22px, transparent 22px 44px);
	opacity: .9;
}
.site-footer > .wp-block-group {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}
.site-footer nav a.wp-block-navigation-item__content,
.site-footer a {
	color: var(--cx-ink);
	text-decoration: none;
	border-radius: 999px;
	padding: .25em .5em;
	transition: background-color .18s var(--cx-tick), transform .18s var(--cx-tick), color .18s var(--cx-tick);
}
.site-footer nav a.wp-block-navigation-item__content:hover,
.site-footer a:hover {
	background: color-mix(in srgb, var(--cx-lime) 70%, transparent);
	transform: translateY(-1px);
	color: var(--cx-ink);
}
.site-footer .cx-footer-sticker {
	background: var(--cx-lime);
	border: 2px solid var(--cx-ink);
	border-radius: 999px;
	padding: .4em .9em;
	box-shadow: 4px 4px 0 var(--cx-ink);
	font-family: var(--cx-mono);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .72rem;
	line-height: 1.1;
	display: inline-flex;
	gap: .5em;
	align-items: center;
	position: relative;
}
.site-footer .cx-footer-sticker::before {
	content: "";
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--cx-cream);
	border: 2px solid var(--cx-ink);
}

/* wordmark a touch bolder */
.site-footer img { height: 30px; }

/* the standing line gets display type + a lime highlight */
.site-footer p {
	max-width: 46ch;
	line-height: 1.5;
}
.site-footer p strong { color: var(--cx-ink); }

/* footer nav → pill tag links */
.site-footer nav a.wp-block-navigation-item__content {
	font-family: var(--cx-mono);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cx-ink) !important;
	padding: .42em .8em;
	border: 2px solid var(--cx-ink);
	border-radius: 999px;
	background: var(--cx-cream);
	background-image: none !important;
	box-shadow: 2px 2px 0 var(--cx-ink);
	transition: transform .18s var(--cx-tick), box-shadow .18s var(--cx-tick), background-color .18s var(--cx-tick);
}
.site-footer nav a.wp-block-navigation-item__content:hover {
	background: var(--cx-ember);
	color: #fff !important;
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--cx-ink);
}

/* email link → ink with lime marker underline */
.site-footer a[href^="mailto:"] {
	color: var(--cx-ink);
	text-decoration: none;
	background: linear-gradient(transparent 62%, var(--cx-lime) 62%);
	background-size: 100% .5em;
	background-repeat: no-repeat;
	background-position: 0 .72em;
	font-weight: 600;
	transition: background-size .2s var(--cx-tick);
}
.site-footer a[href^="mailto:"]:hover { background-size: 100% 100%; }

/* back-to-top button (added in markup) */
.cx-top {
	position: absolute;
	right: clamp(1rem, 4vw, 2.5rem);
	bottom: clamp(1rem, 4vw, 2rem);
	z-index: 2;
	width: 52px; height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--cx-ink);
	border-radius: 50%;
	background: var(--cx-lime);
	color: var(--cx-ink);
	box-shadow: 4px 4px 0 var(--cx-ink);
	cursor: pointer;
	transition: transform .18s var(--cx-tick), box-shadow .18s var(--cx-tick), background-color .18s var(--cx-tick);
}
.cx-top:hover {
	background: var(--cx-ink);
	color: var(--cx-lime);
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 var(--cx-ink);
}
.cx-top svg { width: 20px; height: 20px; }
@media (max-width: 600px) { .cx-top { width: 46px; height: 46px; } }

/* footer sticker badge */
.cx-foot-sticker {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--cx-mono);
	font-weight: 600;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .5rem 1rem;
	border: 2px solid var(--cx-ink);
	border-radius: 999px;
	background: var(--cx-lime);
	color: var(--cx-ink);
	box-shadow: 3px 3px 0 var(--cx-ink);
	transform: rotate(-1.5deg);
	margin-bottom: 1.2rem;
}

@media (prefers-reduced-motion: reduce) {
	.site-header .cx-header-cta.wp-element-button,
	.site-header nav a.wp-block-navigation-item__content,
	.site-footer nav a.wp-block-navigation-item__content,
	.cx-top { transition: none; }
}

/* dark-mode (page-level .hx-dark on <html> or body) */
.hx-dark .site-header.site-header,
.hx-dark .site-footer.site-footer { background: #14171d !important; color: #f4f1ea !important; border-color: #f4f1ea !important; }
.hx-dark .site-header nav a.wp-block-navigation-item__content,
.hx-dark .site-footer nav a.wp-block-navigation-item__content { color: #f4f1ea !important; border-color: #f4f1ea; background: transparent; box-shadow: 2px 2px 0 #f4f1ea; }
.hx-dark .site-header .cx-logo a::after { border-color: #f4f1ea; }
.hx-dark .site-footer.site-footer::before { opacity: .28; }