/* ==========================================================================
   PIXELWORX — "Clean" design layer (theme v1.4.0)
   Apple-inspired: one neutral sans family, bold tight headlines, quiet
   labels, white / light-grey section rhythm, soft rounded surfaces, pill
   buttons. Loaded last on every page, so it overrides style.css and work.css
   without editing them. Remove this file's enqueue to roll back.

   Type: SF Pro on Apple devices (system font), Inter everywhere else.
   ========================================================================== */

:root {
	--clean-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

	--bg: #ffffff;
	--bg-warm: #f5f5f7;
	--surface: #ffffff;
	--fg: #1d1d1f;
	--fg-muted: #6e6e73;
	--fg-light: #86868b;
	--border: #d2d2d7;
	--border-light: #e8e8ed;
	--accent: #e43d30;
	--accent-hover: #c8342a;
	--accent-light: #fdeeed;

	--font-display: var(--clean-font);
	--font-body: var(--clean-font);
	--font-mono: var(--clean-font);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
	--shadow-md: 0 8px 30px rgba(0, 0, 0, .06);
	--clean-radius: 18px;
	--clean-radius-lg: 28px;
}

/* Work module tokens */
.pwxw {
	--w-bg: #ffffff;
	--w-warm: #f5f5f7;
	--w-fg: #1d1d1f;
	--w-muted: #6e6e73;
	--w-line: rgba(0, 0, 0, .08);
	--w-serif: var(--clean-font);
	--w-sans: var(--clean-font);
	--w-mono: var(--clean-font);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--clean-font);
	font-size: 17px;
	line-height: 1.47;
	letter-spacing: -0.022em;
	color: var(--fg);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body::before { display: none; } /* drop the grain texture */
::selection { background: rgba(228, 61, 48, .18); }

/* ---------- Headlines: bold, tight, no italics ---------- */
.hero-section h1,
.section-title,
.contact-title,
.case-hero__title,
.pwxw-intro__title,
.pwxw-ids__title,
.pwxw-close__title,
.pwxw-hero__title,
.pwxw-sec__title {
	font-family: var(--clean-font);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.06;
	text-wrap: balance;
}
.section-title,
.pwxw-sec__title { font-size: clamp(2rem, 4.6vw, 3.5rem); letter-spacing: -0.03em; }
.pwxw-intro__title,
.pwxw-ids__title,
.pwxw-close__title { font-size: clamp(2.4rem, 6vw, 4.8rem); letter-spacing: -0.04em; line-height: 1.04; }
.pwxw-ids__title { max-width: 14ch; }

.hero-section h1 span.accent,
.section-title em,
.contact-title em,
.pwxw-intro__title em,
.pwxw-close__title em { font-style: normal; color: var(--accent); }

.service-card h3,
.cap-block h4,
.work-card__title,
.team-name,
.philosophy-item h4,
.case-meta__value,
.case-nav__name,
.pwxw-card__title,
.pwxw-next__name,
.pwxw-ph__label {
	font-family: var(--clean-font);
	font-weight: 600;
	letter-spacing: -0.02em;
}
.pwxw-lead,
.pwxw-outcome p,
.case-outcome__text,
.case-content blockquote {
	font-family: var(--clean-font);
	font-style: normal;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.marquee-inner span,
.client-name { font-family: var(--clean-font); font-weight: 500; letter-spacing: -0.01em; }
.stat-num {
	font-family: var(--clean-font);
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--fg);
}
.about-visual::before { font-family: var(--clean-font); font-weight: 600; letter-spacing: -0.04em; }

