/* =====================================================
   Jake's Visuals — custom additions on top of WWS base
   ===================================================== */

:root {
	--jv-accent: var(--color-cta);
	--jv-warm: #F5F2EC; /* intentional tonal layer, distinct from --color-warm */
	--jv-muted: #6B6862; /* deeper muted than --color-text-muted, used where contrast matters */
}

/* Generic section wrapper — uses canonical spacing scale */
.jv-section {
	padding: var(--space-xl) 0;
}
@media (max-width: 900px) { .jv-section { padding: var(--space-lg) 0; } }
@media (max-width: 540px) { .jv-section { padding: var(--space-md) 0; } }

/* Feature section variant — warm backdrop, generous padding, centered */
.jv-section--feature {
	background: var(--color-warm);
	padding: var(--space-2xl) 0;
	text-align: center;
}
.jv-section--feature .pull-quote {
	margin: 0 auto;
	text-align: center;
	font-size: clamp(24px, 2.85vw, 42px);
	max-width: 52ch;
}
.jv-section--feature .label {
	color: var(--color-text-primary, #111);
}
@media (max-width: 900px) {
	.jv-section--feature { padding: var(--space-xl) 0; }
}

/* Short hero variant for secondary pages (About, Journey, etc.) */
.hero.hero--short {
	min-height: 60vh;
}
@media (max-width: 768px) {
	.hero.hero--short { min-height: 50vh; }
}

/* Hero content overflow safety — base .hero content can get tight with long subheadings */
.hero__sub {
	max-width: 520px;
}
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* Section wrapper default — prevents bare <section> from collapsing */
section { padding: 96px 0; }
section.hero, section.featured-work, section.footer-ig, section.jv-contact, section.jv-home-showcase, section.jv-home-showreel { padding: unset; }
.footer-ig { padding: 48px 0 0; }
.footer-ig__label { font-size: 15px; letter-spacing: 0.2em; display: block; margin-bottom: 24px; text-align: center; text-decoration: none; color: inherit; }

/* Ensure galleries have some top breathing room on detail pages */
.jv-detail-hero + section { padding-top: 0; }
.jv-detail-hero + section .container > * { margin-top: 0; }

/* Portfolio grid item info hover area */
.portfolio-grid__info { pointer-events: none; }

/* Image logo — show light version on transparent header (over hero), dark elsewhere */
.site-logo--img { display: inline-flex; align-items: center; }
.site-logo__img { height: 44px; width: auto; display: none; }
.site-header--solid .site-logo__img--dark,
.site-header--scrolled .site-logo__img--dark { display: block; }
.site-header--transparent:not(.site-header--scrolled) .site-logo__img--light { display: block; }
.site-header--transparent:not(.site-header--scrolled) .site-logo__img--dark { display: none; }
@media (max-width: 900px) { .site-logo__img { height: 36px !important; } }
.site-logo__img { max-height: 44px; }

/* Hero decorative line (referenced by template-parts/hero.php) */
.hero__decorative-line {
	width: 64px;
	height: 1px;
	background: rgba(255,255,255,0.7);
	margin-bottom: 28px;
}
.hero__content .btn-outline + .btn-outline {
	margin-left: 12px;
}

/* Split section (image + text side by side) used on front page */
.jv-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.jv-split--reverse { direction: rtl; }
.jv-split--reverse > * { direction: ltr; }
.jv-split__media {
	width: 100%;
	aspect-ratio: 4 / 5;
	background-size: cover;
	background-position: center;
}
.jv-split__text .display-heading { margin-bottom: 24px; }
.jv-split__text .large-body { margin-bottom: 24px; }
@media (max-width: 900px) {
	.jv-split { grid-template-columns: 1fr; gap: 40px; }
	.jv-split--reverse { direction: ltr; }
}

/* Journey trip cards */
.jv-trips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
	margin-top: 48px;
}
.jv-trip-card {
	display: flex;
	flex-direction: column;
	background: var(--jv-warm);
	padding: 32px 28px;
	text-align: left;
	transition: transform 0.3s ease;
	aspect-ratio: 3 / 4;
	justify-content: flex-end;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.jv-trip-card::before {
	content: '';
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	filter: brightness(0.6);
	z-index: 0;
	background-image: var(--trip-bg);
}
.jv-trip-card > * { position: relative; z-index: 1; }
.jv-trip-card__label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 12px; }
.jv-trip-card__title { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 400; line-height: 1.1; margin-bottom: 8px; }
.jv-trip-card__meta { font-size: 13px; color: rgba(255,255,255,0.85); }

/* Detail/gallery page hero (travel/client detail) */
.jv-detail-hero {
	padding: 180px 0 64px;
	text-align: center;
}
.jv-detail-hero .label { margin-bottom: 16px; }
.jv-detail-hero h1 {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(48px, 7vw, 88px);
	font-weight: 400;
	line-height: 1.05;
	margin: 0;
}
.jv-detail-hero__location {
	display: block;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jv-muted);
	margin-top: 20px;
}

/* Gallery grid used by gallery template — masonry columns preserve native aspect ratios */
.jv-gallery-grid {
	column-count: 3;
	column-gap: 8px;
	padding-bottom: 120px;
}
.jv-gallery-grid__item {
	display: block;
	break-inside: avoid;
	margin-bottom: 8px;
	overflow: hidden;
}
.jv-gallery-grid__item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.6s ease;
}
.jv-gallery-grid__item:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
	.jv-gallery-grid { column-count: 2; column-gap: 4px; }
	.jv-gallery-grid__item { margin-bottom: 4px; }
}
@media (max-width: 540px) {
	.jv-gallery-grid { column-count: 1; }
}

