/**
 * JWolfe Motion Toolkit — base styles.
 *
 * SCOPE: this is a minimal, honest scaffold — base card layout for the
 * [jwolfe_artwork_grid] shortcode markup, plus the reduced-motion contract
 * every animation module in jwolfe-motion.js must respect. Section-specific
 * visual polish (fanned artwork strip, scattered work gallery, etc.) is
 * built once the actual Elementor page exists, matching against the real
 * design rather than guessing spacing/typography here in advance.
 */

/* ---------------------------------------------------------------------
 * Lenis smooth-scroll base CSS (required by Lenis; missing before v1.8.0).
 * Without it, any theme/plugin `scroll-behavior: smooth` makes the browser
 * animate each of Lenis' per-frame scroll steps on top of Lenis' own
 * easing, which reads as laggy, rubbery or stuck scrolling.
 * ------------------------------------------------------------------- */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Reduced motion contract
 * Any element an animation module targets for a *transform-based* reveal
 * should carry this class so it has a sane, fully-visible resting state
 * if JS never runs (slow connection, error, disabled JS) or the visitor
 * has requested reduced motion.
 * ------------------------------------------------------------------- */
.jwolfe-motion-target {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.jwolfe-motion-target,
	.jwolfe-artwork-card,
	[data-jwolfe-parallax],
	[data-jwolfe-reveal] {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Italic accent word — used to pick out one word in a heading (e.g.
 * hero's "for a", Original Artworks' "Art", About's "Imagination").
 * NOTE: this class was already being applied by earlier sections but had
 * no rule behind it, so "for a" / "Art" were silently rendering upright
 * instead of italic — fixed here rather than leaving it unstyled.
 * ------------------------------------------------------------------- */
.jwolfe-italic-accent {
	font-style: italic;
}

/* ---------------------------------------------------------------------
 * Shared parallax-zoom hook (SECTION-AGNOSTIC BY DESIGN)
 * Any section that wants a "decorative background zooms in on scroll"
 * effect gets it by adding these two classes — jwolfe-parallax-host on
 * the section's own root container, jwolfe-parallax-zoom on its
 * decorative background layer — and reusing initParallaxZoomLayers() in
 * jwolfe-motion.js. Do not write a new per-section zoom function; extend
 * this shared pair instead.
 *
 * NOTE: the hero (jwhero001 / jwherobg1) still carries both classes for
 * markup consistency, but as of v1.4.0 its actual zoom (and the leaf
 * drift) run on a dedicated PINNED timeline in initHeroAnimation()
 * instead of this generic non-pinned hook — initParallaxZoomLayers()
 * detects that and skips it automatically. The hero needed pinning
 * because a normal scroll-scrubbed tween has no visible effect until
 * there is real page height below it to scroll through; future sections
 * with normal in-flow content below them can just use the plain
 * host/zoom pair as documented above.
 * ------------------------------------------------------------------- */
.jwolfe-parallax-host {
	will-change: auto;
}

.jwolfe-parallax-zoom {
	transform-origin: center center;
	will-change: transform;
	backface-visibility: hidden;
}

/* ---------------------------------------------------------------------
 * Hero foreground leaf overlay — purely decorative, z-index 10 (above
 * the background at 1, below the content containers at 20). Must never
 * intercept clicks on the headline/CTA/nav sitting above it.
 * ------------------------------------------------------------------- */
.jwolfe-hero-leaves {
	pointer-events: none;
	will-change: transform;
}

/* ---------------------------------------------------------------------
 * Artwork grid — base structure only (layout-specific rules such as the
 * fanned "strip" overlap or the "scatter" gallery come with Phase 4).
 * ------------------------------------------------------------------- */
.jwolfe-artwork-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jwolfe-artwork-card {
	position: relative;
	flex: 1 1 220px;
	max-width: 320px;
}

.jwolfe-artwork-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.jwolfe-artwork-card__media {
	display: block;
	overflow: hidden;
	border-radius: 4px;
}

.jwolfe-artwork-card__image {
	display: block;
	width: 100%;
	height: auto;
}

.jwolfe-artwork-card__meta {
	display: block;
	margin-top: 0.5rem;
}

.jwolfe-artwork-card__title {
	display: block;
	font-weight: 600;
}

.jwolfe-artwork-card__category {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.jwolfe-artwork-grid__empty {
	opacity: 0.6;
	font-style: italic;
}

/* Layout hooks — intentionally unstyled beyond the base above until the
 * real section markup exists. Kept here so class names are already
 * "reserved" and won't collide with anything added later. */
.jwolfe-layout-strip {}
.jwolfe-layout-scatter {}
.jwolfe-layout-feature {}

/* ---------------------------------------------------------------------
 * "Original Artworks" slider - flat, continuously autoplaying marquee.
 * Driven by initArtworkCoverflow() in jwolfe-motion.js, which tweens the
 * track's translateX only. Slides are never rotated, scaled or faded.
 * Images and speed are managed in wp-admin: Artworks > Slider.
 * ------------------------------------------------------------------- */
.jwolfe-coverflow {
	position: relative;
	padding: clamp(2rem, 5vw, 4rem) 0;
	overflow: hidden;
}

.jwolfe-coverflow__viewport {
	position: relative;
}

.jwolfe-coverflow__track {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	width: max-content;
	will-change: transform;
}

.jwolfe-coverflow__card {
	flex: 0 0 auto;
	width: 300px;
	transform: none;
}

.jwolfe-coverflow__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.jwolfe-coverflow__media {
	display: block;
	overflow: hidden;
	border-radius: 20px;
	aspect-ratio: 5 / 7;
	box-shadow: 0 20px 40px -12px rgba(20, 21, 21, 0.25);
	background: #E7E2D6;
	/* v1.8.0: the old mask-image corner fix was re-rasterised every frame
	 * on all 10 moving cards. Flattening the card (above) fixes the same
	 * Chromium clip bug at zero per-frame cost; the image is also rounded
	 * itself as a belt-and-braces measure. */
}

/* Prefixed with .jwolfe-coverflow: Elementor's `.elementor img
 * { height: auto }` (0,1,1) otherwise beats a one-class selector, so the
 * photo stopped at its natural height and left an empty band at the
 * bottom of every card (and exposed unfilled corners while rotating). */
.jwolfe-coverflow .jwolfe-coverflow__image {
	display: block;
	max-width: none;
	border-radius: inherit;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jwolfe-coverflow__caption {
	display: block;
	margin-top: 0.85rem;
	text-align: center;
}

.jwolfe-coverflow__title {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jwolfe-coverflow__medium {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.72rem;
	opacity: 0.62;
}

/* ---------------------------------------------------------------------
 * Generic scroll-reveal hooks (SECTION-AGNOSTIC BY DESIGN, same
 * convention as the parallax-zoom hook above).
 *
 * `.jwolfe-reveal` — a standalone element that fades/slides up once when
 * it scrolls into view. `.jwolfe-reveal-row` + child `.jwolfe-reveal-item`
 * — a group (e.g. a row of images) that reveals together with a stagger.
 * Driven by initRevealAnimations() in jwolfe-motion.js; under
 * prefers-reduced-motion the JS sets the resting state directly instead
 * of animating. No section-specific JS needed — add these classes to any
 * future section's markup to get the same reveal.
 * ------------------------------------------------------------------- */
/* No permanent will-change here (v1.8.0): GSAP promotes elements only
 * while they animate and clears the styles when the reveal finishes.
 * A permanent will-change kept ~20 idle compositor layers alive. */

/* ---------------------------------------------------------------------
 * "About the Artist" section.
 * ------------------------------------------------------------------- */
.jwolfe-about-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.jwolfe-about-eyebrow-rule {
	display: inline-block;
	width: 32px;
	height: 1px;
	background: currentColor;
	opacity: 0.45;
}

/* v1.16.0 - "About the Artist": animated brand-gradient background,
 * transparent cut-out collage, pointer depth + idle float.
 * initAboutSection() in jwolfe-motion.js injects .jwolfe-about__bg (the
 * gradient blobs) and drives all motion; without JS the section is simply
 * the cream brand background. Colours are the site's brand colours:
 * teal #0F5C63, accent #D94B32, cream #F2EFE7 (plus light tints of each). */
.jwolfe-about {
	isolation: isolate;
}

.jwolfe-about__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.jwolfe-about__bg::after {
	/* Cream veil: keeps the heading and text readable over the colour and
	 * blends the section into the cream sections above and below. */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(242, 239, 231, 0.92) 0%, rgba(242, 239, 231, 0.22) 22%, rgba(242, 239, 231, 0.04) 58%, rgba(242, 239, 231, 0.96) 100%);
}

.jwolfe-about__blob {
	position: absolute;
	border-radius: 50%;
	will-change: transform;
}

.jwolfe-about__blob--1 {
	width: 62vmax;
	height: 62vmax;
	left: -18vmax;
	top: -20vmax;
	background: radial-gradient(closest-side, rgba(15, 92, 99, 0.82), rgba(15, 92, 99, 0));
}

.jwolfe-about__blob--2 {
	width: 56vmax;
	height: 56vmax;
	right: -16vmax;
	bottom: -22vmax;
	background: radial-gradient(closest-side, rgba(217, 75, 50, 0.72), rgba(217, 75, 50, 0));
}

.jwolfe-about__blob--3 {
	width: 46vmax;
	height: 46vmax;
	right: -4vmax;
	top: -12vmax;
	background: radial-gradient(closest-side, rgba(246, 168, 140, 0.85), rgba(246, 168, 140, 0));
}

.jwolfe-about__blob--4 {
	width: 42vmax;
	height: 42vmax;
	left: 6vmax;
	bottom: -16vmax;
	background: radial-gradient(closest-side, rgba(94, 170, 175, 0.78), rgba(94, 170, 175, 0));
}

.jwolfe-about__blob--cursor {
	width: 30vmax;
	height: 30vmax;
	left: 0;
	top: 0;
	margin: -15vmax 0 0 -15vmax;
	opacity: 0;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}

.jwolfe-about-eyebrow {
	color: var(--e-global-color-secondary, #0F5C63);
}

body .jwolfe-about .jwolfe-italic-accent {
	color: var(--e-global-color-accent, #D94B32);
}

/* Collage row: cut-outs sit on translucent glass shapes, bottom-aligned. */
body .jwolfe-about .jwolfe-about-row {
	align-items: flex-end;
}

body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item {
	position: relative;
}

body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item::before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	/* Elementor draws its own background overlay on .e-con::before
	 * (height/width 100%, opacity .5); reset all of that so these shapes
	 * size and fade exactly as declared below. */
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	width: auto;
	height: auto;
	opacity: 1;
	border: 1px solid rgba(255, 255, 255, 0.6);
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:hover::before {
	transform: scale(1.05);
}

/* 1 - gourd: round glass disc */
body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:nth-child(1)::before {
	left: -2%;
	width: 104%;
	aspect-ratio: 1 / 1;
	bottom: -8%;
	border-radius: 50%;
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.12));
	box-shadow: 0 34px 60px -34px rgba(15, 92, 99, 0.45);
}

/* 2 - artist: tall arch; her head rises above it */
body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:nth-child(2)::before {
	left: 5%;
	right: 5%;
	top: 15%;
	bottom: 0;
	border-radius: 999px 999px 30px 30px;
	background: linear-gradient(180deg, rgba(15, 92, 99, 0.24), rgba(255, 255, 255, 0.26));
	box-shadow: 0 24px 40px -30px rgba(15, 92, 99, 0.5);
}

/* 3 - painting: tilted accent-tinted plate behind the canvas */
body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:nth-child(3)::before {
	left: -6%;
	right: 6%;
	top: 6%;
	bottom: -4%;
	border-radius: 32px;
	rotate: -5deg;
	background: linear-gradient(160deg, rgba(217, 75, 50, 0.22), rgba(255, 255, 255, 0.28));
	box-shadow: 0 34px 60px -34px rgba(217, 75, 50, 0.45);
}

/* Media widgets: no card, no crop, no white box - the cut-out floats. */
body .jwolfe-about .jwolfe-about-row .elementor-element.jwolfe-about-media {
	position: relative;
	z-index: 1;
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
	background: none;
	will-change: transform;
}

body .jwolfe-about .jwolfe-about-row .elementor-element.jwolfe-about-media img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	object-fit: contain;
	border-radius: 0;
	filter: drop-shadow(0 26px 26px rgba(20, 21, 21, 0.3));
}

/* The source photos are cropped at the frame: the artist's torso fades out
 * into the arch, and the gourd's cropped sides are rounded off. The gourd's
 * drop shadow lives on the widget because clip-path would cut it off. */
/* v1.17.3: full-figure seated cut-out - no bottom fade needed. */
body .jwolfe-about .jwolfe-about-row .elementor-element.jwolfe-about-media--portrait img {
	-webkit-mask-image: none;
	mask-image: none;
}

body .jwolfe-about .jwolfe-about-row .elementor-element.jwolfe-about-media--gourd {
	filter: drop-shadow(0 26px 26px rgba(20, 21, 21, 0.3));
}

body .jwolfe-about .jwolfe-about-row .elementor-element.jwolfe-about-media--gourd img {
	filter: none;
	clip-path: polygon(12% 0%, 88% 0%, 88% 20%, 82% 20%, 82.1% 20.0%, 86.6% 24.0%, 90.5% 28.4%, 93.7% 33.2%, 96.4% 38.4%, 98.3% 43.8%, 99.5% 49.5%, 100.0% 55.2%, 99.7% 60.9%, 98.7% 66.6%, 97.0% 72.1%, 94.5% 77.3%, 91.5% 82.3%, 87.7% 86.8%, 83.5% 90.9%, 78.7% 94.5%, 73.5% 97.5%, 67.9% 99.9%, 62.1% 101.6%, 56.1% 102.6%, 50.0% 103.0%, 43.9% 102.6%, 37.9% 101.6%, 32.1% 99.9%, 26.5% 97.5%, 21.3% 94.5%, 16.5% 90.9%, 12.3% 86.8%, 8.5% 82.3%, 5.5% 77.3%, 3.0% 72.1%, 1.3% 66.6%, 0.3% 60.9%, 0.0% 55.2%, 0.5% 49.5%, 1.7% 43.8%, 3.6% 38.4%, 6.3% 33.2%, 9.5% 28.4%, 13.4% 24.0%, 17.9% 20.0%, 12% 20%);
}

/* The painting is a flat artwork, not a cut-out: it stays a canvas, with
 * a light tilt and shadow instead of a white card. */
body .jwolfe-about .jwolfe-about-row .elementor-element.jwolfe-about-media--painting img {
	border-radius: 14px;
	filter: none;
	rotate: 3deg;
	box-shadow: 0 34px 50px -22px rgba(20, 21, 21, 0.55);
}

@media (min-width: 1025px) {
	/* Layered collage: gourd in front, artist middle, painting behind. */
	/* v1.17.3: breathing room either side of the middle column. The row
	 * must not wrap: the three items shrink a little instead. */
	body .jwolfe-about .jwolfe-about-row {
		flex-wrap: nowrap;
	}

	body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item {
		flex-shrink: 1;
		min-width: 0;
	}

	body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:nth-child(1) {
		z-index: 3;
		margin-right: 0;
		margin-bottom: 18px;
	}

	body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:nth-child(2) {
		z-index: 2;
		margin-left: clamp(40px, 4.5vw, 80px);
		margin-right: clamp(40px, 4.5vw, 80px);
	}

	body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:nth-child(3) {
		z-index: 1;
		margin-left: 0;
		margin-bottom: 44px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body .jwolfe-about .jwolfe-about-row {
		flex-wrap: nowrap;
	}

	body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item {
		flex-shrink: 1;
		min-width: 0;
	}

	body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:nth-child(2) {
		margin-left: 28px;
		margin-right: 28px;
	}
}

@media (max-width: 767px) {
	body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}

	body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:nth-child(2) {
		order: -1;
	}

	body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:nth-child(1),
	body .jwolfe-about .jwolfe-about-row > .jwolfe-reveal-item:nth-child(3) {
		max-width: 230px;
	}
}

/* ---------------------------------------------------------------------
 * "Different Mediums" — sticky stacking cards (SECTION-AGNOSTIC HOOKS).
 *
 * Markup contract (all set as CSS classes in Elementor):
 *   .jwolfe-mediums          section root (must NOT set overflow:hidden —
 *                            any clipping ancestor breaks position:sticky)
 *   .jwolfe-mediums__intro   left column, pinned while cards scroll
 *   .jwolfe-mediums__tab     01/02/03 links (data-cta-label/-url drive the CTA)
 *   .jwolfe-mediums__cta     button whose label + link follow the active card
 *   .jwolfe-mediums__stack   right column; cards are its direct children
 *   .jwolfe-mediums__card    each card (background photo + text)
 *
 * CSS owns the sticky stacking (each card pins 28px lower than the one
 * before so a sliver of the previous card peeks out). JS in
 * initMediumsStack() owns the per-scroll tilt/scale/fade + active state.
 * Below 1025px everything drops back to normal flow.
 * ------------------------------------------------------------------- */
/* NOTE: Elementor's own `.e-con` rule (same specificity, loaded later) and
 * the per-page `.elementor-N .elementor-element.elementor-element-ID
 * { height: initial }` rule (0,3,0) both override plain one-class
 * selectors, which silently disabled sticky + card height. The
 * layout-critical rules below are therefore prefixed with
 * `body .jwolfe-mediums ...` (0,3,1) so they win without !important. */
body .jwolfe-mediums .jwolfe-mediums__stack > .jwolfe-mediums__card {
	position: relative;
	overflow: hidden;
	height: min(640px, calc(100vh - 200px));
	min-height: 440px;
	transform-origin: 50% 0%;
	will-change: transform, opacity;
	box-shadow: 0 30px 60px -30px rgba(20, 21, 21, 0.45);
}

/* Legibility gradient (below the text). */
.jwolfe-mediums__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(20, 21, 21, 0.38) 0%, rgba(20, 21, 21, 0) 26%, rgba(20, 21, 21, 0) 42%, rgba(20, 21, 21, 0.8) 100%);
}

/* Depth dim applied while the next card slides over this one (--jw-dim set by JS). */
.jwolfe-mediums__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: #141515;
	opacity: var(--jw-dim, 0);
	/* Own compositor layer: changing its opacity never repaints the
	 * large background photo underneath. */
	will-change: opacity;
}

.jwolfe-mediums__card > .elementor-element {
	position: relative;
	z-index: 1;
}

.jwolfe-mediums__card-label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.jwolfe-mediums__card-count {
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	opacity: 0.8;
}

.jwolfe-mediums__card-count b {
	font-weight: 600;
	opacity: 1;
}

/* 01 / 02 / 03 nav */
.jwolfe-mediums__nav {
	display: flex;
	align-items: stretch;
}

/* Prefixed with .jwolfe-mediums so the Elementor kit's global link colour
 * (.elementor-kit-N a, specificity 0,1,1) cannot override the tab colours. */
.jwolfe-mediums .jwolfe-mediums__tab {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 34px;
	border-left: 1px solid rgba(20, 21, 21, 0.16);
	color: #9A9285;
	text-decoration: none;
	transition: color 0.35s ease;
}

.jwolfe-mediums .jwolfe-mediums__tab:first-child {
	padding-left: 0;
	border-left: 0;
}

.jwolfe-mediums .jwolfe-mediums__tab:hover,
.jwolfe-mediums .jwolfe-mediums__tab:focus-visible,
.jwolfe-mediums .jwolfe-mediums__tab.is-active {
	color: #0F5C63;
}

.jwolfe-mediums__num {
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
	font-size: 1.75rem;
	line-height: 1;
	font-weight: 300;
}

.jwolfe-mediums__num::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	opacity: 0.3;
	transform: scaleX(0.6);
	transform-origin: left center;
	transition: transform 0.45s ease, opacity 0.45s ease;
}

