/* ============================================================
   Dwyessh, 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;
	/* Dwyessh 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 DWYESSH stays on one line in Wild Trave.
   The original clamp() is now wrapped in min(..., 11vw). 7 letters run ~7.66x
   the font-size in Wild Trave, so the flat 56px floor overflowed the footer's
   clip edge below ~500px and cut the final H clean off ("DWYESS"). The 11vw
   cap only bites under ~500px, where it scales the wordmark to fit down to
   320px; at every width where 56px already fitted the size is unchanged. */
.site-footer :is(.text-h1, h1, .text-h2, h2) {
	font-family: var(--dw-display) !important;
	text-transform: uppercase;
	font-size: min(clamp(56px, 8.5vw, 118px), 11vw) !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;
}

/* Footer row fit, 7-letter wordmark.
   The wordmark and the Instagram handle share one row. At 7 letters the
   wordmark grew wide enough to collide with the handle between roughly 768px
   and 1439px (worst at 1280 and 1366, where the final H touched the @).
   Below 768px the handle is the problem instead: it is a fixed 32px in
   Elementor and the footer's overflow clipping cut it off.
   Measured on the live site: at 1280px these values leave a 277px gap. */
@media (min-width: 768px) and (max-width: 1439px) {
	.site-footer :is(.text-h1, h1, .text-h2, h2) {
		font-size: 6.8vw !important;
	}
	.site-footer [data-widget_type="pebutton.default"] .pe--button,
	.site-footer [data-widget_type="pebutton.default"] .pe--button * {
		font-size: clamp(16px, 2.2vw, 32px) !important;
	}
}
@media (max-width: 767px) {
	.site-footer [data-widget_type="pebutton.default"] .pe--button,
	.site-footer [data-widget_type="pebutton.default"] .pe--button * {
		font-size: clamp(15px, 4.5vw, 32px) !important;
	}
}

