/* Pagecode Site v1.9.16: on-brand layer for Ave theme pages (project pages).
 * Ave keeps rendering the content; this swaps the chrome and nudges type, colour and buttons. */

/* ---------- Ave chrome out, ours in ---------- */
body.pch-skin #header,
body.pch-skin .main-header,
body.pch-skin .lqd-mobile-sec,
body.pch-skin .lqd-sticky-placeholder,
body.pch-skin #footer,
body.pch-skin .main-footer,
body.pch-skin .lqd-back-to-top { display: none !important; }

/* Dark like the footer. Text colours are left to Ave so its light-on-dark content reads as designed. */
body.pch-skin { background: #12131A !important; font-family: 'DM Sans', system-ui, sans-serif !important; }
body.pch-skin #wrap,
body.pch-skin #lqd-contents-wrap,
body.pch-skin .lqd-contents,
body.pch-skin #content { background-color: transparent !important; }

.pch-skin-header { position: relative; z-index: 1000; }
.pch-skin-footer .pch-footer { margin-top: 0; }
.pch-skin-header, .pch-skin-footer { overflow: visible; }

/* ---------- Type ---------- */
body.pch-skin #lqd-contents-wrap,
body.pch-skin #lqd-contents-wrap p,
body.pch-skin #lqd-contents-wrap li { font-family: 'DM Sans', system-ui, sans-serif !important; }
body.pch-skin #lqd-contents-wrap p { line-height: 1.7; }

body.pch-skin #lqd-contents-wrap h1,
body.pch-skin #lqd-contents-wrap h2,
body.pch-skin #lqd-contents-wrap h3,
body.pch-skin #lqd-contents-wrap h4,
body.pch-skin #lqd-contents-wrap .ld-fh-element:not(h5):not(h6) {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: -.025em !important;
	text-transform: none !important;
}
body.pch-skin #lqd-contents-wrap h1 { line-height: 1.02 !important; }
body.pch-skin #lqd-contents-wrap h2,
body.pch-skin #lqd-contents-wrap h3 { line-height: 1.1 !important; }

/* small labels ("Website", section eyebrows) */
body.pch-skin #lqd-contents-wrap h5,
body.pch-skin #lqd-contents-wrap h6 {
	font-family: 'DM Sans', system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color: #20d279 !important;
}

body.pch-skin #lqd-contents-wrap p a:not(.btn), body.pch-skin #lqd-contents-wrap li a:not(.btn) { color: #20d279; }
body.pch-skin ::selection { background: #20d279; color: #10241A; }

/* ---------- Buttons ---------- */
body.pch-skin #lqd-contents-wrap .btn:not(.btn-naked):not(.btn-underlined):not(.btn-icon-only),
body.pch-skin #lqd-contents-wrap .vc_btn3 {
	background: #20d279 !important;
	color: #10241A !important;
	border: 2px solid #10241A !important;
	border-radius: 999px !important;
	box-shadow: 0 5px 0 #10241A !important;
	font-family: 'DM Sans', system-ui, sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	transition: transform .15s, box-shadow .15s !important;
}
body.pch-skin #lqd-contents-wrap .btn:not(.btn-naked):not(.btn-underlined):not(.btn-icon-only) *,
body.pch-skin #lqd-contents-wrap .vc_btn3 * { color: inherit !important; }
body.pch-skin #lqd-contents-wrap .btn:not(.btn-naked):not(.btn-underlined):not(.btn-icon-only):hover,
body.pch-skin #lqd-contents-wrap .vc_btn3:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #10241A !important; }
body.pch-skin #lqd-contents-wrap .btn:not(.btn-naked):not(.btn-underlined):not(.btn-icon-only):active { transform: translateY(3px); box-shadow: 0 2px 0 #10241A !important; }
body.pch-skin #lqd-contents-wrap .btn-underlined,
body.pch-skin #lqd-contents-wrap .btn-naked { color: #20d279 !important; font-weight: 700 !important; }

/* ---------- Lists: confetti bullets for plain text lists ---------- */
body.pch-skin #lqd-contents-wrap .wpb_text_column ul,
body.pch-skin #lqd-contents-wrap .ld-fancy-heading ul { list-style: none; padding-left: 0; }
body.pch-skin #lqd-contents-wrap .wpb_text_column ul li,
body.pch-skin #lqd-contents-wrap .ld-fancy-heading ul li { position: relative; padding-left: 28px; margin-bottom: .5em; }
body.pch-skin #lqd-contents-wrap .wpb_text_column ul li::before,
body.pch-skin #lqd-contents-wrap .ld-fancy-heading ul li::before {
	content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 3px;
	background: #20d279; transform: rotate(45deg);
}

