:root {
	--container: max(2rem, calc((100% - 90rem) / 2));
}

@layer base {
	body {
		font-weight: var(--text-body--font-weight);
		line-height: var(--text-body--line-height);
		color: var(--color-jaf-gray);
	}

	p {
		font-size: var(--text-body);
	}

	:where(h1, h2, h3, h4, h5, h6, .text-display, .text-display-sm) {
		font-family: var(--font-display);
		font-weight: 700;
	}

	a {
		transition: color 0.15s;

		&:not(.btn):hover {
			text-decoration: underline;
		}
	}

	button {
		cursor: pointer;
		transition:
			color 0.15s,
			background-color 0.15s;
	}

	details[open] summary svg {
		rotate: 180deg;
	}

	summary {
		cursor: pointer;
		list-style: none;

		&::marker {
			display: none;
		}
	}

	select {
		appearance: none;
		background:
			url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='4'%20viewBox='0%200%207%204'%20fill='currentcolor'%3e%3cpath%20d='M6.99999%200L3.5%203.5L0%200'%20/%3e%3c/svg%3e")
				no-repeat right 0.5rem center,
			var(--color-jaf-off-white);
	}
}

@layer utilities {
	.max-w-container {
		padding-inline: var(--container);
	}

	.text-eyebrow {
		text-transform: uppercase;
	}

	.grid-auto-fill {
		grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
	}
}

@layer components {
	.btn {
		display: inline-flex;
		align-items: center;
		padding: 0.625rem;
		font-weight: var(--text-nav--font-weight);
		line-height: var(--text-nav--line-height);
		letter-spacing: var(--text-nav--letter-spacing);
		transition: text-shadow 0.15s;

		&:not(.btn-secondary):is(:hover, :focus-visible) {
			text-shadow:
				0.02em 0,
				-0.02em 0;
		}

		&.btn-blue {
			color: #fff;
			background-color: var(--color-jaf-blue);
		}

		&.btn-white {
			color: var(--color-jaf-blue);
			background-color: #fff;
		}

		&.btn-secondary {
			gap: 0.75rem;
			padding: 0;
			font-weight: 800;
			background-color: #0000;
		}
	}

	.tag {
		display: inline-flex;
		gap: 0.625rem;
		align-items: center;
		justify-content: center;
		padding: 0.25rem 0.5rem;
		font-weight: var(--text-nav--font-weight);
		line-height: var(--text-nav--line-height);
		letter-spacing: var(--text-nav--letter-spacing);
	}

	.eyebrow {
		padding: 2px 0.625rem;
		font-size: 1.25rem;
		font-weight: 800;
		letter-spacing: -0.44px;
	}

	:is(.tag, .eyebrow) {
		line-height: 1.1;
		color: var(--combo-color);
		background-color: var(--combo-bg);

		&.combo-light {
			--combo-color: var(--color-jaf-blue);
			--combo-bg: var(--color-jaf-blue-light);
		}

		&.combo-medium {
			--combo-color: var(--color-jaf-blue);
			--combo-bg: var(--color-jaf-blue-med);
		}

		&.combo-used {
			--combo-color: var(--color-jaf-off-white);
			--combo-bg: var(--color-jaf-blue-used);
		}
	}

	.btn-sq {
		position: absolute;
		bottom: 0;
		z-index: 1;
		display: grid;
		place-items: center;
		width: 4rem;
		height: 4rem;
		color: #fff;
		background-color: var(--color-jaf-blue-dark);
		transition:
			color 0.15s,
			background-color 0.15s;

		@media (width>=992px) {
			width: 6rem;
			height: 6rem;
		}

		& svg {
			width: 30%;
			height: auto;
		}

		&:hover {
			color: var(--color-jaf-blue);
			background-color: #fff;
		}
	}
}

.body p + p {
	margin-top: 0.75rem;
}

@scope (#site-footer) {
	h2 {
		font-weight: var(--text-h3--font-weight);
	}

	ul:not(nav ul) {
		font-size: 0.875rem;
	}
}