/* ---------- Labels: quiet sentence case, no tracking ---------- */
.hero-tag,
.section-label,
.service-num,
.work-card__tag,
.contact-row .label,
.contact-form .form-group label,
.case-hero__tag,
.case-meta__label,
.case-outcome__label,
.case-nav__dir,
.case-content h4,
.case-content h5,
.case-content h6,
.pwxw-card__industry,
.pwxw-meta dt,
.pwxw-sec__num,
.pwxw-crumb,
.pwxw-intro__jump a,
.pwxw-next__label,
.pwxw-fig figcaption,
.pwxw-ph__tag,
.pwxw-draft,
.pwxw-points dt,
.pwxw-status,
.pwxw-concept-tag,
.pwxw-ids__count,
.pwxw-ids .pwxw-id__meta {
	font-family: var(--clean-font);
	text-transform: none;
	letter-spacing: -0.01em;
	font-weight: 600;
}
.hero-tag,
.section-label { font-size: 0.95rem; margin-bottom: 0.75rem; }
.section-label::before { display: none; }
.work-card__tag,
.pwxw-card__industry,
.case-meta__label,
.case-nav__dir,
.contact-row .label,
.contact-form .form-group label { font-size: 0.8rem; color: var(--fg-light); font-weight: 500; }
.work-card__tag { color: var(--accent); font-weight: 600; }
.pwxw-ids .pwxw-id__meta { font-size: 0.75rem; font-weight: 400; letter-spacing: -0.005em; }
.pwxw-ids__count { font-size: 0.85rem; font-weight: 500; }
.section-subtitle,
.pwxw-ids__lede {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: var(--fg-muted);
	font-weight: 400;
	max-width: 36em;
}

/* ---------- Navigation: slim, frosted ---------- */
.site-nav {
	padding: 0.6rem 2.5rem;
	min-height: 52px;
	background: rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	box-shadow: none;
}
.site-nav.scrolled { box-shadow: none; border-bottom-color: rgba(0, 0, 0, .08); }
.nav-logo img { height: 26px; }
.site-nav .nav-links {
	font-size: 0.8rem;
	text-transform: none;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: rgba(29, 29, 31, .82);
	gap: 2rem;
}
.site-nav .nav-links a::after { display: none; }
.site-nav .nav-links a:hover,
.site-nav .nav-links a:focus { color: var(--fg); }
.nav-cta {
	font-size: 0.8rem;
	text-transform: none;
	letter-spacing: -0.01em;
	font-weight: 500;
	padding: 0.45rem 1rem;
}
.nav-cta:hover { transform: none; box-shadow: none; }

/* ---------- Buttons: pills ---------- */
.btn-submit,
.wpcf7-submit,
.pwxw-btn {
	font-family: var(--clean-font);
	text-transform: none;
	letter-spacing: -0.01em;
	font-size: 1.0625rem;
	font-weight: 500;
	border-radius: 980px;
	padding: 0.8rem 1.6rem;
	box-shadow: none;
}
.btn-submit:hover,
.wpcf7-submit:hover,
.pwxw-btn:hover { transform: none; box-shadow: none; }

/* ---------- Sections ---------- */
.pw-section { padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 3rem); }
.pw-section--warm { background: var(--bg-warm); }
.pw-section--white { background: #fff; }

/* ---------- Hero ---------- */
.hero-section h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); max-width: 16ch; }
.hero-desc { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.45; letter-spacing: -0.02em; max-width: 34em; }
.hero-section--has-image .hero-desc { color: rgba(255, 255, 255, .86); }
.hero-section--has-image .hero-tag { color: rgba(255, 255, 255, .86); }
.hero-scroll { text-transform: none; letter-spacing: -0.01em; font-size: 0.8rem; }