.jwolfe-mediums__tab.is-active .jwolfe-mediums__num::after {
	opacity: 1;
	transform: scaleX(1);
}

.jwolfe-mediums__label {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.jwolfe-mediums__cta .elementor-button-text {
	display: inline-block;
}

@media (min-width: 1025px) {
	body .jwolfe-mediums .jwolfe-mediums__intro {
		position: sticky;
		top: 120px;
		align-self: flex-start;
	}

	body .jwolfe-mediums .jwolfe-mediums__stack > .jwolfe-mediums__card {
		position: sticky;
		top: 120px;
	}

	body .jwolfe-mediums .jwolfe-mediums__stack > .jwolfe-mediums__card:nth-child(2) { top: 148px; }
	body .jwolfe-mediums .jwolfe-mediums__stack > .jwolfe-mediums__card:nth-child(3) { top: 176px; }
	body .jwolfe-mediums .jwolfe-mediums__stack > .jwolfe-mediums__card:nth-child(4) { top: 204px; }
}

@media (max-width: 1024px) {
	body .jwolfe-mediums .jwolfe-mediums__stack > .jwolfe-mediums__card {
		height: 520px;
		min-height: 0;
	}
}

@media (max-width: 767px) {
	body .jwolfe-mediums .jwolfe-mediums__stack > .jwolfe-mediums__card {
		height: 440px;
	}

	.jwolfe-mediums .jwolfe-mediums__tab {
		padding: 0 18px;
	}

	.jwolfe-mediums .jwolfe-mediums__tab:first-child {
		padding-left: 0;
	}

	.jwolfe-mediums__num {
		font-size: 1.4rem;
	}

	.jwolfe-mediums__label {
		font-size: 0.68rem;
		letter-spacing: 0.1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jwolfe-mediums__tab,
	.jwolfe-mediums__num::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * "Explore All Work" finale (SECTION-AGNOSTIC HOOKS). v1.10.0.
 *
 * Modelled on the artiox.framer.website hero:
 *   - a two-row gallery of identical 3:4 portraits: 4 across the top edge
 *     to edge, 3 below sitting exactly halfway between the ones above.
 *     The gallery is NOT pinned - it scrolls away natively with the page,
 *     and while it does the two rows swap places (JS, scrubbed).
 *   - the big word sits on a CSS-sticky one-screen stage below it.
 *
 * Markup contract (CSS classes set in Elementor):
 *   .jwolfe-work          section root; tall (it is the scroll runway)
 *   .jwolfe-work__grid    gallery box (absolute, at the top of the section)
 *   .jwolfe-work__img     each artwork, + --1..--7 for its slot
 *                         (1-4 = top row left->right, 5-7 = bottom row)
 *   .jwolfe-work__stage   one-screen stage, pinned with CSS sticky
 *   .jwolfe-work__type    block holding the CTA and the big word
 *   .jwolfe-work__word    the big "WORK"
 *   .jwolfe-work__cta     <a> that starts as the small "EXPLORE ALL" label
 *                         and becomes the pill button
 *
 * The CSS is the FINAL (button) state for the type, so no-JS and
 * reduced-motion visitors get WORK with the button on it. Everything is
 * prefixed with `body .jwolfe-work` so Elementor's container/image rules
 * (see v1.7.1 notes) can't override layout-critical properties.
 * ------------------------------------------------------------------- */
body .jwolfe-work {
	/* Word size and its distance from the bottom of the first screen.
	 * The sticky offset below is derived from these two values. */
	--jw-word-fs: min(22vw, 36vh);
	--jw-type-bottom: 4vh;
	position: relative;
	height: 190vh;
	padding: 0;
}

/* ---- Gallery ------------------------------------------------------- */
/* Geometry from the reference at 1920px: 150x200 portraits across a
 * 1314px band (68.4vw), 40px between the rows. Sizes scale with the
 * viewport, and are capped by height so short screens still fit. */
body .jwolfe-work .jwolfe-work__grid {
	--jw-iw: clamp(84px, min(7.8vw, 16vh), 176px);
	--jw-ih: calc(var(--jw-iw) * 4 / 3);
	--jw-gap: calc(var(--jw-iw) * 0.2667);
	--jw-slots: 6;
	/* NB: --jw-* names on purpose - Elementor containers define their own
	 * --gap (e.g. "20px 20px"), which silently broke an un-prefixed calc. */
	position: absolute;
	top: clamp(56px, 9vh, 110px);
	left: 50%;
	z-index: 2;
	display: block;
	width: min(68.4vw, 1320px);
	height: calc(var(--jw-ih) * 2 + var(--jw-gap));
	min-height: 0;
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
	pointer-events: none;
}

body .jwolfe-work .jwolfe-work__grid > .jwolfe-work__img {
	position: absolute;
	top: 0;
	left: calc(var(--jw-k, 0) * (100% - var(--jw-iw)) / var(--jw-slots));
	width: var(--jw-iw);
	max-width: none;
	margin: 0;
	will-change: transform;
}

body .jwolfe-work .jwolfe-work__img img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 0;
}

/* Top row: slots 0, 2, 4, 6. Bottom row: 1, 3, 5 (halfway between). */
body .jwolfe-work .jwolfe-work__img--1 { --jw-k: 0; }
body .jwolfe-work .jwolfe-work__img--2 { --jw-k: 2; }
body .jwolfe-work .jwolfe-work__img--3 { --jw-k: 4; }
body .jwolfe-work .jwolfe-work__img--4 { --jw-k: 6; }
body .jwolfe-work .jwolfe-work__grid > .jwolfe-work__img--5,
body .jwolfe-work .jwolfe-work__grid > .jwolfe-work__img--6,
body .jwolfe-work .jwolfe-work__grid > .jwolfe-work__img--7 {
	top: calc(var(--jw-ih) + var(--jw-gap));
}
body .jwolfe-work .jwolfe-work__img--5 { --jw-k: 1; }
body .jwolfe-work .jwolfe-work__img--6 { --jw-k: 3; }
body .jwolfe-work .jwolfe-work__img--7 { --jw-k: 5; }

/* Retired v1.9 artwork widgets (left in the Elementor tree, hidden on all
 * devices; safe to delete in the Navigator). Never render them. */
body .jwolfe-work .jwolfe-work__legacy {
	display: none !important;
}

/* ---- Sticky stage + type -------------------------------------------- */
/* v1.12.0 - like the artiox hero, WORK is NOT pinned from the start: the
 * stage scrolls up with the page (alongside the departing gallery) and
 * only sticks once the word's centre reaches the middle of the screen.
 * top = 50vh - (word centre within the stage)
 *     = 50vh - (100vh - type-bottom - 0.41 * font-size)   (0.82 line box) */
body .jwolfe-work .jwolfe-work__stage {
	position: sticky;
	top: calc(var(--jw-type-bottom) + var(--jw-word-fs) * 0.41 - 50vh);
	z-index: 1;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	display: block;
	padding: 0;
}

body .jwolfe-work .jwolfe-work__type {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--jw-type-bottom);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 0;
}

body .jwolfe-work .jwolfe-work__word {
	margin: 0;
	width: 100%;
	text-align: center;
}

body .jwolfe-work .jwolfe-work__word .elementor-heading-title {
	font-size: var(--jw-word-fs);
	line-height: 0.82;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* Final state: the CTA sits centred ON the word (JS starts it above). */
body .jwolfe-work .jwolfe-work__type > .elementor-widget-text-editor {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	z-index: 3;
	margin: 0;
	text-align: center;
	transform: translateY(-50%);
}

body .jwolfe-work .jwolfe-work__type > .elementor-widget-text-editor p {
	margin: 0;
}

.jwolfe-work__cta {
	position: relative;
	display: inline-grid;
	place-items: center;
	padding: 20px 46px;
	text-decoration: none;
	will-change: transform;
}

/* Label + button text share one grid cell, so the button box never
 * changes size while it morphs (no layout work during the scroll). The
 * pill is excluded: an absolutely positioned grid item would take the
 * cell, not the padding box, as its containing block. */
.jwolfe-work__cta > span:not(.jwolfe-work__pill) {
	grid-area: 1 / 1;
}

.jwolfe-work__pill {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #0F5C63;
	box-shadow: 0 18px 40px -18px rgba(15, 92, 99, 0.55);
	transition: background-color 0.3s ease;
	will-change: transform, opacity;
}

.jwolfe-work__cta:hover .jwolfe-work__pill,
.jwolfe-work__cta:focus-visible .jwolfe-work__pill {
	background: #0B4A50;
}

.jwolfe-work__label {
	position: relative;
	color: #141515;
	font-family: var(--e-global-typography-accent-font-family), serif;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
}

/* Button face of the WORK CTA = the global button typography: Global
 * Accent font at the global button size (Site Settings), not local values. */
.jwolfe-work__btn {
	position: relative;
	color: #FFFFFF;
	font-family: var(--e-global-typography-accent-font-family), serif;
	font-size: var(--e-global-typography-accent-font-size, 18px);
	font-weight: var(--e-global-typography-accent-font-weight, 400);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.jwolfe-work__arrow {
	display: inline-block;
	margin-left: 0.35em;
	letter-spacing: 0;
	transition: transform 0.3s ease;
}

.jwolfe-work__cta:hover .jwolfe-work__arrow {
	transform: translateX(4px);
}

@media (max-width: 767px) {
	body .jwolfe-work {
		--jw-word-fs: 27vw;
		--jw-type-bottom: 24vh;
		height: 170vh;
	}

	/* 3 over 2 on phones (5 slots) so the rows can still pass between
	 * each other without the images colliding. */
	body .jwolfe-work .jwolfe-work__grid {
		--jw-iw: 17.5vw;
		--jw-slots: 4;
		top: 14vh;
		width: 94vw;
	}

	body .jwolfe-work .jwolfe-work__img--4,
	body .jwolfe-work .jwolfe-work__img--7 {
		display: none;
	}

	body .jwolfe-work .jwolfe-work__img--1 { --jw-k: 0; }
	body .jwolfe-work .jwolfe-work__img--2 { --jw-k: 2; }
	body .jwolfe-work .jwolfe-work__img--3 { --jw-k: 4; }
	body .jwolfe-work .jwolfe-work__img--5 { --jw-k: 1; }
	body .jwolfe-work .jwolfe-work__img--6 { --jw-k: 3; }

	.jwolfe-work__cta {
		padding: 16px 30px;
	}

	.jwolfe-work__label {
		font-size: 0.8rem;
		letter-spacing: 0.32em;
	}


}

@media (prefers-reduced-motion: reduce) {
	body .jwolfe-work {
		height: auto;
	}

	body .jwolfe-work .jwolfe-work__stage {
		position: relative;
		top: auto;
	}
}

/* ---------------------------------------------------------------------
 * Hero 2 - "fly-through" zoom (v1.14.0). Modelled on
 * codepen.io/pixelgridui/pen/GgKLmWL, rebuilt for smoothness:
 * CSS-sticky stage instead of a GSAP pin, one scrubbed timeline,
 * transform/opacity only (initHero2 in jwolfe-motion.js).
 *
 * Markup contract (CSS classes set in Elementor):
 *   .jwolfe-hero2            section root = scroll runway
 *   .jwolfe-hero2__stage     one-screen stage (sticky)
 *   .jwolfe-hero2__bg        Image widget - beach plate (back layer)
 *   .jwolfe-hero2__artist    Image widget - the artist (middle layer)
 *   .jwolfe-hero2__fg        Image widget - umbrella set (front layer)
 *   .jwolfe-hero2__fade      empty container - cream fade at the bottom
 *   .jwolfe-hero2__content   title + button
 *   .jwolfe-hero2__title     Heading (Global Secondary font, Text colour)
 *   .jwolfe-hero2__accent    italic spans inside the title (Accent colour)
 *
 * bg and fg are exported on the SAME canvas, so both fill the stage with
 * identical object-fit/object-position and always stay aligned.
 * Brand: fonts/colours come from Elementor globals; the button is the
 * standard global button (Site Settings + jwolfe-buttons hover).
 * ------------------------------------------------------------------- */
body .jwolfe-hero2 {
	--jw-h2-focus: 50% 50%;
	--jw-h2-fade: var(--e-global-color-primary, #F2EFE7);
	position: relative;
	height: 160vh;
	padding: 0;
}

body .jwolfe-hero2 .jwolfe-hero2__stage {
	position: sticky;
	top: 0;
	display: block;
	width: 100%;
	height: 100vh;
	padding: 0;
	overflow: hidden;
	isolation: isolate;
}

/* ---- Layers ------------------------------------------------------ */
body .jwolfe-hero2 .jwolfe-hero2__bg,
body .jwolfe-hero2 .jwolfe-hero2__fg {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	will-change: transform;
}

body .jwolfe-hero2 .jwolfe-hero2__bg { z-index: 1; }
body .jwolfe-hero2 .jwolfe-hero2__fg { z-index: 4; pointer-events: none; }

body .jwolfe-hero2 :is(.jwolfe-hero2__bg, .jwolfe-hero2__fg) .elementor-widget-container {
	width: 100%;
	height: 100%;
}

body .jwolfe-hero2 :is(.jwolfe-hero2__bg, .jwolfe-hero2__fg) img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--jw-h2-focus);
}

/* Soft daylight bloom behind the title (as in the design). */
body .jwolfe-hero2 .jwolfe-hero2__stage::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 8%;
	top: 12%;
	width: 54%;
	height: 70%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.28) 55%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

body .jwolfe-hero2 .jwolfe-hero2__artist {
	position: absolute;
	z-index: 3;
	left: calc(63% - 26vh);
	bottom: 7vh;
	width: 52vh;
	max-width: none;
	margin: 0;
	transform-origin: 50% 100%;
	will-change: transform;
}

body .jwolfe-hero2 .jwolfe-hero2__artist img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

body .jwolfe-hero2 .jwolfe-hero2__fade {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34%;
	min-height: 0;
	padding: 0;
	background: linear-gradient(180deg, rgba(242, 239, 231, 0) 0%, var(--jw-h2-fade) 78%);
	pointer-events: none;
}

/* ---- Title + button --------------------------------------------- */
body .jwolfe-hero2 .jwolfe-hero2__content {
	position: absolute;
	z-index: 6;
	left: 18%;
	top: 26%;
	width: 34%;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	text-align: center;
}

/* Display size is the one local value here (a hero display exception);
 * font family/weight/colour stay on the Elementor globals. */
body .jwolfe-hero2 .elementor-element.jwolfe-hero2__title .elementor-heading-title {
	font-size: clamp(46px, 5.6vw, 112px);
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.jwolfe-hero2__accent {
	font-style: italic;
	text-transform: none;
	color: var(--e-global-color-accent, #D94B32);
}

.jwolfe-hero2__accent--caps {
	text-transform: uppercase;
}

@media (max-width: 1024px) {
	body .jwolfe-hero2 {
		--jw-h2-focus: 40% 50%;
		height: 150vh;
	}

	body .jwolfe-hero2 .jwolfe-hero2__content {
		left: 6%;
		top: 14%;
		width: 50%;
	}

	body .jwolfe-hero2 .elementor-element.jwolfe-hero2__title .elementor-heading-title {
		font-size: clamp(44px, 8vw, 80px);
	}

	body .jwolfe-hero2 .jwolfe-hero2__artist {
		left: calc(68% - 22vh);
		width: 44vh;
	}
}

@media (max-width: 767px) {
	body .jwolfe-hero2 {
		--jw-h2-focus: 30% 50%;
		height: 140vh;
	}

	body .jwolfe-hero2 .jwolfe-hero2__stage::after {
		left: -10%;
		top: 4%;
		width: 120%;
		height: 50%;
	}

	body .jwolfe-hero2 .jwolfe-hero2__content {
		left: 5%;
		top: 11vh;
		width: 90%;
		gap: 20px;
	}

	body .jwolfe-hero2 .elementor-element.jwolfe-hero2__title .elementor-heading-title {
		font-size: 12.5vw;
	}

	body .jwolfe-hero2 .jwolfe-hero2__artist {
		left: calc(50% - 19vh);
		bottom: 4vh;
		width: 38vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .jwolfe-hero2 {
		height: auto;
	}

	body .jwolfe-hero2 .jwolfe-hero2__stage {
		position: relative;
	}
}

/* ==========================================================================
   v1.17.2 - Header: floating pill at the top of the page, morphs into a
   full-width sticky bar once the page has scrolled 100px (.is-scrolled is
   toggled by initStickyHeader()). Logo | menu (centre) | button.
   ========================================================================== */
body .elementor .e-con.jwolfe-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 20px 0 0;
	--padding-top: 20px;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	z-index: 9990;
	background: transparent;
	pointer-events: none;
	transition: padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body.admin-bar .elementor .e-con.jwolfe-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .elementor .e-con.jwolfe-header {
		top: 46px;
	}
}

/* The bar itself: frosted pill by default */
body .elementor .e-con.jwolfe-header .e-con.jwolfe-header-pill {
	pointer-events: auto;
	width: min(1100px, calc(100% - 48px));
	max-width: none;
	margin: 0 auto;
	padding: 0 14px 0 30px;
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 30px;
	--padding-right: 14px;
	min-height: 0;
	--min-height: 0px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 40px;
	--border-radius: 40px;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 10px 30px rgba(20, 21, 21, 0.08);
	transition:
		width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.4s ease,
		border-color 0.4s ease,
		box-shadow 0.4s ease;
	will-change: width;
}
body .elementor .e-con.jwolfe-header .e-con.jwolfe-header-pill > .e-con-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 24px;
	max-width: 1240px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	min-height: 0;
	height: 74px;
	transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scrolled: full-width solid bar pinned to the top */
body .elementor .e-con.jwolfe-header.is-scrolled {
	padding-top: 0;
	--padding-top: 0;
}
body .elementor .e-con.jwolfe-header.is-scrolled .e-con.jwolfe-header-pill {
	width: 100%;
	padding: 0 24px;
	--padding-left: 24px;
	--padding-right: 24px;
	border-radius: 0;
	--border-radius: 0;
	border-color: transparent;
	border-bottom-color: rgba(15, 92, 99, 0.08);
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 6px 24px rgba(20, 21, 21, 0.10);
}
body .elementor .e-con.jwolfe-header.is-scrolled .e-con.jwolfe-header-pill > .e-con-inner {
	height: 64px;
}

/* Columns */
body .elementor .e-con.jwolfe-header .e-con-inner > .jwolfe-header__logo {
	justify-self: start;
	margin: 0;
	width: auto;
}
body .elementor .e-con.jwolfe-header .jwolfe-header__logo img {
	display: block;
	height: 48px;
	width: auto;
	max-width: none;
	transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body .elementor .e-con.jwolfe-header.is-scrolled .jwolfe-header__logo img {
	height: 44px;
}
body .elementor .e-con.jwolfe-header .e-con-inner > .e-con:not(.jwolfe-header__logo) {
	justify-self: center;
	width: auto;
}
body .elementor .e-con.jwolfe-header .e-con-inner > .elementor-widget-button {
	justify-self: end;
	width: auto;
	margin: 0;
}
body .elementor .e-con.jwolfe-header .elementor-widget-button .elementor-button {
	padding: 12px 24px;
	min-height: 0;
	font-size: 14px;
}

@media (max-width: 900px) {
	body .elementor .e-con.jwolfe-header .e-con-inner > .e-con:not(.jwolfe-header__logo) {
		display: none;
	}
	body .elementor .e-con.jwolfe-header .e-con.jwolfe-header-pill > .e-con-inner {
		grid-template-columns: 1fr auto;
	}
}
@media (max-width: 767px) {
	body .elementor .e-con.jwolfe-header {
		padding-top: 12px;
		--padding-top: 12px;
	}
	body .elementor .e-con.jwolfe-header .e-con.jwolfe-header-pill {
		width: calc(100% - 24px);
		padding: 0 8px 0 18px;
	}
	body .elementor .e-con.jwolfe-header .e-con.jwolfe-header-pill > .e-con-inner,
	body .elementor .e-con.jwolfe-header.is-scrolled .e-con.jwolfe-header-pill > .e-con-inner {
		height: 58px;
	}
	body .elementor .e-con.jwolfe-header.is-scrolled .e-con.jwolfe-header-pill {
		padding: 0 16px;
	}
	body .elementor .e-con.jwolfe-header .jwolfe-header__logo img,
	body .elementor .e-con.jwolfe-header.is-scrolled .jwolfe-header__logo img {
		height: 36px;
	}
	body .elementor .e-con.jwolfe-header .elementor-widget-button .elementor-button {
		padding: 9px 16px;
		font-size: 13px;
	}
}
@media (prefers-reduced-motion: reduce) {
	body .elementor .e-con.jwolfe-header,
	body .elementor .e-con.jwolfe-header * {
		transition: none !important;
	}
}