/* Masonry for lifestyle */
.jv-masonry {
	column-count: 3;
	column-gap: 8px;
	padding-bottom: 120px;
}
.jv-masonry__item {
	display: block;
	break-inside: avoid;
	margin-bottom: 8px;
	overflow: hidden;
}
.jv-masonry__item img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .jv-masonry { column-count: 2; } }
@media (max-width: 540px) { .jv-masonry { column-count: 1; } }

/* Simple destination/project grid (card list) */
.jv-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
@media (max-width: 900px) { .jv-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jv-card-grid { grid-template-columns: 1fr; } }
.jv-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #222;
	color: #fff;
}
.jv-card__img {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center top;
	transition: transform 0.6s ease;
}
.jv-card:hover .jv-card__img { transform: scale(1.04); }
.jv-card__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 20px 24px;
	background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
}
.jv-card__title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}
.jv-card__meta {
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.8);
	margin-top: 4px;
	display: block;
}

/* About page long-form */
/* Long-form wrapper: takes full container width; text-width enforced on direct children.
   Grid/media children opt out via the break-out list below. */
.jv-longform {
	margin: 0 auto;
}
.jv-longform > * {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.jv-longform > .jv-services-grid,
.jv-longform > .jv-process,
.jv-longform > .jv-break-out {
	max-width: none;
}
.jv-longform h2 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
	margin: 72px auto 24px;
}
.jv-longform p {
	font-size: 18px;
	line-height: 1.7;
	margin-bottom: 20px;
	color: #2a2a28;
}
.jv-longform blockquote {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.3;
	padding: 32px 0 32px 28px;
	border-left: 2px solid var(--jv-muted);
	margin: 32px auto;
}

/* Contact form */
.jv-contact {
	padding: 180px 0 120px;
}
.jv-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}
@media (max-width: 900px) { .jv-contact__grid { grid-template-columns: 1fr; gap: 48px; } }
.jv-form label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--jv-muted);
	margin-bottom: 8px;
}
.jv-form input,
.jv-form textarea {
	width: 100%;
	padding: 14px 0;
	border: none;
	border-bottom: 1px solid #CFC8BB;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	margin-bottom: 28px;
	color: var(--color-text-primary);
}
.jv-form input:focus,
.jv-form textarea:focus {
	outline: none;
	border-color: var(--color-text-primary);
}
.jv-form textarea { min-height: 120px; resize: vertical; }
.jv-form__submit {
	background: var(--color-cta);
	color: #fff;
	padding: 16px 36px;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.jv-form__submit:hover { opacity: 0.85; }
.jv-form__status { margin-top: 16px; font-size: 14px; }
.jv-form__status--ok { color: #2e7a3b; }
.jv-form__status--err { color: #a23333; }

/* Center helper */
.jv-center { text-align: center; }
.jv-pad-top { padding-top: 180px; }

/* Trust strip (homepage stats row) */
.jv-trust-strip {
	background: var(--color-bg-primary);
	padding: 16px 0;
	border: none;
}
.jv-trust-strip__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 0;
	gap: 0;
}
.jv-trust-stat {
	text-align: center;
	padding: 0 var(--space-md);
	border-left: none !important;
	border-right: none !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.jv-trust-stat__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(24px, 2.8vw, 43px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	margin-bottom: 4px;
}
.jv-trust-stat__label {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-top: 0;
}
@media (max-width: 768px) {
	.jv-trust-strip { padding: 8px 0; }
	.jv-trust-strip__grid { grid-template-columns: repeat(4, 1fr); gap: 16px 8px; }
	.jv-trust-stat { padding: 0 4px; gap: 4px; }
	.jv-trust-stat__num { font-size: 19px !important; }
	.jv-trust-stat__label { font-size: 9px; letter-spacing: 0.18em; }
}

/* Visual breadcrumbs */
.jv-breadcrumb {
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jv-muted);
	margin-bottom: 24px;
}
.jv-breadcrumb a { color: var(--jv-muted); transition: color 0.2s ease; }
.jv-breadcrumb a:hover { color: var(--jv-accent); }
.jv-breadcrumb__sep { margin: 0 10px; opacity: 0.5; }
.jv-breadcrumb [aria-current] { color: var(--jv-accent); }

/* Related destinations strip */
.jv-related {
	padding: 64px 0 32px;
	border-top: 1px solid rgba(26,26,26,0.08);
	margin-top: 48px;
}

/* About page: image collage below hero */
.jv-about-collage {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	align-items: stretch;
}
.jv-about-collage--8 {
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
}
.jv-about-collage__item { margin: 0; overflow: hidden; }
.jv-about-collage__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: contrast(1.06) saturate(1.04);
	aspect-ratio: 3 / 4;
	transition: transform 0.6s ease;
}
.jv-about-collage__item:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
	.jv-about-collage, .jv-about-collage--8 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 540px) {
	.jv-about-collage, .jv-about-collage--8 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* About page: full-bleed horizontal band between sections */
.jv-about-band {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	overflow: hidden;
	aspect-ratio: 21 / 8;
	max-height: 70vh;
}
.jv-about-band img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: contrast(1.05) saturate(1.03);
}