/* 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;
}

/* ============ MOBILE PASS (Aug 2026) ============ */
@media (max-width: 550px) {

	/* Big display type: scale down so titles like MOXIE, (2012-2026)
	   and WANNA GET IN TOUCH stay on screen. The footer wordmark keeps
	   its own more-specific rule. */
	.text-h1 { font-size: clamp(42px, 13vw, 64px) !important; }
	.text-h2 { font-size: clamp(30px, 10.5vw, 52px) !important; }
	.project-hero .text-h1, .project-hero .text-h2 { line-height: 1.05 !important; }

	/* Work archive: card was 60vw (tiny with dead space around it),
	   and title + category collided side by side. */
	.elementor-element-444f295 .showcase-project { width: 80vw !important; }
	.elementor-element-444f295 .project-meta {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 4px !important;
	}

	/* About: the word-reveal caps paragraph rendered one word per line
	   for several screens. Phone-size it. */
	body.page-id-180 .zx-fill {
		font-size: clamp(22px, 7.8vw, 30px) !important;
		line-height: 1.3 !important;
	}

	/* ---- portfolio hero: swipeable set, contained ----
	   The hero track is ~5000px wide. Nothing in its ancestor chain clipped
	   it, so the whole page could be dragged sideways on a phone. */
	.project-hero,
	.project-page,
	.site-main {
		overflow-x: hidden;
		overflow-x: clip;
	}

	.project--image--gallery.dw-swipe {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 20px;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
	}
	.project--image--gallery.dw-swipe::-webkit-scrollbar { display: none; }
	.project--image--gallery.dw-swipe .project--image--gallery--wrapper {
		transform: none !important;
		width: max-content !important;
		gap: 12px !important;
		padding-right: 20px;
	}
	.project--image--gallery.dw-swipe .project--gallery--image {
		flex: 0 0 auto !important;
		scroll-snap-align: center;
		width: 86vw !important;
		border-radius: 22px !important;
	}
	.project--image--gallery.dw-swipe .project--gallery--image img {
		width: 100% !important;
		height: 100% !important;
	}

	/* the set gave no sign it could be swiped: label it, and show position */
	.dw-swipe-hint {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 14px 20px 0;
		font-family: var(--dw-nav, var(--zx-mono, monospace));
		font-size: 11px;
		letter-spacing: .16em;
		text-transform: uppercase;
		opacity: .62;
	}
	.dw-swipe-label::before {
		content: "";
		display: inline-block;
		width: 26px;
		height: 1px;
		margin-right: 9px;
		vertical-align: middle;
		background: currentColor;
		animation: dw-swipe-nudge 1.9s ease-in-out infinite;
	}
	.dw-swipe-count b { font-weight: inherit; }
	.dw-swiped .dw-swipe-label::before { animation: none; }
	@keyframes dw-swipe-nudge {
		0%, 100% { transform: translateX(0); opacity: .45; }
		50%      { transform: translateX(7px); opacity: 1; }
	}

	/* Film projects: the source is a 720p frame. Cropping a landscape frame
	   into a tall portrait slot threw away ~70% of its width, so the phone
	   was upscaling ~400 real pixels across the screen. Showing the frame at
	   its own 16:9 keeps every pixel and reads sharp. */
	body:is(.postid-11887, .postid-11888, .postid-11892, .postid-11893) .project--image--gallery.dw-swipe {
		height: auto !important;
	}
	body:is(.postid-11887, .postid-11888, .postid-11892, .postid-11893) .project--image--gallery.dw-swipe .project--gallery--image {
		height: auto !important;
		aspect-ratio: 16 / 9;
	}
	body:is(.postid-11887, .postid-11888, .postid-11892, .postid-11893) .project--image--gallery.dw-swipe .project--image--gallery--wrapper {
		height: auto !important;
		align-items: center;
	}

	/* the theme's "SCROLL SCROLL" cue sat half off the left edge on phones,
	   and it points at a scroll the phone no longer does */
	body.single-portfolio .pb--marquee,
	body.single-portfolio .pb--marquee__inner { display: none !important; }

	/* the hero template hides the project description on phones, so a visitor
	   got a title and nothing that says what the job was. Put it back. */
	body.single-portfolio .project-hero .elementor-element-96f1586 {
		display: block !important;
	}
	body.single-portfolio .project-hero .elementor-element-96f1586 .text-p {
		font-size: 15px !important;
		line-height: 1.55 !important;
		opacity: .78;
	}

	/* meta rows were spread across a fixed-height column (space-between),
	   leaving big dead gaps between Client / Category / Year on a phone */
	body.single-portfolio .project-hero .elementor-element-7ed05dc {
		justify-content: flex-start !important;
		height: auto !important;
		gap: 14px !important;
	}
	body.single-portfolio .project-hero .elementor-element-50df0be {
		height: auto !important;
		padding-bottom: 26px;
	}
}