/* ---------- Surfaces: soft rounded cards, no hard borders ---------- */
.services-grid {
	gap: 16px;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
.service-card {
	background: #fff;
	border-radius: var(--clean-radius);
	box-shadow: var(--shadow-sm);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.pw-section--white .service-card,
.pw-section:not(.pw-section--warm) .service-card { background: var(--bg-warm); box-shadow: none; }
.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.work-card__image,
.work-card__thumb,
.work-card__thumb img { border-radius: var(--clean-radius); }
.work-card__image { overflow: hidden; }
.work-card__title { font-size: 1.1rem; line-height: 1.25; }

.case-content blockquote {
	border-left: 0;
	background: var(--bg-warm);
	border-radius: var(--clean-radius);
	padding: 1.6rem 1.8rem;
}

/* ---------- Forms ---------- */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select {
	font-family: var(--clean-font);
	font-size: 1rem;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 0.85rem 1rem;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(228, 61, 48, .14);
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--bg-warm);
	border-top: 0;
	font-size: 0.75rem;
	color: var(--fg-muted);
	letter-spacing: -0.005em;
}
.site-footer .footer-links a:hover { color: var(--fg); }

/* ---------- Work module surfaces ---------- */
.pwxw-plate,
.pwxw-ph,
.pwxw-card__media { border-radius: var(--clean-radius); overflow: hidden; }
.pwxw-ids { background: #000; }
.pwxw-ids .pwxw-ids__grid { border: 0; gap: 12px; }
.pwxw-ids .pwxw-id {
	border: 0;
	background: #1d1d1f;
	border-radius: var(--clean-radius);
	overflow: hidden;
}
.pwxw-ids .pwxw-id:hover figure { background: #232325; }
.pwxw-ids .pwxw-id figcaption { border-top: 0; padding-top: 4px; }
.pwxw-ids .pwxw-id__brand { font-family: var(--clean-font); font-weight: 600; letter-spacing: -0.015em; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
	body { font-size: 16px; }
	.site-nav { padding: 0.55rem 1.25rem; min-height: 48px; background: rgba(255, 255, 255, .9); }
	.nav-logo img { height: 24px; }
	.hero-section,
	.hero-section--has-image { min-height: 0; justify-content: flex-end; padding-top: calc(52px + 18svh); }
	.hero-content { padding: 0 1.25rem 2.25rem; }
	.hero-tag { font-size: 0.82rem; margin-bottom: 0.6rem; line-height: 1.4; }
	.hero-section h1 { font-size: clamp(2.3rem, 10.5vw, 3.2rem); line-height: 1.05; }
	.hero-bottom { margin-top: 1rem; }
	.hero-desc { font-size: 1rem; }
	.hero-section--has-image .hero-bg-image { background-position: center 30%; }
	.hero-section--has-image .hero-bg-overlay {
		background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .7) 45%, rgba(0, 0, 0, .25) 80%, rgba(0, 0, 0, .1) 100%);
	}
	.pw-section { padding: 3.5rem 1.25rem; }
	.section-label { font-size: 0.85rem; }
	.section-title { font-size: clamp(1.9rem, 8vw, 2.5rem); }
	.section-subtitle { font-size: 1.05rem; margin-bottom: 2.25rem; }
	.services-grid { gap: 12px; }
	.pwxw-ids .pwxw-ids__grid { gap: 8px; }
	.pwxw-ids .pwxw-id { border-radius: 14px; }
	.pwxw-ids .pwxw-id__meta { font-size: 0.68rem; }
	.btn-submit, .wpcf7-submit, .pwxw-btn { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.service-card { transition: none; }
}


/* ---------- Printed documents (order sheets, forms): shown as paper ---------- */
.pwxw .pwxw-fig > .pwxw-plate.pwxw-plate--doc,
.pwxw .pwxw-plate.pwxw-plate--doc {
	aspect-ratio: auto;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: clamp(20px, 4vw, 56px);
	background: #f5f5f7 !important;
	box-shadow: none;
}
.pwxw .pwxw-plate--doc img {
	width: 100%;
	max-width: 760px !important;
	height: auto;
	max-height: none !important;
	object-fit: contain;
	filter: none !important;
	opacity: 1 !important;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 40px rgba(0, 0, 0, .10);
	transform: none !important;
}
@media (max-width: 768px) {
	.pwxw .pwxw-plate.pwxw-plate--doc { padding: 16px; }
}


/* ---------- Featured cards: details always visible (v1.4.5) ----------
   The dark hover overlay blended into dark covers and hid on touch screens.
   Details now sit under the image on every device, with a clear pill CTA. */
.pwxw .pwxw-card__reveal { display: none !important; }
.pwxw .pwxw-card__scope { display: block !important; margin-top: 8px; font-size: 0.95rem; color: var(--fg-muted, #6e6e73); }
.pwxw .pwxw-card__industry { font-size: 0.85rem; font-weight: 600; color: var(--accent, #e43d30); }
.pwxw .pwxw-card__headline { color: var(--fg, #1d1d1f); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.4; letter-spacing: -0.02em; }
.pwxw .pwxw-card__title { color: var(--fg, #1d1d1f); transition: color .3s ease; }
.pwxw .pwxw-card__media { border-radius: 18px; overflow: hidden; }
.pwxw .pwxw-card__more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 16px;
	padding: 10px 20px;
	border-radius: 980px;
	background: var(--accent, #e43d30);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
	transition: background-color .25s ease, transform .25s ease;
}
.pwxw .pwxw-card--full .pwxw-card__more { justify-self: start; grid-column: 2; }
@media (max-width: 767px) { .pwxw .pwxw-card--full .pwxw-card__more { grid-column: 1; } }
@media (hover: hover) {
	.pwxw .pwxw-card__link:hover .pwxw-card__title { color: var(--accent, #e43d30); }
	.pwxw .pwxw-card__link:hover .pwxw-card__more { background: var(--accent-hover, #c8342a); }
	.pwxw .pwxw-card__link:hover .pwxw-plate img { transform: scale(1.03); }
}
.pwxw .pwxw-card__link:focus-visible .pwxw-card__more { outline: 2px solid var(--accent, #e43d30); outline-offset: 3px; }
@media (max-width: 767px) {
	.pwxw .pwxw-card__media { border-radius: 14px; }
	.pwxw .pwxw-card__more { margin-top: 12px; padding: 9px 18px; font-size: 0.9rem; }
}

/* ---------- Mobile menu fix (v1.4.6) ----------
   The frosted blur on the nav (added in v1.4.0) turned the nav into the
   positioning box for the full-screen menu, so the menu was trapped inside
   the 60px bar. On phones the nav is solid white again (no blur), and the
   menu is restyled as a clean full-screen sheet. */
@media (max-width: 768px) {
	.site-nav,
	.site-nav.scrolled {
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		filter: none !important;
		transform: none !important;
		background: #fff !important;
		z-index: 9990;
	}
	.site-nav .nav-links {
		position: fixed !important;
		inset: 0 !important;
		height: 100vh;
		height: 100dvh;
		width: 100%;
		background: #fff !important;
		padding: 88px 28px 40px !important;
		z-index: 9991 !important;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.site-nav .nav-links.active { display: flex !important; animation: pwxMenuIn .28s ease both; }
	.site-nav .nav-links a {
		font-family: var(--clean-font) !important;
		font-size: 1.75rem !important;
		font-weight: 600 !important;
		letter-spacing: -0.03em !important;
		line-height: 1.15;
		text-transform: none !important;
		color: var(--fg) !important;
		padding: 14px 0 !important;
		border-bottom: 0 !important;
	}
	.site-nav .nav-links a:active,
	.site-nav .nav-links a:hover { color: var(--accent) !important; }
	.site-nav .nav-links .current-menu-item > a,
	.site-nav .nav-links a[aria-current="page"] { color: var(--accent) !important; }
	.site-nav .nav-links li { width: 100%; list-style: none; }
	.nav-logo,
	.menu-toggle { position: relative; z-index: 9992 !important; }
	.menu-toggle { padding: 10px; margin-right: -10px; }
}
@keyframes pwxMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-nav .nav-links.active { animation: none; } }

/* ---------- Logo size (v1.4.7): slightly larger on all screens ---------- */
.site-nav .nav-logo img,
.site-nav .nav-logo img.logo-wordmark { height: 34px; width: auto; }
@media (max-width: 768px) {
	.site-nav .nav-logo img,
	.site-nav .nav-logo img.logo-icon { height: 40px; width: auto; }
	.hero-section,
	.hero-section--has-image { padding-top: calc(64px + 18svh); }
}


/* ---------- Film in case studies (v1.4.8) ---------- */
.pwxw .pwxw-fig > .pwxw-plate.pwxw-plate--video,
.pwxw .pwxw-plate.pwxw-plate--video {
	aspect-ratio: 16 / 9 !important;
	height: auto;
	background: #000 !important;
	padding: 0;
}
.pwxw .pwxw-plate--video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* v1.4.11 — client identity badge (client's own logo, not Pixelworx work) */
.pwxw-meta__client dd { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.pwxw-client-mark { grid-row: span 2; height: 56px; width: auto; display: block; }
.pwxw-client-mark__name { font-weight: 600; }
.pwxw-client-mark__note { font-size: 0.75rem; color: var(--w-muted, #6e6e73); letter-spacing: 0.01em; }
.pwxw-meta--reveal .pwxw-client-mark { filter: invert(1); height: 40px; }
@media (max-width: 600px) { .pwxw-client-mark { height: 48px; } }