/* About page: split pillar — photo + text, 50/50 full-bleed */
.jv-about-pillar {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 80vh;
}
.jv-about-pillar__media {
	background-size: cover;
	background-position: center;
	min-height: 80vh;
}
.jv-about-pillar__text {
	padding: clamp(64px, 8vw, 128px) clamp(32px, 5vw, 96px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--color-bg-primary);
}
.jv-about-pillar__text .label { margin-bottom: 16px; }
.jv-about-pillar__text h2 { margin-bottom: 32px; }
.jv-about-pillar__text .large-body { margin-bottom: 20px; max-width: 56ch; }
.jv-about-pillar__text .large-body:last-child { margin-bottom: 0; }
.jv-about-pillar__text .pull-quote {
	font-size: clamp(22px, 2vw, 32px);
	max-width: 36ch;
	margin: 32px 0 0;
}
.jv-about-pillar__text .pull-quote::before { display: none; }
.jv-about-pillar--reverse .jv-about-pillar__media { order: 2; }
.jv-about-pillar--reverse .jv-about-pillar__text { order: 1; }

@media (max-width: 900px) {
	.jv-about-pillar { grid-template-columns: 1fr; min-height: auto; }
	.jv-about-pillar__media { min-height: 60vh; aspect-ratio: 4 / 5; }
	.jv-about-pillar--reverse .jv-about-pillar__media { order: 1; }
	.jv-about-pillar--reverse .jv-about-pillar__text { order: 2; }
	.jv-about-band { aspect-ratio: 16 / 10; }
}

/* Section tight override (less top padding when image precedes) */
.jv-section.jv-section--tight { padding-top: 48px; }

.jv-about-intro { padding-top: 64px; padding-bottom: 0; }

/* Client logo strip (About + homepage-ready) */
.jv-clients-strip { text-align: center; }
.jv-clients-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 32px 48px;
	align-items: center;
	margin-top: 40px;
}
.jv-clients-grid img {
	max-width: 100%;
	max-height: 80px;
	width: auto;
	height: auto;
	margin: 0 auto;
	display: block;
	opacity: 1;
	mix-blend-mode: multiply;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.jv-clients-grid img:hover { opacity: 0.85; transform: translateY(-2px); }
@media (max-width: 900px) { .jv-clients-grid { grid-template-columns: repeat(4, 1fr); gap: 24px 32px; } }
@media (max-width: 540px) { .jv-clients-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 24px; } }

/* About page final CTA section */
.jv-about-final { padding-top: 140px; padding-bottom: 160px; }

/* Pillar page jump navigation */
.jv-pillar-nav {
	max-width: 720px;
	margin: 0 auto 64px;
	padding: 24px 28px;
	background: var(--jv-warm);
	border-left: 2px solid var(--jv-accent);
}
.jv-pillar-nav .label { margin-bottom: 16px; }
.jv-pillar-nav ol {
	list-style: decimal inside;
	padding: 0;
	margin: 0;
	columns: 2;
	column-gap: 32px;
}
@media (max-width: 700px) { .jv-pillar-nav ol { columns: 1; } }
.jv-pillar-nav li { padding: 4px 0; font-size: 14px; break-inside: avoid; }
.jv-pillar-nav a { color: var(--jv-accent); text-decoration: underline; text-decoration-color: rgba(26,26,26,0.2); transition: text-decoration-color 0.2s; }
.jv-pillar-nav a:hover { text-decoration-color: var(--jv-accent); }

/* Long-form scroll targets need padding for fixed header */
.jv-longform h2[id], .jv-longform h3[id] { scroll-margin-top: 100px; }
.jv-longform hr { border: none; border-top: 1px solid rgba(26,26,26,0.12); margin: 64px auto; }

/* FAQ accordion */
.jv-faq details {
	border-bottom: 1px solid rgba(26,26,26,0.1);
	padding: 20px 0;
}
.jv-faq details:first-child { border-top: 1px solid rgba(26,26,26,0.1); }
.jv-faq summary {
	cursor: pointer;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--jv-accent);
	list-style: none;
	position: relative;
	padding-right: 28px;
}
.jv-faq summary::-webkit-details-marker { display: none; }
.jv-faq summary::after {
	content: '+';
	position: absolute;
	right: 0; top: 0;
	font-size: 22px;
	font-weight: 300;
	transition: transform 0.2s;
}
.jv-faq details[open] summary::after { content: '−'; }
.jv-faq details p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: #2a2a28; }

/* Services page */
.jv-services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}
@media (max-width: 768px) { .jv-services-grid { grid-template-columns: 1fr; } }

.jv-service-card {
	padding: 48px 40px;
	background: transparent;
	border: none;
	border-top: 1px solid var(--color-border);
}
.jv-service-card h3 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.25;
	margin: 12px 0 20px;
}
.jv-service-list {
	padding-left: 0;
	list-style: none;
	margin: 0 0 20px;
}
.jv-service-list li {
	padding-left: 20px;
	position: relative;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.6;
}
.jv-service-list li::before {
	content: '';
	position: absolute;
	left: 0; top: 11px;
	width: 8px; height: 1px;
	background: var(--jv-muted);
}
.jv-service-price {
	font-size: 13px;
	color: var(--jv-muted);
	font-style: italic;
	margin-bottom: 16px;
}

