/* ============================================================
   Dwyesh — Zeyna showcase-void elements, SCOPED.
   Global site typography stays Leksa's (General Sans via the
   XWZar alias in fonts.css). The Zeyna stack below applies ONLY
   to: the side menu panel, and the About (180) / Contact (188)
   void pages.
   Zeyna spec: headings helvetica-lt-pro · accent serif
   benton-modern-display · mono "DM Mono" · red #DB0000.
   ============================================================ */

:root {
	--zx-red: #DB0000;
	--zx-heading: helvetica-lt-pro, Arial, Helvetica, sans-serif;
	--zx-serif: benton-modern-display, Georgia, serif;
	--zx-mono: "DM Mono", "B612 Mono", monospace;
	/* Dwyesh brand stack (site-wide; side menu + void pages keep the Zeyna stack) */
	--dw-nav: 'Sundown', 'XWZar', sans-serif;
	--dw-logo: 'Taki', 'XWZar', sans-serif;
	--dw-display: 'Wild Trave', 'XWZar', sans-serif;
	--dw-body: 'Tenquira', 'XWZar', Arial, sans-serif;
}

/* ============================================================
   SITE-WIDE BRAND TYPOGRAPHY (everything except the side menu
   and the two void pages, which keep their own stacks)
   ============================================================ */
body:not(.page-id-180):not(.page-id-188) {
	font-family: var(--dw-body);
}
body:not(.page-id-180):not(.page-id-188) :is(h1, h2, h3, h4, .text-h1, .text-h2, .text-h3, .text-h4):not(.site--menu *) {
	font-family: var(--dw-display);
	font-weight: 400;
}
/* header + footer navigation — Sundown, ALL CAPS, tracked out */
.site-header .main-navigation a,
.site-header .main-navigation.classic a,
.site-footer [data-widget_type*="penavmenu"] a,
.site-footer .main-menu a {
	font-family: var(--dw-nav) !important;
	text-transform: uppercase;
	letter-spacing: .08em;
}
/* header pill button: same treatment on every page (About included) */
.site-header [data-widget_type="pebutton.default"] .pe--button,
.site-header [data-widget_type="pebutton.default"] .pe--button a {
	font-family: var(--dw-nav) !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 14px !important;
}
/* footer column titles + copy follow the caps system */
.site-footer :is(h3, h4, h5, h6, .text-h3, .text-h4, .text-h5, .text-h6),
.site-footer .text-wrapper .text-p {
	text-transform: uppercase;
	letter-spacing: .06em;
}
/* footer identity: same fonts on EVERY page (void pages included);
   sized so DWYESH stays on one line in Wild Trave */
