:root {
		--sjh-blue: var(--sjh-metal, #0d4c3d);
		--sjh-ink: #101010;
		--sjh-soft: #f8f5ef;
		--sjh-pad: clamp(24px, 5.4vw, 72px);
		--sjh-serif: "Freight Big Pro", "Cormorant Garamond", Georgia, serif;
		--sjh-body: "Lora", Georgia, serif;
	}

	body.sjh-service-template {
		background: #fff;
		color: var(--sjh-ink);
	}

	.sjh-service-page,
	.sjh-service-page * {
		box-sizing: border-box;
		letter-spacing: 0;
	}

	.sjh-service-page {
		overflow: hidden;
		background: #fff;
		font-family: var(--sjh-body);
	}

	.sjh-service-hero {
		padding: clamp(150px, 13vw, 230px) var(--sjh-pad) clamp(62px, 8vw, 108px);
	}

	.sjh-service-hero-inner {
		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.72fr);
		gap: clamp(44px, 7vw, 120px);
		align-items: start;
	}

	.sjh-service-hero h1 {
		width: 100%;
		max-width: none;
		margin: 0;
		color: var(--sjh-blue);
		font-family: var(--sjh-serif);
		font-size: clamp(72px, 8.8vw, 158px);
		font-weight: 600;
		line-height: 0.9;
		text-wrap: balance;
	}

	.sjh-service-hero-copy {
		padding-top: 0.18em;
	}

	.sjh-service-hero-copy p,
	.sjh-service-sticky p,
	.sjh-service-editorial-copy p {
		max-width: none;
		margin: 0;
		color: #222;
		font-family: var(--sjh-body);
		font-size: clamp(24px, 2.35vw, 42px);
		line-height: 1.35;
	}

	.sjh-service-hero-copy p + .sjh-service-text-link {
		margin-top: 38px;
	}

	.sjh-service-text-link {
		display: inline-flex;
		align-items: center;
		color: var(--sjh-blue);
		border-bottom: 1px solid currentColor;
		font: 700 15px/1 Arial, sans-serif;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.sjh-service-text-link::after {
		content: "→";
		margin-left: 10px;
		transform: translateX(0);
		transition: transform 220ms ease;
	}

	.sjh-service-text-link:hover::after,
	.sjh-service-text-link:focus-visible::after {
		transform: translateX(6px);
	}

	.sjh-service-media-strip {
		position: relative;
		width: 100%;
		height: clamp(360px, 54vw, 760px);
		overflow: hidden;
		background: #111;
	}

	.sjh-service-media-strip img,
	.sjh-service-image-stack img,
	.sjh-service-related-card img,
	.sjh-service-index-card img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}

	.sjh-service-media-strip img {
		object-position: 50% 42%;
		filter: saturate(0.96) contrast(1.02);
		transform: scale(1.012);
	}

	.sjh-service-story {
		padding: clamp(84px, 11vw, 150px) var(--sjh-pad);
		background: #fff;
	}

	.sjh-service-story-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.62fr);
		gap: clamp(40px, 6vw, 92px);
		align-items: start;
	}

	.sjh-service-image-stack {
		display: grid;
		gap: clamp(18px, 2vw, 30px);
	}

	.sjh-service-image-stack figure,
	.sjh-service-mini-grid figure {
		position: relative;
		margin: 0;
		overflow: hidden;
		background: #111;
	}

	.sjh-service-image-stack > figure {
		aspect-ratio: 16 / 10;
	}

	.sjh-service-mini-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(18px, 2vw, 30px);
	}

	.sjh-service-mini-grid figure {
		aspect-ratio: 1 / 1.08;
	}

	.sjh-service-sticky {
		position: sticky;
		top: 118px;
		display: grid;
		gap: 28px;
	}

	.sjh-service-sticky p,
	.sjh-service-editorial-copy p {
		font-size: clamp(20px, 2.1vw, 32px);
		line-height: 1.45;
	}

	.sjh-service-detail-list {
		display: grid;
		margin-top: 20px;
		padding-top: 24px;
		border-top: 1px solid rgba(13, 76, 61, 0.24);
	}

	.sjh-service-detail-list span {
		display: grid;
		grid-template-columns: minmax(88px, .32fr) minmax(0, .68fr);
		gap: 18px;
		align-items: center;
		padding: 18px 0;
		border-bottom: 1px solid rgba(13, 76, 61, 0.18);
	}

	.sjh-service-detail-list small {
		color: var(--sjh-blue);
		font: 700 14px/1 Arial, sans-serif;
		letter-spacing: .12em;
		text-transform: uppercase;
	}

	.sjh-service-detail-list strong {
		color: var(--sjh-ink);
		font: 600 clamp(18px, 1.6vw, 25px)/1.12 var(--sjh-body);
	}

	.sjh-service-editorial {
		position: relative;
		padding: clamp(78px, 9vw, 124px) var(--sjh-pad);
		background:
			radial-gradient(circle at 18% 24%, rgba(210, 225, 201, 0.26), transparent 28%),
			linear-gradient(135deg, #eff3eb 0%, #f8f7f0 54%, #e6eee5 100%);
		color: var(--sjh-ink);
		overflow: hidden;
	}

	.sjh-service-editorial::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(90deg, rgba(13, 76, 61, 0.075) 1px, transparent 1px),
			linear-gradient(0deg, rgba(13, 76, 61, 0.055) 1px, transparent 1px);
		background-size: clamp(62px, 7vw, 116px) clamp(62px, 7vw, 116px);
		mask-image: linear-gradient(90deg, rgba(0, 0, 0, .78), transparent 82%);
		pointer-events: none;
	}

	.sjh-service-editorial-inner {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
		gap: clamp(30px, 5vw, 82px);
		align-items: center;
	}

	.sjh-service-editorial-copy {
		max-width: 880px;
	}

	.sjh-service-editorial-media {
		position: relative;
		min-height: clamp(360px, 42vw, 620px);
		margin: 0;
		overflow: hidden;
		background: var(--sjh-ink);
		box-shadow: 0 28px 80px rgba(13, 76, 61, 0.18);
	}

	.sjh-service-editorial-media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 54%);
	}

	.sjh-service-editorial-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 900ms cubic-bezier(.16, 1, .3, 1), filter 900ms ease;
	}

	.sjh-service-editorial:hover .sjh-service-editorial-media img {
		transform: scale(1.035);
		filter: saturate(1.04) contrast(1.02);
	}

	.sjh-service-editorial-media figcaption {
		position: absolute;
		z-index: 2;
		inset: auto clamp(18px, 2.2vw, 32px) clamp(18px, 2.2vw, 32px);
		display: grid;
		gap: 10px;
		color: #fff;
	}

	.sjh-service-editorial-media figcaption span {
		font: 800 12px/1 Inter, Arial, sans-serif;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, .72);
	}

	.sjh-service-editorial-media figcaption strong {
		max-width: 18rem;
		font: 650 clamp(22px, 2vw, 34px)/1 Inter, Arial, sans-serif;
		letter-spacing: -.045em;
	}

	.sjh-service-editorial h2,
	.sjh-service-related h2 {
		margin: 0;
		font-family: Inter, Arial, sans-serif;
		font-size: clamp(42px, 5.4vw, 94px);
		font-weight: 850;
		letter-spacing: -.07em;
		line-height: 0.92;
		text-wrap: balance;
	}

	.sjh-service-editorial-copy p {
		max-width: 760px;
		margin: clamp(22px, 2.4vw, 34px) 0 0;
		color: rgba(8, 30, 24, 0.78);
		font-size: clamp(21px, 2.25vw, 34px);
		line-height: 1.24;
	}

	.sjh-service-editorial-steps {
		display: grid;
		margin-top: clamp(30px, 4vw, 58px);
		border-top: 1px solid rgba(13, 76, 61, .2);
	}

	.sjh-service-editorial-steps span {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 18px;
		align-items: baseline;
		padding: clamp(16px, 1.7vw, 24px) 0;
		border-bottom: 1px solid rgba(13, 76, 61, .16);
	}

	.sjh-service-editorial-steps small {
		color: var(--sjh-blue);
		font: 850 12px/1 Inter, Arial, sans-serif;
		letter-spacing: .14em;
	}

	.sjh-service-editorial-steps strong {
		color: var(--sjh-ink);
		font: 720 clamp(18px, 1.7vw, 28px)/1.08 Inter, Arial, sans-serif;
		letter-spacing: -.045em;
	}

	.sjh-service-related {
		padding: clamp(72px, 8vw, 118px) var(--sjh-pad);
		background: var(--sjh-soft);
	}

	.sjh-service-related-head {
		display: grid;
		grid-template-columns: minmax(0, .9fr) minmax(260px, .55fr);
		gap: clamp(24px, 5vw, 82px);
		align-items: end;
	}

	.sjh-service-related h2 {
		color: var(--sjh-blue);
		font-size: clamp(42px, 5.2vw, 88px);
	}

	.sjh-service-related-head p {
		max-width: 560px;
		margin: 0;
		color: rgba(8, 30, 24, .66);
		font: 500 clamp(18px, 1.55vw, 25px)/1.36 Inter, Arial, sans-serif;
		letter-spacing: -.03em;
	}

	.sjh-service-related-grid,
	.sjh-service-index-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(18px, 2vw, 30px);
		margin-top: clamp(34px, 4.8vw, 64px);
	}

	.sjh-service-related-card,
	.sjh-service-index-card {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto;
		gap: clamp(12px, 1.2vw, 18px);
		overflow: hidden;
		background: rgba(255, 255, 255, .48);
		color: var(--sjh-ink);
		text-decoration: none;
		border-top: 1px solid rgba(13, 76, 61, .18);
		padding: clamp(12px, 1.35vw, 20px);
	}

	.sjh-service-index-card {
		min-height: 0;
	}

	.sjh-service-related-card::before,
	.sjh-service-index-card::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 0;
		background: rgba(13, 76, 61, .08);
		transition: width 520ms cubic-bezier(.16, 1, .3, 1);
		pointer-events: none;
	}

	.sjh-service-related-card:hover::before,
	.sjh-service-related-card:focus-visible::before,
	.sjh-service-index-card:hover::before,
	.sjh-service-index-card:focus-visible::before {
		width: 100%;
	}

	.sjh-service-related-card figure,
	.sjh-service-index-card figure {
		grid-column: 1 / -1;
		position: relative;
		height: clamp(200px, 20vw, 310px);
		margin: 0;
		overflow: hidden;
		background: var(--sjh-ink);
	}

	.sjh-service-related-card figure::after,
	.sjh-service-index-card figure::after {
		content: "";
		position: absolute;
		inset: 0;
		border: 1px solid rgba(255, 255, 255, 0);
		transition: inset 520ms cubic-bezier(.16, 1, .3, 1), border-color 520ms ease;
	}

	.sjh-service-related-card img,
	.sjh-service-index-card img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		opacity: .92;
		transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease;
	}

	.sjh-service-related-card:hover img,
	.sjh-service-related-card:focus-visible img,
	.sjh-service-index-card:hover img,
	.sjh-service-index-card:focus-visible img {
		opacity: 1;
		transform: scale(1.045);
	}

	.sjh-service-related-card:hover figure::after,
	.sjh-service-related-card:focus-visible figure::after,
	.sjh-service-index-card:hover figure::after,
	.sjh-service-index-card:focus-visible figure::after {
		inset: 12px;
		border-color: rgba(255, 255, 255, .82);
	}

	.sjh-service-related-card > *,
	.sjh-service-index-card > * {
		position: relative;
		z-index: 1;
	}

	.sjh-service-related-meta {
		grid-column: 1 / 2;
		color: var(--sjh-blue);
		font: 850 12px/1 Inter, Arial, sans-serif;
		letter-spacing: .16em;
	}

	.sjh-service-related-card strong,
	.sjh-service-index-card span {
		grid-column: 1 / -1;
		display: block;
		width: 100%;
		max-width: 14ch;
		color: var(--sjh-ink);
		font: 780 clamp(23px, 1.85vw, 34px)/1.02 Inter, Arial, sans-serif;
		letter-spacing: -.055em;
		text-wrap: balance;
	}

	.sjh-service-related-action {
		grid-column: 1 / -1;
		justify-self: start;
		padding-bottom: 9px;
		border-bottom: 1px solid currentColor;
		color: var(--sjh-blue);
		font: 850 12px/1 Inter, Arial, sans-serif;
		letter-spacing: .12em;
		text-transform: uppercase;
	}

	.sjh-service-index-grid {
		padding: 0 var(--sjh-pad) clamp(88px, 11vw, 150px);
		margin-top: 0;
		background: #fff;
	}

	@media (max-width: 1100px) {
		.sjh-service-hero-inner,
		.sjh-service-story-grid {
			grid-template-columns: 1fr;
		}

		.sjh-service-sticky {
			position: static;
		}
	}

	@media (max-width: 820px) {
		.sjh-service-hero {
			padding-top: 130px;
		}

		.sjh-service-related-grid,
		.sjh-service-index-grid,
		.sjh-service-mini-grid {
			grid-template-columns: 1fr;
		}

		.sjh-service-related-card,
		.sjh-service-index-card {
			min-height: 360px;
		}
	}