/* Process steps */
.jv-process {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 40px;
}
@media (max-width: 900px) { .jv-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .jv-process { grid-template-columns: 1fr; } }
.jv-process__step { padding: 24px 0; }
.jv-process__num {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-size: 48px;
	font-weight: 500;
	color: var(--jv-muted);
	opacity: 0.5;
	line-height: 1;
	margin-bottom: 12px;
}
.jv-process__step h4 {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.jv-process__step p { font-size: 15px; line-height: 1.6; color: var(--jv-muted); }

/* Mobile sticky CTA */
.jv-sticky-cta {
	display: none;
	position: fixed;
	left: 16px; right: 16px; bottom: 16px;
	z-index: 900;
	background: var(--color-cta);
	color: var(--color-text-inverse);
	text-align: center;
	padding: 16px 20px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	box-shadow: 0 6px 24px rgba(0,0,0,0.18);
	border-radius: 2px;
}
.jv-sticky-cta:hover { background: var(--color-accent); color: var(--color-text-inverse); }
@media (max-width: 768px) {
	.jv-sticky-cta { display: block; }
	/* Give page extra bottom space so sticky doesn't overlap content */
	footer.site-footer { padding-bottom: 96px; }
}
/* Hide the sticky CTA on the homepage and about page — undercuts the editorial tone */
body.home .jv-sticky-cta,
body.page-template-page-about .jv-sticky-cta {
	display: none !important;
}

/* =====================================================
   LOGO WORDMARK — dormant until image logo is replaced with text
   (currently the site-logo renders as an <img>; these rules are
   reserved for a future text-based wordmark or monogram lockup)
   ===================================================== */
.site-logo .logo-wordmark,
.site-logo .logo-name,
header .logo {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: 0.05em;
}

/* =====================================================
   TYPOGRAPHY HIERARCHY — canonical treatments
   (loaded last so these win over earlier .label/.eyebrow rules)
   ===================================================== */

/* Eyebrow labels — unified treatment across .label, .eyebrow, and related selectors */
.label,
.eyebrow,
.section-label,
.jv-section__label,
.site-footer__nav-heading,
[class*="eyebrow"] {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	font-feature-settings: "smcp" 1, "c2sc" 1;
	margin: 0 0 16px;
}

/* Footer nav heading needs its white-on-dark variant */
.site-footer__nav-heading {
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 20px;
}

/* Pull-quote — italic Cormorant, restrained editorial */
.pull-quote {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(32px, 3.8vw, 56px);
	letter-spacing: -0.005em;
	line-height: 1.2;
	color: var(--color-text-primary);
	max-width: 32ch;
	position: relative;
	margin: 0 auto;
}

.pull-quote::before {
	content: '';
	display: none;
}

@media (max-width: 768px) {
	.pull-quote::before { display: none; }
	.pull-quote { text-align: left; }
}

/* =====================================================
   Contact page — WWS-adapted layout on JV tokens
   ===================================================== */
.jv-contact-hero {
	padding: 140px 0 96px;
}
.jv-contact-hero__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 80px;
	align-items: start;
}
.jv-contact-hero__left { padding-top: 24px; }
.jv-contact-hero__headline {
	font-family: var(--font-display);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(40px, 4.8vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
	margin: 16px 0 0;
}
.jv-contact-hero__sub {
	margin-top: 24px;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.65;
	color: var(--jv-muted);
	max-width: 44ch;
}

.jv-trust-badges {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.jv-trust-badge {
	display: flex;
	align-items: center;
	gap: 14px;
}
.jv-trust-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	flex-shrink: 0;
}
.jv-trust-badge__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--color-text-primary);
	line-height: 1.5;
}

.jv-contact-clients {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}
.jv-contact-clients span {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(26, 26, 26, 0.42);
}

.jv-contact-testimonial {
	margin-top: 48px;
	padding: 0 0 0 20px;
	border-left: 2px solid var(--color-accent);
}
.jv-contact-testimonial__text {
	font-family: var(--font-display);
	font-weight: 400;
	font-style: italic;
	font-size: 20px;
	line-height: 1.55;
	color: var(--color-text-primary);
}
.jv-contact-testimonial__author {
	display: block;
	margin-top: 12px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jv-muted);
	font-style: normal;
}

/* Form card */
.jv-form-card {
	background: #FFFFFF;
	padding: 48px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.03);
}
.jv-form-card__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.1;
	color: var(--color-text-primary);
	margin: 0 0 6px;
}
.jv-form-card__sub {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--jv-muted);
	margin: 0 0 32px;
}

.jv-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.jv-form__group { display: flex; flex-direction: column; margin-bottom: 20px; }
.jv-form__group label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text-primary);
	margin-bottom: 8px;
}
.jv-form__req { color: var(--color-accent); }
.jv-form__group input,
.jv-form__group select,
.jv-form__group textarea {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--color-text-primary);
	padding: 12px 14px;
	border: 1px solid rgba(26, 26, 26, 0.18);
	background: #FAFAF8;
	outline: none;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.jv-form__group input:focus,
.jv-form__group select:focus,
.jv-form__group textarea:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(168, 116, 86, 0.08);
}
.jv-form__group select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1A1A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
	cursor: pointer;
}
.jv-form__group textarea { resize: vertical; min-height: 120px; }