/* ---------- Images: softer corners on plain single images (mockups untouched) ---------- */
body.pch-skin #lqd-contents-wrap .wpb_single_image img,
body.pch-skin #lqd-contents-wrap .ld-media-image img { border-radius: 18px; }

/* ---------- Related work / portfolio cards ---------- */
body.pch-skin #lqd-contents-wrap .lqd-pf-item .lqd-pf-item-inner,
body.pch-skin #lqd-contents-wrap .pf-item .pf-item-inner,
body.pch-skin #lqd-contents-wrap .lqd-pf-item figure {
	border-radius: 24px; overflow: hidden;
}
body.pch-skin #lqd-contents-wrap .lqd-pf-item .lqd-pf-title,
body.pch-skin #lqd-contents-wrap .lqd-pf-item h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: 800 !important; }
body.pch-skin #lqd-contents-wrap .lqd-pf-cat,
body.pch-skin #lqd-contents-wrap .lqd-pf-item .pf-info span {
	display: inline-block; padding: 4px 12px; border-radius: 999px; background: #E3F6EA; color: #10241A !important;
	font-family: 'DM Sans', system-ui, sans-serif !important; font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: none;
}

/* ---------- Testimonials / blockquotes ---------- */
body.pch-skin #lqd-contents-wrap blockquote {
	border: 3px solid #10241A; border-radius: 24px; background: #FFF0C7; padding: 24px 28px;
	box-shadow: 6px 6px 0 #10241A; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; color: #10241A;
}

/* ---------- Ave accent colours to logo green ---------- */
body.pch-skin #lqd-contents-wrap .text-primary,
body.pch-skin #lqd-contents-wrap .lqd-highlight-inner,
body.pch-skin #lqd-contents-wrap .ld-fh-txt .txt-rotate-keywords { color: #20d279 !important; }
body.pch-skin #lqd-contents-wrap .lqd-highlight-inner { background: #20d279 !important; }
body.pch-skin #lqd-contents-wrap .bg-primary { background-color: #20d279 !important; }

/* ---------- Ave category filter (portfolio category archives) ---------- */
body.pch-skin #lqd-contents-wrap .lqd-pf-filter li,
body.pch-skin #lqd-contents-wrap .filter-list li {
	padding: 9px 16px !important; border-radius: 999px; border: 2px solid #10241A; background: #fff;
	font-family: 'DM Sans', system-ui, sans-serif !important; font-weight: 700 !important; color: #10241A !important;
	text-transform: none !important; letter-spacing: 0 !important; margin: 0 6px 8px 0 !important;
}
body.pch-skin #lqd-contents-wrap .lqd-pf-filter li.active,
body.pch-skin #lqd-contents-wrap .filter-list li.active { background: #10241A; color: #fff !important; }
body.pch-skin #lqd-contents-wrap .lqd-pf-filter li::after,
body.pch-skin #lqd-contents-wrap .filter-list li::after { display: none !important; }

/* ---------- Our header, dark edition (matches the footer) ---------- */
.pch-skin-header .pch-nav-wrap { background: transparent; border-bottom: 2px dashed rgba(255,255,255,.12); }
.pch .pch-skin-header .pch-menu a,
.pch-skin-header .pch .pch-menu a,
body.pch-skin .pch-skin-header .pch-menu a { color: #C9D6CE; }
body.pch-skin .pch-skin-header .pch-menu a:hover { color: #fff; background: rgba(255,255,255,.08); }
body.pch-skin .pch-skin-header .pch-menu a.is-current { color: #10241A; background: #20d279; }
body.pch-skin .pch-skin-header .pch-btn--ghost { background: transparent; color: #fff; border-color: #fff; }
body.pch-skin .pch-skin-header .pch-btn--ghost:hover { background: #fff; color: #10241A; }
body.pch-skin .pch-skin-header .pch-btn--primary { box-shadow: 0 5px 0 #0A1A12; }
body.pch-skin .pch-skin-header .pch-burger { background: #20d279; border-color: #20d279; box-shadow: 0 4px 0 #0A1A12; }

/* footer sits straight on the dark page, no gap */

/* wrappers inherit .pch cream; keep them dark too */
body.pch-skin .pch-skin-footer { background: transparent; }

/* Transparent header that floats over the page hero: zero-height wrapper, so the hero starts at the very top
 * and the nav overflows onto it (no hard-coded offset, nothing to adjust if the logo size changes). */
body.pch-skin .pch-skin-header { background: transparent; height: 0; overflow: visible; }