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

/* ══════════════════════════════════════════════════════════════════════
   7.3 — SCISSOR CURSOR, PROJECT TITLES, NEXT PROJECT
   ══════════════════════════════════════════════════════════════════════ */

/* ── The black circle was the cursor ───────────────────────────────────
   #mouseCursor is the theme's 125px follower. Over a photo it reads as a
   censor dot sitting on the model's face. Replaced with a real scissors
   pointer: no lag, no element painting over the artwork, and it snips
   shut on mousedown so every click has visible feedback. */
#mouseCursor {
	display: none !important;
}

html, body,
body a, body button, body [role="button"], body .pe--button,
body .showcase-project, body .project-image, body input[type="submit"] {
	cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11.5%2025.5%20L23%204'/%3E%3Cpath%20d='M20.5%2025.5%20L9%204'/%3E%3Ccircle%20cx='10'%20cy='27.5'%20r='3.1'/%3E%3Ccircle%20cx='22'%20cy='27.5'%20r='3.1'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23111111'%20stroke-width='2.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11.5%2025.5%20L23%204'/%3E%3Cpath%20d='M20.5%2025.5%20L9%204'/%3E%3Ccircle%20cx='10'%20cy='27.5'%20r='3.1'/%3E%3Ccircle%20cx='22'%20cy='27.5'%20r='3.1'/%3E%3C/g%3E%3C/svg%3E") 16 4, auto;
}

html:active, body:active,
body a:active, body button:active, body [role="button"]:active,
body .pe--button:active, body .showcase-project:active, body .project-image:active {
	cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11.5%2025.5%20L16.5%204'/%3E%3Cpath%20d='M20.5%2025.5%20L15.5%204'/%3E%3Ccircle%20cx='10'%20cy='27.5'%20r='3.1'/%3E%3Ccircle%20cx='22'%20cy='27.5'%20r='3.1'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23111111'%20stroke-width='2.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11.5%2025.5%20L16.5%204'/%3E%3Cpath%20d='M20.5%2025.5%20L15.5%204'/%3E%3Ccircle%20cx='10'%20cy='27.5'%20r='3.1'/%3E%3Ccircle%20cx='22'%20cy='27.5'%20r='3.1'/%3E%3C/g%3E%3C/svg%3E") 16 4, auto;
}

/* text fields keep a caret, you cannot type with scissors */
body :is(input[type="text"], input[type="email"], input[type="tel"],
         input[type="number"], input[type="search"], textarea) {
	cursor: text;
}

/* touch screens have no pointer at all, and a cursor rule there just
   costs a download */
@media (hover: none) {
	html, body, body a, body button, body .pe--button,
	body .showcase-project, body .project-image {
		cursor: auto;
	}
}

/* ── Click feedback on project cards ───────────────────────────────────
   Brightness only, no transform: GSAP owns the transform on these cards
   and fighting it causes the card to jump. */
.showcase-project a:active .project-image img,
.project-wrap a:active .project-image img {
	filter: brightness(.86);
	transition: filter .12s ease;
}

/* ── Project page titles ───────────────────────────────────────────────
   "NANLITE PAVOTUBES LAUNCH" rendered 720px wide inside a 603px panel, so
   PAVOTUBES hung right out over the photography. Size the title off the
   viewport instead of a fixed 76px, and keep a hard backstop so no title
   can ever escape the panel again. */
body.single-portfolio .text-h1,
body[class*="postid-"] .project-hero .text-h1,
body[class*="postid-"] .elementor-element-7ed05dc .text-h1 {
	font-size: clamp(26px, 2.6vw, 50px) !important;
	line-height: 1.04;
	overflow-wrap: anywhere;
	hyphens: none;
}

/* ── NEXT PROJECT wordmark ─────────────────────────────────────────────
   It was never deleted. The marquee wrapper carries z-index:-1, which
   puts it behind its own opaque section background, so 130px of type was
   painting underneath the page. Bring it forward and mute it instead,
   which is the ghosted look it was meant to have. */
.next-project-section .elementor-element-5e21cdc,
.next-project-section [class*="marquee"] {
	z-index: 0 !important;
}
.next-project-section [class*="marquee"] * {
	color: rgba(7, 7, 7, .09) !important;
}
.next-project-section .project-title,
.next-project-section .project-category {
	position: relative;
	z-index: 2;
}

/* ══════════════════════════════════════════════════════════════════════
   7.4 — project title, correct selector
   ══════════════════════════════════════════════════════════════════════ */

/* 7.3 aimed at .text-h1. The project title is actually p.text-h2, and the
   widget id differs per project because the nine newer projects were built
   with regenerated element ids. Scope by body class instead. */
body.single-portfolio .text-h2 {
	font-size: clamp(26px, 2.6vw, 50px) !important;
	line-height: 1.05;
	overflow-wrap: anywhere;
}

/* the NEXT PROJECT wordmark is its own marquee heading, keep it big */
body.single-portfolio .pe-marquee,
body.single-portfolio .next-project-section .text-h2 {
	font-size: clamp(48px, 7vw, 130px) !important;
	overflow-wrap: normal;
}