@scope (#mobile-nav) {
	.bars {
		position: relative;
		display: block;
		inline-size: 1.5rem;
		block-size: 2px;
		transition: background-color 0.3s;

		&,
		&::before,
		&::after {
			background-color: currentcolor;
		}

		&::before,
		&::after {
			position: absolute;
			inset-inline: 0;
			block-size: 2px;
			content: "";
			transition:
				translate 0.3s,
				rotate 0.3s;
		}

		&::before {
			translate: 0 -0.5rem;
		}

		&::after {
			translate: 0 0.5rem;
		}
	}

	#site-nav {
		inset: var(--header-height) 0 0;
		visibility: hidden;
		overscroll-behavior: contain;
		opacity: 0%;
		translate: 0 -0.75rem;
		transition:
			opacity 0.3s,
			translate 0.3s,
			visibility 0.3s;
	}

	:scope:has(#nav-toggle[aria-expanded="true"]) {
		& .bars {
			background-color: #0000;

			&::before,
			&::after {
				translate: 0;
			}

			&::before {
				rotate: 45deg;
			}

			&::after {
				rotate: -45deg;
			}
		}

		& #site-nav {
			visibility: visible;
			opacity: 100%;
			translate: 0;
		}
	}

	li:not(details li) {
		border-block-end: 1px solid color-mix(in oklch, currentcolor 25%, transparent);
	}

	summary svg {
		flex: none;
		transition: rotate 0.3s;
	}
}

#site-header {
	--header-bg: white;

	background-color: color-mix(in oklch, var(--header-bg) var(--header-scroll), transparent);

	&[data-variant="white"] {
		--header-bg: var(--color-jaf-blue);
	}

	&:has(#nav-toggle[aria-expanded="true"]) {
		--header-scroll: 100%;
	}

	& .nav-dropdown:is(:hover, [open]) summary {
		text-decoration: underline;
	}
}

@scope (.link) {
	svg {
		transition: rotate 150ms ease;
	}

	:scope.static:is(:where(.group-static):hover *) svg {
		rotate: -90deg;
	}

	&:hover {
		&:not(.static) {
			text-decoration: underline;
		}

		svg {
			rotate: -90deg;
		}
	}
}

@scope (.breadcrumbs) {
	ol {
		padding: 0;
		font-size: 0.875rem;
		list-style: none;
	}

	li:not(:last-child)::after {
		margin-inline: 0.5rem;
		content: "/";
	}

	li:last-child {
		font-weight: 700;
	}
}

@scope (.error) {
	:scope {
		min-height: min(100vh, 56rem);
		padding-top: var(--header-height);
	}

	.inner {
		margin-top: calc((16rem - var(--header-height)) * -1);
	}

	.code {
		font-size: clamp(3rem, 15vw, 12rem);
		line-height: normal;
	}

	hgroup p {
		font-size: var(--text-body-sm);
	}
}

#contact-cta {
	--hover-delay: 0ms;

	padding-left: var(--container);

	&,
	h2,
	.btn {
		transition:
			color 150ms var(--hover-delay),
			background-color 150ms var(--hover-delay);
	}

	.btn svg {
		transition: rotate 150ms var(--hover-delay);
	}

	&:hover {
		--hover-delay: 150ms;

		background-color: var(--color-jaf-blue-dark);

		h2 {
			color: white;
		}

		.btn {
			color: var(--color-jaf-blue);
			background-color: white;

			svg {
				rotate: -90deg;
			}
		}
	}
}

@scope (#hero) {
	:scope {
		padding-top: var(--header-height);
	}

	.cover {
		transform: scaleY(0);
		transform-origin: bottom;
		transition: transform 500ms ease;
	}

	.inner.covered .cover {
		transform: scaleY(1);
	}

	.media img {
		max-height: calc(100svh - var(--header-height, 0) - var(--hero-chrome));
	}

	.panel {
		padding-left: var(--container);
	}
}

#proof {
	height: min(100vh, 64rem);

	& .bg {
		height: calc(100% + 18%);
	}

	& .stat {
		padding: clamp(3rem, 6vw, 5rem);
	}
}

#eeo-statement {
	background-color: #f8f8fa;

	& p {
		font-size: var(--text-body-sm);
		font-style: italic;
	}
}

#testimonials {
	--swiper-pagination-bullet-size: 10px;
	--swiper-pagination-bullet-horizontal-gap: 0;
	--swiper-pagination-bullet-inactive-color: var(--color-jaf-blue-med);
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-color: var(--color-jaf-blue);

	& cite {
		font-style: italic;
		font-weight: 500;
		color: var(--color-jaf-blue);
	}
}

@scope (#faq) {
	li {
		border-block-start: 1px solid var(--color-jaf-blue-med);

		&:last-child {
			border-block-end: 1px solid var(--color-jaf-blue-med);
		}
	}

	summary svg {
		rotate: 45deg;
		transition: rotate 0.3s;
	}

	summary.open svg {
		rotate: 225deg;
	}

	.content {
		overflow: hidden;

		& p {
			margin-block-start: 0.375rem;
			font-size: var(--text-body-sm);
		}
	}

	@supports (interpolate-size: allow-keywords) {
		:scope {
			interpolate-size: allow-keywords;
		}

		details::details-content {
			block-size: 0;
			overflow: hidden;
			transition:
				block-size 0.3s ease,
				content-visibility 0.3s allow-discrete;
		}

		details[open] {
			&::details-content {
				block-size: auto;
			}

			& summary svg {
				rotate: 225deg;
			}
		}
	}
}