/* ============ CLIENT LOGO MARQUEE (portfolio pages) ============ */
.dw-marquee {
	--dw-mq-row: 40px;      /* the one baseline every mark is measured against */
	--dw-mq-gap: 68px;
	padding: 70px 0 10px;
	overflow: hidden;
}
.dw-marquee-kicker {
	margin: 0 0 30px;
	padding: 0 6vw;
	font-family: var(--dw-nav, var(--zx-mono, monospace));
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .45;
}
.dw-mq-viewport {
	display: flex;
	width: 100%;
	overflow: hidden;
	contain: content;
	/* barely-there edge softening: enough to stop a hard cut at the bezel,
	   not enough to make a logo look like it blinked out */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
}
.dw-mq-track {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: max-content;
	animation: dw-mq-run 60s linear infinite;   /* JS retimes to a constant px/sec */
	will-change: transform;
}
.dw-marquee:hover .dw-mq-track { animation-play-state: paused; }
@keyframes dw-mq-run {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
.dw-mq-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: var(--dw-mq-row);
	/* margin, never `gap`: the loop halves the track, and only per-item
	   spacing divides evenly into that half */
	margin-right: var(--dw-mq-gap);
}
.dw-mq-item img {
	height: 100%;
	width: auto;
	max-width: none;          /* squashing wide marks was what made them collide */
	object-fit: contain;
	opacity: .9;
	transition: opacity .3s ease;
}
.dw-mq-item:hover img { opacity: 1; }
.dw-mq-word {
	font-family: var(--dw-nav, var(--zx-mono, monospace));
	font-size: 16px;
	letter-spacing: .13em;
	line-height: 1;
	white-space: nowrap;
	opacity: .62;
	transition: opacity .3s ease;
}
.dw-mq-word:hover { opacity: 1; }
@media (max-width: 900px) {
	.dw-marquee { --dw-mq-row: 34px; --dw-mq-gap: 52px; }
	.dw-mq-word { font-size: 15px; }
}
@media (max-width: 550px) {
	.dw-marquee { --dw-mq-row: 28px; --dw-mq-gap: 40px; padding: 48px 0 6px; }
	.dw-marquee-kicker { margin-bottom: 22px; }
	.dw-mq-word { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.dw-mq-track { animation: none; }
	.dw-mq-viewport { overflow-x: auto; }
}

/* ============ FOOTER ON PHONES ============
   The desktop footer is a wide multi-column layout. Stacked into one narrow
   column it read as a long ragged left-aligned list, so on phones it becomes
   a centred masthead (wordmark, handle, one-line invite, email) over a
   two-by-two menu block. */
@media (max-width: 550px) {

	/* masthead: wordmark over handle, both centred */
	.site-footer .elementor-element-610a2a7 {
		flex-direction: column !important;
		align-items: center !important;
		gap: 10px;
	}
	.site-footer .elementor-element-d7b116b,
	.site-footer .elementor-element-277b38d {
		width: 100% !important;
		align-items: center !important;
	}
	.site-footer .elementor-element-ed1d227,
	.site-footer .elementor-element-ed1d227 *,
	.site-footer .elementor-element-965f9fc,
	.site-footer .elementor-element-965f9fc * {
		text-align: center !important;
		justify-content: center !important;
	}
	.site-footer .elementor-element-965f9fc .pb--button { margin: 0 auto; }

	/* the invite line was capped at 75% width, which pushed it to three
	   ragged lines in a column that is already narrow */
	.site-footer .elementor-element-30bc0c0 { align-items: center !important; }
	.site-footer .elementor-element-7a4daaf {
		width: 100% !important;
		text-align: center !important;
	}
	.site-footer .elementor-element-7a4daaf .text-p {
		text-align: center !important;
		font-size: 15px !important;
	}

	/* email + submit on one row, centred, so the button is never orphaned */
	.site-footer .elementor-element-df44907 { width: 100% !important; }
	.site-footer .wpcf7-form {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}
	.site-footer .wpcf7-form .form--field { margin: 0 !important; }
	.site-footer .wpcf7-form .form--field:first-of-type { flex: 1 1 auto; min-width: 0; }
	.site-footer .wpcf7-form .form--field:last-of-type { flex: 0 0 auto; }
	.site-footer .wpcf7-form input[type="email"] {
		width: 100% !important;
		text-align: center;
	}
	.site-footer .wpcf7-form input[type="submit"] {
		width: auto !important;
		padding: 14px 20px !important;
		font-size: 13px !important;
		white-space: nowrap;
	}
	.site-footer .wpcf7-spinner { display: none; }

	/* Menu / Portfolio / Pages as a two-by-two block instead of a long stack */
	.site-footer .elementor-element-d205096 {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 30px 16px;
		align-items: start;
	}
	.site-footer .elementor-element-30bc0c0 { grid-column: 1 / -1; }
	.site-footer .elementor-element-575308c,
	.site-footer .elementor-element-7554f93,
	.site-footer .elementor-element-624022d { width: 100% !important; }
	.site-footer .elementor-element-d205096 .penavmenu .menu--link,
	.site-footer .elementor-element-d205096 .main-navigation a { font-size: 17px !important; }
	/* "PORTFOLIO" broke to a second line once the columns halved */
	.site-footer .elementor-element-7d38df4 .text-wrapper,
	.site-footer .elementor-element-4feaffc .text-wrapper,
	.site-footer .elementor-element-2a4f199 .text-wrapper,
	.site-footer .elementor-element-7d38df4 p,
	.site-footer .elementor-element-4feaffc p,
	.site-footer .elementor-element-2a4f199 p {
		font-size: clamp(18px, 6vw, 26px) !important;
		white-space: nowrap;
	}

	/* bottom strip: copyright, then the three links on one line */
	.site-footer .elementor-element-8c48fb9 {
		flex-direction: column !important;
		align-items: center !important;
		gap: 16px;
	}
	.site-footer .elementor-element-69756f9,
	.site-footer .elementor-element-69756f9 * { text-align: center !important; }
	.site-footer .elementor-element-3a60f65 p {
		font-size: clamp(13px, 4.2vw, 18px) !important;
		white-space: nowrap;          /* keep the credit on one line */
	}
	.site-footer .elementor-element-fab68c9 {
		width: 100% !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 12px;
	}
	.site-footer .elementor-element-312c24f .menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center;
		gap: 16px;
	}
	.site-footer .elementor-element-312c24f .menu-item { margin: 0 !important; }
	.site-footer .elementor-element-312c24f a {
		white-space: nowrap;
		font-size: 11px !important;
		letter-spacing: .08em;
	}
	.site-footer .elementor-element-01bd519 { flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   6.7 — CROP AND READABILITY PASS
   ══════════════════════════════════════════════════════════════════════ */

/* ── Keep faces in frame ───────────────────────────────────────────────
   Project cards letterbox every photo into roughly a 2:1 box. Almost all
   of Dwyesh's shots are portrait (1600x2400), so a centred cover-crop
   keeps a band across the torso and throws the head away: measured at
   32% of the photo surviving on /work/, 27% on the Estee reel. Biasing
   the crop window upward puts that band on the face and hair, which is
   the subject of every one of these images.

   Landscape sources crop at the sides instead, where a vertical offset
   does nothing at all, so the same rule is safe for the film stills. */
.project-image img,
.project-featured-image img,
.project--gallery--image img,
.post-thumbnail img,
.thmb img,
.next-project-section img {
	object-position: 50% 28% !important;
}

/* The rotating tiles on the home page are small and square-ish, so they
   lose less; a gentler lift reads better there. */
.project-wrap .project-image img {
	object-position: 50% 34% !important;
}

/* ── Journal posts ─────────────────────────────────────────────────────
   The body is a pepostfield widget, not Elementor's post-content widget.
   It ran as one slab, 700px wide, ending 10px from the window edge. */
.single-post .elementor-widget-pepostfield .elementor-widget-container {
	max-width: 64ch;
}
.single-post .elementor-widget-pepostfield p {
	margin: 0 0 1.4em;
	line-height: 1.75;
}
.single-post .elementor-widget-pepostfield p:last-child {
	margin-bottom: 0;
}

@media (min-width: 1025px) {
	.single-post .elementor-element-e80d9d8 {
		padding-right: 48px;
	}
}

@media (max-width: 1024px) {
	.single-post .elementor-widget-pepostfield p {
		font-size: 17px;
		line-height: 1.78;
		margin-bottom: 1.3em;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   6.9 — AUDIT FIXES
   ══════════════════════════════════════════════════════════════════════ */

/* ── Contact: the SEE THE WORK button ──────────────────────────────────
   My .zx-dashed rule draws the outer dashed box, but the theme still
   paints its own rounded pill on .pb__main inside it. That pill is
   narrower than the label, and .pe--button clips at its edge, so the
   button read "EE THE WOR". Drop the inner pill and stop the clipping. */
.zx-dashed .pe--button {
	overflow: visible !important;
}
.zx-dashed .pe--button .pe--button--wrapper,
.zx-dashed .pe--button .pb__main,
.zx-dashed .pe--button a {
	background: none !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	overflow: visible !important;
	white-space: nowrap !important;
	color: inherit !important;
}

/* ── Contact: body copy ────────────────────────────────────────────────
   All-caps mono in a 328px column ran to five short lines. Wider column
   and more leading; the caps stay, they are the page's look. */
@media (min-width: 1025px) {
	body.page-id-188 .site-main .text-p {
		max-width: 460px;
		line-height: 1.75;
	}
}

/* ── Journal: headline ─────────────────────────────────────────────────
   75px inside a 670px column threw a 29-character title onto four lines.
   Let it use the full hero width and scale with the viewport. */
.single-post .elementor-element-bf52fd1 {
	width: 100% !important;
	max-width: none !important;
}
.single-post .elementor-element-bf52fd1 .text-h2 {
	font-size: clamp(38px, 4.6vw, 64px) !important;
	line-height: 1.06;
}

/* ── Journal: the empty Tags label ─────────────────────────────────────
   The label prints whether or not the post has tags. Hide the pair when
   the tag list comes back empty. */
.single-post .elementor-element-39b6294:has(p:empty),
.single-post .elementor-element-39b6294:has(.text-wrapper:empty) {
	display: none !important;
}
.single-post .elementor-element-39b6294:has(p:empty) ~ .elementor-element-60749a3,
.single-post .elementor-element-60749a3:has(+ .elementor-element-39b6294 p:empty) {
	display: none !important;
}

/* ── Blog index: filter pills sat under the logo ───────────────────────
   .grid--filters starts at the very left edge, which is where the
   sticky wordmark lives. Clear it on desktop. */
@media (min-width: 1025px) {
	.grid--filters {
		padding-left: 200px;
	}
}

/* ── The light/dark switch ─────────────────────────────────────────────
   Its 40x20 track is transparent with a #ddd border, so on anything but
   a pale background only the 15px black knob shows and it reads as a
   stray dot dropped on the page. Give the track a real edge. */
.pl--switch {
	background: rgba(127, 127, 127, .16) !important;
	border: 1px solid rgba(127, 127, 127, .55) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   7.0 — follow-ups to 6.9
   ══════════════════════════════════════════════════════════════════════ */

/* The journal headline widget is now full width, but Elementor's own
   "width 75%" control caps the inner container at 670px, which is what
   was still forcing four lines. Release the container too. */
.single-post .elementor-element-bf52fd1 > .elementor-widget-container {
	max-width: none !important;
	width: 100% !important;
}

/* Contact intro copy was 328px inside a 435px column, so it broke to six
   short lines. Let it use the column it already sits in. */
@media (min-width: 1025px) {
	body.page-id-188 .elementor-element-79cb403b {
		width: 100% !important;
		max-width: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   7.1 — Tags label
   ══════════════════════════════════════════════════════════════════════ */

/* The tags widget hides itself when a post has none, but the "Tags"
   caption next to it did not, leaving a label pointing at nothing.
   They share an .e-con-inner, so condition the caption on the sibling. */
.single-post .e-con-inner:has(.elementor-element-39b6294 p:empty) .elementor-element-60749a3,
.single-post .e-con-inner:has(.elementor-element-39b6294 .text-wrapper:empty) .elementor-element-60749a3 {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   7.2 — Tags label, properly
   ══════════════════════════════════════════════════════════════════════ */

/* The :empty test in 7.1 never matched: the tags paragraph carries
   whitespace, so it is not empty in the CSS sense. Test for the thing
   that actually only exists when there are tags, the chip links. */
.single-post .e-con-inner:not(:has(.elementor-element-39b6294 a)) .elementor-element-60749a3,
.single-post .e-con-inner:not(:has(.elementor-element-39b6294 a)) .elementor-element-39b6294 {
	display: none !important;
}