@media (max-width: 550px) {
	body.single-portfolio .text-h2 {
		font-size: clamp(28px, 8.6vw, 40px) !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   7.7 — CLOSE THE BLANK BANDS ON PROJECT PAGES
   ══════════════════════════════════════════════════════════════════════ */

/* ── Short galleries hugged the left edge ──────────────────────────────
   Legacy, OPPO and Estee hold one to three images and their track is
   narrower than the window, so the strip sat hard left with roughly
   1,250px of empty page beside it. Centre the track when there is
   nothing to scroll; wider galleries are unaffected because a flex row
   that overflows ignores justify-content on its start edge. */
.project--image--gallery--wrapper {
	justify-content: center;
}

/* ── The story block was mostly air ────────────────────────────────────
   200px above and 200px below a paragraph that is often only ~350px
   tall, so a whole screen could hold one column of text and nothing
   else. Tighten it without losing the breathing room the design wants. */
.project-page .page-content .e-con[class*="elementor-element"] {
	margin-top: 110px !important;
	margin-bottom: 110px !important;
}

@media (max-width: 1024px) {
	.project-page .page-content .e-con[class*="elementor-element"] {
		margin-top: 72px !important;
		margin-bottom: 72px !important;
	}
}

@media (max-width: 550px) {
	.project-page .page-content .e-con[class*="elementor-element"] {
		margin-top: 48px !important;
		margin-bottom: 48px !important;
	}
}

/* the logo bar sat 70px below all of that as well */
.next-project-section + *,
.dw-marquee {
	padding-top: 42px;
}

/* ══════════════════════════════════════════════════════════════════════
   7.8 — the 1000px hole at the end of every journal post
   ══════════════════════════════════════════════════════════════════════ */

/* The Single Post body container carries margin-bottom: 1000px, so every
   article ends with a 1220px gap before the footer. On a 390x844 phone
   that is a screen and a half of nothing, measured identically on all
   seven posts. Give it ordinary closing space instead. */
.single-post .elementor-element-d29b6eb {
	margin-bottom: 140px !important;
}

@media (max-width: 1024px) {
	.single-post .elementor-element-d29b6eb {
		margin-bottom: 90px !important;
	}
}

@media (max-width: 550px) {
	.single-post .elementor-element-d29b6eb {
		margin-bottom: 64px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   7.9 — MOBILE TYPE PASS
   Measured at 390px: policy headings were 76px (five lines for four
   words), journal sub-headings 57px with the word running off the right
   edge, body copy 17px in a column 10px from the screen edge.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	/* Nothing may run off the side of the screen, ever. This is what cut
	   "COLLECTED" and "CONDITIONER" in half. */
	.site-main :is(h1, h2, h3, h4, h5, h6, p, li, span, a) {
		overflow-wrap: break-word;
		word-break: normal;
	}

	/* ── Privacy Policy and Terms of Use ───────────────────────────── */
	body:is(.page-id-3, .page-id-11901) .site-main :is(h1, h2) {
		font-size: 28px !important;
		line-height: 1.18 !important;
		margin: 1.7em 0 .55em !important;
	}
	body:is(.page-id-3, .page-id-11901) .site-main :is(h3, h4) {
		font-size: 21px !important;
		line-height: 1.25 !important;
		margin: 1.4em 0 .5em !important;
	}
	body:is(.page-id-3, .page-id-11901) .site-main :is(p, li) {
		font-size: 17px !important;
		line-height: 1.68 !important;
	}
	body:is(.page-id-3, .page-id-11901) .site-main .elementor-widget-container {
		padding-left: 4px;
		padding-right: 4px;
	}

	/* ── Journal posts ─────────────────────────────────────────────── */
	/* in-article headings were 57px and ate a whole screen */
	.single-post .elementor-widget-pepostfield :is(h1, h2, h3, h4) {
		font-size: 24px !important;
		line-height: 1.22 !important;
		margin: 1.7em 0 .5em !important;
	}
	/* the post title wrapped to four lines against the screen edge */
	.single-post .elementor-element-bf52fd1 .text-h2 {
		font-size: 30px !important;
		line-height: 1.12 !important;
	}
	/* "Subscribe to the journal." */
	.single-post .elementor-element-1cb4bad .text-h4 {
		font-size: 27px !important;
		line-height: 1.15 !important;
	}
	.single-post .elementor-widget-pepostfield p {
		font-size: 18px !important;
		line-height: 1.72 !important;
	}
	/* the small print was squeezed into a 165px column, 15 characters a line */
	.single-post .elementor-element-2cfe60f,
	.single-post .elementor-element-2cfe60f .text-wrapper {
		width: 100% !important;
		max-width: none !important;
	}

	/* ── Contact and the blog index ────────────────────────────────── */
	body:is(.page-id-188, .page-id-191) .site-main :is(.text-h1, .text-h2, .text-h3) {
		font-size: clamp(28px, 8.6vw, 36px) !important;
		line-height: 1.1 !important;
	}

	/* ── Breathing room at the edges ───────────────────────────────── */
	/* body copy sat 10px from the screen edge across posts and the index */
	.single-post .elementor-element-26e9017,
	body.page-id-191 .site-main .elementor-widget-container > .text-wrapper {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* ── Legal links in the footer were 11px ───────────────────────── */
	.site-footer .elementor-element-312c24f a {
		font-size: 13px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   8.0 — blog index spilled into a second, off-screen column
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	/* The Older Articles grid is flex-flow: column wrap. On a fixed-height
	   container that makes items wrap into a NEW COLUMN, so half the posts
	   sat off the right edge of a 390px phone with their titles sliced
	   mid-word. One column on phones. */
	body.page-id-191 .elementor-element-3883801 {
		flex-wrap: nowrap !important;
		height: auto !important;
		max-height: none !important;
	}

	body.page-id-191 .pe--single--post,
	body.page-id-191 .post-details {
		max-width: 100% !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   8.1 — the blog grid was three columns wide on a phone
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	/* .grid--posts--wrapper computed to
	   grid-template-columns: 239.219px 204.367px 149.711px
	   which is 593px of columns inside a 375px phone, so two thirds of the
	   posts sat off the right edge with their titles sliced mid-word. */
	.grid--posts--wrapper {
		grid-template-columns: 1fr !important;
		gap: 34px !important;
	}
	.grid--post--item,
	.grid--post--item .pe--single--post {
		width: 100% !important;
		max-width: 100% !important;
	}
	.grid--post--item .post-thumbnail img {
		width: 100% !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   8.2 — Work page date heading
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {
	/* "(2012-2026)" rendered at 51px, ran off the right edge and sat on
	   top of the project photos behind it. */
	body.page-id-11717 .site-main :is(.text-h1, .text-h2, .text-h3) {
		font-size: clamp(24px, 7.4vw, 30px) !important;
		line-height: 1.1 !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   8.4 — Work page card stack on phones
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	/* Measured at 390px: the cards are 312px wide but .fullscreen-cards-wrapper
	   is only 234px, centred with margin: 0 70.5px. The cards are absolutely
	   positioned against that wrapper, so they start at its left edge (71px)
	   and run to 383px, past the 375px content edge. The stack sat off-centre
	   and clipped, taking the project titles with it.

	   On desktop the two already agree exactly, 1152px and 1152px, which is
	   why this only ever showed on a phone. Match them here too. */
	.leksa-fullscreen-cards .fullscreen-cards-wrapper {
		width: 80vw !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* the title and category sit under the card and inherit its box */
	.leksa-fullscreen-cards .showcase-project .project-meta {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   8.5 — Work page: stop the project names piling on each other
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	/* The card stack shows about 14 project labels at once and lets them
	   recede down the screen. On desktop each label is ~30px tall with
	   ~40px between cards, so they read as a neat pile. On a phone the
	   titles wrap to two or three lines, making the labels 60-109px tall
	   while the gap between cards is as little as 4px, so they printed on
	   top of each other. Keep them to one line and the stagger works. */
	.leksa-fullscreen-cards :is(.project-title, .project-category) {
		font-size: 14px !important;
		line-height: 1.25 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		max-width: 100% !important;
	}
	.leksa-fullscreen-cards .project-meta {
		gap: 2px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   8.6 — phone: Work intro, All Projects button, blog filter
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	/* ── Work page intro ───────────────────────────────────────────────
	   "Hair Artist" and "Based in Mumbai, India" print straight over the
	   project photos at 110px and 136px down the screen, so they are
	   unreadable against a busy image. The same information is in the
	   header and on About. */
	body.page-id-11717 .elementor-element-ac8eba1 {
		display: none !important;
	}

	/* ── "All Projects" ────────────────────────────────────────────────
	   The label had white-space: normal at 20px, so it broke onto two
	   lines and the pill grew to 52px tall. One line, slimmer pill. */
	.pe--button .pb__main,
	.pe--button .pb__hover,
	.pe--button .pe--button--wrapper {
		white-space: nowrap !important;
	}
	.pe--button {
		font-size: 15px !important;
	}

	/* ── Blog filter ───────────────────────────────────────────────────
	   The three pills were inline-block at 18px, 95 + 119 + 157 = 371px
	   plus gaps, so "Personal" dropped to a second row and the filter
	   block stood 130px tall. Flex row, tighter, one line. */
	.grid--filters .filters-list {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
	}
	.grid--filters .post-filter {
		font-size: 14px !important;
		padding: 9px 16px !important;
		margin: 0 !important;
		white-space: nowrap !important;
		flex: 0 0 auto;
	}
	.grid--filters {
		padding-left: 0 !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   8.7 — swipe coach mark
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	.dw-coach {
		position: absolute;
		left: 50%;
		bottom: 22%;
		transform: translate(-50%, 8px);
		z-index: 40;
		opacity: 0;
		pointer-events: none;
		transition: opacity .38s ease, transform .38s ease;
	}
	.dw-coach-in  { opacity: 1; transform: translate(-50%, 0); }
	.dw-coach-out { opacity: 0; transform: translate(-50%, -6px); }

	.dw-coach-inner {
		display: flex;
		align-items: center;
		gap: 9px;
		padding: 11px 17px;
		border-radius: 999px;
		background: rgba(12, 12, 12, .82);
		backdrop-filter: blur(9px);
		-webkit-backdrop-filter: blur(9px);
		color: #fff;
		box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
		white-space: nowrap;
	}

	.dw-coach-text {
		font-family: var(--zx-mono, ui-monospace, monospace);
		font-size: 11.5px;
		letter-spacing: .07em;
		text-transform: uppercase;
	}

	/* the hand slides between the two arrows, which pulse in turn */
	.dw-coach-hand   { animation: dw-coach-slide 1.9s ease-in-out infinite; }
	.dw-coach-arrow  { font-size: 15px; opacity: .35; }
	.dw-coach-left   { animation: dw-coach-blink 1.9s ease-in-out infinite; }
	.dw-coach-right  { animation: dw-coach-blink 1.9s ease-in-out infinite .95s; }

	@keyframes dw-coach-slide {
		0%, 100% { transform: translateX(-7px); }
		50%      { transform: translateX(7px); }
	}
	@keyframes dw-coach-blink {
		0%, 100% { opacity: .3; }
		50%      { opacity: 1; }
	}

	@media (prefers-reduced-motion: reduce) {
		.dw-coach-hand, .dw-coach-left, .dw-coach-right { animation: none; }
		.dw-coach-arrow { opacity: .8; }
	}
}

/* ══════════════════════════════════════════════════════════════════════
   8.9 — ring compositing hints
   ══════════════════════════════════════════════════════════════════════ */

/* The rotating tiles are transformed every frame. Promoting them to their
   own compositor layers means the browser moves an existing texture instead
   of re-rasterising the card, which is where the stutter shows. Paired with
   the sizes fix in the JS, the textures are now small enough that having a
   layer each is cheap. */
.leksa-showcase-rotate .project-wrap,
.leksa-showcase-rotate .project-image,
.leksa-fullscreen-cards .showcase-project {
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
}

/* stop each tile repainting its neighbours */
.leksa-showcase-rotate .project-image {
	contain: paint;
}

/* ══════════════════════════════════════════════════════════════════════
   9.0 — phone gallery swipe
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	/* The rail is a native scroll container. Tell the compositor so, and
	   stop each slide repainting its neighbours as it moves. */
	.dw-swipe {
		will-change: scroll-position;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
	}

	.dw-swipe .project--gallery--image {
		contain: paint;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.dw-swipe .project--gallery--image img {
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   9.2 — phone preview sheet
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	.dw-sheet { position: fixed; inset: 0; z-index: 9000; }

	.dw-sheet-scrim {
		position: absolute; inset: 0;
		background: rgba(8, 8, 8, .55);
		opacity: 0; transition: opacity .3s ease;
	}
	.dw-sheet-in .dw-sheet-scrim { opacity: 1; }

	.dw-sheet-card {
		position: absolute; left: 0; right: 0; bottom: 0;
		max-height: 88vh; overflow-y: auto;
		background: #f0f0f0;
		border-radius: 22px 22px 0 0;
		transform: translateY(102%);
		transition: transform .34s cubic-bezier(.22, .8, .3, 1);
		box-shadow: 0 -12px 40px rgba(0, 0, 0, .28);
	}
	.dw-sheet-in .dw-sheet-card { transform: translateY(0); }

	.dw-sheet-close {
		position: absolute; top: 12px; right: 12px; z-index: 2;
		width: 40px; height: 40px; border: 0; border-radius: 50%;
		background: rgba(255, 255, 255, .9); color: #111;
		font-size: 22px; line-height: 1; cursor: pointer;
	}

	.dw-sheet-img {
		display: block; width: 100%; height: 40vh;
		object-fit: cover; object-position: 50% 28%;
		border-radius: 22px 22px 0 0;
	}

	.dw-sheet-body { padding: 20px 22px 30px; }

	.dw-sheet-cat {
		margin: 0 0 6px;
		font-family: var(--zx-mono, ui-monospace, monospace);
		font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
		opacity: .6;
	}
	.dw-sheet-title {
		margin: 0 0 10px;
		font-size: 27px; line-height: 1.12;
	}
	.dw-sheet-desc {
		margin: 0 0 20px;
		font-size: 16px; line-height: 1.62; opacity: .78;
	}
	.dw-sheet-go {
		display: inline-flex; align-items: center; gap: 8px;
		min-height: 46px; padding: 0 22px;
		border-radius: 999px; background: #111; color: #fff;
		font-size: 14px; letter-spacing: .04em; text-decoration: none;
	}
	.dw-sheet-go span { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   9.3 — preview sheet close button
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {
	/* the theme's button styles were stretching it into a wide oval */
	.dw-sheet .dw-sheet-close {
		width: 40px !important;
		min-width: 40px !important;
		max-width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 40px;
		box-shadow: 0 2px 10px rgba(0,0,0,.18);
	}
}

/* ══════════════════════════════════════════════════════════════════════
   9.4 — home page: kill the 64px of dead scroll on phones
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	/* Measured on a 393x852 phone: document 916px inside an 852px screen,
	   so 64px of nothing sat under a showcase that is meant to fill the
	   screen exactly. Scrolling dragged the whole section up and exposed
	   it. The cause is 100vh, which on mobile Safari reports the height
	   WITHOUT the address bar subtracted. dvh is the dynamic viewport and
	   tracks what you can actually see. */
	body.home .leksa-showcase-rotate,
	body.home .elementor-element-d754f0e,
	body.home .elementor-element-d754f0e > .e-con-inner {
		height: 100dvh !important;
		min-height: 100dvh !important;
		max-height: 100dvh !important;
	}

	body.home .site-main,
	body.home .site {
		min-height: 0 !important;
		overflow: hidden;
	}

	/* nothing on this page is meant to scroll vertically */
	body.home {
		overflow-y: hidden;
		overscroll-behavior-y: none;
	}

	/* the ring wrapper is ~2,560px tall by design; keep its overflow from
	   adding to the page box */
	body.home .lsc-wrapper {
		contain: layout paint;
	}
}

/* the preview sheet is withdrawn; drop its styles so nothing lingers */
.dw-sheet { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   9.5 — project titles and the empty hero panel on phones
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {

	/* ── Titles ────────────────────────────────────────────────────────
	   34px on a 393px screen put "OPPO F21 Pro x Varun Dhawan",
	   "Art of Color (Wella x JCB)" and "FTB: Forward the Beauty" onto four
	   lines, with twelve more at three. Smaller so the long ones settle
	   into two. */
	body.single-portfolio .text-h2 {
		font-size: clamp(21px, 6vw, 28px) !important;
		line-height: 1.08 !important;
	}

	/* the NEXT PROJECT wordmark is a different beast, keep it large */
	body.single-portfolio .pe-marquee {
		font-size: clamp(48px, 7vw, 130px) !important;
	}

	/* ── The empty band in the hero panel ──────────────────────────────
	   Measured on FRINGE'd: a 372px empty run. The panel is a flex column
	   whose children are title 35px, category 35px, description 218px,
	   client 35px, year 35px. The description widget carries
	   margin: 75px top / 50px bottom, so 125px of that panel is nothing at
	   all, and the panel also holds a 426px min-height floor. */
	body.single-portfolio .elementor-element-7ed05dc {
		min-height: 0 !important;
		gap: 10px !important;
		padding: 20px !important;
	}

	body.single-portfolio .elementor-element-96f1586 > .elementor-widget-container {
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	/* the story block below repeats its 48px margin at three nested
	   levels, which stacks up on a phone */
	body.single-portfolio .page-content .e-con .e-con {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   9.6 — project copy fills grey to black on scroll
   ══════════════════════════════════════════════════════════════════════ */

/* The About statements light up white on a dark page. Project pages are
   light with grey copy, so the same reveal needs the opposite ink. */
body.single-portfolio .zx-fill .zxw {
	color: rgba(7, 7, 7, .26) !important;
	transition: color .28s ease;
}
body.single-portfolio .zx-fill .zxw.zxw-lit {
	color: #070707 !important;
}

/* the hero write-up is set grey by the widget itself, so it needs the
   inherited colour overridden for the reveal to be visible at all */
body.single-portfolio .zx-fill {
	color: inherit !important;
}

/* ── Retire the static swipe line ──────────────────────────────────────
   The coach mark teaches this properly now, so the one-liner under the
   images is redundant. */
.dw-swipe-hint {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   9.8 — video orphan, marquee presence, NEXT PROJECT ink, dark mode
   ══════════════════════════════════════════════════════════════════════ */

/* The theme prints a play button for video projects but never the player;
   the real embeds now live in the page body. Hide the orphan whenever it
   holds no actual media. */
.single-portfolio .pe-video:not(:has(iframe)):not(:has(video)) {
	display: none !important;
}

/* ── "Worked with" deserves to be legible ─────────────────────────────- */
.dw-marquee-kicker {
	display: block;
	text-align: center !important;
	font-size: 15px !important;
	letter-spacing: .18em;
	margin: 0 auto 16px !important;
	padding: 0 !important;
	opacity: .85;
}

/* client logos: a step larger everywhere */
:root { --dw-mq-row: 52px; }
@media (max-width: 900px) { :root { --dw-mq-row: 42px; } }
@media (max-width: 550px) { :root { --dw-mq-row: 34px; } }

/* ── NEXT PROJECT: black ink, readable ────────────────────────────────- */
.next-project-section [class*="marquee"] * {
	color: #070707 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE (body.layout--switched, background flips to #141414).
   Everything we forced to black must flip with it.
   ══════════════════════════════════════════════════════════════════════ */

body.layout--switched.single-portfolio .zx-fill .zxw {
	color: rgba(255, 255, 255, .32) !important;
}
body.layout--switched.single-portfolio .zx-fill .zxw.zxw-lit {
	color: #ececec !important;
}

body.layout--switched .next-project-section [class*="marquee"] * {
	color: #ececec !important;
}

/* the swipe coach pill is dark-on-dark once the page flips; give it an edge */
body.layout--switched .dw-coach-inner {
	background: rgba(240, 240, 240, .92);
	color: #111;
}

/* the "start a project" dashed box drew a black border */
body.layout--switched .site-main [style*="dashed"],
body.layout--switched .dw-start-box {
	border-color: #d5d5d5 !important;
	color: #ececec !important;
}

/* ══════════════════════════════════════════════════════════════════════
   9.9 — logo sizes for real this time
   The original --dw-mq-row is declared on .dw-marquee itself, so the
   :root override in 9.8 never won. Match the selector.
   ══════════════════════════════════════════════════════════════════════ */

.dw-marquee { --dw-mq-row: 52px; }
@media (max-width: 900px) { .dw-marquee { --dw-mq-row: 42px; } }
@media (max-width: 550px) { .dw-marquee { --dw-mq-row: 34px; } }

/* ══════════════════════════════════════════════════════════════════════
   10.0 — contact page buttons
   The chips (@handle, Mumbai, Instagram, The Nod, Rolling Stone) rendered
   as solid white pills on the dark page, out of key with the dashed mono
   look everything else on Contact has. Outline them instead.
   ══════════════════════════════════════════════════════════════════════ */

body.page-id-188 .site-main .pe--button {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .38) !important;
	border-radius: 0 !important;
	transition: border-color .2s ease, background .2s ease;
}
body.page-id-188 .site-main .pe--button:hover {
	border-color: var(--zx-red, #db0000) !important;
	background: rgba(255, 255, 255, .05) !important;
}
body.page-id-188 .site-main .pe--button :is(.pb__main, .pb__hover, a, span) {
	background: none !important;
	color: #fff !important;
	border-radius: 0 !important;
	font-family: var(--zx-mono, ui-monospace, monospace) !important;
	font-size: 12px !important;
	letter-spacing: .06em;
	text-transform: uppercase;
}
/* the form submit already wears the dashed style; leave it be */
body.page-id-188 .site-main .wpcf7-form .pe--button { border: 0 !important; }

/* honeypot field must never be visible */
.wpcf7-form .dw-guard-wrap,
.wpcf7-form input[name="dw-guard"] {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   10.1 — story block top-level margins on phones
   The nine newer projects carry margin_mobile: 100px on the story
   container itself (the 9.5 rule only reached nested containers), which
   left a ~460px quiet stretch between hero and story on a phone.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 550px) {
	body.single-portfolio .page-content > .elementor > .e-con {
		margin-top: 56px !important;
		margin-bottom: 56px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   10.2 — dark mode repair, About polish, phone preview back, hero video
   ══════════════════════════════════════════════════════════════════════ */

/* the phone preview sheet returns; 9.4's kill switch is overruled */
.dw-sheet { display: block !important; }

/* close control moves to the top-LEFT so it can never sit under the
   site's + menu button in the top-right */
.dw-sheet .dw-sheet-close {
	left: 12px !important;
	right: auto !important;
	top: 12px !important;
	z-index: 3;
}
.dw-sheet-title { text-transform: uppercase; letter-spacing: .01em; }

/* the cursor follower, belt and braces alongside the JS removal */
#mouseCursor { display: none !important; visibility: hidden !important; }

/* ── About hero background video ─────────────────────────────────────── */
.dw-hero-vid { position: absolute; inset: 0; z-index: 0; }
.dw-hero-vid video {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: brightness(.42) saturate(.9);
}
.dw-hero-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,6,4,.25), rgba(10,6,4,.55));
}
/* the old standalone player section bows out */
body.page-id-180 .elementor-element-56a97838 { display: none !important; }

/* ── About: muses grid hole (the removed quote left an empty cell) ───── */
body.page-id-180 .elementor-element-27e418ba { display: none !important; }

/* ── About: client logos were wall-to-wall at 186px tall ─────────────── */
.pe--clients--wrapper { gap: 30px !important; }
.pe--clients--wrapper .pe-client {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 26px 14px !important;
}
.pe--clients--wrapper .pe-client img {
	max-height: 56px !important;
	max-width: 72% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}

/* ── About: awards statement three lines → two ───────────────────────── */
@media (min-width: 1025px) {
	body.page-id-180 .elementor-element-9f843ba .zx-fill {
		font-size: 44px !important;
		line-height: 1.22 !important;
	}
}

/* ── About: CONTACT US sat under 500px of nothing ────────────────────── */
body.page-id-180 .elementor-element-6d2bcf21 {
	min-height: 0 !important;
	height: auto !important;
	padding: 56px 10px 64px !important;
	justify-content: center !important;
	align-items: center !important;
}
/* 11.2: the custom red pill fought the theme's hover-swap markup (label
   escaping the pill, dark hover layer showing through in dark mode).
   Reverted — the button now renders exactly like every other site button. */

/* ── Blog singles: the photo column keeps you company as you read ───── */
@media (min-width: 1025px) {
	.single-post .elementor-element-26e9017 { align-items: flex-start !important; }
	.single-post .elementor-element-b68cf27 {
		position: sticky;
		top: 110px;
		align-self: flex-start;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE REPAIR (body.layout--switched)
   ══════════════════════════════════════════════════════════════════════ */

/* the light-grey hero panels kept their background while their text went
   light — flip the panel instead */
body.layout--switched .elementor-element-7ed05dc,
body.layout--switched .elementor-element-50df0be {
	background-color: #1d1d1d !important;
}

/* footer text inverted to near-black on the dark footer; bring it back */
body.layout--switched .site-footer :is(h1,h2,h3,h4,p,a,li,span,.text-h1,.text-h4,.text-p) {
	color: #e4e4e4 !important;
}
/* and hand the reds back to the things that are meant to be red */
body.layout--switched .site-footer :is(.elementor-element-7d38df4,
	.elementor-element-4feaffc, .elementor-element-2a4f199,
	.elementor-element-965f9fc) :is(p, a, span, .pb__main) {
	color: var(--zx-red, #db0000) !important;
}
body.layout--switched .site-footer ::placeholder { color: rgba(255,255,255,.45) !important; }
body.layout--switched .site-footer input { color: #e4e4e4 !important; }

/* ══════════════════════════════════════════════════════════════════════
   10.3 — About brand grid, muses cleanup, contact two-sided, blog polish
   ══════════════════════════════════════════════════════════════════════ */

/* ── About: brand grid. Wordmark SVGs rendered at their tiny intrinsic
   size inside enormous cells. Real logos and wordmarks need different
   treatment, so tell them apart by their filenames. ─────────────────── */
body.page-id-180 .pe--clients--wrapper {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px !important;
}
@media (max-width: 900px) {
	body.page-id-180 .pe--clients--wrapper { grid-template-columns: repeat(2, 1fr); }
}
/* tiles fill the theme's own 300px rows — shrinking them to 148px left
   ~150px of dead air inside every row and the grid looked blown apart */
body.page-id-180 .pe--clients--wrapper .pe-client {
	height: 100% !important;
	min-height: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 24px 18px !important;
}
@media (max-width: 900px) {
	/* two columns on phones: a 300px row is too tall for a ~170px cell */
	body.page-id-180 .pe--clients--wrapper { grid-auto-rows: 170px !important; }
}
/* real photographed/coloured logos: cap the height, keep proportion */
body.page-id-180 .pe-client img[src*="real-logo"] {
	max-height: 72px !important;
	width: auto !important;
	max-width: 78% !important;
	height: auto !important;
}
/* text wordmarks are vectors: scale them up by width so they read */
body.page-id-180 .pe-client img[src*="brand-"] {
	width: 62% !important;
	height: auto !important;
	max-height: none !important;
}

/* ── About: muses grid becomes a clean grid of people. The two floating
   text cells landed in odd columns once the empty cell went. ─────────── */
body.page-id-180 .elementor-element-616dc639,
body.page-id-180 .elementor-element-3f6c529a {
	display: none !important;
}

/* ── Contact: one clean split — image owns the left half, both detail
   blocks stack on the right half. Title centered above. ──────────────── */
body.page-id-188 .elementor-element-780122b7,
body.page-id-188 .elementor-element-780122b7 .text-h1 {
	width: 100% !important;
	max-width: none !important;
	text-align: center !important;
}
body.page-id-188 .elementor-element-4f99eca5 {
	justify-content: center !important;
	align-items: center !important;
}
@media (min-width: 1025px) {
	body.page-id-188 .elementor-element-669df65a {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "img info";
		gap: 0 6%;
		align-items: stretch;
	}
	body.page-id-188 .elementor-element-4c7c036e {
		grid-area: img;
		width: 100% !important;
		height: 100%;
	}
	body.page-id-188 .elementor-element-45588329 {
		grid-area: info;
		width: 100% !important;
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
}
@media (max-width: 1024px) {
	body.page-id-188 .elementor-element-669df65a { flex-wrap: wrap !important; }
	body.page-id-188 .elementor-element-4c7c036e,
	body.page-id-188 .elementor-element-45588329 { width: 100% !important; }
}
/* the portrait: rounded, full-bleed inside its half */
body.page-id-188 .elementor-element-4c7c036e,
body.page-id-188 .elementor-element-4c7c036e .elementor-widget-container {
	border-radius: 22px;
	overflow: hidden;
}
body.page-id-188 .elementor-element-4c7c036e img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 22px;
}

/* labelled contact rows: icon + what it is + where it goes */
.dw-contact-rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 26px;
	width: 100%;
	max-width: 470px;
}
.dw-crow {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease;
}
.dw-crow:hover {
	transform: translateY(-2px);
	border-color: currentColor;
}
.dw-cico {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 50%;
}
.dw-cico svg { width: 20px; height: 20px; display: block; }
.dw-cbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dw-cbody small {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .55;
}
.dw-cbody b {
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .02em;
	overflow-wrap: anywhere;
	text-transform: none;
}

/* ── Journal desktop pass ────────────────────────────────────────────── */
/* the title ran to four lines at 64px in a narrower window */
.single-post .elementor-element-bf52fd1 .text-h2 {
	font-size: clamp(30px, 3vw, 44px) !important;
	line-height: 1.1 !important;
}
/* in-article headings were still 57px on desktop */
.single-post .elementor-widget-pepostfield :is(h2, h3, h4) {
	font-size: 24px !important;
	line-height: 1.3 !important;
	margin: 2.1em 0 .6em !important;
	overflow-wrap: anywhere;
}
/* the category chip: keep it on one line inside the screen */
.single-post .elementor-element-daa6688 {
	max-width: calc(100vw - 40px);
}
.single-post .elementor-element-daa6688 .text-wrapper,
.single-post .elementor-element-daa6688 p {
	white-space: nowrap !important;
}
/* the sticky photo column made the image appear to shrink mid-scroll;
   back to normal flow */
.single-post .elementor-element-b68cf27 {
	position: static !important;
}

/* 10.4 — brand grid row rhythm: the widget adds its own row spacing on
   top of the grid gap, so rows floated far apart */
body.page-id-180 .pe--clients--wrapper .pe-client {
	margin: 0 !important;
}
body.page-id-180 .pe--clients--wrapper {
	row-gap: 22px !important;
}

/* 10.5/11.0 — the grid children are wrappers around .pe-client: let them
   stretch to the full row so the tiles inside can fill it */
body.page-id-180 .pe--clients--wrapper > * {
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   11.2 — Journal body reads in Century Gothic (Jost fallback), About CTA
   back to the standard button
   ══════════════════════════════════════════════════════════════════════ */

/* Jost: open-source twin of Century Gothic, served for everyone who does
   not have the real font installed */
@font-face {
	font-family: 'DW Gothic';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('jost-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A,
		U+201C-201E, U+2020-2022, U+2026, U+2039-203A, U+20AC, U+2122;
}
@font-face {
	font-family: 'DW Gothic';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('jost-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* the mono body was hard to read at article length */
.single-post .elementor-widget-pepostfield :is(p, li, blockquote, figcaption),
.single-post .elementor-widget-pepostfield {
	font-family: 'Century Gothic', 'CenturyGothic', 'DW Gothic', 'Jost',
		'Avenir Next', 'Trebuchet MS', sans-serif !important;
	letter-spacing: 0 !important;
	font-size: 17px;
	line-height: 1.75;
}
.single-post .elementor-widget-pepostfield :is(h2, h3, h4) {
	font-family: inherit;
}

/* ══════════════════════════════════════════════════════════════════════
   11.3 — one card shape everywhere, next-project cleanup, gallery title
   ══════════════════════════════════════════════════════════════════════ */

/* home ring: every card the same 3:2 shape — the mixed per-slot sizes
   read as random crops */
.leksa-showcase-rotate .project-image {
	aspect-ratio: 3 / 2;
	height: auto !important;
}
.leksa-showcase-rotate .project-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* work page stack: the ultra-wide cards showed a sliver of each photo.
   The height lives on the CARD, not the image wrapper - fix it there. */
.leksa-fullscreen-cards .showcase-project {
	aspect-ratio: 3 / 2 !important;
	height: auto !important;
}
.leksa-fullscreen-cards .showcase-project :is(.barba--trigger, .project-image) {
	width: 100% !important;
	height: 100% !important;
}
.leksa-fullscreen-cards .project-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* next-project: two-line title, uncropped thumb */
.single-portfolio .elementor-element-07cecf5 .text-h4 {
	font-size: 30px !important;
	line-height: 1.35 !important;
}
.single-portfolio .elementor-element-804f5ba .project-featured-image {
	aspect-ratio: 16 / 10;
	height: auto !important;
}
.single-portfolio .elementor-element-804f5ba .project-featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* the project name that rides on the pinned gallery */
.dw-proj-title {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 60;
	width: 92vw;
	text-align: center;
	font-weight: 700;
	font-size: clamp(40px, 6.5vw, 100px);
	line-height: 1.05;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease;
}
.dw-proj-title.on { opacity: 1; }

/* 11.5b — the html widget strips inline <svg>, so the icons are CSS masks
   keyed off each row's link type */
.dw-cico::before {
	content: '';
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--dw-ico) center / contain no-repeat;
	mask: var(--dw-ico) center / contain no-repeat;
}
.dw-crow[href*="instagram"] .dw-cico::before {
	--dw-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.dw-crow[href^="tel"] .dw-cico::before {
	--dw-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a12 12 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
.dw-crow[href^="mailto"] .dw-cico::before {
	--dw-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════════
   11.7 — footer phone layout done right, project pages tightened,
   two next-projects, explore uncropped
   ══════════════════════════════════════════════════════════════════════ */

/* phone footer: full-width email input, full-width submit BELOW it */
@media (max-width: 550px) {
	.site-footer .wpcf7-form {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 12px;
		width: 100% !important;
	}
	.site-footer .wpcf7-form > *,
	.site-footer .wpcf7-form p {
		width: 100% !important;
		margin: 0 !important;
	}
	.site-footer .wpcf7-form .wpcf7-form-control-wrap { width: 100% !important; display: block; }
	.site-footer .wpcf7-form input[type="email"],
	.site-footer .wpcf7-form input[type="text"] {
		width: 100% !important;
	}
	.site-footer .wpcf7-form .wpcf7-submit {
		width: 100% !important;
		margin: 0 !important;
	}

	/* footer menus: MENU + PORTFOLIO side by side, PAGES centred below */
	.site-footer .elementor-element-624022d {
		grid-column: 1 / -1 !important;
		justify-self: center !important;
		width: 100% !important;
		text-align: center;
	}
	.site-footer .elementor-element-624022d :is(p, a, li, .text-p, .menu--link) {
		text-align: center !important;
	}
	.site-footer .elementor-element-624022d ul { justify-content: center; }
}

/* project pages: story/description text in the reading font */
.single-portfolio .elementor-widget-petextwrapper .text-p,
.single-portfolio .elementor-widget-petextwrapper .text-p p {
	font-family: 'Century Gothic', 'CenturyGothic', 'DW Gothic', 'Jost',
		'Avenir Next', 'Trebuchet MS', sans-serif !important;
	letter-spacing: 0 !important;
}

/* project pages: cap the dead vertical stretches between sections */
@media (min-width: 1025px) {
	.single-portfolio .page-content > .elementor > .e-con {
		padding-top: min(6vh, 64px) !important;
		padding-bottom: min(6vh, 64px) !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* home ring: no dead strip under the image — card hugs its content */
.leksa-showcase-rotate .project-wrap { height: auto !important; }

/* 12.1: explore keeps the same uniform 3:2 cards — free-height cards broke
   the wheel geometry (the layout math assumes one card shape) */

/* gallery title: after a third of the ride it rises to the top and sits
   there like a header while the images keep moving */
.dw-proj-title {
	transition: opacity .35s ease, top .65s cubic-bezier(.22, .61, .36, 1),
		transform .65s cubic-bezier(.22, .61, .36, 1),
		font-size .65s cubic-bezier(.22, .61, .36, 1);
}
.dw-proj-title.dw-top {
	top: 96px;
	transform: translate(-50%, 0);
	font-size: clamp(22px, 2.4vw, 38px);
}

/* two next-projects side by side (desktop) */
@media (min-width: 1025px) {
	.dw-two-next {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 40px;
		justify-content: center;
		align-items: flex-start;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   12.0 — dashed buttons: hover is a colour swap, nothing moves
   ══════════════════════════════════════════════════════════════════════
   The theme's chars-left hover translates the label out of the box
   (overflow is visible here), and its animation layers painted a dark
   bar inside. Freeze every transform and pseudo-layer inside these
   buttons; the .zx-dashed hover is just border -> red fill. */
.zx-dashed .pe--button .pb__main,
.zx-dashed .pe--button .pb__main *,
.zx-dashed .pe--button a,
.zx-dashed .pe--button .pe--button--wrapper {
	transform: none !important;
	animation: none !important;
	transition: color .2s ease !important;
	position: static !important;
	opacity: 1 !important;
}
.zx-dashed .pe--button *::before,
.zx-dashed .pe--button *::after {
	content: none !important;
	background: none !important;
}
.zx-dashed .pe--button .pb__hover { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   12.5 — explore card text: title clear of the category chip, description
   with air under it
   ══════════════════════════════════════════════════════════════════════ */
.leksa-showcase-rotate.style-explore .project-meta {
	padding: 26px 28px 26px !important;
}
.leksa-showcase-rotate.style-explore .project-meta .project-title {
	font-size: 24px !important;
	line-height: 1.25 !important;
	padding-right: 116px !important;
	margin-bottom: 10px !important;
}
.leksa-showcase-rotate.style-explore .sr--met--top {
	font-size: 12px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .6;
}
.leksa-showcase-rotate.style-explore .sr--met--bott {
	font-size: 15px !important;
	line-height: 1.55 !important;
	padding-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════════════════
   12.6 — card text is BLACK, phone cards get real spacing
   ══════════════════════════════════════════════════════════════════════ */
.leksa-showcase-rotate .project-meta,
.leksa-showcase-rotate .project-meta a,
.leksa-showcase-rotate .project-meta .project-title,
.leksa-showcase-rotate .sr--met--top,
.leksa-showcase-rotate .sr--met--bott {
	color: #111 !important;
}
@media (max-width: 550px) {
	/* phones run in explore mode, so match the explore selectors' weight */
	.leksa-showcase-rotate .project-meta,
	.leksa-showcase-rotate.style-explore .project-meta {
		padding: 14px 10px 18px !important;
	}
	.leksa-showcase-rotate .project-meta .project-title,
	.leksa-showcase-rotate.style-explore .project-meta .project-title {
		font-size: 16px !important;
		line-height: 1.3 !important;
		margin: 0 0 6px !important;
		padding-right: 0 !important;
	}
	.leksa-showcase-rotate .sr--met--top,
	.leksa-showcase-rotate.style-explore .sr--met--top { font-size: 11px !important; }
	.leksa-showcase-rotate .sr--met--bott,
	.leksa-showcase-rotate.style-explore .sr--met--bott {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}
}