@scope (#contact-form) {
	.field {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	label {
		display: block;
		font-size: 0.875rem;
		font-style: italic;
		color: var(--color-jaf-blue);
	}

	input,
	textarea {
		border: 1px solid var(--color-jaf-blue-light);

		&:focus-visible {
			outline: 2px solid var(--color-jaf-blue);
			outline-offset: 2px;
		}
	}

	input {
		height: 3rem;
		padding-inline: 0.75rem;
	}

	textarea {
		padding: 0.5rem;
	}
}

@scope (.project-card) {
	p {
		font-size: var(--text-body-sm);
	}
}

@scope (#our-clients) {
	.swiper-slide img {
		max-width: 7.5rem;
	}

	button:is(:hover, :focus-visible) {
		color: var(--color-jaf-blue-med);
	}
}

@scope (#filter-strip) {
	p {
		font-size: var(--text-h4);
		font-weight: var(--text-h4--font-weight);
		color: var(--color-jaf-blue);
	}

	select {
		cursor: pointer;
		border: 0;
		border-radius: 0;
	}

	.clear:hover {
		color: var(--color-jaf-blue-used);
	}
}

@scope (.services-stack) {
	:scope {
		--card-height: calc(100svh - var(--header-height, 0px));

		view-timeline-name: --services;
		view-timeline-axis: block;
	}

	.service {
		--index: 0;

		top: var(--header-height, 0);
		height: var(--card-height);
	}

	.service:nth-child(2) {
		--index: 1;
	}

	.service:nth-child(3) {
		--index: 2;
	}

	.service:nth-child(4) {
		--index: 3;
	}

	@media (height<=40rem) {
		.service .content {
			padding: 1.5rem;
		}
	}

	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.service:not(:last-child) {
				animation-name: service-recede;
				animation-duration: auto;
				animation-timing-function: linear;
				animation-fill-mode: both;
				animation-timeline: --services;
				animation-range: calc((var(--index) + 1) * var(--card-height))
					calc((var(--index) + 2) * var(--card-height));
			}
		}
	}
}

@keyframes service-recede {
	to {
		opacity: 0%;
		transform: scale(0.92);
	}
}

@scope (.market) {
	a:hover {
		text-decoration: none;
	}

	.top {
		transition-property: translate;
	}

	.arrow {
		translate: 0 100%;
		transition-property: translate;
	}

	@media (width>=48rem) and (hover: hover) {
		:scope:hover,
		:scope:has(a:focus-visible) {
			& .explore svg {
				rotate: -90deg;
			}

			& .top {
				translate: 0 -100%;
			}

			& .arrow {
				translate: 0;
			}
		}
	}
}

@scope (#services) {
	.service {
		--slide: calc(100cqw * 1 / 2);
		--gutter: clamp(1.5rem, 8cqw, 4rem);

		container-type: inline-size;

		& .part {
			transition-timing-function: cubic-bezier(0.65, 0.01, 0.05, 1);
		}

		& .content {
			padding: 2rem var(--gutter);
		}

		& .arrow {
			bottom: 2rem;
			left: var(--gutter);
			width: clamp(4rem, 22cqw, 12rem);
			transform: translateY(calc(100% + 2rem));

			& svg {
				width: 100%;
				height: auto;
			}
		}
	}

	@media (hover: hover) {
		.service:hover {
			& .top,
			& .content {
				transform: translateY(calc(var(--slide) * -1));
			}

			& .arrow {
				transform: translateY(0);
			}
		}
	}
}

#home-hero {
	min-height: 48rem;

	& .overlay {
		background: oklch(100% 0 0deg/90%);
	}
}

/* $vite$:1 */

@scope (#site-search) {
	.field {
		position: relative;
		flex: 1;
	}

	input[type="search"] {
		width: 100%;
		height: 3rem;
		padding-inline: 0.75rem 2.75rem;
		color: var(--color-jaf-gray);
		background-color: white;
		border: 1px solid var(--color-jaf-blue-light);
		border-radius: 0;

		&::-webkit-search-cancel-button {
			appearance: none;
		}

		&:focus-visible {
			outline: 2px solid var(--color-jaf-blue-med);
			outline-offset: 2px;
		}
	}

	.clear {
		position: absolute;
		top: 50%;
		right: 0.75rem;
		display: inline-flex;
		padding: 0.25rem;
		color: var(--color-jaf-gray);
		translate: 0 -50%;

		&:hover {
			color: var(--color-jaf-blue);
		}
	}
}

