/* ==========================================================================
   Jigsaw Fine Art — theme styles
   Colours, fonts and sizes come from theme.json (Appearance > Editor > Styles).
   This file adds the layout and the decorative details from the design.
   ========================================================================== */

:root {
	--jg-black: var(--wp--preset--color--black, #000);
	--jg-ink: var(--wp--preset--color--ink, #191919);
	--jg-teal: var(--wp--preset--color--teal, #017c8b);
	--jg-coral: var(--wp--preset--color--coral, #f26956);
	--jg-purple: var(--wp--preset--color--purple, #462986);
	--jg-silver: var(--wp--preset--color--silver, #d2d2d2);
	--jg-mist: var(--wp--preset--color--mist, #e8e8e8);
	--jg-paper: var(--wp--preset--color--paper, #f1f1f1);
	--jg-serif: var(--wp--preset--font-family--serif, Georgia, serif);
	--jg-section-y: clamp(4.5rem, 9vw, 8.5rem);
	--jg-header-h: 4.75rem;
	--jg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--jg-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M3 13 13 3M5 3h8v8'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--jg-header-h) + 1.5rem);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Sections sit flush against each other. */
:root .wp-site-blocks > *,
:root .jg-main > * {
	margin-block: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Typography details
   -------------------------------------------------------------------------- */

/* Italic words in headings switch to the serif — just press "Italic" in the editor. */
:is(h1, h2, h3, .jg-process__label) em {
	font-family: var(--jg-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.jg-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.38;
}

:root .is-style-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.2;
}

.jg-text-coral { color: var(--jg-coral); }
.jg-text-muted { color: #8c8c8c; }

/* Pill tags (FOUNDER, INSTRUCTIONS …) */
:root .is-style-pill {
	display: table;
	padding: 0.5em 1.35em;
	border: 1px solid var(--jg-black);
	border-radius: 999px;
	background: var(--jg-coral);
	color: var(--jg-black);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.1;
	text-transform: uppercase;
	white-space: nowrap;
}

:root .is-style-pill.jg-pill--teal {
	background: var(--jg-teal);
	color: #fff;
	min-width: 11.5rem;
	padding: 0.72em 2.4em;
	text-align: center;
	font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wp-block-buttons {
	gap: 1.25rem;
}

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.85em;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--jg-ease);
}

.wp-block-button:not(.is-style-no-icon) .wp-block-button__link::after {
	content: "";
	width: 1.15em;
	height: 1.15em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--jg-arrow) center / contain no-repeat;
	mask: var(--jg-arrow) center / contain no-repeat;
	transition: transform 0.25s var(--jg-ease);
}

.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after {
	transform: translate(2px, -2px);
}

.wp-block-button.is-style-light .wp-block-button__link {
	background: var(--jg-silver);
	color: var(--jg-black);
}

.wp-block-button.is-style-dark .wp-block-button__link {
	background: var(--jg-black);
	color: #fff;
}

.wp-block-button.is-style-light .wp-block-button__link:hover,
.wp-block-button.is-style-dark .wp-block-button__link:hover {
	background: #fff;
	color: var(--jg-black);
}

.wp-block-button__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Header (floats over every page)
   -------------------------------------------------------------------------- */

.jg-site-header {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
	z-index: 100;
	padding: 0.75rem;
	pointer-events: none;
}

.jg-header,
:root .jg-header > * {
	margin: 0;
}

.jg-header__bar {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--jg-header-h);
	padding: 0.5rem 0.75rem 0.5rem clamp(1rem, 3vw, 2.75rem);
	border-radius: 2.5rem;
	background: rgb(34 34 34 / 0.88);
	color: #fff;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

:root .jg-header__bar > * {
	margin: 0;
}

.is-scrolled .jg-header__bar {
	background: rgb(24 24 24 / 0.96);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
}

.jg-brand {
	font-size: 1.25rem;
	line-height: 1;
	white-space: nowrap;
}

.jg-brand a {
	display: inline-flex;
	align-items: center;
	white-space: pre;
	color: inherit;
	text-decoration: none !important;
}

.jg-brand a::before {
	content: "";
	margin-right: 0.8rem;
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	background: url("../images/logo.svg") center / contain no-repeat;
}

.jg-brand strong {
	font-weight: 500;
}

.jg-brand--large {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.jg-brand--large a::before {
	width: 3.5rem;
	height: 3.5rem;
}

.jg-nav {
	margin-left: auto !important;
	color: #fff;
	font-size: 1.125rem;
}

.jg-nav .wp-block-navigation__container {
	gap: clamp(1.25rem, 2.6vw, 2.75rem);
}

.jg-nav .wp-block-navigation-item__content:hover {
	text-decoration: none;
	opacity: 0.7;
}

.jg-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--jg-ink);
	color: #fff;
	padding: 1.5rem;
	font-size: 2rem;
}

.jg-header__cta .wp-block-button__link {
	padding: 1.15em 1.9em;
}

/* --------------------------------------------------------------------------
   Shared section rhythm
   -------------------------------------------------------------------------- */

.jg-section {
	position: relative;
	padding-block: var(--jg-section-y);
	overflow: clip;
}

/* Custom grids: children align to the grid, not to WordPress' flow margins. */
:root :is(
	.jg-hero__grid, .jg-hero__copy, .jg-split, .jg-network__grid, .jg-network__copy,
	.jg-facts, .jg-sectors__head, .jg-cards, .is-style-card, .jg-process__head,
	.jg-process__grid, .jg-steps, .jg-step, .jg-step__top, .jg-why__head, .jg-why__list,
	.jg-why__row, .jg-collage, .jg-team__head, .jg-member, .jg-member__info,
	.jg-cta__grid, .jg-cta__copy, .jg-footer, .jg-footer__links, .jg-footer__contact
) > * {
	margin-block: 0;
}

.jg-section h2 {
	font-size: clamp(2.5rem, 2rem + 2.1vw, 4.25rem);
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.jg-hero {
	min-height: min(100svh, 62rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: calc(var(--jg-header-h) + 4rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
	background:
		radial-gradient(90% 80% at 72% 18%, #3a3a3a 0%, #1b1b1b 45%, #000 80%) !important;
	border-bottom: 1px solid #2c2c2c;
}

.jg-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
	width: 100%;
}

.jg-hero h1 {
	font-size: clamp(2.6rem, 2rem + 2.3vw, 4.4rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.jg-hero h1 em {
	font-size: 1.04em;
}

.jg-hero .jg-lead {
	max-width: 30rem;
	margin-top: 1.75rem;
}

.jg-hero .wp-block-buttons {
	margin-top: 2.5rem;
}

/* Coral line falling from the "Get in touch" button. */
.jg-hero__contact {
	position: relative;
}

.jg-hero__contact::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 1px;
	height: 60vh;
	background: var(--jg-coral);
	opacity: 0.9;
	pointer-events: none;
}

.jg-hero__art {
	position: relative;
	padding: 3rem 0 4rem;
}

/* Dot grid behind the painting. */
.jg-hero__art::before {
	content: "";
	position: absolute;
	right: max(-3rem, -4vw);
	bottom: 0;
	width: 72%;
	height: 82%;
	background-image: radial-gradient(circle, rgb(255 255 255 / 0.85) 1.3px, transparent 1.7px);
	background-size: 24px 24px;
}

/* Teal circle overlapping the painting's lower-left corner. */
.jg-hero__art::after {
	content: "";
	position: absolute;
	left: -2%;
	bottom: 15%;
	width: clamp(2.75rem, 4.6vw, 4.25rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--jg-teal);
	z-index: 2;
	animation: jg-float 7s ease-in-out infinite;
}

.jg-hero__painting {
	position: relative;
	z-index: 1;
	width: min(100%, 40rem);
	margin: 0 0 0 auto !important;
	aspect-ratio: 0.9;
	transform: rotate(4.5deg);
	box-shadow: 0 30px 60px rgb(0 0 0 / 0.35);
}

.jg-hero__painting img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Thin white lines crossing the painting's top and bottom edges. */
.jg-hero__painting::before,
.jg-hero__painting::after {
	content: "";
	position: absolute;
	left: 55%;
	width: 1px;
	background: rgb(255 255 255 / 0.85);
	z-index: 2;
}

.jg-hero__painting::before {
	top: -7rem;
	height: 8.5rem;
}

.jg-hero__painting::after {
	bottom: -6rem;
	left: 52%;
	height: 7rem;
}

/* --------------------------------------------------------------------------
   2. Intro — "Not your usual Loss Adjusting firm."
   -------------------------------------------------------------------------- */

.jg-intro {
	padding-bottom: clamp(5rem, 14vw, 12rem);
}

.jg-split {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

.jg-intro__text {
	max-width: 24rem;
	justify-self: end;
}

/* --------------------------------------------------------------------------
   3. Network — "Eyes on the ground. Everywhere."
   -------------------------------------------------------------------------- */

.jg-network {
	padding-block: 1.25rem;
}

/* White line dropping in from the top edge. */
.jg-network::before {
	content: "";
	position: absolute;
	top: 0;
	left: 44%;
	width: 1px;
	height: clamp(6rem, 16vw, 15rem);
	background: rgb(255 255 255 / 0.75);
}

.jg-network__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: stretch;
}

.jg-network__copy {
	padding-block: clamp(3rem, 8vw, 7rem);
	align-self: center;
}

.jg-network h2 {
	margin-top: 1.25rem !important;
}

.jg-network .jg-lead {
	max-width: 31rem;
	margin-top: 2.5rem !important;
	font-size: var(--wp--preset--font-size--large);
}

.jg-facts {
	margin-top: 2.75rem !important;
}

.jg-facts h3 {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.jg-facts p {
	margin-top: 0.4rem !important;
	margin-bottom: 1.75rem !important;
	font-size: 1rem;
}

.jg-network .wp-block-buttons {
	margin-top: 2.25rem !important;
}

.jg-map {
	position: relative;
	margin: 0 !important;
	min-height: 32rem;
	border: 2px solid rgb(255 255 255 / 0.85);
	border-radius: 1.5rem;
	overflow: hidden;
	background: #e9e9e9;
}

.jg-map img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
}

/* Location pins — edit the percentages to move them. */
.jg-map::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle 0.6rem at 10% 43%, #111 96%, transparent 100%),
		radial-gradient(circle 0.6rem at 15% 49%, var(--jg-coral) 96%, transparent 100%),
		radial-gradient(circle 0.6rem at 61% 41%, #111 96%, transparent 100%),
		radial-gradient(circle 0.6rem at 82% 38%, var(--jg-coral) 96%, transparent 100%),
		radial-gradient(circle 0.6rem at 71% 47%, var(--jg-teal) 96%, transparent 100%),
		radial-gradient(circle 0.6rem at 85% 49%, #111 96%, transparent 100%),
		radial-gradient(circle 0.6rem at 12.5% 57%, #fff 96%, transparent 100%),
		radial-gradient(circle 0.6rem at 26% 66%, #111 96%, transparent 100%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Sectors
   -------------------------------------------------------------------------- */

.jg-sectors {
	padding-bottom: clamp(5rem, 10vw, 9rem);
}

/* Hanging square, circle and triangle. */
.jg-sectors::before {
	content: "";
	position: absolute;
	top: 0;
	right: 12%;
	width: clamp(12rem, 24vw, 21rem);
	aspect-ratio: 500 / 330;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 330' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M57 0v263M246 0v128M436 0v200'/%3E%3Crect x='17' y='236' width='78' height='78'/%3E%3Ccircle cx='246' cy='143' r='39'/%3E%3Cpath d='M436 166 483 248H389Z' transform='translate(-1 0)'/%3E%3C/svg%3E") top / contain no-repeat;
	transform-origin: top center;
	animation: jg-sway 9s ease-in-out infinite;
	pointer-events: none;
}

.jg-sectors__head h2 {
	margin-top: 1.5rem !important;
}

.jg-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 5.5vw, 5.5rem);
	margin-top: clamp(3.5rem, 7vw, 6.5rem) !important;
}

:root .is-style-card {
	border-radius: 1.75rem;
	padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.5rem, 2.2vw, 2rem) clamp(2rem, 4vw, 3.5rem);
	background: var(--jg-paper);
}

.jg-cards .is-style-card {
	display: flex;
	flex-direction: column;
	min-height: clamp(20rem, 34vw, 29rem);
	background: linear-gradient(170deg, #e9e9e9 0%, #f3f3f3 55%, #fff 100%);
}

.jg-cards h3 {
	margin-top: auto !important;
	font-size: clamp(1.375rem, 1.15rem + 0.55vw, 1.75rem);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.jg-cards h3 + p {
	margin-top: 1.25rem !important;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.38;
}

.jg-num {
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	border: 1px solid var(--jg-black);
	border-radius: 50%;
	color: #fff;
	font-size: 2.25rem;
	font-weight: 300;
	line-height: 1;
}

.jg-num--coral { background: var(--jg-coral); }
.jg-num--purple { background: var(--jg-purple); }
.jg-num--teal { background: var(--jg-teal); }

/* --------------------------------------------------------------------------
   5. Process
   -------------------------------------------------------------------------- */

.jg-process {
	padding-top: 0;
}

.jg-process__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2.5rem;
}

.jg-process__head .is-style-eyebrow {
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--jg-black);
}

.jg-process__label {
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.025em;
}

.jg-process__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-top: clamp(3.5rem, 8vw, 7.5rem) !important;
}

/* Soft grey glow on the lower left. */
.jg-process__grid::before {
	content: "";
	position: absolute;
	left: -30%;
	top: 30%;
	width: 90%;
	height: 90%;
	background: radial-gradient(closest-side, #ececec, rgb(236 236 236 / 0));
	pointer-events: none;
}

.jg-process__title {
	position: relative;
	align-self: start;
	padding-right: 2rem;
	font-size: clamp(2.5rem, 2rem + 2.1vw, 4.25rem);
}

/* Horizontal rule running to the left edge of the screen. */
.jg-process__title::after {
	content: "";
	position: absolute;
	left: -100vw;
	right: 0;
	top: calc(100% + clamp(2rem, 5vw, 4.5rem));
	height: 1px;
	background: var(--jg-black);
}

.jg-steps {
	position: relative;
	padding-left: clamp(1.5rem, 6vw, 5.5rem);
	border-left: 1px solid var(--jg-black);
	padding-bottom: 1rem;
}

.jg-step + .jg-step {
	margin-top: clamp(2.5rem, 5vw, 4.25rem) !important;
}

.jg-step__top {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.jg-step__num {
	position: relative;
	min-width: 3.4rem;
	font-size: clamp(2.75rem, 2rem + 2.2vw, 4.25rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
}

.jg-step:first-child .jg-step__num::before {
	content: "";
	position: absolute;
	left: -0.6em;
	top: -0.35em;
	width: 0.95em;
	aspect-ratio: 1;
	border: 1px solid var(--jg-black);
	border-radius: 50%;
}

.jg-step__text {
	max-width: 33rem;
	margin-top: 1.5rem !important;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.38;
}

.jg-step__text strong {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Why Jigsaw
   -------------------------------------------------------------------------- */

.jg-why {
	border-top: 1px solid var(--jg-black);
}

.jg-collage {
	position: absolute !important;
	top: 0;
	left: 0;
	width: clamp(14rem, 22vw, 22rem);
	height: 46rem;
	margin: 0 !important;
	pointer-events: none;
}

.jg-collage figure {
	position: absolute;
	margin: 0 !important;
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: 0 18px 40px rgb(0 0 0 / 0.15);
}

.jg-collage figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jg-collage__a {
	width: 70%;
	aspect-ratio: 3 / 4;
	top: -6rem;
	left: -4%;
	transform: rotate(-20deg);
}

.jg-collage__b {
	width: 88%;
	aspect-ratio: 3 / 4;
	top: 15rem;
	left: -22%;
	transform: rotate(32deg);
}

/* Teal gradient card tucked between the two images. */
.jg-collage::before {
	content: "";
	position: absolute;
	top: 9.5rem;
	left: -18%;
	width: 95%;
	height: 13rem;
	border-radius: 1.5rem;
	background: linear-gradient(110deg, #c9867b 0%, var(--jg-teal) 55%);
	transform: rotate(32deg);
	z-index: 1;
}

.jg-collage__a { z-index: 0; }
.jg-collage__b { z-index: 2; }

.jg-why__head {
	text-align: center;
}

.jg-why__head h2 {
	margin-top: 1.25rem !important;
}

/* Teal dot that sits on a heading. */
.jg-dot {
	position: relative;
	isolation: isolate;
	display: table;
	margin-inline: auto !important;
}

.jg-dot::before {
	content: "";
	position: absolute;
	left: -0.32em;
	top: -0.12em;
	width: 0.6em;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--jg-teal);
	z-index: -1;
	animation: jg-float 8s ease-in-out infinite;
}

.jg-dot--end::before {
	left: auto;
	right: -0.4em;
	top: -0.18em;
	z-index: 0;
	opacity: 0.95;
}

.jg-why__list {
	position: relative;
	margin-top: clamp(3rem, 6vw, 5rem) !important;
	padding-left: clamp(0rem, 26vw - 6rem, 21rem);
}

.jg-why__row {
	display: grid;
	grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
}

.jg-why__row + .jg-why__row {
	margin-top: clamp(1.5rem, 3.5vw, 3.5rem) !important;
}

.jg-why .is-style-card {
	padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3.25rem);
	border-radius: 1.5rem;
	background: var(--jg-paper);
	font-size: 1.0625rem;
	line-height: 1.42;
}

.jg-why__claim {
	position: relative;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* Vertical connector lines above each claim. */
.jg-why__claim::before {
	content: "";
	position: absolute;
	left: 3.5rem;
	bottom: calc(100% + 1.75rem);
	width: 1px;
	height: clamp(3rem, 8vw, 9rem);
	background: var(--jg-black);
}

/* --------------------------------------------------------------------------
   7. Team
   -------------------------------------------------------------------------- */

.jg-team {
	padding-bottom: 0;
	border-top: 1px solid #d9d9d9;
}

.jg-team__head {
	position: relative;
	text-align: center;
}

.jg-team__head h2 {
	margin-top: 1rem !important;
	padding-inline: 1.5rem;
	background: var(--jg-mist);
}

/* Rule running in from the left to the heading. */
.jg-team__head::before {
	content: "";
	position: absolute;
	left: -100vw;
	right: 50%;
	top: 64%;
	height: 1px;
	background: var(--jg-black);
	z-index: 0;
}

.jg-team__head > * {
	position: relative;
	z-index: 1;
}

.jg-member {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

.jg-team__head + .jg-member {
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

.jg-member + .jg-member {
	position: relative;
}

/* Full-width divider between members. */
.jg-member + .jg-member::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100vw;
	right: -100vw;
	height: 1px;
	background: var(--jg-black);
}

.jg-member__info h3 {
	margin-top: 1.5rem !important;
	font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
	letter-spacing: -0.03em;
}

.jg-member__info h3 + p {
	max-width: 28rem;
	margin-top: 1.5rem !important;
	font-size: 1.0625rem;
	line-height: 1.38;
}

:root .is-style-circle img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.jg-member__photo {
	width: clamp(12rem, 19vw, 17rem);
	margin: 0 !important;
}

.jg-member__photo img {
	filter: grayscale(1);
	transition: transform 0.6s var(--jg-ease);
}

.jg-member:hover .jg-member__photo img {
	transform: scale(1.03);
}

.jg-member__quote {
	max-width: 26rem;
	justify-self: end;
	font-size: 1.125rem;
	line-height: 1.38;
}

/* --------------------------------------------------------------------------
   8. Call to action
   -------------------------------------------------------------------------- */

.jg-cta {
	padding-block: clamp(4.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
}

.jg-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	gap: 2rem;
	align-items: end;
}

.jg-cta h2 {
	margin-top: 1.5rem; 
}

.jg-cta .jg-lead {
	margin-top: 1.25rem !important;
}

.jg-cta .wp-block-buttons {
	margin-top: 2.5rem !important;
}

.jg-cta__pieces {
	width: min(100%, 34rem);
	margin: 0 0 0 auto !important;
	animation: jg-drift 12s ease-in-out infinite;
}

.jg-cta__pieces img {
	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.jg-footer-wrap {
	padding-block: 0 1.25rem;
	padding-inline: 1.25rem !important;
}

:root .jg-footer-wrap > .jg-footer {
	max-width: none;
}

.jg-footer {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.7fr);
	gap: 2.5rem;
	padding: clamp(2.5rem, 4vw, 3.75rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem);
	border-radius: 1.75rem;
	background: #141414;
}

.jg-footer a {
	color: inherit;
}

.jg-footer__links p {
	font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.2;
}

.jg-footer__links p + p {
	margin-top: 1.4rem !important;
}

.jg-footer__contact {
	font-size: 1.0625rem;
	line-height: 1.3;
}

.jg-footer__label {
	text-transform: uppercase;
}

.jg-footer__label + p {
	margin-top: 0.75rem !important;
}

.jg-arrow-link {
	text-transform: uppercase;
	margin-top: 1.75rem !important;
}

.jg-arrow-link + .jg-arrow-link {
	margin-top: 1.25rem !important;
}

.jg-arrow-link a::after {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-left: 0.5em;
	background: currentColor;
	-webkit-mask: var(--jg-arrow) center / contain no-repeat;
	mask: var(--jg-arrow) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Plain pages and posts
   -------------------------------------------------------------------------- */

.jg-page {
	padding-top: calc(var(--jg-header-h) + clamp(4rem, 8vw, 7rem));
	padding-bottom: var(--jg-section-y);
}

.jg-page__title {
	margin-bottom: 2.5rem !important;
	font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
}

/* --------------------------------------------------------------------------
   Motion — subtle, CSS-only (transform and opacity, cheap for the browser)
   -------------------------------------------------------------------------- */

@keyframes jg-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes jg-sway {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(1.2deg); }
}

@keyframes jg-drift {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(-6px, -10px) rotate(-1deg); }
}

/* Scroll reveal. Only active when JavaScript runs (html.jg-js). */
.jg-js .jg-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s ease, transform 0.9s var(--jg-ease);
	transition-delay: var(--jg-delay, 0s);
}

.jg-js .jg-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* The tilted painting keeps its rotation while revealing. */
.jg-js .jg-hero__painting {
	opacity: 0;
	transform: rotate(9deg) translateY(30px) scale(0.97);
	transition: opacity 1.2s ease 0.2s, transform 1.4s var(--jg-ease) 0.2s;
}

.jg-js .jg-hero__painting.is-visible {
	opacity: 1;
	transform: rotate(4.5deg);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.jg-js .jg-reveal,
	.jg-js .jg-hero__painting {
		opacity: 1;
		transform: none;
	}

	.jg-js .jg-hero__painting { transform: rotate(4.5deg); }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.jg-collage { display: none; }

	.jg-why__list { padding-left: 0; }

	.jg-why__row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

	.jg-cards { gap: 1.25rem; }

	.jg-sectors::before { right: 4%; }
}

@media (max-width: 900px) {
	:root { --jg-header-h: 4rem; }

	.jg-hero {
		min-height: 0;
	}

	.jg-hero__grid,
	.jg-split,
	.jg-network__grid,
	.jg-process__grid,
	.jg-cta__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.jg-hero__art {
		width: min(100%, 30rem);
		margin-inline: auto;
		padding-block: 2rem 3rem;
	}

	.jg-hero__contact::after { height: 3.5rem; }

	.jg-intro__text {
		justify-self: start;
		max-width: 36rem;
	}

	.jg-network__copy { padding-block: 3.5rem 1rem; }

	.jg-network::before { left: 70%; }

	.jg-map {
		min-height: 0;
		aspect-ratio: 4 / 3.4;
		margin-bottom: 1.5rem !important;
	}

	.jg-sectors__head h2 { max-width: 60%; }

	.jg-cards {
		grid-template-columns: minmax(0, 1fr);
		max-width: 36rem;
	}

	.jg-cards .is-style-card { min-height: 17rem; }

	.jg-process__title { padding-bottom: 3rem; }

	.jg-process__title::after { display: none; }

	.jg-steps { padding-top: 0.5rem; }

	.jg-why__row { grid-template-columns: minmax(0, 1fr); gap: 1rem; }

	.jg-why__claim { order: -1; }

	.jg-why__claim::before { display: none; }

	.jg-why__row + .jg-why__row { margin-top: 3rem !important; }

	.jg-member {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "info photo" "quote quote";
		row-gap: 2rem;
	}

	.jg-member__info { grid-area: info; }
	.jg-member__photo { grid-area: photo; width: clamp(8rem, 26vw, 13rem); }
	.jg-member__quote { grid-area: quote; justify-self: start; max-width: 36rem; }

	.jg-cta h2 { margin-top: 2rem !important; }

	.jg-cta__pieces {
		width: min(70%, 22rem);
		margin-top: 1rem !important;
	}

	.jg-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

	.jg-footer .jg-brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.jg-site-header { padding: 0.5rem; }

	.jg-header__bar { padding-left: 1rem; }

	.jg-header__cta { display: none; }

	.jg-brand { font-size: 1.0625rem; }

	.jg-brand a::before { width: 2.1rem; height: 2.1rem; }

	.jg-hero { padding-top: calc(var(--jg-header-h) + 3rem); }

	.jg-hero .wp-block-buttons { gap: 0.75rem; }

	.jg-hero__painting::before { top: -4rem; height: 5rem; }

	.jg-hero__painting::after { bottom: -4rem; height: 4.5rem; }

	.jg-sectors::before {
		width: 8.5rem;
		right: 1rem;
	}

	.jg-sectors__head h2 { max-width: none; padding-top: 3.5rem; }

	.jg-process__head {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.jg-steps {
		padding-left: 1.25rem;
	}

	.jg-step__top { gap: 1rem; }

	:root .is-style-pill.jg-pill--teal { min-width: 0; padding-inline: 1.6em; }

	.jg-step:first-child .jg-step__num::before { left: -0.35em; }

	.jg-team__head::before { display: none; }

	.jg-member {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "photo" "info" "quote";
	}

	.jg-member__photo { width: 11rem; }

	.jg-footer { grid-template-columns: minmax(0, 1fr); }
}