.site-footer :is(.text-h1, h1, .text-h2, h2) {
	font-family: var(--dw-display) !important;
	text-transform: uppercase;
	font-size: clamp(56px, 8.5vw, 118px) !important;
	line-height: 1.05 !important;
	white-space: nowrap;
}
.site-footer, .site-footer p, .site-footer input {
	font-family: var(--dw-body);
}
.site-footer [data-widget_type*="penavmenu"] a { font-family: var(--dw-nav) !important; }
/* footer hover: brand red, seamless */
.site-footer a, .site-footer .pe--button, .site-footer .menu--link {
	transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.site-footer a:hover, .site-footer .menu--link:hover,
.site-footer .pe--button:hover, .site-footer .pe--button:hover a {
	color: var(--zx-red) !important;
}
/* footer colour accents: red column titles + red identity moments */
.site-footer .elementor-element-7d38df4 .text-p,
.site-footer .elementor-element-4feaffc .text-p,
.site-footer .elementor-element-2a4f199 .text-p {
	color: var(--zx-red) !important;
}
.site-footer [data-widget_type="pebutton.default"] .pe--button,
.site-footer [data-widget_type="pebutton.default"] .pe--button a {
	color: var(--zx-red);
}
.site-footer :is(.text-h1, h1):hover {
	color: var(--zx-red);
	transition: color .3s ease;
}

/* newsletter submit: red sweep on hover */
.site-footer :is(input[type="submit"], button[type="submit"], .wpcf7-submit) {
	transition: background-color .25s ease, color .25s ease;
}
.site-footer :is(input[type="submit"], button[type="submit"], .wpcf7-submit):hover {
	background-color: var(--zx-red) !important;
	color: #fff !important;
}

/* The footer carries its own rounded top corners now (below), so painting
   `.site` is safe again — and required: with page transitions off there is
   no `.pt--wrapper` background for mix-blend-mode to composite against.
   On the void pages `.site` must carry the FULL dark-red glow background,
   not just the inherited black, or the About page loses its red. */
.site { background-color: inherit; }
body.page-id-180 .site, body.page-id-188 .site {
	background-color: hsla(59, 0%, 0%, 1) !important;
	background-image:
		radial-gradient(at 0% 0%, hsla(6, 66%, 26%, 1) 0px, transparent 50%),
		radial-gradient(at 100% 0%, hsla(6, 66%, 26%, 1) 0px, transparent 50%) !important;
	background-attachment: fixed;
}

/* ---- FOOTER: simple curved top edges, exactly as asked ---- */
.site-footer { background: transparent !important; }
.site-footer > .elementor > .e-con:first-child,
.site-footer .elementor-element-b6ab7a8 {
	border-top-left-radius: 50px !important;
	border-top-right-radius: 50px !important;
	overflow: hidden;
}

/* /work/ archive: the fixed corner texts blend over the cards.
   (The blend must sit on the position:fixed containers themselves —
   a fixed ancestor isolates any blend set on its children.) */
body.page-id-11717 .elementor-element-304393c,
body.page-id-11717 .elementor-element-4b9fcd1 {
	mix-blend-mode: difference;
}
body.page-id-11717 .elementor-element-304393c *,
body.page-id-11717 .elementor-element-4b9fcd1 * {
	color: #fff !important;
}
/* the side menu keeps Zeyna — re-assert to be safe */
.site--menu .main-menu .menu--link,
.site--menu ul.menu > li > a { font-family: var(--zx-heading) !important; }

/* ============================================================
   HEADER BLEND (kodemedia-style): the whole fixed header blends
   with `difference` against whatever scrolls beneath it.
   Children can't blend past the header's stacking context, so
   the blend must sit on the header root itself; everything in
   the header is painted white/light and lets the blend invert.
   ============================================================ */
.site-header {
	mix-blend-mode: difference;
	background: transparent !important;
	background-color: transparent !important;
}
/* difference-blend needs white paint: always use the white logo variants */
.site-header .site-branding img.main__logo,
.site-header .site-branding img.sticky__main__logo { display: none !important; }
.site-header .site-branding img.secondary__logo { display: block !important; }
.site-header .site-branding .sticky-logo img.sticky__secondary__logo { display: block !important; }

/* text logo (JS swaps the img for staggered letters, kodemedia-style:
   starts huge at page top, JS shrinks it into the header on scroll) */
.site-header .site-logo,
.site-header .site-branding {
	width: auto !important;
	max-width: none !important;
	overflow: visible !important;
}
.site-header .site-logo a.dw-logo {
	font-family: var(--dw-logo) !important;
	font-size: 24px;
	letter-spacing: .06em;
	color: #fff !important;
	display: inline-flex;
	overflow: hidden;
	line-height: 1.1;
	white-space: nowrap;
	text-decoration: none !important;
	transform-origin: left top;
	transition: font-size .9s cubic-bezier(.65, 0, .25, 1);
}
/* intro state: big wordmark; .dw-settle animates it into the header */
.site-header .site-logo a.dw-logo.dw-big { font-size: clamp(48px, 8vw, 96px); }
.site-header .site-logo a.dw-logo.dw-settle { font-size: 24px; }
.dw-logo .dw-l {
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
.dw-logo.dw-in .dw-l {
	transform: translateY(0);
	opacity: 1;
}

/* scroll color-fill words (About statements): dim → lit */
.zx-fill .zxw {
	color: rgba(255, 255, 255, .22) !important;
	transition: color .25s ease;
}
.zx-fill .zxw.zxw-lit {
	color: #fff !important;
}
.site-header .main-navigation.classic a,
.site-header .main-navigation a {
	color: #fff !important;
}
.site-header .main-navigation.classic a:hover,
.site-header .main-navigation.classic .current-menu-item > a {
	color: #c9c9c9 !important;
}
/* void pages already run a white-on-dark header — blend keeps it white there */
/* the side menu panel renders inside the header: drop the blend while it is
   open so the red panel keeps its true #DB0000 */
.site-header:has(.site--nav.zx-open),
.site-header:has(.site--menu.active) {
	mix-blend-mode: normal;
}
/* void pages: header stays pure white on the dark canvas (no cyan tint) */
body.page-id-180 .site-header, body.page-id-188 .site-header {
	mix-blend-mode: normal;
}

.zx-serif { font-family: var(--zx-serif) !important; }

/* ---- corner brackets (exact recipe from the live demo) ---- */
.zx-corners {
	background-image:
		linear-gradient(to right, var(--zx-c, #000) 1px, transparent 1px),
		linear-gradient(to right, var(--zx-c, #000) 1px, transparent 1px),
		linear-gradient(to left, var(--zx-c, #000) 1px, transparent 1px),
		linear-gradient(to left, var(--zx-c, #000) 1px, transparent 1px),
		linear-gradient(var(--zx-c, #000) 1px, transparent 1px),
		linear-gradient(var(--zx-c, #000) 1px, transparent 1px),
		linear-gradient(to top, var(--zx-c, #000) 1px, transparent 1px),
		linear-gradient(to top, var(--zx-c, #000) 1px, transparent 1px);
	background-size: var(--zx-cs, 15px) var(--zx-cs, 15px);
	background-position: 0 0, 0 100%, 100% 0, 100% 100%, 0 0, 100% 0, 0 100%, 100% 100%;
	background-repeat: no-repeat;
}

/* ============================================================
   SIDE MENU — exact Zeyna panel (the ONLY place outside the two
   void pages where Zeyna fonts apply)
   ============================================================ */
.site--nav.nav--popup .site--menu {
	width: 626px !important;
	max-width: 100vw;
	background: var(--zx-red) !important;
	padding: 10px !important;
	border-radius: 0 !important;
}
@media (max-width: 767px) {
	.site--nav.nav--popup .site--menu { width: 100vw !important; }
}

.site--menu .main-menu .menu--link,
.site--menu ul.menu > li > a {
	font-family: var(--zx-heading) !important;
	font-size: 60px !important;
	line-height: 66px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	color: #000 !important;
	font-style: normal;
	opacity: 1 !important;
	transition: color .2s ease;
}
@media (max-width: 767px) {
	.site--menu .main-menu .menu--link,
	.site--menu ul.menu > li > a { font-size: 34px !important; line-height: 40px !important; }
}
.site--menu .main-menu li:hover > .menu--link,
.site--menu .main-menu .current-menu-item > .menu--link,
.site--menu ul.menu > li:hover > a,
.site--menu ul.menu > li.current-menu-item > a {
	font-family: var(--zx-serif) !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em;
}
.site--menu .main-menu li,
.site--menu ul.menu > li { margin: 0 !important; padding: 0 !important; }

/* panel text + buttons: black on red, no hover-slide ghosts */
.site--menu .pe--text--wrapper, .site--menu .pe--text--wrapper p,
.site--menu .pe--button, .site--menu .pe--button a, .site--menu a { color: #000; }
.site--menu .pb__hover { display: none !important; }

/* START A PROJECT — dashed mono box */
.site--menu .zx-cta .pe--button {
	font-family: var(--zx-mono) !important;
	font-size: 12px !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	border: 1px dashed #000 !important;
	border-radius: 0 !important;
	padding: 15px 25px !important;
	background: transparent !important;
	display: inline-block;
	overflow: hidden;
}
.site--menu .zx-cta .pe--button a { padding: 0 !important; }
.site--menu .zx-cta .pe--button *,
.site--menu :is(.zx-contact, .zx-social) .pe--button * {
	background: transparent !important;
	background-color: transparent !important;
}

/* contact + social rows — readable, single line, hover keeps contrast */
.site--menu .zx-contact { flex-wrap: wrap; }
.site--menu .zx-contact .pe--button,
.site--menu .zx-contact .pe--button a {
	font-family: var(--zx-heading) !important;
	font-size: 19px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	color: #000 !important;
	white-space: nowrap;
	background: transparent !important;
	opacity: 1 !important;
}
.site--menu .zx-social a, .site--menu .zx-social .pe--button, .site--menu .zx-social {
	font-family: var(--zx-mono) !important;
	font-size: 12px !important;
	text-transform: uppercase;
	color: #000 !important;
	white-space: nowrap;
	background: transparent !important;
	opacity: 1 !important;
}
.site--menu .zx-contact .pe--button:hover,
.site--menu .zx-contact .pe--button:hover a,
.site--menu .zx-social .pe--button:hover,
.site--menu .zx-social .pe--button:hover a {
	color: #fff !important;
	opacity: 1 !important;
}
/* neutralize theme marquee/slide animations + pill backgrounds inside panel rows */
.site--menu .zx-contact .pb__main, .site--menu .zx-social .pb__main {
	transform: none !important;
	position: static !important;
}
.site--menu :is(.zx-contact, .zx-social) .pe--button :is(.pb__main, .pe--button--wrapper, span) {
	background: transparent !important;
	background-color: transparent !important;
}

/* ---- trigger: original hamburger when closed; CLOSE text when open ---- */
.site--nav.nav--popup.zx-open .menu--toggle .toggle-line { display: none !important; }
.site--nav.nav--popup.zx-open .menu--toggle,
.site--nav.nav--popup.zx-open .menu--toggle::before,
.site--nav.nav--popup.zx-open .menu--toggle.has--bg,
.site--nav.nav--popup.zx-open .menu--toggle.has--bg::before {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}
.site--nav.nav--popup.zx-open .menu--toggle {
	width: auto !important;
	height: auto !important;
	border-radius: 0 !important;
	padding: 15px 10px !important;
}
.site--nav.nav--popup.zx-open .menu--toggle::after {
	content: "CLOSE";
	font-family: var(--zx-mono);
	font-size: 12px;
	letter-spacing: .06em;
	color: #000;
	text-transform: uppercase;
	pointer-events: none;
}
.site--nav.nav--popup.zx-open .menu--toggle--wrap {
	background-image:
		linear-gradient(to right, #000 1px, transparent 1px),
		linear-gradient(to right, #000 1px, transparent 1px),
		linear-gradient(to left, #000 1px, transparent 1px),
		linear-gradient(to left, #000 1px, transparent 1px),
		linear-gradient(#000 1px, transparent 1px),
		linear-gradient(#000 1px, transparent 1px),
		linear-gradient(to top, #000 1px, transparent 1px),
		linear-gradient(to top, #000 1px, transparent 1px);
	background-size: 5px 5px;
	background-position: 0 0, 0 100%, 100% 0, 100% 100%, 0 0, 100% 0, 0 100%, 100% 100%;
	background-repeat: no-repeat;
	padding: 2px;
	z-index: 100;
}

/* ============================================================
   VOID PAGES (About 180 / Contact 188) — Zeyna dark canvas
   ============================================================ */
body.page-id-180, body.page-id-188 {
	background-color: hsla(59, 0%, 0%, 1) !important;
	background-image:
		radial-gradient(at 0% 0%, hsla(6, 66%, 26%, 1) 0px, transparent 50%),
		radial-gradient(at 100% 0%, hsla(6, 66%, 26%, 1) 0px, transparent 50%) !important;
	background-attachment: fixed;
	color: #fff;
}
body.page-id-180 .site-main, body.page-id-188 .site-main,
body.page-id-180 .site-content, body.page-id-188 .site-content {
	background: transparent !important;
}
/* Zeyna typography on the void pages only */
body.page-id-180 .site-main, body.page-id-188 .site-main {
	font-family: var(--zx-mono);
}
body.page-id-180 .site-main :is(h1,h2,h3,h4,h5,h6,.text-h1,.text-h2,.text-h3,.text-h4,.text-h5,.text-h6),
body.page-id-188 .site-main :is(h1,h2,h3,h4,h5,h6,.text-h1,.text-h2,.text-h3,.text-h4,.text-h5,.text-h6) {
	font-family: var(--zx-heading) !important;
}
body.page-id-180 .site-main :is(.pe--text--wrapper, .pe--text--wrapper *, h1, h2, h3, h4, h5, h6, p, li, td, th, span, a, .pe--table, .pe--team--member, figcaption):not(.zx-counter):not(.zx-counter *),
body.page-id-188 .site-main :is(.pe--text--wrapper, .pe--text--wrapper *, h1, h2, h3, h4, h5, h6, p, li, td, th, span, a, .pe--table, label, figcaption) {
	color: #fff !important;
}
body.page-id-180 .site-main :is(p, span, li, td, th, label),
body.page-id-188 .site-main :is(p, span, li, td, th, label) {
	font-family: var(--zx-mono);
}
/* header chrome on dark canvas */
body.page-id-180 .site-header, body.page-id-188 .site-header,
body.page-id-180 .site-header a, body.page-id-188 .site-header a,
body.page-id-180 .site--nav, body.page-id-188 .site--nav,
body.page-id-180 .menu--toggle, body.page-id-188 .menu--toggle {
	color: #fff !important;
}
/* (logo variants handled globally: white logos + header blend) */
body.page-id-180 .elementor-divider-separator, body.page-id-188 .elementor-divider-separator,
body.page-id-180 hr, body.page-id-188 hr {
	border-color: var(--zx-red) !important;
}

/* counters — big red, never wrap */
body.page-id-180 .zx-counter, body.page-id-180 .zx-counter * {
	color: var(--zx-red) !important;
	font-family: var(--zx-heading) !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	word-break: keep-all !important;
	font-size: clamp(110px, 16vw, 230px) !important;
}

/* giant display texts blend into imagery (Rahul's blend-mode idea) */
body.page-id-180 .site-main .text-h1,
body.page-id-180 .site-main h1,
body.page-id-188 .site-main .text-h1,
body.page-id-188 .site-main h1 {
	mix-blend-mode: difference;
}

/* dashed buttons on void pages — precise box, no ghosts */
.zx-dashed .pe--button {
	font-family: var(--zx-mono) !important;
	font-size: 12px !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	border: 1px dashed var(--zx-red) !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 15px 25px !important;
	color: #fff !important;
	overflow: hidden;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	transition: background .2s ease, color .2s ease;
}
.zx-dashed .pe--button:hover { background: var(--zx-red) !important; color: #fff !important; }
.zx-dashed .pe--button a { padding: 0 !important; color: inherit !important; }
.zx-dashed .pb__hover { display: none !important; }

/* team grid duotone */
body.page-id-180 [data-widget_type="peteammember.default"] img {
	filter: grayscale(1) brightness(.81) contrast(1.25);
}
body.page-id-180 [data-widget_type="peteammember.default"] { color: #fff; }

/* client wordmark cards */
body.page-id-180 [data-widget_type="peclients.default"] img {
	max-height: 220px;
	object-fit: contain;
}

/* awards table */
body.page-id-180 [data-widget_type="petable.default"] :is(td, th, tr) {
	color: #fff;
	border-color: rgba(255, 255, 255, .2);
}
body.page-id-180 [data-widget_type="petable.default"] tr:hover td { color: var(--zx-red); }

/* ---- contact form: outlined, boxed, mono (Zeyna style) ---- */
body.page-id-188 .site-main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select) {
	border: 1px solid rgba(255, 255, 255, .35) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #fff !important;
	font-family: var(--zx-mono) !important;
	font-size: 13px !important;
	padding: 14px 16px !important;
	width: 100%;
	transition: border-color .2s ease;
}
body.page-id-188 .site-main :is(input, textarea):focus {
	border-color: var(--zx-red) !important;
	outline: none !important;
}
body.page-id-188 .site-main ::placeholder {
	color: rgba(255, 255, 255, .45) !important;
	font-family: var(--zx-mono) !important;
	text-transform: uppercase;
	font-size: 12px;
}
body.page-id-188 .site-main :is(input[type="submit"], button[type="submit"], .wpcf7-submit) {
	font-family: var(--zx-mono) !important;
	font-size: 12px !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	border: 1px dashed var(--zx-red) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #fff !important;
	padding: 15px 30px !important;
	cursor: pointer;
	transition: background .2s ease;
}
body.page-id-188 .site-main :is(input[type="submit"], .wpcf7-submit):hover {
	background: var(--zx-red) !important;
}
body.page-id-188 .wpcf7-form p, body.page-id-188 .wpcf7-form label {
	font-family: var(--zx-mono) !important;
	color: #fff;
}