@scope (#search-results) {
	.result a:hover {
		text-decoration: none;

		h3 {
			text-decoration: underline;
		}
	}
}

@scope (#sitemap) {
	.tree {
		padding-left: 1.25rem;
		list-style: disc outside;

		& ul {
			padding-left: 1.25rem;
			margin-top: 0.75rem;
			list-style: circle outside;
		}

		& ul ul {
			list-style: square outside;
		}

		& li {
			display: list-item;

			& + li {
				margin-top: 0.75rem;
			}

			&::marker {
				color: var(--color-jaf-blue);
			}
		}

		& .label {
			font-size: var(--text-h4);
			font-weight: var(--text-h4--font-weight);
			line-height: var(--text-h4--line-height);
			color: var(--color-jaf-blue);
		}

		& a {
			font-size: var(--text-nav);
			letter-spacing: var(--text-nav--letter-spacing);
			color: var(--color-jaf-gray);

			&.label {
				font-size: var(--text-h4);
				letter-spacing: normal;
				color: var(--color-jaf-blue);
			}

			&:hover {
				color: var(--color-jaf-blue-used);
				text-decoration: underline;
			}
		}
	}
}

@scope (.error) {
	/* 404 copy is authored in admin: paragraphs read small, links anywhere below the breadcrumbs become the arrow link */
	.inner p {
		/* static 404 build sets --text-body-sm to 1rem for this page; match it */
		font-size: var(--text-nav);
	}

	.inner a {
		display: inline-flex;
		gap: 0.75rem;
		align-items: center;
		font-weight: 800;
		color: inherit;
		text-decoration: none;

		&::after {
			width: 0.75rem;
			height: 0.75rem;
			content: "";
			background-color: currentcolor;
			mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3e%3cpath%20d='M13.147%2014H14V3.7639H12.294V11.0891L1.80909%200.604215L1.20487%200L0%201.20487L0.604214%201.80909L11.0891%2012.294H3.7639V14H13.147Z'/%3e%3c/svg%3e")
				center / contain no-repeat;
			transition: rotate 0.15s;
		}

		&:hover {
			text-decoration: underline;

			&::after {
				rotate: -90deg;
			}
		}
	}

	/* Blocks in the body copy (paragraph, link row) keep the section rhythm */
	.inner .body > * + *,
	.inner .body > * > * + * {
		margin-top: 2.5rem;
	}

	/* Links placed side by side when the admin puts them in one paragraph or div */
	.inner :is(p, div):has(> a) {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		justify-content: center;
		font-size: var(--text-nav);
	}
}

/* Projects listing: dim the cards while a Go / Clear filters request is in flight (projects-listing.js); Load More shows its own spinner */
#portfolio {
	transition: opacity 0.15s;

	&[aria-busy="true"] {
		pointer-events: none;
		opacity: 0.5;
	}
}

@scope (#gallery) {
	.swiper-slide .photo {
		max-height: min(36rem, 100dvh);
	}
}

@scope (#standard .body) {
	/* Standard text pages (privacy, terms, cookie policy): long-form copy authored in the CMS editor */
	h2,
	h3,
	h4 {
		margin-top: 2.5rem;
		color: var(--color-jaf-blue);
	}

	h2 {
		font-size: var(--text-h3);
		line-height: var(--text-h3--line-height);
		letter-spacing: var(--text-h3--letter-spacing);
	}

	h3 {
		font-size: var(--text-h4);
		font-weight: var(--text-h4--font-weight);
		line-height: var(--text-h4--line-height);
	}

	h4 {
		font-size: var(--text-body);
		font-weight: 600;
	}

	:is(h2, h3, h4) + p {
		margin-top: 0.75rem;
	}

	p + p,
	p + ul,
	p + ol,
	ul + p,
	ol + p {
		margin-top: 1rem;
	}

	ul,
	ol {
		padding-left: 1.5rem;
		font-size: var(--text-body);
	}

	ul {
		list-style: disc outside;
	}

	ol {
		list-style: decimal outside;
	}

	li + li {
		margin-top: 0.5rem;
	}

	li::marker {
		color: var(--color-jaf-blue);
	}

	a {
		color: var(--color-jaf-blue);
		text-decoration: underline;

		&:hover {
			color: var(--color-jaf-blue-used);
		}
	}

	table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		margin: 1.5rem 0;
	}

	thead th {
		background-color: var(--color-jaf-off-white);
		color: initial;
		font-weight: 800;
	}

	th,
	td {
		padding: 12px 16px;
		text-align: left;
		border-bottom: 1px solid var(--color-jaf-blue-light);
	}
}