.jv-form__submit {
	width: 100%;
	padding: 16px 24px;
	background: var(--color-cta);
	border: none;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FFFFFF;
	cursor: pointer;
	transition: background 0.3s ease;
	min-height: 48px;
	margin-top: 8px;
}
.jv-form__submit:hover { background: #333; }
.jv-form__note {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 12px;
	color: var(--jv-muted);
	margin-top: 14px;
	text-align: center;
}
.jv-form__status { margin-top: 10px; font-size: 13px; text-align: center; }
.jv-form__status--ok { color: #2a7a3a; }
.jv-form__status--err { color: #a63a3a; }

.jv-form-card__quote {
	margin-top: 32px;
	padding: 20px 22px;
	background: rgba(26, 26, 26, 0.03);
	border-left: 2px solid rgba(26, 26, 26, 0.15);
}
.jv-form-card__quote-text {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 17px;
	line-height: 1.55;
	color: var(--color-text-primary);
	margin: 0 0 8px;
}
.jv-form-card__quote-author {
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jv-muted);
	margin: 0;
}

/* What happens next */
.jv-contact-next {
	padding: 96px 0 40px;
	background: var(--color-warm);
}
.jv-contact-next__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
	margin-top: 40px;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.jv-contact-next__step { text-align: center; }
.jv-contact-next__num {
	display: block;
	font-family: var(--font-display);
	font-size: 40px;
	color: rgba(26, 26, 26, 0.2);
	margin-bottom: 8px;
	line-height: 1;
}
.jv-contact-next__step h4 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-primary);
	margin: 0 0 10px;
}
.jv-contact-next__step p {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.6;
	color: var(--jv-muted);
	margin: 0;
	max-width: 26ch;
	margin-left: auto;
	margin-right: auto;
}

/* Stats bar (dark) */
.jv-contact-stats {
	background: var(--color-text-primary);
	padding: 64px 0;
}
.jv-contact-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	align-items: center;
}
.jv-contact-stats__item {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.jv-contact-stats__num {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(40px, 4.5vw, 60px);
	line-height: 1;
	color: var(--color-bg-primary);
}
.jv-contact-stats__label {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-bg-primary);
	opacity: 0.55;
}

@media (max-width: 1024px) {
	.jv-contact-hero__inner { gap: 48px; }
	.jv-form-card { padding: 36px; }
}
@media (max-width: 900px) {
	.jv-contact-hero { padding: 120px 0 64px; }
	.jv-contact-hero__inner { grid-template-columns: 1fr; gap: 48px; }
	.jv-contact-hero__left { padding-top: 0; }
	.jv-contact-next { padding: 64px 0 24px; }
	.jv-contact-next__steps { grid-template-columns: 1fr; gap: 32px; }
	.jv-contact-stats { padding: 48px 0; }
	.jv-contact-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
}
@media (max-width: 540px) {
	.jv-form-card { padding: 28px 22px; }
	.jv-form__row { grid-template-columns: 1fr; gap: 0; }
	.jv-form__group input, .jv-form__group select, .jv-form__group textarea { font-size: 16px; }
}

/* =====================================================
   Films page — featured video + mixed-orientation grid
   ===================================================== */
.jv-film-feature {
	padding: 0;
	position: relative;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	overflow: hidden;
	background: #000;
	line-height: 0;
}
.jv-film-feature video {
	display: block;
	width: 100%;
	height: auto;
}

.jv-films-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-top: 48px;
	align-items: start;
}
.jv-film-card {
	margin: 0;
	overflow: hidden;
	position: relative;
	background: #000;
	line-height: 0;
}
.jv-film-card__media {
	width: 100%;
	line-height: 0;
}
.jv-film-card__media video {
	display: block;
	width: 100%;
	height: auto;
}
.jv-film-card--horizontal {
	grid-column: span 3;
}
.jv-film-card--vertical {
	grid-column: span 2;
}
.jv-film-card__caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 20px 24px;
	background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	color: #fff;
	pointer-events: none;
}
.jv-film-card__caption .label {
	color: rgba(255,255,255,0.7);
	display: block;
	margin-bottom: 4px;
}
.jv-film-card__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.15;
	color: #fff;
	margin: 0;
}

@media (max-width: 1024px) {
	.jv-films-grid { grid-template-columns: repeat(4, 1fr); }
	.jv-film-card--horizontal { grid-column: span 4; }
	.jv-film-card--vertical { grid-column: span 2; }
}
@media (max-width: 540px) {
	.jv-films-grid { grid-template-columns: 1fr; gap: 8px; }
	.jv-film-card--horizontal, .jv-film-card--vertical { grid-column: span 1; }
}

/* =====================================================
   About page "what's in the bag" — split text + vertical video
   ===================================================== */
.jv-about-story {
	background: var(--color-warm);
	padding: var(--space-2xl) 0;
}
.jv-about-story__grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 80px;
	align-items: center;
	max-width: 1120px;
	margin: 0 auto;
}
.jv-about-story__text {
	max-width: 44ch;
}
.jv-about-story__text .label { margin-bottom: 16px; }
.jv-about-story__text h2 { margin-bottom: 24px; }
.jv-about-story__video {
	width: clamp(240px, 28vw, 360px);
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #000;
	line-height: 0;
}
.jv-about-story__video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 900px) {
	.jv-about-story { padding: var(--space-xl) 0; }
	.jv-about-story__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		justify-items: center;
		text-align: center;
	}
	.jv-about-story__video { width: min(320px, 70vw); }
}

