/*
Theme Name: CNJ Builders
Theme URI: https://cnjbuilders.com
Author: CNJ Builders
Description: Custom theme for CNJ Builders, Rothesay NB. Projects are managed under Projects in the dashboard; videos, reviews and the home page video under CNJ Settings.
Version: 1.0.4
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: cnj
*/

/* ---------- Tokens ---------- */
:root {
	--cnj-ink: #111111;
	--cnj-black: #0E0E0E;
	--cnj-body: #3D3D39;
	--cnj-soft: #55554F;
	--cnj-muted: #6A6A66;
	--cnj-line: #DADAD6;
	--cnj-line-light: #ECECEA;
	--cnj-grey: #F4F4F2;
	--cnj-accent: #E94D1A;
	--cnj-accent-dark: #C23E12;
	--cnj-head: "Inter Tight", "Inter", system-ui, sans-serif;
	--cnj-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cnj-gutter: 40px;
	--cnj-inner: 1120px;
	--cnj-inner-wide: 1280px;
	--cnj-pad: 140px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: #FFFFFF;
	color: var(--cnj-ink);
	font-family: var(--cnj-text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--cnj-ink); }
a:hover { color: var(--cnj-muted); }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 2px solid var(--cnj-accent); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--cnj-head); font-weight: 400; margin: 0; color: inherit; }
h1 { font-size: clamp(44px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -0.04em; max-width: 1000px; }
h2 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; }
/* The orange full stop after page and section headings. */
h1:not(.cnj-nodot)::after, h2:not(.cnj-nodot)::after { content: "."; color: var(--cnj-accent); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.cnj-skip:focus { clip: auto; clip-path: none; height: auto; width: auto; z-index: 100; top: 8px; left: 8px; background: #fff; padding: 12px 16px; }

/* ---------- Buttons and links ---------- */
.cnj-btn,
.wp-block-button__link {
	display: inline-block;
	background: var(--cnj-accent);
	color: var(--cnj-ink);
	border: 0;
	border-radius: 999px;
	padding: 16px 28px;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease;
}
.cnj-btn:hover, .wp-block-button__link:hover { background: var(--cnj-accent-dark); color: #fff; }
.cnj-btn--small { padding: 12px 20px; font-size: 14px; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.cnj-link,
.cnj-content p.cnj-link a {
	display: inline-block;
	padding: 10px 0;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 2px solid var(--cnj-accent);
}
.cnj-content p.cnj-link { padding: 0; border: 0; }
.cnj-round {
	width: 48px; height: 48px; border-radius: 999px;
	border: 1px solid #444; background: transparent; color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
}
.cnj-round--light { border-color: rgba(255,255,255,.6); }
.cnj-round:hover { border-color: var(--cnj-accent); }
.cnj-label { font-size: 13px; color: var(--cnj-muted); margin: 0 0 8px; }
.cnj-num { font-size: 13px; color: var(--cnj-accent); }

/* ---------- Header ---------- */
.cnj-header { background: #fff; border-bottom: 1px solid var(--cnj-line-light); position: relative; z-index: 20; }
.cnj-header__inner {
	max-width: 1360px; margin: 0 auto; padding: 22px var(--cnj-gutter);
	display: flex; align-items: center; gap: 12px 32px;
}
.cnj-logo { display: flex; align-items: center; margin-right: auto; }
.cnj-logo img { height: 40px; width: auto; }
.cnj-logo__light { display: none !important; }
.cnj-menu-btn {
	display: none; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--cnj-line);
	background: #fff; color: var(--cnj-ink); align-items: center; justify-content: center; flex: none;
}
.cnj-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 32px; font-size: 14px; }
.cnj-nav__list a { display: block; text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; }
.cnj-nav__list .current-menu-item > a,
.cnj-nav__list .current-menu-ancestor > a,
.cnj-nav__list .current_page_parent > a { border-bottom-color: var(--cnj-accent); }
.cnj-header__cta { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.cnj-header__phone { text-decoration: none; padding: 12px 0; white-space: nowrap; }
.cnj-header .cnj-btn { white-space: nowrap; }

/* Home: header sits over the video, menu behind a button. */
.cnj-home .cnj-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; border: 0; }
.cnj-home .cnj-header__inner { max-width: none; padding: 28px var(--cnj-gutter); }
.cnj-home .cnj-menu-btn { display: inline-flex; border: 0; background: rgba(255,255,255,.92); order: -1; }
.cnj-home .cnj-logo { margin-right: auto; }
.cnj-home .cnj-logo__dark { display: none !important; }
.cnj-home .cnj-logo__light { display: block !important; }
.cnj-home .cnj-header__phone { color: #fff; }
.cnj-home .cnj-header .cnj-btn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.cnj-home .cnj-header .cnj-btn:hover { background: var(--cnj-accent); border-color: var(--cnj-accent); color: var(--cnj-ink); }

/* Menu panel (home on all screens, every page on small screens). */
.cnj-home .cnj-nav,
.cnj-header.is-compact .cnj-nav {
	display: none; position: absolute; top: calc(100% - 8px); left: var(--cnj-gutter);
	background: #fff; padding: 24px 32px; min-width: 260px; box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.cnj-home .cnj-nav.is-open,
.cnj-header.is-compact .cnj-nav.is-open { display: block; }
.cnj-home .cnj-nav__list,
.cnj-header.is-compact .cnj-nav__list { flex-direction: column; gap: 0; font-family: var(--cnj-head); font-size: 24px; letter-spacing: -0.01em; }
.cnj-home .cnj-nav__list a,
.cnj-header.is-compact .cnj-nav__list a { color: var(--cnj-ink); padding: 8px 0; border: 0; }

@media (max-width: 1080px) {
	.cnj-header .cnj-menu-btn { display: inline-flex; order: -1; }
	.cnj-header { --compact: 1; }
	.cnj-nav { display: none; position: absolute; top: calc(100% - 8px); left: var(--cnj-gutter); right: var(--cnj-gutter); max-width: 360px; background: #fff; padding: 20px 28px; box-shadow: 0 12px 40px rgba(0,0,0,.12); }
	.cnj-nav.is-open { display: block; }
	.cnj-nav__list { flex-direction: column; gap: 0; font-family: var(--cnj-head); font-size: 22px; }
	.cnj-nav__list a { padding: 8px 0; border: 0; }
	.cnj-nav__list .current-menu-item > a { color: var(--cnj-accent-dark); }
}
@media (max-width: 640px) {
	:root { --cnj-gutter: 20px; --cnj-pad: 88px; }
	.cnj-header__inner, .cnj-home .cnj-header__inner { padding-top: 16px; padding-bottom: 16px; gap: 12px; }
	.cnj-logo img { height: 32px; }
	.cnj-header__phone { display: none; }
	.cnj-header .cnj-btn--small { padding: 10px 16px; font-size: 13px; }
}

/* ---------- Page sections (blocks) ---------- */
.cnj-content { display: block; }
.cnj-content > :not(.cnj-sec):not(.cnj-hero):not(.cnj-phero):not(.cnj-details):not(.cnj-pnav):not(.alignfull) {
	max-width: var(--cnj-inner); margin-left: auto; margin-right: auto; padding-left: var(--cnj-gutter); padding-right: var(--cnj-gutter); box-sizing: content-box;
}
.cnj-sec {
	--inner: var(--cnj-inner);
	padding: var(--cnj-pad) max(var(--cnj-gutter), calc((100% - var(--inner)) / 2));
	margin: 0;
}
.cnj-sec--wide { --inner: var(--cnj-inner-wide); }
.cnj-sec--grey { background: var(--cnj-grey); }
.cnj-sec--dark { background: var(--cnj-black); color: #fff; }
.cnj-sec--dark a { color: #fff; }
.cnj-sec--hero { padding-top: 120px; padding-bottom: 96px; }
.cnj-sec--flush-top { padding-top: 0; }
.cnj-sec--flush-bottom { padding-bottom: 0; }
.cnj-sec--flush { padding-top: 0; padding-bottom: 0; }
/* A "flush" section only shares the gap with a white section above it. After a dark or grey band it keeps its own space. */
.cnj-sec--dark + .cnj-sec--flush-top:not(.cnj-sec--dark),
.cnj-sec--grey + .cnj-sec--flush-top:not(.cnj-sec--grey) { padding-top: var(--cnj-pad); }
.cnj-sec--line { border-top: 1px solid var(--cnj-line-light); }
.cnj-sec--short { padding-top: 72px; padding-bottom: 72px; }
.cnj-sec + .cnj-sec--flush-top.cnj-sec--grey { padding-top: var(--cnj-pad); }
@media (max-width: 640px) { .cnj-sec--hero { padding-top: 72px; padding-bottom: 56px; } }

/* Spacing inside sections. */
.cnj-sec > * + * { margin-top: 20px; }
.cnj-eyebrow { font-size: 13px; color: var(--cnj-muted); }
.cnj-sec > .cnj-eyebrow + h1 { margin-top: 24px; }
.cnj-lead {
	font-family: var(--cnj-head); font-weight: 300; font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.4; letter-spacing: -0.015em; max-width: 860px;
}
.cnj-sec > h1 + .cnj-lead { margin-top: 32px; }
.cnj-sec > .wp-block-buttons { margin-top: 40px; }
.cnj-statement {
	font-family: var(--cnj-head); font-weight: 300; font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.35; letter-spacing: -0.015em; color: var(--cnj-ink);
}
.cnj-intro {
	font-family: var(--cnj-head); font-weight: 300; font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.3; letter-spacing: -0.02em; max-width: 1000px;
}
.cnj-note { font-size: 16px; line-height: 1.7; color: var(--cnj-soft); max-width: 640px; }
.cnj-sec--dark .cnj-note { color: #A8A8A3; }
.cnj-prose { font-size: 17px; line-height: 1.75; color: var(--cnj-body); }
.cnj-prose > * + * { margin-top: 20px; }
.cnj-prose > .cnj-statement + * { margin-top: 28px; }
.cnj-prose h3 { color: var(--cnj-ink); margin-top: 40px; }
.cnj-pull {
	font-family: var(--cnj-head); font-weight: 300; font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.3; letter-spacing: -0.02em; color: var(--cnj-ink);
}
.cnj-prose > .cnj-pull { margin: 40px 0; }
.cnj-side-note { margin-top: 20px; font-size: 16px; line-height: 1.7; color: var(--cnj-body); max-width: 340px; }

/* Two columns: heading on the left, content on the right. */
.cnj-split { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-start; }
.cnj-split > * { margin: 0 !important; min-width: 0; }
.cnj-split > :first-child { flex: 1 1 280px; }
.cnj-split > :last-child { flex: 2.4 1 560px; }
/* Two white split sections in a row share one gap. After a grey or dark band, keep the full gap. */
.cnj-split.cnj-sec:not(.cnj-sec--grey):not(.cnj-sec--dark) + .cnj-split.cnj-sec:not(.cnj-sec--grey):not(.cnj-sec--dark) { padding-top: 0; }

/* Wide photo. */
.cnj-banner img, img.cnj-banner { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.cnj-photo img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.wp-block-image { margin: 0; }
.wp-block-image figcaption, .wp-element-caption { margin-top: 14px; font-size: 13px; color: var(--cnj-muted); }
@media (max-width: 640px) { .cnj-banner img, img.cnj-banner, .cnj-photo img { aspect-ratio: 4 / 3; } }

/* Stats row. */
.cnj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }
@media (max-width: 640px) { .cnj-stats { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .cnj-details dl { grid-template-columns: 1fr 1fr; } }
.cnj-sec > .cnj-stats { margin-top: 88px; padding-top: 32px; border-top: 1px solid #E6E6E3; }
.cnj-stats > p { font-size: 13px; color: var(--cnj-muted); margin: 0; }
.cnj-stats > p strong { display: block; margin-bottom: 8px; font-family: var(--cnj-head); font-weight: 400; font-size: 28px; letter-spacing: -0.02em; color: var(--cnj-ink); }

/* Checklist with thin rules. */
ul.cnj-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 40px; font-size: 16px; color: var(--cnj-ink); }
ul.cnj-checks li { border-top: 1px solid var(--cnj-line); padding: 18px 0; margin: 0; }
.cnj-prose > ul.cnj-checks { margin-top: 48px; margin-bottom: 48px; }

/* Numbered steps. */
ol.cnj-steps { list-style: none; margin: 0; padding: 0; counter-reset: cnj; }
ol.cnj-steps > li {
	counter-increment: cnj; position: relative; border-top: 1px solid var(--cnj-line);
	padding: 36px 0 36px 72px; margin: 0; font-size: 16px; line-height: 1.7; color: var(--cnj-body);
}
ol.cnj-steps > li:last-child { border-bottom: 1px solid var(--cnj-line); }
ol.cnj-steps > li::before { content: counter(cnj, decimal-leading-zero); position: absolute; left: 0; top: 40px; font-size: 13px; color: var(--cnj-accent); }
ol.cnj-steps > li strong { display: block; margin-bottom: 12px; font-family: var(--cnj-head); font-weight: 400; font-size: 24px; letter-spacing: -0.015em; color: var(--cnj-ink); line-height: 1.25; }
/* Compact four-across version used on the home page. */
ol.cnj-steps--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 40px 32px; }
.cnj-prose > ol.cnj-steps--grid { margin-top: 64px; }
ol.cnj-steps--grid > li, ol.cnj-steps--grid > li:last-child { border: 0; padding: 0; font-size: 14px; line-height: 1.6; color: var(--cnj-soft); }
ol.cnj-steps--grid > li::before { position: static; display: block; margin-bottom: 12px; }
ol.cnj-steps--grid > li strong { font-size: 19px; margin-bottom: 8px; }
@media (max-width: 640px) { ol.cnj-steps > li { padding-left: 48px; } }

/* Grid of short points (dark "What makes us different"). */
.cnj-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 64px; }
.cnj-sec > .cnj-points { margin-top: 64px; }
.cnj-points > * { border-top: 1px solid var(--cnj-line); padding: 32px 0 48px; margin: 0; }
.cnj-sec--dark .cnj-points > * { border-top-color: #2A2A2A; }
.cnj-points h3 + p { margin-top: 14px; }
.cnj-points p { font-size: 15px; line-height: 1.7; color: var(--cnj-body); }
.cnj-sec--dark .cnj-points p { color: #A8A8A3; }

/* People. */
.cnj-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px 32px; }
.cnj-people > * > * + * { margin-top: 4px; }
.cnj-people .cnj-role { font-size: 14px; color: var(--cnj-muted); }
.cnj-people .cnj-role + p { margin-top: 16px; font-size: 15px; line-height: 1.65; color: var(--cnj-body); }
.cnj-people--inline { display: flex; flex-wrap: wrap; gap: 48px; font-size: 14px; }
.cnj-people--inline p { margin: 0; }

/* Quotes. */
.wp-block-quote.cnj-quote { margin: 0; padding: 0; border: 0; max-width: 960px; }
.wp-block-quote.cnj-quote p {
	font-family: var(--cnj-head); font-weight: 300; font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1.32; letter-spacing: -0.02em;
}
.wp-block-quote.cnj-quote cite { display: block; margin-top: 28px; font-size: 14px; font-style: normal; color: var(--cnj-muted); }

/* FAQ. */
.cnj-faq { border-bottom: 1px solid var(--cnj-line); }
.cnj-faq > * + * { margin-top: 0 !important; }
.wp-block-details { border-top: 1px solid var(--cnj-line); margin: 0; }
.wp-block-details summary {
	padding: 26px 0; font-family: var(--cnj-head); font-size: 21px; letter-spacing: -0.01em;
	display: flex; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; color: var(--cnj-accent); }
.wp-block-details[open] summary::after { content: "\2212"; }
.wp-block-details > p { margin: 0 0 28px; font-size: 16px; line-height: 1.7; color: var(--cnj-body); max-width: 640px; }

/* Section heading row with a link on the right. */
.cnj-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; }

/* ---------- Home hero ---------- */
.cnj-hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 1000px; overflow: hidden; background: var(--cnj-black); color: #fff; }
.cnj-hero__slide { position: absolute; inset: 0; }
.cnj-hero__slide[hidden] { display: none; }
.cnj-hero__media, .cnj-hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cnj-hero__shade { position: absolute; inset: 0; background: rgba(10,10,10,.38); }
.cnj-hero__text {
	position: absolute; left: clamp(20px, 6.6vw, 96px); bottom: 48px; max-width: 560px; padding-right: 20px;
}
.cnj-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cnj-tags span { font-size: 12px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; }
.cnj-hero h1, .cnj-hero__title {
	margin: 20px 0 0; font-family: var(--cnj-head); font-weight: 400; font-size: clamp(40px, 5vw, 72px);
	line-height: 1.02; letter-spacing: -0.035em; max-width: none;
}
.cnj-hero__sub { margin-top: 16px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88); }
.cnj-hero__link { display: inline-block; margin-top: 20px; color: #fff; font-size: 14px; padding: 10px 0; text-decoration: none; border-bottom: 2px solid var(--cnj-accent); }
.cnj-hero__link:hover { color: #fff; border-bottom-color: #fff; }
.cnj-hero__scroll {
	position: absolute; left: var(--cnj-gutter); top: 50%; transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl; font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.85);
	display: flex; align-items: center; gap: 14px;
}
.cnj-hero__scroll span { display: block; width: 1px; height: 48px; background: rgba(255,255,255,.6); }
.cnj-hero__nav { position: absolute; right: clamp(20px, 3vw, 40px); bottom: 48px; display: flex; align-items: center; gap: 20px; font-size: 13px; color: rgba(255,255,255,.85); }
.cnj-hero__count { display: flex; align-items: center; gap: 12px; }
.cnj-hero__bar { display: block; width: 40px; height: 2px; background: var(--cnj-accent); }
@media (max-width: 900px) {
	.cnj-hero__scroll { display: none; }
	.cnj-hero__text { left: var(--cnj-gutter); bottom: 120px; }
	.cnj-hero__nav { left: var(--cnj-gutter); right: auto; bottom: 40px; }
}

/* ---------- Project cards ---------- */
.cnj-grid--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 56px 32px; }
.cnj-grid--big { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 64px 32px; }
.cnj-grid--three { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 40px 32px; }
.cnj-card { text-decoration: none; color: var(--cnj-ink); display: flex; flex-direction: column; gap: 6px; }
.cnj-card[hidden] { display: none; }
.cnj-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 12px; transition: opacity .2s ease; }
.cnj-card__img--empty { display: block; background: var(--cnj-line-light); }
.cnj-card:hover { color: var(--cnj-ink); }
.cnj-card:hover .cnj-card__img { opacity: .88; }
.cnj-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.cnj-card__title { font-family: var(--cnj-head); font-size: 22px; letter-spacing: -0.015em; }
.cnj-card:hover .cnj-card__title { text-decoration: underline; text-decoration-color: var(--cnj-accent); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.cnj-card__status { font-size: 13px; color: var(--cnj-muted); }
.cnj-card__type { font-size: 14px; color: var(--cnj-soft); }
.cnj-projects__more { margin-top: 48px; }
/* On the home page the project grid lines up with the sections around it (same width as About, Services etc.). */
.cnj-sec:has(.cnj-projects), .cnj-sec:has(.cnj-reels) { --inner: var(--cnj-inner); }
.cnj-projects .cnj-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 48px 32px; }

.cnj-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cnj-sec > .cnj-filters { margin-top: 56px; }
.cnj-filter {
	font-size: 13px; padding: 10px 16px; min-height: 40px; border-radius: 999px;
	border: 1px solid #D4D4D0; background: #fff; color: var(--cnj-ink);
}
.cnj-filter:hover { border-color: var(--cnj-ink); }
.cnj-filter[aria-pressed="true"] { background: var(--cnj-accent); border-color: var(--cnj-accent); }

.cnj-grid--small { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 40px 24px; }
.cnj-sec > .cnj-grid--small { margin-top: 48px; }
.cnj-small { margin: 0; }
.cnj-small img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.cnj-small figcaption { margin-top: 14px; }
.cnj-small__title { display: block; font-family: var(--cnj-head); font-size: 18px; }
.cnj-small__type { display: block; margin-top: 4px; font-size: 13px; color: var(--cnj-muted); }
.cnj-more-note { margin-top: 56px !important; padding-top: 28px; border-top: 1px solid var(--cnj-line); font-size: 15px; line-height: 1.7; color: var(--cnj-body); max-width: 720px; }

/* ---------- Services ---------- */
ul.cnj-svc-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--cnj-line); }
ul.cnj-svc-list li { border-top: 1px solid var(--cnj-line); margin: 0; }
ul.cnj-svc-list a { text-decoration: none; display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 28px 0; align-items: baseline; }
ul.cnj-svc-list .cnj-num { width: 32px; }
.cnj-svc-list__title { flex: 1 1 260px; font-family: var(--cnj-head); font-size: 24px; letter-spacing: -0.015em; }
.cnj-svc-list__text { flex: 1 1 260px; font-size: 15px; line-height: 1.6; color: var(--cnj-soft); }
ul.cnj-svc-list a:hover .cnj-svc-list__title { color: var(--cnj-accent-dark); }

.cnj-svc-rows { display: flex; flex-direction: column; gap: 120px; }
.cnj-svc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 80px; }
.cnj-svc-row:nth-child(even) { flex-direction: row-reverse; }
.cnj-svc-row__img { flex: 1.3 1 520px; min-width: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cnj-svc-row__text { flex: 1 1 400px; min-width: 0; }
.cnj-svc-row__text h2 { margin-top: 16px; }
.cnj-svc-row__text p:not(.cnj-num) { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--cnj-body); }
.cnj-svc-row__text .cnj-link { margin-top: 28px; }
@media (max-width: 640px) { .cnj-svc-rows { gap: 72px; } .cnj-svc-row__img { flex-basis: 100%; } .cnj-svc-row__text { flex-basis: 100%; } }

/* ---------- Reels ---------- */
.cnj-reels__intro { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--cnj-soft); max-width: 560px; }
.cnj-reels--dark .cnj-reels__intro { color: #A8A8A3; }
.cnj-reels--dark { color: #fff; }
.cnj-reels__row { display: flex; gap: 20px; overflow-x: auto; margin-top: 48px; padding-bottom: 12px; scroll-snap-type: x mandatory; }
.cnj-reel { flex: 0 0 var(--w, 240px); width: var(--w, 240px); margin: 0; scroll-snap-align: start; }
.cnj-reel__media { display: block; width: 100%; aspect-ratio: 9 / 16; height: auto; border: 0; background: var(--cnj-black); object-fit: cover; }
.cnj-reel figcaption { margin-top: 12px; font-size: 14px; }
.cnj-reel__sub { display: block; margin-top: 2px; font-size: 13px; color: var(--cnj-muted); }
.cnj-reels--dark .cnj-reel__sub { color: #A8A8A3; }
.cnj-sec--dark .cnj-reels__row, .cnj-sec--dark .cnj-reel figcaption { color: #fff; }

/* ---------- Reviews ---------- */
.cnj-review { margin: 0; max-width: 960px; }
.cnj-review[hidden] { display: none; }
.cnj-review blockquote { margin: 0; font-family: var(--cnj-head); font-weight: 300; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.32; letter-spacing: -0.02em; }
.cnj-review figcaption { margin-top: 32px; font-size: 14px; color: #A8A8A3; }
.cnj-review figcaption span { color: #fff; }
.cnj-sec:not(.cnj-sec--dark) .cnj-review figcaption { color: var(--cnj-muted); }
.cnj-sec:not(.cnj-sec--dark) .cnj-review figcaption span { color: var(--cnj-ink); }
.cnj-reviews__nav { display: flex; align-items: center; gap: 20px; margin-top: 48px; font-size: 13px; color: #A8A8A3; }

/* ---------- Project page ---------- */
.cnj-phero { position: relative; height: 78vh; min-height: 560px; max-height: 860px; overflow: hidden; background: var(--cnj-black); color: #fff; }
.cnj-phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cnj-phero__text { position: absolute; left: 0; right: 0; bottom: 0; max-width: 1360px; margin: 0 auto; padding: 0 var(--cnj-gutter) 56px; }
.cnj-crumb { margin: 0 0 18px; font-size: 13px; color: rgba(255,255,255,.85); }
.cnj-crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.cnj-crumb a:hover { color: #fff; text-decoration: underline; }
.cnj-phero h1 { font-size: clamp(48px, 6vw, 92px); line-height: 1; }
@media (max-width: 640px) { .cnj-phero { height: 64vh; min-height: 420px; } }

.cnj-details { border-bottom: 1px solid var(--cnj-line-light); }
.cnj-details dl { max-width: 1360px; margin: 0 auto; padding: 40px var(--cnj-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 32px; }
.cnj-details dt { font-size: 13px; color: var(--cnj-muted); }
.cnj-details dd { margin: 6px 0 0; font-size: 16px; }
.cnj-project .cnj-split:not(.cnj-sec--grey) { padding-bottom: 120px; }

ul.cnj-highlights { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--cnj-line); }
ul.cnj-highlights li { border-top: 1px solid var(--cnj-line); padding: 28px 0; display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.cnj-highlights__title { flex: 1 1 260px; font-family: var(--cnj-head); font-size: 21px; letter-spacing: -0.015em; }
.cnj-highlights__text { flex: 1.3 1 300px; font-size: 16px; line-height: 1.65; color: var(--cnj-body); }

.cnj-reel-split { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; }
.cnj-reel-split > * { margin: 0 !important; min-width: 0; }
.cnj-reel-split > :first-child { flex: 1 1 280px; }
.cnj-reel-split__vids { flex: 2.4 1 560px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 320px)); gap: 24px; }
.cnj-reel-split .cnj-reel { width: 100%; max-width: 320px; }
.cnj-reel-split .cnj-side-note { max-width: 420px; font-size: 17px; }
@media (max-width: 640px) { .cnj-reel-split__vids { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } }

.cnj-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.cnj-gallery > * { margin: 0 !important; }
.cnj-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cnj-gallery img.cnj-gallery__wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .cnj-gallery img.cnj-gallery__wide { aspect-ratio: 4 / 3; } .cnj-gallery { gap: 12px; } }

.cnj-pnav { border-top: 1px solid var(--cnj-line-light); max-width: 1360px; margin: 0 auto; padding: 48px var(--cnj-gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.cnj-pnav a { text-decoration: none; padding: 10px 0; }
.cnj-pnav span { display: block; font-size: 13px; color: var(--cnj-muted); }
.cnj-pnav strong { display: block; margin-top: 6px; font-family: var(--cnj-head); font-weight: 400; font-size: 22px; }
.cnj-pnav__all { text-align: center; }
.cnj-pnav__next { text-align: right; }
@media (max-width: 640px) { .cnj-pnav__all { order: 3; width: 100%; text-align: left; } }

/* ---------- Contact ---------- */
.cnj-contact { display: flex; flex-wrap: wrap; gap: 80px; }
.cnj-contact__main { flex: 1.6 1 560px; min-width: 0; }
.cnj-contact__side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 36px; font-size: 15px; line-height: 1.7; }
.cnj-contact__side > div { border-top: 1px solid var(--cnj-line); padding-top: 20px; }
.cnj-contact__side a { text-decoration: none; }
.cnj-map { width: 100%; aspect-ratio: 4 / 3; border: 0; background: #F0F0EE; }
.cnj-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px 24px; }
.cnj-form label { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--cnj-soft); }
.cnj-form input, .cnj-form select, .cnj-form textarea {
	border: 0; border-bottom: 1px solid #C9C9C4; border-radius: 0; padding: 12px 0; font: inherit; font-size: 17px;
	color: var(--cnj-ink); background: transparent; width: 100%;
}
.cnj-form input[type="file"] { font-size: 14px; color: var(--cnj-soft); padding: 8px 0; border: 0; }
.cnj-form textarea { resize: vertical; }
.cnj-form input:focus, .cnj-form select:focus, .cnj-form textarea:focus { outline: none; border-bottom-color: var(--cnj-accent); box-shadow: 0 1px 0 var(--cnj-accent); }
.cnj-form__full { grid-column: 1 / -1; }
.cnj-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; font-size: 13px; color: var(--cnj-muted); }
.cnj-form .cnj-btn { padding: 16px 32px; }
.cnj-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cnj-sent { border-top: 2px solid var(--cnj-accent); padding-top: 32px; }
.cnj-sent > * + * { margin-top: 14px; }
.cnj-sent__title { font-family: var(--cnj-head); font-size: 28px; letter-spacing: -0.02em; }
.cnj-error { margin-bottom: 28px; padding: 14px 18px; background: #FDEDE7; border-left: 3px solid var(--cnj-accent); font-size: 15px; }
@media (max-width: 640px) { .cnj-contact { gap: 56px; } }

/* ---------- Footer ---------- */
.cnj-footer { background: var(--cnj-black); color: #fff; }
.cnj-footer a { color: #fff; text-decoration: none; }
.cnj-footer a:hover { color: #C9C9C4; }
.cnj-footer__cta, .cnj-footer__cols, .cnj-footer__base { max-width: 1200px; margin: 0 auto; padding-left: var(--cnj-gutter); padding-right: var(--cnj-gutter); }
.cnj-footer__cta { padding-top: 120px; padding-bottom: 96px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 40px; border-bottom: 1px solid #262626; }
.cnj-footer__cta > div:first-child { flex: 1 1 520px; min-width: 0; }
.cnj-footer h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.035em; }
.cnj-footer__cta p { margin-top: 20px; font-size: 17px; line-height: 1.6; color: #A8A8A3; max-width: 480px; }
.cnj-footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.cnj-footer .cnj-btn { color: var(--cnj-ink); }
.cnj-footer .cnj-btn:hover { color: #fff; }
.cnj-footer__phone { font-size: 15px; padding: 16px 0; }
.cnj-footer__cols { padding-top: 72px; padding-bottom: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px; font-size: 14px; line-height: 1.8; color: #C9C9C4; }
.cnj-footer__cols p + p { margin-top: 10px; }
.cnj-footer .cnj-label { color: #8E8E89; margin-bottom: 10px; }
.cnj-footer__logo { height: 44px; width: auto; }
.cnj-footer__menu { list-style: none; margin: 0; padding: 0; }
.cnj-footer__base { padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: #8E8E89; }
.cnj-footer__base a { color: #8E8E89; }
@media (max-width: 640px) { .cnj-footer__cta { padding-top: 80px; padding-bottom: 64px; } }

/* ---------- Misc ---------- */
.cnj-post-list { list-style: none; margin: 0; padding: 0; }
.cnj-post-list li { border-top: 1px solid var(--cnj-line); padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; }
.cnj-404-links { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 40px !important; }
.alignwide { max-width: var(--cnj-inner-wide); }