/* =====================================================
   Inline video band (About page, etc.) — full-bleed autoplay loop
   ===================================================== */
.jv-video-band {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	background: #000;
	overflow: hidden;
	line-height: 0;
}
.jv-video-band video {
	display: block;
	width: 100%;
	height: auto;
}

/* =====================================================
   Homepage showreel band — natural aspect, no letterbox
   ===================================================== */
.jv-home-showreel {
	position: relative;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	overflow: hidden;
	background: #000;
	line-height: 0;
}
.jv-home-showreel__media video {
	display: block;
	width: 100%;
	height: auto;
}

/* =====================================================
   Testimonial pair (homepage + services)
   ===================================================== */
.jv-home-testimonials {
	padding: var(--space-lg) 0 var(--space-xl);
}
.jv-home-testimonials__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	max-width: 1120px;
	margin: 0 auto;
}
.jv-home-testimonial {
	margin: 0;
	padding: 0 0 0 20px;
	border-left: 2px solid var(--color-accent);
}
.jv-home-testimonial__text {
	font-family: var(--font-display);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(18px, 1.6vw, 24px);
	line-height: 1.5;
	color: var(--color-text-primary);
	margin: 0;
}
.jv-home-testimonial__author {
	display: block;
	margin-top: 14px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jv-muted);
	font-style: normal;
}
@media (max-width: 768px) {
	.jv-home-testimonials__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* =====================================================
   Homepage showcase — asymmetric collage grid
   ===================================================== */
.jv-home-showcase {
	padding: var(--space-lg) 0 var(--space-lg);
}
.jv-home-showcase__head {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-lg);
	text-align: center;
}
.jv-home-showcase__head .label { display: block; text-align: center; }
.jv-home-showcase__track {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	padding: 0 clamp(16px, 3vw, 48px);
	max-width: var(--max-width);
	margin: 0 auto;
}
.jv-home-showcase__item {
	margin: 0;
	overflow: hidden;
	background: var(--color-placeholder);
	aspect-ratio: 4 / 5;
}
.jv-home-showcase__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.jv-home-showcase__item:hover img { transform: scale(1.04); }

@media (max-width: 1024px) {
	.jv-home-showcase__track { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
	.jv-home-showcase { padding: var(--space-lg) 0 var(--space-md); }
	.jv-home-showcase__track {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
		padding: 0 12px;
	}
}
@media (max-width: 400px) {
	.jv-home-showcase__item:nth-child(1),
	.jv-home-showcase__item:nth-child(6) { aspect-ratio: 4 / 10; }
}

/* =====================================================
   Journey page — expect list, carousel, apply form
   ===================================================== */
.jv-journey-expect {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 40px;
	margin-top: 48px;
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}
.jv-journey-expect__item { text-align: left; }
.jv-journey-expect__num {
	display: block;
	font-family: var(--font-display);
	font-size: 32px;
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: 12px;
}
.jv-journey-expect__item h4 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-primary);
	margin: 0 0 10px;
}
.jv-journey-expect__item p {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.65;
	color: var(--jv-muted);
	margin: 0;
	max-width: 34ch;
}
@media (max-width: 900px) {
	.jv-journey-expect { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
}
@media (max-width: 540px) {
	.jv-journey-expect { grid-template-columns: 1fr; gap: 32px; }
}

.jv-journey-carousel-section {
	padding: var(--space-xl) 0;
}
.jv-journey-carousel {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 32px clamp(24px, 5vw, 96px);
	scrollbar-width: thin;
}
.jv-journey-carousel::-webkit-scrollbar { height: 4px; }
.jv-journey-carousel::-webkit-scrollbar-thumb { background: rgba(26,26,26,0.2); }
.jv-journey-carousel__item {
	flex: 0 0 auto;
	width: clamp(280px, 32vw, 480px);
	aspect-ratio: 4 / 5;
	margin: 0;
	overflow: hidden;
	scroll-snap-align: start;
}
.jv-journey-carousel__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.jv-journey-carousel__item:hover img { transform: scale(1.04); }

.jv-journey-apply {
	background: var(--color-warm);
	padding: var(--space-2xl) 0;
}
.jv-journey-apply__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 64px;
	align-items: start;
}
.jv-journey-apply__left { padding-top: 24px; }
.jv-journey-apply__left .large-body { max-width: 44ch; }
@media (max-width: 900px) {
	.jv-journey-apply__inner { grid-template-columns: 1fr; gap: 40px; }
	.jv-journey-apply__left { padding-top: 0; }
	.jv-journey-apply { padding: var(--space-xl) 0; }
}

/* =====================================================
   Hero — center content vertically (full-viewport hero only)
   ===================================================== */
.hero:not(.hero--short) {
	align-items: center !important;
}
.hero:not(.hero--short) .hero__content {
	padding-bottom: 0 !important;
}
@media (max-width: 768px) {
	.hero:not(.hero--short) {
		padding-bottom: 0 !important;
	}
	.hero:not(.hero--short) .hero__content {
		padding-top: 80px;
	}
}

/* Short hero (About, etc): ensure title clears fixed header on mobile */
.hero--short { padding-top: 120px !important; }
@media (max-width: 768px) {
	.hero--short { padding-top: 140px !important; min-height: 70vh; min-height: 70dvh; }
	.hero--short .hero__headline { font-size: clamp(36px, 9vw, 60px); }
}

/* Hero outline button — better legibility on light backgrounds */
.hero .btn-outline {
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.hero .btn-outline:hover {
	background: rgba(255, 255, 255, 0.95);
	text-shadow: none;
}

/* =====================================================
   Portfolio-grid CTA card — centered variant
   ===================================================== */
.portfolio-grid__info--center {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 24px;
	gap: 6px;
	opacity: 1;
	transform: none;
}
.portfolio-grid__item:has(.portfolio-grid__info--center) .portfolio-grid__item-overlay {
	opacity: 1;
}
.portfolio-grid__info--center .portfolio-grid__name {
	font-size: clamp(72px, 8vw, 128px);
	line-height: 1.05;
}
.portfolio-grid__info--center .portfolio-grid__category {
	font-size: 20px;
}
.portfolio-grid__info--center .portfolio-grid__location {
	font-size: 24px;
}

/* =====================================================
   Homepage showreel — remove letterbox, video drives height
   ===================================================== */
.jv-home-showreel { background: transparent; }
.jv-home-showreel video {
	display: block;
	width: 100%;
	height: auto;
}

/* =====================================================
   Detail hero — tight top padding, h1 just clears fixed header
   ===================================================== */
.jv-detail-hero { padding-top: 140px !important; padding-bottom: 40px !important; }
@media (max-width: 768px) {
	.jv-detail-hero { padding-top: 120px !important; padding-bottom: 32px !important; }
	.jv-detail-hero h1 { font-size: clamp(40px, 10vw, 64px); }
}

/* =====================================================
   Mobile nav — Work dropdown (button-driven, not details)
   ===================================================== */
.mobile-nav__toggle {
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0;
}
.mobile-nav__toggle::after {
	content: ' \25BE';
	display: inline;
	opacity: 0.7;
	font-size: 0.8em;
}
.mobile-nav__toggle[aria-expanded="true"]::after { content: ' \25B4'; }
.mobile-nav__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 8px 0 0;
}
.mobile-nav__panel[hidden] { display: none; }
.mobile-nav__child {
	font-size: 14px !important;
	letter-spacing: 0.2em !important;
	opacity: 0.85 !important;
	transform: none !important;
}

/* Never underline Prints */
.mobile-nav .nav-link--plain,
.primary-nav .nav-link--plain {
	text-decoration: none !important;
}
.mobile-nav .nav-link--plain::after,
.primary-nav .nav-link--plain::after { display: none !important; }

/* ===========================================================
   Joey-style hero: full-viewport 4×3 photo grid + lightbox
   =========================================================== */
.jv-hero-grid-section {
	background: #2a2826;
	width: 100%;
	position: relative;
	z-index: 1;
	padding: 80px 0 0; /* top: clear fixed header; no bottom space */
}
.jv-hero-slogan {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	color: #e8e2d6;
	text-align: center;
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1.2;
	margin: 0 0 4px;
	padding: 0 24px;
}
.jv-hero-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	padding: 8px 40px 18px;
	box-sizing: border-box;
}
.jv-hero-grid__tile {
	position: relative;
	display: block;
	overflow: hidden;
	cursor: pointer;
	background: #1d1c1a;
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	aspect-ratio: 3 / 2;
	min-width: 0;
}
.jv-hero-grid__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 360ms ease;
	display: block;
}
.jv-hero-grid__tile:hover img,
.jv-hero-grid__tile:focus-visible img {
	transform: scale(1.03);
}
.jv-hero-grid__tile:focus-visible {
	outline: 2px solid var(--color-cta);
	outline-offset: -2px;
}
@media (max-width: 1100px) {
	.jv-hero-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 8px 24px 14px; }
}
@media (max-width: 700px) {
	.jv-hero-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 8px 16px 10px; }
}

/* Intro block below grid (subhead + buttons) */
.jv-hero-intro {
	padding: 48px 24px 56px;
	text-align: center;
	background: var(--color-bg-primary);
}
.jv-hero-intro__sub {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 600px;
}
.jv-hero-intro__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 24px;
	flex-wrap: wrap;
}
@media (max-width: 600px) {
	.jv-hero-intro { padding: 36px 20px 40px; }
	.jv-hero-intro__cta { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* Lightbox */
.jv-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(8, 8, 10, 0.94);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 60px 60px 40px;
}
.jv-lightbox.is-open { display: flex; }
.jv-lightbox__inner {
	max-width: 1200px;
	width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.jv-lightbox__img-wrap {
	flex: 0 1 auto;
	min-height: 0;
	text-align: center;
}
.jv-lightbox__img {
	max-width: 100%;
	max-height: 75vh;
	width: auto;
	height: auto;
	display: inline-block;
}
.jv-lightbox__caption {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.86);
	background: rgba(20, 20, 22, 0.78);
	padding: 22px 28px;
	margin: 0;
	max-width: 1200px;
}
.jv-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	background: transparent;
	border: 0;
	color: white;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 8px 14px;
	opacity: 0.75;
	transition: opacity 200ms;
}
.jv-lightbox__close:hover,
.jv-lightbox__close:focus-visible { opacity: 1; outline: none; }
@media (max-width: 700px) {
	.jv-lightbox { padding: 48px 12px 16px; }
	.jv-lightbox__caption { font-size: 13px; padding: 16px; line-height: 1.55; }
	.jv-lightbox__img { max-height: 60vh; }
	.jv-lightbox__close { top: 8px; right: 8px; font-size: 28px; }
}


/* =====================================================
   UGC Creator page
   ===================================================== */

/* --- Vertical video reels --- */
.jv-ugc-reel-section {
	background: #000;
	line-height: 0;
}
.jv-ugc-reel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3px;
}
.jv-ugc-clip {
	position: relative;
	overflow: hidden;
	background: #000;
	line-height: 0;
}
.jv-ugc-clip video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 9 / 16;
}
.jv-ugc-clip__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 20px 22px;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
	pointer-events: none;
}
.jv-ugc-clip__label {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.9);
	border: 1px solid rgba(255,255,255,0.35);
	padding: 4px 11px;
	backdrop-filter: blur(4px);
}

/* --- Stats strip --- */
section.jv-ugc-stats {
	background: var(--color-text-primary);
	padding: 72px 0;
}
.jv-ugc-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-left: 1px solid rgba(255,255,255,0.1);
}
.jv-ugc-stats__item {
	padding: 0 40px;
	border-right: 1px solid rgba(255,255,255,0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.jv-ugc-stats__num {
	font-family: var(--font-display);
	font-size: clamp(40px, 4vw, 58px);
	font-weight: 400;
	color: #fff;
	line-height: 1;
	margin-bottom: 10px;
}
.jv-ugc-stats__lbl {
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.4);
}

/* --- Value prop split --- */
section.jv-ugc-split-section {
	padding: 96px 0;
}
.jv-ugc-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}
.jv-ugc-split__copy h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 3.5vw, 46px);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	margin: 12px 0 24px;
	line-height: 1.15;
}
.jv-ugc-split__copy p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--color-text-muted);
	margin-bottom: 16px;
}
.jv-ugc-split__visual {
	display: flex;
	justify-content: center;
	align-items: center;
}
.jv-ugc-split__badge {
	border: 1px solid var(--color-border);
	padding: 48px 56px;
	text-align: center;
	background: var(--color-warm);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.jv-ugc-split__badge-main {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
	line-height: 1;
}
.jv-ugc-split__badge-line {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* --- What I Deliver --- */
section.jv-ugc-types-section {
	padding: 96px 0;
	background: var(--color-warm);
}
.jv-ugc-types {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin-top: 40px;
}
.jv-ugc-type__icon {
	display: block;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	margin-bottom: 16px;
}
.jv-ugc-type h3 {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
	margin: 0 0 12px;
}
.jv-ugc-type p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-text-muted);
}

/* --- Brands --- */
section.jv-ugc-brands-section {
	padding: 96px 0;
	border-top: 1px solid var(--color-border);
}
.jv-ugc-brand-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 32px;
}
.jv-ugc-brand-list span {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-primary);
	border: 1px solid var(--color-border);
	padding: 9px 18px;
}

/* --- More Work: 4-video reel --- */
section.jv-ugc-more-reel-section {
	padding: 64px 0 0;
	border-top: 1px solid var(--color-border);
}
section.jv-ugc-more-reel-section .container {
	margin-bottom: 40px;
}
.jv-ugc-more-reel {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3px;
	line-height: 0;
}

/* --- Instagram --- */
section.jv-ugc-ig-section {
	padding: 96px 0;
	border-top: 1px solid var(--color-border);
}
.jv-ugc-ig-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 32px;
	align-items: start;
}
.jv-ugc-ig-item {
	display: flex;
	justify-content: center;
}
.jv-ugc-ig-item .instagram-media {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

/* --- FAQ --- */
section.jv-ugc-faq-section {
	padding: 96px 0;
	border-top: 1px solid var(--color-border);
}
.jv-ugc-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px 64px;
	margin-top: 40px;
}
.jv-ugc-faq__item h3 {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
	margin: 0 0 10px;
}
.jv-ugc-faq__item p {
	font-size: 14px;
	line-height: 1.75;
	color: var(--color-text-muted);
}

/* --- CTA --- */
section.jv-ugc-cta-section {
	padding: 120px 0;
	text-align: center;
	border-top: 1px solid var(--color-border);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.jv-ugc-types { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.jv-ugc-stats__grid { grid-template-columns: repeat(4, 1fr); }
	.jv-ugc-split { grid-template-columns: 1fr; gap: 48px; }
	.jv-ugc-split__visual { display: none; }
	.jv-ugc-faq__grid { gap: 36px 48px; }
	.jv-ugc-more-reel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.jv-ugc-reel { grid-template-columns: 1fr; gap: 2px; }
	.jv-ugc-reel .jv-ugc-clip:nth-child(n+2) { display: none; }
	.jv-ugc-more-reel { grid-template-columns: 1fr; }
	.jv-ugc-more-reel .jv-ugc-clip:nth-child(n+3) { display: none; }
	.jv-ugc-types { grid-template-columns: 1fr; gap: 28px; }
	.jv-ugc-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.jv-ugc-stats__item { padding: 24px 20px; }
	.jv-ugc-faq__grid { grid-template-columns: 1fr; gap: 32px; }
	.jv-ugc-ig-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}